update colors

zero.Core/zero.Core.csproj

@@ -16,12 +16,12 @@
   </ItemGroup>-->
 
   <ItemGroup>
-    <PackageReference Include="FluentValidation" Version="9.0.1" />
+    <PackageReference Include="FluentValidation" Version="9.1.2" />
     <PackageReference Include="Microsoft.AspNetCore.Identity" Version="2.2.0" />
     <PackageReference Include="Microsoft.AspNetCore.Mvc.Core" Version="2.2.5" />
     <PackageReference Include="Microsoft.Extensions.Logging.Abstractions" Version="5.0.0-preview.7.20364.11" />
-    <PackageReference Include="RavenDB.Client" Version="5.0.0" />
-    <PackageReference Include="SixLabors.ImageSharp" Version="1.0.0-rc0003" />
+    <PackageReference Include="RavenDB.Client" Version="5.0.1" />
+    <PackageReference Include="SixLabors.ImageSharp" Version="1.0.0" />
   </ItemGroup>
 
 </Project>

zero.Web.UI/App/components/buttons/add-button.vue

@@ -104,6 +104,7 @@
     align-items: center;
     padding: 20px 10px;
     font-size: var(--font-size);
+    border-radius: var(--radius);
 
     i
     {
@@ -120,7 +121,7 @@
 
     &:hover
     {
-      background: var(--color-bg-xxlight);
+      background: var(--color-bg-bright-three);
     }
   }
 
@@ -128,6 +129,6 @@
   {
     display: block;
     height: 100%;
-    background: var(--color-line-light);
+    background: var(--color-line);
   }
 </style>

zero.Web.UI/App/components/buttons/state-button.vue

@@ -45,7 +45,7 @@
   .ui-state-button
   {
     display: inline-flex;
-    border: 1px solid var(--color-line);
+    border: 2px solid var(--color-line);
     border-radius: var(--radius);
   }
 
