wiki-grav/plugins/admin/themes/grav/scss/template/_whitelabel.scss
2022-04-24 14:32:58 +02:00

269 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;
}