VvebOIDC/public/admin/default/scss/admin.scss

3616 lines
60 KiB
SCSS

//$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;
}