@@ -56,10 +56,9 @@
 
   button.ui-state-button-item
   {
-    background: var(--color-bg-light);
-    //border: 1px solid var(--color-line); // var(--color-line);
+    background: var(--color-bg-bright-two);
     padding: 10px 16px;
-    color: var(--color-fg-mid);
+    color: var(--color-fg-dim-two);
 
     & + .ui-state-button-item
     {
@@ -81,8 +80,8 @@
     &.is-active
     {
       background: var(--color-bg-mid);
-      /*background: var(--color-secondary);
-      border-color: var(--color-secondary);*/
+      /*background: var(--color-primary);
+      border-color: var(--color-primary);*/
       color: var(--color-fg);
       font-weight: bold;
     }

zero.Web.UI/App/components/forms/form-header.vue

@@ -73,7 +73,7 @@
     align-items: center;
     padding: 0 14px 0 20px;
     height: 42px;
-    /*background: var(--color-box);
+    /*background: var(--color-bg-bright);
     color: var(--color-fg);
     border: none;
     box-shadow: var(--color-shadow-short);

zero.Web.UI/App/components/forms/input-list.vue

@@ -95,6 +95,8 @@
   {
     display: grid;
     grid-template-columns: 1fr auto;
+    background: var(--color-bg-dim);
+    border-radius: var(--radius);
 
     & + .ui-input-list-item, & + .ui-button
     {
@@ -104,7 +106,6 @@
     .ui-input
     {
       border-radius: var(--radius) 0 0 var(--radius);
-      border-right: none;
     }
 
     .ui-icon-button
@@ -112,7 +113,6 @@
       border-radius: 0 var(--radius) var(--radius) 0;
       height: 42px;
       width: 42px;
-      border: 1px solid var(--color-line);
       border-left: none;
       background: transparent !important;
     }

zero.Web.UI/App/components/forms/media-old.vue

@@ -444,7 +444,7 @@
     line-height: 26px;
     border-radius: 20px;
     background: var(--color-negative);
-    color: var(--color-secondary-fg);
+    color: var(--color-primary-fg);
     z-index: 2;
     text-align: center;
     font-size: 13px;

zero.Web.UI/App/components/forms/property.vue

@@ -52,7 +52,7 @@
   {
     padding-top: 30px;
     margin-top: 30px;
-    border-top: 1px solid var(--color-line-light);
+    //border-top: 1px solid var(--color-line);
   }
 
   .ui-property.is-vertical
@@ -107,7 +107,7 @@
     font-weight: 400;
     line-height: 1.4;
     text-decoration: none;
-    color: var(--color-fg-light);
+    color: var(--color-fg-dim);
     letter-spacing: 0.3px;
 
     &:empty
@@ -118,7 +118,7 @@
 
   .ui-property-required
   {
-    color: var(--color-negative);
+    color: var(--color-fg-dim);
     margin-left: 0.2em;
     font-weight: 400;
   }
@@ -134,7 +134,7 @@
   {
     max-width: 800px;
     font-size: var(--font-size-xs);
-    color: var(--color-fg-light);
+    color: var(--color-fg-dim);
     margin: 15px 0 0;
     letter-spacing: 0.3px;
 
@@ -142,7 +142,7 @@
     {
       content: "\e87f";
       @extend %font-icon;
-      color: var(--color-secondary);
+      color: var(--color-primary);
       font-size: var(--font-size-l);
       float: left;
       position: relative;

zero.Web.UI/App/components/forms/rte.vue

@@ -135,8 +135,7 @@
     .pell,
     .pell-raw
     {
-      border: 1px solid var(--color-line);
-      background: var(--color-bg-light);
+      background: var(--color-bg-dim);
       max-width: 800px;
       min-height: 42px;
       display: flex;
@@ -195,7 +194,7 @@
 
     .pell-actionbar
     {
-      background: var(--color-bg-light);
+      background: var(--color-bg-dim);
       border-radius: var(--radius) var(--radius) 0 0;
       padding: 5px;
     }
@@ -221,13 +220,13 @@
 
     .pell-button:hover
     {
-      background: var(--color-bg);
+      background: var(--color-bg-bright);
     }
 
     .pell-button-selected
     {
-      background-color: var(--color-highlight);
-      color: var(--color-secondary);
+      background-color: var(--color-bg-bright-two);
+      color: var(--color-primary);
     }
   }
 </style>

zero.Web.UI/App/components/forms/search.vue

@@ -60,6 +60,7 @@
       padding-right: 40px;
       border: none;
       box-shadow: var(--color-shadow-short);
+      background: var(--color-bg-bright-two);
     }
 
     .ui-searchinput-button

zero.Web.UI/App/components/forms/toggle.vue

@@ -100,46 +100,37 @@
     }
   }
 
-  .ui-toggle-switch
+  .ui-toggle-switch 
   {
     display: inline-block;
     height: 22px;
     width: 36px;
-    background: var(--color-bg);
-    border: 1px solid var(--color-line);
+    background: var(--color-bg-bright-three);
     border-radius: 20px;
     transition: all 0.2s ease;
     z-index: 1;
     pointer-events: none;
+
     i
     {
       display: inline-block;
       height: 16px;
       width: 16px;
       border-radius: 20px;
-      margin: 2px;
-      background: var(--color-bg-dark);
+      margin: 3px;
+      background: var(--color-fg);
       transition: all 0.2s ease;
     }
 
     &.is-active
     {
-      /*background: var(--color-secondary);
-      transform: translateX(18px);*/
-      background: var(--color-secondary);
-      border-color: transparent;
+      background: var(--color-primary);
+    }
 
-      i
-      {
-        background: var(--color-secondary-fg);
-        transform: translateX(14px);
-      }
-
-      /*.is-primary &
-      {
-        background: var(--color-primary);
-        box-shadow: 0 0 0 4px var(--color-primary-low);
-      }*/
+    &.is-active  i
+    {
+      background: var(--color-primary-fg);
+      transform: translateX(14px);
     }
   }
 
@@ -147,9 +138,4 @@
   {
     background: var(--color-negative);
   }
-
-  /*.ui-toggle.is-disabled .ui-toggle-switch i
-  {
-    background: var(--color-bg-dark);
-  }*/
 </style>

zero.Web.UI/App/components/header-bar.vue

@@ -124,10 +124,8 @@
     font-family: var(--font);
     color: var(--color-fg);
     margin: 0;
-    font-size: var(--font-size);
-    letter-spacing: 1px;
+    font-size: var(--font-size-l);
     font-weight: 700;
