www.techtransthai.org/style.css

288 lines
5 KiB
CSS
Raw Normal View History

@import url("cantarell/cantarell.css");
2024-04-03 19:51:38 +00:00
@import url("navbar.css");
2023-08-03 07:08:41 +00:00
2023-07-25 16:04:31 +00:00
html *
{
font-family: Cantarell, sans-serif;
}
2023-08-02 17:00:53 +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
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
}
.name {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
2023-09-06 06:42:30 +00:00
2024-04-03 19:51:38 +00:00
.middle-large {
grid-area: middle;
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: 12pt;
opacity: 0.5;
margin-left: 0.25cm;
}
2024-04-03 19:51:38 +00:00
.row {
display: flex;
justify-content: space-between;
}
2024-04-09 20:30:37 +00:00
.itemcard-placeholder {
display: grid;
border-radius: 12px;
text-decoration: none;
margin-bottom: 0.5cm;
min-height: 3cm;
min-width: 6cm;
width: 32.5%
}
2023-08-11 07:34:22 +00:00
@media (prefers-color-scheme: light) {
2023-08-02 18:24:02 +00:00
2023-08-11 07:34:22 +00:00
body {
background-color: #fafafa;
}
2023-08-02 19:37:58 +00:00
2023-08-11 07:34:22 +00:00
.logo {
color: #000;
2024-03-29 23:08:23 +00:00
font-weight: bold;
text-decoration: none;
2023-08-11 07:34:22 +00:00
}
2023-08-10 11:24:31 +00:00
2023-08-11 07:34:22 +00:00
.grid-container {
display: grid;
justify-content: center;
color: #000000;
grid-template-areas:
'left middle right'
}
2023-08-10 11:24:31 +00:00
2023-08-11 07:34:22 +00:00
.listaction {
2024-04-03 19:51:38 +00:00
display: flex;
2023-08-11 07:34:22 +00:00
color: black;
align-items: center;
2023-11-03 20:03:30 +00:00
}
2024-04-03 19:51:38 +00:00
.button {
height: 1cm;
border-radius: 6px;
background-color: rgba(0, 0, 0, 0.08);
2023-11-03 20:03:30 +00:00
color: black;
2024-04-03 19:51:38 +00:00
text-decoration: none;
font-weight: bold;
padding: 10px 10px;
margin-top: 1cm;
margin-bottom: 1cm;
2024-04-27 02:21:16 +00:00
margin-right: 0.25cm;
2024-04-09 21:18:09 +00:00
transition-duration: 0.2s;
}
.button:hover {
background-color: rgba(0, 0, 0, 0.18);
2023-08-11 07:34:22 +00:00
}
2024-04-09 21:18:09 +00:00
2024-03-27 19:03:06 +00:00
.gtk-button-pill {
2024-04-27 02:21:16 +00:00
2024-03-27 19:03:06 +00:00
position: relative;
width: auto;
height: 44px;
border-radius: 22px;
background-color: rgba(53, 132, 228, 1);
color: white;
text-decoration: none;
font-weight: bold;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 0px;
padding: 0px 32px;
flex-wrap: nowrap;
}
2024-04-03 19:51:38 +00:00
2024-04-27 02:21:16 +00:00
.gtk-button {
height: 1cm;
border-radius: 6px;
background-color: rgba(53, 132, 228, 1);
color: white;
text-decoration: none;
font-weight: bold;
padding: 10px 10px;
margin-top: 1cm;
margin-bottom: 1cm;
margin-right: 0.25cm;
transition-duration: 0.2s;
}
.gtk-button:hover {
background-color: rgba(53, 132, 228, 0.9);
}
2024-04-03 19:51:38 +00:00
.itemcard {
display: grid;
border-radius: 12px;
text-decoration: none;
background-color: #ffffff;
box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.13);
margin-bottom: 0.5cm;
min-height: 3cm;
min-width: 6cm;
2024-04-09 21:18:09 +00:00
width: 32.5%;
transition-duration: 0.2s;
2024-04-03 19:51:38 +00:00
}
2024-04-09 20:30:37 +00:00
.itemcard-stealth {
display: grid;
border-radius: 12px;
text-decoration: none;
margin-bottom: 0.5cm;
min-height: 3cm;
min-width: 6cm;
2024-04-09 20:57:43 +00:00
width: 32.5%;
transition-duration: 0.2s;
}
2024-04-09 21:18:09 +00:00
.itemcard:hover {
background-color: #fafafa;
}
2024-04-09 20:57:43 +00:00
.itemcard-stealth:hover {
background-color: #e0e0e0;
2024-04-09 20:30:37 +00:00
}
2023-08-10 11:24:31 +00:00
}
2023-08-11 07:34:22 +00:00
@media (prefers-color-scheme: dark) {
2024-04-09 21:32:13 +00:00
body {
background-color: #222222;
}
2023-08-11 07:34:22 +00:00
.logo {
color: #fff;
2024-03-29 23:08:23 +00:00
font-weight: bold;
text-decoration: none;
2023-08-11 07:34:22 +00:00
}
.grid-container {
display: grid;
justify-content: center;
2024-04-09 21:32:13 +00:00
color: #fff;
2023-08-11 07:34:22 +00:00
grid-template-areas:
2024-04-09 21:32:13 +00:00
'left middle right'
}
2023-08-11 07:34:22 +00:00
.listaction {
2024-04-09 21:32:13 +00:00
display: flex;
color: white;
2023-08-11 07:34:22 +00:00
align-items: center;
2023-11-03 20:03:30 +00:00
}
2024-04-09 21:32:13 +00:00
.button {
height: 1cm;
border-radius: 6px;
background: rgba(255, 255, 255, 0.1);
color: white;
2023-11-03 20:03:30 +00:00
text-decoration: none;
2024-04-09 21:32:13 +00:00
font-weight: bold;
padding: 10px 10px;
margin-top: 1cm;
margin-bottom: 1cm;
2024-04-27 02:21:16 +00:00
margin-right: 0.25cm;
2024-04-09 21:32:13 +00:00
transition-duration: 0.2s;
}
.button:hover {
background: rgba(255, 255, 255, 0.18);
2023-08-11 07:34:22 +00:00
}
2024-03-27 19:03:06 +00:00
.gtk-button-pill {
position: relative;
width: auto;
height: 44px;
border-radius: 22px;
background-color: rgba(53, 132, 228, 1);
color: white;
text-decoration: none;
font-weight: bold;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 0px;
padding: 0px 32px;
flex-wrap: nowrap;
}
2024-04-09 21:32:13 +00:00
2024-04-27 02:21:16 +00:00
.gtk-button {
height: 1cm;
border-radius: 6px;
background-color: rgba(53, 132, 228, 1);
color: white;
text-decoration: none;
font-weight: bold;
padding: 10px 10px;
margin-top: 1cm;
margin-bottom: 1cm;
margin-right: 0.25cm;
transition-duration: 0.2s;
}
.gtk-button:hover {
background-color: rgba(53, 132, 228, 0.9);
}
2024-04-09 21:32:13 +00:00
.itemcard {
display: grid;
border-radius: 12px;
text-decoration: none;
background-color: #303030;
box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.13);
margin-bottom: 0.5cm;
min-height: 3cm;
min-width: 6cm;
width: 32.5%;
transition-duration: 0.2s;
}
.itemcard-stealth {
display: grid;
border-radius: 12px;
text-decoration: none;
margin-bottom: 0.5cm;
min-height: 3cm;
min-width: 6cm;
width: 32.5%;
transition-duration: 0.2s;
}
.itemcard:hover {
background-color: #4a4a4a;
}
.itemcard-stealth:hover {
background-color: #4a4a4a;
}
2023-08-11 07:34:22 +00:00
}