268 lines
7.6 KiB
SCSS
268 lines
7.6 KiB
SCSS
$dark-text: #333;
|
|
$transparent-image: 'data:image/jpeg;base64,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';
|
|
|
|
/* Admin settings */
|
|
|
|
.colorbar {
|
|
[data-hint]:after {
|
|
width: 300px!important;
|
|
margin-left: -300px;
|
|
}
|
|
|
|
&.current-scheme, &.predefined-scheme {
|
|
padding-bottom: 10px;
|
|
|
|
span {
|
|
color: transparent;
|
|
}
|
|
}
|
|
|
|
&.predefined-scheme:hover {
|
|
cursor: pointer;
|
|
|
|
span {
|
|
color: white;
|
|
}
|
|
|
|
.light span {
|
|
color: black;
|
|
}
|
|
}
|
|
|
|
.colorbar-element-container {
|
|
width: 9rem;
|
|
float: left;
|
|
display: block;
|
|
text-align: center;
|
|
background: white;
|
|
margin-bottom: 1px;
|
|
margin-right: 1px;
|
|
//background-image: url($transparent-image);
|
|
|
|
|
|
}
|
|
|
|
.colorbar-element {
|
|
width: 100%;
|
|
text-align: center;
|
|
height: 4rem;
|
|
//border: 1px solid #ccc;
|
|
border-top: 0;
|
|
|
|
|
|
span {
|
|
font-size: .7rem;
|
|
}
|
|
|
|
color: #333;
|
|
input {
|
|
color: #333;
|
|
width: 100% !important;
|
|
}
|
|
|
|
&.light-text {
|
|
color: #fff;
|
|
& input {
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.colorbar-title {
|
|
font-size: 0.8rem;
|
|
//border: 1px solid #ccc;
|
|
font-weight: bold;
|
|
padding: 1px;
|
|
background-color: rgba(#000, 0.05);
|
|
}
|
|
|
|
input {
|
|
width: 100%;
|
|
border: none;
|
|
font-size: 0.8rem;
|
|
text-align: center;
|
|
border-radius: 0;
|
|
height: 35px;
|
|
position: absolute;
|
|
background: transparent;
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
.choose-predefined-scheme {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
// Admin preview
|
|
$ap-width: 8rem;
|
|
$ap-height: 10rem;
|
|
$nav-width: 25%;
|
|
$toolbar-height: 10%;
|
|
$ap-radius: 4px;
|
|
|
|
.admin-preview-wrapper {
|
|
display: inline-block;
|
|
width: $ap-width;
|
|
position: relative;
|
|
margin-right: 2rem;
|
|
|
|
}
|
|
.admin-preview-title {
|
|
text-align: center;
|
|
}
|
|
.admin-preview {
|
|
height: $ap-height;
|
|
position: relative;
|
|
border-radius: $ap-radius;
|
|
border-width: 2px !important;
|
|
}
|
|
|
|
.ap-overlay {
|
|
cursor: pointer;
|
|
opacity: 0;
|
|
position: absolute;
|
|
top:0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
border-radius: $ap-radius;
|
|
z-index: 2;
|
|
text-align: center;
|
|
transition: opacity .4s ease;
|
|
&:hover {
|
|
opacity: 1;
|
|
background: rgba(0,0,0,0.4);
|
|
}
|
|
b {
|
|
display: inline-block;
|
|
font-weight: normal;
|
|
margin-top: ($ap-height / 2) - 1rem;
|
|
background: #111;
|
|
color: #bbb;
|
|
border-radius: $ap-radius;
|
|
padding: 4px 10px;
|
|
&:hover {
|
|
color: #fff;
|
|
background: #000
|
|
}
|
|
}
|
|
}
|
|
.ap-sidebar {
|
|
position: absolute;
|
|
width: $nav-width;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
}
|
|
.ap-logo {
|
|
height: 10%;
|
|
text-align: center;
|
|
&::after {
|
|
display: block;
|
|
position: relative;
|
|
top: 50%;
|
|
margin: 0 auto;
|
|
transform: translateY(-50%);
|
|
content: '';
|
|
height: 8px;
|
|
width: 25%;
|
|
}
|
|
}
|
|
.ap-nav {
|
|
padding: 5px 10px;
|
|
}
|
|
.ap-text, .ap-text::before, .ap-text::after {
|
|
margin-top: 4px;
|
|
position: relative;
|
|
display: block;
|
|
margin-bottom: 3px;
|
|
height: 2px;
|
|
content: '';
|
|
}
|
|
.ap-text::before {
|
|
margin-top: 0;
|
|
top: 7px;
|
|
}
|
|
.ap-text::after {
|
|
margin-top: 0;
|
|
top: 9px;
|
|
}
|
|
.ap-active {
|
|
display: block;
|
|
margin: 19px -10px 0;
|
|
margin-bottom: 5px;
|
|
padding: 5px 10px 5px 7px;
|
|
border-left-width: 3px;
|
|
border-left-style: solid;
|
|
&::after {
|
|
display: block;
|
|
content: '';
|
|
height: 2px;
|
|
}
|
|
}
|
|
.ap-toolbar {
|
|
position: absolute;
|
|
left: $nav-width;
|
|
right: 0;
|
|
height: $toolbar-height;
|
|
padding: 0 10px;
|
|
&::after {
|
|
display: block;
|
|
position: relative;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
content: '';
|
|
width: 33%;
|
|
height: 4px;
|
|
}
|
|
}
|
|
.ap-button {
|
|
float: right;
|
|
position: relative;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
height: 8px;
|
|
width: 25px;
|
|
}
|
|
.ap-page {
|
|
position: absolute;
|
|
top: $toolbar-height;
|
|
left: $nav-width;
|
|
right: 0;
|
|
bottom: 0;
|
|
padding: 10px;
|
|
}
|
|
.ap-content {
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.ap-title {
|
|
display: block;
|
|
height: 4px;
|
|
width: 25%;
|
|
margin: 8px 10px 5px;
|
|
}
|
|
.ap-content {
|
|
.ap-text {
|
|
margin-left: 10px;
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
.ap-update, .ap-notice, .ap-critical {
|
|
margin-top: 19px;
|
|
display: block;
|
|
content: '';
|
|
padding: 5px 10px;
|
|
&::after {
|
|
display: block;
|
|
content: '';
|
|
height: 2px;
|
|
width: 50%;
|
|
}
|
|
}
|
|
.ap-update {
|
|
margin-top: 3px;
|
|
}
|