From 2e54579af7cdf5f2d58d96f26bf288bdb7496cb3 Mon Sep 17 00:00:00 2001 From: Helen Hou-Sandi Date: Wed, 13 Nov 2013 19:53:01 +0000 Subject: [PATCH] Turns out it helps if you add those pesky Sass files if you're going to use a preprocessor. see #25858. git-svn-id: https://develop.svn.wordpress.org/trunk@26139 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-admin/css/color-schemes/_admin.scss | 375 ++++++++++++++++++ src/wp-admin/css/color-schemes/_mixins.scss | 37 ++ .../css/color-schemes/_variables.scss | 58 +++ .../css/color-schemes/blue/colors.scss | 12 + .../css/color-schemes/light/colors.scss | 33 ++ .../css/color-schemes/midnight/colors.scss | 6 + 6 files changed, 521 insertions(+) create mode 100644 src/wp-admin/css/color-schemes/_admin.scss create mode 100644 src/wp-admin/css/color-schemes/_mixins.scss create mode 100644 src/wp-admin/css/color-schemes/_variables.scss create mode 100644 src/wp-admin/css/color-schemes/blue/colors.scss create mode 100644 src/wp-admin/css/color-schemes/light/colors.scss create mode 100644 src/wp-admin/css/color-schemes/midnight/colors.scss diff --git a/src/wp-admin/css/color-schemes/_admin.scss b/src/wp-admin/css/color-schemes/_admin.scss new file mode 100644 index 0000000000..7d04ac2077 --- /dev/null +++ b/src/wp-admin/css/color-schemes/_admin.scss @@ -0,0 +1,375 @@ + +@import 'variables'; +@import 'mixins'; + + +html { + background: $body-background; +} + + +/* Links */ + +a { + color: $link; + + &:hover, + &:active, + &:focus { + color: $link-focus; + } +} + +#rightnow a:hover, +#media-upload a.del-link:hover, +div.dashboard-widget-submit input:hover, +.subsubsub a:hover, +.subsubsub a.current:hover, +.ui-tabs-nav a:hover { + color: $link-focus; +} + + +/* Forms */ + +input[type=checkbox]:checked:before { + color: $form-checked; +} + +input[type=radio]:checked:before { + background: $form-checked; +} + +.wp-core-ui input[type="reset"]:hover, +.wp-core-ui input[type="reset"]:active { + color: $link-focus; +} + + +/* Core UI */ + +.wp-core-ui { + .button-primary { + @include button( $button-color ); + } + + .mp6-primary { + color: $text-color; + background-color: $base-color; + } + .mp6-text-primary { + color: $base-color; + } + + .mp6-highlight { + color: $menu-highlight-text; + background-color: $menu-highlight-background; + } + .mp6-text-highlight { + color: $menu-highlight-background; + } + + .mp6-notification { + color: $menu-bubble-text; + background-color: $menu-bubble-background; + } + .mp6-text-notification { + color: $menu-bubble-background; + } + + .mp6-text-icon { + color: $menu-icon; + } +} + + +/* List tables */ + +.wrap .add-new-h2:hover, +#add-new-comment a:hover, +.tablenav .tablenav-pages a:hover, +.tablenav .tablenav-pages a:focus { + color: $menu-text; + background-color: $menu-background; +} + +.view-switch a.current:before { + color: $menu-background; +} + +.view-switch a:hover:before { + color: $menu-bubble-background; +} + +.post-com-count:hover:after { + border-top-color: $menu-background; +} +.post-com-count:hover span { + color: $menu-text; + background-color: $menu-background; +} + +strong .post-com-count:after { + border-top-color: $menu-bubble-background; +} +strong .post-com-count span { + background-color: $menu-bubble-background; +} + + +/* Admin Menu */ + +#adminmenuback, +#adminmenuwrap { + background: $menu-background; +} + +#adminmenu a { + color: $menu-text; +} + +#adminmenu div.wp-menu-image:before { + color: $menu-icon; +} + +#adminmenu a:hover, +#adminmenu li.menu-top:hover, +#adminmenu li.opensub > a.menu-top, +#adminmenu li > a.menu-top:focus { + color: $menu-highlight-text; + background-color: $menu-highlight-background; +} + +#adminmenu li.menu-top:hover div.wp-menu-image:before, +#adminmenu li.opensub > a.menu-top div.wp-menu-image:before { + color: $menu-highlight-icon; +} + + +/* Admin Menu: submenu */ + +#adminmenu .wp-submenu, +#adminmenu .wp-has-current-submenu .wp-submenu, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu, +.folded #adminmenu .wp-has-current-submenu .wp-submenu, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu { + background: $menu-submenu-background; +} + +#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after { + border-right-color: $menu-submenu-background; +} + +#adminmenu .wp-submenu .wp-submenu-head { + color: $menu-submenu-text; +} + +#adminmenu .wp-submenu a, +#adminmenu .wp-has-current-submenu .wp-submenu a, +.folded #adminmenu .wp-has-current-submenu .wp-submenu a, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu a { + color: $menu-submenu-text; + + &:focus, &:hover { + color: $menu-submenu-focus-text; + } +} + + +/* Admin Menu: current */ + +#adminmenu .wp-submenu li.current a, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a { + color: $menu-submenu-current-text; + + &:hover, &:focus { + color: $menu-submenu-focus-text; + } +} + +ul#adminmenu a.wp-has-current-submenu:after, +ul#adminmenu > li.current > a.current:after { + border-right-color: $body-background; +} + +#adminmenu li.current a.menu-top, +#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu, +#adminmenu li.wp-has-current-submenu .wp-submenu .wp-submenu-head, +.folded #adminmenu li.current.menu-top { + color: $menu-current-text; + background: $menu-current-background; +} + +#adminmenu li.wp-has-current-submenu div.wp-menu-image:before { + color: $menu-current-icon; +} + + +/* Admin Menu: bubble */ + +#adminmenu .awaiting-mod, +#adminmenu .update-plugins { + color: $menu-bubble-text; + background: $menu-bubble-background; +} + +#adminmenu li.current a .awaiting-mod, +#adminmenu li a.wp-has-current-submenu .update-plugins, +#adminmenu li:hover a .awaiting-mod, +#adminmenu li.menu-top:hover > a .update-plugins { + color: $menu-bubble-current-text; + background: $menu-bubble-current-background; +} + + +/* Admin Menu: collapse button */ + +#collapse-menu { + color: $menu-collapse-text; +} + +#collapse-menu:hover { + color: $menu-collapse-focus-text; +} + +#collapse-button div:after { + color: $menu-collapse-icon; +} + +#collapse-menu:hover #collapse-button div:after { + color: $menu-collapse-focus-icon; +} + + +/* Admin Bar */ + +#wpadminbar { + color: $menu-text; + background: $menu-background; +} + +#wpadminbar .ab-item, +#wpadminbar a.ab-item, +#wpadminbar > #wp-toolbar > #wp-admin-bar-root-default span.ab-label, +#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary span.ab-label, +#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary span.noticon { + color: $menu-text; +} + +#wpadminbar .ab-icon, +#wpadminbar .ab-item:before { + color: $menu-icon; +} + +#wpadminbar .ab-top-menu > li:hover > .ab-item, +#wpadminbar .ab-top-menu > li.hover > .ab-item, +#wpadminbar > #wp-toolbar > #wp-admin-bar-root-default li:hover span.ab-label, +#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary li.hover span.ab-label, +#wpadminbar .ab-top-menu > li > .ab-item:focus, +#wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus, +#wpadminbar-nojs .ab-top-menu > li.menupop:hover > .ab-item, +#wpadminbar .ab-top-menu > li.menupop.hover > .ab-item { + color: $menu-highlight-text; + background: $menu-submenu-background; +} + +#wpadminbar li:hover .ab-icon, +#wpadminbar li:hover > .ab-item:before { + color: $menu-highlight-icon; +} + + +/* Admin Bar: submenu */ + +#wpadminbar .menupop .ab-sub-wrapper { + background: $menu-submenu-background; +} + +#wpadminbar .quicklinks .menupop ul.ab-sub-secondary { + background: $menu-submenu-background-alt; +} + +#wpadminbar .ab-submenu .ab-item, +#wpadminbar .quicklinks .menupop ul li a, +#wpadminbar .quicklinks .menupop.hover ul li a, +#wpadminbar-nojs .quicklinks .menupop:hover ul li a { + color: $menu-submenu-text; +} + +#wpadminbar .quicklinks li .blavatar, +#wpadminbar .menupop .menupop > .ab-item:before { + color: $menu-icon; +} + +#wpadminbar .quicklinks .menupop ul li a:hover, +#wpadminbar .quicklinks .menupop.hover ul li a:hover, +#wpadminbar .quicklinks .menupop .ab-sub-secondary > li:hover > a, +#wpadminbar .quicklinks .menupop .ab-sub-secondary > li.hover > a, +#wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover { + color: $menu-submenu-focus-text; +} + +#wpadminbar .quicklinks li a:hover .blavatar, +#wpadminbar .menupop .menupop > .ab-item:hover:before { + color: $menu-submenu-focus-text; +} + + +/* Admin Bar: search */ + +#wpadminbar #adminbarsearch:before { + color: $menu-icon; +} + +#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input:focus { + color: $menu-text; + background: $adminbar-input-background; +} + +#wpadminbar #adminbarsearch .adminbar-input::-webkit-input-placeholder { color: $menu-text; opacity: .7; } +#wpadminbar #adminbarsearch .adminbar-input:-moz-placeholder { color: $menu-text; opacity: .7; } +#wpadminbar #adminbarsearch .adminbar-input::-moz-placeholder { color: $menu-text; opacity: .7; } +#wpadminbar #adminbarsearch .adminbar-input:-ms-input-placeholder { color: $menu-text; opacity: .7; } + + +/* Admin Bar: my account */ + +#wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img { + border-color: $adminbar-avatar-frame; + background-color: $adminbar-avatar-frame; +} + +#wpadminbar #wp-admin-bar-user-info .display-name { + color: $menu-text; +} + +#wpadminbar #wp-admin-bar-user-info .username { + color: $menu-submenu-text; +} + + +/* Pointers */ + +.wp-pointer .wp-pointer-content h3 { + background-color: $highlight-color; +} + +.wp-pointer.wp-pointer-top .wp-pointer-arrow, +.wp-pointer.wp-pointer-undefined .wp-pointer-arrow { + border-bottom-color: $highlight-color; +} + + +/* Responsive Component */ + +div#moby6-toggle a:before { + color: $menu-icon; +} + +.moby6-open div#moby6-toggle a { + // ToDo: make inset border + border-color: transparent; + background: $menu-highlight-background; +} diff --git a/src/wp-admin/css/color-schemes/_mixins.scss b/src/wp-admin/css/color-schemes/_mixins.scss new file mode 100644 index 0000000000..2792fa120d --- /dev/null +++ b/src/wp-admin/css/color-schemes/_mixins.scss @@ -0,0 +1,37 @@ +/* + * Button mixin- creates 3d-ish button effect with correct + * highlights/shadows, based on a base color. + */ +@mixin button( $button-color, $text-color: white ) { + background: $button-color; + border-color: darken( $button-color, 10% ); + color: $text-color; + -webkit-box-shadow: inset 0 1px 0 lighten( $button-color, 15% ), 0 1px 0 rgba(0,0,0,.15); + box-shadow: inset 0 1px 0 lighten( $button-color, 15% ), 0 1px 0 rgba(0,0,0,.15); + + &:hover, + &:focus { + background: darken( $button-color, 8% ); + border-color: darken( $button-color, 15% ); + color: $text-color; + -webkit-box-shadow: inset 0 1px 0 lighten( $button-color, 10% ), 0 1px 0 rgba(0,0,0,.15); + box-shadow: inset 0 1px 0 lighten( $button-color, 10% ), 0 1px 0 rgba(0,0,0,.15); + } + + &:active { + background: darken( $button-color, 8% ); + border-color: darken( $button-color, 15% ); + color: $text-color; + -webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 ); + box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 ); + } + + &[disabled], + &:disabled, + &.button-primary-disabled { + color: hsl( hue( $button-color ), 10%, 80% ) !important; + background: darken( $button-color, 8% ) !important; + border-color: darken( $button-color, 15% ) !important; + text-shadow: none !important; + } +} diff --git a/src/wp-admin/css/color-schemes/_variables.scss b/src/wp-admin/css/color-schemes/_variables.scss new file mode 100644 index 0000000000..b6c1736fb9 --- /dev/null +++ b/src/wp-admin/css/color-schemes/_variables.scss @@ -0,0 +1,58 @@ +// assign default value to all undefined variables + + +// core variables + +$text-color: #fff !default; +$base-color: #222 !default; +$icon-color: hsl( hue( $base-color ), 7%, 95% ) !default; +$highlight-color: #0074a2 !default; +$notification-color: #d54e21 !default; + + +// global + +$body-background: #eee !default; + +$link: #0074a2 !default; +$link-focus: lighten( $link, 10% ) !default; + +$button-color: $highlight-color !default; +$form-checked: $highlight-color !default; + + +// admin menu & admin-bar + +$menu-text: $text-color !default; +$menu-icon: $icon-color !default; +$menu-background: $base-color !default; + +$menu-highlight-text: $text-color !default; +$menu-highlight-icon: $text-color !default; +$menu-highlight-background: $highlight-color !default; + +$menu-current-text: $menu-highlight-text !default; +$menu-current-icon: $menu-highlight-icon !default; +$menu-current-background: $menu-highlight-background !default; + +$menu-submenu-text: mix( $base-color, $text-color, 30% ) !default; +$menu-submenu-background: darken( $base-color, 7% ) !default; +$menu-submenu-background-alt: desaturate( lighten( $menu-background, 7% ), 7% ) !default; + +$menu-submenu-focus-text: $highlight-color !default; +$menu-submenu-current-text: $text-color !default; + +$menu-bubble-text: $text-color !default; +$menu-bubble-background: $notification-color !default; +$menu-bubble-current-text: $text-color !default; +$menu-bubble-current-background: $menu-submenu-background !default; + +$menu-collapse-text: $menu-icon !default; +$menu-collapse-icon: $menu-icon !default; +$menu-collapse-focus-text: $text-color !default; +$menu-collapse-focus-icon: $menu-highlight-icon !default; + +$adminbar-avatar-frame: lighten( $menu-background, 7% ) !default; +$adminbar-input-background: lighten( $menu-background, 7% ) !default; + +$menu-customizer-text: mix( $base-color, $text-color, 40% ) !default; diff --git a/src/wp-admin/css/color-schemes/blue/colors.scss b/src/wp-admin/css/color-schemes/blue/colors.scss new file mode 100644 index 0000000000..6a243152ef --- /dev/null +++ b/src/wp-admin/css/color-schemes/blue/colors.scss @@ -0,0 +1,12 @@ +$base-color: #52accc; +$icon-color: #e5f8ff; +$highlight-color: #096484; +$notification-color: #e1a948; +$button-color: #e1a948; + +$menu-submenu-text: #e2ecf1; +$menu-submenu-focus-text: #fff; +$menu-submenu-background: #4796b3; + +@import "../../colors-fresh.css"; +@import "../_admin.scss"; diff --git a/src/wp-admin/css/color-schemes/light/colors.scss b/src/wp-admin/css/color-schemes/light/colors.scss new file mode 100644 index 0000000000..7785fa7533 --- /dev/null +++ b/src/wp-admin/css/color-schemes/light/colors.scss @@ -0,0 +1,33 @@ +$base-color: #e5e5e5; +$icon-color: #999; +$text-color: #333; +$highlight-color: #04a4cc; +$notification-color: #d64e07; + +$body-background: #f5f5f5; + +$menu-highlight-text: #fff; +$menu-highlight-icon: #ccc; +$menu-highlight-background: #888; + +$menu-bubble-text: #fff; +$menu-avatar-frame: #aaa; +$menu-submenu-background: #fff; + +$menu-collapse-text: #777; +$menu-collapse-focus-icon: #555; + +@import "../../colors-fresh.css"; +@import "../_admin.scss"; + +/* temporary fix for admin-bar hover color */ +#wpadminbar .ab-top-menu > li:hover > .ab-item, +#wpadminbar .ab-top-menu > li.hover > .ab-item, +#wpadminbar > #wp-toolbar > #wp-admin-bar-root-default li:hover span.ab-label, +#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary li.hover span.ab-label, +#wpadminbar .ab-top-menu > li > .ab-item:focus, +#wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus, +#wpadminbar-nojs .ab-top-menu > li.menupop:hover > .ab-item, +#wpadminbar .ab-top-menu > li.menupop.hover > .ab-item { + color: $text-color; +} diff --git a/src/wp-admin/css/color-schemes/midnight/colors.scss b/src/wp-admin/css/color-schemes/midnight/colors.scss new file mode 100644 index 0000000000..e1b73eb1b9 --- /dev/null +++ b/src/wp-admin/css/color-schemes/midnight/colors.scss @@ -0,0 +1,6 @@ +$base-color: #363b3f; +$highlight-color: #e14d43; +$notification-color: #69a8bb; + +@import "../../colors-fresh.css"; +@import "../_admin.scss";