You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

2002 lines
40 KiB

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