UI changes, moved font list update code to Vvveb.FontsManager.addFontList

Author: givanz

css/editor.css

@@ -17810,13 +17810,14 @@ https://github.com/givanz/VvvebJs
         display: none;
         position: absolute;
         top: 0px;
-        right: 0px; }
+        right: 2px; }
         .tree > ol li.file .file-actions .btn {
           padding: 0rem 0.2rem;
+          margin-right: 1px;
           font-size: 0.875rem;
           line-height: 1;
           border-radius: 4px;
-          --bs-btn-border-color: rgba(var(--bs-link-color-rgb), 0.15); }
+          --bs-btn-border-color: rgba(var(--bs-link-color-rgb), 0.25); }
     .tree > ol li.page > label {
       background-image: url(../libs/builder/icons/panel.svg); }
     .tree > ol li input {
@@ -17900,14 +17901,14 @@ body {
       --builder-component-list-element-width:44%; } }
   @media (min-width: 1600px) {
     body {
-      --builder-left-panel-width: 350px;
-      --builder-right-panel-width: 350px;
+      --builder-left-panel-width: 300px;
+      --builder-right-panel-width: 300px;
       --builder-component-list-element-width:44%; } }
   @media (min-width: 2000px) {
     body {
-      --builder-left-panel-width: 400px;
-      --builder-right-panel-width: 400px;
-      --builder-component-list-element-width:28%; } }
+      --builder-left-panel-width: 300px;
+      --builder-right-panel-width: 300px;
+      --builder-component-list-element-width:44%; } }
   body ::-webkit-scrollbar {
     width: 0.5rem;
     background-color: rgba(var(--bs-body-color-rgb), 0.05); }
@@ -17980,9 +17981,10 @@ body {
         #vvveb-builder #left-panel #filemanager .header a {
           color: var(--bs-link-color); }
       #vvveb-builder #left-panel #filemanager .btn-add {
-        font-size: 13px;
-        line-height: 1.6;
-        --bs-btn-border-color:transparent; }
+        --bs-btn-border-color: rgba(var(--bs-link-color-rgb), 0.3);
+        font-weight: 600;
+        padding: 0rem 0.3rem;
+        margin: 0.2rem 0.3rem; }
       #vvveb-builder #left-panel #filemanager .tree {
         height: 215px;
         height: calc( var(--builder-filemanager-height) - 35px);
@@ -18015,14 +18017,21 @@ body {
       width: var(--builder-right-panel-width); }
     #vvveb-builder #right-panel label.header .header-arrow {
       right: 10px; }
-    #vvveb-builder #right-panel .nav-link.active {
-      border-top: 1px solid rgba(var(--bs-link-color-rgb), 0.7); }
+    #vvveb-builder #right-panel .nav-link {
+      border-left: none;
+      border-right: none;
+      border-top: none;
+      border-bottom-width: 1px; }
+      #vvveb-builder #right-panel .nav-link.active {
+        border-bottom-color: rgba(var(--bs-link-color-rgb), 0.7);
+        font-weight: normal; }
+        #vvveb-builder #right-panel .nav-link.active i {
+          color: var(--bs-link-hover-color); }
   #vvveb-builder #top-panel {
     height: 35px;
     padding: 0;
     border-bottom: 1px solid var(--bs-border-color);
     text-align: center;
-    background-color: rgba(var(--bs-secondary-color-rgb), 0.03);
     width: 100%; }
     #vvveb-builder #top-panel .btn-group .btn.btn-light {
       padding: 0.1rem 0.5rem;
@@ -18032,7 +18041,8 @@ body {
       --bs-btn-hover-color: var(--bs-body-bg);
       --bs-btn-bg:transparent;
       border-color: transparent;
-      color: var(--bs-secondary-color); }
+      color: var(--bs-secondary-color);
+      line-height: 1.8; }
       #vvveb-builder #top-panel .btn-group .btn.btn-light i {
         font-size: 1.2rem; }
     #vvveb-builder #top-panel .btn-group .btn.btn-primary {
@@ -18093,8 +18103,6 @@ body {
       height: 100%;
       display: flex;
       flex-direction: column; }
-      #vvveb-builder .drag-elements > .header .nav {
-        background: rgba(var(--bs-secondary-color-rgb), 0.03); }
     #vvveb-builder .drag-elements .nav-item .nav-link {
       text-align: center;
       border-top-color: var(--bs-body-bg);
