//$custom-select-indicator: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 2'%3E%3Cpath fill='%23aaa' d='M 2,2 0,0 h 4 z'/%3E%3C/svg%3E"); /* $custom-select-indicator: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M509.121,125.966c-3.838-3.838-10.055-3.838-13.893,0L256.005,365.194L16.771,125.966c-3.838-3.838-10.055-3.838-13.893,0 c-3.838,3.838-3.838,10.055,0,13.893l246.18,246.175c1.842,1.842,4.337,2.878,6.947,2.878c2.61,0,5.104-1.036,6.946-2.878 l246.17-246.175C512.959,136.021,512.959,129.804,509.121,125.966z'/%3E%3C/svg%3E"); */ //$custom-control-indicator-active-bg: $secondary; //$custom-control-indicator-checked-bg: $secondary; $font-size-base: 1rem; $builder-canvas-margin: 40px; $headings-font-weight: 500; //$form-check-input-width: 1.2em; $font-family-sans-serif: Inter, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; $la-font-path: '../fonts/line-awesome'; $la-css-prefix-lar: 'la'; $la-css-prefix-las: 'la'; $sidebar-bg: #fcfdfe; $table-cell-padding-y: 1rem; $table-cell-padding-x: 0.7rem; $pagination-font-size: 14px; $btn-font-size: 14px; $card-cap-bg: rgba(var(--bs-body-color-rgb), 0.02); $card-border-color: var(--bs-border-color); $btn-disabled-opacity: 0.35; $border-radius: 0.25rem; $primary: #0070f0; $border-color: rgba(var(--bs-body-color-rgb), 0.1); // Buttons //$input-btn-padding-y: 0.5rem !default; //$input-btn-padding-x: 1.1rem !default; //set higher z-index to avoid tinymce dialog overlap $zindex-dropdown: 1400; $zindex-sticky: 1420; $zindex-fixed: 1430; $zindex-offcanvas-backdrop: 1440; $zindex-offcanvas: 1445; $zindex-modal-backdrop: 1450; $zindex-modal: 1455; $zindex-popover: 1470; $zindex-tooltip: 1480; $zindex-toast: 1490; $form-range-thumb-bg: var(--bs-link-hover-color); @import "bootstrap/bootstrap"; //@import "bootstrap-css-vars"; @import "medialibrary"; @import "builder"; @import "fonts"; @import "ionicons"; @import "line-awesome/line-awesome"; /* i.la { font-style:normal; vertical-align:middle; } */ a { text-decoration:inherit; &:hover { text-decoration: inherit; } } html { //font-size:14px; //background-color:$sidebar-bg; --bs-btn-active-border-color:var(--bs-primary-border-subtle); --bs-btn-active-bg:rgba(var(--bs-primary-rgb), 0.1); --bs-border-color-translucent: rgba(0, 0, 0, 0.12); //font-feature-settings: "calt", "cv10", "cv11", "liga", "ss01", "ss03"; } body { -webkit-font-smoothing: antialiased; text-rendering: optimizelegibility; -moz-osx-font-smoothing: grayscale; background:var(--bs-body-bg); width:100%; flex-direction: column; } b, strong { font-weight:600; } a { //color:#0366d6; } a:hover { //color:darken(#0366d6, 20%); } .navbar { font-size: 0.875em; } /* .bg-dark { background-color: $success !important; } */ .bg-body-secondary { //background-color: var(--bs-body-bg); !important; //border: 1px solid rgba(var(--bs-body-color-rgb), 0.1); &.navbar-fixed-top { border-width: 0 0 1px 0; } &.navbar-fixed-bottom { border-width: 1px 0 0 0; } } html, body { min-height:100%; display:flex; text-rendering:optimizelegibility; } body > div#container, .small-nav, .main { min-height:100%; width:100%; } #container { //background:#fafcff; min-height:100%; display: flex; flex-direction: row; .main, #preview { transition: width 1s, transform 1s ease 0s, width 1s ease 0s, width 1s ease 0s, left 1s ease 0s, height 1s ease 0s; transform-origin: top center; } #preview-separator { position: absolute; opacity: 0; height:100%; > div { top: 50%; position:absolute; border: 1px solid var(--bs-border-color); overflow: hidden; letter-spacing: 2px; color: var(--bs-secondary); background: var(--bs-body-bg); display: inline-block; letter-spacing: -1px; cursor: col-resize; line-height: 4px; width: 15px; height: 0px; padding: 0px 3px; //display:none; overflow:hidden; user-select: none; border-radius: 8px; transition: opacity 1s 1s; &:hover { background-color :rgba(var(--bs-primary-rgb), 0.75); color: var(--bs-light); } } &.active { background-color :rgba(var(--bs-primary-rgb), 0.25); width:15px; } } #preview { width:0; overflow:hidden; iframe { border: 0; width: 100%; height: 100%; pointer-events:none; } } } .btn-preview { .preview { display:block; } .close { display:none; } &.btn.close { background-color:var(--bs-body-bg); color:var(--bs-body-color); float:right; margin-left:1rem; .preview { display:none; } .close { display:block; } } } .preview-responsive { .percent input {height:100%;margin-top:0;} } #content, .main { display: flex; flex-flow: column; } #container.preview { background-color: var(--bs-border-color); .main, #preview { width:50%; iframe { margin: 0 auto; display:block; } &.tablet iframe { width: 768px; } &.mobile iframe { width: 320px; } } .main { background-color:var(--bs-body-bg); border-right: 1px solid var(--bs-border-color); } #preview-separator { left: calc(50% + 14px); opacity: 1; > div { height: 32px; //display: block; } } } /* .content { padding:0rem 1rem; margin:0rem 1rem; } */ .btn { /*box-shadow: 0px 1px 2px #eee;*/ cursor:pointer; /*padding:0.5rem 2rem;*/ &:hover { text-decoration:none; } } .custom-select { -webkit-appearance: none; -moz-appearance: none; } .btn-primary { // box-shadow:0px 5px 10px #d6dee4; // color: var(--bs-gray-100); } /*.collapsing, .collapse { transition: height 0.01s; }*/ .border-gray { // border-color:#eee !important; } .btn-gray { background: #f5f5f5; border: 1px solid var(--bs-body-color-rgb); color: var(--bs-body-color); /*box-shadow: 0px 2px 3px #eee;*/ } .btn-icon-single { padding:0rem; margin:0rem; i:first-child { display: inline-block; padding: 0.7rem 1rem; font-size: 18px; vertical-align: middle; line-height: 18px; } &.btn-sm { //padding: 0.4rem 0.6rem; i:first-child { padding: 0.4rem 0.6rem; } } } .btn-icon { //text-transform:capitalize; margin-bottom:0px; position:relative; //padding:0.5rem 2.1rem; //padding:0.5rem 1rem; box-shadow:0 4px 4px #08080814, 0 1px 2px #08080833, inset 0 6px 12px #ffffff1f, inset 0 1px 1px #fff3; box-shadow:1px 1px 2px 1px rgba(var(--bs-body-color-rgb),0.07),1px 1px 2px 1px rgba(var(--bs-body-bg-rgb),0.15) inset; box-shadow:0 4px 4px rgba(var(--bs-body-color-rgb),0.08), 0 6px 12px rgba(var(--bs-body-color-rgb),0.012), 0 6px 12px rgba(var(--bs-body-bg-rgb),0.12) inset, 0 1px 1px rgba(var(--bs-body-bg-rgb),0.2) inset; //border:none; font-weight:500; /* i:first-child { display: inline-block; margin-right:0.3rem; //font-size: 21px; //opacity:0.7; } */ &.btn-outline-primary { border-width:0px; box-shadow:rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(var(--bs-primary-rgb), 0.15) 0px 1px 2px 0px, rgba(var(--bs-primary-rgb), 0.2) 0px 0px 0px 1px; &:hover { color:var(--bs-link-color); background:var(--bs-border-color); } i { //border-right:1px solid rgba(var(--bs-body-color-rgb), 0.1); background:transparent; } } &.btn-outline-secondary, &.btn-outline-success , &.btn-outline-danger { //box-shadow:0px 0px 3px 1px rgba(var(--bs-body-color-rgb), 0.1), -1px 1px 2px 0px rgba(var(--bs-body-bg-rgb), 0.15) inset; box-shadow:rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(var(--bs-body-color-rgb), 0.12) 0px 1px 2px 0px, rgba(var(--bs-body-color-rgb), 0.08) 0px 0px 0px 1px; //--bs-btn-bg:var(--bs-body-bg); border: none; --bs-border-width:0; } &.btn-gray { i { } } &.btn-secondary { box-shadow:1px 1px 2px 1px rgba(var(--bs-body-color-rgb),0.07),-1px 1px 2px 0px rgba(var(--bs-body-bg-rgb),0.15) inset; //--bs-btn-bg:var(--bs-body-bg); i { background: transparent; } } &.btn-primary { //box-shadow:1px 1px 2px 1px rgba(var(--bs-body-color-rgb),0.07),1px 1px 2px 1px rgba(var(--bs-body-bg-rgb),0.15) inset; //box-shadow:rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.2) 0px 0.75px 0px 0px inset, rgba(var(--bs-primary-rgb), 0.4) 0px 1px 2px 0px, rgba(var(--bs-primary-rgb), 0.8) 0px 0px 0px 1px; //padding:0.5rem 2.1rem; //padding-left:2.1rem; //padding-right:2.1rem; --bs-btn-border-color: rgba(var(--bs-primary-rgb), 0.5); //--bs-btn-bg: rgba(var(--bs-primary-rgb), 0.9); --bs-btn-bg:#0030C0; padding-left:1.2rem; padding-right:1.2rem; i { /*background: rgba(var(--bs-body-bg-rgb), 0.1);*/ } } &.btn-sm { border: none; i { /*padding: 0.5rem 0.5rem;*/ } } &:after { content: "."; background-image:linear-gradient(rgba(var(--bs-body-bg-rgb), 1), rgba(var(--bs-body-bg-rgb), 0)); position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0.16; } &.btn-outline-secondary:after,&.btn-outline-primary:after,&.btn-outline-secondary:after { background-image: linear-gradient(rgba(var(--bs-body-color-rgb), 0), rgba(var(--bs-body-color-rgb), 1)); opacity: 0.03; } } .btn.btn-outline-dark { border-color:var(--bs-border-color); } .btn.btn-outline-secondary { /* --bs-btn-color: var(--bs-body-color); --bs-btn-border-color: var(--bs-body-color-rgb); --bs-btn-hover-color:var(--bs-body-color); --bs-btn-hover-bg:#eee; --bs-btn-hover-border-color: var(--bs-border-color); --bs-btn-active-bg:var(--bs-body-color-rgb); --bs-btn-active-color:#222;*/ //box-shadow:-1px 1px 2px 1px rgba(var(--bs-body-color-rgb), 0.07), -1px 1px 2px 0px rgba(var(--bs-body-bg-rgb), 0.2) inset; --bs-btn-bg:var(--bs-body-bg); --bs-btn-border-color:var(--bs-border-color); --bs-btn-hover-bg:var(--bs-primary-bg-subtle); --bs-btn-hover-color:var(--bs-body-color); --bs-btn-hover-border:var(--bs-body-color); --bs-btn-hover-border-color:var(--bs-border-color); --bs-btn-active-bg: var(--bs-border-color); --bs-btn-active-color: var(--bs-body-color); --bs-btn-active-border-color: var(--bs-border-color); } .save-btn { .btn-group > & { border-right:2px solid rgba(var(--bs-body-color-rgb), 0.2); padding:0.1rem 0.5rem 0.1rem 1rem; i { //margin-right: 0.5rem; font-size:1rem; line-height:21px; } } &.dropdown-toggle-split { padding:0 0.5rem; box-shadow:none; border-left:1px solid rgba(var(--bs-body-bg-rgb), 0.2); } &:disabled { //color: rgba(var(--bs-body-bg-rgb), 0.5) !important; //opacity: 0.9; } } /* .btn-light { color: #111; background-color: #f9f9f9; border-color: #eee; } */ /* .badge.badge-outline { border:1px solid #aaa; color:var(--bs-body-color); } .badge.badge-gray { border: 1px solid var(--bs-border-color); color: var(--bs-body-color); background: #f5f5f5f5; } */ /* .form-check-input { ~ .custom-control-indicator { border: 2px solid #eee;// $custom-control-indicator-bg; background-color: var(--bs-gray-100); } &:checked ~ .custom-control-indicator { border:none; } &:focus ~ .custom-control-indicator { border:none; } &:active ~ .custom-control-indicator { border:none; } &:disabled { ~ .custom-control-indicator { border:none; } } } .form-check-label::before { background-color: var(--bs-gray-100); box-shadow: none; border: 1px solid var(--bs-border-color); } */ .input-group-addon i { font-size: 18px; line-height: 1; } /* img[src=""] { min-width:100px; min-height:50px; position:relative; display:block; margin:auto; } img[src=""]::after { content: " "; //font-family: "Ionicons"; width:100%; height:100%; position:absolute; background-color:var(--bs-gray-100); background:url(../img/image.svg); background-size: contain; background-repeat: no-repeat; background-position: center center; top:0; left:0; font-size: 3rem; text-align: center; vertical-align: middle; } */ .main { //margin-left: 250px; position: relative; margin-bottom:2rem; #main-content, #content .content { padding:0rem 1rem; } #content, #main-content { min-height:600px; //box-shadow:1px 1px 3px 1px #f5f5f5; //font-size:14px; form { padding:0rem; } label { //font-weight:600; } } } .columns { display:flex; .left-column { width:auto; flex:1; position:relative; > .tab-content { //border-right:1px solid var(--bs-border-color); } } .right-column { width:300px; padding:0rem 0 2rem; border-left:1px solid var(--bs-border-color); #featured-image-thumb { cursor:pointer; } label.header { font-size:13px; font-weight: 600; //color:var(--bs-body-color); padding:0.5rem 1rem; } > label.header:first-child { border: none; } .section { padding:1rem 1rem; } } } div.actions { margin:0rem 0rem 1rem; padding:1.5rem 2rem 1rem; border-bottom:1px solid rgba(var(--bs-body-color-rgb), 0.08); //position:relative; display:flex; background-color:var(--bs-body-bg); .title { flex-grow:1; margin-bottom:0.5rem; } .btns { display:flex; flex-wrap: wrap; align-items: center; justify-content: space-between; .btn, .input-group { margin-left:0.5rem; margin-bottom:0.5rem; } } .input-group .btn { margin:0; } h4 { font-size:1rem; font-weight:normal; margin-bottom:0; i { //font-size: 1.5rem; //vertical-align: text-bottom; line-height:1; color: rgba(var(--bs-secondary-rgb), 0.5); margin-right: 0.2rem; } } > .nav-tabs { bottom: -1px; position: absolute; } } td.actions { text-align:center; } .secondary-actions { visibility:hidden; padding:0;//1rem 1rem 0rem 0rem; position: absolute; width: 100%; z-index:100; bottom: -0.8rem; //text-align: right; //bottom: -5px; //margin-top:5px; a.btn { //margin-top: 0.4rem; &:last-child { } } .btn-icon-single { padding: 0rem 1rem 0 0; &.btn-sm { i:first-child { padding: 0.3rem 0.4rem; } } } .btn-icon-single.btn-sm i:first-child, .btn-group-sm > .btn-icon-single.btn i:first-child { /*padding: 0.1rem 0.2rem;*/ } } td:hover .secondary-actions { visibility:visible; } tr.no-items { --bs-table-hover-bg: transparent; } .flat { .card { border:none; padding-bottom: 0rem; .card-header { background:transparent; border-bottom:none; /*border-top:1px solid rgba(var(--bs-body-color-rgb), 0.125);*/ font-weight:600; padding-left: 0rem; //font-size:12px; } } .card:first-child .card-header { border-top: none; } } /* .accordion { .card { border:none; .card-header { background:#fafbfc; border-bottom:1px solid rgba(var(--bs-body-color-rgb), 0.05); > span > a { color:var(--bs-body-color); display:block; } .ion-plus { display:none; } } } } */ .top-header { //padding:0.3rem 1rem 0.1rem; margin-bottom:0rem; border-bottom:1px solid rgba(var(--bs-body-color-rgb), 0.08); border-bottom:1px solid var(--bs-border-color); //background:#f9f9f9; .btn { font-size:12px; &.btn-sm { padding:0.35rem 0.5rem; } .la{ //vertical-align: bottom; margin-right: 0.1rem; } } .btn-group .dropdown-toggle.btn, a.btn { padding-top: 0.1rem; padding-bottom: 0.1rem; i { vertical-align: middle; font-size: 1.2rem; display: inline-block; line-height:1.4; } span { font-size:12px; } .badge {font-size:0.85em;} &::after { //background:$custom-select-indicator no-repeat right center; //width: 8px !important; //height: 8px !important; //border: none !important; //vertical-align: 0em !important; } } @include media-breakpoint-down(sm) { /* .btn-group { width:40%; }*/ .vr, .btn-light { display:none; } } .menu-toggle, #color-theme-switch { i { font-size: 15px; line-height: 1.4; vertical-align: middle; } } } .sidebar { /* position: sticky; float:left; top: 0px; bottom: 0; left: 0;*/ min-width: 250px; z-index: 1000; display: block; //overflow-x: hidden; //overflow-y: auto; //background-color: #fcfcfc; background-color: $sidebar-bg; /* background:-moz-linear-gradient(left, var(--bs-body-bg); 75%, #fafbfc 100%); background:-webkit-linear-gradient(left, var(--bs-body-bg); 75%, #fafbfc 100%); background:linear-gradient(left, var(--bs-body-bg); 75%, #fafbfc 100%); */ //padding: 1rem 0rem 0rem 0rem; /*box-shadow: -1px -3px 2px #eee inset;*/ /*box-shadow: -1px -2px 1px #f3f3f3 inset;*/ /*box-shadow: 2px 0px 7px rgba(var(--bs-body-color-rgb),0.07);*/ /*box-shadow:2px 0px 7px 2px rgba(var(--bs-body-color-rgb),0.02) inset;*/ border-right:1px solid var(--bs-secondary-bg); height:100%; &:hover { //position:absolute; bottom:auto; } .logo { align-items: center; display: flex; vertical-align: middle; justify-content: space-between; margin-bottom: 0rem; margin: 4rem 0rem 0 2rem; margin: 2rem 1.2rem 0rem 2rem; position:relative; #color-theme-switch { position: absolute; top: 0.2rem; color:var(--bs-gray-500); font-size:1rem; /* width: 11px; height: 11px; background: transparent; border: 1px solid var(--bs-gray-500); border-radius: 50px; */ padding: 3px; right: 42px; cursor:pointer; /* &::after { content: "."; background: var(--bs-gray-500); left: 0px; top: 0px; width: 50%; height: 100%; position: absolute; color: transparent; border-top-left-radius: 50px; border-bottom-left-radius: 50px; }*/ } #search-btn { color:var(--bs-gray-500); font-size:1rem; padding: 3px; cursor:pointer; } .img { //background-image:url('../img/logo.png'); background-repeat:no-repeat; width:120px; //height:50px; display:inline-block; background-position-y: 11px; [data-v-site-logo] { display:block; } [data-v-site-logo-dark] { display:none; } img { max-width:120px; max-height:80px; } div { overflow: clip; max-width: 130px; margin-left: 0.3rem; vertical-align: middle; text-overflow: ellipsis; display: inline-block; } } a.menu-toggle { font-size: 1rem; margin-right: 1.4rem; margin-left: 0.5rem; margin-top: 0.3rem; outline:none; display: inline-block; vertical-align: top; cursor:pointer; float:right; i { color:var(--bs-gray-500); vertical-align: middle; vertical-align:middle; } } } .navbar-expand-md #search-btn { right:auto; } .navbar { text-align: left; margin: 1rem auto 0; position:static; padding:0px; width:99%; &:hover { //overflow-y:auto; } .nav-item { padding-left:1.5rem; margin:0; &.no-permission { display:none; } &.align-top > .sub-menu { bottom: 0; top: auto; } &.align-middle > .sub-menu { bottom: 0; top: auto; margin-bottom:-50%; } &.columns-2 > .sub-menu { columns:2; min-width:400px; width:200%; } &.heading { font-size:10px; margin-top:0.5rem; margin-bottom:0.1rem; a { //font-size:11px; font-weight:normal; padding-bottom: 0.2rem; } i { display:none; } span { text-transform:uppercase; color: rgba(var(--bs-secondary-rgb), 0.85); //color:#aaa; } } } .nav-link { //color: #656565; //color: rgba(var(--bs-secondary-rgb), 1); padding-top:0.50rem; padding-bottom:0.50rem; margin:0; i,img { //margin-right: 1.3rem; //margin-right: 0.8rem; //color: var(--bs-body-color); color: var(--bs-secondary-color); color: rgba(var(--bs-secondary-rgb), 0.8); vertical-align: middle; font-size: 1.25rem; line-height:1; width:24px; margin-right:0.35rem; &.la-lg { font-size:1.8rem; } } img { max-width:24px; } } .sub-menu { .nav-item { &.heading { margin:0; a { padding-bottom:0; &:hover { background:var(--bs-gray-100); } } } .nav-link { color:var(--bs-body-color); i, img { //margin-right:0.4rem; color: #999; line-height:1.1; max-width:24px; max-height:24px; } [data-bs-theme="dark"] & img[src$=".svg"] { filter:invert(93%) hue-rotate(180deg); } } &:hover { background:#fafcff; } } } //.nav-link[data-bs-toggle="collapse"] .nav-link.items { position:relative; &:after { /* border-top-color: #aaa; display: inline-block; width: 0; height: 0; margin-left: 0.3em; vertical-align: middle; content: ""; border-top: 0.3em solid; border-right: 0.3em solid transparent; border-left: 0.3em solid transparent; background: $custom-select-indicator no-repeat right center; width: 8px !important; height: 8px !important; border:none !important; vertical-align:0em !important; margin-right:1rem; position:absolute; right:0.5rem; top:1rem; opacity:0.5; transform:rotate(270deg); z-index:0;*/ content: "\f105"; font-family:'Line Awesome Free'; font-weight:900; margin-right:1rem; position:absolute; right:0.5rem; top:0.7rem; opacity:0.3; transition:opacity 2s; vertical-align:middle; font-style: normal; font-size: 12px; } } .dropdown-toggle:after { border-top-color: #aaa; } .logo { display:none } &:hover { //.nav-link[data-bs-toggle="collapse"] { .nav-link.items { &:after { opacity:0.9 !important; } } } ul { list-style:none; width:100%; } .sub-menu { min-width: 200px; //background-color: transparent; border: none; font-size: inherit; float: none; padding-left: 1rem; padding-bottom: 0rem; position:relative; padding-top:0rem; padding-bottom:0px; margin-left:0rem; top:0px; border-left:1px solid var(--bs-border-color); //padding-left: 1.7rem; border-radius:0 3px 3px 0px; box-shadow:none; /* disable bootstrap stupid popper.js css */ transform: none !important; left: auto !important; position: relative !important; /* disable bootstrap stupid popper.js css */ .small-nav & { //background: var(--bs-gray-100); /*border: 1px solid #eee;*/ border-left: none; //top: -30px; //left:25px !important; } .nav-item { padding: 0; margin:0; a { color: var(--bs-body-color); //font-size:13px; padding:0.7rem 1.1rem 0.6rem; margin:0; &:hover { background:#fafcff; color:var(--bs-link-color); } } &.heading { &:hover,a:hover { background:transparent; color:var(--bs-body-color); } } } } #user-info { position:absolute; bottom:0px; width:100%; margin-bottom:2rem; i { width: 50px; display: inline-block; text-align: center; height: 50px; vertical-align: middle; font-size:32px; background:var(--bs-border-color); border-radius:50px; } span { color:#999; font-size:11px; } } } &.blue { background:#f4f6f8; .navbar { .nav-link { //color: var(--bs-gray-100); i { // color: #eee; } .active { } &.heading { i { } span { //color:#aaa; } } } //.nav-link[data-bs-toggle="collapse"] .nav-link.items { :after { border-top-color: #aaa; } } .dropdown-toggle:after { border-top-color: #aaa; } } } html[data-bs-theme="dark"] & { background:#272a2f; .logo { .img { //background-image:url('../img/logo-white.png'); [data-v-site-logo] { display:none; } [data-v-site-logo-dark] { display:block; } //filter:brightness(3); } } .navbar { .nav-item { &:hover { background: var(--bs-gray-700); color:var(--bs-white); &.heading { background:transparent; } .nav-link { color:var(--bs-white); i { color:var(--bs-white); } } } &.heading { .nav-link:hover { background:transparent; } } .nav-link { //color: var(--bs-gray-100); i { //color: #eee; } } ul.dropdown-menu { background: var(--bs-gray-700); } .sub-menu { .nav-item { a:hover { background: var(--bs-gray-800); } &.heading { a:hover { background:transparent; } } } } //.nav-link[data-bs-toggle="collapse"] .nav-link.items { :after { border-top-color: #aaa; } } .dropdown-toggle:after { border-top-color: #aaa; } &.heading { i { } span { color:var(--bs-gray-500); } } } } } } .small-nav { transition:all 1s; .sidebar { padding:0rem; min-width:40px; overflow-x:inherit; overflow-y:inherit; //background:#f5f5f5; .navbar, .logo { margin:1rem 0rem 0rem 0rem; padding:0rem; } .logo { flex-direction: column; .img { //background-image:url('../img/logo-small.png') !important; max-width:30px; overflow-x:hidden; img { //display:none !important; //max-width:100%; } } a { display:block; &#color-theme-switch { left: 0; margin-left: 0.3rem; } i { font-size:1.1rem; } } #search-btn { right:10px; top:0; } } .navbar { .nav-link i, a i { html[data-bs-theme="dark"] & { color: var(--bs-secondary); } margin-right:0; } //.nav-link[data-bs-toggle="collapse"]::after .nav-link.items::after { //background:none; //content:""; right:0; margin-top:2px; margin-right:0px; } .dropdown-menu .nav-link.items::after { margin-right:10px; } .nav-item { padding-left:0; .badge { position: absolute; left: 0; margin: 0; padding: 0.2rem; top: 0; } .dropdown .dropdown-menu { position:absolute; /*border: 1px solid #eee;*/ border-left: none; /*box-shadow: 1px 2px 2px #eee;*/ left: 22px; //background:var(--bs-gray-100); } .nav-item.dropdown:hover .dropdown-menu { display: block; } > ul { left:38px !important; .sub-menu { left:200px !important; } } } .dropdown-toggle::after { display:none; } } .title { display:none; } } .main { /*margin-left:50px;*/ } #user-info { i { margin:0rem 0rem 0rem 0rem; background:transparent; } span { display:none; } } } @include media-breakpoint-up(sm) { .navbar { .nav-item { margin:0.5rem 0rem; position:relative; > ul:not(.show) { display: none; /* right: 0px; */ opacity: 1; position: absolute !important; /* top: 0px; */ left: 245px !important; background: var(--bs-body-bg); box-shadow: 0px 0px 2px 1px rgba(var(--bs-body-color-rgb), 0.5); box-shadow: 2px 1px 3px 1px rgba(var(--bs-body-color-rgb), 0.1); border-right:1px solid rgba(var(--bs-body-color-rgb), 0.1); border-top:none; border-left:none; border-bottom:1px solid rgba(var(--bs-body-color-rgb),0.1); padding:0px; background-color: #fafbfc; background:-moz-linear-gradient(left, var(--bs-body-bg) 85%, #fafbfc 100%); background:-webkit-linear-gradient(left, var(--bs-body-bg) 85%, #fafbfc 100%); background:linear-gradient(left, var(--bs-body-bg) 85%, #fafbfc 100%); background:rgba(var(--bs-body-bg-rgb), 0.95); li { margin:0px; padding:0; } } .dropdown-menu.show { left: 0px !important; padding:0; padding-left:0px; /*border-left:1px solid #eee;*/ background:transparent; } &:hover { //background:#007bff; background:var(--bs-body-bg); color:var(--bs-body-color); &.heading { background:transparent; } > a { color:var(--bs-body-color); i { color:#007bff; } span:after { color:#007bff; } } > ul { display:block !important; } } } } .small-nav { .navbar { .nav-item { .show { position: absolute !important; display:none; } } } } } //mobile @media (max-width: map-get($grid-breakpoints, 'md')) { body > div#container { flex-direction: column; } .sidebar { position:static; width:100%; box-shadow:none; border-bottom:1px solid var(--bs-border-color); padding: 0.5rem 1rem 0.5rem 1rem; height:auto; float:none; .navbar { margin:0rem; padding:0rem; .navbar-collapse { margin:1rem 0rem 0rem; } .logo { display:flex; } .navbar-toggler { font-size:1.4rem; /*background:var(--bs-gray-100);*/ } .nav-item.columns-2 { .sub-menu { columns:1; } } } .logo { margin:0rem; display:none; } } .main { margin:0px; } .filters { div.btns { .mb-3 { margin-left:0rem; } } } .columns { display:block; .left-column { width:auto; } .right-column { width:auto; padding:0rem; margin:0rem; border:none; } } .actions { flex-direction: column; padding:1.5rem 0.5rem 1rem; } } //large screens /* @media (min-width: 1600px) { .sidebar { width:300px; .logo { float: none; //margin: 5rem 0rem 0 3.7rem; } .navbar { //margin: 3rem auto 0 2rem; .nav-item { > ul { left: 298px !important; } } } } .main { margin-left:300px; } } */ #main-footer { font-size:12px; padding: 0.5rem 1rem; position: fixed; bottom: 0;width: 100%; text-align: right; color:var(--bs-secondary-color); } .content-filters { font-size:12px; } .filters { //color: #999; //margin:2rem 1rem 2rem 2rem; .btn-link, a { //color: var(--bs-body-color); } .btns { text-align:right; .mb-3 { margin-left:1rem; } } label { margin-bottom: 0rem; vertical-align: middle; padding-top: .3rem; } .custom-select { /* margin: 0px; padding-left: 0px; padding-top: 0px; color: var(--bs-body-color); margin-top: 0.7rem; height: auto;*/ border:none; margin-right: 1rem; } } #filters { .card { //border:none; //background:#fafafa; border-style:dashed; margin-bottom: 2rem; //box-shadow:0px 0px 2px 1px rgba(var(--bs-body-color-rgb), 0.15); } } .pagination { .page-item { .page-link { //margin-right: 10px; } &.active .page-link { // background:#eee; } } } body.login { background:-moz-linear-gradient(top left,var(--bs-body-bg) 1%, rgba(var(--bs-secondary-color-rgb), 0.03) 100%); background:-webkit-linear-gradient(top left,var(--bs-body-bg) 1%, rgba(var(--bs-secondary-color-rgb), 0.03) 100%); background: rgba(var(--bs-tertiary-bg-rgb), 0.5); background: var(--bs-light-bg-subtle); background: rgba(var(--bs-secondary-color-rgb), 0.03); background:linear-gradient(to top right, rgba(var(--bs-secondary-color-rgb), 0.04) 1%,var(--bs-body-bg) 100%); #color-theme-switch { position: absolute; top: 12px; right: 24px; color:var(--bs-gray-500); font-size:2.1rem; padding: 3px; cursor:pointer; } } .login-container { width:100%; .logo-content { padding: 0rem 0 2.8rem; text-align:center; a { display:inline-block; html[data-bs-theme="dark"] & img { filter:brightness(5); } } } .login-form { background: var(--bs-body-bg); box-shadow:0px 3px 21px 5px rgba(var(--bs-body-color-rgb),0.02), 0px 3px 3px 0px rgba(var(--bs-body-color-rgb),0.02), rgba(var(--bs-body-color-rgb), 0.01) 0px 16px 40px 0px; border:1px solid var(--bs-secondary-bg); border-radius:8px; /*margin-bottom: 7rem;*/ form { margin:0; } .login-form-content { padding: 2rem; } .btn { padding: 0.8rem 1rem; font-weight:600; } } } @media (min-width: 768px) { .login-container { max-width: 640px; .login-form { .login-form-content { padding: 4rem 3rem; } } } } .form-control { font-size:inherit; box-shadow:rgba(var(--bs-body-color-rgb), 0.08) 0px 1px 2px 0px inset; } .login-form .mb-4 { .form-control, .input-group-append button { background: var(--bs-body-bg); min-height: 3.4rem; margin-top:0.5rem; font-size: 1.4rem; padding: 0.5rem 1rem; } .input-group .form-control { border-right:none; } .input-group-append button { border: 1px solid var(--bs-border-color); border-left:none; border-top-left-radius:0; border-bottom-left-radius:0; } .form-control { //box-shadow: 0px 0px 3px 1px rgba(var(--bs-body-color-rgb),0.03) inset; //box-shadow: none; } } .login-form .mb-3 .form-control:focus { border-color: rgba(66, 133, 244, 0.5); } .login-form .mb-3 .form-control.input-dark:-ms-input-placeholder { color: rgba(var(--bs-body-bg-rgb), 0.5); } .login-form .mb-3 .form-control.input-dark::-webkit-input-placeholder { color: rgba(var(--bs-body-bg-rgb), 0.5); } .login-form .mb-3 .form-control.input-dark::-webkit-input-placeholder { color: rgba(var(--bs-body-bg-rgb), 0.5); } .login-form .mb-3 .form-control.input-dark:-moz-placeholder { color: rgba(var(--bs-body-bg-rgb), 0.5); } .login-form .mb-3 .form-control.input-dark::-moz-placeholder { color: rgba(var(--bs-body-bg-rgb), 0.5); } .login-form .mb-3 .form-control.input-dark:-ms-input-placeholder { color: rgba(var(--bs-body-bg-rgb), 0.5); } /* select[name=visibility] option[value="public"] { } */ .grid-stack-item-content { //box-shadow:0px 3px 3px 0px rgba(var(--bs-body-color-rgb),0.05); //top:10px !important; max-height:100%; .card { /*display: block;*/ height: 100%; //height: max-content; //border:1px solid rgba(var(--bs-body-color-rgb), 0.1); --bs-card-border-color: var(--bs-border-color); .table { font-size:90%; } .btn-close { //color:inherit; right: 10px; top: 10px; position: absolute; display:none; background:none; &:hover { //color:red; } } &:hover .btn-close { display:block; } .card-title { //color:#000; cursor: grabbing; color: var(--bs-secondary); font-weight: 500; font-size: 1.2rem; } .card-body { &.info{ overflow-y:hidden; display:flex; //box-shadow:0px 1px 7px 0px rgba(var(--bs-body-color-rgb), 0.07); vertical-align: middle; align-items: center; justify-content: space-around; flex-wrap: wrap; padding: 0; } } .card-header { cursor: grabbing; //margin-bottom:1rem; } .separator { border-left: 1px dashed var(--bs-border-color); padding: 0 1rem; min-height:80px; } .card-text { border-left: 1px dashed var(--bs-secondary-border-subtle); padding-left: 1.5rem; padding-top: 0rem; vertical-align: middle; flex-grow: 1; } .icons { display: flex; vertical-align: middle; place-content: space-between; place-items: center; } } i.icon { font-size:2rem; line-height:1.6; padding: 0.2rem 1.4rem; border-radius:3px; } .number { font-size: 2rem; font-weight: 600; padding: 0 0.5rem 0 1rem; vertical-align:middle; } .card-block { overflow-y:auto; } } button.btn-close { padding: 0; background-color: transparent; border: 0; appearance: none; vertical-align:middle; } /* .btn-close { //float: right; //font-size: 1.2rem; font-weight: 700; line-height: 1; //color: #000; //text-shadow: 0 1px 0 var(--bs-gray-100); opacity: .5; } */ .editor { overflow:hidden; } .left-column, .settings { > .nav-tabs { .nav-link { padding: 0.7rem 1.2rem; text-transform:capitalize; //border-radius: 0px; color: var(--bs-body-color); --bs-nav-link-padding-y:0.7rem; --bs-nav-link-padding-x:1.4rem; } .nav-link:hover { background:var(--bs-secondary-bg) } .nav-link.active, .nav-item.show .nav-link { //color: #222; //background: linear-gradient(0deg, var(--bs-body-bg); 70%, rgba(27, 116, 208, 0.03) 100%); // box-shadow: 0px -3px 0px 1px rgb(27 116 208 / 5%); //border-top: 1px solid rgba(27, 116, 208, 0.3); } margin-bottom:0rem; } .tab-pane { padding:0.5rem; } .tab-pane[data-v-language] { padding:0; } } /*.tab-content > .tab-pane { padding-top:2rem; } */ /* .nav-tabs.flat .nav-item.active .nav-link, .nav-tabs.flat .nav-link.active, .nav-tabs.flat .nav-item.show .nav-link { border:none; border-bottom:2px solid #1e88e5; color:#1e88e5; } */ .nav-tabs .nav-item { /*margin-bottom: 0px;*/ //background-color:var(--bs-tertiary-bg); } .table.middle-align { //border:1px solid rgba(var(--bs-body-color-rgb), 0.08); //--bs-table-border-color: var(--bs-secondary-bg); --bs-table-hover-bg: var(--bs-light-bg-subtle); --bs-table-hover-bg: rgba(var(--bs-secondary-color-rgb), 0.03); --bs-table-border-color: var(--bs-light-border-subtle); thead { border-radius:2px; //box-shadow:0px 1px 1px 1px rgba(var(--bs-body-color-rgb), 0.08); th { color:var(--bs-secondary); vertical-align:middle; border-bottom-width:1px; border-top-width:1px; //border-bottom: none; vertical-align:middle; font-weight:normal; font-weight:500; font-size:13px; padding:0.7rem 0.7rem 0.7rem; border-top:none; //border-right:1px solid rgba(var(--bs-body-color-rgb), 0.05); //border-color:rgba(var(--bs-body-color-rgb), 0.05) !important; //background:#f9f9f9; i { //vertical-align:top; color:var(--bs-secondary-color); margin-right:0.3rem; } &.col-cb { width:50px; } } } tbody { /* &::before { content: ''; display: block; height: 15px; } */ td { vertical-align:middle; position:relative; //border-top-color:#eee; &.img { text-align:center; width:100px; } &.col-cb { width:50px; } &.date, &.actions { white-space:nowrap; } } } } /* table tr[data-v-product] td, table tr[data-v-post] td, table tr[data-v-menu] td { padding: 1rem 0.7rem 1rem; } */ table tr[data-v-product] td, table tr[data-v-post] td, table tr[data-v-comment] td, table tr[data-v-menu] td { position:relative; } table tr.pending { border-left:2px solid rgba($green, 0.5); background-color:rgba($green, 0.1); } table tr.spam { border-left:2px solid rgba($yellow, 0.5); background-color:rgba($yellow, 0.1); } table tr.trash { border-left:2px solid rgba($red, 0.5); background-color:rgba($red, 0.1); } table a { text-decoration:none; } /* 404 error animation */ .screen { display: flex; flex-flow: column; align-content: center; align-self: center; } .screen img { /* box-shadow:0 3px 5px -3px #000000; box-shadow:0 20px 20px -10px rgba(var(--bs-body-color-rgb), 0.7);*/ //top:-100px; max-width:90%; /* animation: 100s ease-out 0s 1 rotateearth; animation-duration: 418s; animation-timing-function: ease-out; animation-delay: 0s; animation-iteration-count: 100; animation-name: rotateearth; */ } @keyframes rotateearth { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } .btn-outline-secondary.dropdown-toggle::after { //background: $custom-select-indicator no-repeat right center; //width: 8px !important; //height: 8px !important; //border:none !important; //vertical-align:0em !important; } .dropdown-toggle::after { border:none; font-family: "Line Awesome Free"; font-weight: 900; font-size: 80%; content: "\f107"; vertical-align:text-bottom; } .btn-icon.dropdown-toggle::before { border:none; font-family: "Line Awesome Free"; font-weight: 900; font-size: 80%; content: "\f107"; vertical-align:text-bottom; } .dropdown-toggle.chevron-big::after { width: 12px !important; height: 12px !important; font-size:100%; } .invalid-feedback { font-size:1rem; } td.img img { max-height:50px; max-width:50px; } .theme td.img img, .plugin td.img img { max-height:300px; max-width:300px; } td.description { width:50%; } td figure { margin:0; } tr { td { .form-check-input { display:inline-block; position:relative; } } &.active{ .form-check-input { &::before { content: " "; background: green; width: 6px; height: 6px; display: block; position: absolute; left: 30px; top: 5px; border-radius: 3px; } } } } .table { .thumb, .author { //width:1.5%; padding:0 2rem; text-align:center; img { max-width:48px; } } [data-bs-theme="dark"] & .plugin img[src$=".svg"] { filter:invert(93%) hue-rotate(180deg); } th { font-weight:500; font-size:13px; padding:0.7rem; vertical-align:middle; } } .checkbox_outer { .custom-control { min-height:auto; } } //dashboard .grid-stack > div.grid-stack-item > div.grid-stack-item-content .card-block { overflow-y:hidden; //box-shadow:0px 1px 7px 0px rgba(var(--bs-body-color-rgb), 0.07); } .grid-stack > div.grid-stack-item > div.grid-stack-item-content:hover .card-block { overflow-y:auto; } /* .table th, .table td { border-top:none; border-bottom:1px solid #dee2e6; } */ .card-header { font-weight: 600; font-size: 12px; background: transparent; //color:#000; //border-bottom: none; } .custom-control.large { padding-left:0px; } .custom-checkbox.large .form-check-label::before, .custom-checkbox.large .form-check-label::after { top:-4px; left:-3px; width:30px; height:30px; border-color:var(--bs-body-color-rgb); } /* .modal-backdrop { background:rgba(var(--bs-body-bg-rgb),0.8); } .modal-backdrop.show { opacity:1; } */ .modal { //z-index:2060; } .toast-container, .toast { //z-index:2080; } .modal .modal-content { //transform: translateY(-60px) scale(1.1); //box-shadow: 10px 10px 60px -25px; //border: 1px solid rgba(var(--bs-body-color-rgb),0.14); //height:100%; } .modal.show .modal-content { //transform: translateY(0) scale(1); } .modal-full .modal-dialog.modal-xl { max-width:90%; } @media (min-width: 1400px) { .modal-xl { max-width: none; } } .custom-checkbox .form-check-input:indeterminate ~ .form-check-label::before { border-color: var(--bs-border-color); background-color: transparent; } .badge { font-weight: 600; vertical-align:middle; } .btn { .loading { //display:none; } &.loading { position:relative; .loading { display:block; } .button-text { display:none; } .progress-text { display: block; font-size: 70%; position: absolute; color: var(--bs-body-color); margin-bottom: 0.3rem; bottom: -30px; } } } .theme-check{ input { background-color:rgba(var(--bs-body-bg-rgb), 0.7); } } .themes { //background:var(--bs-gray-100); .list-card { position:relative; .theme-check{ position:absolute; top:0px; right:3px; z-index:2; font-size:1.4rem; input { margin:0; } } .btn-outline-primary, .btn-outline-danger { --bs-btn-border-color: var(--bs-border-color); } .card-img-top { display: flex; flex: 1 1 auto; object-fit: cover; vertical-align: middle; align-items: center; background: rgba(var(--bs-body-color-rgb), 0.02); img { margin:auto; } } .card-body { //position: absolute; bottom: 3rem; //background-color:rgba(var(--bs-body-bg-rgb), 0.9); border-top: 1px solid rgba(var(--bs-body-color-rgb), 0.1); width: 100%; flex:none; } .card-title { font-weight:normal; } .card-footer { //visibility:hidden; //position:absolute; //top:0; //width:100%; background-color:var(--bs-body-bg); border: 1px solid var(--bs-border-color); //padding-right:3rem; } &:hover .card-footer { //visibility:visible; } &.active { .card-footer { background-color:rgba(var(--bs-primary-rgb), 0.05); } .card-img-top { //border-bottom:none; } .card { //background:rgba(62, 123, 238, 1); //border:2px solid rgba(62, 123, 238, 0.7); //background:rgba(62, 123, 238, 0.1); //background:darken(var(--bs-link-color-rgb), 30%); //color:var(--bs-gray-100); border-color:var(--bs-primary-bg-subtle); a { //color:var(--bs-gray-100); } .text-muted { //color:rgba(var(--bs-body-bg-rgb),0.5) !important; } } } } } .plugins-table { &.active { tr.plugin { display:none; } tr.active { display:revert; } } &.inactive { tr.active { display:none; } } } #plugin-check { width:100%; background:var(--bs-warning-bg-subtle); } .list-card .card{ padding: 0; //font-size: 12px; border-radius: 4px; box-shadow: hsl(0, 0%, 80%) 0 0 16px; box-shadow: rgba(var(--bs-body-bg-rgb),0.1) 0 0 6px inset, rgba(var(--bs-body-color-rgb),0.2) 1px 1px 16px -6px; //border:none; border-color:var(--bs-border-color); overflow: hidden; display: -ms-flexbox; display: flex; width: 100%; height: 100%; -ms-flex-direction: column; flex-direction: column; .btn-preview { display:none; } p { overflow-wrap:anywhere; } } .list-card .card .info { float:left; } .list-card .card .buttons { float: right; } .list-card .card .card-body{ //border-top:1px solid rgba(var(--bs-body-color-rgb), 0.125); } .list-card .card .card-body .plugin-image{ max-width:128px; width:128px; margin:auto; } .list-card .card .card-img-top{ //max-height:32vh; } .list-card .card .card-footer { //opacity:0; //border-top: none; //position: absolute; //background: rgba(var(--bs-body-bg-rgb),0.9); //height: 70px; //bottom: 90px; border-color: rgba(var(--bs-body-color-rgb), 0.05); --bs-card-cap-bg: rgba(var(--bs-body-color-rgb), 0.015); .plugin-card-bottom { font-size: 85%; } } .list-card .card:hover { .card-footer { opacity:1; } .btn-preview { display:inline-block; } } .list { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: center; justify-content: center; list-style:none; } @supports (display: grid) { .list { display: -ms-grid; display: grid; //-ms-grid-columns: (minmax(320px, 1fr))[auto-fill]; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } @media only screen and (min-width: 1600px) { .list { //-ms-grid-columns: (minmax(30%, 1fr))[auto-fill]; grid-template-columns: repeat(auto-fill, minmax(30%, 1fr)); } } @media only screen and (min-width: 2100px) { .list { //-ms-grid-columns: (minmax(25%, 1fr))[auto-fill]; grid-template-columns: repeat(auto-fill, minmax(25%, 1fr)); } } } /* card area */ .list-card { -ms-flex: 1 0 30%; flex: 1 0 30%; min-width: 0; margin: 16px; } @media (min-width: 640px) { .list-card { min-width: 320px; } } #import-iframe { min-height: 500px; width:100%; height:100%; border: none; display: none; } .alert { //background: var(--bs-body-bg); !important; //color: var(--bs-body-color) !important; //border-bottom: 1px solid var(--bs-border-color); //border-top: 1px solid var(--bs-border-color); //border-right: 1px solid var(--bs-border-color); //border-radius:0; border-left-width:0.2rem; padding:0.5rem 1rem; //box-shadow:0px 0px 2px 1px rgba(var(--bs-body-color-rgb), 0.05); .icon { background: rgba(var(--bs-body-bg-rgb), 0.7); border-radius: 80%; margin-right: 1rem; padding: 0 0.5rem; align-self: center; font-size: 1.8rem; vertical-align: middle; line-height: 1; .la { line-height: 1.4; } } } .alert-info { background-color: rgba(var(--bs-info-bg-rgb), .07); --bs-alert-border-color: rgba(var(--bs-info-rgb), 0.15); //background-color: var(--bs-info-bg-subtle); //border-color: rgba(var(--bs-info-rgb), .07); } .alert-danger { background-color: rgba(var(--bs-danger-rgb), .07); --bs-alert-border-color: rgba(var(--bs-danger-rgb), 0.15); //background-color: var(--bs-danger-bg-subtle); } .alert-primary { background-color: rgba(var(--bs-primary-rgb), .07); --bs-alert-border-color: rgba(var(--bs-primary-rgb), 0.15); //background-color: var(--bs-primary-bg-subtle); } .alert-success { background-color: rgba(var(--bs-success-rgb), .07); border-color: rgba(var(--bs-success-rgb), 0.15); //background-color: var(--bs-success-bg-subtle); //border-color: var(--bs-success-border-subtle); } .alert-warning { background-color: rgba(var(--bs-warning-rgb), .07); //background-color: var(--bs-warning-bg-subtle); } .alert-light { //color: #525252; //background-color: whitesmoke; //border-color: #f0f0f0; } /* .form-check .form-check-input { position:relative; box-shadow:0px 0px 2px 1px rgba(var(--bs-body-color-rgb), 0.07) inset; } label.form-check .form-check-input { float:none; vertical-align:middle; margin-right: 0.2rem; } */ label { //font-weight:500; } strong { //font-weight:600; } .language-nav { //position:absolute; //right:0; //margin-top:-74px; margin-right:0; background: var(--bs-body-bg); justify-content: end; margin-bottom: 1rem } .dd-list .language-nav { margin-top:-0.65rem; } .pills-border { //--bs-nav-pills-link-active-color: var(--bs-link-color); //--bs-nav-pills-link-active-bg: rgba(var(--bs-body-color-rgb), 0.02); --bs-nav-link-color: var(--bs-body-color); .nav-item { margin-right: 0.3rem; //background: rgba(var(--bs-body-color-rgb), 0.02); border: 1px solid rgba(var(--bs-body-color-rgb), 0.07) !important; border-radius: 5px; /* a { color:var(--bs-body-color); &:hover { color:var(--bs-link-color); } &.active:hover { color:$white; } }*/ } label.btn { //background: rgba(var(--bs-body-color-rgb), 0.02); border: 1px solid rgba(var(--bs-body-color-rgb), 0.07); border-radius: 5px; padding:0.15rem 1em; &:hover { color:var(--bs-link-color); } } &.small { .nav-item { a { padding:0.15rem 1em; } } } } .bg-orange { /* --bs-bg-opacity: 1;*/ background-color: rgba(241, 82, 35, var(--bs-bg-opacity)) !important; } .bg-purple { /* --bs-bg-opacity: 1;*/ background-color: rgba(150, 35, 241, var(--bs-bg-opacity)) !important; } .alert .bg-info-semi i { background:rgba(13, 202, 240, 0.1); } .categories-list { max-height:200px; overflow-y:auto; overflow-x:hidden; border:1px solid var(--bs-border-color); border-radius:4px; //background:#fafafa; box-shadow:1px 1px 3px 0px rgba(var(--bs-body-color-rgb), 0.05) inset; padding:0.2rem; white-space: nowrap; resize: both; ul { list-style:none; } } /* upload collapse */ /*,.upload-collapse input[type=file]::file-selector-button */ .upload-collapse { margin: 1rem 1rem 1rem 0.5rem; padding: 0rem; border: 1px dashed var(--bs-border-color); border-radius:4px; background: var(--bs-light-bg-subtle); position: relative; min-height: 180px; h3 { padding: 2rem 4rem; } button#upload-close { position: absolute; right: 1rem; top: 1rem; z-index: 1000; } input[type=file] { position: absolute; z-index: 100; top: 0; left: 0; width: 100%; height: 100%; padding: 6rem 4rem 4rem; display: block !important; font-size: 1rem; &::-webkit-file-upload-button { visibility: hidden; } &::before { content: 'Choose files'; color: white; display: inline-block; background: gradient(top, rgba(var(--bs-link-color-rgb), 0.85), var(--bs-link-color)); background: -webkit-linear-gradient(top, rgba(var(--bs-primary-rgb), 0.75), var(--bs-primary)); border: 1px solid var(--bs-link-color-rgb); border-radius: 3px; padding: 0.5rem 1.4rem; outline: none; white-space: nowrap; -webkit-user-select: none; cursor: pointer; //text-shadow: 1px 1px var(--bs-gray-100); font-size: 1rem; //font-weight: 500; box-shadow:1px 1px 2px 1px rgba(var(--bs-body-color-rgb), 0.07), -1px 1px 2px 0px rgba(var(--bs-body-bg-rgb), 0.15) inset; } &:hover { &::before { border-color: rgba(var(--bs-link-color-rgb), 0.7); } } &:active { outline: 0; &::before { background: gradient(top, var(--bs-link-color), rgba(var(--bs-link-color-rgb), 0.85)); background: -webkit-linear-gradient(top, var(--bs-primary), rgba(var(--bs-primary-rgb), 0.75)); } } } } .menutree>ul { padding: 0; margin: 0; } .menutree li { list-style: none; padding: 7px; border-bottom: 1px solid #eee; } .menutree li:last-child { border: 0; } .menutree a { display: block; width: 100%; text-decoration: none; color: var(--bs-body-color); } .menutree label.expand-label { position: relative; display: block; width: 100%; cursor: pointer; } .menutree input[type=checkbox] { display: none; /* Hide ugly checkbox */ } /* Hide/expand by default */ li.expand>ul { visibility: hidden; opacity: 0; padding: 0; max-height: 0; /* CSS bug. Cannot animate height... */ transition: all 0.5s; } .menutree li label { margin: 0; } label.expand-label::after { font: normal normal normal 16px/1 'Line Awesome Free'; content: "\f112"; position: absolute; top: 0; right: 0; transition: all 0.5s; } /* Show when checked */ li.expand input:checked~ul { visibility: visible; opacity: 1; max-height: 999px; /* Just give a big enough height for animation */ } li.expand input:checked~label.expand-label::after { transform: rotate(90deg); } .tags-input { .badge { color:var(--bs-body-color); font-weight:normal; } } .bulk-actions { display:inline-block; } .vtooltip{ position: relative; display: inline; } .vtooltip:after{ display: block; visibility: hidden; position: absolute; bottom: 0; left: 20%; opacity: 0; content: attr(title); /* might also use attr(title) */ height: auto; min-width: 220px; padding: 15px 8px; z-index: 999; color: var(--bs-gray-100); text-decoration: none; text-align: center; background: rgba(var(--bs-body-color-rgb),0.75); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .vtooltip:before { position: absolute; visibility: hidden; width: 0; height: 0; left: 50%; bottom: 0px; opacity: 0; content: ""; border-style: solid; border-width: 6px 6px 0 6px; border-color: rgba(var(--bs-body-color-rgb),0.85) transparent transparent transparent; } .vtooltip:hover::after { visibility: visible; opacity: 1; bottom: 20px; } .table { tr:last-child td { //border-width:0; } input.form-control[type=number] { //width: 50px; } } /* .sidebar .navbar .mega-menu .sub-menu { display:block; } .sidebar .navbar .mega-menu > .sub-menu .sub-menu { position:static !important; } */ .btn-group > :not(.btn-check:first-child) + .btn, .btn-group > .btn-group:not(:first-child) { // border-left:none; } .product-images { .card { height:100%; .card-img-top { margin:auto; } } } /* order */ .billing_address, .customer_details, .shipping_address, .order_details { .display { display:block; } .edit { display:none; } &.edit { .display { display:none; } .edit { display:block; } } } .order-table { .option, .subscription { margin-top: 0.5rem; font-size: 80%; color: var(--bs-secondary); } } summary::marker { color: var(--bs-secondary-color); font-size: 12px; } summary::-webkit-details-marker { color: var(--bs-border-color); font-size: 12px; } details[open] summary { margin-bottom: 1rem; } .revisions-dropdown { font-size:0.9rem; } .breadcrumb { --bs-breadcrumb-divider-color:var(--bs-secondary-border-subtle); } //toast animation .toast { -ms-transform: translateY(20px); transform: translateY(20px); opacity: 0; display: block; visibility: hidden; transition: opacity .5s cubic-bezier(.19,1,.22,1),transform .5s cubic-bezier(.19,1,.22,1),right 0s linear .5s; &.fade { visibility:visible; display:block; } &.showing, &.show { transform: translateY(0); opacity: 1; visibility:visible; transition: opacity .5s cubic-bezier(.19,1,.22,1),transform .5s cubic-bezier(.19,1,.22,1); } &.show { visibility:visible; } } .tox .tox-edit-area__iframe { background:transparent; } .top-notifications { .dropdown-menu { columns:3; } .dropdown-item a { color:inherit; } .dropdown-divider { //overflow:unset; border:none; } [data-v-group] { display:inline-block; width:100%; //border-left:1px solid var(--bs-dropdown-divider-bg); &:last-child { .dropdown-divider { display:none; } } } } img[src="#"], img[src=""] { display: none; } #option { &.nav-pills { .nav-link { margin-bottom:0.5rem; i { float:right; line-height: 1.2; color: var(--bs-body-bg); } } .nav-link:not(.active) { border: 1px solid var(--bs-border-color); i { color: var(--bs-danger); } } } } .field-group { &.card { margin-bottom: 1rem; } > .header { font-size:1rem; border-top:none; } .section { padding: 0rem; border-top: 1px solid var(--bs-border-color); } input.header_check:checked + div.section { padding:1rem; } .header-arrow { padding: 0.2rem 0.5rem; top: 4px; } } .fields .col { align-self: center; } .field-types .dropdown-item i { background: rgba(var(--bs-body-color-rgb), 0.02); padding: 0.3rem 0.3rem; margin-right: 0.3rem; border-radius: 5px; border: 1px solid rgba(var(--bs-body-color-rgb), 0.15); } /* field groups */ .field_group { .nav-link { font-size:14px; --bs-nav-link-padding-y: 0.7rem; --bs-nav-link-padding-x: 1.5rem; } .accordion-header { position:relative; } .accordion-header .buttons { visibility:hidden; position:absolute; z-index:2; right:4rem; top:0.8rem; } .accordion-item:hover .buttons { visibility:visible; } //conditionals .rule { .btn-danger { visibility:hidden; } &:hover .btn-danger { visibility:visible; } } .nav-tabs .nav-item i[class^='icon-'] { font-size: 1.2rem; line-height: 1; margin-right: 0.5rem; color: var(--bs-secondary); } #group-conditionals .m-3 { .group { label {margin-top:0.5rem;} .group-label {display:none} .or-label {display:block} &:first-child { .group-label {display:block} .or-label {display:none} } } } } #page-loading-status { position:fixed; top:0px; left:0; width:0%; z-index: 10; --bs-progress-bg: transparent; --bs-progress-bar-bg: var(--bs-link-hover-color); --bs-progress-height: 2px; } #searchModal { .modal-content { box-shadow:0 2.8px 2.2px rgba(0,0,0,.02),0 6.7px 5.3px rgba(0,0,0,.028),0 12.5px 10px rgba(0,0,0,.035),0 22.3px 17.9px rgba(0,0,0,.042),0 41.8px 33.4px rgba(0,0,0,.05),0 100px 80px rgba(0,0,0,.07); } .modal-dialog { padding-top:8rem; } input { box-shadow:none; } .btn-close { margin-top:6.3rem; position:absolute; top:0; right:10px; z-index:100; cursor:pointer; } .search-results { padding:0 1rem; } } .modal-backdrop.show { background:linear-gradient(to right bottom, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.3)); //backdrop-filter:blur(2px); } .dropdown-menu.show { box-shadow:0 0 0 1px rgba(var(--bs-body-color-rgb),.04),0 7px 20px -5px rgba(var(--bs-body-color-rgb),.15); border:none; } img.avatar { object-fit: cover; aspect-ratio: 1 / 1; }