437 lines
7.2 KiB
SCSS
437 lines
7.2 KiB
SCSS
/*--------------------------------------------------------------------------------------------
|
|
*
|
|
* Dark mode
|
|
*
|
|
* WordPress plugin: https://en-au.wordpress.org/plugins/dark-mode/
|
|
* Github Documentation: https://github.com/danieltj27/Dark-Mode/wiki/Help:-Plugin-Compatibility-Guide
|
|
*
|
|
*--------------------------------------------------------------------------------------------*/
|
|
|
|
// Dark Mode Colours.
|
|
$white: #ffffff;
|
|
$black: #000000;
|
|
$blue: #0073aa;
|
|
$medium-blue: #00a0d2;
|
|
$clear: transparent;
|
|
|
|
$accent-red: #dc3232;
|
|
$accent-orange: #f56e28;
|
|
$accent-yellow: #ffb900;
|
|
$accent-green: #46b450;
|
|
$accent-blue: $blue;
|
|
$accent-purple: #826eb4;
|
|
|
|
$base-grey: #23282d;
|
|
$light-grey: #bbc8d4;
|
|
$heavy-grey: #37444c;
|
|
$dark-grey: #32373c;
|
|
$ultra-grey: #191f25;
|
|
$dark-silver: #50626f;
|
|
$base-blue: #2e74aa;
|
|
$light-blue: #4092d2;
|
|
$dark-blue: #2c5f88;
|
|
$ultra-blue: #1f3f58;
|
|
$bright-blue: #30ceff;
|
|
|
|
$editor-lavender: #c678dd;
|
|
$editor-sunglo: #e06c75;
|
|
$editor-olivine: #98c379;
|
|
|
|
// Custom variables.
|
|
$body_text: #bbc8d4;
|
|
$body_background: #23282d;
|
|
$body_background2: #191f25;
|
|
$postbox_background: #32373c;
|
|
$postbox_border: #191f25;
|
|
$postbox_divider: #23282d;
|
|
$input_background: #50626f;
|
|
$input_text: #fff;
|
|
$input_border: #191f25;
|
|
|
|
// Mixins.
|
|
@mixin dark-text() {
|
|
color: $body_text;
|
|
}
|
|
@mixin dark-heading() {
|
|
color: $body_text;
|
|
}
|
|
@mixin dark-border() {
|
|
border-color: $postbox_border;
|
|
}
|
|
@mixin dark-background() {
|
|
background: $body_background;
|
|
}
|
|
@mixin darker-background() {
|
|
background: darken($body_background, 5%);
|
|
}
|
|
@mixin dark-postbox() {
|
|
background-color: $postbox_background;
|
|
border-color: $postbox_border;
|
|
color: $body_text;
|
|
}
|
|
@mixin dark-postbox-block() {
|
|
background-color: #2d3136;
|
|
border-color: $postbox_divider;
|
|
}
|
|
@mixin dark-divider() {
|
|
border-color: $postbox_divider;
|
|
}
|
|
@mixin dark-input() {
|
|
background-color: $input_background;
|
|
border-color: $input_border;
|
|
color: $input_text;
|
|
}
|
|
|
|
|
|
/*---------------------------------------------------------------------------------------------
|
|
*
|
|
* Global
|
|
*
|
|
*---------------------------------------------------------------------------------------------*/
|
|
|
|
// acf-box
|
|
.acf-box {
|
|
@include dark-postbox();
|
|
|
|
.title,
|
|
.footer {
|
|
@include dark-divider();
|
|
}
|
|
|
|
h2 {
|
|
@include dark-heading();
|
|
}
|
|
|
|
table, tbody, tr {
|
|
background: transparent !important;
|
|
}
|
|
}
|
|
|
|
// thead
|
|
.acf-thead {
|
|
@include dark-heading();
|
|
@include dark-border();
|
|
}
|
|
.acf-tfoot {
|
|
@include dark-postbox-block();
|
|
}
|
|
|
|
// table clear
|
|
.acf-table.-clear,
|
|
.acf-table.-clear tr {
|
|
background: transparent !important;
|
|
}
|
|
|
|
// loading overlay
|
|
.acf-loading-overlay {
|
|
background: rgba(0,0,0,0.5);
|
|
}
|
|
|
|
|
|
/*---------------------------------------------------------------------------------------------
|
|
*
|
|
* Fields
|
|
*
|
|
*---------------------------------------------------------------------------------------------*/
|
|
|
|
// fields
|
|
.acf-fields {
|
|
|
|
// field
|
|
> .acf-field {
|
|
@include dark-divider();
|
|
}
|
|
}
|
|
|
|
// fields (left)
|
|
.acf-fields.-left {
|
|
|
|
> .acf-field {
|
|
&:before {
|
|
background: rgba(0,0,0,0.1);
|
|
@include dark-divider();
|
|
}
|
|
}
|
|
}
|
|
|
|
// fields (border)
|
|
.acf-fields.-border {
|
|
@include dark-postbox();
|
|
}
|
|
|
|
// width
|
|
.acf-field[data-width] + .acf-field[data-width] {
|
|
@include dark-divider();
|
|
}
|
|
|
|
// text
|
|
.acf-input-prepend,
|
|
.acf-input-append {
|
|
@include dark-postbox();
|
|
}
|
|
|
|
// tab
|
|
.acf-tab-wrap {
|
|
|
|
}
|
|
|
|
.acf-fields > .acf-tab-wrap {
|
|
@include dark-postbox();
|
|
|
|
.acf-tab-group {
|
|
@include dark-postbox-block();
|
|
|
|
li {
|
|
a {
|
|
@include dark-postbox-block();
|
|
|
|
&:hover {
|
|
@include dark-postbox-block();
|
|
@include dark-text();
|
|
}
|
|
}
|
|
|
|
&.active a {
|
|
@include dark-postbox();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.acf-fields.-sidebar {
|
|
&:before {
|
|
@include dark-postbox-block();
|
|
}
|
|
}
|
|
|
|
.acf-fields.-sidebar.-left {
|
|
&:before {
|
|
@include dark-postbox-block();
|
|
background: $body_background;
|
|
}
|
|
> .acf-tab-wrap.-left {
|
|
.acf-tab-group li a {
|
|
@include dark-postbox-block();
|
|
}
|
|
|
|
.acf-tab-group li.active a {
|
|
@include dark-postbox-block();
|
|
}
|
|
}
|
|
}
|
|
|
|
// file
|
|
.acf-file-uploader {
|
|
|
|
.show-if-value {
|
|
@include dark-postbox();
|
|
|
|
.file-icon {
|
|
@include dark-postbox-block();
|
|
}
|
|
}
|
|
}
|
|
|
|
// acf-oembed
|
|
.acf-oembed {
|
|
@include dark-postbox-block();
|
|
|
|
.title {
|
|
@include dark-input();
|
|
}
|
|
}
|
|
|
|
// gallery
|
|
.acf-gallery {
|
|
@include dark-postbox-block();
|
|
|
|
.acf-gallery-main {
|
|
@include dark-background();
|
|
}
|
|
|
|
.acf-gallery-attachment {
|
|
.margin {
|
|
@include dark-postbox-block();
|
|
}
|
|
}
|
|
|
|
.acf-gallery-side {
|
|
@include dark-postbox-block();
|
|
|
|
.acf-gallery-side-info {
|
|
@include dark-postbox-block();
|
|
}
|
|
}
|
|
|
|
.acf-gallery-toolbar {
|
|
@include dark-postbox-block();
|
|
}
|
|
}
|
|
|
|
// button group
|
|
.acf-button-group {
|
|
|
|
label:not(.selected) {
|
|
@include dark-postbox-block();
|
|
}
|
|
}
|
|
|
|
// switch
|
|
.acf-switch:not(.-on) {
|
|
@include dark-postbox-block();
|
|
.acf-switch-slider {
|
|
@include dark-input();
|
|
}
|
|
}
|
|
|
|
// link
|
|
.acf-link .link-wrap {
|
|
@include dark-postbox-block();
|
|
}
|
|
|
|
// relationship
|
|
.acf-relationship {
|
|
.filters {
|
|
@include dark-postbox();
|
|
}
|
|
.selection {
|
|
@include dark-postbox-block();
|
|
.choices,
|
|
.choices-list,
|
|
.values {
|
|
@include dark-postbox-block();
|
|
}
|
|
}
|
|
}
|
|
|
|
// checkbox
|
|
.acf-taxonomy-field .categorychecklist-holder {
|
|
@include dark-postbox-block();
|
|
}
|
|
|
|
// google map
|
|
.acf-google-map {
|
|
@include dark-postbox-block();
|
|
|
|
.title {
|
|
@include dark-input();
|
|
}
|
|
}
|
|
|
|
// accordion
|
|
.acf-accordion {
|
|
@include dark-postbox();
|
|
}
|
|
.acf-field.acf-accordion .acf-accordion-content > .acf-fields {
|
|
@include dark-border();
|
|
}
|
|
|
|
// flexible content
|
|
.acf-flexible-content {
|
|
.layout {
|
|
@include dark-postbox();
|
|
|
|
.acf-fc-layout-handle {
|
|
@include dark-postbox-block();
|
|
|
|
.acf-fc-layout-order {
|
|
@include dark-postbox();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// repeater
|
|
#wpbody .acf-table {
|
|
@include dark-postbox-block();
|
|
|
|
> tbody,
|
|
> thead {
|
|
> tr {
|
|
background: transparent;
|
|
|
|
> td,
|
|
> th {
|
|
@include dark-border();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Select
|
|
.acf-field select {
|
|
optgroup, optgroup:nth-child(2n) {
|
|
background: $input_background;
|
|
}
|
|
}
|
|
|
|
/*---------------------------------------------------------------------------------------------
|
|
*
|
|
* Field Group
|
|
*
|
|
*---------------------------------------------------------------------------------------------*/
|
|
|
|
// fields
|
|
#acf-field-group-fields {
|
|
|
|
// field list
|
|
.acf-field-list-wrap {
|
|
@include dark-postbox();
|
|
}
|
|
|
|
.acf-field-list {
|
|
.no-fields-message {
|
|
@include dark-postbox();
|
|
}
|
|
}
|
|
|
|
// field
|
|
.acf-field-object {
|
|
@include dark-postbox();
|
|
@include dark-divider();
|
|
|
|
|
|
table, tbody, tr, td, th {
|
|
background: transparent;
|
|
@include dark-divider();
|
|
}
|
|
|
|
.acf-field {
|
|
.acf-label {
|
|
@include dark-postbox-block();
|
|
}
|
|
}
|
|
|
|
// sortable
|
|
&.ui-sortable-helper {
|
|
@include dark-border();
|
|
box-shadow: none;
|
|
}
|
|
|
|
&.ui-sortable-placeholder {
|
|
@include dark-postbox-block();
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
.acf-field-object + .acf-field-object-tab::before,
|
|
.acf-field-object + .acf-field-object-accordion::before {
|
|
@include dark-postbox-block();
|
|
}
|
|
}
|
|
|
|
|
|
/*---------------------------------------------------------------------------------------------
|
|
*
|
|
* Admin: Tools
|
|
*
|
|
*---------------------------------------------------------------------------------------------*/
|
|
|
|
// tools
|
|
.acf-meta-box-wrap {
|
|
|
|
.acf-fields {
|
|
@include dark-input();
|
|
background: transparent;
|
|
}
|
|
} |