Sin descripción

admin-menu-rtl.css 10KB

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