remove special attributes which are needed to render modules

zero.Debug/Renderers/page.content.js

@@ -7,7 +7,6 @@ export default {
     {
       name: 'general',
       label: '@ui.tab_content',
-      class: 'is-blank',
       count: x => x.modules.length
     },
     {
@@ -22,8 +21,7 @@ export default {
       display: 'modules',
       label: '@ui.name',
       required: true,
-      hideLabel: true,
-      class: 'ui-modules'
+      hideLabel: true
     }
   ].concat(MetaFields)
 };

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

@@ -1,5 +1,5 @@
 <template>
-  <ui-header-bar class="ui-form-header" :back-button="true">
+  <ui-header-bar class="ui-form-header" :back-button="false">
     <template v-slot:title>
       <h2 class="ui-header-bar-title" :class="{'is-empty': title && !value.name}">
         <input class="ui-form-header-title-input" type="text" v-model="value.name" v-localize:placeholder="title" />
@@ -112,11 +112,11 @@
     font-size: var(--font-size-l);
     font-weight: 700;
     background: none;
-    border: 1px solid transparent;
+    border: 1px dashed var(--color-line-dashed);
 
-    &:hover, &:focus, .ui-header-bar-title.is-empty &
+    /*&:hover, &:focus, .ui-header-bar-title.is-empty &
     {
       border: 1px dashed var(--color-text-dim-one);
-    }
+    }*/
   }
 </style>

zero.Web.UI/App/components/modules/module-preview.vue

@@ -115,9 +115,14 @@
   .ui-module-item
   {
     display: grid !important;
-    grid-template-columns: 1fr auto 0;
+    grid-template-columns: 1fr auto;
     grid-column-gap: var(--padding);
     position: relative;
+    margin: 0 -32px;
+    padding: var(--padding);
+    /*margin-top: var(--padding);
+    padding-top: var(--padding);*/
+    border-bottom: 1px solid var(--color-line);
 
     &.can-edit .ui-module-item-content
     {
@@ -128,12 +133,11 @@
     {
       cursor: default;
     }
-  }
 
-  .ui-module-item-content
-  {
-    padding: var(--padding);
-    padding-right: 0;
+    /*&:first-child
+    {
+      border-top: none;
+    }*/
   }
 
   .ui-module-item-header

zero.Web.UI/App/components/modules/modules-select.vue

@@ -3,7 +3,7 @@
 
       <button v-if="!isSelecting" type="button" class="ui-modules-start-button" @click="startSelection">
         <i class="ui-modules-start-button-icon fth-plus"></i>
-        <p class="ui-modules-start-button-text"><strong>Add content</strong> <br>Compose the page by adding modules</p>
+        <p class="ui-modules-start-button-text"><strong>Add content</strong> <!--<br>Compose the page by adding modules--></p>
       </button>
 
       <div class="ui-modules-select" v-if="isSelecting">
@@ -132,12 +132,12 @@
   .ui-modules-start
   {
     margin: 0;
-    padding: var(--padding);
-    background: var(--color-box);
-    border-radius: var(--radius);
-    box-shadow: var(--shadow-short);
     display: flex;
-    justify-content: center;
+
+    .ui-modules-inner-sortable + &
+    {
+      margin-top: var(--padding);
+    }
   }
 
   .ui-modules-start-button
@@ -166,12 +166,14 @@
     line-height: 1.3;
     color: var(--color-text-dim);
     margin: 0;
+    font-size: var(--font-size-s);
 
     strong
     {
       display: inline-block;
-      margin-bottom: 5px;
+      margin-bottom: 2px;
       color: var(--color-text);
+      font-size: var(--font-size);
     }
   }
 
@@ -179,6 +181,11 @@
   {
     width: 100%;
     position: relative;
+
+    .ui-inline-tabs-list
+    {
+      padding-right: 50px;
+    }
   }
 
   .ui-modules-select-close
@@ -189,12 +196,6 @@
     background: none !important;
   }
 