@@ -18158,7 +18166,6 @@ body {
     animation-fill-mode: forwards; }
     #vvveb-builder #add-section-box .header > div.section-box-actions {
       position: absolute;
-      top: 0.5rem;
       right: 0.5rem; }
     #vvveb-builder #add-section-box .components-list, #vvveb-builder #add-section-box .blocks-list, #vvveb-builder #add-section-box .component-properties, #vvveb-builder #add-section-box .sections-list {
       width: auto;
@@ -18200,7 +18207,7 @@ body {
         border-radius: 0px;
         background-position: center;
         box-shadow: 0px 1px 5px 0px rgba(var(--bs-body-color-rgb), 0.15);
-        -webkit-box-shadow: 0px 1px 5px 0px rgba(var(--bs-body-color-rgb), 0.15);
+        box-shadow: none;
         /*		  
 		border-left-width:1px;
 		border-top-width:1px;
@@ -18277,8 +18284,6 @@ body {
         flex-direction: column;
         height: 100%;
         margin-bottom: 2rem; }
-    #vvveb-builder .component-properties .nav-tabs {
-      background: rgba(var(--bs-secondary-color-rgb), 0.03); }
     #vvveb-builder .component-properties #right-panel {
       color: #777; }
     #vvveb-builder .component-properties, #vvveb-builder .component-properties select, #vvveb-builder .component-properties input[type="text"] {
@@ -18387,7 +18392,8 @@ body {
     height: 0px;
     top: 0px;
     left: 0px;
-    display: none; }
+    display: none;
+    transition: all 0.05s; }
   #vvveb-builder #drop-highlight-box {
     position: absolute;
     border: 2px solid var(--bs-primary);
@@ -18644,7 +18650,7 @@ body {
     padding: 0.3rem 0.2rem 0.4rem; }
     #vvveb-builder #elements-tabs a i {
       padding: 0.3rem 0rem;
-      font-size: 1.2rem;
+      font-size: 1.1rem;
       border-radius: 3px;
       display: block;
       border: 1px solid transparent; }
@@ -18659,22 +18665,31 @@ body {
       box-shadow: none; }
       #vvveb-builder #elements-tabs a.active i {
         background: rgba(var(--bs-link-color-rgb), 0.03);
-        border: 1px solid rgba(var(--bs-link-color-rgb), 0.2);
+        border: 1px solid rgba(var(--bs-link-color-rgb), 0.3);
         color: var(--bs-link-hover-color); }
   #vvveb-builder .nav-tabs .nav-item:first-child .nav-link {
     border-left: none; }
   #vvveb-builder .nav-tabs .nav-link {
+    border-top: none;
+    border-left: none;
+    border-right: none;
+    border-bottom-width: 1px;
     text-align: center;
     --bs-nav-link-color:var(--bs-secondary-color); }
     #vvveb-builder .nav-tabs .nav-link i {
       font-size: 1.2rem;
-      line-height: 1; }
+      line-height: 1;
+      vertical-align: bottom;
+      margin-right: 0.5rem; }
   #vvveb-builder .nav-tabs .nav-link.active,
   #vvveb-builder .nav-tabs .nav-item.show .nav-link {
     background-color: var(--bs-body-bg);
     border-radius: 0px;
-    background: linear-gradient(0deg, var(--bs-body-bg) 70%, rgba(var(--bs-link-color-rgb), 0.03) 100%);
-    border-top: 1px solid rgba(var(--bs-link-color-rgb), 0.7); }
+    border-bottom-color: rgba(var(--bs-link-color-rgb), 0.7);
+    font-weight: normal; }
+    #vvveb-builder .nav-tabs .nav-link.active i,
+    #vvveb-builder .nav-tabs .nav-item.show .nav-link i {
+      color: var(--bs-link-hover-color); }
   #vvveb-builder .nav-fill .nav-link {
     padding-left: 0rem;
     padding-right: 0rem; }
@@ -18687,8 +18702,8 @@ body {
 /* style for drag element */
 li[data-type] {
   width: var(--builder-component-list-element-width);
-  min-width: 100px;
-  height: 100px;
+  min-width: 80px;
+  height: 80px;
   margin: 0% 1% 3% 3%;
   text-align: center;
   font-weight: normal;
@@ -18697,7 +18712,7 @@ li[data-type] {
   background-repeat: no-repeat;
   padding-top: 60px;
   padding-bottom: 7px;
-  padding: 60px 5px 7px 5px;
+  padding: 50px 5px 7px 5px;
   border-style: solid;
   border-width: 1px;
   border-radius: 3px;
@@ -18707,14 +18722,14 @@ li[data-type] {
 		*/
   background-color: var(--bs-white);
   border-color: var(--bs-border-color);
-  border-color: var(--bs-gray-300);
-  background-position: 50% 30%;
+  border-color: rgba(var(--bs-secondary-rgb), 0.15);
+  background-position: 50% 20%;
   background-size: auto 42px;
   z-index: 100;
   cursor: move;
   cursor: grab;
   box-shadow: 0px 1px 4px 0px rgba(var(--bs-body-color-rgb), 0.05);
-  -webkit-box-shadow: 0px 1px 4px 0px rgba(var(--bs-body-color-rgb), 0.05);
+  box-shadow: none;
   /*border-width:1px;*/ }
   li[data-type] a, li[data-type] span {
     min-height: 20px;
@@ -18807,7 +18822,7 @@ li[data-type] {
   .sections-container > div.section-item {
     box-shadow: 0px 0px 1px 0px var(--bs-primary);
     box-shadow: 0px 0px 1px 0px rgba(18, 83, 205, 0.7), 0px 0px 5px 0px rgba(18, 83, 205, 0.1);
-    box-shadow: 0px 0px 1px 2px rgba(18, 83, 205, 0.05);
+    box-shadow: 0px 0px 1px 2px rgba(18, 83, 205, 0.03);
     border: 1px solid var(--bs-border-color);
     background: var(--bs-body-bg);
     margin: 0rem 0rem 1rem;
@@ -18916,7 +18931,7 @@ li[data-type] {
   border-radius: 0px;
   background-position: center;
   box-shadow: 0px 1px 5px 0px rgba(var(--bs-body-color-rgb), 0.15);
-  -webkit-box-shadow: 0px 1px 5px 0px rgba(var(--bs-body-color-rgb), 0.15);
+  box-shadow: none;
   /*		  
 		border-left-width:1px;
 		border-top-width:1px;
@@ -18967,15 +18982,15 @@ li[data-type] {
     visibility: hidden; }
 
 .blocks .drag-elements-sidepane li[data-type] {
-  width: 45%;
+  width: 44%;
   box-shadow: 0px 1px 4px 0px rgba(var(--bs-body-color-rgb), 0.05);
   -webkit-box-shadow: 0px 1px 4px 0px rgba(var(--bs-body-color-rgb), 0.05); }
 
 .components .drag-elements-sidepane li[data-type],
 #add-section-box li[data-type] {
   width: var(--builder-component-list-element-width);
-  min-width: 100px;
-  height: 100px;
+  min-width: 80px;
+  height: 80px;
   margin: 0% 1% 3% 3%;
   text-align: center;
   font-weight: normal;
@@ -18984,7 +18999,7 @@ li[data-type] {
   background-repeat: no-repeat;
   padding-top: 60px;
   padding-bottom: 7px;
-  padding: 60px 5px 7px 5px;
+  padding: 50px 5px 7px 5px;
   border-style: solid;
   border-width: 1px;
   border-radius: 3px;
@@ -18994,14 +19009,14 @@ li[data-type] {
 		*/
   background-color: var(--bs-white);
   border-color: var(--bs-border-color);
-  border-color: var(--bs-gray-300);
-  background-position: 50% 30%;
+  border-color: rgba(var(--bs-secondary-rgb), 0.15);
+  background-position: 50% 20%;
   background-size: auto 42px;
   z-index: 100;
   cursor: move;
   cursor: grab;
   box-shadow: 0px 1px 4px 0px rgba(var(--bs-body-color-rgb), 0.05);
-  -webkit-box-shadow: 0px 1px 4px 0px rgba(var(--bs-body-color-rgb), 0.05); }
+  box-shadow: none; }
   .components .drag-elements-sidepane li[data-type] a, .components .drag-elements-sidepane li[data-type] span,
   #add-section-box li[data-type] a,
   #add-section-box li[data-type] span {
@@ -19201,9 +19216,6 @@ input[type="number"]:focus {
 .form-control::placeholder {
   opacity: 0.7; }
 
-.form-control, .form-select {
-  box-shadow: 1px 1px 3px 0px rgba(var(--bs-body-color-rgb), 0.05) inset; }
-
 .btn-link:hover {
   text-decoration: none; }
 
@@ -19417,49 +19429,47 @@ ul.autocomplete li.selected {
     z-index: 1; } }
 
 input[type="color"] {
-  width: 28px;
-  height: 28px;
+  width: 24px;
+  height: 24px;
   border-radius: 3px;
   padding: 2px;
   box-shadow: none; }
   input[type="color"].form-control-color::-moz-color-swatch {
-    min-width: 21px;
-    min-height: 21px;
+    min-width: 17px;
+    min-height: 17px;
     border-radius: 3px;
     box-shadow: 1px 1px 5px 0px rgba(var(--bs-body-color-rgb), 0.25);
     border: none; }
   input[type="color"].form-control-color::-webkit-color-swatch {
-    min-width: 21px;
-    min-height: 21px;
+    min-width: 17px;
+    min-height: 17px;
     border-radius: 3px;
     box-shadow: 1px 1px 5px 0px rgba(var(--bs-body-color-rgb), 0.25);
     border: none; }
 
 .breadcrumb-navigator {
-  padding: 0.4rem 1rem;
-  min-height: 30px; }
+  padding: 0.5rem 0.7rem;
+  min-height: 30px;
+  font-size: 12px; }
   .breadcrumb-navigator .breadcrumb {
-    font-size: 90%;
     margin: 0; }
-    .breadcrumb-navigator .breadcrumb .breadcrumb-item {
-      padding: 0.2rem 0.5rem; }
-      .breadcrumb-navigator .breadcrumb .breadcrumb-item a {
-        color: var(--bs-body-color);
-        background: rgba(var(--bs-secondary-color-rgb), 0.03);
-        padding: 0.2rem 0.4rem;
-        border-radius: 4px;
-        border: 1px solid var(--bs-border-color);
+    .breadcrumb-navigator .breadcrumb .breadcrumb-item a {
+      color: var(--bs-body-color);
+      background: rgba(var(--bs-secondary-color-rgb), 0.03);
+      padding: 0.2rem 0.4rem;
+      border-radius: 4px;
+      border: 1px solid var(--bs-border-color);
+      text-decoration: none; }
+      .breadcrumb-navigator .breadcrumb .breadcrumb-item a:hover {
+        background: rgba(var(--bs-link-color-rgb), 0.05);
+        border: 1px solid rgba(var(--bs-link-color-rgb), 0.2);
         text-decoration: none; }
-        .breadcrumb-navigator .breadcrumb .breadcrumb-item a:hover {
-          background: rgba(var(--bs-link-color-rgb), 0.05);
-          border: 1px solid rgba(var(--bs-link-color-rgb), 0.2);
-          text-decoration: none; }
-        .breadcrumb-navigator .breadcrumb .breadcrumb-item a.el-component {
-          border-color: var(--bs-primary-bg-subtle);
-          background-color: rgba(var(--bs-primary-rgb), 0.07); }
-        .breadcrumb-navigator .breadcrumb .breadcrumb-item a.el-attribute {
-          border-color: var(--bs-success-bg-subtle);
-          background-color: rgba(var(--bs-success-rgb), 0.07); }
+      .breadcrumb-navigator .breadcrumb .breadcrumb-item a.el-component {
+        border-color: var(--bs-primary-bg-subtle);
+        background-color: rgba(var(--bs-primary-rgb), 0.07); }
+      .breadcrumb-navigator .breadcrumb .breadcrumb-item a.el-attribute {
+        border-color: var(--bs-success-bg-subtle);
+        background-color: rgba(var(--bs-success-rgb), 0.07); }
 
 #dragElement-clone {
   background: rgba(var(--bs-body-bg-rgb), 0.5);
@@ -19546,16 +19556,11 @@ img.preview {
   .hint:hover:before {
     transform: translateY(-8px); }
 
-/*
 .btn-light {
-	--bs-btn-bg:transparent;
-	border-color:transparent;
-	color:var(--bs-body-bg);
-	&:hover {
-		//background-color:var(--bs-border-color);
-	}
-}
-*/
+  --bs-btn-bg:transparent;
+  border-color: transparent;
+  color: var(--bs-body-color); }
+
 .btn-outline-primary {
   --bs-btn-color: var(--bs-link-color); }
 
@@ -19751,8 +19756,7 @@ body > section, body > footer, body > header {
 .btn-icon {
   font-weight: 500;
   text-transform: capitalize;
-  margin-bottom: 0px;
-  padding: 0.4rem 2rem; }
+  margin-bottom: 0px; }
   .btn-icon i:first-child {
     display: inline-block;
     margin-right: 0.3rem;