Transfer to git
This commit is contained in:
174
css/global/styling/global-styling.css
Normal file
174
css/global/styling/global-styling.css
Normal file
@@ -0,0 +1,174 @@
|
||||
/* 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: var(--accent-color-light);
|
||||
--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 -------------------- */
|
||||
.navbar { background-color: var(--navvar-background); }
|
||||
|
||||
.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: var(--navbar-buttons-bg);}
|
||||
|
||||
.about:hover, .links > div:hover, .lang-picker:hover {
|
||||
background-color: var(--navbar-buttons-hover);
|
||||
transition: background-color 0.1s;}
|
||||
|
||||
/* ------------- 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] {
|
||||
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 { outline: 0; }
|
||||
|
||||
input[type=text]: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;
|
||||
}
|
||||
Reference in New Issue
Block a user