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

merge navbar.css into style.css
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 15:21:05 +07:00
parent 1b4e3fa002
commit 9b684ce152
3 changed files with 59 additions and 152 deletions
Download patch file Download diff file Expand all files Collapse all files

60
style.css
View file

@ -3,8 +3,10 @@
:root {
--white: 255, 255, 255;
--whitebg: 250, 250, 250;
--whiteitem: 255, 255, 255;
--black: 0, 0, 0;
--blackbg: 34, 34, 34;
--blackitem: 50, 50, 50;
--accent1: 153, 193, 241;
--accent3: 53, 132, 228;
--accent5: 26, 95, 180;
@ -110,6 +112,20 @@ h1 {margin-top: 3vh;}
padding: 0cm 0.75cm 0cm 0.75cm;
}
.button.header {
font-weight: normal;
margin-top: 0.25cm;
}
.button.back {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
margin: 0.1cm;
height: 1cm;
}
.itemcard {
display: grid;
border-radius: 12px;
@ -221,6 +237,23 @@ h1 {margin-top: 3vh;}
flex-wrap: wrap;
}
.topbar {
position: fixed;
width: 100%;
top: 0px;
left: 0px;
z-index: 10;
}
.topbar.simple {height: 1.2cm;}
.topbar-group {
display: flex;
justify-content: space-between;
margin-left: 1cm;
margin-right: 1cm;
}
/* For tablet screens */
@media only screen and (max-width: 1366px) {
.middle.large {width: 90vw;}
@ -229,6 +262,13 @@ h1 {margin-top: 3vh;}
/* For phone screens */
@media only screen and (max-width: 750px) {
.middle.large {margin-top: 1cm;}
.topbar-group {
align-items: center;
flex-direction: column;
margin-left: 0cm;
margin-right: 0cm;
}
}
@media (prefers-color-scheme: light) {
@ -236,29 +276,39 @@ h1 {margin-top: 3vh;}
html * {color: rgb(var(--black));}
.list {background-color: rgb(var(--white));}
.button {background-color: rgba(var(--black), 0.08);}
.button.header {background-color: rgb(var(--white));}
.button.back {background-color: rgb(var(--white));}
.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 {background-color: rgb(var(--whiteitem));}
.itemcard:hover {background-color: rgb(var(--whitebg));}
.itemcard-stealth:hover {background-color: rgba(var(--black), 0.1);}
.infocard {background-color: rgb(var(--white));}
.infocard {background-color: rgb(var(--whiteitem));}
.separator {background-color: rgba(var(--blackbg), 0.1);}
.banner {background-color: rgba(var(--accent1), 0.6);}
.topbar {
background-color: rgb(var(--whiteitem));
border: 1px solid rgba(var(--blackbg), 0.1);
}
}
@media (prefers-color-scheme: dark) {
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 {background: rgb(var(--blackitem));}
.button:hover {background: rgba(var(--white), 0.18);}
.togglegroups-background {background: rgba(var(--white), 0.1);}
.togglegroups-highlighted {background-color: rgba(var(--white), 0.15);}
.itemcard {background-color: rgba(var(--white), 0.07);}
.itemcard {background-color: rgb(var(--blackitem));}
.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);}
.infocard {background-color: rgb(var(--blackitem));}
.separator {background-color: rgb(var(--blackbg));}
.banner {background-color: rgba(var(--accent5), 0.5);}
.topbar {
background-color: rgb(var(--blackitem));
border: 1px solid rgba(var(--blackbg), 0.1);
}
}