Skip to content

Commit

Permalink
UI changes, moved font list update code to Vvveb.FontsManager.addFont…
Browse files Browse the repository at this point in the history 
…List
  • Loading branch information
@givanz
givanz committed Sep 3, 2024
1 parent ef55737 commit 1e8b5c5
Show file tree
Hide file tree
Showing 9 changed files with 229 additions and 191 deletions.
168 changes: 86 additions & 82 deletions css/editor.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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); }
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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;
Expand All @@ -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 {
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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"] {
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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; }
Expand All @@ -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; }
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -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 {
Expand Down Expand Up @@ -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; }

Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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); }

Expand Down Expand Up @@ -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;
Expand Down
Loading

0 comments on commit 1e8b5c5

Please sign in to comment.