Files
wordpress-preseed/wp-content/plugins/advanced-custom-fields/assets/build/css/_dark.scss
2019-09-11 19:08:46 +02:00

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