From 37c5de51a7ffe2ac44249104a3c9e0a0d3af8302 Mon Sep 17 00:00:00 2001
From: Greg Sarjeant <1686767+gsarjeant@users.noreply.github.com>
Date: Tue, 24 Jun 2025 19:58:48 -0400
Subject: [PATCH] Split admin CSS from main page CSS.

---
 public/css/admin.css   | 266 +++++++++++++++++++++++++++++++++++++++++
 public/css/default.css | 265 +---------------------------------------
 templates/main.php     |   4 +
 3 files changed, 273 insertions(+), 262 deletions(-)
 create mode 100644 public/css/admin.css

diff --git a/public/css/admin.css b/public/css/admin.css
new file mode 100644
index 0000000..0987d42
--- /dev/null
+++ b/public/css/admin.css
@@ -0,0 +1,266 @@
+@charset "UTF-8";
+
+legend, fieldset {
+    border: var(--border-width) solid var(--color-border);
+    border-radius: var(--border-radius);
+}
+
+legend { padding: 6px 12px; }
+
+fieldset {
+    margin-bottom: 16px;
+    padding: 16px;
+}
+
+/* Styling for input boxes */
+input[type="text"],
+input[type="number"],
+input[type="password"],
+input[type="file"],
+textarea,
+select {
+    width: 100%;
+    padding: 10px 12px;
+    border: var(--border-width-thin) solid var(--color-border);
+    border-radius: var(--border-radius);
+    font-family: inherit;
+    font-size: 1em;
+    resize: none;
+    box-sizing: border-box;
+}
+
+input[type="checkbox"] {
+    width: auto;
+    height: 2rem;
+    aspect-ratio: 1;
+    margin: 0;
+    cursor: pointer;
+    justify-self: start;
+    align-self: center;
+}
+
+/* A bit of custom styling for the file input */
+input[type="file"] {
+    border-style: dashed;
+    cursor: pointer;
+}
+
+button {
+    padding: 10px 20px;
+    border: var(--border-width-thin) solid var(--color-border);
+    border-radius: var(--border-radius);
+    background-color: var(--color-primary);
+    color: var(--color-text);
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    box-sizing: border-box;
+}
+
+label {
+    font-weight: 600;
+    color: var(--color-text);
+    text-align: left;
+    padding-top: 0;
+    margin-bottom: 3px;
+    line-height: 1.2;
+}
+
+label.css-description { font-weight: 300; }
+
+/* Grid layout for emoji fieldsets */
+fieldset.emoji-group {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(2em, 1fr));
+    gap: 0.3em;
+}
+
+.delete-emoji-fieldset .fieldset-items {
+    display: block;
+    grid-template-columns: none;
+}
+
+.delete-emoji-fieldset button {
+    margin-top: 16px;
+    width: auto;
+}
+
+.change-mood {
+    font-size: 0.9em;
+    white-space: nowrap;
+}
+
+.profile-tick-form {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    gap: 0.5em;
+}
+
+.flash-messages {
+    margin-top: 10px;
+    padding: 10px;
+    border-radius: var(--border-radius);
+}
+
+.flash-message {
+    padding: 12px 16px;
+    margin: 5px 0;
+    border-radius: var(--border-radius);
+    border-left: 4px solid;
+    font-weight: 500;
+}
+
+.flash-success {
+    background-color: var(--color-flash-success-bg);
+    border-left-color: var(--color-flash-success-border-left);
+    color: var(--color-flash-success);
+}
+
+.flash-error {
+    background-color: var(--color-flash-error-bg);
+    border-left-color: var(--color-flash-error-border-left);
+    color: var(--color-flash-error);
+}
+
+.fieldset-items {
+    margin-bottom: 14px;
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 6px;
+    align-items: start;
+}
+
+.file-input-wrapper {
+    position: relative;
+    width: 100%;
+}
+
+.file-info {
+    border-radius: var(--border-radius);
+    padding: 8px;
+    margin-top: 8px;
+    font-size: 13px;
+    color: var(--color-text);
+    grid-column: 1;
+}
+
+.delete-btn {
+    background-color: var(--color-delete-btn-bg);
+    border: var(--border-width-thin) solid var(--color-delete-btn-border);
+    color: var(--color-delete-btn);
+}
+
+.required { color: var(--color-required); }
+
+/* Mood selection page */
+.mood-option input {
+    position: absolute;
+    opacity: 0;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+}
+
+.mood-option span {
+    font-size: 1.4em;
+    display: inline-block;
+    padding: 0.2em;
+    border-radius: var(--border-radius);
+}
+
+.mood-option:hover span { background-color: var(--color-mood-hover); }
+
+.mood-option input:focus + span {
+    background-color: var(--color-mood-hover);
+    outline: 2px solid var(--color-focus);
+    outline-offset: 2px;
+}
+
+.mood-option input:checked + span {
+    background-color: var(--color-mood-selected);
+    outline: var(--border-width) solid var(--color-mood-border);
+}
+
+/* emoji management page */
+.delete-emoji-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 8px 12px;
+    border: 1px solid var(--color-border);
+    border-radius: var(--border-radius);
+    background-color: var(--color-bg);
+    margin-bottom: 6px;
+}
+
+.delete-emoji-item input[type="checkbox"] {
+    width: auto;
+    margin: 0;
+    cursor: pointer;
+}
+
+.delete-emoji-item label {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin: 0;
+    padding: 0;
+    font-weight: 400;
+    cursor: pointer;
+    flex-grow: 1;
+    text-align: left;
+}
+
+.delete-emoji-display {
+    font-size: 1.8em;
+    min-width: 2em;
+    text-align: center;
+}
+
+/* Add and delete emoji settings */
+.emoji-description {
+    flex-grow: 1;
+    color: var(--color-text);
+    font-size: 1em;
+}
+
+/*
+    Responsive layout - adjusts from 1 to 2 columns based on screen width
+        - min-width makes the mobile (stacked) view the default
+        - 600px covers most mobile devices in portrait mode
+        - Once the width exceeds that (e.g. desktops), it will convert to horizontal alignment
+*/
+@media (min-width: 600px) {
+    input[type="checkbox"] {
+        height: 100%;
+        /*grid-column: 2;*/
+        justify-self: start;
+        align-self: center;
+    }
+
+    label {
+        text-align: right;
+        padding-top: 10px;
+        margin-bottom: 0;
+    }
+
+    label.css-description {
+        text-align: left;
+        padding-top: 10px;
+        margin-bottom: 0;
+    }
+
+    .fieldset-items {
+        margin-bottom: 16px;
+        display: grid;
+        grid-template-columns: 200px 1fr;
+        gap: 16px;
+        align-items: start;
+    }
+
+    .file-info { grid-column: 2; }
+}
+
diff --git a/public/css/default.css b/public/css/default.css
index 0283a64..f4b0993 100644
--- a/public/css/default.css
+++ b/public/css/default.css
@@ -37,95 +37,13 @@ body {
 /*a { font-weight: bold; } */
 a { font-weight: bold; }
 
-legend, fieldset {
-    border: var(--border-width) solid var(--color-border);
-    border-radius: var(--border-radius);
-}
-
-legend { padding: 6px 12px; }
-
-fieldset {
-    margin-bottom: 16px;
-    padding: 16px;
-}
-
 /*
   Make the site description a little smaller,
   but keep it an h1 for screen readers.
 */
-h1.site-description { font-size: 1.5em; }
-
-/* Styling for input boxes */
-input[type="text"],
-input[type="number"],
-input[type="password"],
-input[type="file"],
-textarea,
-select {
-    width: 100%;
-    padding: 10px 12px;
-    border: var(--border-width-thin) solid var(--color-border);
-    border-radius: var(--border-radius);
-    font-family: inherit;
-    font-size: 1em;
-    resize: none;
-    box-sizing: border-box;
-}
-
-input[type="checkbox"] {
-    width: auto;
-    height: 2rem;
-    aspect-ratio: 1;
-    margin: 0;
-    cursor: pointer;
-    justify-self: start;
-    align-self: center;
-}
-
-/* A bit of custom styling for the file input */
-input[type="file"] {
-    border-style: dashed;
-    cursor: pointer;
-}
-
-button {
-    padding: 10px 20px;
-    border: var(--border-width-thin) solid var(--color-border);
-    border-radius: var(--border-radius);
-    background-color: var(--color-primary);
-    color: var(--color-text);
-    font-size: 14px;
-    font-weight: 600;
-    cursor: pointer;
-    box-sizing: border-box;
-}
-
-label {
-    font-weight: 600;
-    color: var(--color-text);
-    text-align: left;
-    padding-top: 0;
-    margin-bottom: 3px;
-    line-height: 1.2;
-}
-
-label.css-description { font-weight: 300; }
-
-/* Grid layout for emoji fieldsets */
-fieldset.emoji-group {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(2em, 1fr));
-    gap: 0.3em;
-}
-
-.delete-emoji-fieldset .fieldset-items {
-    display: block;
-    grid-template-columns: none;
-}
-
-.delete-emoji-fieldset button {
-    margin-top: 16px;
-    width: auto;
+h1.site-description {
+    font-size: 1.2rem;
+    margin-bottom: 1.2rem;
 }
 
 /* Navbar styling */
@@ -265,91 +183,17 @@ summary:focus,
     font-size: 1.1em;
 }
 
