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-10-28 20:43:45 +07:00
parent 7c606f947e
commit 4a3bbee999
1 changed files with 31 additions and 126 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

157
style.css
View file

@ -1,18 +1,15 @@
@import url("inter/inter.css"); @import url("inter/inter.css");
@import url("navbar.css"); @import url("navbar.css");
html * :root {
{ --white: #fff;
font-family: Inter, Cantarell, sans-serif; --black: #000;
} }
p { html * {font-family: Inter, Cantarell, sans-serif;}
font-size: 11pt; p {font-size: 11pt;}
} h1 {margin-top: 3vh;}
h1 {
margin-top: 3vh;
}
.centerscreen { .centerscreen {
height: 100vh; height: 100vh;
display: flex; display: flex;
@ -87,7 +84,7 @@ h1 {
height: 44px; height: 44px;
border-radius: 22px; border-radius: 22px;
background-color: rgba(53, 132, 228, 1); background-color: rgba(53, 132, 228, 1);
color: white; color: var(--white);
text-decoration: none; text-decoration: none;
font-weight: bold; font-weight: bold;
display: flex; display: flex;
@ -108,12 +105,10 @@ h1 {
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: rgba(53, 132, 228, 1);
color: white; color: var(--white);
} }
.gtk-button:hover { .gtk-button:hover {background-color: rgba(53, 132, 228, 0.9);}
background-color: rgba(53, 132, 228, 0.9);
}
.itemcard { .itemcard {
display: grid; display: grid;
@ -158,9 +153,7 @@ h1 {
min-height: 1.5cm; min-height: 1.5cm;
} }
.separator { .separator {height: 1px;}
height: 1px;
}
.emojidecorations { .emojidecorations {
font-size: 16pt; font-size: 16pt;
@ -183,119 +176,31 @@ h1 {
/* For phone screens */ /* For phone screens */
@media only screen and (max-width: 750px) { @media only screen and (max-width: 750px) {
h1 { h1 {margin-top: 8vh;}
margin-top: 8vh;
}
} }
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
body {background-color: #fafafa;}
body { html * {color: var(--black);}
background-color: #fafafa; .list {background-color: var(--white);}
} .button {background-color: rgba(0, 0, 0, 0.08);}
.button:hover {background-color: rgba(0, 0, 0, 0.18);}
.logo { .itemcard {background-color: var(--white);}
color: #000; .itemcard:hover {background-color: #fafafa;}
} .itemcard-stealth:hover {background-color: #e0e0e0;}
.infocard {background-color: var(--white);}
.grid-container { .separator {background-color: rgba(237, 237, 237, 1);}
color: #000000;
}
.list {
background-color: #ffffff;
}
.listaction {
color: black;
}
.listactionmini {
color: black;
}
.button {
background-color: rgba(0, 0, 0, 0.08);
color: black;
}
.button:hover {
background-color: rgba(0, 0, 0, 0.18);
}
.itemcard {
background-color: #ffffff;
}
.itemcard:hover {
background-color: #fafafa;
}
.itemcard-stealth:hover {
background-color: #e0e0e0;
}
.infocard {
background-color: #ffffff;
}
.separator {
background-color: rgba(237, 237, 237, 1);
}
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
body {background-color: #222222;}
body { html * {color: var(--white);}
background-color: #222222; .list {background-color: #363636;}
} .button {background: rgba(255, 255, 255, 0.1);}
.button:hover {background: rgba(255, 255, 255, 0.18);}
.logo { .itemcard {background-color: #303030;}
color: #fff; .itemcard:hover {background-color: #4a4a4a;}
} .itemcard-stealth:hover {background-color: #4a4a4a;}
.infocard {background-color: #303030;}
.grid-container { .separator {background-color: #232323;}
color: #fff;
}
.list {
background-color: #363636;
}
.listaction {
color: white;
}
.listactionmini {
color: #ffffff;
}
.button {
background: rgba(255, 255, 255, 0.1);
color: white;
}
.button:hover {
background: rgba(255, 255, 255, 0.18);
}
.itemcard {
background-color: #303030;
}
.itemcard:hover {
background-color: #4a4a4a;
}
.itemcard-stealth:hover {
background-color: #4a4a4a;
}
.infocard {
background-color: #303030;
}
.separator {
background-color: #232323;
}
} }