-    text-transform: uppercase;
 
     &.is-empty, .-minor
     {

zero.Web.UI/App/components/notifications/notification-holder.vue

@@ -47,8 +47,8 @@
     grid-template-columns: 1fr auto;
     grid-gap: 20px;
     align-items: center;
-    background: var(--color-secondary);
-    color: var(--color-secondary-fg);
+    background: var(--color-primary);
+    color: var(--color-primary-fg);
     border-radius: var(--radius);
     padding: 10px 12px;
     font-size: var(--font-size);
@@ -79,7 +79,7 @@
     
     .ui-button-icon
     {
-      color: var(--color-secondary-fg);
+      color: var(--color-primary-fg);
     }
 
     & + .app-notification

zero.Web.UI/App/components/overlays/overlay-editor.vue

@@ -37,7 +37,7 @@
       display: flex;
       justify-content: flex-end;
       padding: 20px var(--padding);
-      border-top: 1px solid var(--color-line);
+      background: var(--color-bg-dim);
     }
 
     > content

zero.Web.UI/App/components/overlays/overlay-holder.vue

@@ -73,7 +73,7 @@
   {
     width: auto;
     height: auto;
-    background: var(--color-box);
+    background: var(--color-bg-bright);
     border-radius: var(--radius);
     border: none !important;
     box-shadow: 0 0 20px var(--color-shadow);

zero.Web.UI/App/components/pickers/iconPicker/overlay.vue

@@ -151,13 +151,13 @@
 
     &:hover, &.is-active
     {
-      background: var(--color-box);
+      background: var(--color-bg-bright);
       box-shadow: 0 0 20px var(--color-shadow);
     }
 
     &.is-active
     {
-      //color: var(--color-secondary);
+      //color: var(--color-primary);
     }
   }
 

zero.Web.UI/App/components/pickers/mediaPicker/mediapicker.vue

@@ -373,7 +373,7 @@
     line-height: 26px;
     border-radius: 20px;
     background: var(--color-negative);
-    color: var(--color-secondary-fg);
+    color: var(--color-primary-fg);
     z-index: 2;
     text-align: center;
     font-size: 13px;

zero.Web.UI/App/components/pickers/mediaPicker/overlay.vue

@@ -297,8 +297,8 @@
 
     /*&.is-upload .-preview
     {
-      background: var(--color-secondary);
-      color: var(--color-secondary-fg);
+      background: var(--color-primary);
+      color: var(--color-primary-fg);
     }*/
 
     &.is-upload

zero.Web.UI/App/components/pickers/pick.vue

@@ -561,7 +561,7 @@
 
     .ui-input
     {
-      background: var(--color-highlight);
+      background: var(--color-bg-bright);
       min-width: 0;
     }
   }
@@ -642,7 +642,7 @@
 
     &:hover
     {
-      background: var(--color-highlight);
+      background: var(--color-bg-bright-three);
     }
 
     &.is-selected
@@ -660,7 +660,7 @@
       font-family: "Feather";
       content: "\e83e";
       font-size: 16px;
-      color: var(--color-secondary);
+      color: var(--color-primary);
       position: absolute;
       right: 20px;
     }
@@ -675,7 +675,7 @@
 
     .-text
     {
-      color: var(--color-fg-light);
+      color: var(--color-fg-dim);
       
     }
   }

zero.Web.UI/App/components/tables/table.vue

@@ -306,7 +306,7 @@
     -webkit-box-direction: normal;
     flex-direction: column;
     position: relative;
-    background: var(--color-box);
+    background: var(--color-bg-dim);
     flex-wrap: nowrap;
     -webkit-box-pack: justify;
     justify-content: space-between;
@@ -328,9 +328,8 @@
     -webkit-box-align: center;
     align-items: stretch;
     width: 100%;
-    border-bottom: 1px solid var(--color-line-light);
+    //border-bottom: 1px solid var(--color-line);
     position: relative;
-    //min-height: 60px;
     outline: 1px solid transparent;
     transition: outline 0.1s ease, box-shadow 0.1s ease;
 
@@ -338,11 +337,6 @@
     {
       border-bottom: none;
     }