-.change-mood {
-    font-size: 0.9em;
-    white-space: nowrap;
-}
-
 .profile-about {
     font-style: italic;
     font-size: 0.95em;
 }
 
-.profile-tick-form {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    gap: 0.5em;
-}
-
-.site-description {
-    font-size: 1.2rem;
-    color: var(--color-text);
-    margin-bottom: 1.2rem;
-}
-
 .tick-feed {
     list-style: none;
     padding: 0;
     margin: 0.5em 0 0 0;
 }
 
-.flash-messages {
-    margin-top: 10px;
-    padding: 10px;
-    border-radius: var(--border-radius);
-}
-
-.flash-message {
-    padding: 12px 16px;
-    margin: 5px 0;
-    border-radius: var(--border-radius);
-    border-left: 4px solid;
-    font-weight: 500;
-}
-
-.flash-success {
-    background-color: var(--color-flash-success-bg);
-    border-left-color: var(--color-flash-success-border-left);
-    color: var(--color-flash-success);
-}
-
-.flash-error {
-    background-color: var(--color-flash-error-bg);
-    border-left-color: var(--color-flash-error-border-left);
-    color: var(--color-flash-error);
-}
-
-.fieldset-items {
-    margin-bottom: 14px;
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: 6px;
-    align-items: start;
-}
-
-.file-input-wrapper {
-    position: relative;
-    width: 100%;
-}
-
-.file-info {
-    border-radius: var(--border-radius);
-    padding: 8px;
-    margin-top: 8px;
-    font-size: 13px;
-    color: var(--color-text);
-    grid-column: 1;
-}
-
-.delete-btn {
-    background-color: var(--color-delete-btn-bg);
-    border: var(--border-width-thin) solid var(--color-delete-btn-border);
-    color: var(--color-delete-btn);
-}
-
-.required { color: var(--color-required); }
-
 .tick {
     margin-bottom: 1em;
     padding-left: 0.5em;
@@ -372,80 +216,6 @@ time {
     text-decoration: none;
 }
 
-/* Mood selection page */
-.mood-option input {
-    position: absolute;
-    opacity: 0;
-    width: 1px;
-    height: 1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-}
-
-.mood-option span {
-    font-size: 1.4em;
-    display: inline-block;
-    padding: 0.2em;
-    border-radius: var(--border-radius);
-}
-
-.mood-option:hover span { background-color: var(--color-mood-hover); }
-
-.mood-option input:focus + span {
-    background-color: var(--color-mood-hover);
-    outline: 2px solid var(--color-focus);
-    outline-offset: 2px;
-}
-
-.mood-option input:checked + span {
-    background-color: var(--color-mood-selected);
-    outline: var(--border-width) solid var(--color-mood-border);
-}
-
-/* emoji management page */
-.delete-emoji-item {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    padding: 8px 12px;
-    border: 1px solid var(--color-border);
-    border-radius: var(--border-radius);
-    background-color: var(--color-bg);
-    margin-bottom: 6px;
-}
-
-.delete-emoji-item input[type="checkbox"] {
-    width: auto;
-    margin: 0;
-    cursor: pointer;
-}
-
-.delete-emoji-item label {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    margin: 0;
-    padding: 0;
-    font-weight: 400;
-    cursor: pointer;
-    flex-grow: 1;
-    text-align: left;
-}
-
-.delete-emoji-display {
-    font-size: 1.8em;
-    min-width: 2em;
-    text-align: center;
-}
-
-/* Add and delete emoji settings */
-.emoji-description {
-    flex-grow: 1;
-    color: var(--color-text);
-    font-size: 1em;
-}
-
 /*
     Responsive layout - adjusts from 1 to 2 columns based on screen width
         - min-width makes the mobile (stacked) view the default
@@ -453,40 +223,11 @@ time {
         - Once the width exceeds that (e.g. desktops), it will convert to horizontal alignment
 */
 @media (min-width: 600px) {
-    input[type="checkbox"] {
-        height: 100%;
-        /*grid-column: 2;*/
-        justify-self: start;
-        align-self: center;
-    }
-
-    label {
-        text-align: right;
-        padding-top: 10px;
-        margin-bottom: 0;
-    }
-
-    label.css-description {
-        text-align: left;
-        padding-top: 10px;
-        margin-bottom: 0;
-    }
-
     .home-container {
         grid-template-columns: 1fr 2fr;
         grid-gap: 2em;
     }
 
-    .fieldset-items {
-        margin-bottom: 16px;
-        display: grid;
-        grid-template-columns: 200px 1fr;
-        gap: 16px;
-        align-items: start;
-    }
-
-    .file-info { grid-column: 2; }
-
     .navbar { flex-wrap: wrap; }
 
     .dropdown-menu {
diff --git a/templates/main.php b/templates/main.php
index 6c6bf7c..a726593 100644
--- a/templates/main.php
+++ b/templates/main.php
@@ -11,6 +11,10 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <link rel="stylesheet"
               href="<?= Util::escape_html($config->basePath) ?>css/default.css">
+<?php if(Session::isLoggedIn()): ?>
+        <link rel="stylesheet"
+              href="<?= Util::escape_html($config->basePath) ?>css/admin.css">
+<?php endif; ?>
 <?php if (!empty($config->cssId)): ?>
         <link rel="stylesheet"
               href="<?= Util::escape_html($config->basePath) ?>css/custom/<?= Util::escape_html($config->customCssFilename()) ?>">