_admin.scss 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493
  1. @import 'variables';
  2. @import 'mixins';
  3. body {
  4. background: $body-background;
  5. }
  6. /* Links */
  7. a {
  8. color: $link;
  9. &:hover,
  10. &:active,
  11. &:focus {
  12. color: $link-focus;
  13. }
  14. }
  15. #media-upload a.del-link:hover,
  16. div.dashboard-widget-submit input:hover,
  17. .subsubsub a:hover,
  18. .subsubsub a.current:hover {
  19. color: $link-focus;
  20. }
  21. /* Forms */
  22. input[type=checkbox]:checked:before {
  23. color: $form-checked;
  24. }
  25. input[type=radio]:checked:before {
  26. background: $form-checked;
  27. }
  28. .wp-core-ui input[type="reset"]:hover,
  29. .wp-core-ui input[type="reset"]:active {
  30. color: $link-focus;
  31. }
  32. /* Core UI */
  33. .wp-core-ui {
  34. .button-primary {
  35. @include button( $button-color );
  36. }
  37. .wp-ui-primary {
  38. color: $text-color;
  39. background-color: $base-color;
  40. }
  41. .wp-ui-text-primary {
  42. color: $base-color;
  43. }
  44. .wp-ui-highlight {
  45. color: $menu-highlight-text;
  46. background-color: $menu-highlight-background;
  47. }
  48. .wp-ui-text-highlight {
  49. color: $menu-highlight-background;
  50. }
  51. .wp-ui-notification {
  52. color: $menu-bubble-text;
  53. background-color: $menu-bubble-background;
  54. }
  55. .wp-ui-text-notification {
  56. color: $menu-bubble-background;
  57. }
  58. .wp-ui-text-icon {
  59. color: $menu-icon;
  60. }
  61. }
  62. /* List tables */
  63. .wrap .add-new-h2:hover, /* deprecated */
  64. .wrap .page-title-action:hover,
  65. .tablenav .tablenav-pages a:hover,
  66. .tablenav .tablenav-pages a:focus {
  67. color: $menu-text;
  68. background-color: $menu-background;
  69. }
  70. .view-switch a.current:before {
  71. color: $menu-background;
  72. }
  73. .view-switch a:hover:before {
  74. color: $menu-bubble-background;
  75. }
  76. /* Admin Menu */
  77. #adminmenuback,
  78. #adminmenuwrap,
  79. #adminmenu {
  80. background: $menu-background;
  81. }
  82. #adminmenu a {
  83. color: $menu-text;
  84. }
  85. #adminmenu div.wp-menu-image:before {
  86. color: $menu-icon;
  87. }
  88. #adminmenu a:hover,
  89. #adminmenu li.menu-top:hover,
  90. #adminmenu li.opensub > a.menu-top,
  91. #adminmenu li > a.menu-top:focus {
  92. color: $menu-highlight-text;
  93. background-color: $menu-highlight-background;
  94. }
  95. #adminmenu li.menu-top:hover div.wp-menu-image:before,
  96. #adminmenu li.opensub > a.menu-top div.wp-menu-image:before {
  97. color: $menu-highlight-icon;
  98. }
  99. /* Active tabs use a bottom border color that matches the page background color. */
  100. .about-wrap h2 .nav-tab-active,
  101. .nav-tab-active,
  102. .nav-tab-active:hover {
  103. background-color: $body-background;
  104. border-bottom-color: $body-background;
  105. }
  106. /* Admin Menu: submenu */
  107. #adminmenu .wp-submenu,
  108. #adminmenu .wp-has-current-submenu .wp-submenu,
  109. #adminmenu .wp-has-current-submenu.opensub .wp-submenu,
  110. .folded #adminmenu .wp-has-current-submenu .wp-submenu,
  111. #adminmenu a.wp-has-current-submenu:focus + .wp-submenu {
  112. background: $menu-submenu-background;
  113. }
  114. #adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after {
  115. border-right-color: $menu-submenu-background;
  116. }
  117. #adminmenu .wp-submenu .wp-submenu-head {
  118. color: $menu-submenu-text;
  119. }
  120. #adminmenu .wp-submenu a,
  121. #adminmenu .wp-has-current-submenu .wp-submenu a,
  122. .folded #adminmenu .wp-has-current-submenu .wp-submenu a,
  123. #adminmenu a.wp-has-current-submenu:focus + .wp-submenu a,
  124. #adminmenu .wp-has-current-submenu.opensub .wp-submenu a {
  125. color: $menu-submenu-text;
  126. &:focus, &:hover {
  127. color: $menu-submenu-focus-text;
  128. }
  129. }
  130. /* Admin Menu: current */
  131. #adminmenu .wp-submenu li.current a,
  132. #adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a,
  133. #adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a {
  134. color: $menu-submenu-current-text;
  135. &:hover, &:focus {
  136. color: $menu-submenu-focus-text;
  137. }
  138. }
  139. ul#adminmenu a.wp-has-current-submenu:after,
  140. ul#adminmenu > li.current > a.current:after {
  141. border-right-color: $body-background;
  142. }
  143. #adminmenu li.current a.menu-top,
  144. #adminmenu li.wp-has-current-submenu a.wp-has-current-submenu,
  145. #adminmenu li.wp-has-current-submenu .wp-submenu .wp-submenu-head,
  146. .folded #adminmenu li.current.menu-top {
  147. color: $menu-current-text;
  148. background: $menu-current-background;
  149. }
  150. #adminmenu li.wp-has-current-submenu div.wp-menu-image:before,
  151. #adminmenu a.current:hover div.wp-menu-image:before,
  152. #adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before,
  153. #adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before,
  154. #adminmenu li:hover div.wp-menu-image:before,
  155. #adminmenu li a:focus div.wp-menu-image:before,
  156. #adminmenu li.opensub div.wp-menu-image:before,
  157. .ie8 #adminmenu li.opensub div.wp-menu-image:before {
  158. color: $menu-current-icon;
  159. }
  160. /* Admin Menu: bubble */
  161. #adminmenu .awaiting-mod,
  162. #adminmenu .update-plugins {
  163. color: $menu-bubble-text;
  164. background: $menu-bubble-background;
  165. }
  166. #adminmenu li.current a .awaiting-mod,
  167. #adminmenu li a.wp-has-current-submenu .update-plugins,
  168. #adminmenu li:hover a .awaiting-mod,
  169. #adminmenu li.menu-top:hover > a .update-plugins {
  170. color: $menu-bubble-current-text;
  171. background: $menu-bubble-current-background;
  172. }
  173. /* Admin Menu: collapse button */
  174. #collapse-button {
  175. color: $menu-collapse-text;
  176. }
  177. #collapse-button:hover,
  178. #collapse-button:focus {
  179. color: $menu-submenu-focus-text;
  180. }
  181. /* Admin Bar */
  182. #wpadminbar {
  183. color: $menu-text;
  184. background: $menu-background;
  185. }
  186. #wpadminbar .ab-item,
  187. #wpadminbar a.ab-item,
  188. #wpadminbar > #wp-toolbar span.ab-label,
  189. #wpadminbar > #wp-toolbar span.noticon {
  190. color: $menu-text;
  191. }
  192. #wpadminbar .ab-icon,
  193. #wpadminbar .ab-icon:before,
  194. #wpadminbar .ab-item:before,
  195. #wpadminbar .ab-item:after {
  196. color: $menu-icon;
  197. }
  198. #wpadminbar:not(.mobile) .ab-top-menu > li:hover > .ab-item,
  199. #wpadminbar:not(.mobile) .ab-top-menu > li > .ab-item:focus,
  200. #wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus,
  201. #wpadminbar.nojs .ab-top-menu > li.menupop:hover > .ab-item,
  202. #wpadminbar .ab-top-menu > li.menupop.hover > .ab-item {
  203. color: $menu-submenu-focus-text;
  204. background: $menu-submenu-background;
  205. }
  206. #wpadminbar:not(.mobile) > #wp-toolbar li:hover span.ab-label,
  207. #wpadminbar:not(.mobile) > #wp-toolbar li.hover span.ab-label,
  208. #wpadminbar:not(.mobile) > #wp-toolbar a:focus span.ab-label {
  209. color: $menu-submenu-focus-text;
  210. }
  211. #wpadminbar:not(.mobile) li:hover .ab-icon:before,
  212. #wpadminbar:not(.mobile) li:hover .ab-item:before,
  213. #wpadminbar:not(.mobile) li:hover .ab-item:after,
  214. #wpadminbar:not(.mobile) li:hover #adminbarsearch:before {
  215. color: $menu-highlight-icon;
  216. }
  217. /* Admin Bar: submenu */
  218. #wpadminbar .menupop .ab-sub-wrapper {
  219. background: $menu-submenu-background;
  220. }
  221. #wpadminbar .quicklinks .menupop ul.ab-sub-secondary,
  222. #wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu {
  223. background: $menu-submenu-background-alt;
  224. }
  225. #wpadminbar .ab-submenu .ab-item,
  226. #wpadminbar .quicklinks .menupop ul li a,
  227. #wpadminbar .quicklinks .menupop.hover ul li a,
  228. #wpadminbar.nojs .quicklinks .menupop:hover ul li a {
  229. color: $menu-submenu-text;
  230. }
  231. #wpadminbar .quicklinks li .blavatar,
  232. #wpadminbar .menupop .menupop > .ab-item:before {
  233. color: $menu-icon;
  234. }
  235. #wpadminbar .quicklinks .menupop ul li a:hover,
  236. #wpadminbar .quicklinks .menupop ul li a:focus,
  237. #wpadminbar .quicklinks .menupop ul li a:hover strong,
  238. #wpadminbar .quicklinks .menupop ul li a:focus strong,
  239. #wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a,
  240. #wpadminbar .quicklinks .menupop.hover ul li a:hover,
  241. #wpadminbar .quicklinks .menupop.hover ul li a:focus,
  242. #wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover,
  243. #wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus,
  244. #wpadminbar li:hover .ab-icon:before,
  245. #wpadminbar li:hover .ab-item:before,
  246. #wpadminbar li a:focus .ab-icon:before,
  247. #wpadminbar li .ab-item:focus:before,
  248. #wpadminbar li .ab-item:focus .ab-icon:before,
  249. #wpadminbar li.hover .ab-icon:before,
  250. #wpadminbar li.hover .ab-item:before,
  251. #wpadminbar li:hover #adminbarsearch:before,
  252. #wpadminbar li #adminbarsearch.adminbar-focused:before {
  253. color: $menu-submenu-focus-text;
  254. }
  255. #wpadminbar .quicklinks li a:hover .blavatar,
  256. #wpadminbar .quicklinks li a:focus .blavatar,
  257. #wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a .blavatar,
  258. #wpadminbar .menupop .menupop > .ab-item:hover:before,
  259. #wpadminbar.mobile .quicklinks .ab-icon:before,
  260. #wpadminbar.mobile .quicklinks .ab-item:before {
  261. color: $menu-submenu-focus-text;
  262. }
  263. #wpadminbar.mobile .quicklinks .hover .ab-icon:before,
  264. #wpadminbar.mobile .quicklinks .hover .ab-item:before {
  265. color: $menu-icon;
  266. }
  267. /* Admin Bar: search */
  268. #wpadminbar #adminbarsearch:before {
  269. color: $menu-icon;
  270. }
  271. #wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input:focus {
  272. color: $menu-text;
  273. background: $adminbar-input-background;
  274. }
  275. /* Admin Bar: my account */
  276. #wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img {
  277. border-color: $adminbar-avatar-frame;
  278. background-color: $adminbar-avatar-frame;
  279. }
  280. #wpadminbar #wp-admin-bar-user-info .display-name {
  281. color: $menu-text;
  282. }
  283. #wpadminbar #wp-admin-bar-user-info a:hover .display-name {
  284. color: $menu-submenu-focus-text;
  285. }
  286. #wpadminbar #wp-admin-bar-user-info .username {
  287. color: $menu-submenu-text;
  288. }
  289. /* Pointers */
  290. .wp-pointer .wp-pointer-content h3 {
  291. background-color: $highlight-color;
  292. border-color: darken( $highlight-color, 5% );
  293. }
  294. .wp-pointer .wp-pointer-content h3:before {
  295. color: $highlight-color;
  296. }
  297. .wp-pointer.wp-pointer-top .wp-pointer-arrow,
  298. .wp-pointer.wp-pointer-top .wp-pointer-arrow-inner,
  299. .wp-pointer.wp-pointer-undefined .wp-pointer-arrow,
  300. .wp-pointer.wp-pointer-undefined .wp-pointer-arrow-inner {
  301. border-bottom-color: $highlight-color;
  302. }
  303. /* Media */
  304. .media-item .bar,
  305. .media-progress-bar div {
  306. background-color: $highlight-color;
  307. }
  308. .details.attachment {
  309. box-shadow:
  310. inset 0 0 0 3px #fff,
  311. inset 0 0 0 7px $highlight-color;
  312. }
  313. .attachment.details .check {
  314. background-color: $highlight-color;
  315. box-shadow: 0 0 0 1px #fff, 0 0 0 2px $highlight-color;
  316. }
  317. .media-selection .attachment.selection.details .thumbnail {
  318. box-shadow: 0 0 0 1px #fff, 0 0 0 3px $highlight-color;
  319. }
  320. /* Themes */
  321. .theme-browser .theme.active .theme-name,
  322. .theme-browser .theme.add-new-theme a:hover:after,
  323. .theme-browser .theme.add-new-theme a:focus:after {
  324. background: $highlight-color;
  325. }
  326. .theme-browser .theme.add-new-theme a:hover span:after,
  327. .theme-browser .theme.add-new-theme a:focus span:after {
  328. color: $highlight-color;
  329. }
  330. .theme-section.current,
  331. .theme-filter.current {
  332. border-bottom-color: $menu-background;
  333. }
  334. body.more-filters-opened .more-filters {
  335. color: $menu-text;
  336. background-color: $menu-background;
  337. }
  338. body.more-filters-opened .more-filters:before {
  339. color: $menu-text;
  340. }
  341. body.more-filters-opened .more-filters:hover,
  342. body.more-filters-opened .more-filters:focus {
  343. background-color: $menu-highlight-background;
  344. color: $menu-highlight-text;
  345. }
  346. body.more-filters-opened .more-filters:hover:before,
  347. body.more-filters-opened .more-filters:focus:before {
  348. color: $menu-highlight-text;
  349. }
  350. /* Widgets */
  351. .widgets-chooser li.widgets-chooser-selected {
  352. background-color: $menu-highlight-background;
  353. color: $menu-highlight-text;
  354. }
  355. .widgets-chooser li.widgets-chooser-selected:before,
  356. .widgets-chooser li.widgets-chooser-selected:focus:before {
  357. color: $menu-highlight-text;
  358. }
  359. /* Responsive Component */
  360. div#wp-responsive-toggle a:before {
  361. color: $menu-icon;
  362. }
  363. .wp-responsive-open div#wp-responsive-toggle a {
  364. // ToDo: make inset border
  365. border-color: transparent;
  366. background: $menu-highlight-background;
  367. }
  368. .wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a {
  369. background: $menu-submenu-background;
  370. }
  371. .wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before {
  372. color: $menu-icon;
  373. }
  374. /* TinyMCE */
  375. .mce-container.mce-menu .mce-menu-item:hover,
  376. .mce-container.mce-menu .mce-menu-item.mce-selected,
  377. .mce-container.mce-menu .mce-menu-item:focus,
  378. .mce-container.mce-menu .mce-menu-item-normal.mce-active,
  379. .mce-container.mce-menu .mce-menu-item-preview.mce-active {
  380. background: $highlight-color;
  381. }