185 lines
6.4 KiB
CSS
185 lines
6.4 KiB
CSS
/* Colors */
|
|
|
|
/* ---------------- Variables ---------------- */
|
|
html {
|
|
--border-radius: 5px;
|
|
--accent-color-light: aliceblue;
|
|
--accent-color-middle: rgb(173, 189, 203);
|
|
--accent-color-dark: rgb(24, 47, 56);
|
|
--panel-border_one: var(--accent-color-dark);
|
|
--panel-border_two: var(--accent-color-dark);
|
|
--panel-header: var(--accent-color-dark);
|
|
--panel-background: var(--accent-color-light);
|
|
--body-background: rgb(255, 255, 255);
|
|
--input-background: white;
|
|
--input-background-hover: rgb(216, 222, 227);
|
|
--input-highlight: rgb(86, 176, 255);
|
|
--navvar-background: rgb(179, 200, 218);
|
|
--navbar-buttons-bg: white;
|
|
--navbar-buttons-hover: var(--input-background-hover);
|
|
--input-border-radius: var(--border-radius);
|
|
--link-color: var(--accent-color-dark);
|
|
--link-color-hover: var(--input-highlight);
|
|
--logo-outline-color: var(--input-highlight);}
|
|
|
|
/* Background texture */
|
|
|
|
body { background-image: url('graphgreen.gif'); }
|
|
|
|
|
|
/* ----------------- Others -------------------- */
|
|
|
|
* { scrollbar-width: thin;}
|
|
|
|
img { image-rendering: pixelated;}
|
|
|
|
.logo { position: relative; }
|
|
.logo > img {
|
|
position: absolute;
|
|
width: 80px;
|
|
top: 15px;
|
|
right: -40px;}
|
|
|
|
.links { overflow-y: auto; }
|
|
|
|
.links a { text-decoration: none;}
|
|
|
|
/* ----------------- Fonts -------------------- */
|
|
|
|
@font-face {
|
|
font-family: 'special elite';
|
|
src: url('../fonts/specialelite.woff2') format('woff');
|
|
font-weight: normal;
|
|
font-style: normal;}
|
|
|
|
@font-face {
|
|
font-family: 'honyaji';
|
|
src: url('../fonts/HonyaJi-Re.ttf') format('truetype');
|
|
font-weight: normal;
|
|
font-style: normal;}
|
|
|
|
|
|
@font-face {
|
|
font-family: 'basiic';
|
|
src: url('../fonts/basiic.ttf') format('truetype');
|
|
font-weight: normal;
|
|
font-style: normal;}
|
|
|
|
@font-face {
|
|
font-family: 'beefont';
|
|
src: url('../fonts/beefont.ttf') format('truetype');
|
|
font-weight: normal;
|
|
font-style: normal;}
|
|
|
|
* { text-align: center; }
|
|
|
|
body { font-family: 'special elite', honyaji, basiic, monospace, serif, sans-serif; }
|
|
|
|
/* ----------------- Color -------------------- */
|
|
|
|
.panel {
|
|
position: relative;
|
|
border-radius: 5px;
|
|
border: 2px solid var(--panel-border_one);
|
|
background-color: var(--panel-background);}
|
|
|
|
.chat-history {
|
|
border-radius: var(--chat-border-radius);
|
|
background-color: var(--chat-history-background);}
|
|
|
|
/* ------------- Decorations & dividers (D&D) -------------------- */
|
|
.panel .header { position: relative; }
|
|
.panel .header::after {
|
|
position: absolute;
|
|
bottom: -3px;
|
|
content: "- - --⛤-- - -";
|
|
font-size: 15px;}
|
|
|
|
/* ------------- Navbars stiling ------------------- */
|
|
.about, .links > div, .lang-picker {
|
|
border: 5px groove rgb(214, 236, 255);
|
|
background-color: var(--navbar-buttons-bg);}
|
|
|
|
.about:hover, .links > div:hover, .lang-picker:hover {
|
|
background-color: var(--navbar-buttons-hover);
|
|
transition: background-color 0.1s;}
|
|
|
|
.navbar {
|
|
border-style: solid;
|
|
border-width: 20px;
|
|
border-image: url('../../../img/ui/border-1.png') 9 10 fill round;
|
|
margin: 10px;
|
|
image-rendering: pixelated;}
|
|
|
|
/* ------------- Inputs & links ----------------- */
|
|
button, .button {
|
|
font-family: 'special elite';
|
|
background-color: var(--input-background);
|
|
border: 0;
|
|
border-radius: var(--input-border-radius);
|
|
border-bottom: 4px solid var(--input-highlight);
|
|
padding: 0.35em;}
|
|
|
|
button:hover, .button:hover {
|
|
background-color: var(--input-background-hover);
|
|
border-bottom: 2px solid var(--input-highlight);
|
|
padding-bottom: 0.1em;
|
|
padding-top: calc((0.35em + (0.25em - 0.1em)) + 2px);
|
|
transition: background-color 0.1s;
|
|
transition: border-bottom 0.1s;
|
|
transition: padding-bottom 0.15s;
|
|
transition: padding-top 0.15s;}
|
|
|
|
input[type=text], input[type=password] {
|
|
font-family: 'special elite';
|
|
border: 0;
|
|
border-radius: var(--input-border-radius);
|
|
border-bottom: 4px solid var(--input-highlight);
|
|
transition: background-color 0.1s;
|
|
transition: border-bottom 0.1s;}
|
|
|
|
input[type=text]:focus, input[type=password]:focus { outline: 0; }
|
|
|
|
input[type=text]:hover, input[type=password]:hover {
|
|
border-bottom: 2px solid var(--input-highlight);
|
|
background-color: var(--input-background-hover);
|
|
transition: background-color 0.1s;}
|
|
|
|
a, a:visited {
|
|
color: var(--link-color);
|
|
text-decoration-style: wavy;}
|
|
|
|
a:hover {
|
|
transform: translateY(-2px);
|
|
color: var(--link-color-hover);
|
|
transition: color 0.1s;
|
|
transition: transform 0.1s;}
|
|
|
|
.logo { position: relative; }
|
|
|
|
.logo-text {
|
|
/* position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translateX(-50%) translateY(-50%); */
|
|
font-size: 40px;
|
|
color: white;
|
|
text-shadow:
|
|
2px 0 var(--logo-outline-color),
|
|
-2px 0 var(--logo-outline-color),
|
|
0 2px var(--logo-outline-color),
|
|
0 -2px var(--logo-outline-color),
|
|
1px 1px var(--logo-outline-color),
|
|
-1px -1px var(--logo-outline-color),
|
|
1px -1px var(--logo-outline-color),
|
|
-1px 1px var(--logo-outline-color);}
|
|
|
|
.logo a {
|
|
color: white;
|
|
text-decoration: none;
|
|
}
|
|
|
|
@media only all and (max-width:700px) {
|
|
.navbar.bot { margin-top: 0px; }
|
|
.navbar.top { margin-bottom: 0px; }
|
|
} |