www.techtransthai.org/style.css

324 lines
6.6 KiB
CSS
Raw Normal View History

@import url(resources/gnome-ui/gnome-ui.css);
@import url(resources/noto-sans-thai-looped/noto-sans-thai-looped.css);
2024-10-28 13:43:45 +00:00
:root {
2024-11-19 21:09:57 +00:00
--white: 255, 255, 255;
--whitebg: 250, 250, 250;
2024-11-20 08:21:05 +00:00
--whiteitem: 255, 255, 255;
2024-11-19 21:09:57 +00:00
--black: 0, 0, 0;
--blackbg: 34, 34, 34;
2024-11-20 08:21:05 +00:00
--blackitem: 50, 50, 50;
2024-11-19 21:09:57 +00:00
--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;
2023-07-25 16:04:31 +00:00
}
2023-08-02 17:00:53 +00:00
2024-10-28 13:43:45 +00:00
p {font-size: 11pt;}
h1 {margin-top: 3vh;}
2024-07-03 17:31:20 +00:00
2024-03-27 19:25:41 +00:00
.centerscreen {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
2024-03-27 19:03:06 +00:00
2024-06-24 07:45:53 +00:00
.logo {
font-weight: bold;
text-decoration: none;
}
2023-08-02 17:00:53 +00:00
.header {
2023-08-11 07:34:22 +00:00
display: flex;
justify-content: center;
align-items: center;
2023-11-03 19:48:23 +00:00
}
2024-11-08 22:54:53 +00:00
.banner {
2024-11-08 23:05:57 +00:00
width: 100%;
2024-11-08 22:54:53 +00:00
text-align: center;
font-weight: bold;
padding: 0.2cm;
border-radius:10px;
}
2023-11-03 19:48:23 +00:00
.name {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
2023-09-06 06:42:30 +00:00
2024-06-24 07:45:53 +00:00
.grid-container {
display: grid;
justify-content: center;
grid-template-areas:
'left middle right'
}
2024-10-28 14:46:39 +00:00
.middle {
grid-area: middle;
width: 90vw;
max-width: 15cm;
}
2024-11-20 06:33:27 +00:00
.middle.large {
2024-04-03 19:51:38 +00:00
width: 80vw;
max-width: 35cm;
2023-08-02 17:43:14 +00:00
}
2023-09-13 19:13:44 +00:00
.description {
2023-11-03 19:48:23 +00:00
font-size: 10pt;
margin-top: -0.3cm;
2024-04-09 20:30:37 +00:00
opacity: 0.7;
2023-09-13 19:13:44 +00:00
}
2023-11-03 19:48:23 +00:00
2024-04-09 20:57:43 +00:00
.pronouns {
font-size: 10pt;
2024-04-09 20:57:43 +00:00
opacity: 0.5;
margin-top: -0.5cm;
margin-bottom: 0.5cm;
2024-04-09 20:57:43 +00:00
}
2024-07-03 18:29:27 +00:00
.section {
2024-07-03 18:18:10 +00:00
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
grid-gap: 1rem;
2024-04-03 19:51:38 +00:00
}
2024-06-24 07:45:53 +00:00
.button {
border-radius: 6px;
2024-11-20 06:55:56 +00:00
height: 1.2cm;
2024-06-24 07:45:53 +00:00
text-decoration: none;
font-weight: bold;
2024-11-20 06:55:56 +00:00
padding: 0cm 0.25cm 0cm 0.25cm;
2024-06-24 07:45:53 +00:00
margin-right: 0.25cm;
2024-07-03 17:54:08 +00:00
margin-bottom: 0.25cm;
2024-06-24 07:45:53 +00:00
transition-duration: 0.2s;
2024-11-18 18:33:32 +00:00
display: flex;
align-items: center;
2024-06-24 07:45:53 +00:00
}
2024-11-24 21:07:44 +00:00
.button.pill {
border-radius: 0.6cm;
padding: 0cm 0.75cm 0cm 0.75cm;
}
2024-11-20 06:55:56 +00:00
.button.accent {
2024-11-19 21:09:57 +00:00
background-color: rgb(var(--accent3));
color: rgb(var(--white));
2024-06-24 07:45:53 +00:00
}
2024-11-20 06:55:56 +00:00
.button.accent:hover {background-color: rgba(var(--accent3), 0.9);}
2024-06-24 07:45:53 +00:00
2024-11-20 06:55:56 +00:00
.button.accent.pill {
border-radius: 0.6cm;
padding: 0cm 0.75cm 0cm 0.75cm;
}
2024-06-24 07:45:53 +00:00
2024-11-20 08:21:05 +00:00
.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;
}
2024-06-24 07:45:53 +00:00
.itemcard {
display: grid;
border-radius: 12px;
text-decoration: none;
height: 3cm;
transition-duration: 0.2s;
2024-11-19 21:16:46 +00:00
box-shadow: 0px 1px 4px 1px rgba(var(--black), 0.13);
2024-06-24 07:45:53 +00:00
}
2024-08-20 18:54:40 +00:00
.infocard {
border-radius: 12px;
text-decoration: none;
padding-left: 10px;
2024-11-19 21:16:46 +00:00
box-shadow: 0px 1px 4px 1px rgba(var(--black), 0.13);
2024-08-20 18:54:40 +00:00
}
2024-07-03 18:19:25 +00:00
.itemcard-stealth {
display: grid;
border-radius: 12px;
text-decoration: none;
height: 3cm;
transition-duration: 0.2s;
}
2024-08-27 13:07:07 +00:00
.list {
border-radius: 12px 12px 12px 12px;
2024-11-19 21:16:46 +00:00
box-shadow: 0px 1px 4px 1px rgba(var(--black), 0.13);
2024-08-27 13:07:07 +00:00
margin-bottom: 50px;
}
2024-06-24 07:45:53 +00:00
.listaction {
display: flex;
align-items: center;
}
2024-08-27 13:07:07 +00:00
.listactionmini {
display: grid;
grid-template-columns: 1fr 1cm;
text-decoration: none;
align-items: center;
min-height: 1.5cm;
}
2024-10-28 15:26:12 +00:00
.row {
display: grid;
grid-template-columns: 1fr 1cm;
align-items: center;
min-height: 1.5cm;
}
2024-10-28 15:47:20 +00:00
.row-subtitle {
margin-top: -0.2cm;
font-size: 10pt;
opacity: 0.4;
2024-10-28 15:53:49 +00:00
text-decoration: none;
2024-10-28 15:47:20 +00:00
}
.row-title {
margin-top: 0.2cm;
2024-10-28 15:53:49 +00:00
text-decoration: none;
2024-10-28 15:47:20 +00:00
}
2024-10-28 17:02:16 +00:00
.row-title-no-subtitle {
display: grid;
align-items: center;
text-decoration: none;
}
2024-10-28 15:15:54 +00:00
.propertyrow {
2024-10-28 14:34:00 +00:00
display: grid;
align-items: center;
min-height: 1.5cm;
2024-10-28 15:15:54 +00:00
}
.propertyrow-property {
margin-top: 0.2cm;
font-size: 10pt;
opacity: 0.4;
2024-10-28 15:53:49 +00:00
text-decoration: none;
2024-10-28 15:15:54 +00:00
}
.propertyrow-value {
margin-top: -0.2cm;
2024-10-28 15:53:49 +00:00
text-decoration: none;
2024-10-28 14:34:00 +00:00
}
2024-10-28 19:02:48 +00:00
.togglegroups-background {
display: flex;
border-radius: 12px;
padding: 5px;
font-weight: bold;
}
.togglegroups-highlighted {
border-radius: 6px;
padding: 5px;
2024-11-19 21:16:46 +00:00
box-shadow: 0px 1px 4px 1px rgba(var(--black), 0.13);
2024-10-28 19:02:48 +00:00
text-decoration: none;
}
.togglegroups-nohighlight {
border-radius: 6px;
padding: 5px;
text-decoration: none;
}
2024-10-28 13:43:45 +00:00
.separator {height: 1px;}
2024-07-03 17:49:43 +00:00
.quickbuttons {
2024-07-03 17:54:08 +00:00
display: flex;
flex-wrap: wrap;
2024-07-03 17:49:43 +00:00
}
2024-11-20 08:21:05 +00:00
.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;
}
2024-07-03 17:31:20 +00:00
/* For tablet screens */
2024-07-03 18:28:06 +00:00
@media only screen and (max-width: 1366px) {
2024-11-20 06:33:27 +00:00
.middle.large {width: 90vw;}
2024-07-03 17:31:20 +00:00
}
/* For phone screens */
2024-07-01 20:11:28 +00:00
@media only screen and (max-width: 750px) {
2024-11-20 06:33:27 +00:00
.middle.large {margin-top: 1cm;}
2024-11-20 08:21:05 +00:00
.topbar-group {
align-items: center;
flex-direction: column;
margin-left: 0cm;
margin-right: 0cm;
}
2024-07-01 20:11:28 +00:00
}
2023-08-11 07:34:22 +00:00
@media (prefers-color-scheme: light) {
2024-11-19 21:09:57 +00:00
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);}
2024-11-20 08:21:05 +00:00
.button.header {background-color: rgb(var(--white));}
.button.back {background-color: rgb(var(--white));}
2024-11-19 21:09:57 +00:00
.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));}
2024-11-20 08:21:05 +00:00
.itemcard {background-color: rgb(var(--whiteitem));}
2024-11-19 21:09:57 +00:00
.itemcard:hover {background-color: rgb(var(--whitebg));}
.itemcard-stealth:hover {background-color: rgba(var(--black), 0.1);}
2024-11-20 08:21:05 +00:00
.infocard {background-color: rgb(var(--whiteitem));}
.separator {background-color: rgba(var(--blackbg), 0.1);}
2024-11-19 21:09:57 +00:00
.banner {background-color: rgba(var(--accent1), 0.6);}
2024-11-20 08:21:05 +00:00
.topbar {
background-color: rgb(var(--whiteitem));
border: 1px solid rgba(var(--blackbg), 0.1);
}
2023-08-10 11:24:31 +00:00
}
2023-08-11 07:34:22 +00:00
@media (prefers-color-scheme: dark) {
2024-11-19 21:09:57 +00:00
body {background-color: rgb(var(--blackbg));}
html * {color: rgb(var(--white));}
.list {background-color: rgba(var(--white), 0.07);}
2024-11-20 08:21:05 +00:00
.button {background: rgb(var(--blackitem));}
.button.header {background-color: rgb(var(--blackitem));}
.button.back {background-color: rgb(var(--blackitem));}
2024-11-19 21:09:57 +00:00
.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);}
2024-11-20 08:21:05 +00:00
.itemcard {background-color: rgb(var(--blackitem));}
2024-11-19 21:09:57 +00:00
.itemcard:hover {background-color: rgba(var(--white), 0.15);}
.itemcard-stealth:hover {background-color: rgba(var(--white), 0.15);}
2024-11-20 08:21:05 +00:00
.infocard {background-color: rgb(var(--blackitem));}
2024-11-19 21:09:57 +00:00
.separator {background-color: rgb(var(--blackbg));}
.banner {background-color: rgba(var(--accent5), 0.5);}
2024-11-20 08:21:05 +00:00
.topbar {
background-color: rgb(var(--blackitem));
border: 1px solid rgba(var(--blackbg), 0.1);
}
2023-08-11 07:34:22 +00:00
}