yet more customization options for styles

Holusion · Mar 1, 2024 · f3dc29a · f3dc29a
1 parent 6ed3420
commit f3dc29a
Show file tree

Hide file tree

Showing 9 changed files with 47 additions and 20 deletions.
diff --git a/source/server/templates/layouts/email.hbs b/source/server/templates/layouts/email.hbs
@@ -7,17 +7,26 @@
       h1{
         font-size:1.2rem;
         font-weight: bold;
-        color: #00517d;
+        color: black;
+        color: #eee;
+        display: inline-block;
+        padding: 1.5rem 0.2rem 0 1.5rem;
+        margin: 20px 0 0.4rem 0;
+        border-bottom: 0.6rem solid #E6B900;
       }
+
       .btn {
         cursor: pointer;
         color: white !important;
-        background-color: #0089bf;
+        background-color: #4735df;
         text-decoration: none;
         padding: 0.5rem 1rem;
         margin: 2rem 0.5rem;
         border-radius: 4px;
       }
+      .btn:hover, .btn:focus {
+        background-color: #5e5e5e;
+      }
     </style>
 
   </head>

diff --git a/source/server/templates/layouts/main.hbs b/source/server/templates/layouts/main.hbs
@@ -22,15 +22,18 @@
     <style>
       body{
         background: var(--color-background, #343434);
+        font-family: var(--font-body, sans-serif);
         position: relative;
+        box-sizing: border-box;
         width: 100%;
+        min-height: 100vh;
         padding: var(--nav-height, 44px) 0 0 0;
         margin: 0;
         display: block;
       }
     </style>
 
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="/dist/css/theme.css">
     <link rel="stylesheet" href="/dist/css/corpus.css">
 
   </head>

diff --git a/source/ui/styles/globals.scss b/source/ui/styles/globals.scss
@@ -21,8 +21,8 @@
   --color-warning: #e6a345;
   --color-error: #e64545;
 
-  --font-body: 'Open Sans', 'Liberation', 'Roboto', 'sans-serif';
-  --font-heading: 'Noto Serif', 'serif';
+  --font-body: 'sans-serif';
+  --font-heading: 'serif';
 
   /* Main (body) background color */
   --color-background: #343434;

diff --git a/source/ui/styles/layout.scss b/source/ui/styles/layout.scss
@@ -28,9 +28,10 @@
 
   padding: 1rem;
   margin-bottom: 1rem;
-  h3{
-    margin-top: 0;
-    color: var(--color-primary);
+  h1, h2, h3, h4, h5, h6{
+    &:first-child{
+      margin-top: 0;
+    }
   }
 }
 

diff --git a/source/ui/styles/main.scss b/source/ui/styles/main.scss
@@ -11,6 +11,7 @@ main{
   max-width: var(--col-width);
   margin: auto;
 
+  font-family: var(--font-body);
   color: var(--color-text);
   min-height: calc(100vh - var(--nav-height));
   padding-top: .67em;

diff --git a/source/ui/styles/tables.scss b/source/ui/styles/tables.scss
@@ -4,8 +4,17 @@ table.list-table {
   border-collapse: collapse;
   width: 100%;
   display: table;
-  background-color:#000a;
+
+  background: var(--color-element);
   color: var(--color-text);
+
+  tbody tr:nth-child(2n+1){
+    background: var(--color-section);
+  }
+  tbody {
+    border-bottom: 1px solid var(--color-element);
+  }
+
   tr:last-child {
     border-bottom: 0;
   }
@@ -21,23 +30,22 @@ table.list-table {
   }
 
   th {
-    color: var(--color-text);
-    font-weight: bold;
-    background-color: var(--color-dark);
     position: sticky;
     top: 0;
+    font-size: 1.2rem;
+    font-weight: bold;
+    padding: 1.2rem 1rem 0.8rem;
+    color: var(--color-primary);
+    border-bottom: 2px solid var(--color-primary);
   }
+
   td {
-    border-bottom: solid 1px var(--color-dark);
     border-left: 0;
     border-right: 0;
     white-space: nowrap;
   }
-  tbody tr:nth-child(2n){
-    background: #000c;
-  }
   tbody tr:hover{
-    background-color: #071922;
+    background: var(--color-dark);
     transition: background-color 150ms ease-out;
   }
   &.disabled{

diff --git a/source/ui/styles/theme.scss b/source/ui/styles/theme.scss
@@ -0,0 +1,7 @@
+// See /dist/css/globals.css for a list of all customizable variables
+
+@import url("https://fonts.googleapis.com/css2?family=Noto+Serif&display=swap");
+html:root {
+  --font-body: 'Open Sans', 'Liberation', 'Roboto', 'sans-serif';
+  --font-heading: 'Noto Serif', 'serif';
+}
diff --git a/source/ui/styles/titles.scss b/source/ui/styles/titles.scss
@@ -8,7 +8,6 @@ h1{
   display: inline-block;
   color: var(--color-text);
   padding: 1.5rem 0.2rem 0 1.5rem;
-  margin: 20px 0 0.4rem 0;
   border-bottom: 0.6rem solid var(--color-primary);
   @include text-colors {
     border-bottom-color: currentColor;
@@ -21,6 +20,4 @@ h2{
     border-left-color: currentColor;
   }
   padding: 0.5rem 0 0 0.8rem;
-  display: flex;
-  justify-content: start;
 }
diff --git a/source/ui/webpack.config.js b/source/ui/webpack.config.js
@@ -57,6 +57,7 @@ module.exports = function createAppConfig(env, argv={})
         cache: {type: "filesystem"},
         entry: {
             "corpus": "source/MainView.ts",
+            "theme": "source/styles/theme.scss",
         },
 
         output: {