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 .ab-sub-wrapper .menupop.hover > a,
 319 #wpadminbar .quicklinks .menupop.hover ul li a:hover,
 320 #wpadminbar .quicklinks .menupop.hover ul li a:focus,
 321 #wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover,
 322 #wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus,
 323 #wpadminbar li:hover .ab-icon:before,
 324 #wpadminbar li:hover .ab-item:before,
 325 #wpadminbar li a:focus .ab-icon:before,
 326 #wpadminbar li .ab-item:focus:before,
 327 #wpadminbar li.hover .ab-icon:before,
 328 #wpadminbar li.hover .ab-item:before,
 329 #wpadminbar li:hover #adminbarsearch:before,
 330 #wpadminbar li #adminbarsearch.adminbar-focused:before {
 331         color: $menu-submenu-focus-text;
 332 }
 333
 334 #wpadminbar .quicklinks li a:hover .blavatar,
 335 #wpadminbar .quicklinks li a:focus .blavatar,
 336 #wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a .blavatar,
 337 #wpadminbar .menupop .menupop > .ab-item:hover:before,
 338 #wpadminbar.mobile .quicklinks .ab-icon:before,
 339 #wpadminbar.mobile .quicklinks .ab-item:before {
 340         color: $menu-submenu-focus-text;
 341 }
 342
 343 #wpadminbar.mobile .quicklinks .hover .ab-icon:before,
 344 #wpadminbar.mobile .quicklinks .hover .ab-item:before {
 345         color: $menu-icon;
 346 }
 347
 348
 349 /* Admin Bar: search */
 350
 351 #wpadminbar #adminbarsearch:before {
 352         color: $menu-icon;
 353 }
 354
 355 #wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input:focus {
 356         color: $menu-text;
 357         background: $adminbar-input-background;
 358 }
 359
 360 /* Admin Bar: my account */
 361
 362 #wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img {
 363         border-color: $adminbar-avatar-frame;
 364         background-color: $adminbar-avatar-frame;
 365 }
 366
 367 #wpadminbar #wp-admin-bar-user-info .display-name {
 368         color: $menu-text;
 369 }
 370
 371 #wpadminbar #wp-admin-bar-user-info a:hover .display-name {
 372         color: $menu-submenu-focus-text;
 373 }
 374
 375 #wpadminbar #wp-admin-bar-user-info .username {
 376         color: $menu-submenu-text;
 377 }
 378
 379
 380 /* Pointers */
 381
 382 .wp-pointer .wp-pointer-content h3 {
 383         background-color: $highlight-color;
 384         border-color: darken( $highlight-color, 5% );
 385 }
 386
 387 .wp-pointer .wp-pointer-content h3:before {
 388         color: $highlight-color;
 389 }
 390
 391 .wp-pointer.wp-pointer-top .wp-pointer-arrow,
 392 .wp-pointer.wp-pointer-top .wp-pointer-arrow-inner,
 393 .wp-pointer.wp-pointer-undefined .wp-pointer-arrow,
 394 .wp-pointer.wp-pointer-undefined .wp-pointer-arrow-inner {
 395         border-bottom-color: $highlight-color;
 396 }
 397
 398
 399 /* Media */
 400
 401 .media-item .bar,
 402 .media-progress-bar div {
 403         background-color: $highlight-color;
 404 }
 405
 406 .details.attachment {
 407         box-shadow:
 408                 inset 0 0 0 3px #fff,
 409                 inset 0 0 0 7px $highlight-color;
 410 }
 411
 412 .attachment.details .check {
 413         background-color: $highlight-color;
 414         box-shadow: 0 0 0 1px #fff, 0 0 0 2px $highlight-color;
 415 }
 416
 417 .media-selection .attachment.selection.details .thumbnail {
 418         -webkit-box-shadow:
 419                 0px 0px 0px 1px #fff,
 420                 0px 0px 0px 3px $highlight-color;
 421         box-shadow:
 422                 0px 0px 0px 1px #fff,
 423                 0px 0px 0px 3px $highlight-color;
 424 }
 425
 426
 427 /* Themes */
 428
 429 .theme-browser .theme.active .theme-name,
 430 .theme-browser .theme.add-new-theme a:hover:after,
 431 .theme-browser .theme.add-new-theme a:focus:after {
 432         background: $highlight-color;
 433 }
 434
 435 .theme-browser .theme.add-new-theme a:hover span:after,
 436 .theme-browser .theme.add-new-theme a:focus span:after {
 437         color: $highlight-color;
 438 }
 439
 440 .theme-section.current,
 441 .theme-filter.current {
 442         border-bottom-color: $menu-background;
 443 }
 444
 445 body.more-filters-opened .more-filters {
 446         color: $menu-text;
 447         background-color: $menu-background;
 448 }
 449
 450 body.more-filters-opened .more-filters:before {
 451         color: $menu-text;
 452 }
 453
 454 body.more-filters-opened .more-filters:hover,
 455 body.more-filters-opened .more-filters:focus {
 456         background-color: $menu-highlight-background;
 457         color: $menu-highlight-text;
 458 }
 459
 460 body.more-filters-opened .more-filters:hover:before,
 461 body.more-filters-opened .more-filters:focus:before {
 462         color: $menu-highlight-text;
 463 }
 464
 465 /* Widgets */
 466
 467 .widgets-chooser li.widgets-chooser-selected {
 468         background-color: $menu-highlight-background;
 469         color: $menu-highlight-text;
 470 }
 471
 472 .widgets-chooser li.widgets-chooser-selected:before,
 473 .widgets-chooser li.widgets-chooser-selected:focus:before {
 474         color: $menu-highlight-text;
 475 }
 476
 477 /* Customize */
 478
 479 #customize-theme-controls .widget-area-select .selected {
 480         background-color: $menu-highlight-background;
 481         color: $menu-highlight-text;
 482 }
 483
 484 #customize-footer-actions .devices button:focus {
 485         border-bottom-color: $highlight-color;
 486 }
 487
 488 /* Responsive Component */
 489
 490 div#wp-responsive-toggle a:before {
 491         color: $menu-icon;
 492 }
 493
 494 .wp-responsive-open div#wp-responsive-toggle a {
 495         // ToDo: make inset border
 496         border-color: transparent;
 497         background: $menu-highlight-background;
 498 }
 499
 500 .wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a {
 501         background: $menu-submenu-background;
 502 }
 503
 504 .wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before {
 505         color: $menu-icon;
 506 }
 507
 508 /* TinyMCE */
 509
 510 .mce-container.mce-menu .mce-menu-item:hover,
 511 .mce-container.mce-menu .mce-menu-item.mce-selected,
 512 .mce-container.mce-menu .mce-menu-item:focus,
 513 .mce-container.mce-menu .mce-menu-item-normal.mce-active,
 514 .mce-container.mce-menu .mce-menu-item-preview.mce-active {
 515         background: $highlight-color;
 516 }