Made pages more visually coherent and simplified css a bit more. Also

added border to plants that indicate the growth time.

Pages/Garden.php

@@ -17,7 +17,7 @@ $PageSection = "Garden";
         <main class="MainContainer">
             <h1>Garden</h1>
 
-            <div class="GardenStatus">
+            <div class="StatusPanel">
                 <strong>Dew:</strong>
                 <span id="DewAmount">0</span>
                 <br>
@@ -37,7 +37,7 @@ $PageSection = "Garden";
 
                 <section
                     id="Seeds"
-                    class="SeedPanel"
+                    class="Panel SeedPanel"
                 >
                     <h2>Seeds</h2>
 
@@ -53,7 +53,7 @@ $PageSection = "Garden";
                     <div class="ToolList">
                         <button
                             id="ShovelToolButton"
-                            class="ToolButton ToolButtonShovel"
+                            class="ActionButton ToolButton ToolButtonShovel"
                             type="button"
                         >
                             Shovel
@@ -62,13 +62,13 @@ $PageSection = "Garden";
                 </section>
             </div>
 
-            <p id="GardenMessage">
+            <p id="GardenMessage" class="PageMessage">
                 Select a seed, then choose an empty plot.
             </p>
 
             <section
                 id="Player"
-                class="GardenUser"
+                class="Panel GardenUser"
             >
                 <h2>Player</h2>
 
@@ -103,7 +103,7 @@ $PageSection = "Garden";
 
             <section
                 id="Leaderboard"
-                class="Leaderboard"
+                class="Panel Leaderboard"
             >
                 <h2>Leaderboard</h2>
 

Pages/Guide.php

@@ -142,7 +142,7 @@ $PageSection = "Guide";
                         aria-label="Red Rose, empty plot, Blue Rose"
                     >
                         <div
-                            class="GuideRecipeCell GuideRecipePlant"
+                            class="PlantTile GuideRecipeCell GuideRecipePlant"
                             data-plant-key="RedRose"
                         >
                             <span class="GuideRecipeLabel">
@@ -151,13 +151,13 @@ $PageSection = "Guide";
                         </div>
 
                         <div
-                            class="GuideRecipeCell GuideRecipeEmpty"
+                            class="PlantTile GuideRecipeCell GuideRecipeEmpty"
                         >
                             <span>Empty</span>
                         </div>
 
                         <div
-                            class="GuideRecipeCell GuideRecipePlant"
+                            class="PlantTile GuideRecipeCell GuideRecipePlant"
                             data-plant-key="BlueRose"
                         >
                             <span class="GuideRecipeLabel">

Pages/Profile.php

@@ -25,7 +25,7 @@ $PageTitle = "Profile";
 
             <section
                 id="Player"
-                class="ProfileSection"
+                class="Panel ProfileSection"
             >
                 <h2>Player</h2>
 
@@ -101,7 +101,7 @@ $PageTitle = "Profile";
 
             <section
                 id="Statistics"
-                class="ProfileSection"
+                class="Panel ProfileSection"
             >
                 <h3>Statistics</h3>
 
@@ -161,7 +161,7 @@ $PageTitle = "Profile";
 
             <section
                 id="Account"
-                class="ProfileSection"
+                class="Panel ProfileSection"
             >
                 <h2>Account</h2>
 
@@ -228,7 +228,7 @@ $PageTitle = "Profile";
 
             <section
                 id="Import"
-                class="ProfileSection"
+                class="Panel ProfileSection"
             >
                 <h3>Import Account</h3>
 

Pages/Shop.php

@@ -17,7 +17,7 @@ $PageSection = "Shop";
         <main class="MainContainer">
             <h1>Garden shop</h1>
 
-            <div class="ShopStatus">
+            <div class="StatusPanel">
                 <strong>Dew:</strong>
                 <span id="ShopDewAmount">0</span>
             </div>
@@ -52,7 +52,7 @@ $PageSection = "Shop";
                 ></div>
             </section>
 
-            <p id="ShopMessage">
+            <p id="ShopMessage" class="PageMessage">
                 Choose a seed to buy.
             </p>
         </main>

Scripts/Garden/Garden.js

@@ -262,7 +262,7 @@ function RenderSeeds() {
             );
 
         Button.className =
-            "SeedButton";
+            "ActionButton SeedButton";
 
         Button.type = "button";
 
