techtransthai/www.techtransthai.org
techtransthai/www.techtransthai.org
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

implement css variables
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
Details

Browse source
This commit is contained in:
Late Night Defender 2024-11-20 04:09:57 +07:00
parent 2dc34febcf
commit 8b334b1137
1 changed files with 39 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

74
style.css
View file

@ -1,8 +1,13 @@
@import url("navbar.css"); @import url("navbar.css");
:root { :root {
--white: #fff; --white: 255, 255, 255;
--black: #000; --whitebg: 250, 250, 250;
--black: 0, 0, 0;
--blackbg: 34, 34, 34;
--accent1: 153, 193, 241;
--accent3: 53, 132, 228;
--accent5: 26, 95, 180;
font-family: system-ui; font-family: system-ui;
} }
@ -98,8 +103,8 @@ h1 {margin-top: 3vh;}
width: auto; width: auto;
height: 44px; height: 44px;
border-radius: 22px; border-radius: 22px;
background-color: rgba(53, 132, 228, 1); background-color: rgb(var(--accent3));
color: var(--white); color: rgb(var(--white));
text-decoration: none; text-decoration: none;
font-weight: bold; font-weight: bold;
display: flex; display: flex;
@ -118,12 +123,12 @@ h1 {margin-top: 3vh;}
padding: 10px 10px; padding: 10px 10px;
margin-right: 0.25cm; margin-right: 0.25cm;
margin-bottom: 0.25cm; margin-bottom: 0.25cm;
transition-duration: 0.2s; transition-duration: 0.2s;;
background-color: rgba(53, 132, 228, 1); background-color: rgb(var(--accent3));
color: var(--white); color: rgb(var(--white));
} }
.gtk-button:hover {background-color: rgba(53, 132, 228, 0.9);} .gtk-button:hover {background-color: rgba(var(--accent3), 0.9);}
.itemcard { .itemcard {
display: grid; display: grid;
@ -247,34 +252,33 @@ h1 {margin-top: 3vh;}
} }
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
body {background-color: #fafafa;} body {background-color: rgb(var(--whitebg));}
html * {color: var(--black);} html * {color: rgb(var(--black));}
.list {background-color: var(--white);} .list {background-color: rgb(var(--white));}
.button {background-color: rgba(0, 0, 0, 0.08);} .button {background-color: rgba(var(--black), 0.08);}
.button:hover {background-color: rgba(0, 0, 0, 0.18);} .button:hover {background-color: rgba(var(--black), 0.18);}
.togglegroups-background {background-color: rgba(0, 0, 0, 0.08);} .togglegroups-background {background-color: rgba(var(--black), 0.08);}
.togglegroups-highlighted { .togglegroups-highlighted {background-color: rgb(var(--white));}
background-color: var(--white); .itemcard {background-color: rgb(var(--white));}
} .itemcard:hover {background-color: rgb(var(--whitebg));}
.itemcard {background-color: var(--white);} .itemcard-stealth:hover {background-color: rgba(var(--black), 0.1);}
.itemcard:hover {background-color: #fafafa;} .infocard {background-color: rgb(var(--white));}
.itemcard-stealth:hover {background-color: #e0e0e0;} .separator {background-color: rgb(var(--whitebg));}
.infocard {background-color: var(--white);} .banner {background-color: rgba(var(--accent1), 0.6);}
.separator {background-color: rgba(237, 237, 237, 1);}
.banner {background-color: #BFD7F3;}
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
body {background-color: #222222;} body {background-color: rgb(var(--blackbg));}
html * {color: var(--white);} html * {color: rgb(var(--white));}
.list {background-color: #363636;} .list {background-color: rgba(var(--white), 0.07);}
.button {background: rgba(255, 255, 255, 0.1);} .button {background: rgba(var(--white), 0.1);}
.button:hover {background: rgba(255, 255, 255, 0.18);} .button:hover {background: rgba(var(--white), 0.18);}
.togglegroups-background {background: rgba(255, 255, 255, 0.1);} .togglegroups-background {background: rgba(var(--white), 0.1);}
.itemcard {background-color: #303030;} .togglegroups-highlighted {background-color: rgba(var(--white), 0.07);}
.itemcard:hover {background-color: #4a4a4a;} .itemcard {background-color: rgba(var(--white), 0.07);}
.itemcard-stealth:hover {background-color: #4a4a4a;} .itemcard:hover {background-color: rgba(var(--white), 0.15);}
.infocard {background-color: #303030;} .itemcard-stealth:hover {background-color: rgba(var(--white), 0.15);}
.separator {background-color: #232323;} .infocard {background-color: rgba(var(--white), 0.07);}
.banner {background-color: #29415E;} .separator {background-color: rgb(var(--blackbg));}
.banner {background-color: rgba(var(--accent5), 0.5);}
} }