update ui styles to better match ecorpus.eu

Holusion · Feb 20, 2024 · 8a81763 · 8a81763
1 parent 365d970
commit 8a81763
Show file tree

Hide file tree

Showing 16 changed files with 179 additions and 118 deletions.
diff --git a/source/server/templates/layouts/main.hbs b/source/server/templates/layouts/main.hbs
@@ -12,7 +12,7 @@
     <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>
 
@@ -21,6 +21,8 @@
     <style>
       body { background: #303030; }
     </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/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-background-darker);
       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-background-darker);
+      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-background-darker);
+      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-background-darker);
         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-background-light);
       }
 
       @media (min-width: 664px){

diff --git a/source/ui/composants/navbar/Navbar.ts b/source/ui/composants/navbar/Navbar.ts
@@ -19,12 +19,9 @@ import favicon from "../../assets/favicon.png";
 
   protected render() :TemplateResult {
   return html`<nav>
-    <div class="brand">
-      <a style="display:flex; align-items:center; color:#c8c8c8;text-decoration:none;font-weight:bold" href="/">
-        <img style="height:32px; padding: 0px 10px;" src="${favicon}" alt="logo eCorpus">
-        <span>eCorpus</span>
-      </a>
-    </div>
+    <a class="brand" href="/">
+      eCorpus
+    </a>
     <div class="spacer"></div>
     <div class="navbar"><slot>no-content</slot></div>
   </nav>`;

diff --git a/source/ui/composants/navbar/styles.scss b/source/ui/composants/navbar/styles.scss
@@ -29,8 +29,14 @@ nav {
     background-color: var(--color-dark);
   }
   .brand {
-    display:flex;
+    display: flex;
+    height: 100%;
     align-items: center;
+    font-size: 1.1em;
+    color: $color-secondary;
+    font-family: $font-heading;
+    font-weight: 400;
+    text-decoration: none;
   }
   .brand:hover {
     filter: brightness(1.2)
@@ -79,9 +85,9 @@ nav {
     }
 
     &.selected {
-      background-color: $color-primary;
+      background-color: $color-primary-light;
       &:hover, &:focus {
-        background-color: $color-primary-light;
+        background-color: lighten($color-primary-light, 10%);
       }
     }
 

diff --git a/source/ui/screens/Admin/UsersList.ts b/source/ui/screens/Admin/UsersList.ts
@@ -170,7 +170,7 @@ interface User {
                         <td>
                             <div style="display:flex; justify-content:end;gap:.6rem;">
                             <ui-button style=${u.isAdministrator ? "color:var(--color-light);opacity:0.2":"color:var(--color-danger)"} inline transparent icon="trash" title=${this.t("ui.delete")} @click=${()=>this.deleteUserOpen(u)} ?disabled=${u.isAdministrator}></ui-button>
-                            <ui-button style="color:var(--color-text-dark)" inline transparent icon="key" title="login link" @click=${()=>this.createLoginLink(u)}></ui-button>
+                            <ui-button style="color:var(--color-dark)" inline transparent icon="key" title="login link" @click=${()=>this.createLoginLink(u)}></ui-button>
                             </div>
                         </td>
                     </tr>`)}

diff --git a/source/ui/screens/LandingPage.ts b/source/ui/screens/LandingPage.ts
@@ -21,9 +21,11 @@ import "../composants/UserLogin"
         return html`
             <div class="landing-page">
                 <div class="illustration">
-                    <img src="${sketch}" alt="sketch représentant l'application voyager et son utilisation dans une borne holographique">
-                    <p>${this.t("info.lead")}</p>
-                    <p style="text-align:right"> <a href="/ui/standalone/?lang=${this.language.toUpperCase()}">${this.t("info.useStandalone")}</a></p>
+                    <img src="${sketch}" alt="dessin représentant l'application voyager et son utilisation dans une borne holographique">
+                    <p>${this.t("info.lead")}.</p>
+                    <p style="text-align:right">
+                        <a href="/ui/standalone/?lang=${this.language.toUpperCase()}">${this.t("info.useStandalone")}</a>
+                    </p>
                 </div>
                 
                 <div class="user-login">
@@ -48,12 +50,15 @@ import "../composants/UserLogin"
         flex: 1 1 auto;
     }
     .user-login {
-        background-color: var(--color-dark);
+        border: 1px solid var(--color-background-darker);
+        box-shadow: 0 0 5px 0 #00000088;
+        border-radius: 5px;
         width: 33%;
         padding: 1rem;
         min-width:300px;
         flex: 1 1 auto;
     }
+    
     img{
         display: block;
         max-width: 100%;

diff --git a/source/ui/screens/List.ts b/source/ui/screens/List.ts
@@ -157,7 +157,7 @@ interface Upload{
                 <div class="list-tasks form-control">
                     <div class="form-item" style="display:flex; margin-bottom:10px">
                         <input type="search" id="model-search" placeholder=${this.t("ui.searchScene")} @change=${this.onSearchChange}>
-                        <button class="btn btn-primary" style="margin-top:0" type="submit"><ui-icon name="search"></ui-icon></button>
+                        <button class="btn btn-addon btn-primary" style="margin-top:0" type="submit"><ui-icon name="search"></ui-icon></button>
                     </div>
                     <div class="section">
                         <h4 style="margin-top:0">${this.t("ui.newScene")}</h4>

diff --git a/source/ui/styles/buttons.scss b/source/ui/styles/buttons.scss
@@ -62,11 +62,11 @@ a{
   }
 
   &.btn-danger {
-    background-color: $color-danger;
+    background-color: $color-error;
     color: white;
 
     &:hover{
-      background-color: lighten($color-danger, 7%);
+      background-color: lighten($color-error, 7%);
     }    
   }
 

diff --git a/source/ui/styles/common.scss b/source/ui/styles/common.scss
@@ -5,6 +5,8 @@
 @import "./buttons.scss";
 @import "./forms.scss";
 
+@import "./titles.scss";
+
 .tooltip{
   div{
     display: none;

diff --git a/source/ui/styles/forms.scss b/source/ui/styles/forms.scss
@@ -28,92 +28,108 @@
   .form-item {
     position: relative;
     box-sizing: border-box;
-  }
 
-  .form-item > input{
-    box-sizing: border-box;
-    padding: 0.35rem .75rem;
-    display: block;
-    width: 100%;
-    font-size: 1rem;
-    font-weight: 400;
-    line-height: 1.5;
-    color: $color-light;
-    background: $color-dark;
-    background-clip: padding-box;
-    border-radius: 0;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    &:invalid:not(:placeholder-shown):not(:focus){
-      outline: $color-danger solid 1px;
+    > input{
+      box-sizing: border-box;
+      padding: 0.35rem .75rem;
+      display: block;
+      width: 100%;
+      font-size: 1rem;
+      font-weight: 400;
+      line-height: 1.5;
+      color: $color-light;
+      background: $color-background-dark;
+      background-clip: padding-box;
+      border-radius: 0;
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      appearance: none;
+      &:invalid:not(:placeholder-shown):not(:focus){
+        outline: $color-error solid 1px;
+      }
+      &:has( + .btn-addon){
+        //To have proper outline alignment
+        padding-right: 2.5rem;
+        margin-right: -2.5rem;
+      }
+    }
+    > input + .btn-addon{
+      width: 2.5rem;
+    }
+
+    > label{
+      opacity: 0.7;
     }
-  }
-  .form-item > label{
-    opacity: 0.7;
   }
 
+
   &.form-modal{
-    .form-item > input:not([type="submit"]){
-      background: $color-primary;
-      height: calc(3.5rem + 2px);
-    }
-    &[disabled] .form-item > input, .form-item > input:disabled {
-      background: $color-primary-dark;
-      pointer-events: none;
-    }
+    .form-item {
 
-    .form-item > input::placeholder{
-      display:none;
-      color: transparent;
-    }
-    .form-item > input:focus, .form-item > input:not(:placeholder-shown){
-      &[type="text"], &[type="password"]{
-        padding-top: 1.625rem;
-        padding-bottom: .625rem;
+      > input:not([type="submit"]){
+        border: 0px solid $color-background-darker;
+        border-bottom-width: 3px;
+        height: calc(3.5rem + 2px);
       }
+
+      > input::placeholder{
+        display:none;
+        color: transparent;
+      }
+
+      > input:focus, .form-item > input:not(:placeholder-shown){
+        &[type="text"], &[type="password"]{
+          padding-top: 1.625rem;
+          padding-bottom: .625rem;
+        }
+      }
+
+      > input:focus:not(:disabled){
+        color: $color-light;
+        background: none;
+        border-width: 1px 1px 3px 1px;
+        outline: 0;
+      }
+
+      > label {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        padding: 5px;
+        overflow: hidden;
+        text-align: start;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        pointer-events: none;
+        border: 1px solid transparent;
+        transform-origin: 0 0;
+        transition: opacity .1s ease-in-out,transform .1s ease-in-out;
+      }
+      input:focus ~ label, input:not(:placeholder-shown) ~label{
+        opacity: .65;
+        transform: scale(.85) translateY(-.5rem) translateX(.15rem);
+      } 
     }
-    .form-item > input:focus:not(:disabled){
-      color: $color-light;
-      background-color: var(--color-hover);
-      outline: 0;
-    }
-
-    .form-item > label {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      padding: 5px;
-      overflow: hidden;
-      text-align: start;
-      text-overflow: ellipsis;
-      white-space: nowrap;
+
+    &[disabled] .form-item > input, .form-item > input:disabled {
+      background: $color-background-darker;
       pointer-events: none;
-      border: 1px solid transparent;
-      transform-origin: 0 0;
-      transition: opacity .1s ease-in-out,transform .1s ease-in-out;
     }
 
     input:focus ~ label, input:not(:placeholder-shown) ~label{
       opacity: .65;
-    } 
-    .form-item{
-      input:focus ~ label, input:not(:placeholder-shown) ~label{
-        opacity: .65;
-        transform: scale(.85) translateY(-.5rem) translateX(.15rem);
-      } 
     }
 
   }
 
   input[type="submit"] {
-    background-color: $color-primary-light;
+    background: $color-background-light;
     color: white;
     cursor: pointer;
     &:hover:not(:disabled){
-      background: $color-secondary;
+      background: $color-primary-light;
     }
   }
 
@@ -133,7 +149,7 @@
     background: none;
     border: none;
     color: inherit;
-    background: #071922;
+    background: $color-background-dark;
     cursor: pointer;
     option{
       -webkit-appearance: none;