-  .ui-modules-select-groups
-  {
-    margin-bottom: var(--padding);
-    padding-right: 50px;
-  }
-
   .ui-modules-select-items
   {
     display: grid;

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

@@ -138,51 +138,8 @@
 </script>
 
 <style lang="scss">
-  @import './Sass/Modules/box';
-
-  .ui-property.ui-modules
+  .ui-modules-inner-sortable
   {
-    width: 100%;
-    margin: 0;
-    margin-top: var(--padding);
-  }
-
-  .ui-modules-start, .ui-module-item
-  {
-    margin: 0;
-    padding: var(--padding);
-    background: var(--color-box);
-    border-radius: var(--radius);
-    box-shadow: var(--shadow-short);
-    display: flex;
-    justify-content: center;
-  }
-
-  .ui-module-item
-  {
-    display: block;
-    padding: 0;
-  }
-
-  .ui-module-item + .ui-module-item,
-  .ui-modules-inner-sortable + .ui-modules-start
-  {
-    margin-top: 10px;
-  }
-
-  .ui-module-item-header
-  {
-    display: flex;
-    align-items: center;
-    color: var(--color-text-dim);
-    font-size: var(--font-size-s);
-
-    i
-    {
-      font-size: var(--font-size-l);
-      margin-right: 10px;
-      position: relative;
-      top: -1px;
-    }
+    margin-top: -32px;
   }
 </style>

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

@@ -90,7 +90,7 @@
     margin: 30px 0 -10px 0;
     border-radius: var(--radius);
     /*border: 1px solid var(--color-line-light);*/
-    background: var(--color-bg-dim);
+    background: var(--color-box-nested);
     line-height: 1.4;
     color: var(--color-text-dim);
     padding: 14px 16px;

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

@@ -15,8 +15,8 @@
         <span>To update the <b>preview</b> with your unsaved changes click the <b>Refresh</b> button.</span>
       </div>
       <div class="-buttons">
-        <ui-button type="small blank" label="Exit" @click="exitPreview()" />
-        <ui-button type="small blank" label="Open" @click="focusPreview" />
+        <ui-button type="small light onbg" label="Exit" @click="exitPreview()" />
+        <ui-button type="small light onbg" label="Open" @click="focusPreview" />
         <ui-button type="small" label="Refresh" icon="fth-rotate-cw" @click="refreshPreview" />
       </div>
     </div>
@@ -277,7 +277,7 @@
   .page-editor-preview-message
   {
     margin: -10px var(--padding) var(--padding);
-    background: var(--color-primary-low);
+    background: var(--color-box-light);
     color: var(--color-primary);
     font-size: var(--font-size);
     display: flex;
@@ -293,10 +293,5 @@
     {
       display: flex;
     }
-
-    .ui-button.type-blank
-    {
-      background: var(--color-primary-low);
-    }
   }
 </style>

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

@@ -111,7 +111,7 @@
   .apps-items-add
   {
     background: transparent;
-    border: 1px dashed var(--color-text-dim-one);
+    border: 1px dashed var(--color-line-dashed);
     color: var(--color-text);
     border-radius: var(--radius);
     text-align: center;

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

@@ -26,7 +26,7 @@
 
   &.is-light
   {
-    background: var(--color-bg-dim);
+    background: var(--color-box-light);
   }
 
   &.is-blank

zero.Web.UI/Sass/Settings/_all.scss

@@ -1,12 +1,12 @@
 
-@import "colors-light";
+@import "theme-light";
 
-@import "colors-dark";
+@import "theme-dark";
 
-@import "accent-colors";
+@import "accent";
 
 @import "dimensions";
 
 @import "font-sizes";
 
-@import "shadows"; 
+@import "shadows";  

zero.Web.UI/Sass/Settings/_theme-light.scss

@@ -10,7 +10,7 @@
 
   // foreground colors
   $color-fg: #2c3036;
-  $color-fg-shade-1: #92969c; // dim
+  $color-fg-shade-1: #85888c; // dim
   $color-fg-shade-2: #c8cbcf; // dim-two
   
   // background colors  
@@ -20,16 +20,13 @@
   $color-bg-shade-3: #f5f5f6; // bright-two
   $color-bg-shade-4: #efeff1; // bright-three
   $color-bg-shade-5: #e6e6e8;
+  $color-bg-shade-6: #d2d2d7;
 
   // misc colors
   $color-shadow: rgba(0, 0, 0, 0.07);
   $color-shadow-short: 0.5px 0.5px 2px 0 rgba(0, 0, 0, 0.06);
   $color-overlay-shade: rgba(0, 0, 0, 0.15);
 
-  // lines
-  $color-line: #e7eaec;
-  $color-line-dim: #{rgba(#e7eaec, 0.5)};
-
 
   // ----------------------------------------------------------------------------------
 
@@ -79,6 +76,7 @@
   // lines
   --color-line: #{$color-bg-shade-3};
   --color-line-onbg: #{$color-bg-shade-5};
+  --color-line-dashed: #{$color-bg-shade-6};
 
   // trees
   --color-tree: #{$color-bg-shade-1};