-
-    &.is-selected .ui-table-cell
-    {
-      background: var(--color-bg-xxlight);
-    }
   }
 
   /*.ui-table-row:not(.ui-table-head):hover
@@ -360,10 +354,9 @@
     color: var(--color-fg);
     position: sticky;
     top: 0;
-    border-bottom: 1px solid var(--color-line-light);
+    //border-bottom: 1px solid var(--color-line);
     z-index: 2;
-    background: var(--color-box);
-    //box-shadow: inset 0 -3px 3px rgba(0,0,0,0.02);
+    background: var(--color-bg-bright);
 
     .ui-table-cell
     {
@@ -380,7 +373,7 @@
     position: relative;
     text-align: left;
     padding: 18px 20px 17px 20px;
-    border-left: 1px solid var(--color-line-light);
+    border-left: 1px solid var(--color-bg-bright);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -416,7 +409,7 @@
 
   .ui-table-row:not(.is-selected) .ui-table-cell:not(.is-head).is-selectable i
   {
-    color: var(--color-fg-xlight);
+    color: var(--color-fg);
     margin-right: 1px;
 
     &:before
@@ -432,9 +425,8 @@
    
     &:hover
     {
-      //text-decoration: underline;
-      color: var(--color-secondary);
-      background: var(--color-bg-xxlight);
+      color: var(--color-primary);
+      background: var(--color-bg-bright);
     }
   }
 
@@ -507,7 +499,7 @@
   .ui-table-field-bool
   {
     font-family: var(--font-icon);
-    color: var(--color-fg-xlight);
+    color: var(--color-fg-dim);
 
     &:before
     {
@@ -551,7 +543,7 @@
 
   .ui-table-field-shared-2
   {
-    color: var(--color-fg-light);
+    color: var(--color-fg-dim);
     font-style: normal;
     font-weight: 400;
     font-size: 0.85em;

zero.Web.UI/App/components/tabs/tabs.vue

@@ -122,7 +122,7 @@
     position: relative;
     transition: color 0.2s ease;
     border-radius: var(--radius) var(--radius) 0 0;
-    background: var(--color-bg-xxlight);
+    background: var(--color-bg-dim);
     //border: 1px solid transparent;
     //border-bottom: none;
 
@@ -136,21 +136,10 @@
       color: var(--color-fg);
     }
 
-    &:before
-    {
-      content: '';
-      width: 100%;
-      height: 16px;
-      position: absolute;
-      left: 0;
-      bottom: 0;
-      background: linear-gradient(0deg, var(--color-bg-xlight), transparent);
-    }
-
     &[disabled]
     {
       cursor: default;
-      color: var(--color-fg-light);
+      color: var(--color-fg-dim);
     }
 
     &:after
@@ -167,8 +156,7 @@
     {
       font-weight: 700;
       color: var(--color-fg);
-      background: var(--color-bg-light);
-      border-color: var(--color-line-mid);
+      background: var(--color-bg-bright);
 
       .ui-tabs-list-item-count
       {
@@ -182,7 +170,7 @@
 
       &:after
       {
-        background: var(--color-bg-light);
+        background: var(--color-bg-bright);
       }
     }
 
@@ -209,7 +197,7 @@
     overflow: hidden;
     float: right;
     padding: 2px 6px;
-    background: var(--color-bg-light);
+    background: var(--color-bg-bright-two);
     border-radius: 10px;
     margin-left: 8px;
     margin-right: -4px;

zero.Web.UI/App/components/tree/tree-item.vue

@@ -142,7 +142,7 @@
       bottom: 0;
       left: -300px;
       right: 0;
-      background: var(--color-bg-xlight);
+      background: var(--color-bg-bright-two);
     }
   }
 
@@ -165,14 +165,14 @@
     {
       color: var(--color-fg);
       font-weight: bold;
-      //color: var(--color-secondary);
+      //color: var(--color-primary);
     }
   }
 
   .ui-tree-item-toggle
   {
     position: absolute;
-    color: var(--color-fg-mid);
+    color: var(--color-fg-dim);
     height: 100%;
     top: 0;
     left: 0;

zero.Web.UI/App/editor/editor.vue

@@ -21,7 +21,7 @@
             <slot name="settings-after"></slot>
           </slot>
         </div>
-        <div class="ui-box is-light is-connected">
+        <div class="ui-box">
           <slot name="infos">
             <ui-property v-if="value.id" label="@ui.id" :is-text="true">
               {{value.id}}
@@ -236,7 +236,7 @@
 
   .editor-infos
   {
-    margin: 58px 0 0;
+    margin: 50px 0 0;
 
     .ui-box
     {
@@ -323,13 +323,13 @@
       margin-top: -28px;
       right: -3px;
       font-size: 42px;
-      color: var(--color-fg-xlight);
+      color: var(--color-fg-dim);
       opacity: 0.2;
     }
 
     a
     {
-      color: var(--color-fg-light);
+      color: var(--color-fg-dim);
       text-decoration: underline dotted;
       font-size: var(--font-size-s);
     }
@@ -338,7 +338,7 @@
     {
       margin-top: 32px;
       padding-top: 32px;
-      border-top: 1px solid var(--color-line-light);
+      border-top: 1px solid var(--color-line);
     }
 
     &.is-block
@@ -346,7 +346,7 @@
       padding: 20px;
       padding-right: 70px;
       border-radius: var(--radius);
-      background: var(--color-bg-xlight);
+      background: var(--color-bg-bright-two);
       margin-bottom: var(--padding);
 
       i

zero.Web.UI/App/editor/fields/nested.vue

@@ -205,7 +205,7 @@
     border-radius: var(--radius) 0 0 var(--radius);
     margin-right: -32px;
     padding-right: var(--padding);
-    background: var(--color-box);
+    background: var(--color-bg-bright);
     box-shadow: var(--color-shadow-short);
   }
 

zero.Web.UI/App/pages/login/login.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="app-auth">
     <i class="fth-home app-auth-font-trigger"></i>
-    <h1 class="app-auth-headline">zero</h1>
+    <span></span>
     <ui-form class="app-auth-inner" v-slot="form" @submit="onSubmit">
       <div>
-        <h2 v-localize="'@login.headline'"></h2>
+        <img class="app-auth-image" src="/Assets/zero-2.png" v-localize:alt="'@zero.name'" />
 
         <ui-error :catch-remaining="true" />
-        <ui-message type="warn" v-if="rejectReason" :text="rejectReason" />
+        <ui-message type="info" v-if="rejectReason" :text="rejectReason" />
 
         <ui-property field="email" label="@login.fields.email" :vertical="true">
           <input v-model="model.email" type="text" class="ui-input" maxlength="120" v-localize:placeholder="'@login.fields.email_placeholder'" />
@@ -108,7 +108,7 @@
     align-items: stretch;
     max-width: 100%;
     width: 520px;
-    background: var(--color-box);
+    background: var(--color-bg-bright);
     border-radius: var(--radius);
     /*border: 1px solid var(--color-line);*/
     position: relative;