@@ -353,7 +353,7 @@ function CreatePlotElement(
         );
 
     Button.className =
-        "GardenPlot";
+        "PlantTile GardenPlot";
 
     Button.type = "button";
 
@@ -394,6 +394,18 @@ function CreatePlotElement(
     }
 
 
+    const Progress =
+        GetPlantGrowthProgress(
+            Plot,
+            Plant
+        );
+
+    Button.style.setProperty(
+        "--GrowthProgress",
+        `${Progress * 100}%`
+    );
+
+
     const ImagePath =
         GetPlantImage(
             Plot,
@@ -407,7 +419,7 @@ function CreatePlotElement(
             );
 
         Image.className =
-            "GardenPlant";
+            "PlantSprite";
 
         Image.alt =
             Plant.Name;
@@ -462,10 +474,7 @@ function CreatePlotElement(
 
 
     if (
-        IsPlantMature(
-            Plot,
-            Plant
-        )
+        Progress >= 1
     ) {
         Button.classList.add(
             "GardenPlotMature"
@@ -484,12 +493,6 @@ function CreatePlotElement(
             }
         );
     } else {
-        const Progress =
-            GetPlantGrowthProgress(
-                Plot,
-                Plant
-            );
-
         Button.title =
             Plant.Name +
             " - " +

Scripts/Garden/Guide.js

@@ -46,7 +46,7 @@ function RenderGuideRecipePlants() {
             );
 
         Image.className =
-            "GuideRecipeImage";
+            "PlantSprite GuideRecipeImage";
 
         Image.src =
             Images[

Scripts/Garden/Shop.js

@@ -115,7 +115,7 @@ function CreateShopSeedCard(
         );
 
     Card.className =
-        "ShopItem";
+        "Panel ShopItem";
 
 
     const Header =
@@ -250,7 +250,7 @@ function CreateShopSeedCard(
         );
 
     BuyButton.className =
-        "ShopBuyButton";
+        "ActionButton ShopBuyButton";
 
     BuyButton.type = "button";
 
@@ -306,7 +306,7 @@ function CreateShopPlantVisual(
         );
 
     ImageFrame.className =
-        "ShopPlantImageFrame";
+        "PlantTile ShopPlantImageFrame";
 
 
     const PlantKey =
@@ -344,7 +344,7 @@ function CreateShopPlantVisual(
             );
 
         Image.className =
-            "ShopPlantImage";
+            "PlantSprite";
 
         Image.src =
             Images[

Styles/Style.css

@@ -79,6 +79,85 @@ body {
     border: 4px solid var(--Mauve);
 }
 
+.Panel {
+    background-color: var(--Mantle);
+    border: 4px solid var(--Mauve);
+}
+
+.StatusPanel {
+    margin-bottom: 1.5rem;
+    padding: 0.75rem 1rem;
+
+    background-color: var(--Mantle);
+    border: 3px solid var(--Surface2);
+}
+
+.PageMessage {
+    margin-top: 1rem;
+    margin-bottom: 0;
+    padding: 0.75rem;
+
+    color: var(--Subtext1);
+    background-color: var(--Mantle);
+
+    border-left: 4px solid var(--Blue);
+}
+
+.PlantTile {
+    overflow: hidden;
+
+    background-color: var(--Surface0);
+    border: 3px solid var(--Surface2);
+}
+
+.PlantSprite {
+    display: block;
+
+    width: 100%;
+    height: 100%;
+
+    object-fit: contain;
+    image-rendering: pixelated;
+}
+
+.ActionButton {
+    --ActionAccent: var(--Sky);
+
+    width: 100%;
+    padding: 0.6rem;
+
+    cursor: pointer;
+
+    color: var(--Text);
+    background-color: var(--Surface0);
+
+    border: 3px solid var(--Surface2);
+    border-radius: 0;
+
+    box-shadow: 3px 3px 0 var(--Crust);
+
+    appearance: none;
+}
+
+.ActionButton:hover:not(:disabled) {
+    color: var(--ActionAccent);
+    background-color: var(--Surface1);
+    border-color: var(--ActionAccent);
+
+    transform: translate(1px, 1px);
+    box-shadow: 2px 2px 0 var(--Crust);
+}
+
+.ActionButton:active:not(:disabled) {
+    transform: translate(2px, 2px);
+    box-shadow: 1px 1px 0 var(--Crust);
+}
+
+.ActionButton:focus-visible {
+    outline: 3px solid var(--Yellow);
+    outline-offset: 3px;
+}
+
 h1,
 h2,
 h3,
@@ -270,14 +349,6 @@ select {
     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;
@@ -306,6 +377,11 @@ select {
 }
 
 .GardenPlot {
+    --GrowthProgress: 0%;
+    --GrowthColour: var(--Green);
+    --PlotBorderColour: var(--Surface2);
+    --TileBackground: var(--Surface0);
+
     position: relative;
 
     width: 100%;
@@ -313,31 +389,34 @@ select {
 
     padding: 0;
 
-    overflow: hidden;
     cursor: pointer;
 
-    background-color: var(--Surface0);
+    border-color: transparent;
 
-    border: 3px solid var(--Surface2);
+    background:
+        linear-gradient(
+            var(--TileBackground),
+            var(--TileBackground)
+        ) padding-box,
+        conic-gradient(
+            from -90deg,
+            var(--GrowthColour)
+                0
+                var(--GrowthProgress),
+            var(--PlotBorderColour)
+                var(--GrowthProgress)
+                100%
+        ) border-box;
 
-    box-shadow:
-        3px 3px 0
-        var(--Crust);
+    box-shadow: 3px 3px 0 var(--Crust);
 }
 
 .GardenPlot:hover {
-    background-color: var(--Surface1);
-    border-color: var(--Sky);
+    --TileBackground: var(--Surface1);
+    --PlotBorderColour: var(--Sky);
 
-    transform:
-        translate(
-            1px,
-            1px
-        );
-
-    box-shadow:
-        2px 2px 0
-        var(--Crust);
+    transform: translate(1px, 1px);
+    box-shadow: 2px 2px 0 var(--Crust);
 }
 
 .GardenPlot:focus-visible {
@@ -349,37 +428,19 @@ select {
 }
 
 .GardenPlotEmpty {
-    background-color: var(--Mantle);
+    --TileBackground: var(--Mantle);
 }
 
 .GardenPlotEmpty:hover {
-    background-color: var(--Surface0);
-}
-
-.GardenPlotMature {
-    border-color: var(--Green);
+    --TileBackground: var(--Surface0);
 }
 
 .GardenPlotMature:hover {
-    border-color: var(--Yellow);
-}
-
-.GardenPlant {
-    display: block;
-
-    width: 100%;
-    height: 100%;
-
-    object-fit: contain;
-
-    image-rendering: pixelated;
+    --GrowthColour: var(--Yellow);
 }
 
 .SeedPanel {
     padding: 0.75rem;
-
-    background-color: var(--Mantle);
-    border: 4px solid var(--Mauve);
 }
 
 .SeedPanel h2 {
@@ -392,41 +453,9 @@ select {
     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"] {
+    --ActionAccent: var(--Green);
+
     color: var(--Green);
 
     background-color: var(--Surface1);
@@ -447,43 +476,9 @@ select {
     gap: 0.5rem;
 }
 
-.ToolButton {
-    width: 100%;
-    padding: 0.6rem;
-
-    cursor: pointer;
-
-    color: var(--Text);
-    background-color: var(--Surface0);
-
-    border: 3px solid var(--Surface2);
-    border-radius: 0;
-
-    box-shadow:
-        3px 3px 0
-        var(--Crust);
-
-    appearance: none;
-}
-
-.ToolButton:hover {
-    color: var(--Sky);
-    background-color: var(--Surface1);
-
-    border-color: var(--Sky);
-
-    transform:
-        translate(
-            1px,
-            1px
-        );
-
-    box-shadow:
-        2px 2px 0
-        var(--Crust);
-}
-
 .ToolButtonShovel[aria-current="true"] {
+    --ActionAccent: var(--Red);
+
     color: var(--Red);
     background-color: var(--Surface1);
 
@@ -491,31 +486,14 @@ select {
 }
 
 .GardenPlotRemove:hover {
-    border-color: var(--Red);
-}
-
-#GardenMessage {
-    margin-top: 1rem;
-    margin-bottom: 0;
-
-    padding: 0.75rem;
-
-    color: var(--Subtext1);
-    background-color: var(--Mantle);
-
-    border-left:
-        4px solid
-        var(--Blue);
+    --GrowthColour: var(--Red);
+    --PlotBorderColour: var(--Red);
 }
 
 .GardenUser,
 .Leaderboard {
     margin-top: 1.5rem;
     padding: 1rem;
-
-    background-color: var(--Mantle);
-
-    border: 4px solid var(--Mauve);
 }
 
 .GardenUser h2,
@@ -740,9 +718,6 @@ select {
 .ProfileSection {
     margin-top: 1.5rem;
     padding: 1rem;
-
-    background-color: var(--Mantle);
-    border: 4px solid var(--Mauve);
 }
 
 .ProfileSection h2 {
@@ -1041,14 +1016,6 @@ select {
     text-align: center;
 }
 
-.ShopStatus {
-    margin-bottom: 1.5rem;
-    padding: 0.75rem 1rem;
-
-    background-color: var(--Mantle);
-    border: 3px solid var(--Surface2);
-}
-
 .ShopSection {
     margin-top: 1.5rem;
 }
@@ -1070,12 +1037,7 @@ select {
 
     padding: 0.75rem;
 
-    background-color: var(--Mantle);
-    border: 4px solid var(--Mauve);
-
-    box-shadow:
-        3px 3px 0
-        var(--Crust);
+    box-shadow: 3px 3px 0 var(--Crust);
 }
 
 .ShopItemHeader {
@@ -1128,20 +1090,7 @@ select {
     align-items: center;
     justify-content: center;
 
-    overflow: hidden;
-
     background-color: var(--Base);
-    border: 3px solid var(--Surface2);
-}
-
-.ShopPlantImage {
-    display: block;
-
-    width: 100%;
-    height: 100%;
-
-    object-fit: contain;
-    image-rendering: pixelated;
 }
 
 .ShopItemNumber {
@@ -1178,48 +1127,9 @@ select {
 }
 
 .ShopBuyButton {
-    width: 100%;
+    --ActionAccent: var(--Green);
+
     padding: 0.65rem 0.8rem;
-
-    cursor: pointer;
-
-    color: var(--Text);
-    background-color: var(--Surface0);
-
-    border: 3px solid var(--Surface2);
-    border-radius: 0;
-
-    box-shadow:
-        3px 3px 0
-        var(--Crust);
-
-    appearance: none;
-}
-
-.ShopBuyButton:hover:not(:disabled) {
-    color: var(--Green);
-    background-color: var(--Surface1);
-
-    border-color: var(--Green);
-
-    transform: translate(1px, 1px);
-
-    box-shadow:
-        2px 2px 0
-        var(--Crust);
-}
-
-.ShopBuyButton:active:not(:disabled) {
-    transform: translate(2px, 2px);
-
-    box-shadow:
-        1px 1px 0
-        var(--Crust);
-}
-
-.ShopBuyButton:focus-visible {
-    outline: 3px solid var(--Yellow);
-    outline-offset: 3px;
 }
 
 .ShopBuyButton:disabled {
@@ -1243,19 +1153,6 @@ select {
     border: 3px solid var(--Surface2);
 }
 
-#ShopMessage {
-    margin-top: 1rem;
-    margin-bottom: 0;
-    padding: 0.75rem;
-
-    color: var(--Subtext1);
-    background-color: var(--Mantle);
-
-    border-left:
-        4px solid
-        var(--Blue);
-}
-
 @media (max-width: 700px) {
     .ShopSeedList {
         grid-template-columns: 1fr;
@@ -1305,14 +1202,6 @@ select {
 
 .GuideSection {
     margin-top: 1.5rem;
-    padding: 1rem;
-
-    background-color: var(--Mantle);
-    border: 4px solid var(--Mauve);
-}
-
-.GuideSection h2 {
-    margin-bottom: 1rem;
 }
 
 .GuideSection > :last-child {
@@ -1360,9 +1249,6 @@ select {
     padding: 0.35rem;
 
     text-align: center;
-
-    background-color: var(--Surface0);
-    border: 3px solid var(--Surface2);
 }
 
 .GuideRecipePlant {
@@ -1376,13 +1262,8 @@ select {
 }
 
 .GuideRecipeImage {
-    display: block;
-
     width: 3.75rem;
     height: 3.75rem;
-
-    object-fit: contain;
-    image-rendering: pixelated;
 }
 
 .GuideRecipeLabel {
@@ -1404,10 +1285,6 @@ select {
 }
 
 @media (max-width: 700px) {
-    .GuideSection {
-        padding: 0.75rem;
-    }
-
     .GuideRecipe {
         grid-template-columns:
             repeat(