540 lines
7.9 KiB
SCSS
540 lines
7.9 KiB
SCSS
@import "_variables.scss";
|
|
@import "_buttons.scss";
|
|
@import "_modal.scss";
|
|
@import "_forms.scss";
|
|
@import "_virtualScroll.scss";
|
|
|
|
html, body
|
|
{
|
|
margin: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
body
|
|
{
|
|
background-color: #090b17;
|
|
color: #3d5e8e;
|
|
font-family: 'Mukta', sans-serif;
|
|
line-height: 1;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
body, div, virtual-scroller
|
|
{
|
|
scrollbar-width: thin;
|
|
scrollbar-color: #ff9c07 rgba(16, 21, 39, .3);
|
|
}
|
|
|
|
::-webkit-scrollbar
|
|
{
|
|
height: 8px;
|
|
width: 8px;
|
|
background: rgba(16, 21, 39, .5);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb
|
|
{
|
|
background: #ff9c07;
|
|
border-radius: .25rem;
|
|
}
|
|
|
|
::-webkit-scrollbar-track
|
|
{
|
|
}
|
|
|
|
.tooltip-wrap .tooltip-inner
|
|
{
|
|
white-space: pre-line;
|
|
}
|
|
|
|
.navbar-nav .nav-link
|
|
{
|
|
padding-right: .5rem;
|
|
padding-left: .5rem;
|
|
}
|
|
|
|
.text-danger
|
|
{
|
|
color: $danger-color !important;
|
|
}
|
|
|
|
.border-danger
|
|
{
|
|
border-color: $danger-color !important;
|
|
}
|
|
|
|
.text-success
|
|
{
|
|
color: $success-color !important;
|
|
}
|
|
|
|
.border-success
|
|
{
|
|
border-color: $success-color !important;
|
|
}
|
|
|
|
.badge.bg-success
|
|
{
|
|
background-color: $success-color !important;
|
|
box-shadow: 0 0 1.5rem -0.35rem $success-color;
|
|
color: #000;
|
|
}
|
|
|
|
.badge.bg-danger
|
|
{
|
|
background-color: #dc3545 !important;
|
|
box-shadow: 0 0 1.5rem -0.35rem #ff384b;
|
|
color: #000;
|
|
}
|
|
|
|
.badge.bg-light
|
|
{
|
|
background-color: #FFF !important;
|
|
box-shadow: 0 0 1.5rem -0.35rem #FFF;
|
|
color: #000;
|
|
}
|
|
|
|
.toast-container
|
|
{
|
|
padding-bottom: 2rem;
|
|
|
|
.ngx-toastr
|
|
{
|
|
box-shadow: 0 0 6px #000;
|
|
}
|
|
}
|
|
|
|
.dashboard-tabs
|
|
{
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
|
|
.dashboard-tab .nav-link
|
|
{
|
|
background: none;
|
|
border-radius: 0;
|
|
border: none;
|
|
font-family: "Varta", sans-serif;
|
|
text-align: center;
|
|
color: #0dcaf0;
|
|
width: 100%;
|
|
}
|
|
|
|
.dashboard-tab .nav-link.active
|
|
{
|
|
background: none;
|
|
border-bottom: 3px solid;
|
|
text-shadow: 0 0 0.5rem;
|
|
box-shadow: 0 -1rem 1rem -1.25rem inset;
|
|
}
|
|
|
|
.dashboard-tab.nav-item
|
|
{
|
|
flex: 1 0;
|
|
}
|
|
|
|
.nav-tabs
|
|
{
|
|
border: none;
|
|
}
|
|
|
|
.tab-content
|
|
{
|
|
flex-grow: 1;
|
|
|
|
.tab-pane
|
|
{
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tooltip-inner
|
|
{
|
|
border: 1px solid #fe6daa;
|
|
background-color: #ff4d99;
|
|
color: #FFF;
|
|
}
|
|
|
|
|
|
.bs-tooltip-top .tooltip-arrow:before
|
|
{
|
|
border-top-color: #fe6daa;
|
|
}
|
|
|
|
.dropdown-menu
|
|
{
|
|
.dropdown-item
|
|
{
|
|
padding: .5rem 1rem;
|
|
|
|
&:focus, &:hover
|
|
{
|
|
color: #1e2125;
|
|
background-color: rgba(255,255,255,.75);
|
|
}
|
|
|
|
&.active, &:active
|
|
{
|
|
color: #0dcaf0;
|
|
background-color: #101a30;
|
|
}
|
|
|
|
.ng-fa-icon
|
|
{
|
|
font-size: 1rem;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
}
|
|
|
|
.panel
|
|
{
|
|
+ .panel
|
|
{
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
.card
|
|
{
|
|
background-color: rgba(16, 21, 39, 0.75);
|
|
box-shadow: 0 0 0 2px #0b2b51, 0 0 2px 4px #0b284b, 0 0 10px 3px #0e162a;
|
|
transition: box-shadow .15s ease-out;
|
|
|
|
&:hover
|
|
{
|
|
box-shadow: 0 0 0 2px #0b2b51, 0 0 2px 4px rgba(18, 203, 240, .4), 0 0 10px 3px #0e162a;
|
|
}
|
|
|
|
.card-header
|
|
{
|
|
background-color: rgba(16, 21, 39, 0.75);
|
|
border-bottom: none;
|
|
padding: .5rem .75rem;
|
|
}
|
|
|
|
.card-body
|
|
{
|
|
padding: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.text-faded
|
|
{
|
|
opacity: .75;
|
|
}
|
|
|
|
@media (min-width: 576px)
|
|
{
|
|
.flex-grow-sm-0
|
|
{
|
|
flex-grow: 0 !important;
|
|
}
|
|
|
|
.w-sm-auto
|
|
{
|
|
width: auto !important;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 992px)
|
|
{
|
|
.w-lg-auto
|
|
{
|
|
width: auto !important;
|
|
}
|
|
}
|
|
|
|
accordion
|
|
{
|
|
.panel-heading
|
|
{
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1010;
|
|
}
|
|
}
|
|
|
|
.tooltip-inner
|
|
{
|
|
max-width: 300px;
|
|
}
|
|
|
|
.dropdown-menu, .menu-popover, .menu-dropdown
|
|
{
|
|
background: linear-gradient(135deg, #1fd1f5 0%, #00c3ea 100%);
|
|
font-family: "Varta", sans-serif;
|
|
font-size: 1.2rem;
|
|
z-index: 1020;
|
|
max-height: 60vh;
|
|
overflow: auto;
|
|
}
|
|
|
|
.dropdown-header
|
|
{
|
|
color: #11182b;
|
|
opacity: .5;
|
|
}
|
|
|
|
.menu-popover, .menu-dropdown
|
|
{
|
|
.popover-arrow
|
|
{
|
|
display: none;
|
|
}
|
|
|
|
.dropdown-header
|
|
{
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
.menu-popover
|
|
{
|
|
.dropdown-divider
|
|
{
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
.btn
|
|
{
|
|
color: #11182b;
|
|
border-color: #11182b;
|
|
|
|
&:hover, &:active
|
|
{
|
|
color: #10caf0;
|
|
background-color: #11182b;
|
|
}
|
|
|
|
&:focus
|
|
{
|
|
box-shadow: 0 0 0 0.25rem rgba(11, 172, 204, .5)
|
|
}
|
|
}
|
|
|
|
.form-control, .form-select
|
|
{
|
|
background-color: #11182b;
|
|
padding: .5rem .75rem .375rem;
|
|
}
|
|
|
|
.form-select
|
|
{
|
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ff9c07' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
|
|
}
|
|
|
|
.form-switch
|
|
{
|
|
display: inline-flex;
|
|
align-items: center;
|
|
color: #11182b;
|
|
|
|
.form-check-input
|
|
{
|
|
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'-4%20-4%208%208'%3E%3Ccircle%20r%3D'3'%20fill%3D'%2310182b'%2F%3E%3C%2Fsvg%3E");
|
|
background-color: transparent;
|
|
border-color: #0dcaf0;
|
|
margin-top: 0;
|
|
margin-right: .5rem;
|
|
box-shadow: 0 0 0 1px #10182b inset;
|
|
|
|
&:focus
|
|
{
|
|
box-shadow: 0 0 0 1px #10182b inset, 0 0 0 0.25rem rgba(11, 172, 204, .5);
|
|
}
|
|
|
|
&:checked
|
|
{
|
|
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'-4%20-4%208%208'%3E%3Ccircle%20r%3D'3'%20fill%3D'%23ff9c07'%2F%3E%3C%2Fsvg%3E");
|
|
background-color: #10182b;
|
|
border-color: #10182b;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ngx-slider
|
|
{
|
|
.ngx-slider-pointer
|
|
{
|
|
background-color: #10182c;
|
|
|
|
&:after
|
|
{
|
|
background: #14ccf1;
|
|
}
|
|
|
|
&:focus
|
|
{
|
|
outline: none;
|
|
box-shadow: 0 0 0.75rem -0.1rem #00e7ff, 0 0 0.25rem #00e7ff;
|
|
}
|
|
|
|
&.ngx-slider-active:after
|
|
{
|
|
background: #ff9c07;
|
|
}
|
|
}
|
|
|
|
.ngx-slider-selection
|
|
{
|
|
background: #ff9c07;
|
|
}
|
|
|
|
.ngx-slider-bubble
|
|
{
|
|
color: #11182b;
|
|
|
|
&.ngx-slider-limit
|
|
{
|
|
color: #1d4d5d;
|
|
}
|
|
}
|
|
|
|
.ngx-slider-tick.ngx-slider-selected
|
|
{
|
|
background: #10182c;
|
|
}
|
|
}
|
|
}
|
|
|
|
.menu-dropdown
|
|
{
|
|
overflow: hidden;
|
|
|
|
.popover-content
|
|
{
|
|
padding: .5rem 0;
|
|
}
|
|
}
|
|
|
|
.editor-form
|
|
{
|
|
.ngx-slider
|
|
{
|
|
.ngx-slider-pointer
|
|
{
|
|
background-color: #00e7ff;
|
|
|
|
&:after
|
|
{
|
|
background: #10182c;
|
|
}
|
|
|
|
&:hover:after
|
|
{
|
|
background-color: #ff9c07;
|
|
}
|
|
|
|
&:focus
|
|
{
|
|
outline: none;
|
|
box-shadow: 0 0 0.75rem -0.1rem #00e7ff, 0 0 0.25rem #00e7ff;
|
|
}
|
|
|
|
&.ngx-slider-active:after
|
|
{
|
|
background: #ff9c07;
|
|
}
|
|
}
|
|
|
|
.ngx-slider-selection
|
|
{
|
|
background: #ff9c07;
|
|
}
|
|
|
|
.ngx-slider-bar, .ngx-slider-tick
|
|
{
|
|
background: #096578;
|
|
}
|
|
|
|
.ngx-slider-bubble
|
|
{
|
|
color: #11182b;
|
|
|
|
&.ngx-slider-model-value
|
|
{
|
|
color: #ff9c07;
|
|
}
|
|
|
|
&.ngx-slider-limit
|
|
{
|
|
color: #1d4d5d;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.table
|
|
{
|
|
thead
|
|
{
|
|
font-family: "Varta", sans-serif;
|
|
font-size: 1.2rem;
|
|
color: #A3A4B8;
|
|
}
|
|
|
|
tbody
|
|
{
|
|
color: #7dbbf1;
|
|
}
|
|
|
|
th
|
|
{
|
|
background-color: rgba(16, 21, 39, 0.75);
|
|
padding: 1rem .5rem 1rem .75rem;
|
|
color: #3d5e8e;
|
|
border-bottom-color: transparent;
|
|
}
|
|
|
|
td
|
|
{
|
|
border-style: none;
|
|
vertical-align: middle;
|
|
padding-left: .75rem;
|
|
color: #8881ff;
|
|
}
|
|
|
|
&.table-hove tr:hover td
|
|
{
|
|
background-color: rgba(0, 0, 0, .5);
|
|
color: #FFF;
|
|
}
|
|
}
|
|
|
|
.select-list
|
|
{
|
|
overflow: auto;
|
|
height: 110px;
|
|
border-radius: .25rem;
|
|
padding: .25rem .5rem .5rem 0;
|
|
border: 1px solid rgba(0, 231, 255, 0.75);
|
|
background-color: rgba(16, 21, 39, .5);
|
|
transition: box-shadow 0.15s ease-out, border 0.15s ease-out;
|
|
|
|
&:focus
|
|
{
|
|
border-color: #00e7ff;
|
|
box-shadow: 0 0 0.75rem -0.1rem #00e7ff, 0 0 0.25rem #00e7ff, 0 0 0.5rem -0.25rem #00e7ff inset;
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
.no-overflow
|
|
{
|
|
overflow: hidden;
|
|
}
|
|
|
|
.list-group-item
|
|
{
|
|
border: none;
|
|
padding: .25rem 1rem;
|
|
}
|
|
|
|
.machine-brand b
|
|
{
|
|
text-transform: uppercase;
|
|
} |