songs2slides

commit 939d64db5c7b29462db9877a138e918fa890e5c5
parent eb2f67bd77645358a8ce5c2477fc687b1d30bf02
Author: Asher Morgan <59518073+ashermorgan@users.noreply.github.com>
Date:   Tue, 26 Mar 2024 13:27:37 -0700

Update styles

Diffstat:
M
songs2slides/static/create.css
 | 
12
+++++++-----
M
songs2slides/static/global.css
 | 
106
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--------

2 files changed, 103 insertions(+), 15 deletions(-)
diff --git a/songs2slides/static/create.css b/songs2slides/static/create.css
@@ -9,11 +9,13 @@
 /* step 1 */
 table {
     width: 100%;
-    border-collapse: enable;
+    border-collapse: collapse;
 }
 table input {
     width: 100%;
-    padding: 0.2rem 0.5rem;
+}
+table td {
+    padding: 0.2rem;
 }
 
 .loading-modal {
@@ -29,7 +31,7 @@ table input {
     padding: 1rem;
     width: 300px;
     text-align: center;
-    background: #fff;
+    background: var(--background1);
     border-radius: 0.5rem;
 }
 
@@ -43,7 +45,7 @@ table input {
   height: 2rem;
   border-radius: 50%;
   border: 0.3rem solid;
-  border-color: #000 #000 #000 transparent;
+  border-color: var(--foreground) var(--foreground) var(--foreground) transparent;
   animation: spinner 1s linear infinite;
 }
 @keyframes spinner {
@@ -67,7 +69,7 @@ textarea {
 }
 
 .missing summary {
-    color: red;
+    color: var(--error);
 }
 .missing summary span {
     float: right;
diff --git a/songs2slides/static/global.css b/songs2slides/static/global.css
@@ -8,23 +8,17 @@
 body {
     font-family: sans-serif;
 }
-header, main {
-    padding: 1rem;
-}
-
-/* page header */
 header {
-    background: #ffff50;
     font-weight: bold;
     text-align: center;
     font-size: 1.5rem;
 }
-
-/* page content */
 main {
     margin: auto;
     max-width: 500px;
 }
+
+/* spacing and alignment */
 h1 {
     text-align: center;
 }
@@ -32,6 +26,98 @@ p {
     line-height: 1.4;
     margin-bottom: 1rem;
 }
-button, input[type=button] {
-    padding: 0.2rem 0.5rem;
+
+/* padding and borders */
+header, main {
+    padding: 1rem;
+}
+button, input {
+    padding: 0.3rem 0.5rem;
+    border: 1px solid;
+    border-radius: 5px;
+}
+textarea {
+    padding: 0.5rem;
+}
+
+/* colors */
+body {
+    color: var(--foreground);
+    background-color: var(--background1);
+}
+header {
+    color: #000000;
+    background: var(--theme);
+}
+input, button, textarea {
+    color: var(--foreground);
+    border-color: var(--background5);
+    background-color: var(--background2);
+}
+@media (hover: hover) {
+    button:hover, input[type=button]:hover {
+        background-color: var(--background3);
+    }
+}
+button:active, input[type=button]:active {
+    background-color: var(--background4);
+}
+a {
+    color: var(--link);
+}
+
+/* light/default theme */
+:root {
+  /* The theme color of the app */
+  --theme: hsl(60, 100%, 65%);
+
+  /* The background color of the app */
+  --background1: #ffffff;
+
+  /* The default background color of app elements */
+  --background2: #f8f8f8;
+
+  /* The background color of focused app elements */
+  --background3: #e8e8e8;
+
+  /* The background color of active app elements */
+  --background4: #e0e0e0;
+
+  /* The border color of app elements */
+  --background5: #a0a0a0;
+
+  /* The foreground color of app elements */
+  --foreground: #000000;
+
+  /* The color of links */
+  --link: hsl(210, 100%, 40%);
+
+  /* The error color */
+  --error: hsl(0, 100%, 40%);
+}
+
+/* dark mode */
+@media only screen and (prefers-color-scheme: dark) {
+  :root {
+    --background1: hsl(210, 20%, 10%);
+    --background2: hsl(210, 20%, 15%);
+    --background3: hsl(210, 20%, 20%);
+    --background4: hsl(210, 20%, 25%);
+    --background5: hsl(210, 20%, 45%);
+    --foreground: #e8e8e8;
+    --link: hsl(210, 100%, 65%);
+  }
+}
+
+/* print media mode */
+@media only print {
+  :root {
+    --background1: #ffffff;
+    --background2: #ffffff;
+    --background3: #ffffff;
+    --background4: #ffffff;
+    --background5: #000000;
+    --foreground: #000000;
+    --link: #0000ff;
+  }
 }