artabro/wire/modules/AdminTheme/AdminThemeDefault/styles/sass/main-modern.scss
2024-08-27 11:35:37 +02:00

190 lines
5.1 KiB
SCSS

/**
* Modern color theme for PW admin
*
*/
@import 'vars';
@import 'mixins';
$red: #EB425D;
$pink: #F21E69;
$dark-pink: darken($pink, 10%);
$blue: #418FEB;
$light-blue: #4998E9;
$dark-blue: #2F3638;
$light-green: #93BF0D;
$green: #93BF0D;
$brown: #821038;
$subtle-bg: lighten(#E8F0F5, 2%);
$subtle-border: darken($subtle-bg, 7%);
$text-bg: $white;
$text-color: $black;
$masthead-bg: #4493E9;
$breadcrumbs-bg: $subtle-bg;
$breadcrumbs-color: transparentize($text-color, 0.7);
$breadcrumbs-link-color: $text-color;
$breadcrumbs-link-hover-color: $text-color;
$breadcrumbs-border: none;
$breadcrumbs-title-color: $text-color;
$topnav-link-color: $reverse-text-color;
$topnav-link-bg: none;
$topnav-link-current-color: $pink;
$topnav-link-current-bg: $breadcrumbs-bg;
$topnav-link-hover-color: $white;
$topnav-link-hover-bg: darken($masthead-bg, 5%);
$item-header-hover-color: $white;
$item-header-hover-bg: $pink;
$item-header-bg: $green;
$item-header-color: $white;
$item-border: 1px solid $subtle-border;
$alt-link-color: $dark-pink;
$link-color: $pink;
$link-hover-color: $dark-pink;
$link-hover-bg: none;
$link-current-color: $alt-link-color;
$link-current-bg: none;
$link-active-color: $dark-pink;
$link-active-bg: none;
$action-link-font-size: 1em;
$action-link-bg: $green;
$action-link-color: $white;
$action-link-border: none;
$action-link-hover-color: $white;
$action-link-hover-border: 1px solid $pink;
$action-link-hover-bg: $pink;
$action-link-active-color: $white;
$action-link-active-bg: $dark-pink;
$button-bg: $light-green;
$button-border: $light-green;
$button-color: $white;
$button-hover-color: $white;
$button-hover-bg: $pink;
$button-hover-border: $pink;
$button-radius: 5px;
$button-active-color: $white;
$button-active-bg: darken($link-hover-color, 10%);
$button-active-border: $button-active-bg;
$ui-state-default-bg: darken($green, 5%);
$ui-state-default-color: $reverse-text-color;
$ui-state-hover-bg: $pink;
$ui-state-hover-color: $reverse-text-color;
$label-link-color: $dark-blue;
$label-link-bg: #fff;
$label-link-collapsed-color: transparentize(#69B7EF, 0.1);
$label-link-collapsed-bg: #fff;
$label-link-hover-color: #000;
$table-th-color: #b0ced8;
$table-th-active-color: $blue;
$pagelist-link-color: #7a002b;
$pagelist-link-hover-color: #8F294D;
$pagelist-link-open-color: $black;
$pagelist-link-open-bg: #ffffdd;
$pagelist-link-active-color: $dark-pink;
$pagelist-link-icon-color: $dark-pink;
$pagination-font-size: 0.769230769230769em;
$pagination-link-color: $reverse-text-color;
$pagination-link-bg: $green;
$pagination-link-current-color: $white;
$pagination-link-current-bg: $dark-pink;
$pagination-link-hover-color: $white;
$pagination-link-hover-bg: $pink;
$pagination-link-active-color: $white;
$pagination-link-active-bg: $dark-pink;
$pagination-link-border-radius: 2px;
$wiretab-link-bg: none;
$wiretab-link-border: 1px solid transparent;
$wiretab-link-color: darken(#69B7EF, 10%);
$wiretab-link-hover-bg: $white;
$wiretab-link-hover-color: $wiretab-link-color;
$wiretab-link-hover-border: 1px solid $subtle-border;
$wiretab-link-current-bg: $white;
$wiretab-link-current-color: $pink;
$wiretab-link-current-border: 1px solid $subtle-border;
$wiretab-link-active-bg: $dark-pink;
$wiretab-link-active-color: $white;
$footer-bg: $subtle-bg;
$footer-color: $light-text-color;
$footer-link-color: $pink;
$highlight-bg: transparentize($masthead-bg, 0.4);
$highlight-color: $white;
$highlight-border: 1px solid $white;
$error-bg: $red;
$error-border: $red;
$error-color: #fff;
$notes-bg: #ffffdd;
$notes-font-size: 0.846153846153846em;
$tabs-radius: 4px;
$tabs-font-weight: $bold-weight;
$input-bg: lighten($subtle-bg, 2%);
$progressbar-bg: $pink;
$progressbar-value-bg: $dark-pink;
$progressbar-text-color: $reverse-text-color;
/**
* Notifications (prefixed with "no")
*
*/
$no-border-color: #fff;
$no-message-color: $highlight-color;
$no-message-bg: $highlight-bg;
$no-message-open-color: $no-message-color;
$no-message-open-bg: darken($no-message-bg, 5%);
$no-message-icon-color: $no-message-color;
$no-message-link-color: transparentize($no-message-color, 0.2);
$no-message-link-hover-color: $no-message-color;
$no-warning-color: $white;
$no-warning-bg: #F67937;
$no-warning-open-color: $white;
$no-warning-open-bg: darken($no-warning-bg, 5);
$no-warning-icon-color: $no-warning-color;
$no-warning-link-color: transparentize($no-warning-color, 0.2);
$no-warning-link-hover-color: $no-warning-color;
$no-error-color: $error-color;
$no-error-bg: $error-bg;
$no-error-open-color: $no-error-color;
$no-error-open-bg: darken($no-error-bg, 5%);
$no-error-icon-color: $no-error-color;
$no-error-link-color: transparentize($no-error-color, 0.2);
$no-error-link-hover-color: $no-error-color;
$no-ghost-message-color: #fff;
$no-ghost-message-bg: #000;
$no-ghost-message-icon-color: $no-ghost-message-color;
$no-ghost-warning-color: $no-warning-color;
$no-ghost-warning-bg: $no-warning-bg;
$no-ghost-warning-icon-color: $no-ghost-warning-color;
$no-ghost-error-color: $no-error-color;
$no-ghost-error-bg: $no-error-bg;
$no-ghost-error-icon-color: $no-ghost-error-color;
@import 'main';