update ui styles to better match ecorpus.eu

rework logo and favicons substitute all scss variables with css replaceable ones
Holusion · Feb 23, 2024 · f191e11 · f191e11
1 parent dab0613
commit f191e11
Show file tree

Hide file tree

Showing 24 changed files with 277 additions and 258 deletions.
diff --git a/source/server/templates/layouts/main.hbs b/source/server/templates/layouts/main.hbs
@@ -12,15 +12,26 @@
     <link rel="apple-touch-icon" href="{{thumb}}">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
-
+    
 
     <title>{{title}}</title>
 
-    <link rel="shortcut icon" type="image/png" href="/dist/favicon.png"/>
+    <link rel="icon" type="image/png" href="/dist/favicon.png" sizes="32x32"/>
+    <link rel="shortcut icon" type="image/svg+xml" href="/dist/favicon.svg"/>
 
     <style>
-      body { background: #303030; }
+      body{
+        background: var(--color-background, #343434);
+        position: relative;
+        min-height: 100vh;
+        width: 100%;
+        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/corpus.css">
 
   </head>

diff --git a/source/ui/assets/favicon.png b/source/ui/assets/favicon.png
diff --git a/source/ui/assets/favicon.svg b/source/ui/assets/favicon.svg
diff --git a/source/ui/assets/images/logo-full.svg b/source/ui/assets/images/logo-full.svg
diff --git a/source/ui/assets/images/logo-sm.svg b/source/ui/assets/images/logo-sm.svg
diff --git a/source/ui/composants/ListItem.ts b/source/ui/composants/ListItem.ts
@@ -51,9 +51,9 @@ export default class ListItem extends LitElement{
       white-space: nowrap;
       text-overflow: ellipsis;
       overflow: hidden;
-      background: #000a;
+      background: var(--color-element);
       padding: 1rem;
-      border-bottom: 1px solid #103040;
+      border-bottom: 1px solid var(--color-dark);
     }
     .list-item:hover{
       background: #071922

diff --git a/source/ui/composants/Modal.ts b/source/ui/composants/Modal.ts
@@ -102,15 +102,17 @@ interface ModalOptions{
       top: max(100px, 15vh);
       min-width: 30vw;
       max-width: calc(100vw - 20px);
-      border: none;
-      background-color: var(--color-dark);
+      border: 1px solid var(--color-element);
+      border-radius: 5px;
+      background-color: var(--color-background);
       color: var(--color-light);
       box-shadow: 0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);
     }
 
     .btn{
       color: white;
-      background: var(--color-tertiary);
+      background: var(--color-element);
+      transition: background 0.2s;
     }
     .btn:hover{
       background: var(--color-secondary);

diff --git a/source/ui/composants/SceneCard.ts b/source/ui/composants/SceneCard.ts
@@ -93,17 +93,19 @@ import { AccessType, AccessTypes, Scene } from "../state/withScenes";
       }
 
       .scene-card-inner{
-        background-color: #000a;
+        background-color: var(--color-element);
         box-sizing: border-box;
         padding: 1rem;
         width: 100%;
         height: 100%;
         border-radius: 4px;
-        border: 1px solid #103040;
+        border: 1px solid #181818;
+        transition: background 0.2s, border 0.2s;
       }
 
       .scene-card-inner:hover{
-        background-color: #071922;
+        background-color: var(--color-background);
+        border-color: var(--color-highlight);
       }
 
       @media (min-width: 664px){