@@ -116,21 +116,14 @@
     padding: var(--padding);
     color: var(--color-fg);
     /*box-shadow: 0 0 60px var(--color-shadow);*/
-
-    h2
-    {
-      text-align: center;
-      margin-bottom: 3rem;
-    }
   }
 
-  .app-auth-headline
+  .app-auth-image
   {
-    text-align: center;
-    font-size: 58px;
-    font-weight: 700;
-    margin: 0;
-    color: var(--color-fg);
+    height: 32px;
+    display: block;
+    position: relative;
+    margin: 0 auto 3rem;
   }
 
   .app-auth .ui-property + .ui-property

zero.Web.UI/App/pages/media/media.vue

@@ -325,7 +325,7 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    background: var(--color-bg-light);
+    background: var(--color-bg-bright);
     height: 160px;
     border-radius: var(--radius);
     overflow: hidden;

zero.Web.UI/App/pages/media/upload-status.vue

@@ -163,8 +163,8 @@
 
     /*&.is-upload .-preview
     {
-      background: var(--color-secondary);
-      color: var(--color-secondary-fg);
+      background: var(--color-primary);
+      color: var(--color-primary-fg);
     }*/
 
     .-extension
@@ -198,7 +198,7 @@
       top: 0;
       height: 100%;
       border-radius: 2px;
-      background: var(--color-secondary);
+      background: var(--color-primary);
     }
   }
 </style>

zero.Web.UI/App/pages/pages/copy.vue

@@ -168,7 +168,7 @@
 
     .ui-tree-item.is-selected, .ui-tree-item:hover:not(.is-disabled)
     {
-      background: var(--color-bg-xxlight);
+      background: var(--color-bg-bright-two);
     }
 
     .ui-tree-item.is-selected
@@ -178,7 +178,7 @@
         font-family: "Feather";
         content: "\e83e";
         font-size: 16px;
-        color: var(--color-secondary);
+        color: var(--color-primary);
       }
       
       .ui-tree-item-text

zero.Web.UI/App/pages/pages/create.vue

@@ -85,10 +85,10 @@
     margin: 30px 0 -10px 0;
     border-radius: var(--radius);
     /*border: 1px solid var(--color-line-light);*/
-    background: var(--color-bg-xlight);
+    background: var(--color-bg-dim);
     line-height: 1.4;
     color: var(--color-fg-mid);
-    padding: 14px 12px;
+    padding: 14px 16px;
     font-size: var(--font-size);
 
     strong
