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

refactor css

Browse source
This commit is contained in:
Late Night Defender 2024-06-24 14:45:53 +07:00
parent d37d991961
commit 47149bc646
1 changed files with 88 additions and 146 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

234
style.css
View file

@ -14,6 +14,11 @@ html *
flex-direction: column; flex-direction: column;
} }
.logo {
font-weight: bold;
text-decoration: none;
}
.header { .header {
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -27,6 +32,13 @@ html *
flex-direction: column; flex-direction: column;
} }
.grid-container {
display: grid;
justify-content: center;
grid-template-areas:
'left middle right'
}
.middle-large { .middle-large {
grid-area: middle; grid-area: middle;
width: 80vw; width: 80vw;
@ -50,6 +62,66 @@ html *
justify-content: space-between; justify-content: space-between;
} }
.button {
height: 1cm;
border-radius: 6px;
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-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;
}
.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);
}
.itemcard {
display: grid;
border-radius: 12px;
text-decoration: none;
margin-bottom: 0.5cm;
height: 3cm;
min-width: 6cm;
width: 32.5%;
transition-duration: 0.2s;
box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.13);
}
.itemcard-placeholder { .itemcard-placeholder {
display: grid; display: grid;
border-radius: 12px; border-radius: 12px;
@ -60,6 +132,22 @@ html *
width: 32.5% width: 32.5%
} }
.itemcard-stealth {
display: grid;
border-radius: 12px;
text-decoration: none;
margin-bottom: 0.5cm;
height: 3cm;
min-width: 6cm;
width: 32.5%;
transition-duration: 0.2s;
}
.listaction {
display: flex;
align-items: center;
}
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
body { body {
@ -68,101 +156,27 @@ html *
.logo { .logo {
color: #000; color: #000;
font-weight: bold;
text-decoration: none;
} }
.grid-container { .grid-container {
display: grid;
justify-content: center;
color: #000000; color: #000000;
grid-template-areas:
'left middle right'
} }
.listaction { .listaction {
display: flex;
color: black; color: black;
align-items: center;
} }
.button { .button {
height: 1cm;
border-radius: 6px;
background-color: rgba(0, 0, 0, 0.08); background-color: rgba(0, 0, 0, 0.08);
color: black; color: black;
text-decoration: none;
font-weight: bold;
padding: 10px 10px;
margin-top: 1cm;
margin-bottom: 1cm;
margin-right: 0.25cm;
transition-duration: 0.2s;
} }
.button:hover { .button:hover {
background-color: rgba(0, 0, 0, 0.18); background-color: rgba(0, 0, 0, 0.18);
} }
.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;
}
.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);
}
.itemcard { .itemcard {
display: grid;
border-radius: 12px;
text-decoration: none;
background-color: #ffffff; background-color: #ffffff;
box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.13);
margin-bottom: 0.5cm;
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;
height: 3cm;
min-width: 6cm;
width: 32.5%;
transition-duration: 0.2s;
} }
.itemcard:hover { .itemcard:hover {
@ -182,99 +196,27 @@ html *
.logo { .logo {
color: #fff; color: #fff;
font-weight: bold;
text-decoration: none;
} }
.grid-container { .grid-container {
display: grid;
justify-content: center;
color: #fff; color: #fff;
grid-template-areas:
'left middle right'
} }
.listaction { .listaction {
display: flex;
color: white; color: white;
align-items: center;
} }
.button { .button {
height: 1cm;
border-radius: 6px;
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1);
color: white; 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;
} }
.button:hover { .button:hover {
background: rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.18);
} }
.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;
}
.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);
}
.itemcard { .itemcard {
display: grid;
border-radius: 12px;
text-decoration: none;
background-color: #303030; background-color: #303030;
box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.13);
margin-bottom: 0.5cm;
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;
height: 3cm;
min-width: 6cm;
width: 32.5%;
transition-duration: 0.2s;
} }
.itemcard:hover { .itemcard:hover {