Late Night Defender
e4342d1b0e
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
323 lines
6.6 KiB
CSS
323 lines
6.6 KiB
CSS
@import url(resources/gnome-ui/gnome-ui.css);
|
|
@import url(resources/noto-sans-thai-looped/noto-sans-thai-looped.css);
|
|
|
|
: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;
|
|
font-family: "GNOME UI", "Noto Sans Thai Looped", Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
p {font-size: 11pt;}
|
|
h1 {margin-top: 3vh;}
|
|
|
|
.centerscreen {
|
|
height: 100vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.logo {
|
|
font-weight: bold;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.header {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.banner {
|
|
width: 100%;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
padding: 0.2cm;
|
|
border-radius:10px;
|
|
}
|
|
|
|
.name {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.grid-container {
|
|
display: grid;
|
|
justify-content: center;
|
|
grid-template-areas:
|
|
'left middle right'
|
|
}
|
|
|
|
.middle {
|
|
grid-area: middle;
|
|
width: 90vw;
|
|
max-width: 15cm;
|
|
}
|
|
|
|
.middle.large {
|
|
width: 80vw;
|
|
max-width: 35cm;
|
|
}
|
|
|
|
.description {
|
|
font-size: 10pt;
|
|
margin-top: -0.3cm;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.pronouns {
|
|
font-size: 10pt;
|
|
opacity: 0.5;
|
|
margin-top: -0.5cm;
|
|
margin-bottom: 0.5cm;
|
|
}
|
|
|
|
.section {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
|
grid-gap: 1rem;
|
|
}
|
|
|
|
.button {
|
|
border-radius: 6px;
|
|
height: 1.2cm;
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
padding: 0cm 0.25cm 0cm 0.25cm;
|
|
margin-right: 0.25cm;
|
|
margin-bottom: 0.25cm;
|
|
transition-duration: 0.2s;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.button.pill {
|
|
border-radius: 0.6cm;
|
|
padding: 0cm 0.75cm 0cm 0.75cm;
|
|
}
|
|
|
|
.button.accent {
|
|
background-color: rgb(var(--accent3));
|
|
color: rgb(var(--white));
|
|
}
|
|
|
|
.button.accent:hover {background-color: rgba(var(--accent3), 0.9);}
|
|
|
|
.button.accent.pill {
|
|
border-radius: 0.6cm;
|
|
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;
|
|
text-decoration: none;
|
|
height: 3cm;
|
|
transition-duration: 0.2s;
|
|
box-shadow: 0px 1px 4px 1px rgba(var(--black), 0.13);
|
|
}
|
|
|
|
.infocard {
|
|
border-radius: 12px;
|
|
text-decoration: none;
|
|
padding-left: 10px;
|
|
box-shadow: 0px 1px 4px 1px rgba(var(--black), 0.13);
|
|
}
|
|
|
|
.itemcard-stealth {
|
|
display: grid;
|
|
border-radius: 12px;
|
|
text-decoration: none;
|
|
height: 3cm;
|
|
transition-duration: 0.2s;
|
|
}
|
|
|
|
.list {
|
|
border-radius: 12px 12px 12px 12px;
|
|
box-shadow: 0px 1px 4px 1px rgba(var(--black), 0.13);
|
|
margin-bottom: 50px;
|
|
}
|
|
|
|
.listaction {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.listactionmini {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1cm;
|
|
text-decoration: none;
|
|
align-items: center;
|
|
min-height: 1.5cm;
|
|
}
|
|
|
|
.row {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1cm;
|
|
align-items: center;
|
|
min-height: 1.5cm;
|
|
}
|
|
|
|
.row-subtitle {
|
|
margin-top: -0.2cm;
|
|
font-size: 10pt;
|
|
opacity: 0.4;
|
|
text-decoration: none;
|
|
}
|
|
.row-title {
|
|
margin-top: 0.2cm;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.row-title-no-subtitle {
|
|
display: grid;
|
|
align-items: center;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.propertyrow {
|
|
display: grid;
|
|
align-items: center;
|
|
min-height: 1.5cm;
|
|
}
|
|
|
|
.propertyrow-property {
|
|
margin-top: 0.2cm;
|
|
font-size: 10pt;
|
|
opacity: 0.4;
|
|
text-decoration: none;
|
|
}
|
|
.propertyrow-value {
|
|
margin-top: -0.2cm;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.togglegroups-background {
|
|
display: flex;
|
|
border-radius: 12px;
|
|
padding: 5px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.togglegroups-highlighted {
|
|
border-radius: 6px;
|
|
padding: 5px;
|
|
box-shadow: 0px 1px 4px 1px rgba(var(--black), 0.13);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.togglegroups-nohighlight {
|
|
border-radius: 6px;
|
|
padding: 5px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.separator {height: 1px;}
|
|
|
|
.quickbuttons {
|
|
display: flex;
|
|
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;}
|
|
}
|
|
|
|
/* 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) {
|
|
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.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(--whiteitem));}
|
|
.itemcard:hover {background-color: rgb(var(--whitebg));}
|
|
.itemcard-stealth:hover {background-color: rgba(var(--black), 0.1);}
|
|
.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: rgb(var(--blackitem));}
|
|
.button.header {background-color: rgb(var(--blackitem));}
|
|
.button.back {background-color: 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: 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: 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);
|
|
}
|
|
}
|