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