From 1e8b5c59d213698199fe55aec974bb1da3cff5cd Mon Sep 17 00:00:00 2001 From: givanz Date: Tue, 3 Sep 2024 14:14:28 +0300 Subject: [PATCH] UI changes, moved font list update code to Vvveb.FontsManager.addFontList --- css/editor.css | 168 ++++++++++++++-------------- editor.html | 59 +++++----- libs/builder/builder.js | 34 ++++++ libs/builder/components-common.js | 2 +- libs/builder/plugin-google-fonts.js | 33 +----- libs/codemirror/lib/codemirror.css | 5 +- scss/_builder.scss | 112 +++++++++++-------- scss/_csstree.scss | 5 +- scss/editor.scss | 2 +- 9 files changed, 229 insertions(+), 191 deletions(-) diff --git a/css/editor.css b/css/editor.css index ba82a403..cf8b96e7 100644 --- a/css/editor.css +++ b/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; diff --git a/editor.html b/editor.html index d66a1270..7040a552 100755 --- a/editor.html +++ b/editor.html @@ -127,9 +127,10 @@
Pages -
+
@@ -1681,8 +1682,8 @@
- - + +
diff --git a/libs/builder/builder.js b/libs/builder/builder.js index 26ff5dcf..804abab6 100644 --- a/libs/builder/builder.js +++ b/libs/builder/builder.js @@ -3822,6 +3822,38 @@ Vvveb.FontsManager = { activeFonts:[], providers: {},//{"google":GoogleFontsManager}; + addFontList: function(provider, groupName, fontList) { + let fonts = {}; + let fontNames = []; + + let fontSelect = generateElements("")[0]; + for (font in fontList) { + fontNames.push({"text":font, "value":font, "data-provider": provider}); + let option = new Option(font, font); + option.dataset.provider = provider; + //option.style.setProperty("font-family", font);//font preview if the fonts are loaded in editor + fontSelect.append(option); + } + document.getElementById("font-family").append(fontSelect); + + let list = Vvveb.Components.getProperty("_base", "font-family"); + if (list) { + list.onChange = function (node,value, input, component) { + let option = input.options[input.selectedIndex]; + Vvveb.FontsManager.addFont(option.dataset.provider, value, node); + return node; + }; + + list.data.options.push({optgroup:groupName}); + list.data.options = list.data.options.concat(fontNames); + + Vvveb.Components.updateProperty("_base", "font-family", {data:list.data}); + + //update default font list + fontList = list.data.options; + } + }, + addProvider: function(provider, Obj) { this.providers[provider] = Obj; }, @@ -3838,6 +3870,8 @@ Vvveb.FontsManager = { }, removeFont: function(provider, fontFamily) { + if (!provider) return; + let providerObj = this.providers[provider]; if (provider!= "default" && providerObj) { providerObj.removeFont(fontFamily); diff --git a/libs/builder/components-common.js b/libs/builder/components-common.js index d8410cf7..b195d959 100755 --- a/libs/builder/components-common.js +++ b/libs/builder/components-common.js @@ -121,7 +121,7 @@ Vvveb.Components.extend("_base", "_base", { data: { type:'warning', title:'Linked styles', - text:'This element shares styles with other 4 elements, to apply styles only for this element enter a unique id eg: marketing-heading in in
Content > General > Id.
', + text:'This element shares styles with other 4 elements, to apply styles only for this element enter a unique id eg: marketing-heading in in
Content > General > Id.
', }, afterInit:function(node, inputElement) { let selector = Vvveb.StyleManager.getSelectorForElement(node); diff --git a/libs/builder/plugin-google-fonts.js b/libs/builder/plugin-google-fonts.js index c55683b7..7446411d 100755 --- a/libs/builder/plugin-google-fonts.js +++ b/libs/builder/plugin-google-fonts.js @@ -42,38 +42,9 @@ fetch(Vvveb.baseUrl + "../../resources/google-fonts.json") return response.json() }) .then((data) => { - //let json = JSON.parse(data); - googleFonts = data ; - //let fontSelect = $("#font-familly"); - - let fontSelect = generateElements("")[0]; - for (font in googleFonts) { - googlefontNames.push({"text":font, "value":font, "data-provider": "google"}); - let option = new Option(font, font); - option.dataset.provider = "google"; - //option.style.setProperty("font-family", font); - fontSelect.append(option); - } - document.getElementById("font-family").append(fontSelect); - - let list = Vvveb.Components.getProperty("_base", "font-family"); - if (list) { - list.onChange = function (node,value, input, component) { - let option = input.options[input.selectedIndex]; - Vvveb.FontsManager.addFont(option.dataset.provider, value, node); - return node; - }; - - list.data.options.push({optgroup:"Google Fonts"}); - list.data.options = list.data.options.concat(googlefontNames); - - Vvveb.Components.updateProperty("_base", "font-family", {data:list.data}); - - //update default font list - fontList = list.data.options; - } + Vvveb.FontsManager.addFontList("google", "Google Fonts", data); }) .catch(error => { console.log(error.statusText); displayToast("bg-danger", "Error", "Error loading google fonts!"); -}); \ No newline at end of file +}); diff --git a/libs/codemirror/lib/codemirror.css b/libs/codemirror/lib/codemirror.css index ff7d2265..69b4fedf 100644 --- a/libs/codemirror/lib/codemirror.css +++ b/libs/codemirror/lib/codemirror.css @@ -4,12 +4,15 @@ /* Set height, width, borders, and global font properties here */ font-family: monospace; height: 100%; - height: calc(100% - 35px); color: black; direction: ltr; font-size:14px; } +#vvveb-code-editor .CodeMirror { + height: calc(100% - 30px); +} + /* PADDING */ .CodeMirror-lines { diff --git a/scss/_builder.scss b/scss/_builder.scss index c32bb55f..2df23d77 100644 --- a/scss/_builder.scss +++ b/scss/_builder.scss @@ -79,8 +79,8 @@ $font-size-base: 16px; @mixin component-list-element() { 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; @@ -90,7 +90,7 @@ $font-size-base: 16px; background-repeat: no-repeat; padding-top: 60px; padding-bottom: 7px; - padding: 60px 5px 7px 5px; + padding: 50px 5px 7px 5px; //border-color:var(--bs-border-color-rgb); border-style:solid; @@ -102,16 +102,16 @@ $font-size-base: 16px; */ background-color: var(--bs-white); border-color: var(--bs-border-color); - border-color:var(--bs-gray-300); + border-color:rgba(var(--bs-secondary-rgb), 0.15); - background-position: 50% 30%; + background-position: 50% 20%; background-size: auto 42px; z-index: 100; cursor:move; cursor:grab; //opacity:0.75; 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; a, span { min-height: 20px; @@ -155,7 +155,7 @@ $font-size-base: 16px; 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; @@ -265,15 +265,15 @@ body } @media (min-width: 1600px) { - --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) { - --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%; } scrollbar-color: rgba(var(--bs-body-color-rgb), 0.1) var(--bs-body-bg); @@ -372,9 +372,11 @@ body } .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); + //--bs-btn-bg: rgba(var(--bs-link-color-rgb), 0.07); + font-weight: 600; + padding: 0rem 0.3rem; + margin: 0.2rem 0.3rem; } .tree @@ -445,10 +447,19 @@ body .nav-link { //color:var(--bs-body-color); //border-top:2px solid transparent; + border-left:none; + border-right:none; + border-top:none; + border-bottom-width: 1px; &.active { - border-top:1px solid rgba(var(--bs-link-color-rgb), 0.7); - //color:var(--bs-link-color-rgb); + //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; + + i { + color: var(--bs-link-hover-color); + } } } } @@ -459,7 +470,7 @@ body padding:0; border-bottom:1px solid var(--bs-border-color); text-align:center; - background-color:rgba(var(--bs-secondary-color-rgb), 0.03); + //background-color:rgba(var(--bs-secondary-color-rgb), 0.03); //overflow:hidden; width:100%; @@ -476,6 +487,7 @@ body --bs-btn-bg:transparent; border-color:transparent; color: var(--bs-secondary-color); + line-height:1.8; i { font-size: 1.2rem; @@ -584,7 +596,7 @@ body flex-direction:column; .nav { - background:rgba(var(--bs-secondary-color-rgb), 0.03); + //background:rgba(var(--bs-secondary-color-rgb), 0.03); } } @@ -723,7 +735,7 @@ body .header > div.section-box-actions { position:absolute; - top:0.5rem; + //top:0.5rem; right:0.5rem; } @@ -833,7 +845,7 @@ body } .nav-tabs { - background:rgba(var(--bs-secondary-color-rgb), 0.03); + //background:rgba(var(--bs-secondary-color-rgb), 0.03); } #right-panel @@ -1060,6 +1072,7 @@ body top:0px; left:0px; display:none; + transition: all 0.05s; } #drop-highlight-box @@ -1430,7 +1443,7 @@ body i { padding: 0.3rem 0rem; - font-size:1.2rem; + font-size:1.1rem; border-radius: 3px; display:block; border:1px solid transparent; @@ -1457,7 +1470,7 @@ body 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-color); color: var(--bs-link-hover-color); } @@ -1474,12 +1487,18 @@ body { //padding:0.8rem 0 0.5rem; //padding:0.5rem 0 0.5rem; + border-top:none; + border-left:none; + border-right:none; + border-bottom-width: 1px; text-align:center; --bs-nav-link-color:var(--bs-secondary-color); i { font-size:1.2rem; line-height:1; + vertical-align: bottom; + margin-right: 0.5rem; } } @@ -1491,11 +1510,17 @@ body //border-color: var(--bs-link-color-rgb) #dee2e6 var(--bs-body-bg) #dee2e6; //border-top-width:2px; border-radius: 0px; - background: linear-gradient( 0deg, var(--bs-body-bg) 70%, rgba(var(--bs-link-color-rgb), 0.03) 100%); + //background: linear-gradient( 0deg, var(--bs-body-bg) 70%, rgba(var(--bs-link-color-rgb), 0.03) 100%); //box-shadow: 0px -5px 5px 5px rgba(var(--bs-link-color-rgb), 0.05); - border-top:1px solid rgba(var(--bs-link-color-rgb), 0.7); + //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; + i { + color: var(--bs-link-hover-color); + } } + .nav-fill .nav-link { padding-left:0rem; @@ -1674,11 +1699,11 @@ padding-top:1rem; > div.section-item { - box-shadow: 0px 0px 1px 0px var(--bs-primary); + 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); - border:1px solid var(--bs-border-color); - background:var(--bs-body-bg); + 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; padding:0.3rem 0.5rem 0.3rem 1.4rem; position:relative; @@ -1857,7 +1882,7 @@ padding-top:1rem; } .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); } @@ -2107,7 +2132,8 @@ input[type="number"]:focus { } .form-control, .form-select { - box-shadow: 1px 1px 3px 0px rgba(var(--bs-body-color-rgb), 0.05) inset; + //box-shadow: 1px 1px 3px 0px rgba(var(--bs-body-color-rgb), 0.05) inset; + //background-color:rgba(var(--bs-secondary-color-rgb), 0.01); } .btn-link:hover { @@ -2349,23 +2375,23 @@ ul.autocomplete li.selected input[type="color"] { - width:28px; - height:28px; + width:24px; + height:24px; border-radius: 3px; padding: 2px; box-shadow:none; &.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; } &.form-control-color::-webkit-color-swatch { - min-width: 21px; - min-height: 21px; + min-width: 17px; + min-height: 17px; //padding:0; border-radius: 3px; box-shadow: 1px 1px 5px 0px rgba(var(--bs-body-color-rgb), 0.25); @@ -2375,16 +2401,14 @@ input[type="color"] { .breadcrumb-navigator { - padding:0.4rem 1rem; + padding:0.5rem 0.7rem; min-height:30px; + font-size:12px; .breadcrumb { - font-size:90%; margin:0; .breadcrumb-item { - padding:0.2rem 0.5rem; - a { color:var(--bs-body-color); background: rgba(var(--bs-secondary-color-rgb), 0.03); @@ -2534,16 +2558,16 @@ img.preview { } } } -/* + .btn-light { --bs-btn-bg:transparent; border-color:transparent; - color:var(--bs-body-bg); + color:var(--bs-body-color); &:hover { //background-color:var(--bs-border-color); } } -*/ + .btn-outline-primary { --bs-btn-color: var(--bs-link-color); } diff --git a/scss/_csstree.scss b/scss/_csstree.scss index 5126c6fc..9e38be53 100644 --- a/scss/_csstree.scss +++ b/scss/_csstree.scss @@ -91,14 +91,15 @@ display:none; position:absolute; top:0px; - right:0px; + right:2px; .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); } } } diff --git a/scss/editor.scss b/scss/editor.scss index 93d25bfe..54aa6c7f 100644 --- a/scss/editor.scss +++ b/scss/editor.scss @@ -66,7 +66,7 @@ $font-size-base: 1rem; font-weight:500; text-transform:capitalize; margin-bottom:0px; - padding:0.4rem 2rem; + //padding:0.4rem 2rem; i:first-child {