From 2b55a830b39ceefd4cfac646901fa973eff1c7a1 Mon Sep 17 00:00:00 2001 From: Sarahtonin Date: Sun, 30 Aug 2026 18:29:35 +0200 Subject: [PATCH] Update Style.css --- Styles/Style.css | 356 +++++++++-------------------------------------- 1 file changed, 64 insertions(+), 292 deletions(-) diff --git a/Styles/Style.css b/Styles/Style.css index 0d863e8..20c49ec 100644 --- a/Styles/Style.css +++ b/Styles/Style.css @@ -270,6 +270,37 @@ select { image-rendering: auto; } +@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; + } +} + .GardenStatus { margin-bottom: 1.5rem; padding: 0.75rem 1rem; @@ -448,6 +479,29 @@ select { var(--Blue); } +@media (max-width: 700px) { + .GardenLayout { + grid-template-columns: 1fr; + } + + .SeedPanel { + grid-row: 1; + } + + .SeedList { + flex-direction: row; + flex-wrap: wrap; + } + + .SeedButton { + width: auto; + } + + .GardenGrid { + grid-row: 2; + } +} + .GardenUser, .Leaderboard { margin-top: 1.5rem; @@ -676,305 +730,23 @@ select { 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; + font-size: 1rem; } .LeaderboardTable th, .LeaderboardTable td { - padding: 0.6rem 0.4rem; + padding: 0.6rem; } - .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; + .LeaderboardRankColumn, + .LeaderboardRank { + width: 3rem; } } + +.LeaderboardTable th:last-child, +.LeaderboardTable td:last-child { + text-align: right; +}