wp-admin/css/colors/_admin.scss

   1
   2 @import 'variables';
   3 @import 'mixins';
   4
   5
   6 html {
   7         background: $body-background;
   8 }
   9
  10
  11 /* Links */
  12
  13 a {
  14         color: $link;
  15
  16         &:hover,
  17         &:active,
  18         &:focus {
  19                 color: $link-focus;
  20         }
  21 }
  22
  23 #rightnow a:hover,
  24 #media-upload a.del-link:hover,
  25 div.dashboard-widget-submit input:hover,
  26 .subsubsub a:hover,
  27 .subsubsub a.current:hover,
  28 .ui-tabs-nav a:hover {
  29         color: $link-focus;
  30 }
  31
  32
  33 /* Forms */
  34
  35 input[type=checkbox]:checked:before {
  36     color: $form-checked;
  37 }
  38
  39 input[type=radio]:checked:before {
  40     background: $form-checked;
  41 }
  42
  43 .wp-core-ui input[type="reset"]:hover,
  44 .wp-core-ui input[type="reset"]:active {
  45         color: $link-focus;
  46 }
  47
  48
  49 /* Core UI */
  50
  51 .wp-core-ui {
  52         .button-primary {
  53                 @include button( $button-color );
  54         }
  55
  56         .wp-ui-primary {
  57                 color: $text-color;
  58                 background-color: $base-color;
  59         }
  60         .wp-ui-text-primary {
  61                 color: $base-color;
  62         }
  63
  64         .wp-ui-highlight {
  65                 color: $menu-highlight-text;
  66                 background-color: $menu-highlight-background;
  67         }
  68         .wp-ui-text-highlight {
  69                 color: $menu-highlight-background;
  70         }
  71
  72         .wp-ui-notification {
  73                 color: $menu-bubble-text;
  74                 background-color: $menu-bubble-background;
  75         }
  76         .wp-ui-text-notification {
  77                 color: $menu-bubble-background;
  78         }
  79
  80         .wp-ui-text-icon {
  81                 color: $menu-icon;
  82         }
  83 }
  84
  85
  86 /* List tables */
  87
  88 .wrap .add-new-h2:hover,
  89 #add-new-comment a:hover,
  90 .tablenav .tablenav-pages a:hover,
  91 .tablenav .tablenav-pages a:focus {
  92         color: $menu-text;
  93         background-color: $menu-background;
  94 }
  95
  96 .view-switch a.current:before {
  97         color: $menu-background;
  98 }
  99
 100 .view-switch a:hover:before {
 101         color: $menu-bubble-background;
 102 }
 103
 104 .post-com-count:hover:after {
 105         border-top-color: $menu-background;
 106 }
 107 .post-com-count:hover span {
 108         color: $menu-text;
 109         background-color: $menu-background;
 110 }
 111
 112 strong .post-com-count:after {
 113         border-top-color: $menu-bubble-background;
 114 }
 115 strong .post-com-count span {
 116         background-color: $menu-bubble-background;
 117 }
 118
 119
 120 /* Admin Menu */
 121
 122 #adminmenuback,
 123 #adminmenuwrap,
 124 #adminmenu {
 125         background: $menu-background;
 126 }
 127
 128 #adminmenu a {
 129         color: $menu-text;
 130 }
 131
 132 #adminmenu div.wp-menu-image:before {
 133         color: $menu-icon;
 134 }
 135
 136 #adminmenu a:hover,
 137 #adminmenu li.menu-top:hover,
 138 #adminmenu li.opensub > a.menu-top,
 139 #adminmenu li > a.menu-top:focus {
 140         color: $menu-highlight-text;
 141         background-color: $menu-highlight-background;
 142 }
 143
 144 #adminmenu li.menu-top:hover div.wp-menu-image:before,
 145 #adminmenu li.opensub > a.menu-top div.wp-menu-image:before {
 146         color: $menu-highlight-icon;
 147 }
 148
 149
 150 /* Active tabs use a bottom border color that matches the page background color. */
 151
 152 .about-wrap h2 .nav-tab-active,
 153 .nav-tab-active,
 154 .nav-tab-active:hover {
 155         border-bottom-color: $body-background;
 156 }
 157
 158
 159 /* Admin Menu: submenu */
 160
 161 #adminmenu .wp-submenu,
 162 #adminmenu .wp-has-current-submenu .wp-submenu,
 163 #adminmenu .wp-has-current-submenu.opensub .wp-submenu,
 164 .folded #adminmenu .wp-has-current-submenu .wp-submenu,
 165 #adminmenu a.wp-has-current-submenu:focus + .wp-submenu {
 166         background: $menu-submenu-background;
 167 }
 168
 169 #adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after {
 170         border-right-color: $menu-submenu-background;
 171 }
 172
 173 #adminmenu .wp-submenu .wp-submenu-head {
 174         color: $menu-submenu-text;
 175 }
 176
 177 #adminmenu .wp-submenu a,
 178 #adminmenu .wp-has-current-submenu .wp-submenu a,
 179 .folded #adminmenu .wp-has-current-submenu .wp-submenu a,
 180 #adminmenu a.wp-has-current-submenu:focus + .wp-submenu a,
 181 #adminmenu .wp-has-current-submenu.opensub .wp-submenu a {
 182         color: $menu-submenu-text;
 183
 184         &:focus, &:hover {
 185                 color: $menu-submenu-focus-text;
 186         }
 187 }
 188
 189
 190 /* Admin Menu: current */
 191
 192 #adminmenu .wp-submenu li.current a,
 193 #adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a,
 194 #adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a {
 195         color: $menu-submenu-current-text;
 196
 197         &:hover, &:focus {
 198                 color: $menu-submenu-focus-text;
 199         }
 200 }
 201
 202 ul#adminmenu a.wp-has-current-submenu:after,
 203 ul#adminmenu > li.current > a.current:after {
 204     border-right-color: $body-background;
 205 }
 206
 207 #adminmenu li.current a.menu-top,
 208 #adminmenu li.wp-has-current-submenu a.wp-has-current-submenu,
 209 #adminmenu li.wp-has-current-submenu .wp-submenu .wp-submenu-head,
 210 .folded #adminmenu li.current.menu-top {
 211         color: $menu-current-text;
 212         background: $menu-current-background;
 213 }
 214
 215 #adminmenu li.wp-has-current-submenu div.wp-menu-image:before {
 216         color: $menu-current-icon;
 217 }
 218
 219
 220 /* Admin Menu: bubble */
 221
 222 #adminmenu .awaiting-mod,
 223 #adminmenu .update-plugins {
 224         color: $menu-bubble-text;
 225         background: $menu-bubble-background;
 226 }
 227
 228 #adminmenu li.current a .awaiting-mod,
 229 #adminmenu li a.wp-has-current-submenu .update-plugins,
 230 #adminmenu li:hover a .awaiting-mod,
 231 #adminmenu li.menu-top:hover > a .update-plugins {
 232         color: $menu-bubble-current-text;
 233         background: $menu-bubble-current-background;
 234 }
 235
 236
 237 /* Admin Menu: collapse button */
 238
 239 #collapse-menu {
 240     color: $menu-collapse-text;
 241 }
 242
 243 #collapse-menu:hover {
 244     color: $menu-collapse-focus-text;
 245 }
 246
 247 #collapse-button div:after {
 248     color: $menu-collapse-icon;
 249 }
 250
 251 #collapse-menu:hover #collapse-button div:after {
 252     color: $menu-collapse-focus-icon;
 253 }
 254
 255
 256 /* Admin Bar */
 257
 258 #wpadminbar {
 259         color: $menu-text;
 260         background: $menu-background;
 261 }
 262
 263 #wpadminbar .ab-item,
 264 #wpadminbar a.ab-item,
 265 #wpadminbar > #wp-toolbar span.ab-label,
 266 #wpadminbar > #wp-toolbar span.noticon {
 267         color: $menu-text;
 268 }
 269
 270 #wpadminbar .ab-icon,
 271 #wpadminbar .ab-icon:before,
 272 #wpadminbar .ab-item:before,
 273 #wpadminbar .ab-item:after {
 274         color: $menu-icon;
 275 }
 276
 277 #wpadminbar .ab-top-menu > li:hover > .ab-item,
 278 #wpadminbar .ab-top-menu > li.hover > .ab-item,
 279 #wpadminbar .ab-top-menu > li > .ab-item:focus,
 280 #wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus,
 281 #wpadminbar-nojs .ab-top-menu > li.menupop:hover > .ab-item,
 282 #wpadminbar .ab-top-menu > li.menupop.hover > .ab-item {
 283         color: $menu-submenu-focus-text;
 284         background: $menu-submenu-background;
 285 }
 286
 287 #wpadminbar > #wp-toolbar li:hover span.ab-label,
 288 #wpadminbar > #wp-toolbar li.hover span.ab-label,
 289 #wpadminbar > #wp-toolbar a:focus span.ab-label {
 290         color: $menu-submenu-focus-text;
 291 }
 292
 293 #wpadminbar li:hover .ab-icon:before,
 294 #wpadminbar li:hover .ab-item:before,
 295 #wpadminbar li:hover .ab-item:after,
 296 #wpadminbar li:hover #adminbarsearch:before {
 297         color: $menu-highlight-icon;
 298 }
 299
 300
 301 /* Admin Bar: submenu */
 302
 303 #wpadminbar .menupop .ab-sub-wrapper {
 304         background: $menu-submenu-background;
 305 }
 306
 307 #wpadminbar .quicklinks .menupop ul.ab-sub-secondary,
 308 #wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu {
 309         background: $menu-submenu-background-alt;
 310 }
 311
 312 #wpadminbar .ab-submenu .ab-item,
 313 #wpadminbar .quicklinks .menupop ul li a,
 314 #wpadminbar .quicklinks .menupop.hover ul li a,
 315 #wpadminbar-nojs .quicklinks .menupop:hover ul li a {
 316         color: $menu-submenu-text;
 317 }
 318
 319 #wpadminbar .quicklinks li .blavatar,
 320 #wpadminbar .menupop .menupop > .ab-item:before {
 321         color: $menu-icon;
 322 }
 323
 324 #wpadminbar .quicklinks .menupop ul li a:hover,
 325 #wpadminbar .quicklinks .menupop ul li a:focus,
 326 #wpadminbar .quicklinks .menupop ul li a:hover strong,
 327 #wpadminbar .quicklinks .menupop ul li a:focus strong,
 328 #wpadminbar .quicklinks .menupop.hover ul li a:hover,
 329 #wpadminbar .quicklinks .menupop.hover ul li a:focus,
 330 #wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover,
 331 #wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus,
 332 #wpadminbar li:hover .ab-icon:before,
 333 #wpadminbar li:hover .ab-item:before,
 334 #wpadminbar li a:focus .ab-icon:before,
 335 #wpadminbar li .ab-item:focus:before,
 336 #wpadminbar li.hover .ab-icon:before,
 337 #wpadminbar li.hover .ab-item:before,
 338 #wpadminbar li:hover .ab-item:after,
 339 #wpadminbar li.hover .ab-item:after,
 340 #wpadminbar li:hover #adminbarsearch:before {
 341         color: $menu-submenu-focus-text;
 342 }
 343
 344 #wpadminbar .quicklinks li a:hover .blavatar,
 345 #wpadminbar .menupop .menupop > .ab-item:hover:before {
 346         color: $menu-submenu-focus-text;
 347 }
 348
 349
 350 /* Admin Bar: search */
 351
 352 #wpadminbar #adminbarsearch:before {
 353         color: $menu-icon;
 354 }
 355
 356 #wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input:focus {
 357         color: $menu-text;
 358         background: $adminbar-input-background;
 359 }
 360
 361 #wpadminbar #adminbarsearch .adminbar-input::-webkit-input-placeholder { color: $menu-text; opacity: .7; }
 362 #wpadminbar #adminbarsearch .adminbar-input:-moz-placeholder { color: $menu-text; opacity: .7; }
 363 #wpadminbar #adminbarsearch .adminbar-input::-moz-placeholder { color: $menu-text; opacity: .7; }
 364 #wpadminbar #adminbarsearch .adminbar-input:-ms-input-placeholder { color: $menu-text; opacity: .7; }
 365
 366
 367 /* Admin Bar: my account */
 368
 369 #wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img {
 370         border-color: $adminbar-avatar-frame;
 371         background-color: $adminbar-avatar-frame;
 372 }
 373
 374 #wpadminbar #wp-admin-bar-user-info .display-name {
 375         color: $menu-text;
 376 }
 377
 378 #wpadminbar #wp-admin-bar-user-info a:hover .display-name {
 379         color: $menu-submenu-focus-text;
 380 }
 381
 382 #wpadminbar #wp-admin-bar-user-info .username {
 383         color: $menu-submenu-text;
 384 }
 385
 386
 387 /* Pointers */
 388
 389 .wp-pointer .wp-pointer-content h3 {
 390         background-color: $highlight-color;
 391 }
 392
 393 .wp-pointer .wp-pointer-content h3:before {
 394         color: $highlight-color;
 395 }
 396
 397 .wp-pointer.wp-pointer-top .wp-pointer-arrow,
 398 .wp-pointer.wp-pointer-undefined .wp-pointer-arrow {
 399         border-bottom-color: $highlight-color;
 400 }
 401
 402
 403 /* Media Uploader */
 404
 405 .media-item .bar,
 406 .media-progress-bar div {
 407         background-color: $highlight-color;
 408 }
 409
 410 .details.attachment {
 411         box-shadow: 0 0 0 1px #fff, 0 0 0 5px $highlight-color;
 412 }
 413
 414 .attachment.details .check {
 415         background-color: $highlight-color;
 416         box-shadow: 0 0 0 1px #fff, 0 0 0 2px $highlight-color;
 417 }
 418
 419
 420 /* Themes */
 421
 422 .theme-browser .theme.active .theme-name,
 423 .theme-browser .theme.add-new-theme:hover:after {
 424         background: $highlight-color;
 425 }
 426
 427 .theme-browser .theme.add-new-theme:hover span:after {
 428         color: $highlight-color;
 429 }
 430
 431 .theme-overlay .theme-header .close:hover,
 432 .theme-overlay .theme-header .right:hover,
 433 .theme-overlay .theme-header .left:hover {
 434         background: $highlight-color;
 435 }
 436
 437 /* jQuery UI Slider */
 438
 439 .wp-slider .ui-slider-handle,
 440 .wp-slider .ui-slider-handle.ui-state-hover,
 441 .wp-slider .ui-slider-handle.focus {
 442         background: $button-color;
 443         border-color: darken( $button-color, 10% );
 444         -webkit-box-shadow: inset 0 1px 0 lighten( $button-color, 15% ), 0 1px 0 rgba(0,0,0,.15);
 445         box-shadow: inset 0 1px 0 lighten( $button-color, 15% ), 0 1px 0 rgba(0,0,0,.15);
 446 }
 447
 448 /* Thickbox: Plugin information */
 449
 450 #sidemenu a.current {
 451         background: $body-background;
 452         border-bottom-color: $body-background;
 453 }
 454
 455 #plugin-information .action-button {
 456         background: $button-color;
 457 }
 458
 459 /* Responsive Component */
 460
 461 div#wp-responsive-toggle a:before {
 462         color: $menu-icon;
 463 }
 464
 465 .wp-responsive-open div#wp-responsive-toggle a {
 466         // ToDo: make inset border
 467         border-color: transparent;
 468         background: $menu-highlight-background;
 469 }
 470
 471 .star-rating .star {
 472         color: $highlight-color;
 473 }
 474
 475 .wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a {
 476         background: $menu-submenu-background;
 477 }