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         color: $menu-current-icon;
 216 }
 217
 218
 219 /* Admin Menu: bubble */
 220
 221 #adminmenu .awaiting-mod,
 222 #adminmenu .update-plugins {
 223         color: $menu-bubble-text;
 224         background: $menu-bubble-background;
 225 }
 226
 227 #adminmenu li.current a .awaiting-mod,
 228 #adminmenu li a.wp-has-current-submenu .update-plugins,
 229 #adminmenu li:hover a .awaiting-mod,
 230 #adminmenu li.menu-top:hover > a .update-plugins {
 231         color: $menu-bubble-current-text;
 232         background: $menu-bubble-current-background;
 233 }
 234
 235
 236 /* Admin Menu: collapse button */
 237
 238 #collapse-menu {
 239     color: $menu-collapse-text;
 240 }
 241
 242 #collapse-menu:hover {
 243     color: $menu-collapse-focus-text;
 244 }
 245
 246 #collapse-button div:after {
 247     color: $menu-collapse-icon;
 248 }
 249
 250 #collapse-menu:hover #collapse-button div:after {
 251     color: $menu-collapse-focus-icon;
 252 }
 253
 254
 255 /* Admin Bar */
 256
 257 #wpadminbar {
 258         color: $menu-text;
 259         background: $menu-background;
 260 }
 261
 262 #wpadminbar .ab-item,
 263 #wpadminbar a.ab-item,
 264 #wpadminbar > #wp-toolbar span.ab-label,
 265 #wpadminbar > #wp-toolbar span.noticon {
 266         color: $menu-text;
 267 }
 268
 269 #wpadminbar .ab-icon,
 270 #wpadminbar .ab-icon:before,
 271 #wpadminbar .ab-item:before,
 272 #wpadminbar .ab-item:after {
 273         color: $menu-icon;
 274 }
 275
 276 #wpadminbar .ab-top-menu > li:hover > .ab-item,
 277 #wpadminbar .ab-top-menu > li.hover > .ab-item,
 278 #wpadminbar .ab-top-menu > li > .ab-item:focus,
 279 #wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus,
 280 #wpadminbar-nojs .ab-top-menu > li.menupop:hover > .ab-item,
 281 #wpadminbar .ab-top-menu > li.menupop.hover > .ab-item {
 282         color: $menu-submenu-focus-text;
 283         background: $menu-submenu-background;
 284 }
 285
 286 #wpadminbar > #wp-toolbar li:hover span.ab-label,
 287 #wpadminbar > #wp-toolbar li.hover span.ab-label,
 288 #wpadminbar > #wp-toolbar a:focus span.ab-label {
 289         color: $menu-submenu-focus-text;
 290 }
 291
 292 #wpadminbar li:hover .ab-icon:before,
 293 #wpadminbar li:hover .ab-item:before,
 294 #wpadminbar li:hover .ab-item:after,
 295 #wpadminbar li:hover #adminbarsearch:before {
 296         color: $menu-highlight-icon;
 297 }
 298
 299
 300 /* Admin Bar: submenu */
 301
 302 #wpadminbar .menupop .ab-sub-wrapper {
 303         background: $menu-submenu-background;
 304 }
 305
 306 #wpadminbar .quicklinks .menupop ul.ab-sub-secondary,
 307 #wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu {
 308         background: $menu-submenu-background-alt;
 309 }
 310
 311 #wpadminbar .ab-submenu .ab-item,
 312 #wpadminbar .quicklinks .menupop ul li a,
 313 #wpadminbar .quicklinks .menupop.hover ul li a,
 314 #wpadminbar-nojs .quicklinks .menupop:hover ul li a {
 315         color: $menu-submenu-text;
 316 }
 317
 318 #wpadminbar .quicklinks li .blavatar,
 319 #wpadminbar .menupop .menupop > .ab-item:before {
 320         color: $menu-icon;
 321 }
 322
 323 #wpadminbar .quicklinks .menupop ul li a:hover,
 324 #wpadminbar .quicklinks .menupop ul li a:focus,
 325 #wpadminbar .quicklinks .menupop ul li a:hover strong,
 326 #wpadminbar .quicklinks .menupop ul li a:focus strong,
 327 #wpadminbar .quicklinks .menupop.hover ul li a:hover,
 328 #wpadminbar .quicklinks .menupop.hover ul li a:focus,
 329 #wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover,
 330 #wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus,
 331 #wpadminbar li:hover .ab-icon:before,
 332 #wpadminbar li:hover .ab-item:before,
 333 #wpadminbar li a:focus .ab-icon:before,
 334 #wpadminbar li .ab-item:focus:before,
 335 #wpadminbar li.hover .ab-icon:before,
 336 #wpadminbar li.hover .ab-item:before,
 337 #wpadminbar li:hover .ab-item:after,
 338 #wpadminbar li.hover .ab-item:after,
 339 #wpadminbar li:hover #adminbarsearch:before {
 340         color: $menu-submenu-focus-text;
 341 }
 342
 343 #wpadminbar .quicklinks li a:hover .blavatar,
 344 #wpadminbar .menupop .menupop > .ab-item:hover:before {
 345         color: $menu-submenu-focus-text;
 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 #wpadminbar #adminbarsearch .adminbar-input::-webkit-input-placeholder { color: $menu-text; opacity: .7; }
 361 #wpadminbar #adminbarsearch .adminbar-input:-moz-placeholder { color: $menu-text; opacity: .7; }
 362 #wpadminbar #adminbarsearch .adminbar-input::-moz-placeholder { color: $menu-text; opacity: .7; }
 363 #wpadminbar #adminbarsearch .adminbar-input:-ms-input-placeholder { color: $menu-text; opacity: .7; }
 364
 365
 366 /* Admin Bar: my account */
 367
 368 #wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img {
 369         border-color: $adminbar-avatar-frame;
 370         background-color: $adminbar-avatar-frame;
 371 }
 372
 373 #wpadminbar #wp-admin-bar-user-info .display-name {
 374         color: $menu-text;
 375 }
 376
 377 #wpadminbar #wp-admin-bar-user-info a:hover .display-name {
 378         color: $menu-submenu-focus-text;
 379 }
 380
 381 #wpadminbar #wp-admin-bar-user-info .username {
 382         color: $menu-submenu-text;
 383 }
 384
 385
 386 /* Pointers */
 387
 388 .wp-pointer .wp-pointer-content h3 {
 389         background-color: $highlight-color;
 390         border-color: darken( $highlight-color, 5% );
 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 */
 404
 405 .media-item .bar,
 406 .media-progress-bar div {
 407         background-color: $highlight-color;
 408 }
 409
 410 .details.attachment {
 411         box-shadow:
 412                 inset 0 0 0 3px #fff,
 413                 inset 0 0 0 7px $highlight-color;
 414 }
 415
 416 .attachment.details .check {
 417         background-color: $highlight-color;
 418         box-shadow: 0 0 0 1px #fff, 0 0 0 2px $highlight-color;
 419 }
 420
 421 .media-selection .attachment.selection.details .thumbnail {
 422         -webkit-box-shadow:
 423                 0px 0px 0px 1px #fff,
 424                 0px 0px 0px 3px $highlight-color;
 425         box-shadow:
 426                 0px 0px 0px 1px #fff,
 427                 0px 0px 0px 3px $highlight-color;
 428 }
 429
 430
 431 /* Themes */
 432
 433 .theme-browser .theme.active .theme-name,
 434 .theme-browser .theme.add-new-theme:hover:after {
 435         background: $highlight-color;
 436 }
 437
 438 .theme-browser .theme.add-new-theme:hover span:after {
 439         color: $highlight-color;
 440 }
 441
 442 .theme-section.current,
 443 .theme-filter.current {
 444         border-bottom-color: $menu-background;
 445 }
 446
 447 body.more-filters-opened .more-filters {
 448         color: $menu-text;
 449         background-color: $menu-background;
 450 }
 451
 452 body.more-filters-opened .more-filters:before {
 453         color: $menu-text;
 454 }
 455
 456 body.more-filters-opened .more-filters:hover,
 457 body.more-filters-opened .more-filters:focus {
 458         background-color: $menu-highlight-background;
 459         color: $menu-highlight-text;
 460 }
 461
 462 body.more-filters-opened .more-filters:hover:before,
 463 body.more-filters-opened .more-filters:focus:before {
 464         color: $menu-highlight-text;
 465 }
 466
 467 /* Widgets */
 468
 469 .widgets-chooser li.widgets-chooser-selected {
 470         background-color: $menu-highlight-background;
 471         color: $menu-highlight-text;
 472 }
 473
 474 .widgets-chooser li.widgets-chooser-selected:before,
 475 .widgets-chooser li.widgets-chooser-selected:focus:before {
 476         color: $menu-highlight-text;
 477 }
 478
 479 /* Customize */
 480
 481 #customize-theme-controls .widget-area-select .selected {
 482         background-color: $menu-highlight-background;
 483         color: $menu-highlight-text;
 484 }
 485
 486 /* jQuery UI Slider */
 487
 488 .wp-slider .ui-slider-handle,
 489 .wp-slider .ui-slider-handle.ui-state-hover,
 490 .wp-slider .ui-slider-handle.focus {
 491         background: $button-color;
 492         border-color: darken( $button-color, 10% );
 493         box-shadow: inset 0 1px 0 lighten( $button-color, 15% ), 0 1px 0 rgba(0,0,0,.15);
 494 }
 495
 496 /* Thickbox: Plugin information */
 497
 498 #sidemenu a.current {
 499         background: $body-background;
 500         border-bottom-color: $body-background;
 501 }
 502
 503 #plugin-information .action-button {
 504         background: $button-color;
 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 .star-rating .star {
 520         color: $highlight-color;
 521 }
 522
 523 .wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a {
 524         background: $menu-submenu-background;
 525 }