mirror of
https://git.srhtnin.garden/sarah/srhtnin.github.io.git
synced 2026-10-13 18:38:11 +02:00
981 lines
15 KiB
CSS
981 lines
15 KiB
CSS
@font-face {
|
|
font-family: "FSEX302";
|
|
src: url("../Assets/FSEX302.ttf") format("truetype");
|
|
font-style: normal;
|
|
font-weight: normal;
|
|
}
|
|
|
|
:root,
|
|
:root[data-palette="CatppuccinMocha"] {
|
|
--Rosewater: #f5e0dc;
|
|
--Flamingo: #f2cdcd;
|
|
--Pink: #f5c2e7;
|
|
--Mauve: #cba6f7;
|
|
--Red: #f38ba8;
|
|
--Maroon: #eba0ac;
|
|
--Peach: #fab387;
|
|
--Yellow: #f9e2af;
|
|
--Green: #a6e3a1;
|
|
--Teal: #94e2d5;
|
|
--Sky: #89dceb;
|
|
--Sapphire: #74c7ec;
|
|
--Blue: #89b4fa;
|
|
--Lavender: #b4befe;
|
|
|
|
--Text: #cdd6f4;
|
|
--Subtext1: #bac2de;
|
|
--Subtext0: #a6adc8;
|
|
--Overlay2: #9399b2;
|
|
--Overlay1: #7f849c;
|
|
--Overlay0: #6c7086;
|
|
--Surface2: #585b70;
|
|
--Surface1: #45475a;
|
|
--Surface0: #313244;
|
|
--Base: #1e1e2e;
|
|
--Mantle: #181825;
|
|
--Crust: #11111b;
|
|
}
|
|
|
|
html {
|
|
font-family: "FSEX302";
|
|
color: var(--Text);
|
|
|
|
background-image: url("../Assets/Img/Tile.png");
|
|
background-repeat: repeat;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 2rem;
|
|
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 800px) auto;
|
|
justify-content: center;
|
|
align-items: start;
|
|
gap: 1rem;
|
|
min-height: 100vh;
|
|
|
|
font-family: inherit;
|
|
color: inherit;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
font-family: inherit;
|
|
}
|
|
|
|
.MainContainer {
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
|
|
width: 100%;
|
|
max-width: 800px;
|
|
margin: 0;
|
|
padding: 2rem;
|
|
|
|
color: var(--Text);
|
|
background-color: var(--Base);
|
|
|
|
border: 4px solid var(--Mauve);
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
margin-top: 0;
|
|
margin-bottom: 1rem;
|
|
|
|
color: var(--Mauve);
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2.5rem;
|
|
|
|
padding-bottom: 0.5rem;
|
|
border-bottom: 3px solid var(--Mauve);
|
|
}
|
|
|
|
h2 {
|
|
font-size: 2rem;
|
|
color: var(--Blue);
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.5rem;
|
|
color: var(--Green);
|
|
}
|
|
|
|
h4 {
|
|
font-size: 1.25rem;
|
|
color: var(--Peach);
|
|
}
|
|
|
|
h5 {
|
|
font-size: 1rem;
|
|
color: var(--Yellow);
|
|
}
|
|
|
|
h6 {
|
|
font-size: 0.9rem;
|
|
color: var(--Rosewater);
|
|
}
|
|
|
|
p {
|
|
margin-top: 0;
|
|
margin-bottom: 1rem;
|
|
|
|
color: var(--Text);
|
|
|
|
font-size: 1rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
a {
|
|
color: var(--Blue);
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--Sky);
|
|
}
|
|
|
|
strong {
|
|
color: var(--Peach);
|
|
}
|
|
|
|
em {
|
|
color: var(--Lavender);
|
|
}
|
|
|
|
ul,
|
|
ol {
|
|
color: var(--Text);
|
|
}
|
|
|
|
li {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
blockquote {
|
|
margin-left: 0;
|
|
padding: 1rem;
|
|
|
|
color: var(--Subtext1);
|
|
background-color: var(--Mantle);
|
|
|
|
border-left: 4px solid var(--Mauve);
|
|
}
|
|
|
|
code {
|
|
padding: 0.2rem 0.4rem;
|
|
|
|
color: var(--Green);
|
|
background-color: var(--Mantle);
|
|
}
|
|
|
|
pre {
|
|
padding: 1rem;
|
|
overflow-x: auto;
|
|
|
|
color: var(--Text);
|
|
background-color: var(--Crust);
|
|
|
|
border: 2px solid var(--Surface2);
|
|
}
|
|
|
|
pre code {
|
|
padding: 0;
|
|
background-color: transparent;
|
|
}
|
|
|
|
hr {
|
|
border: 0;
|
|
border-top: 2px solid var(--Surface2);
|
|
}
|
|
|
|
input,
|
|
button,
|
|
textarea,
|
|
select {
|
|
font-family: inherit;
|
|
color: inherit;
|
|
}
|
|
|
|
.Navbar {
|
|
grid-column: 2;
|
|
grid-row: 1;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
|
|
padding: 0.5rem;
|
|
|
|
position: sticky;
|
|
top: 2rem;
|
|
align-self: start;
|
|
|
|
background-color: var(--Base);
|
|
border: 4px solid var(--Mauve);
|
|
}
|
|
|
|
.NavbarLink {
|
|
display: block;
|
|
|
|
width: 4rem;
|
|
height: 4rem;
|
|
padding: 0;
|
|
|
|
line-height: 0;
|
|
text-decoration: none;
|
|
overflow: hidden;
|
|
|
|
background-color: var(--Mantle);
|
|
border: 3px solid var(--Surface2);
|
|
box-shadow: 3px 3px 0 var(--Crust);
|
|
}
|
|
|
|
.NavbarLink:hover {
|
|
background-color: var(--Surface0);
|
|
border-color: var(--Sky);
|
|
|
|
transform: translate(1px, 1px);
|
|
box-shadow: 2px 2px 0 var(--Crust);
|
|
}
|
|
|
|
.NavbarLink:focus-visible {
|
|
outline: 3px solid var(--Yellow);
|
|
outline-offset: 3px;
|
|
}
|
|
|
|
.NavbarLink[aria-current="page"] {
|
|
background-color: var(--Surface1);
|
|
border-color: var(--Mauve);
|
|
}
|
|
|
|
.NavbarLink[aria-current="page"]:hover {
|
|
background-color: var(--Surface2);
|
|
border-color: var(--Lavender);
|
|
}
|
|
|
|
.NavbarIcon {
|
|
display: block;
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
object-fit: fill;
|
|
image-rendering: auto;
|
|
}
|
|
|
|
.GardenStatus {
|
|
margin-bottom: 1.5rem;
|
|
padding: 0.75rem 1rem;
|
|
|
|
background-color: var(--Mantle);
|
|
border: 3px solid var(--Surface2);
|
|
}
|
|
|
|
.GardenLayout {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) 12rem;
|
|
gap: 1rem;
|
|
|
|
align-items: start;
|
|
}
|
|
|
|
.GardenGrid {
|
|
--GardenWidth: 3;
|
|
|
|
display: grid;
|
|
|
|
grid-template-columns:
|
|
repeat(
|
|
var(--GardenWidth),
|
|
minmax(0, 1fr)
|
|
);
|
|
|
|
gap: 0.5rem;
|
|
|
|
padding: 0.75rem;
|
|
|
|
background-color: var(--Mantle);
|
|
border: 4px solid var(--Green);
|
|
}
|
|
|
|
.GardenPlot {
|
|
position: relative;
|
|
|
|
width: 100%;
|
|
aspect-ratio: 1;
|
|
|
|
padding: 0;
|
|
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
|
|
background-color: var(--Surface0);
|
|
|
|
border: 3px solid var(--Surface2);
|
|
|
|
box-shadow:
|
|
3px 3px 0
|
|
var(--Crust);
|
|
}
|
|
|
|
.GardenPlot:hover {
|
|
background-color: var(--Surface1);
|
|
border-color: var(--Sky);
|
|
|
|
transform:
|
|
translate(
|
|
1px,
|
|
1px
|
|
);
|
|
|
|
box-shadow:
|
|
2px 2px 0
|
|
var(--Crust);
|
|
}
|
|
|
|
.GardenPlot:focus-visible {
|
|
outline:
|
|
3px solid
|
|
var(--Yellow);
|
|
|
|
outline-offset: 3px;
|
|
}
|
|
|
|
.GardenPlotEmpty {
|
|
background-color: var(--Mantle);
|
|
}
|
|
|
|
.GardenPlotEmpty:hover {
|
|
background-color: var(--Surface0);
|
|
}
|
|
|
|
.GardenPlotMature {
|
|
border-color: var(--Green);
|
|
}
|
|
|
|
.GardenPlotMature:hover {
|
|
border-color: var(--Yellow);
|
|
}
|
|
|
|
.GardenPlant {
|
|
display: block;
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
object-fit: contain;
|
|
|
|
image-rendering: pixelated;
|
|
}
|
|
|
|
.SeedPanel {
|
|
padding: 0.75rem;
|
|
|
|
background-color: var(--Mantle);
|
|
border: 4px solid var(--Mauve);
|
|
}
|
|
|
|
.SeedPanel h2 {
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.SeedList {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.SeedButton {
|
|
width: 100%;
|
|
|
|
padding: 0.6rem;
|
|
|
|
cursor: pointer;
|
|
|
|
color: var(--Text);
|
|
background-color: var(--Surface0);
|
|
|
|
border: 3px solid var(--Surface2);
|
|
|
|
box-shadow:
|
|
3px 3px 0
|
|
var(--Crust);
|
|
}
|
|
|
|
.SeedButton:hover {
|
|
color: var(--Sky);
|
|
background-color: var(--Surface1);
|
|
|
|
border-color: var(--Sky);
|
|
|
|
transform:
|
|
translate(
|
|
1px,
|
|
1px
|
|
);
|
|
|
|
box-shadow:
|
|
2px 2px 0
|
|
var(--Crust);
|
|
}
|
|
|
|
.SeedButton[aria-current="true"] {
|
|
color: var(--Green);
|
|
|
|
background-color: var(--Surface1);
|
|
|
|
border-color: var(--Green);
|
|
}
|
|
|
|
#GardenMessage {
|
|
margin-top: 1rem;
|
|
margin-bottom: 0;
|
|
|
|
padding: 0.75rem;
|
|
|
|
color: var(--Subtext1);
|
|
background-color: var(--Mantle);
|
|
|
|
border-left:
|
|
4px solid
|
|
var(--Blue);
|
|
}
|
|
|
|
.GardenUser,
|
|
.Leaderboard {
|
|
margin-top: 1.5rem;
|
|
padding: 1rem;
|
|
|
|
background-color: var(--Mantle);
|
|
|
|
border: 4px solid var(--Mauve);
|
|
}
|
|
|
|
.GardenUser h2,
|
|
.Leaderboard h2 {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.GardenUser input,
|
|
.GardenUser button {
|
|
padding: 0.6rem;
|
|
|
|
font-size: 1rem;
|
|
|
|
color: var(--Text);
|
|
background-color: var(--Surface0);
|
|
|
|
border: 3px solid var(--Surface2);
|
|
border-radius: 0;
|
|
|
|
appearance: none;
|
|
}
|
|
|
|
.GardenUser input {
|
|
min-width: 12rem;
|
|
|
|
outline: none;
|
|
}
|
|
|
|
.GardenUser input:hover {
|
|
background-color: var(--Surface1);
|
|
border-color: var(--Overlay2);
|
|
}
|
|
|
|
.GardenUser input:focus {
|
|
background-color: var(--Surface1);
|
|
border-color: var(--Sky);
|
|
}
|
|
|
|
.GardenUser input::placeholder {
|
|
color: var(--Overlay1);
|
|
}
|
|
|
|
.GardenUser button {
|
|
cursor: pointer;
|
|
|
|
box-shadow:
|
|
3px 3px 0
|
|
var(--Crust);
|
|
}
|
|
|
|
.GardenUser button:hover {
|
|
color: var(--Sky);
|
|
background-color: var(--Surface1);
|
|
|
|
border-color: var(--Sky);
|
|
|
|
transform: translate(
|
|
1px,
|
|
1px
|
|
);
|
|
|
|
box-shadow:
|
|
2px 2px 0
|
|
var(--Crust);
|
|
}
|
|
|
|
.GardenUser button:active {
|
|
color: var(--Green);
|
|
background-color: var(--Surface2);
|
|
|
|
border-color: var(--Green);
|
|
|
|
transform: translate(
|
|
2px,
|
|
2px
|
|
);
|
|
|
|
box-shadow:
|
|
1px 1px 0
|
|
var(--Crust);
|
|
}
|
|
|
|
.GardenUser button:focus-visible {
|
|
outline:
|
|
3px solid
|
|
var(--Yellow);
|
|
|
|
outline-offset: 3px;
|
|
}
|
|
|
|
#UsernameMessage {
|
|
margin-top: 0.75rem;
|
|
margin-bottom: 0;
|
|
|
|
color: var(--Subtext1);
|
|
}
|
|
|
|
#UsernameForm {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.75rem;
|
|
|
|
align-items: center;
|
|
}
|
|
|
|
#UsernameForm[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
#UsernameMessage {
|
|
flex-basis: 100%;
|
|
|
|
margin: 0;
|
|
|
|
color: var(--Subtext1);
|
|
}
|
|
|
|
.LeaderboardTableContainer {
|
|
width: 100%;
|
|
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.LeaderboardTable {
|
|
width: auto;
|
|
min-width: 24rem;
|
|
margin: 0 auto;
|
|
|
|
border-collapse: collapse;
|
|
|
|
color: var(--Text);
|
|
background-color: var(--Base);
|
|
|
|
font-size: 1.2rem;
|
|
|
|
border: 3px solid var(--Surface2);
|
|
|
|
box-shadow:
|
|
3px 3px 0
|
|
var(--Crust);
|
|
}
|
|
|
|
.LeaderboardTable th {
|
|
padding: 0.75rem;
|
|
|
|
color: var(--Blue);
|
|
background-color: var(--Surface0);
|
|
|
|
text-align: left;
|
|
|
|
border-bottom:
|
|
3px solid
|
|
var(--Surface2);
|
|
}
|
|
|
|
.LeaderboardTable td {
|
|
padding: 0.7rem 0.75rem;
|
|
|
|
border-bottom:
|
|
2px solid
|
|
var(--Surface0);
|
|
}
|
|
|
|
.LeaderboardTable tbody tr:last-child td {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.LeaderboardRow:hover td {
|
|
background-color: var(--Surface0);
|
|
}
|
|
|
|
.LeaderboardRankColumn,
|
|
.LeaderboardRank {
|
|
width: 4rem;
|
|
|
|
text-align: center;
|
|
}
|
|
|
|
.LeaderboardUsername {
|
|
min-width: 12rem;
|
|
}
|
|
|
|
.LeaderboardDewColumn,
|
|
.LeaderboardDew {
|
|
min-width: 7rem;
|
|
}
|
|
|
|
.LeaderboardDew {
|
|
color: var(--Green);
|
|
}
|
|
|
|
.LeaderboardRank1 .LeaderboardRank,
|
|
.LeaderboardRank1 .LeaderboardUsername {
|
|
color: var(--Yellow);
|
|
}
|
|
|
|
.LeaderboardRank2 .LeaderboardRank,
|
|
.LeaderboardRank2 .LeaderboardUsername {
|
|
color: var(--Text);
|
|
}
|
|
|
|
.LeaderboardRank3 .LeaderboardRank,
|
|
.LeaderboardRank3 .LeaderboardUsername {
|
|
color: var(--Peach);
|
|
}
|
|
|
|
.LeaderboardSelf td:first-child {
|
|
border-left:
|
|
4px solid
|
|
var(--Mauve);
|
|
}
|
|
|
|
.LeaderboardEmpty {
|
|
padding: 1rem;
|
|
|
|
color: var(--Subtext1);
|
|
|
|
text-align: center;
|
|
}
|
|
|
|
.LeaderboardTable th:last-child,
|
|
.LeaderboardTable td:last-child {
|
|
text-align: right;
|
|
}
|
|
|
|
.ProfileSection {
|
|
margin-top: 1.5rem;
|
|
padding: 1rem;
|
|
|
|
background-color: var(--Mantle);
|
|
border: 4px solid var(--Mauve);
|
|
}
|
|
|
|
.ProfileSection h2 {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.ProfileFormRow,
|
|
.ProfileButtonRow {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.75rem;
|
|
|
|
align-items: center;
|
|
}
|
|
|
|
.ProfileButtonRow {
|
|
margin-top: 0.75rem;
|
|
}
|
|
|
|
.ProfileSection label {
|
|
display: block;
|
|
margin-bottom: 0.5rem;
|
|
|
|
color: var(--Blue);
|
|
}
|
|
|
|
.ProfileSection input,
|
|
.ProfileSection textarea,
|
|
.ProfileSection button {
|
|
font-family: inherit;
|
|
font-size: 1rem;
|
|
|
|
color: var(--Text);
|
|
background-color: var(--Surface0);
|
|
|
|
border: 3px solid var(--Surface2);
|
|
border-radius: 0;
|
|
|
|
appearance: none;
|
|
}
|
|
|
|
.ProfileSection input,
|
|
.ProfileSection textarea {
|
|
padding: 0.6rem;
|
|
|
|
outline: none;
|
|
}
|
|
|
|
.ProfileSection input {
|
|
min-width: 12rem;
|
|
}
|
|
|
|
.ProfileSection textarea {
|
|
width: 100%;
|
|
max-width: 24rem;
|
|
|
|
resize: vertical;
|
|
}
|
|
|
|
.ProfileSection input::placeholder,
|
|
.ProfileSection textarea::placeholder {
|
|
color: var(--Overlay1);
|
|
}
|
|
|
|
.ProfileSection input:hover,
|
|
.ProfileSection textarea:hover {
|
|
background-color: var(--Surface1);
|
|
border-color: var(--Overlay2);
|
|
}
|
|
|
|
.ProfileSection input:focus,
|
|
.ProfileSection textarea:focus {
|
|
background-color: var(--Surface1);
|
|
border-color: var(--Sky);
|
|
}
|
|
|
|
.ProfileSection button {
|
|
padding: 0.6rem 0.8rem;
|
|
|
|
cursor: pointer;
|
|
|
|
box-shadow:
|
|
3px 3px 0
|
|
var(--Crust);
|
|
}
|
|
|
|
.ProfileSection button:hover {
|
|
color: var(--Sky);
|
|
background-color: var(--Surface1);
|
|
|
|
border-color: var(--Sky);
|
|
|
|
transform: translate(1px, 1px);
|
|
|
|
box-shadow:
|
|
2px 2px 0
|
|
var(--Crust);
|
|
}
|
|
|
|
.ProfileSection button:active {
|
|
color: var(--Green);
|
|
background-color: var(--Surface2);
|
|
|
|
border-color: var(--Green);
|
|
|
|
transform: translate(2px, 2px);
|
|
|
|
box-shadow:
|
|
1px 1px 0
|
|
var(--Crust);
|
|
}
|
|
|
|
.ProfileSection button:focus-visible,
|
|
.ProfileSection summary:focus-visible {
|
|
outline: 3px solid var(--Yellow);
|
|
outline-offset: 3px;
|
|
}
|
|
|
|
.ProfileMessage {
|
|
margin-top: 0.75rem;
|
|
margin-bottom: 0;
|
|
|
|
color: var(--Subtext1);
|
|
}
|
|
|
|
.ProfileStatistics {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.ProfileStatistic {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
|
|
padding: 0.75rem;
|
|
|
|
background-color: var(--Base);
|
|
border: 3px solid var(--Surface2);
|
|
}
|
|
|
|
.ProfileStatisticName {
|
|
color: var(--Subtext1);
|
|
}
|
|
|
|
.AccountKeySpoiler {
|
|
margin-top: 1rem;
|
|
|
|
background-color: var(--Base);
|
|
border: 3px solid var(--Surface2);
|
|
}
|
|
|
|
.AccountKeySpoiler summary {
|
|
padding: 0.75rem;
|
|
|
|
cursor: pointer;
|
|
|
|
color: var(--Text);
|
|
background-color: var(--Surface0);
|
|
}
|
|
|
|
.AccountKeySpoiler summary:hover {
|
|
color: var(--Sky);
|
|
background-color: var(--Surface1);
|
|
}
|
|
|
|
.AccountKeyContent {
|
|
padding: 1rem;
|
|
border-top: 3px solid var(--Surface2);
|
|
}
|
|
|
|
#AccountKeyDisplay {
|
|
display: block;
|
|
|
|
margin-top: 0.75rem;
|
|
margin-bottom: 0.75rem;
|
|
padding: 0.75rem;
|
|
|
|
overflow-x: auto;
|
|
white-space: pre-wrap;
|
|
word-break: break-all;
|
|
|
|
color: var(--Green);
|
|
background-color: var(--Crust);
|
|
|
|
border: 3px solid var(--Surface2);
|
|
}
|
|
|
|
@media (max-width: 700px) {
|
|
body {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
gap: 1rem;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.Navbar {
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
|
|
flex-direction: row;
|
|
width: 100%;
|
|
|
|
top: 0;
|
|
overflow-x: auto;
|
|
z-index: 1;
|
|
}
|
|
|
|
.NavbarLink {
|
|
flex: 0 0 3.5rem;
|
|
width: 3.5rem;
|
|
height: 3.5rem;
|
|
}
|
|
|
|
.MainContainer {
|
|
grid-column: 1;
|
|
grid-row: 2;
|
|
}
|
|
|
|
.GardenLayout {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.SeedPanel {
|
|
grid-row: 1;
|
|
}
|
|
|
|
.SeedList {
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.SeedButton {
|
|
width: auto;
|
|
}
|
|
|
|
.GardenGrid {
|
|
grid-row: 2;
|
|
}
|
|
|
|
.LeaderboardTableContainer {
|
|
overflow-x: visible;
|
|
}
|
|
|
|
.LeaderboardTable {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
|
|
.LeaderboardUsername,
|
|
.LeaderboardDewColumn,
|
|
.LeaderboardDew {
|
|
width: auto;
|
|
min-width: 0;
|
|
}
|
|
|
|
.LeaderboardRankColumn,
|
|
.LeaderboardRank {
|
|
width: 2.5rem;
|
|
min-width: 0;
|
|
}
|
|
|
|
.LeaderboardTable th,
|
|
.LeaderboardTable td {
|
|
padding: 0.6rem 0.4rem;
|
|
}
|
|
|
|
.LeaderboardUsername {
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.ProfileFormRow,
|
|
.ProfileButtonRow {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.ProfileSection input,
|
|
.ProfileSection textarea,
|
|
.ProfileSection button {
|
|
width: 100%;
|
|
}
|
|
|
|
.ProfileStatistic {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
}
|