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