themes.css 39 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929
  1. /*------------------------------------------------------------------------------
  2. 16.0 - Themes
  3. ------------------------------------------------------------------------------*/
  4. /*------------------------------------------------------------------------------
  5. 16.1 - Manage Themes
  6. ------------------------------------------------------------------------------*/
  7. body.js .theme-browser.search-loading {
  8. display: none;
  9. }
  10. .theme-browser .themes {
  11. clear: both;
  12. }
  13. .themes-php:not(.network-admin) .wrap h1 {
  14. margin-bottom: 15px;
  15. }
  16. .themes-php .wrap h1 .button {
  17. margin-left: 20px;
  18. }
  19. /* Search form */
  20. .themes-php .search-form {
  21. display: inline;
  22. }
  23. .themes-php .wp-filter-search {
  24. position: relative;
  25. top: -2px;
  26. left: 20px;
  27. margin: 0;
  28. width: 280px;
  29. font-size: 16px;
  30. font-weight: 300;
  31. line-height: 1.5;
  32. }
  33. /* Position admin messages */
  34. .theme .notice,
  35. .theme .notice.is-dismissible {
  36. left: 0;
  37. margin: 0;
  38. position: absolute;
  39. right: 0;
  40. top: 0;
  41. }
  42. /**
  43. * Main theme element
  44. * (has flexible margins)
  45. */
  46. .theme-browser .theme {
  47. cursor: pointer;
  48. float: left;
  49. margin: 0 4% 4% 0;
  50. position: relative;
  51. width: 30.6%;
  52. border: 1px solid #ddd;
  53. box-shadow: 0 1px 1px -1px rgba(0,0,0,0.1);
  54. box-sizing: border-box;
  55. }
  56. .ie8 .theme-browser .theme {
  57. width: 30%;
  58. margin: 0 3% 4% 0;
  59. }
  60. .theme-browser .theme:nth-child(3n) {
  61. margin-right: 0;
  62. }
  63. .theme-browser .theme:hover,
  64. .theme-browser .theme:focus {
  65. cursor: pointer;
  66. }
  67. .theme-browser .theme .theme-name {
  68. font-size: 15px;
  69. font-weight: 600;
  70. height: 18px;
  71. margin: 0;
  72. padding: 15px;
  73. box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
  74. overflow: hidden;
  75. white-space: nowrap;
  76. text-overflow: ellipsis;
  77. background: #fff;
  78. background: rgba(255,255,255,0.65);
  79. }
  80. /* Activate and Customize buttons, shown on hover and focus */
  81. .theme-browser .theme .theme-actions {
  82. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  83. opacity: 0;
  84. transition: opacity 0.1s ease-in-out;
  85. height: auto;
  86. background: rgba(244, 244, 244, 0.7);
  87. border-left: 1px solid rgba(0,0,0,0.05);
  88. }
  89. .theme-browser .theme:hover .theme-actions,
  90. .theme-browser .theme.focus .theme-actions,
  91. .theme-browser .theme:focus .theme-actions {
  92. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  93. opacity: 1;
  94. }
  95. .theme-browser .theme .theme-actions .button-primary {
  96. margin-right: 3px;
  97. }
  98. .theme-browser .theme .theme-actions .button {
  99. float: none;
  100. margin-left: 3px;
  101. }
  102. /**
  103. * Theme Screenshot
  104. *
  105. * Has a fixed aspect ratio of 1.5 to 1 regardless of screenshot size
  106. * It is also responsive.
  107. */
  108. .theme-browser .theme .theme-screenshot {
  109. display: block;
  110. overflow: hidden;
  111. position: relative;
  112. -webkit-backface-visibility: hidden; /* Prevents flicker of the screenshot on hover. */
  113. transition: opacity 0.2s ease-in-out;
  114. }
  115. .theme-browser .theme .theme-screenshot:after {
  116. content: "";
  117. display: block;
  118. padding-top: 66.66666%; /* using a 3/2 aspect ratio */
  119. }
  120. .theme-browser .theme .theme-screenshot img {
  121. height: auto;
  122. position: absolute;
  123. left: 0;
  124. top: 0;
  125. width: 100%;
  126. transition: opacity 0.2s ease-in-out;
  127. }
  128. .theme-browser .theme:hover .theme-screenshot,
  129. .theme-browser .theme:focus .theme-screenshot {
  130. background: #fff;
  131. }
  132. .theme-browser.rendered .theme:hover .theme-screenshot img,
  133. .theme-browser.rendered .theme:focus .theme-screenshot img {
  134. opacity: 0.4;
  135. }
  136. .theme-browser .theme .more-details {
  137. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  138. opacity: 0;
  139. position: absolute;
  140. top: 35%;
  141. right: 20%;
  142. left: 20%;
  143. background: #23282d;
  144. background: rgba(0,0,0,0.7);
  145. color: #fff;
  146. font-size: 15px;
  147. text-shadow: 0 1px 0 rgba(0,0,0,0.6);
  148. -webkit-font-smoothing: antialiased;
  149. font-weight: 600;
  150. padding: 15px 12px;
  151. text-align: center;
  152. border-radius: 3px;
  153. transition: opacity 0.1s ease-in-out;
  154. }
  155. .theme-browser .theme:focus {
  156. border-color: #5b9dd9;
  157. box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 );
  158. }
  159. .theme-browser .theme:focus .more-details {
  160. opacity: 1;
  161. }
  162. /* Current theme needs to have its action always on view */
  163. .theme-browser .theme.active:focus .theme-actions {
  164. display: block;
  165. }
  166. .theme-browser.rendered .theme:hover .more-details,
  167. .theme-browser.rendered .theme:focus .more-details {
  168. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  169. opacity: 1;
  170. }
  171. /**
  172. * The currently active theme
  173. */
  174. .theme-browser .theme.active .theme-name {
  175. background: #23282d;
  176. color: #fff;
  177. padding-right: 110px;
  178. font-weight: 300;
  179. box-shadow: inset 0 1px 1px rgba(0,0,0,0.5);
  180. }
  181. .theme-browser .customize-control .theme.active .theme-name {
  182. padding-right: 15px;
  183. }
  184. .theme-browser .theme.active .theme-name span {
  185. font-weight: 600;
  186. }
  187. .theme-browser .theme.active .theme-actions {
  188. background: rgba(49,49,49,0.7);
  189. border-left: none;
  190. opacity: 1;
  191. }
  192. .theme-id-container {
  193. position: relative;
  194. }
  195. .theme-browser .theme.active .theme-actions,
  196. .theme-browser .theme .theme-actions {
  197. position: absolute;
  198. top: 50%;
  199. -webkit-transform: translateY(-50%);
  200. transform: translateY(-50%);
  201. right: 0;
  202. padding: 10px 15px;
  203. box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
  204. }
  205. .theme-browser .theme.active .theme-actions .button-primary {
  206. margin-right: 0;
  207. }
  208. .theme-browser .theme .theme-author {
  209. background: #23282d;
  210. color: #eee;
  211. display: none;
  212. font-size: 14px;
  213. margin: 0 10px;
  214. padding: 5px 10px;
  215. position: absolute;
  216. bottom: 56px;
  217. }
  218. .theme-browser .theme.display-author .theme-author {
  219. display: block;
  220. }
  221. .theme-browser .theme.display-author .theme-author a {
  222. color: inherit;
  223. text-decoration: none;
  224. }
  225. /**
  226. * Add new theme
  227. */
  228. .theme-browser .theme.add-new-theme {
  229. border: none;
  230. box-shadow: none;
  231. }
  232. .theme-browser .theme.add-new-theme a {
  233. text-decoration: none;
  234. display: block;
  235. position: relative;
  236. z-index: 1;
  237. }
  238. .theme-browser .theme.add-new-theme a:after {
  239. display: block;
  240. content: "";
  241. background: transparent;
  242. background: rgba(0, 0, 0, 0);
  243. position: absolute;
  244. top: 0;
  245. left: 0;
  246. right: 0;
  247. bottom: 0;
  248. padding: 0;
  249. text-shadow: none;
  250. border: 5px dashed #d5d2ca;
  251. border: 5px dashed rgba(0, 0, 0, 0.1);
  252. box-sizing: border-box;
  253. }
  254. .theme-browser .theme.add-new-theme span:after {
  255. background: #e5e5e5;
  256. background: rgba(153, 153, 153, 0.1);
  257. border-radius: 50%;
  258. display: inline-block;
  259. content: "\f132";
  260. -webkit-font-smoothing: antialiased;
  261. font: normal 74px/115px dashicons;
  262. width: 100px;
  263. height: 100px;
  264. vertical-align: middle;
  265. text-align: center;
  266. color: rgb(153, 153, 153);
  267. position: absolute;
  268. top: 30%;
  269. left: 50%;
  270. margin-left: -50px;
  271. text-indent: -4px;
  272. padding: 0;
  273. text-shadow: none;
  274. z-index:4;
  275. }
  276. .rtl .theme-browser .theme.add-new-theme span:after {
  277. text-indent: 4px;
  278. }
  279. .theme-browser .theme.add-new-theme a:hover .theme-screenshot,
  280. .theme-browser .theme.add-new-theme a:focus .theme-screenshot {
  281. background: none;
  282. }
  283. .theme-browser .theme.add-new-theme a:hover span:after,
  284. .theme-browser .theme.add-new-theme a:focus span:after {
  285. background: #fff;
  286. color: #0073aa;
  287. }
  288. .theme-browser .theme.add-new-theme a:hover:after,
  289. .theme-browser .theme.add-new-theme a:focus:after {
  290. border-color: transparent;
  291. color: #fff;
  292. background: #0073aa;
  293. content: "";
  294. }
  295. .theme-browser .theme.add-new-theme .theme-name {
  296. background: none;
  297. text-align: center;
  298. box-shadow: none;
  299. font-weight: 400;
  300. position: relative;
  301. top: 0;
  302. margin-top: -18px;
  303. padding-top: 0;
  304. padding-bottom: 48px;
  305. }
  306. .theme-browser .theme.add-new-theme a:hover .theme-name,
  307. .theme-browser .theme.add-new-theme a:focus .theme-name {
  308. color: #fff;
  309. z-index: 2;
  310. }
  311. /**
  312. * Theme Overlay
  313. * Shown when clicking a theme
  314. */
  315. .theme-overlay .theme-backdrop {
  316. position: absolute;
  317. left: -20px;
  318. right: 0;
  319. top: 0;
  320. bottom: 0;
  321. background: #f1f1f1;
  322. background: rgba( 238, 238, 238, 0.9 );
  323. z-index: 10000; /* Over WP Pointers. */
  324. }
  325. .theme-overlay .theme-header {
  326. position: absolute;
  327. top: 0;
  328. left: 0;
  329. right: 0;
  330. height: 48px;
  331. border-bottom: 1px solid #ddd;
  332. }
  333. .theme-overlay .theme-header button {
  334. padding: 0;
  335. }
  336. .theme-overlay .theme-header .close {
  337. cursor: pointer;
  338. height: 48px;
  339. width: 50px;
  340. text-align: center;
  341. float: right;
  342. border: 0;
  343. border-left: 1px solid #ddd;
  344. background-color: transparent;
  345. transition: color .1s ease-in-out, background .1s ease-in-out;
  346. }
  347. .theme-overlay .theme-header .close:before {
  348. font: normal 22px/50px dashicons !important;
  349. color: #72777c;
  350. display: inline-block;
  351. content: "\f335";
  352. font-weight: 300;
  353. }
  354. /* Left and right navigation */
  355. .theme-overlay .theme-header .right,
  356. .theme-overlay .theme-header .left {
  357. cursor: pointer;
  358. color: #72777c;
  359. background-color: transparent;
  360. height: 48px;
  361. width: 54px;
  362. float: left;
  363. text-align: center;
  364. border: 0;
  365. border-right: 1px solid #ddd;
  366. transition: color .1s ease-in-out, background .1s ease-in-out;
  367. }
  368. .theme-overlay .theme-header .close:focus,
  369. .theme-overlay .theme-header .close:hover,
  370. .theme-overlay .theme-header .right:focus,
  371. .theme-overlay .theme-header .right:hover,
  372. .theme-overlay .theme-header .left:focus,
  373. .theme-overlay .theme-header .left:hover {
  374. background: #ddd;
  375. border-color: #ccc;
  376. color: #000;
  377. }
  378. .theme-overlay .theme-header .close:focus:before,
  379. .theme-overlay .theme-header .close:hover:before {
  380. color: #000;
  381. }
  382. .theme-overlay .theme-header .close:focus,
  383. .theme-overlay .theme-header .right:focus,
  384. .theme-overlay .theme-header .left:focus {
  385. box-shadow: none;
  386. outline: none;
  387. }
  388. .theme-overlay .theme-header .left.disabled,
  389. .theme-overlay .theme-header .right.disabled,
  390. .theme-overlay .theme-header .left.disabled:hover,
  391. .theme-overlay .theme-header .right.disabled:hover {
  392. color: #ccc;
  393. background: inherit;
  394. cursor: inherit;
  395. }
  396. .theme-overlay .theme-header .right:before,
  397. .theme-overlay .theme-header .left:before {
  398. font: normal 20px/50px dashicons !important;
  399. display: inline;
  400. font-weight: 300;
  401. }
  402. .theme-overlay .theme-header .left:before {
  403. content: "\f341";
  404. }
  405. .theme-overlay .theme-header .right:before {
  406. content: "\f345";
  407. }
  408. .theme-overlay .theme-wrap {
  409. clear: both;
  410. position: fixed;
  411. top: 9%;
  412. left: 190px;
  413. right: 30px;
  414. bottom: 3%;
  415. background: #fff;
  416. box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.1);
  417. z-index: 10000; /* Over WP Pointers. */
  418. box-sizing: border-box;
  419. -webkit-overflow-scrolling: touch;
  420. }
  421. body.folded .theme-browser ~ .theme-overlay .theme-wrap {
  422. left: 70px;
  423. }
  424. .theme-overlay .theme-about {
  425. position: absolute;
  426. top: 49px;
  427. bottom: 57px;
  428. left: 0;
  429. right: 0;
  430. overflow: auto;
  431. padding: 2% 4%;
  432. }
  433. .theme-overlay .theme-actions {
  434. position: absolute;
  435. text-align: center;
  436. bottom: 0;
  437. left: 0;
  438. right: 0;
  439. padding: 10px 25px 5px;
  440. background: #f3f3f3;
  441. z-index: 30;
  442. box-sizing: border-box;
  443. border-top: 1px solid #eee;
  444. }
  445. .ie8 .theme-overlay .theme-actions {
  446. border: 1px solid #eee;
  447. }
  448. .theme-overlay .theme-actions a {
  449. margin-right: 5px;
  450. margin-bottom: 5px;
  451. }
  452. /* Hide-if-customize for items we can't add classes to */
  453. .customize-support .theme-overlay .theme-actions a[href="themes.php?page=custom-header"],
  454. .customize-support .theme-overlay .theme-actions a[href="themes.php?page=custom-background"] {
  455. display: none;
  456. }
  457. .broken-themes a.delete-theme,
  458. .theme-overlay .theme-actions .delete-theme {
  459. color: #a00;
  460. text-decoration: none;
  461. border-color: transparent;
  462. box-shadow: none;
  463. background: transparent;
  464. }
  465. .theme-overlay .theme-actions .delete-theme {
  466. position: absolute;
  467. right: 10px;
  468. bottom: 5px;
  469. }
  470. .broken-themes a.delete-theme:hover,
  471. .broken-themes a.delete-theme:focus,
  472. .theme-overlay .theme-actions .delete-theme:hover,
  473. .theme-overlay .theme-actions .delete-theme:focus {
  474. background: #d54e21;
  475. color: #fff;
  476. border-color: #d54e21;
  477. }
  478. .theme-overlay .theme-actions .active-theme,
  479. .theme-overlay.active .theme-actions .inactive-theme {
  480. display: none;
  481. }
  482. .theme-overlay .theme-actions .inactive-theme,
  483. .theme-overlay.active .theme-actions .active-theme {
  484. display: block;
  485. }
  486. /**
  487. * Theme Screenshots gallery
  488. */
  489. .theme-overlay .theme-screenshots {
  490. float: left;
  491. margin: 0 30px 0 0;
  492. width: 55%;
  493. max-width: 1200px; /* Recommended theme screenshot width, set here to avoid stretching */
  494. text-align: center;
  495. }
  496. /* First screenshot, shown big */
  497. .theme-overlay .screenshot {
  498. border: 1px solid #fff;
  499. box-sizing: border-box;
  500. overflow: hidden;
  501. position: relative;
  502. box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
  503. }
  504. .theme-overlay .screenshot:after {
  505. content: "";
  506. display: block;
  507. padding-top: 75%; /* using a 4/3 aspect ratio */
  508. }
  509. .theme-overlay .screenshot img {
  510. height: auto;
  511. position: absolute;
  512. left: 0;
  513. top: 0;
  514. width: 100%;
  515. }
  516. /* Handles old 300px screenshots */
  517. .theme-overlay.small-screenshot .theme-screenshots {
  518. position: absolute;
  519. width: 302px;
  520. }
  521. .theme-overlay.small-screenshot .theme-info {
  522. margin-left: 350px;
  523. width: auto;
  524. }
  525. /* Other screenshots, shown small and square */
  526. .theme-overlay .screenshot.thumb {
  527. background: #ccc;
  528. border: 1px solid #eee;
  529. float: none;
  530. display: inline-block;
  531. margin: 10px 5px 0;
  532. width: 140px;
  533. height: 80px;
  534. cursor: pointer;
  535. }
  536. .theme-overlay .screenshot.thumb:after {
  537. content: "";
  538. display: block;
  539. padding-top: 100%; /* using a 1/1 aspect ratio */
  540. }
  541. .theme-overlay .screenshot.thumb img {
  542. cursor: pointer;
  543. height: auto;
  544. position: absolute;
  545. left: 0;
  546. top: 0;
  547. width: 100%;
  548. height: auto;
  549. }
  550. .theme-overlay .screenshot.selected {
  551. background: transparent;
  552. border: 2px solid #00a0d2;
  553. }
  554. .theme-overlay .screenshot.selected img {
  555. opacity: 0.8;
  556. }
  557. /* No screenshot placeholder */
  558. .theme-browser .theme .theme-screenshot.blank,
  559. .theme-overlay .screenshot.blank {
  560. background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYGWO8d+/efwYkoKioiMRjYGBC4WHhUK6A8T8QIJt8//59ZC493AAAQssKpBK4F5AAAAAASUVORK5CYII=);
  561. }
  562. /**
  563. * Theme heading information
  564. */
  565. .theme-overlay .theme-info {
  566. width: 40%;
  567. float: left;
  568. }
  569. .theme-overlay .current-label {
  570. background: #32373c;
  571. color: #fff;
  572. font-size: 11px;
  573. display: inline-block;
  574. padding: 2px 8px;
  575. border-radius: 2px;
  576. margin: 0 0 -10px;
  577. -webkit-user-select: none;
  578. -moz-user-select: none;
  579. -ms-user-select: none;
  580. user-select: none;
  581. }
  582. .theme-overlay .theme-name {
  583. color: #23282d;
  584. font-size: 32px;
  585. font-weight: 100;
  586. margin: 10px 0 0;
  587. line-height: 1.3;
  588. word-wrap: break-word;
  589. overflow-wrap: break-word;
  590. }
  591. .theme-overlay .theme-version {
  592. color: #72777c;
  593. font-size: 13px;
  594. font-weight: 400;
  595. float: none;
  596. display: inline-block;
  597. margin-left: 10px;
  598. }
  599. .theme-overlay .theme-author {
  600. margin: 15px 0 25px;
  601. color: #72777c;
  602. font-size: 16px;
  603. font-weight: 400;
  604. line-height: inherit;
  605. }
  606. .theme-overlay .theme-author a {
  607. text-decoration: none;
  608. }
  609. .theme-overlay .theme-description {
  610. color: #555;
  611. font-size: 15px;
  612. font-weight: 400;
  613. line-height: 1.5;
  614. margin: 30px 0 0 0;
  615. }
  616. .theme-overlay .theme-tags {
  617. border-top: 3px solid #eee;
  618. color: #82878c;
  619. font-size: 13px;
  620. font-weight: 400;
  621. margin: 30px 0 0 0;
  622. padding-top: 20px;
  623. }
  624. .theme-overlay .theme-tags span {
  625. color: #444;
  626. font-weight: 600;
  627. margin-right: 5px;
  628. }
  629. .theme-overlay .parent-theme {
  630. background: #f7fcfe;
  631. border: 1px solid #eee;
  632. border-left: 4px solid #00a0d2;
  633. font-size: 14px;
  634. font-weight: 400;
  635. margin-top: 30px;
  636. padding: 10px 10px 10px 20px;
  637. }
  638. .theme-overlay .parent-theme strong {
  639. font-weight: 700;
  640. }
  641. /**
  642. * Single Theme Mode
  643. * Displays detailed view inline when a user has no switch capabilities
  644. */
  645. .single-theme .theme-overlay .theme-backdrop,
  646. .single-theme .theme-overlay .theme-header,
  647. .single-theme .theme {
  648. display: none;
  649. }
  650. .single-theme .theme-overlay .theme-wrap {
  651. clear: both;
  652. min-height: 330px;
  653. position: relative;
  654. left: auto;
  655. right: auto;
  656. top: auto;
  657. bottom: auto;
  658. z-index: 10;
  659. }
  660. .single-theme .theme-overlay .theme-about {
  661. padding: 30px 30px 70px;
  662. position: static;
  663. }
  664. .single-theme .theme-overlay .theme-actions {
  665. position: absolute;
  666. }
  667. /**
  668. * Basic Responsive structure...
  669. *
  670. * Shuffles theme columns around based on screen width
  671. */
  672. @media only screen and (min-width: 2000px) {
  673. #wpwrap .theme-browser .theme {
  674. width: 17.6%;
  675. margin: 0 3% 3% 0;
  676. }
  677. #wpwrap .theme-browser .theme:nth-child(3n),
  678. #wpwrap .theme-browser .theme:nth-child(4n) {
  679. margin-right: 3%;
  680. }
  681. #wpwrap .theme-browser .theme:nth-child(5n) {
  682. margin-right: 0;
  683. }
  684. }
  685. @media only screen and (min-width: 1680px) {
  686. .theme-overlay .theme-wrap {
  687. width: 1450px;
  688. margin: 0 auto;
  689. }
  690. }
  691. /* Maximum screenshot width reaches 440px */
  692. @media only screen and (min-width: 1640px) {
  693. .theme-browser .theme {
  694. width: 22.7%;
  695. margin: 0 3% 3% 0;
  696. }
  697. .theme-browser .theme .theme-screenshot:after {
  698. padding-top: 75%; /* using a 4/3 aspect ratio */
  699. }
  700. .theme-browser .theme:nth-child(3n) {
  701. margin-right: 3%;
  702. }
  703. .theme-browser .theme:nth-child(4n) {
  704. margin-right: 0;
  705. }
  706. }
  707. /* Maximum screenshot width reaches 440px */
  708. @media only screen and (max-width: 1120px) {
  709. .theme-browser .theme {
  710. width: 47.5%;
  711. margin-right: 0;
  712. }
  713. .theme-browser .theme:nth-child(even) {
  714. margin-right: 0;
  715. }
  716. .theme-browser .theme:nth-child(odd) {
  717. margin-right: 5%;
  718. }
  719. }
  720. /* Admin menu is folded */
  721. @media only screen and (max-width: 900px) {
  722. .theme-overlay .theme-wrap {
  723. left: 65px;
  724. }
  725. }
  726. @media only screen and (max-width: 780px) {
  727. body.folded .theme-overlay .theme-wrap,
  728. .theme-overlay .theme-wrap {
  729. top: 0; /* The adminmenu isn't fixed on mobile, so this can use the full viewport height */
  730. right: 0;
  731. bottom: 0;
  732. left: 0;
  733. padding: 70px 20px 20px;
  734. border: none;
  735. z-index: 100000; /* should overlap #wpadminbar. */
  736. position: fixed;
  737. }
  738. .theme-browser .theme.active .theme-name span {
  739. /* Hide the "Active: " label on smaller screens. */
  740. display: none;
  741. }
  742. .theme-overlay .theme-screenshots {
  743. width: 40%;
  744. }
  745. .theme-overlay .theme-info {
  746. width: 50%;
  747. }
  748. .single-theme .theme-wrap {
  749. padding: 10px;
  750. }
  751. .theme-browser .theme .theme-actions {
  752. padding: 5px 10px 4px 10px;
  753. }
  754. .theme-overlay.small-screenshot .theme-screenshots {
  755. position: static;
  756. float: none;
  757. max-width: 302px;
  758. }
  759. .theme-overlay.small-screenshot .theme-info {
  760. margin-left: 0;
  761. width: auto;
  762. }
  763. .theme:not(.active):hover .theme-actions,
  764. .theme:not(.active):focus .theme-actions,
  765. .theme:hover .more-details,
  766. .theme:focus .more-details {
  767. display: none;
  768. }
  769. .theme-browser.rendered .theme:hover .theme-screenshot img,
  770. .theme-browser.rendered .theme:focus .theme-screenshot img {
  771. opacity: 1.0;
  772. }
  773. }
  774. @media only screen and (max-width: 480px) {
  775. .theme-browser .theme {
  776. width: 100%;
  777. margin-right: 0;
  778. }
  779. .theme-browser .theme:nth-child(2n),
  780. .theme-browser .theme:nth-child(3n) {
  781. margin-right: 0;
  782. }
  783. }
  784. @media only screen and (max-width: 650px) {
  785. .theme-overlay .theme-description {
  786. margin-left: 0;
  787. }
  788. .theme-overlay .theme-actions .delete-theme {
  789. position: relative;
  790. right: auto;
  791. bottom: auto;
  792. }
  793. .theme-overlay .theme-actions .inactive-theme {
  794. display: inline;
  795. }
  796. .theme-overlay .theme-screenshots {
  797. width: 100%;
  798. float: none;
  799. }
  800. .theme-overlay .theme-info {
  801. width: 100%;
  802. }
  803. .theme-overlay .theme-author {
  804. margin: 5px 0 15px 0;
  805. }
  806. .theme-overlay .current-label {
  807. margin-top: 10px;
  808. font-size: 13px;
  809. }
  810. .themes-php .wp-filter-search {
  811. float: none;
  812. clear: both;
  813. left: 0;
  814. right: 0;
  815. margin: -5px 0 20px 0;
  816. width: 100%;
  817. max-width: 280px;
  818. }
  819. .theme-browser .theme.add-new-theme span:after {
  820. font: normal 60px/90px dashicons;
  821. width: 80px;
  822. height: 80px;
  823. top: 30%;
  824. left: 50%;
  825. text-indent: 0;
  826. margin-left: -40px;
  827. }
  828. .single-theme .theme-wrap {
  829. margin: 0 -12px 0 -10px;
  830. padding: 10px;
  831. }
  832. .single-theme .theme-overlay .theme-about {
  833. padding: 10px;
  834. overflow: visible;
  835. }
  836. .single-theme .current-label {
  837. display: none;
  838. }
  839. .single-theme .theme-overlay .theme-actions {
  840. position: static;
  841. }
  842. }
  843. .broken-themes {
  844. clear: both;
  845. }
  846. .broken-themes table {
  847. text-align: left;
  848. width: 50%;
  849. border-spacing: 3px;
  850. padding: 3px;
  851. }
  852. /*------------------------------------------------------------------------------
  853. 16.2 - Install Themes
  854. ------------------------------------------------------------------------------*/
  855. /* Already installed theme */
  856. .theme-browser .theme .theme-installed {
  857. background: #0073aa;
  858. }
  859. .theme-browser .theme .notice-success p:before {
  860. color: #79ba49;
  861. content: "\f147";
  862. display: inline-block;
  863. font: normal 20px/1 'dashicons';
  864. -webkit-font-smoothing: antialiased;
  865. -moz-osx-font-smoothing: grayscale;
  866. vertical-align: top;
  867. }
  868. .theme-install.updated-message:before {
  869. content: '';
  870. }
  871. .theme-install-php .wp-filter {
  872. padding-left: 20px;
  873. }
  874. .theme-install-php a.upload,
  875. .theme-install-php a.browse-themes {
  876. cursor: pointer;
  877. }
  878. .upload-view-toggle .browse,
  879. .plugin-install-tab-upload .upload-view-toggle .upload {
  880. display: none;
  881. }
  882. .plugin-install-tab-upload .upload-view-toggle .browse {
  883. display: inline;
  884. }
  885. .upload-theme,
  886. .upload-plugin {
  887. box-sizing: border-box;
  888. display: none;
  889. margin: 0;
  890. padding: 50px 0;
  891. width: 100%;
  892. overflow: hidden;
  893. position: relative;
  894. top: 10px;
  895. }
  896. .upload-plugin-wrap {
  897. display: none;
  898. }
  899. .show-upload-view .upload-theme,
  900. .show-upload-view .upload-plugin,
  901. .show-upload-view .upload-plugin-wrap,
  902. .plugin-install-tab-upload .upload-plugin {
  903. display: block;
  904. }
  905. .upload-theme .wp-upload-form,
  906. .upload-plugin .wp-upload-form {
  907. background: #fafafa;
  908. border: 1px solid #e5e5e5;
  909. padding: 30px;
  910. margin: 30px auto;
  911. max-width: 380px;
  912. }
  913. .upload-theme .install-help,
  914. .upload-plugin .install-help {
  915. color: #555d66; /* #f1f1f1 background */
  916. font-size: 18px;
  917. font-style: normal;
  918. margin: 0;
  919. padding: 0;
  920. text-align: center;
  921. }
  922. p.no-themes,
  923. p.no-themes-local {
  924. clear: both;
  925. color: #666;
  926. font-size: 18px;
  927. font-style: normal;
  928. margin: 0;
  929. padding: 100px 0;
  930. text-align: center;
  931. display: none;
  932. }
  933. .no-results p.no-themes {
  934. display: block;
  935. }
  936. .theme-install-php .add-new-theme {
  937. display: none !important;
  938. }
  939. @media only screen and (max-width: 1120px) {
  940. .upload-theme .wp-upload-form {
  941. margin: 20px 0;
  942. max-width: 100%;
  943. }
  944. .upload-theme .install-help {
  945. font-size: 15px;
  946. padding: 20px 0 0;
  947. text-align: left;
  948. }
  949. }
  950. .theme-details .theme-rating {
  951. line-height: 23px;
  952. }
  953. .theme-details .star-rating {
  954. display: inline;
  955. }
  956. .theme-details .num-ratings,
  957. .theme-details .no-rating {
  958. font-size: 11px;
  959. color: #72777c;
  960. }
  961. .theme-details .no-rating {
  962. display: block;
  963. line-height: 20px;
  964. }
  965. /*------------------------------------------------------------------------------
  966. 16.3 - Custom Header Screen
  967. ------------------------------------------------------------------------------*/
  968. .appearance_page_custom-header #headimg {
  969. border: 1px solid #ddd;
  970. overflow: hidden;
  971. width: 100%;
  972. }
  973. .appearance_page_custom-header #upload-form p label {
  974. font-size: 12px;
  975. }
  976. .appearance_page_custom-header .available-headers .default-header {
  977. float: left;
  978. margin: 0 20px 20px 0;
  979. }
  980. .appearance_page_custom-header .random-header {
  981. clear: both;
  982. margin: 0 20px 20px 0;
  983. vertical-align: middle;
  984. }
  985. .appearance_page_custom-header .available-headers label input,
  986. .appearance_page_custom-header .random-header label input {
  987. margin-right: 10px;
  988. }
  989. .appearance_page_custom-header .available-headers label img {
  990. vertical-align: middle;
  991. }
  992. /*------------------------------------------------------------------------------
  993. 16.4 - Custom Background Screen
  994. ------------------------------------------------------------------------------*/
  995. div#custom-background-image {
  996. min-height: 100px;
  997. border: 1px solid #ddd;
  998. }
  999. div#custom-background-image img {
  1000. max-width: 400px;
  1001. max-height: 300px;
  1002. }
  1003. .background-position-control input[type="radio"]:checked ~ .button {
  1004. background: #eee;
  1005. border-color: #999;
  1006. box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, .5 );
  1007. z-index: 1;
  1008. }
  1009. .background-position-control input[type="radio"]:focus ~ .button {
  1010. border-color: #5b9dd9;
  1011. box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, .5 ), 0 0 3px rgba( 0, 115, 170, .8 );
  1012. color: #23282d;
  1013. }
  1014. .background-position-control .background-position-center-icon,
  1015. .background-position-control .background-position-center-icon:before {
  1016. display: inline-block;
  1017. line-height: 1;
  1018. text-align: center;
  1019. transition: background-color .1s ease-in 0;
  1020. }
  1021. .background-position-control .background-position-center-icon {
  1022. height: 20px;
  1023. margin-top: 13px;
  1024. vertical-align: top;
  1025. width: 20px;
  1026. }
  1027. .background-position-control .background-position-center-icon:before {
  1028. background-color: #555;
  1029. border-radius: 50%;
  1030. content: "";
  1031. height: 12px;
  1032. width: 12px;
  1033. }
  1034. .background-position-control .button:hover .background-position-center-icon:before,
  1035. .background-position-control input[type="radio"]:focus ~ .button .background-position-center-icon:before {
  1036. background-color: #23282d;
  1037. }
  1038. .background-position-control .button-group {
  1039. display: block;
  1040. }
  1041. .background-position-control .button-group .button {
  1042. border-radius: 0;
  1043. box-shadow: none;
  1044. /* Following properties are overridden by buttons responsive styles (see: wp-includes/css/buttons.css). */
  1045. height: 40px !important;
  1046. line-height: 37px !important;
  1047. margin: 0 -1px 0 0 !important;
  1048. padding: 0 10px 1px !important;
  1049. position: relative;
  1050. }
  1051. .background-position-control .button-group .button:active,
  1052. .background-position-control .button-group .button:hover,
  1053. .background-position-control .button-group .button:focus {
  1054. z-index: 1;
  1055. }
  1056. .background-position-control .button-group:last-child .button {
  1057. box-shadow: 0 1px 0 #ccc;
  1058. }
  1059. .background-position-control .button-group > label {
  1060. margin: 0 !important;
  1061. }
  1062. .background-position-control .button-group:first-child > label:first-child .button {
  1063. border-radius: 3px 0 0;
  1064. }
  1065. .background-position-control .button-group:first-child > label:first-child .dashicons {
  1066. -webkit-transform: rotate( 45deg );
  1067. transform: rotate( 45deg );
  1068. }
  1069. .background-position-control .button-group:first-child > label:last-child .button {
  1070. border-radius: 0 3px 0 0;
  1071. }
  1072. .background-position-control .button-group:first-child > label:last-child .dashicons {
  1073. -webkit-transform: rotate( -45deg );
  1074. transform: rotate( -45deg );
  1075. }
  1076. .background-position-control .button-group:last-child > label:first-child .button {
  1077. border-radius: 0 0 0 3px;
  1078. }
  1079. .background-position-control .button-group:last-child > label:first-child .dashicons {
  1080. -webkit-transform: rotate( -45deg );
  1081. transform: rotate( -45deg );
  1082. }
  1083. .background-position-control .button-group:last-child > label:last-child .button {
  1084. border-radius: 0 0 3px 0;
  1085. }
  1086. .background-position-control .button-group:last-child > label:last-child .dashicons {
  1087. -webkit-transform: rotate( 45deg );
  1088. transform: rotate( 45deg );
  1089. }
  1090. .background-position-control .button-group .dashicons {
  1091. margin-top: 9px;
  1092. }
  1093. .background-position-control .button-group + .button-group {
  1094. margin-top: -1px;
  1095. }
  1096. /*------------------------------------------------------------------------------
  1097. 23.0 - Full Overlay w/ Sidebar
  1098. ------------------------------------------------------------------------------*/
  1099. body.full-overlay-active {
  1100. overflow: hidden;
  1101. /* Hide all the content, the Customizer overlay is then made visible to be the only available content. */
  1102. visibility: hidden;
  1103. }
  1104. .wp-full-overlay {
  1105. background: transparent;
  1106. z-index: 500000;
  1107. position: fixed;
  1108. overflow: visible;
  1109. top: 0;
  1110. bottom: 0;
  1111. left: 0;
  1112. right: 0;
  1113. height: 100%;
  1114. min-width: 0;
  1115. }
  1116. .wp-full-overlay-sidebar {
  1117. box-sizing: border-box;
  1118. position: fixed;
  1119. min-width: 300px;
  1120. max-width: 600px;
  1121. width: 18%;
  1122. height: 100%;
  1123. top: 0;
  1124. bottom: 0;
  1125. left: 0;
  1126. padding: 0;
  1127. margin: 0;
  1128. z-index: 10;
  1129. background: #eee;
  1130. border-right: none;
  1131. }
  1132. .wp-full-overlay.collapsed .wp-full-overlay-sidebar {
  1133. overflow: visible;
  1134. }
  1135. .wp-full-overlay.collapsed,
  1136. .wp-full-overlay.expanded .wp-full-overlay-sidebar {
  1137. margin-left: 0 !important;
  1138. }
  1139. .wp-full-overlay.expanded {
  1140. margin-left: 300px;
  1141. }
  1142. .wp-full-overlay.collapsed .wp-full-overlay-sidebar {
  1143. margin-left: -300px;
  1144. }
  1145. @media screen and (min-width: 1667px) {
  1146. .wp-full-overlay.expanded {
  1147. margin-left: 18%;
  1148. }
  1149. .wp-full-overlay.collapsed .wp-full-overlay-sidebar {
  1150. margin-left: -18%;
  1151. }
  1152. }
  1153. @media screen and (min-width: 3333px) {
  1154. .wp-full-overlay.expanded {
  1155. margin-left: 600px;
  1156. }
  1157. .wp-full-overlay.collapsed .wp-full-overlay-sidebar {
  1158. margin-left: -600px;
  1159. }
  1160. }
  1161. .wp-full-overlay-sidebar:after {
  1162. content: "";
  1163. display: block;
  1164. position: absolute;
  1165. top: 0;
  1166. bottom: 0;
  1167. right: 0;
  1168. width: 3px;
  1169. z-index: 1000;
  1170. }
  1171. .wp-full-overlay-main {
  1172. position: absolute;
  1173. left: 0;
  1174. right: 0;
  1175. top: 0;
  1176. bottom: 0;
  1177. height: 100%;
  1178. }
  1179. .wp-full-overlay-sidebar .wp-full-overlay-header {
  1180. position: absolute;
  1181. left: 0;
  1182. right: 0;
  1183. height: 45px;
  1184. padding: 0 15px;
  1185. line-height: 45px;
  1186. z-index: 10;
  1187. margin: 0;
  1188. border-top: none;
  1189. box-shadow: none;
  1190. }
  1191. .wp-full-overlay-sidebar .wp-full-overlay-header a.back {
  1192. margin-top: 9px;
  1193. }
  1194. .wp-full-overlay-sidebar .wp-full-overlay-footer {
  1195. bottom: 0;
  1196. border-bottom: none;
  1197. border-top: none;
  1198. box-shadow: none;
  1199. }
  1200. .wp-full-overlay-sidebar .wp-full-overlay-sidebar-content {
  1201. position: absolute;
  1202. top: 45px;
  1203. bottom: 45px;
  1204. left: 0;
  1205. right: 0;
  1206. overflow: auto;
  1207. }
  1208. /* Close & Navigation Links */
  1209. .theme-install-overlay .wp-full-overlay-sidebar .wp-full-overlay-header {
  1210. padding: 0;
  1211. }
  1212. .theme-install-overlay .close-full-overlay,
  1213. .theme-install-overlay .previous-theme,
  1214. .theme-install-overlay .next-theme {
  1215. display: block;
  1216. position: relative;
  1217. float: left;
  1218. width: 45px;
  1219. height: 45px;
  1220. padding-right: 2px;
  1221. background: #eee;
  1222. border-right: 1px solid #ddd;
  1223. color: #444;
  1224. cursor: pointer;
  1225. text-decoration: none;
  1226. transition: color .1s ease-in-out, background .1s ease-in-out;
  1227. }
  1228. .theme-install-overlay .close-full-overlay:hover,
  1229. .theme-install-overlay .close-full-overlay:focus,
  1230. .theme-install-overlay .previous-theme:hover,
  1231. .theme-install-overlay .previous-theme:focus,
  1232. .theme-install-overlay .next-theme:hover,
  1233. .theme-install-overlay .next-theme:focus {
  1234. background: #ddd;
  1235. border-color: #ccc;
  1236. color: #000;
  1237. outline: none;
  1238. box-shadow: none;
  1239. }
  1240. .theme-install-overlay .close-full-overlay:before {
  1241. font: normal 22px/1 dashicons;
  1242. content: "\f335";
  1243. position: relative;
  1244. top: 7px;
  1245. left: 13px;
  1246. }
  1247. .theme-install-overlay .previous-theme:before {
  1248. font: normal 20px/1 dashicons;
  1249. content: "\f341";
  1250. position: relative;
  1251. top: 6px;
  1252. left: 14px;
  1253. }
  1254. .theme-install-overlay .next-theme:before {
  1255. font: normal 20px/1 dashicons;
  1256. content: "\f345";
  1257. position: relative;
  1258. top: 6px;
  1259. left: 13px;
  1260. }
  1261. .theme-install-overlay .previous-theme.disabled,
  1262. .theme-install-overlay .next-theme.disabled,
  1263. .theme-install-overlay .previous-theme.disabled:hover,
  1264. .theme-install-overlay .previous-theme.disabled:focus,
  1265. .theme-install-overlay .next-theme.disabled:hover,
  1266. .theme-install-overlay .next-theme.disabled:focus {
  1267. color: #b4b9be;
  1268. background: #eee;
  1269. cursor: default;
  1270. pointer-events: none;
  1271. }
  1272. .theme-install-overlay .close-full-overlay,
  1273. .theme-install-overlay .previous-theme,
  1274. .theme-install-overlay .next-theme {
  1275. border-left: 0;
  1276. border-top: 0;
  1277. border-bottom: 0;
  1278. }
  1279. .theme-install-overlay .close-full-overlay:before,
  1280. .theme-install-overlay .previous-theme:before,
  1281. .theme-install-overlay .next-theme:before {
  1282. top: 2px;
  1283. left: 0;
  1284. }
  1285. /* Collapse Button */
  1286. .wp-core-ui .wp-full-overlay .collapse-sidebar {
  1287. position: fixed;
  1288. bottom: 0;
  1289. left: 0;
  1290. padding: 9px 0 9px 10px;
  1291. height: 45px;
  1292. color: #656a6f;
  1293. outline: 0;
  1294. line-height: 1;
  1295. background-color: transparent !important;
  1296. border: none !important;
  1297. box-shadow: none !important;
  1298. border-radius: 0 !important;
  1299. }
  1300. .wp-core-ui .wp-full-overlay .collapse-sidebar:hover,
  1301. .wp-core-ui .wp-full-overlay .collapse-sidebar:focus {
  1302. color: #0073aa;
  1303. }
  1304. .wp-full-overlay .collapse-sidebar-arrow,
  1305. .wp-full-overlay .collapse-sidebar-label {
  1306. display: inline-block;
  1307. vertical-align: middle;
  1308. line-height: 20px;
  1309. }
  1310. .wp-full-overlay .collapse-sidebar-arrow {
  1311. width: 20px;
  1312. height: 20px;
  1313. margin: 0 2px; /* avoid the focus box-shadow to be cut-off */
  1314. border-radius: 50%;
  1315. overflow: hidden;
  1316. }
  1317. .wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow,
  1318. .wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow {
  1319. box-shadow:
  1320. 0 0 0 1px #5b9dd9,
  1321. 0 0 2px 1px rgba(30, 140, 190, .8);
  1322. }
  1323. .wp-full-overlay .collapse-sidebar-label {
  1324. margin-left: 3px;
  1325. }
  1326. .wp-full-overlay.collapsed .collapse-sidebar-label {
  1327. display: none;
  1328. }
  1329. .wp-full-overlay .collapse-sidebar-arrow:before {
  1330. display: block;
  1331. content: "\f148";
  1332. background: #eee;
  1333. font: normal 20px/1 dashicons;
  1334. speak: none;
  1335. padding: 0;
  1336. -webkit-font-smoothing: antialiased;
  1337. -moz-osx-font-smoothing: grayscale;
  1338. }
  1339. .wp-core-ui .wp-full-overlay.collapsed .collapse-sidebar {
  1340. padding: 9px 10px;
  1341. }
  1342. /* rtl:ignore */
  1343. .wp-full-overlay.collapsed .collapse-sidebar-arrow:before,
  1344. .rtl .wp-full-overlay .collapse-sidebar-arrow:before {
  1345. -webkit-transform: rotate(180.001deg);
  1346. transform: rotate(180.001deg); /* Firefox: promoting to its own layer to trigger anti-aliasing */
  1347. }
  1348. .rtl .wp-full-overlay.collapsed .collapse-sidebar-arrow:before {
  1349. -webkit-transform: none;
  1350. transform: none;
  1351. }
  1352. /* Animations */
  1353. .wp-full-overlay,
  1354. .wp-full-overlay-sidebar,
  1355. .wp-full-overlay .collapse-sidebar,
  1356. .wp-full-overlay-main {
  1357. transition-property: left, right, top, bottom, width, margin;
  1358. transition-duration: 0.2s;
  1359. }
  1360. /* Device/preview size toggles */
  1361. .wp-full-overlay {
  1362. background: #191e23;
  1363. }
  1364. .wp-full-overlay-main {
  1365. background-color: #f1f1f1;
  1366. }
  1367. .expanded .wp-full-overlay-footer {
  1368. position: fixed;
  1369. bottom: 0;
  1370. left: 0;
  1371. min-width: 299px;
  1372. max-width: 599px;
  1373. width: 18%;
  1374. width: calc( 18% - 1px );
  1375. height: 45px;
  1376. border-top: 1px solid #ddd;
  1377. background: #eee;
  1378. }
  1379. .wp-full-overlay-footer .devices-wrapper {
  1380. float: right;
  1381. }
  1382. .wp-full-overlay-footer .devices {
  1383. position: relative;
  1384. background: #eee;
  1385. box-shadow: -20px 0 10px -5px #eee;
  1386. }
  1387. .wp-full-overlay-footer .devices button {
  1388. cursor: pointer;
  1389. background: transparent;
  1390. border: none;
  1391. height: 45px;
  1392. padding: 0 3px;
  1393. margin: 0 0 0 -4px;
  1394. box-shadow: none;
  1395. border-top: 1px solid transparent;
  1396. border-bottom: 4px solid transparent;
  1397. transition: .15s color ease-in-out,
  1398. .15s background-color ease-in-out,
  1399. .15s border-color ease-in-out;
  1400. }
  1401. .wp-full-overlay-footer .devices button:focus {
  1402. box-shadow: none;
  1403. outline: none;
  1404. }
  1405. .wp-full-overlay-footer .devices button:before {
  1406. display: inline-block;
  1407. -webkit-font-smoothing: antialiased;
  1408. font: normal 20px/30px "dashicons";
  1409. vertical-align: top;
  1410. margin: 3px 0;
  1411. padding: 4px 8px;
  1412. color: #656a6f;
  1413. }
  1414. .wp-full-overlay-footer .devices button.active {
  1415. border-bottom-color: #191e23;
  1416. }
  1417. .wp-full-overlay-footer .devices button:hover,
  1418. .wp-full-overlay-footer .devices button:focus {
  1419. background-color: #fff;
  1420. }
  1421. .wp-full-overlay-footer .devices button:focus,
  1422. .wp-full-overlay-footer .devices button.active:hover {
  1423. border-bottom-color: #0073aa;
  1424. }
  1425. .wp-full-overlay-footer .devices button.active:before {
  1426. color: #191e23;
  1427. }
  1428. .wp-full-overlay-footer .devices button:hover:before,
  1429. .wp-full-overlay-footer .devices button:focus:before {
  1430. color: #0073aa;
  1431. }
  1432. .wp-full-overlay-footer .devices .preview-desktop:before {
  1433. content: "\f472";
  1434. }
  1435. .wp-full-overlay-footer .devices .preview-tablet:before {
  1436. content: "\f471";
  1437. }
  1438. .wp-full-overlay-footer .devices .preview-mobile:before {
  1439. content: "\f470";
  1440. }
  1441. @media screen and (max-width:1024px) {
  1442. .wp-full-overlay-footer .devices {
  1443. display: none;
  1444. }
  1445. }
  1446. .collapsed .wp-full-overlay-footer .devices button:before {
  1447. display: none;
  1448. }
  1449. .preview-mobile .wp-full-overlay-main {
  1450. margin: auto 0 auto -160px;
  1451. width: 320px;
  1452. height: 480px;
  1453. max-height: 100%;
  1454. max-width: 100%;
  1455. left: 50%;
  1456. }
  1457. .preview-tablet .wp-full-overlay-main {
  1458. margin: auto 0 auto -360px;
  1459. width: 720px; /* Size is loosely based on a typical "tablet" device size. Intentionally ambiguous - this does not represent any particular device precisely. */
  1460. height: 1080px;
  1461. max-height: 100%;
  1462. max-width: 100%;
  1463. left: 50%;
  1464. }
  1465. /*------------------------------------------------------------------------------
  1466. 24.0 - Customize Loader
  1467. ------------------------------------------------------------------------------*/
  1468. .no-customize-support .hide-if-no-customize,
  1469. .customize-support .hide-if-customize,
  1470. .no-customize-support.wp-core-ui .hide-if-no-customize,
  1471. .no-customize-support .wp-core-ui .hide-if-no-customize,
  1472. .customize-support.wp-core-ui .hide-if-customize,
  1473. .customize-support .wp-core-ui .hide-if-customize {
  1474. display: none;
  1475. }
  1476. #customize-container,
  1477. #customize-controls .notice.notification-overlay {
  1478. background: #eee;
  1479. z-index: 500000;
  1480. position: fixed;
  1481. overflow: visible;
  1482. top: 0;
  1483. bottom: 0;
  1484. left: 0;
  1485. right: 0;
  1486. height: 100%;
  1487. }
  1488. #customize-container {
  1489. display: none;
  1490. }
  1491. /* Make the Customizer and Theme installer overlays the only available content. */
  1492. #customize-container,
  1493. .theme-install-overlay {
  1494. visibility: visible;
  1495. }
  1496. .customize-loading #customize-container iframe {
  1497. opacity: 0;
  1498. }
  1499. #customize-container iframe,
  1500. .theme-install-overlay iframe {
  1501. height: 100%;
  1502. width: 100%;
  1503. z-index: 20;
  1504. transition: opacity 0.3s;
  1505. }
  1506. #customize-controls {
  1507. margin-top: 0;
  1508. }
  1509. .theme-install-overlay {
  1510. display: none;
  1511. }
  1512. .theme-install-overlay.single-theme {
  1513. display: block;
  1514. }
  1515. .install-theme-info {
  1516. display: none;
  1517. padding: 10px 20px 60px;
  1518. }
  1519. .single-theme .install-theme-info {
  1520. padding-top: 15px;
  1521. }
  1522. .theme-install-overlay .install-theme-info {
  1523. display: block;
  1524. }
  1525. .install-theme-info .theme-install {
  1526. float: right;
  1527. margin-top: 18px;
  1528. }
  1529. .install-theme-info .theme-name {
  1530. font-size: 16px;
  1531. line-height: 24px;
  1532. margin-bottom: 0;
  1533. margin-top: 0;
  1534. }
  1535. .install-theme-info .theme-screenshot {
  1536. margin: 15px 0;
  1537. width: 258px;
  1538. border: 1px solid #ccc;
  1539. }
  1540. .install-theme-info .theme-details {
  1541. overflow: hidden;
  1542. }
  1543. .theme-details .theme-version {
  1544. margin: 15px 0;
  1545. }
  1546. .theme-details .theme-description {
  1547. float: left;
  1548. color: #72777c;
  1549. line-height: 20px;
  1550. max-width: 100%;
  1551. }
  1552. .theme-install-overlay .wp-full-overlay-header .button {
  1553. float: right;
  1554. margin: 8px 10px 0 0;
  1555. /* For when .theme-install is a span rather than a.button-primary (already installed theme) */
  1556. line-height: 26px;
  1557. }
  1558. .theme-install-overlay .wp-full-overlay-sidebar {
  1559. background: #eee;
  1560. border-right: 1px solid #ddd;
  1561. }
  1562. .theme-install-overlay .wp-full-overlay-sidebar-content {
  1563. background: #fff;
  1564. border-top: 1px solid #ddd;
  1565. border-bottom: 1px solid #ddd;
  1566. }
  1567. .theme-install-overlay .wp-full-overlay-main {
  1568. position: absolute;
  1569. z-index: 0;
  1570. background-color: #f1f1f1;
  1571. }
  1572. .customize-loading #customize-container {
  1573. background-color: #f1f1f1;
  1574. }
  1575. #customize-preview.wp-full-overlay-main:before,
  1576. .customize-loading #customize-container:before,
  1577. #customize-controls .notice.notification-overlay.notification-loading:before,
  1578. .theme-install-overlay .wp-full-overlay-main:before {
  1579. content: "";
  1580. display: block;
  1581. width: 20px;
  1582. height: 20px;
  1583. position: absolute;
  1584. left: 50%;
  1585. top: 50%;
  1586. z-index: -1;
  1587. margin: -10px 0 0 -10px;
  1588. -webkit-transform: translateZ(0);
  1589. transform: translateZ(0);
  1590. background: transparent url(../images/spinner.gif) no-repeat center center;
  1591. background-size: 20px 20px;
  1592. }
  1593. #customize-preview.wp-full-overlay-main.iframe-ready:before,
  1594. .theme-install-overlay.iframe-ready .wp-full-overlay-main:before {
  1595. background-image: none;
  1596. }
  1597. /* =Media Queries
  1598. -------------------------------------------------------------- */
  1599. /**
  1600. * HiDPI Displays
  1601. */
  1602. @media print,
  1603. (-webkit-min-device-pixel-ratio: 1.25),
  1604. (min-resolution: 120dpi) {
  1605. .wp-full-overlay .collapse-sidebar-arrow {
  1606. background-image: url(../images/arrows-2x.png);
  1607. background-size: 15px 123px;
  1608. }
  1609. #customize-preview.wp-full-overlay-main:before,
  1610. .customize-loading #customize-container:before,
  1611. #customize-controls .notice.notification-overlay.notification-loading:before,
  1612. .theme-install-overlay .wp-full-overlay-main:before {
  1613. background-image: url(../images/spinner-2x.gif);
  1614. }
  1615. }
  1616. @media screen and ( max-width: 782px ) {
  1617. .available-theme .action-links .delete-theme {
  1618. float: none;
  1619. margin: 0;
  1620. padding: 0;
  1621. clear: both;
  1622. }
  1623. .available-theme .action-links .delete-theme a {
  1624. padding: 0;
  1625. }
  1626. .broken-themes table {
  1627. width: 100%;
  1628. }
  1629. .theme-install-overlay .wp-full-overlay-header .theme-install {
  1630. margin-top: 6px;
  1631. line-height: normal;
  1632. }
  1633. .theme-browser .theme .theme-actions .button {
  1634. margin-bottom: 0;
  1635. }
  1636. .theme-browser .theme.active .theme-actions,
  1637. .theme-browser .theme .theme-actions {
  1638. padding-top: 8px;
  1639. padding-bottom: 8px;
  1640. }
  1641. }
  1642. @media aural {
  1643. .theme .notice:before,
  1644. .theme-info .updating-message:before,
  1645. .theme-info .updated-message:before,
  1646. .theme-install.updating-message:before {
  1647. speak: none;
  1648. }
  1649. }