説明なし

admin-menu.css 10KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471
  1. #adminmenu {
  2. margin: 0;
  3. }
  4. /**
  5. * Menu width
  6. */
  7. #wpcontent,
  8. #wpfooter {
  9. margin-left: 272px;
  10. }
  11. #adminmenuback,
  12. #adminmenuwrap,
  13. #adminmenu,
  14. #adminmenu .wp-submenu {
  15. width: 272px;
  16. }
  17. #adminmenu .wp-submenu {
  18. left: 272px;
  19. }
  20. #adminmenu .wp-not-current-submenu .wp-submenu,
  21. .folded #adminmenu .wp-has-current-submenu .wp-submenu {
  22. min-width: 272px;
  23. }
  24. /**
  25. * Fixes Gutenberg in not fullscreen mode.
  26. */
  27. @media (min-width: 783px) {
  28. .interface-interface-skeleton,
  29. .edit-post-layout .components-editor-notices__snackbar {
  30. left: 272px;
  31. }
  32. }
  33. @media (min-width: 961px) {
  34. .auto-fold .interface-interface-skeleton,
  35. .auto-fold .edit-post-layout .components-editor-notices__snackbar,
  36. .jp-dialogue-modern-full__container {
  37. left: 272px;
  38. }
  39. .global-notices {
  40. max-width: calc( 100% - 48px - 272px );
  41. }
  42. }
  43. /**
  44. * Jetpack logo
  45. */
  46. #adminmenu [class*="activity-log"] .wp-menu-image img {
  47. padding-top: 7px;
  48. }
  49. /**
  50. * Site Card
  51. */
  52. #adminmenu .toplevel_page_site-card .wp-menu-name {
  53. margin-left: 40px; /* icon width (32) + padding (8). */
  54. padding: 0;
  55. }
  56. #adminmenu li.toplevel_page_site-card a {
  57. padding: 10px 0 10px 8px;
  58. }
  59. /**
  60. * Site Notices
  61. */
  62. #adminmenu a.toplevel_page_site-notices:hover,
  63. #adminmenu a.toplevel_page_site-notices:focus,
  64. #adminmenu li.toplevel_page_site-notices:hover,
  65. #adminmenu li.toplevel_page_site-notices:focus {
  66. background-color: inherit !important;
  67. color: inherit !important;
  68. }
  69. #adminmenu li.toplevel_page_site-notices .wp-menu-image {
  70. display: none;
  71. }
  72. #adminmenu .toplevel_page_site-notices .wp-menu-image {
  73. border-radius: 2px;
  74. background-color: #fff;
  75. }
  76. #adminmenu .toplevel_page_site-notices .wp-menu-image:before {
  77. content: '\f534';
  78. font-family: 'dashicons';
  79. font-size: 20px;
  80. line-height: 20px;
  81. background-color: #a7aaad;
  82. color: white;
  83. border-radius: 50%;
  84. margin: 5px;
  85. padding: 0;
  86. }
  87. #adminmenu .toplevel_page_site-notices:hover .wp-menu-image:before {
  88. color: #fff;
  89. }
  90. #adminmenu .toplevel_page_site-notices .upsell_banner {
  91. display: flex;
  92. flex-grow: 1;
  93. flex-wrap: nowrap;
  94. align-items: center;
  95. justify-content: space-between;
  96. position: relative;
  97. width: 100%;
  98. padding: 7px 12px;
  99. left: -28px;
  100. border-radius: 2px;
  101. font-size: 12px;
  102. line-height: 1.4;
  103. hyphens: none;
  104. }
  105. #adminmenu .toplevel_page_site-notices .upsell_banner .banner__info {
  106. margin-right: 12px;
  107. }
  108. #adminmenu .toplevel_page_site-notices .upsell_banner .button {
  109. font-size: 12px;
  110. line-height: 12px;
  111. padding: 0 7px;
  112. border: 0;
  113. min-height: 26px;
  114. }
  115. @media screen and (min-width: 782px) {
  116. .folded #adminmenu .toplevel_page_site-notices .wp-menu-image {
  117. display: block;
  118. width: 30px;
  119. }
  120. .folded #adminmenu .toplevel_page_site-notices {
  121. height: 50px;
  122. display: flex;
  123. align-items: center;
  124. justify-content: center;
  125. }
  126. }
  127. @media screen and (min-width: 782px) and (max-width: 960px){
  128. .auto-fold #adminmenu .toplevel_page_site-notices .wp-menu-image {
  129. display: block;
  130. width: 30px;
  131. }
  132. .auto-fold #adminmenu .toplevel_page_site-notices {
  133. height: 50px;
  134. display: flex;
  135. align-items: center;
  136. justify-content: center;
  137. }
  138. }
  139. /* Prevent box-shadow at the top of the sidebar */
  140. #adminmenu .site-switcher:hover,
  141. #adminmenu .toplevel_page_site-card:hover,
  142. #adminmenu .toplevel_page_site-notices:hover {
  143. box-shadow: none;
  144. }
  145. /**
  146. * Site icon inline-styles for height and width are defined in set_site_icon_inline_styles
  147. */
  148. #adminmenu .toplevel_page_site-card .wp-menu-image {
  149. background-image: none;
  150. background-position: center;
  151. background-repeat: no-repeat;
  152. background-size: 18px 18px;
  153. transform: translateZ(0);
  154. transition-property: background-image,background-color;
  155. transition-duration: .2s;
  156. }
  157. #adminmenu a.toplevel_page_site-card:hover,
  158. #adminmenu li.toplevel_page_site-card:hover {
  159. background-color: inherit;
  160. }
  161. #adminmenu .toplevel_page_site-card img {
  162. opacity: initial;
  163. }
  164. #adminmenu .toplevel_page_site-card.has-site-icon img {
  165. padding: 0;
  166. }
  167. #adminmenu .toplevel_page_site-card:hover div.wp-menu-image,
  168. #adminmenu .toplevel_page_site-card a:focus div.wp-menu-image {
  169. background-image: url("data:image/svg+xml,%3Csvg class='gridicon gridicons-house' height='24' width='24' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg%3E%3Cpath fill='%23fff' d='M22 9L12 1 2 9v2h2v10h5v-4c0-1.657 1.343-3 3-3s3 1.343 3 3v4h5V11h2V9z'/%3E%3C/g%3E%3C/svg%3E%0A");
  170. }
  171. #adminmenu .toplevel_page_site-card:not(.has-site-icon) .wp-menu-image {
  172. background-color: #c3c4c7;
  173. }
  174. #adminmenu .toplevel_page_site-card:not(.has-site-icon) .wp-menu-image img[src^="data:image/svg"] {
  175. height: auto;
  176. padding-top: 7px;
  177. width: 18px;
  178. }
  179. #adminmenu .toplevel_page_site-card:hover div.wp-menu-image img,
  180. #adminmenu .toplevel_page_site-card a:focus div.wp-menu-image img {
  181. display: none;
  182. }
  183. .site__info .site__title {
  184. display: block;
  185. font-size: 14px;
  186. font-weight: 400;
  187. line-height: 1.3;
  188. }
  189. .site__info .site__domain {
  190. display: block;
  191. max-width: 95%;
  192. font-size: 12px;
  193. line-height: 1.4;
  194. margin-top: 2px;
  195. }
  196. .site__info .site__title,
  197. .site__info .site__domain {
  198. overflow: hidden;
  199. white-space: nowrap;
  200. }
  201. .site__info .site__title::after,
  202. .site__info .site__domain::after {
  203. content: "";
  204. display: block;
  205. position: absolute;
  206. -webkit-touch-callout: none;
  207. -webkit-user-select: none;
  208. user-select: none;
  209. pointer-events: none;
  210. top: 0;
  211. bottom: 0;
  212. right: 0;
  213. left: auto;
  214. width: 20%;
  215. height: auto;
  216. }
  217. .site__info > .site__badge {
  218. font-size: 12px;
  219. border-radius: 12px;
  220. clear: both;
  221. display: inline-block;
  222. margin-top: 6px;
  223. margin-right: 3px;
  224. padding: 1px 10px;
  225. }
  226. /**
  227. * Inline text in a menu title
  228. */
  229. .inline-text {
  230. display: block !important;
  231. position: absolute;
  232. right: 20px;
  233. top: 50%;
  234. transform: translateY( -50% );
  235. opacity: 0.8;
  236. }
  237. /**
  238. * Stats
  239. */
  240. [class*="toplevel_page_https://wordpress.com/stats/day"] .sidebar-unified__sparkline {
  241. float: right;
  242. margin-right: 8px;
  243. }
  244. /**
  245. * Folded State
  246. */
  247. .folded #adminmenu a.menu-top {
  248. height: 31px;
  249. }
  250. .folded #adminmenu li.toplevel_page_site-card a {
  251. padding-left: 0;
  252. }
  253. /* Auto-folding of the admin menu */
  254. @media only screen and (max-width: 960px) {
  255. #adminmenu,
  256. #adminmenuwrap,
  257. #adminmenuback {
  258. width: 272px;
  259. }
  260. .auto-fold #adminmenu a[class*="toplevel_page_http"].wp-first-item {
  261. height: auto;
  262. }
  263. .wp-responsive-open #adminmenu a.menu-top {
  264. height: auto;
  265. }
  266. .auto-fold #adminmenu div.wp-menu-image {
  267. width: 36px;
  268. }
  269. }
  270. @media screen and (min-width: 782px) and (max-width: 960px) {
  271. .auto-fold #adminmenu a.menu-top {
  272. height: 34px;
  273. }
  274. .auto-fold #adminmenu li.toplevel_page_site-card a {
  275. height: 36px;
  276. padding-left: 1px;
  277. }
  278. }
  279. @media screen and (max-width: 782px) {
  280. #adminmenu li.menu-top .wp-submenu>li>a,
  281. .auto-fold #adminmenu li.menu-top .wp-submenu>li>a {
  282. padding-left: 42px;
  283. }
  284. .auto-fold #adminmenu, .auto-fold #adminmenuback, .auto-fold #adminmenuwrap {
  285. width: 272px;
  286. }
  287. .auto-fold #adminmenu a.site-switcher,
  288. #adminmenu a.site-switcher {
  289. font-size: 14px;
  290. }
  291. }
  292. @media only screen and (max-width: 660px) {
  293. #adminmenuback,
  294. #adminmenuwrap,
  295. #adminmenu,
  296. #adminmenu .wp-submenu,
  297. .auto-fold #adminmenu,
  298. .auto-fold #adminmenuback,
  299. .auto-fold #adminmenuwrap {
  300. width: 100%;
  301. z-index: 171;
  302. }
  303. ul#adminmenu a.wp-has-current-submenu:after,
  304. ul#adminmenu>li.current>a.current:after,
  305. ul#adminmenu li:hover a.wp-has-current-submenu:after,
  306. .auto-fold ul#adminmenu li:hover a.wp-has-current-submenu:after {
  307. display: none;
  308. }
  309. .auto-fold #adminmenu li.toplevel_page_site-card a {
  310. padding: 18px 0 18px 12px;
  311. }
  312. }
  313. /*
  314. * Styles for the nav-unification prototype (see pbAPfg-O2)
  315. * TODO: depending on project outcome move or delete styles
  316. */
  317. #wpadminbar #wp-admin-bar-notes #wpnt-notes-unread-count.wpn-unread {
  318. top: 50%;
  319. left: 50%;
  320. transform: translate( -10px, -13px );
  321. }
  322. #wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar {
  323. transform: translateX( 1px );
  324. }
  325. #wpadminbar #wp-admin-bar-notes.active .noticon-bell:before {
  326. background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ij48cmVjdCB4PSIwIiBmaWxsPSJub25lIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiLz48Zz48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNNi4xNCAxNC45N2wyLjgyOCAyLjgyN2MtLjM2Mi4zNjItLjg2Mi41ODYtMS40MTQuNTg2LTEuMTA1IDAtMi0uODk1LTItMiAwLS41NTIuMjI0LTEuMDUyLjU4Ni0xLjQxNHptOC44NjcgNS4zMjRMMTQuMyAyMSAzIDkuN2wuNzA2LS43MDcgMS4xMDIuMTU3Yy43NTQuMTA4IDEuNjktLjEyMiAyLjA3Ny0uNTFsMy44ODUtMy44ODRjMi4zNC0yLjM0IDYuMTM1LTIuMzQgOC40NzUgMHMyLjM0IDYuMTM1IDAgOC40NzVsLTMuODg1IDMuODg2Yy0uMzg4LjM4OC0uNjE4IDEuMzIzLS41MSAyLjA3N2wuMTU3IDEuMXoiLz48L2c+PC9zdmc+") !important;
  327. }
  328. #wpadminbar > #wp-toolbar .wpnt-show span.noticon,
  329. #wpadminbar #wp-admin-bar-notes.wpnt-show .noticon {
  330. color: #ffffff;
  331. }
  332. #wpadminbar .quicklinks ul#wp-admin-bar-root-default {
  333. padding-left: 0 !important;
  334. }
  335. #wpadminbar #wp-admin-bar-menu-toggle {
  336. display: none;
  337. }
  338. @media screen and (max-width: 782px) {
  339. #wpadminbar #wp-toolbar > ul > li {
  340. display: block;
  341. }
  342. #wpadminbar .ab-top-menu > li > .ab-item {
  343. box-sizing: border-box;
  344. line-height: 32px;
  345. }
  346. #wpadminbar #wp-admin-bar-ab-new-post > .ab-item {
  347. box-sizing: inherit !important;
  348. }
  349. #wpadminbar #wp-admin-bar-my-account > .ab-item {
  350. padding: 7px 15px;
  351. width: auto;
  352. }
  353. #wpadminbar #wp-toolbar.quicklinks li#wp-admin-bar-my-account.with-avatar > a img {
  354. display: block;
  355. right: auto;
  356. left: auto;
  357. position: static;
  358. margin-top: 3px;
  359. top: 13px;
  360. }
  361. /* Hide debug bar. */
  362. #wpadminbar #wp-toolbar.quicklinks li#wp-admin-bar-debug-bar {
  363. display: none;
  364. }
  365. }
  366. @media screen and (max-width: 480px) {
  367. #wpadminbar #wp-toolbar.quicklinks li#wp-admin-bar-my-account.with-avatar > a {
  368. width: auto;
  369. }
  370. #wpadminbar #wp-toolbar.quicklinks li#wp-admin-bar-my-account.with-avatar > a img {
  371. margin-top: 12px;
  372. }
  373. }
  374. /* Fixes the order of screen options,
  375. * showing the dashboard switcher button always first.
  376. */
  377. #adv-settings {
  378. display: flex;
  379. flex-direction: column;
  380. }
  381. /* Switcher should always be in the top */
  382. #adv-settings #dashboard-switcher {
  383. order: 0;
  384. }
  385. #adv-settings .dashboard-switcher-text {
  386. margin-top: 0;
  387. }
  388. #adv-settings .dashboard-switcher-button {
  389. padding: 3px 16px;
  390. }
  391. /* Core registered options should be after the switcher */
  392. #adv-settings fieldset {
  393. order: 1;
  394. }
  395. /* Submit button should always be in the bottom */
  396. #adv-settings .submit {
  397. order: 2;
  398. }