@@ -107,23 +107,13 @@
   .page-create-item
   {
     display: grid;
+    width: 100%;
     grid-template-columns: 30px 1fr auto;
     grid-gap: 6px;
     align-items: center;
     position: relative;
     color: var(--color-fg);
     padding: 13px 0;
-
-    &.is-active
-    {
-      font-weight: bold;
-      color: var(--color-secondary);
-
-      .page-create-item-text span
-      {
-        font-weight: 400;
-      }
-    }
   }
 
   .page-create-item-text
@@ -133,7 +123,7 @@
 
     span
     {
-      color: var(--color-fg-light);
+      color: var(--color-fg-dim);
       margin-top: 3px;
     }
   }
@@ -145,7 +135,7 @@
     font-weight: 400;
     position: relative;
     top: -2px;
-    color: var(--color-fg-reverse-mid);
+    color: var(--color-fg);
     transition: color 0.2s ease;
   }
 </style>

zero.Web.UI/App/pages/pages/move.vue

@@ -150,7 +150,7 @@
 
     .ui-tree-item.is-selected, .ui-tree-item:hover:not(.is-disabled)
     {
-      background: var(--color-bg-xxlight);
+      background: var(--color-bg-bright-two);
     }
 
     .ui-tree-item.is-selected
@@ -160,7 +160,7 @@
         font-family: "Feather";
         content: "\e83e";
         font-size: 16px;
-        color: var(--color-secondary);
+        color: var(--color-primary);
       }
       
       .ui-tree-item-text

zero.Web.UI/App/pages/pages/page-info.vue

@@ -9,7 +9,7 @@
           <ui-toggle v-model="value.isActive" class="is-primary" />
         </ui-property>
       </div>
-      <div class="ui-box is-light is-connected">
+      <div class="ui-box">
         <ui-property v-if="value.id" label="@ui.id" :is-text="true">
           {{value.id}}
         </ui-property>

zero.Web.UI/App/pages/pages/sort.vue

@@ -104,11 +104,11 @@
     grid-gap: 6px;
     align-items: center;
     font-size: var(--font-size);
-    height: 42px;
+    height: 46px;
     color: var(--color-fg);
     position: relative;
     padding: 0 8px;
-    background: var(--color-bg-light);
+    background: var(--color-bg-bright);
     border-radius: var(--radius);
 
     i

zero.Web.UI/App/pages/settings/applications-items.vue

