1751 lines
37 KiB
SCSS
Executable file
1751 lines
37 KiB
SCSS
Executable file
// Load Third Party Libraries
|
|
@import "configuration/template/base";
|
|
@import "template/modules/bourbon_essentials";
|
|
@import "template/modules/buttons";
|
|
|
|
// Logo
|
|
$logo-bg: #323640 !default;
|
|
$logo-link: #FFFFFF !default;
|
|
|
|
// Nav
|
|
$nav-bg: #3D424E !default;
|
|
$nav-text: #B7B9BD !default;
|
|
$nav-link: #ffffff !default;
|
|
$nav-selected-bg: #323640 !default;
|
|
$nav-selected-link: #ffffff !default;
|
|
$nav-hover-bg: #434753 !default;
|
|
$nav-hover-link: #ffffff !default;
|
|
|
|
// Toolbar
|
|
$toolbar-bg: #ffffff !default;
|
|
$toolbar-text: #3D424E !default;
|
|
|
|
// Page
|
|
$page-bg: #F6F6F6 !default;
|
|
$page-text: #6f7b8a !default;
|
|
$page-link: #0090D9 !default;
|
|
|
|
// Content
|
|
$content-bg: #ffffff !default;
|
|
$content-text: #6f7b8a !default;
|
|
$content-link: #0090D9 !default;
|
|
$content-link2: #da4b46 !default;
|
|
$content-header: #414147 !default;
|
|
$content-tabs-bg: #e3e3e3 !default;
|
|
$content-tabs-text: #808080 !default;
|
|
|
|
// Buttons
|
|
$button-bg: #0090D9 !default;
|
|
$button-text: #ffffff !default;
|
|
|
|
// Notice
|
|
$notice-bg: #06A599 !default;
|
|
$notice-text: #ffffff !default;
|
|
|
|
// Updates
|
|
$update-bg: #77559D !default;
|
|
$update-text: #ffffff !default;
|
|
|
|
// Critical
|
|
$critical-bg: #F45857 !default;
|
|
$critical-text: #ffffff !default;
|
|
|
|
// Calculated values
|
|
$primary-accent: button !default;
|
|
$secondary-accent: notice !default;
|
|
$tertiary-accent: critical !default;
|
|
|
|
// Initial values
|
|
$primary-accent-bg: $notice-bg;
|
|
$primary-accent-fg: $notice-text;
|
|
$secondary-accent-bg: $notice-bg;
|
|
$secondary-accent-fg: $notice-text;
|
|
$tertiary-accent-bg: $notice-bg;
|
|
$tertiary-accent-fg: $notice-text;
|
|
|
|
$element-map: (
|
|
button: $button-bg $button-text,
|
|
notice: $notice-bg $notice-text,
|
|
content: $content-bg $content-text,
|
|
tabs: $content-tabs-bg $content-tabs-text,
|
|
update: $update-bg $update-text,
|
|
critical: $critical-bg $critical-text,
|
|
page: $page-bg $page-text,
|
|
nav: $nav-bg $nav-text,
|
|
toolbar: $toolbar-bg $toolbar-text,
|
|
logo: $logo-bg $logo-link
|
|
);
|
|
|
|
// Set based on configuration
|
|
@each $element, $element-parts in $element-map {
|
|
@if $primary-accent == $element {
|
|
$primary-accent-bg: nth($element-parts, 1);
|
|
$primary-accent-fg: nth($element-parts, 2);
|
|
}
|
|
}
|
|
|
|
@each $element, $element-parts in $element-map {
|
|
@if $secondary-accent == $element {
|
|
$secondary-accent-bg: nth($element-parts, 1);
|
|
$secondary-accent-fg: nth($element-parts, 2);
|
|
}
|
|
}
|
|
|
|
@each $element, $element-parts in $element-map {
|
|
@if $tertiary-accent == $element {
|
|
$tertiary-accent-bg: nth($element-parts, 1);
|
|
$tertiary-accent-fg: nth($element-parts, 2);
|
|
}
|
|
}
|
|
|
|
$form-border: #f00;
|
|
$form-field-bg: #00f;
|
|
$form-field-text: #0f0;
|
|
$underline: #ff0;
|
|
$subtle-text: #0ff;
|
|
$ir-slider-bg: #f0f;
|
|
|
|
@if (lightness($content-bg) < 50) {
|
|
$form-border: lighten($content-bg, 15%);
|
|
$form-field-bg: lighten($content-bg, 1%);
|
|
$ir-slider-bg: lighten($content-bg, 2%);
|
|
$form-field-text: lighten($content-text, 5%);
|
|
$underline: lighten($content-bg, 3%);
|
|
$subtle-text: darken($content-text, 10%);
|
|
} @else {
|
|
$form-border: darken($content-bg, 10%);
|
|
$form-field-bg: darken($content-bg, 1%);
|
|
$ir-slider-bg: darken($content-bg, 2%);
|
|
$form-field-text: darken($content-text, 5%);
|
|
$underline: darken($content-bg, 3%);
|
|
$subtle-text: lighten($content-text, 10%);
|
|
}
|
|
|
|
$form-border-width: 1px;
|
|
|
|
// Core
|
|
body {
|
|
background: $page-bg;
|
|
color: $page-text;
|
|
}
|
|
|
|
a {
|
|
color: $page-link;
|
|
&:hover {
|
|
color: darken($page-link, 5%);
|
|
}
|
|
}
|
|
|
|
.text-gray, .text-grey {
|
|
color: $nav-text;
|
|
}
|
|
|
|
.text-update {
|
|
color: $update-bg;
|
|
}
|
|
|
|
// Typography
|
|
blockquote {
|
|
border-left: 10px solid darken($content-bg, 10%);
|
|
background: darken($content-bg, 2%);
|
|
p {
|
|
color: darken($page-text, 5%);
|
|
}
|
|
cite {
|
|
color: $page-text;
|
|
}
|
|
}
|
|
|
|
code {
|
|
background: $code-bg;
|
|
color: darken($code-text,10%);
|
|
}
|
|
|
|
pre {
|
|
background: $pre-bg;
|
|
border: 1px solid $core-border-color;
|
|
code {
|
|
color: $pre-text;
|
|
}
|
|
}
|
|
|
|
hr {
|
|
border-bottom: 2px solid $underline;
|
|
}
|
|
|
|
.label {
|
|
background: $page-link;
|
|
color: $white;
|
|
}
|
|
|
|
.badge {
|
|
background: $update-bg;
|
|
color: $update-text;
|
|
}
|
|
|
|
.light-border {
|
|
border-color: $underline !important;
|
|
}
|
|
|
|
.subtle-text {
|
|
color: $subtle-text !important;
|
|
}
|
|
|
|
// Tables
|
|
td, thead th {
|
|
border-bottom: 1px solid $underline;
|
|
}
|
|
|
|
tr {
|
|
td {
|
|
&.gpm-details {
|
|
background-color: darken($content-bg,2%);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Tabs
|
|
.tab-bar {
|
|
background: $content-tabs-bg;
|
|
color: $content-tabs-text;
|
|
|
|
li {
|
|
&.active {
|
|
span, a {
|
|
background: $content-bg;
|
|
color: $content-text;
|
|
}
|
|
}
|
|
}
|
|
|
|
span, a {
|
|
color: $content-tabs-text;
|
|
&:hover {
|
|
color: lighten($content-tabs-text, 10%);
|
|
background: lighten($content-tabs-bg,10%);
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Buttons
|
|
.button {
|
|
@include button-color($button-bg);
|
|
|
|
&.dropdown-toggle {
|
|
border-left: 1px solid darken($button-bg, 5%);
|
|
}
|
|
|
|
&.secondary {
|
|
@include button-color(shade($button-bg, 20%));
|
|
|
|
&.dropdown-toggle {
|
|
border-left: 1px solid darken(shade($button-bg, 20%), 5%);
|
|
}
|
|
}
|
|
|
|
&.danger {
|
|
@include button-color($critical-bg);
|
|
}
|
|
}
|
|
|
|
.button-group {
|
|
.dropdown-menu {
|
|
background-color: $button-bg;
|
|
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
|
|
|
|
.divider {
|
|
background-color: $button-bg;
|
|
}
|
|
|
|
li > a {
|
|
color: $button-text;
|
|
|
|
&:focus, &:hover {
|
|
color: $button-text;
|
|
&:hover {
|
|
background: tint($button-bg,15%);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.language-switcher {
|
|
a.active {
|
|
background-color: lighten($button-bg, 10%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#admin-main .admin-block a.gumroad-button {
|
|
background: $critical-bg !important;
|
|
color: $critical-text !important;
|
|
}
|
|
|
|
|
|
#admin-login-wrapper {
|
|
background: radial-gradient(circle at center, lighten($nav-bg, 10%) 40%, darken($nav-bg, 10%) 100%);
|
|
}
|
|
|
|
#admin-login {
|
|
background: $nav-bg;
|
|
|
|
&.wide form {
|
|
|
|
label {
|
|
color: $nav-text;
|
|
}
|
|
|
|
input {
|
|
|
|
@include placeholder {
|
|
color: rgba($nav-text, 0.6);
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.wrapper-spacer {
|
|
h3 {
|
|
color: rgba(white, 0.4);
|
|
border-bottom: 3px solid rgba($nav-link, 0.1);
|
|
}
|
|
}
|
|
|
|
.instructions, p {
|
|
color: rgba($nav-text,0.8);
|
|
}
|
|
|
|
h1 {
|
|
background-color: $logo-bg;
|
|
|
|
&.text-logo {
|
|
color: $logo-link;
|
|
}
|
|
|
|
svg {
|
|
path:first-child {
|
|
fill: darken($logo-bg, 3%);
|
|
}
|
|
path:last-child {
|
|
fill: rgba($logo-link, 0.9) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
h5 {
|
|
color: $nav-text;
|
|
}
|
|
|
|
form {
|
|
input {
|
|
background: lighten($nav-bg, 3%);
|
|
color: $nav-link;
|
|
border: 1px solid shade($nav-bg, 20%);
|
|
@include placeholder {
|
|
@if (lightness($nav-bg) < 50) {
|
|
color: shade($nav-text, 15%);
|
|
} @else {
|
|
color: tint($nav-text, 15%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#admin-sidebar {
|
|
background: $nav-bg;
|
|
a {
|
|
color: rgba($nav-link, 0.9);
|
|
&:hover {
|
|
color: $nav-link;
|
|
}
|
|
}
|
|
}
|
|
|
|
#admin-logo {
|
|
background-color: $logo-bg;
|
|
|
|
.grav-logo {
|
|
path {
|
|
fill: rgba($logo-link, 0.9) !important;
|
|
}
|
|
|
|
&:hover {
|
|
path {
|
|
fill: $logo-link !important;
|
|
}
|
|
}
|
|
}
|
|
a, i {
|
|
color: shade($logo-link, 10%);
|
|
&:hover {
|
|
color: $logo-link;
|
|
}
|
|
}
|
|
}
|
|
|
|
#open-handle {
|
|
background-color: darken($logo-bg, 5%);
|
|
border-left: 1px solid lighten($logo-bg, 5%);
|
|
|
|
i {
|
|
color: rgba($logo-link, 0.6);
|
|
&:hover {
|
|
color: rgba($logo-link, 0.8);
|
|
}
|
|
}
|
|
}
|
|
|
|
#admin-nav-quick-tray {
|
|
background: darken($nav-bg, 2%);
|
|
border-bottom: 1px solid darken($nav-bg, 3%);
|
|
color: $nav-link;
|
|
|
|
i:hover {
|
|
@if (lightness($nav-bg) < 50) {
|
|
color: lighten($nav-link, 10%);
|
|
} @else {
|
|
color: darken($nav-link, 10%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.block-userinfo {
|
|
img {
|
|
border: 4px solid $form-border;
|
|
}
|
|
}
|
|
#offline-status {
|
|
background-color: $update-bg;
|
|
color: $update-text;
|
|
}
|
|
|
|
#admin-user-details, .admin-user-details {
|
|
border-bottom: 1px solid lighten($nav-bg, 5%);
|
|
|
|
&:hover img {
|
|
box-shadow: 0px 0px 0 50px lighten($nav-bg, 3%);
|
|
}
|
|
|
|
.admin-user-names {
|
|
h4, h5 {
|
|
color: $nav-link;
|
|
}
|
|
}
|
|
}
|
|
|
|
#admin-menu {
|
|
li {
|
|
.badges {
|
|
.count {
|
|
color: $nav-link;
|
|
background-color: darken($nav-bg, 5%);
|
|
|
|
}
|
|
|
|
.updates {
|
|
color: $notice-text;
|
|
background-color: $notice-bg;
|
|
}
|
|
}
|
|
|
|
a {
|
|
&:hover {
|
|
background: $nav-hover-bg;
|
|
color: $nav-hover-link;
|
|
|
|
.fa {
|
|
color: $nav-hover-link;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.selected {
|
|
a {
|
|
background: $nav-selected-bg;
|
|
color: $nav-selected-link;
|
|
border-left: 9px solid shade($button-bg, 15%);
|
|
|
|
.fa {
|
|
color: $nav-selected-link;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#admin-main {
|
|
|
|
.grav-update {
|
|
background: $update-bg;
|
|
color: $update-text;
|
|
a.button, span.button, button.button {
|
|
@include button-color(shade($update-bg, 20%), $update-text, true);
|
|
}
|
|
}
|
|
|
|
.titlebar {
|
|
background: $toolbar-bg;
|
|
color: $toolbar-text;
|
|
.button-bar {
|
|
.button {
|
|
@include button-color($button-bg, $button-text, false);
|
|
}
|
|
}
|
|
}
|
|
|
|
.lines-button {
|
|
background: rgba($black, 0.1); // move this
|
|
.lines, .lines:before, .lines:after {
|
|
background: $toolbar-text;
|
|
}
|
|
}
|
|
|
|
.admin-block {
|
|
background: $content-bg;
|
|
color: $content-text;
|
|
|
|
a:not(.button) {
|
|
color: $content-link;
|
|
&:hover {
|
|
color: darken($content-link, 5%);
|
|
}
|
|
}
|
|
|
|
h1 {
|
|
color: $content-header;
|
|
border-bottom: 1px solid $underline;
|
|
}
|
|
|
|
//.button {
|
|
// @include button-color($button-bg);
|
|
//}
|
|
}
|
|
|
|
.danger, .success {
|
|
&.button-bar {
|
|
background: darken($content-bg, 3%);
|
|
}
|
|
}
|
|
|
|
.danger {
|
|
.button {
|
|
@include button-color($critical-bg);
|
|
}
|
|
}
|
|
|
|
// Notifications
|
|
.content-padding {
|
|
div[class*=notifications-container] {
|
|
|
|
.alert.note {
|
|
background: $content-bg;
|
|
color: $content-text;
|
|
|
|
&.alert {
|
|
border-bottom: 2px solid darken($content-bg, 5%);
|
|
}
|
|
|
|
a:not(.button) {
|
|
color: $content-link;
|
|
&:hover {
|
|
color: darken($content-link, 5%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.alert.warning {
|
|
background: $critical_bg;
|
|
color: $critical_text;
|
|
|
|
&.alert {
|
|
border-bottom: 2px solid darken($critical_bg, 5%);
|
|
}
|
|
|
|
a {
|
|
color: $critical_text;
|
|
&:hover {
|
|
color: lighten($critical_text, 10%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#notifications {
|
|
.badge.alert {
|
|
&.note {
|
|
background: $content_link;
|
|
color: $content_bg;
|
|
}
|
|
&.warning {
|
|
background: $critical_bg;
|
|
color: $critical_text;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.sidebar-mobile-open {
|
|
#admin-main {
|
|
.lines-button {
|
|
.lines, .lines:before, .lines:after {
|
|
background: $logo-link;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#admin-dashboard {
|
|
|
|
.admin-block {
|
|
li {
|
|
border-bottom: 1px solid $underline;
|
|
}
|
|
}
|
|
|
|
.dashboard-item {
|
|
|
|
}
|
|
|
|
.primary-accent {
|
|
@include linear-gradient(darken($primary-accent-bg, 7%), $primary-accent-bg);
|
|
|
|
h1 {
|
|
color: $white;
|
|
border-bottom: 0;
|
|
}
|
|
|
|
p {
|
|
color: rgba($primary-accent-fg, 0.95);
|
|
}
|
|
.stat {
|
|
i {
|
|
color: rgba($primary-accent-fg, 0.75);
|
|
}
|
|
}
|
|
.numeric {
|
|
em {
|
|
color: rgba($primary-accent-fg, .85);
|
|
}
|
|
}
|
|
|
|
.chart-loader {
|
|
color: shade($primary-accent-bg, 20%);
|
|
}
|
|
}
|
|
|
|
.secondary-accent {
|
|
@include linear-gradient(darken($secondary-accent-bg, 7%), $secondary-accent-bg);
|
|
|
|
h1 {
|
|
color: $white;
|
|
border-bottom: 0;
|
|
}
|
|
|
|
p {
|
|
color: rgba($secondary-accent-fg, 0.95);
|
|
}
|
|
.stat {
|
|
i {
|
|
color: rgba($secondary-accent-fg, 0.75);
|
|
}
|
|
}
|
|
.numeric {
|
|
em {
|
|
color: rgba($secondary-accent-fg, .85);
|
|
}
|
|
}
|
|
|
|
.chart-loader {
|
|
color: shade($secondary-accent-bg, 20%);
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.sidebar-mobile-open {
|
|
#admin-main {
|
|
.lines-button {
|
|
.lines, .lines:before, .lines:after {
|
|
background: $logo-link;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Forms
|
|
form {
|
|
h1, h3 {
|
|
border-bottom: 3px solid $underline;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5 {
|
|
color: $content-header;
|
|
}
|
|
|
|
.note {
|
|
color: $critical-bg;
|
|
}
|
|
|
|
.required {
|
|
color: $content-link2;
|
|
}
|
|
|
|
.overlay {
|
|
background: darken($content-bg, 2%);
|
|
|
|
pre {
|
|
background: lighten($pre-bg, 3%);
|
|
}
|
|
}
|
|
|
|
.form-border {
|
|
border: 1px solid $form-border;
|
|
}
|
|
|
|
.form-field-colors {
|
|
background-color: $form-field-bg;
|
|
color: $form-field-text;
|
|
}
|
|
|
|
.form-select-wrapper, .selectize-control.single .selectize-input {
|
|
&:after {
|
|
color: lighten($content-text, 15%);
|
|
}
|
|
}
|
|
|
|
.selectize-control {
|
|
&.single, &.multi {
|
|
.selectize-input {
|
|
&, &.full, &.items, &.active {
|
|
color: $form-field-text;
|
|
border-color: $form-border;
|
|
background-color: $form-field-bg;
|
|
}
|
|
input {
|
|
color: $form-field-text;
|
|
}
|
|
|
|
a.remove {
|
|
color: $page-bg !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.form-input-wrapper {
|
|
.form-input-addon {
|
|
border: 1px solid $form-border;
|
|
background: $content-bg;
|
|
|
|
&.copy-to-clipboard {
|
|
background: $button-bg;
|
|
color: $button-text;
|
|
|
|
&:hover {
|
|
background: darken($button-bg, 5%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.selectize-control.single.plugin-remove_button .selectize-input,
|
|
.selectize-control.multi .selectize-input {
|
|
.item, .remove-single {
|
|
color: $content-bg !important;
|
|
background: $content-text;
|
|
&.active {
|
|
background: $notice-bg;
|
|
color: $notice-text;
|
|
}
|
|
}
|
|
}
|
|
|
|
select {
|
|
border: $form-border-width solid $form-border;
|
|
background: $form-field-bg;
|
|
color: $form-field-text;
|
|
}
|
|
|
|
input[type=text],
|
|
input[type=password],
|
|
input[type=email],
|
|
input[type=date],
|
|
input[type=tel],
|
|
input[type=time],
|
|
input[type=week],
|
|
input[type=month],
|
|
input[type=number],
|
|
input[type=color],
|
|
input[type=url] {
|
|
border: $form-border-width solid $form-border;
|
|
background: $form-field-bg;
|
|
color: $form-field-text;
|
|
}
|
|
|
|
input[readonly=readonly] {
|
|
background: $content-bg;
|
|
}
|
|
|
|
textarea {
|
|
color: $form-field-text;
|
|
border: $form-border-width solid $form-border;
|
|
background: $form-field-bg;
|
|
}
|
|
|
|
.form-frontmatter-wrapper {
|
|
border: $form-border-width solid $form-border;
|
|
}
|
|
|
|
.button-bar {
|
|
background: lighten($form-border,7%);
|
|
}
|
|
|
|
.checkboxes {
|
|
label:before {
|
|
background: $form-field-bg;
|
|
border: $form-border-width solid $form-border;
|
|
}
|
|
}
|
|
|
|
input, textarea, select {
|
|
@include placeholder {
|
|
@if (lightness($form-field-bg) < 50) {
|
|
color: darken($form-field-text, 25%);
|
|
} @else {
|
|
color: lighten($form-field-text, 25%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.g-colorpicker {
|
|
width: 230px;
|
|
.g-colorpicker-preview-wrap {
|
|
border-color: $form-border;
|
|
height: 43px;
|
|
width: 43px;
|
|
}
|
|
input {
|
|
height: 43px;
|
|
}
|
|
|
|
}
|
|
|
|
.form-input-file {
|
|
border: 2px dashed $form-border;
|
|
|
|
p {
|
|
color: $form-field-text;
|
|
}
|
|
|
|
ul {
|
|
color: $primary-accent-fg;
|
|
background: $primary-accent-bg;
|
|
}
|
|
}
|
|
|
|
.file-thumbnail-remove {
|
|
background: $button-bg;
|
|
|
|
.fa {
|
|
color: $button-text;
|
|
}
|
|
|
|
&:hover {
|
|
background: $button-text;
|
|
.fa {
|
|
color: $button-bg;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Range
|
|
input[type=range] {
|
|
&::-webkit-slider-runnable-track {
|
|
background: $ir-slider-bg;
|
|
border: 1px solid $form-border;
|
|
}
|
|
&::-webkit-slider-thumb {
|
|
border: 1px solid $form-border;
|
|
background: $button-bg;
|
|
}
|
|
&:focus::-webkit-slider-runnable-track {
|
|
background: $ir-slider-bg;
|
|
}
|
|
&::-moz-range-track {
|
|
background: $ir-slider-bg;
|
|
border: 1px solid $form-border;
|
|
}
|
|
&::-moz-range-progress {
|
|
background: $ir-slider-bg;
|
|
}
|
|
&::-moz-range-thumb {
|
|
border: 1px solid $form-border;
|
|
background: $button-bg;
|
|
}
|
|
&::-ms-fill-lower, &::-ms-fill-upper {
|
|
background: $ir-slider-bg;
|
|
border: 1px solid $form-border;
|
|
}
|
|
&::-ms-thumb {
|
|
border: 1px solid $form-border;
|
|
background: $button-bg;
|
|
}
|
|
&:focus::-ms-fill-lower, &:focus::-ms-fill-upper {
|
|
background: $ir-slider-bg;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Display RESET
|
|
form {
|
|
.form-display-wrapper {
|
|
|
|
table {
|
|
border: 1px solid $form-border;
|
|
|
|
th {
|
|
background-color: lighten($form-border, 6%);
|
|
border-bottom: 3px solid $form-border;
|
|
border-right: 1px solid $form-border;
|
|
}
|
|
|
|
td {
|
|
border-right: 1px solid $form-border;
|
|
}
|
|
|
|
tr {
|
|
border-bottom: 1px solid $form-border;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
|
|
.grav-editor-resizer {
|
|
background-color: rgba(213,213,213,1);
|
|
@include linear-gradient(top, rgba(213,213,213,1) 0%, rgba(213,213,213,1) 20%, rgba(237,237,237,1) 20%, rgba(237,237,237,1) 40%, rgba(213,213,213,1) 40%, rgba(213,213,213,1) 60%, rgba(237,237,237,1) 60%, rgba(237,237,237,1) 80%, rgba(213,213,213,1) 80%, rgba(213,213,213,1) 100%);
|
|
}
|
|
|
|
.form-order-wrapper {
|
|
ul.orderable {
|
|
|
|
li {
|
|
border: 1px solid $form-border;
|
|
background: lighten($content-bg, 2%);
|
|
color: $content-text;
|
|
|
|
&.drag-handle {
|
|
background: $form-field-bg;
|
|
color: $form-field-text;
|
|
}
|
|
|
|
&[data-active-id] {
|
|
border-color: $content-link;
|
|
}
|
|
|
|
}
|
|
|
|
&.disabled li {
|
|
opacity: 0.7;
|
|
}
|
|
}
|
|
}
|
|
|
|
.form-list-wrapper {
|
|
ul[data-collection-holder] {
|
|
> li {
|
|
border: 1px solid $form-border;
|
|
background: lighten($content-bg, 4%);
|
|
color: lighten($content-text, 10%);
|
|
|
|
.item-actions {
|
|
color: darken($content-text, 10%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.collection-sort {
|
|
background: darken($content-bg, 2%);
|
|
border-right: 1px solid $form-border;
|
|
}
|
|
}
|
|
|
|
.form-fieldset {
|
|
background-color: darken($content-bg, 1%);
|
|
border: 1px solid $form-border;
|
|
}
|
|
|
|
.form-fieldset--label {
|
|
background-color: darken($content-bg, 4%);
|
|
|
|
&:hover,
|
|
.form-fieldset input:checked + & {
|
|
background-color: darken($content-bg, 6%);
|
|
}
|
|
}
|
|
#admin-main {
|
|
|
|
#admin-topbar {
|
|
background: $content-tabs-bg;
|
|
}
|
|
|
|
.form-tabs {
|
|
background: $content-tabs-bg;
|
|
|
|
&.side-tabs {
|
|
> .tabs-nav {
|
|
background: $content-bg;
|
|
|
|
a {
|
|
color: $content-link;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
background: $page-bg;
|
|
}
|
|
&.active {
|
|
background: lighten($content-tabs-bg, 5%);
|
|
color: $content-tabs-text;
|
|
}
|
|
}
|
|
}
|
|
|
|
> .tabs-content {
|
|
box-shadow: -20px 0 50px -40px rgba(#000, 0.3);
|
|
}
|
|
}
|
|
|
|
.tabs-nav {
|
|
a {
|
|
color: $content-tabs-text;
|
|
&:hover {
|
|
color: darken($content-tabs-text, 5%);
|
|
background: darken($content-tabs-bg,5%);
|
|
}
|
|
|
|
&.active {
|
|
background: $content-bg;
|
|
color: $content-text;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.subtle {
|
|
background: $content-bg;
|
|
|
|
.tabs-nav {
|
|
background: linear-gradient(to bottom, rgba($content-bg,0), shade($content-bg,3%));
|
|
}
|
|
|
|
a {
|
|
color: shade($content-text, 10%);
|
|
border: 0 solid transparent;
|
|
|
|
&:hover {
|
|
color: shade($content-text, 20%);
|
|
background: linear-gradient(to bottom, rgba($content-bg,0), shade($content-bg,7%));
|
|
}
|
|
|
|
border-bottom: 1px solid $form-border;
|
|
|
|
&.active {
|
|
border-top: 1px solid $form-border;
|
|
border-left: 1px solid $form-border;
|
|
border-right: 1px solid $form-border;
|
|
border-bottom: 0;
|
|
|
|
&:hover {
|
|
background: $content-bg;
|
|
}
|
|
|
|
&:first-child {
|
|
border-left: 0;
|
|
}
|
|
|
|
&:last-child {
|
|
border-right: 0;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.tabs-content {
|
|
background: $content-bg;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
.switch-grav {
|
|
background-color: $form-field-bg;
|
|
border: $form-border-width solid $form-border;
|
|
|
|
label {
|
|
color: $content-text;
|
|
transition: background-color 0.5s ease;
|
|
}
|
|
|
|
&.switch-toggle input.highlight:checked + label {
|
|
background: $button-bg;
|
|
color: $button-text;
|
|
}
|
|
|
|
&.switch-toggle input:checked + label {
|
|
color: $content-bg;
|
|
background: $content-text;
|
|
}
|
|
|
|
}
|
|
|
|
// Toaster
|
|
.toast {
|
|
background-color: #030303;
|
|
}
|
|
.toast-success {
|
|
background-color: $update-bg;
|
|
|
|
.button {
|
|
background: lighten($update-bg, 5%);
|
|
@include button-color(lighten($update-bg, 10%));
|
|
}
|
|
|
|
}
|
|
.toast-error {
|
|
background-color: $critical-bg;
|
|
|
|
.button {
|
|
background-color: darken($critical-bg, 10);
|
|
@include button-color(darken($critical-bg, 20));
|
|
}
|
|
}
|
|
.toast-info {
|
|
background-color: $notice-bg;
|
|
|
|
.button {
|
|
background-color: darken($notice-bg, 10);
|
|
@include button-color(darken($notice-bg, 20));
|
|
}
|
|
}
|
|
|
|
// Info
|
|
.info {
|
|
background: $update-bg;
|
|
color: $update-text;
|
|
|
|
a {
|
|
color: darken($update-text, 10%);
|
|
&:hover {
|
|
color: $update-text;
|
|
}
|
|
}
|
|
|
|
a.button, span.button, button.button {
|
|
@include button-color(shade($update-bg, 20%), $update-text, true);
|
|
}
|
|
}
|
|
|
|
.info-reverse {
|
|
color: $update-bg;
|
|
}
|
|
|
|
.notice, .note {
|
|
background: $notice-bg;
|
|
color: $notice-text;
|
|
|
|
a {
|
|
color: darken($notice-text, 10%);
|
|
&:hover {
|
|
color: $notice-text;
|
|
}
|
|
}
|
|
|
|
a.button, span.button, button.button {
|
|
@include button-color(shade($notice-bg, 20%), $notice-text, true);
|
|
}
|
|
}
|
|
|
|
.notice-reverse, .note-reverse {
|
|
color: $notice-bg;
|
|
}
|
|
|
|
.error, .warning {
|
|
background: $critical-bg;
|
|
color: $critical-text;
|
|
|
|
a {
|
|
color: darken($critical-text, 10%);
|
|
&:hover {
|
|
color: $critical-text;
|
|
}
|
|
}
|
|
|
|
a.button, span.button, button.button {
|
|
@include button-color(shade($critical-bg, 20%), $critical-text, true);
|
|
}
|
|
}
|
|
|
|
.error-reverse, .warning-reverse {
|
|
color: $critical-bg;
|
|
}
|
|
|
|
.primary-accent {
|
|
background: darken($primary-accent-bg, 5%);
|
|
color: $primary-accent-fg;
|
|
|
|
.button-bar {
|
|
background: darken($primary-accent-bg, 7%);
|
|
}
|
|
|
|
.button {
|
|
@include button-color($primary-accent-bg, $primary-accent-fg);
|
|
}
|
|
}
|
|
|
|
.secondary-accent {
|
|
background: darken($secondary-accent-bg, 5%);
|
|
color: $secondary-accent-fg;
|
|
|
|
.button-bar {
|
|
background: darken($secondary-accent-bg, 7%);
|
|
}
|
|
|
|
.button {
|
|
@include button-color($secondary-accent-bg, $secondary-accent-fg);
|
|
}
|
|
|
|
.button-group {
|
|
.dropdown-menu {
|
|
background: $secondary-accent-bg;
|
|
li {
|
|
a {
|
|
&:hover {
|
|
background: tint($secondary-accent-bg,15%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.card-item {
|
|
border: 1px solid darken($content-bg, 5%);
|
|
background: $white;
|
|
|
|
.gpm-actions {
|
|
background: darken($content-bg, 2%);
|
|
}
|
|
|
|
|
|
&.active-theme {
|
|
border: 1px solid $notice-bg;
|
|
|
|
.gpm-actions {
|
|
background: $notice-bg;
|
|
color: $notice-text;
|
|
}
|
|
}
|
|
}
|
|
|
|
.user-details {
|
|
h2 {
|
|
color: $content-header;
|
|
|
|
span {
|
|
color: $content-text;
|
|
}
|
|
}
|
|
|
|
.gravatar {
|
|
color: lighten($content-text,20%);
|
|
a {
|
|
color: $content-text !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
#admin-main .grav-editor-toolbar .dropdown-menu {
|
|
box-shadow: 0 3px 6px rgba(0, 0, 0, .075);
|
|
border: 1px solid $form-border;
|
|
background: lighten($content-bg, 5%);
|
|
}
|
|
|
|
#admin-main .grav-editor-toolbar {
|
|
border: 1px solid $form-border;
|
|
border-top-right-radius: $border-radius;
|
|
border-top-left-radius: $border-radius;
|
|
background: lighten($content-bg, 5%);
|
|
|
|
ul {
|
|
a {
|
|
color: $content-text;
|
|
|
|
&:hover, &:focus {
|
|
background: darken($content-bg, 3%);
|
|
color: $form-field-text;
|
|
border-top: 1px solid $form-border;
|
|
}
|
|
}
|
|
|
|
.editor-active {
|
|
a {
|
|
cursor: auto;
|
|
background: lighten($content-bg, 8%);
|
|
border-top: 1px solid $form-border;
|
|
border-left: 1px solid $form-border;
|
|
border-right: 1px solid $form-border;
|
|
|
|
&:hover {
|
|
background: darken($content-bg, 3%);
|
|
color: $form-field-text;
|
|
border-top: 0;
|
|
border-bottom: 1px solid $form-border;
|
|
}
|
|
}
|
|
|
|
&:last-child a, &:last-child a:hover {
|
|
border-right: 1px solid transparent;
|
|
}
|
|
}
|
|
|
|
.button-disabled a {
|
|
color: rgba($content-text, 0.5);
|
|
|
|
&:hover, &:focus {
|
|
background: lighten($content-bg, 5%);
|
|
color: $content-text;
|
|
border-left: 1px solid transparent;
|
|
border-right: 1px solid transparent;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#admin-main .grav-editor-hide-toolbar + div {
|
|
border: 1px solid $form-border;
|
|
|
|
}
|
|
|
|
.grav-editor-content, .grav-editor-preview {
|
|
border: 1px solid $form-border;
|
|
border-top: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.grav-mdeditor-content {
|
|
border: 1px solid $form-border;
|
|
}
|
|
|
|
[data-mode=split] {
|
|
.grav-mdeditor-code {
|
|
border-right: 1px solid $form-border;
|
|
}
|
|
}
|
|
|
|
#admin-main {
|
|
.grav-editor-preview {
|
|
h1, h2, h3, h4, h5, h6 {
|
|
color: darken($content-text, 10%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.primary-accent {
|
|
.ct-chart {
|
|
.ct-series {
|
|
&.ct-series-a {
|
|
.ct-bar {
|
|
stroke: rgba($primary-accent-fg, 0.85) !important;
|
|
}
|
|
.ct-slice-donut {
|
|
stroke: $primary-accent-fg !important;
|
|
}
|
|
}
|
|
&.ct-series-b {
|
|
.ct-slice-donut {
|
|
stroke: rgba($primary-accent-fg, 0.2) !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.secondary-accent {
|
|
.ct-chart {
|
|
.ct-series {
|
|
&.ct-series-a {
|
|
.ct-bar {
|
|
stroke: rgba($secondary-accent-fg, 0.85) !important;
|
|
}
|
|
.ct-slice-donut {
|
|
stroke: $secondary-accent-fg !important;
|
|
}
|
|
}
|
|
&.ct-series-b {
|
|
.ct-slice-donut {
|
|
stroke: rgba($secondary-accent-fg, 0.2) !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.dropzone {
|
|
background: $form-field-bg;
|
|
border: 1px $form-border solid;
|
|
|
|
&.dz-drag-hover {
|
|
border-color: darken($form-border, 10%);
|
|
background: rgba(0,0,0,0.04);
|
|
}
|
|
|
|
.dz-preview {
|
|
border:1px solid darken($content-bg,5%);
|
|
|
|
.dz-success-mark, .dz-error-mark {
|
|
color: $white;
|
|
}
|
|
|
|
.dz-success-mark {
|
|
background-color: lighten($button-bg,10%);
|
|
}
|
|
|
|
.dz-error-mark {
|
|
background-color: $critical-bg;
|
|
}
|
|
|
|
.dz-progress {
|
|
background: #d7d7d7;
|
|
|
|
.dz-upload {
|
|
background-color: lighten($button-bg,10%);
|
|
}
|
|
}
|
|
|
|
.dz-error-message {
|
|
background: lighten($content-bg,3%);
|
|
color: $critical-bg;
|
|
}
|
|
|
|
&:hover {
|
|
.dz-details {
|
|
box-shadow: 0px 0px 20px -5px rgba(0,0,0,0.4);
|
|
}
|
|
}
|
|
|
|
.dz-remove, .dz-unset, .dz-view, .dz-insert, .dz-metadata {
|
|
|
|
background: darken($content-bg,7%);
|
|
|
|
&:hover {
|
|
&:after {
|
|
color: $content-link;
|
|
}
|
|
}
|
|
|
|
&:after {
|
|
color: $content-text;
|
|
}
|
|
}
|
|
|
|
.dz-remove {
|
|
&:hover {
|
|
&:after {
|
|
color: $critical-bg;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
&.dz-clickable {
|
|
.dz-message, .dz-message span {
|
|
color: lighten($content-text,30%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.gpm {
|
|
|
|
> table > tbody {
|
|
> tr {
|
|
border-bottom: 1px solid $underline;
|
|
|
|
&:hover {
|
|
background: lighten($content-bg, 2%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.gpm-name {
|
|
color: lighten($content-text, 15%);
|
|
}
|
|
|
|
.gpm-version {
|
|
color: lighten($content-text, 10%);
|
|
}
|
|
|
|
.gpm-ribbon, .badge.update {
|
|
background: $update-bg;
|
|
a, & {
|
|
color: $update-text !important;
|
|
&:hover {
|
|
background: shade($update-bg, 15%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.gpm-update {
|
|
.gpm-name {
|
|
color: $button-bg;
|
|
}
|
|
}
|
|
|
|
.gpm-item-info {
|
|
border-bottom: 3px solid $underline;
|
|
.gpm-item-icon {
|
|
color: darken($content-bg, 2%);
|
|
}
|
|
}
|
|
|
|
.gpm-actions {
|
|
.disabled {
|
|
color: lighten($content-text, 10%);
|
|
}
|
|
}
|
|
|
|
.gpm-testing {
|
|
background-color: $critical-bg;
|
|
color: $critical-text;
|
|
}
|
|
}
|
|
|
|
.pages-list {
|
|
border-top: 1px solid $underline;
|
|
|
|
.row {
|
|
border-bottom: 1px solid $underline;
|
|
|
|
&:hover {
|
|
background: lighten($content-bg, 2%);
|
|
}
|
|
|
|
p.page-route {
|
|
color: $content-text;
|
|
|
|
.spacer {
|
|
color: $content-text;
|
|
}
|
|
}
|
|
|
|
.badge.lang {
|
|
background-color: $content-tabs-bg;
|
|
color: $content-tabs-text;
|
|
}
|
|
|
|
.badge.lang.info {
|
|
background-color: $update-bg;
|
|
color: $update-text;
|
|
}
|
|
}
|
|
|
|
.page-home {
|
|
color: $subtle-text;
|
|
}
|
|
|
|
.page-info {
|
|
color: $subtle-text;
|
|
}
|
|
}
|
|
|
|
#admin-topbar {
|
|
#admin-lang-toggle {
|
|
z-index: 3;
|
|
button {
|
|
@include button-color($update-bg);
|
|
}
|
|
.dropdown-menu {
|
|
background: $update-bg;
|
|
}
|
|
}
|
|
|
|
.switch-grav {
|
|
background-color: lighten($content-tabs-bg,10%);
|
|
}
|
|
|
|
.switch-toggle {
|
|
input:checked + label {
|
|
color: $white;
|
|
}
|
|
|
|
input + label {
|
|
color: $content-tabs-text;
|
|
}
|
|
|
|
input.highlight:checked + label {
|
|
background: $button-bg;
|
|
}
|
|
}
|
|
}
|
|
|
|
body .selectize-dropdown .optgroup-header {
|
|
color: $black;
|
|
border-bottom: 1px solid #eee;
|
|
background-color: #fafafa;
|
|
}
|
|
|
|
body .bootstrap-datetimepicker-widget {
|
|
&.dropdown-menu {
|
|
border-color: $form-border;
|
|
}
|
|
table {
|
|
td span:hover, th:hover, td.day:hover {
|
|
background: darken($content-bg, 5%) !important;
|
|
}
|
|
.active {
|
|
color: $content-link !important;
|
|
&:hover {
|
|
color: darken($content-link, 10%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
#phpinfo {
|
|
th {
|
|
background: $form-field-bg;
|
|
}
|
|
|
|
td {
|
|
word-wrap: break-word;
|
|
&:first-child {
|
|
color: $button-bg;
|
|
}
|
|
}
|
|
}
|
|
|
|
.remodal {
|
|
background: $content-bg;
|
|
color: $content-text;
|
|
// box-shadow: 0 10px 20px rgba(0,0,0,0.5);
|
|
}
|
|
|
|
.remodal-close {
|
|
color: $content-text;
|
|
}
|
|
|
|
.remodal-close:hover,
|
|
.remodal-close:focus {
|
|
color: darken($content-text, 20%);
|
|
}
|
|
|
|
.gm-scrollbar .thumb {
|
|
@if (lightness($page-bg) < 50) {
|
|
background-color: rgba($white, 0.2);
|
|
&:hover, &:active {
|
|
background-color: rgba($white, 0.3);
|
|
}
|
|
} @else {
|
|
background-color: rgba($black, 0.2);
|
|
&:hover, &:active {
|
|
background-color: rgba($black, 0.3);
|
|
}
|
|
}
|
|
}
|
|
|
|
#page-filtering {
|
|
.page-shortcuts {
|
|
.button {
|
|
@include button-color(rgba(darken($content-text,5%), 0.5));
|
|
}
|
|
}
|
|
}
|
|
|
|
#admin-sidebar .gm-scrollbar .thumb {
|
|
@if (lightness($nav-bg) < 50) {
|
|
background-color: rgba($white, 0.2);
|
|
&:hover, &:active {
|
|
background-color: rgba($white, 0.3);
|
|
}
|
|
} @else {
|
|
background-color: rgba($black, 0.2);
|
|
&:hover, &:active {
|
|
background-color: rgba($black, 0.3);
|
|
}
|
|
}
|
|
}
|
|
|
|
.preview-wrapper {
|
|
iframe {
|
|
@if (lightness($page-bg) < 50) {
|
|
border: 1px solid lighten($page-bg, 3%)
|
|
} @else {
|
|
border: 1px solid darken($page-bg, 3%)
|
|
}
|
|
}
|
|
}
|
|
|
|
#backups-stats {
|
|
.backups-usage-wrapper {
|
|
> div {
|
|
background: linear-gradient(-90deg, darken($primary-accent-bg, 10%) 0, darken($primary-accent-bg, 15%) 100%);
|
|
|
|
&.full {
|
|
background: linear-gradient(-90deg, darken($critical-bg, 5%) 0, darken($critical-bg, 35%) 100%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Log Viewer
|
|
.logs-output {
|
|
table.noflex {
|
|
|
|
td.level .badge {
|
|
&.error, &.critical, &.alert {
|
|
background-color: #DC3023;
|
|
color: #fff;
|
|
}
|
|
&.notice, &.warning {
|
|
background-color: #E08A1E;
|
|
color: #fff;
|
|
}
|
|
&.debug {
|
|
background-color: #26A65B;
|
|
color: #fff;
|
|
}
|
|
&.info {
|
|
background-color: #22A7F0;
|
|
color: #fff;
|
|
}
|
|
&.emergency {
|
|
background-color: #8E44AD;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.permission-container {
|
|
overflow: hidden;
|
|
}
|
|
|
|
// Range-field
|
|
@import "template/modules/input-range";
|