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