@@ -62,7 +62,7 @@
   {
     display: flex;
     flex-direction: column;
-    background: var(--color-box);
+    background: var(--color-bg-bright);
     border-radius: var(--radius);
     padding: var(--padding-s);
     text-align: center;
@@ -84,7 +84,7 @@
 
   .apps-item-minor
   {
-    color: var(--color-fg-mid);
+    color: var(--color-fg-dim);
   }
 
   .apps-item-image

zero.Web.UI/App/pages/settings/countries.vue

@@ -35,7 +35,6 @@
         labelPrefix: '@country.fields.',
         allowOrder: false,
         search: null,
-        selectable: true,
         columns: {
           flag: {
             label: '',

zero.Web.UI/App/pages/settings/languages.vue

@@ -26,7 +26,6 @@
         labelPrefix: '@language.fields.',
         allowOrder: false,
         search: null,
-        selectable: true,
         columns: {
           name: {
             label: '@ui.name',

zero.Web.UI/App/pages/settings/settings.vue

@@ -60,7 +60,7 @@
   {
     min-height: 100%;
     position: relative;
-    padding: 100px var(--padding);
+    padding: 58px var(--padding);
     width: 100%;
     max-width: 2000px;
     display: grid;

zero.Web.UI/App/pages/settings/users.vue

@@ -139,7 +139,7 @@
   {
     display: flex;
     flex-direction: column;
-    background: var(--color-box);
+    background: var(--color-bg-bright);
     border-radius: var(--radius);
     padding: var(--padding-s) var(--padding);
     text-align: center;

zero.Web.UI/App/pages/spaces/spaces.vue

@@ -240,7 +240,7 @@
     &.is-active
     {
       font-weight: bold;
-      color: var(--color-secondary);
+      color: var(--color-primary);
 
       .spaces-tree-item-text span
       {

zero.Web.UI/Sass/Core/_forms.scss

@@ -10,8 +10,8 @@ input[type="password"], input[type="range"], input[type="search"], input[type="t
 textarea, .ui-native-select
 {
   @extend %font;
-  background: var(--color-bg-light);
-  border: 1px solid var(--color-line);
+  background: var(--color-bg-dim);
+  border: none;
   font-size: $font-size;
   display: inline-block;
   height: 42px;
@@ -62,6 +62,7 @@ textarea
     border: none;
     font-size: var(--font-size);
     background: none;
+    color: var(--color-fg);
   }
 
   &:after
@@ -133,11 +134,11 @@ textarea
 
   input:checked ~ &
   {
-    background: var(--color-secondary);
+    background: var(--color-primary);
 
     &:before
     {
-      color: var(--color-secondary-fg);
+      color: var(--color-primary-fg);
     }
   }
 }

zero.Web.UI/Sass/Core/_icons.scss

@@ -557,7 +557,7 @@
   font-size: 0;
   line-height: 0;
   border: 4px solid transparent;
-  border-top-color: var(--color-secondary);
+  border-top-color: var(--color-primary);
   position: relative;
   top: 2px;
 }
@@ -565,7 +565,7 @@
 .arrow-up
 {
   border-top-color: transparent;
-  border-bottom-color: var(--color-secondary);
+  border-bottom-color: var(--color-primary);
   position: relative;
   top: -2px;
 }

zero.Web.UI/Sass/Core/_settings.scss

@@ -5,8 +5,8 @@
   --color-primary: #04bfbf; //linear-gradient(75deg, #48da9c, #3eb8ad); //#484c5b; // #292b2c; // #00aea2
   --color-primary-fg: #fff;
   --color-primary-low: rgba(4, 191, 191, 0.15);
-  --color-secondary: #04bfbf;
-  --color-secondary-fg: #fff;
+  --color-primary: #04bfbf;
+  --color-primary-fg: #fff;
   --color-primary-two: #3d72c4;
   --color-negative: #d82853; 
 
@@ -102,27 +102,42 @@
 
 :root
 {
+  // accent colors
+  --color-primary: #e7ecee; //linear-gradient(75deg, #48da9c, #3eb8ad); //#484c5b; // #292b2c; // #00aea2
+  --color-primary-fg: #191b1c;
+  --color-primary-low: rgba(229, 225, 221, 0.3);
+  --color-primary-two: #3d72c4;
+  --color-negative: #d82853;
+
   // foreground colors
   --color-fg: #fff;
-  --color-fg-dim: #b2b5b8;
-  --color-fg-dim-two: #87898c;
+  --color-fg-dim: #b6b7b8;
+  --color-fg-dim-two: #898b8c;
   
   // background colors
-  --color-bg: #1c1e1f;
+  --color-bg: #191b1c;
   --color-bg-bright: #242526;
   --color-bg-bright-two: #2b2c2e;
   --color-bg-bright-three: #343638;
+  --color-bg-dim: #1e1f21;
 
   // misc colors
   //--color-box: #242526;
   --color-shadow: rgba(0,0,0,0.3);
   --color-shadow-short: 0 1px 1px 0 rgba(0,0,0,0.05);
   --color-overlay-shade: rgba(0,0,0,0.3);
+
+  // lines
+  --color-line: #2a2d2e;
 }
 
 
+// theme-agnostic colors
 :root
 {
+  // image background
+  --color-bg-image: #e7ecee;
+
   // message colors
   --color-accent-info: rgb(44, 162, 212);
   --color-accent-info-bg: rgba(44, 162, 212, 0.1);

zero.Web.UI/Sass/Modules/Buttons/_button.scss

@@ -36,8 +36,8 @@ button::-moz-focus-inner
   display: inline-flex;
   justify-content: space-between;
   align-items: center;
-  color: var(--color-secondary-fg);
-  background: var(--color-secondary);
+  color: var(--color-primary-fg);
+  background: var(--color-primary);
   padding: 0 20px;
   height: 42px;
   border-radius: var(--radius);
@@ -80,7 +80,7 @@ button::-moz-focus-inner
   &.type-outline
   {
     height: 43px;
-    background: var(--color-box);
+    background: transparent;
     color: var(--color-fg);
     border: 1px solid var(--color-line);
     box-sizing: border-box;
@@ -90,7 +90,7 @@ button::-moz-focus-inner
 
   &.type-secondary
   {
-    background: var(--color-secondary);
+    background: var(--color-primary);
   }
 
   &.type-big
@@ -101,7 +101,7 @@ button::-moz-focus-inner
 
   &.type-light
   {
-    background: var(--color-bg);
+    background: var(--color-bg-bright-two);
     color: var(--color-fg);
     border: none;
   }
@@ -115,7 +115,7 @@ button::-moz-focus-inner
 
   &.type-white
   {
-    background: var(--color-box);
+    background: var(--color-bg-bright-two);
     color: var(--color-fg);
     border: none;
     box-shadow: var(--color-shadow-short);
@@ -210,7 +210,7 @@ button::-moz-focus-inner
 
   .type-light &, .type-blank &
   {
-    border-color: var(--color-bg-mid);
+    border-color: var(--color-bg-bright);
     border-left-color: var(--color-fg);
   }
 }
@@ -254,7 +254,7 @@ button::-moz-focus-inner
 
   &:hover
   {
-    background: var(--color-bg-mid);
+    background: var(--color-bg-bright-two);
   }
 
   .ui-button-icon
@@ -268,7 +268,7 @@ button::-moz-focus-inner
 .ui-icon-button
 {
   @extend .ui-button;
-  background: var(--color-bg-mid);
+  background: var(--color-bg-bright);
   padding: 0;
   height: 32px;
   width: 32px;
@@ -317,7 +317,7 @@ button::-moz-focus-inner
   justify-content: center;
   align-items: center;
   border-radius: var(--radius);
-  background: var(--color-bg-xlight);
+  background: var(--color-bg-bright-two);
   color: var(--color-fg);
   text-align: center;
   font-size: 16px;
@@ -341,7 +341,7 @@ button::-moz-focus-inner
 
 .ui-select-button-description
 {
-  color: var(--color-fg-mid);
+  color: var(--color-fg-dim);
   margin-top: 3px;
   font-size: var(--font-size-xs);
 }

zero.Web.UI/Sass/Modules/_box.scss

@@ -5,22 +5,23 @@
 {
   margin: var(--padding);
   padding: var(--padding);
-  background: var(--color-bg-light);
+  background: var(--color-bg-bright);
   border-radius: var(--radius);
   box-shadow: var(--color-shadow-short);
   /*max-width: 1104px;*/
+
   h2
   {
     margin: -5px -32px var(--padding);
     padding: 0 var(--padding) 25px;
-    border-bottom: 1px solid var(--color-line-light);
+    //border-bottom: 1px solid var(--color-line-light);
   }
 
   h3
   {
     margin: -5px -32px var(--padding);
     padding: 0 var(--padding) 25px;
-    border-bottom: 1px solid var(--color-line-light);
+    //border-bottom: 1px solid var(--color-line-light);
   }
 
   .ui-property-content &
@@ -33,7 +34,7 @@
 
   &.is-light
   {
-    background: var(--color-bg-xxlight);
+    background: var(--color-bg-dim);
   }
 
   &.is-blank

zero.Web.UI/Sass/Modules/_flatpickr.scss

@@ -140,11 +140,11 @@
   &.selected
   {
     font-weight: 700;
-    color: var(--color-secondary-fg);
+    color: var(--color-primary-fg);
 
     &:after
     {
-      background: var(--color-secondary);
+      background: var(--color-primary);
     }
   }
 

zero.Web.UI/Sass/Modules/_headlines.scss

@@ -4,10 +4,8 @@ h2.ui-headline
 {
   @extend %font;
   margin: 0;
-  font-size: var(--font-size);
-  letter-spacing: 1px;
+  font-size: var(--font-size-l);
   font-weight: 700;
-  text-transform: uppercase;
 
   &.xl
   {

zero.Web.UI/Sass/Modules/_link.scss

@@ -2,6 +2,6 @@
 
 .ui-link
 {
-  color: var(--color-secondary);
+  color: var(--color-primary);
   text-decoration: underline dotted;
 }

zero.Web.UI/Sass/Setup/_canvas.scss

@@ -19,7 +19,7 @@ html
 body
 {
   min-height: 100%;
-  background: var(--color-secondary);
+  background: var(--color-primary);
   color: var(--color-text);
   overflow-x: hidden;
   overflow-y: scroll;

zero.Web.UI/Setup/Steps/step-install.vue

@@ -131,7 +131,7 @@
 
     i
     {
-      background: var(--color-secondary);
+      background: var(--color-primary);
       transition: width 0.1s ease;
       display: block;
       height: 100%;

zero.Web.UI/Setup/setup.vue

@@ -92,7 +92,7 @@
     align-items: stretch;
     max-width: 100%;
     width: 520px;
-    background: var(--color-box);
+    background: var(--color-bg-bright);
     border-radius: 3px;
     min-height: 600px;
     position: relative;