/wp-admin/css/widgets.css

https://bitbucket.org/devbctph/futura_wp · CSS · 834 lines · 674 code · 134 blank · 26 comment · 0 complexity · f3631c4a603a3cf7a8fb36e9d08d6435 MD5 · raw file

  1. /* General Widgets Styles */
  2. .widget {
  3. margin: 0 auto 10px;
  4. position: relative;
  5. box-sizing: border-box;
  6. }
  7. .widget-top {
  8. font-size: 13px;
  9. font-weight: 600;
  10. background: #f7f7f7;
  11. }
  12. .widget-top .widget-action {
  13. border: 0;
  14. margin: 0;
  15. padding: 10px;
  16. background: none;
  17. cursor: pointer;
  18. outline: none;
  19. }
  20. .widget-title h3,
  21. .widget-title h4 {
  22. margin: 0;
  23. padding: 15px;
  24. font-size: 1em;
  25. line-height: 1;
  26. overflow: hidden;
  27. white-space: nowrap;
  28. text-overflow: ellipsis;
  29. -webkit-user-select: none;
  30. -moz-user-select: none;
  31. -ms-user-select: none;
  32. user-select: none;
  33. }
  34. .widgets-holder-wrap .widget-inside {
  35. border-top: none;
  36. padding: 1px 15px 15px 15px;
  37. line-height: 16px;
  38. }
  39. .widget.widget-dirty .widget-control-close-wrapper {
  40. display: none;
  41. }
  42. .in-widget-title,
  43. #widgets-right a.widget-control-edit,
  44. #available-widgets .widget-description {
  45. color: #666;
  46. }
  47. .deleting .widget-title,
  48. .deleting .widget-top .widget-action .toggle-indicator:before {
  49. color: #a0a5aa;
  50. }
  51. /* Media Widgets */
  52. .wp-core-ui .media-widget-control.selected .placeholder,
  53. .wp-core-ui .media-widget-control.selected .not-selected,
  54. .wp-core-ui .media-widget-control .selected {
  55. display: none;
  56. }
  57. .media-widget-control.selected .selected {
  58. display: inline-block;
  59. }
  60. .media-widget-buttons {
  61. text-align: left;
  62. margin-top: 0;
  63. }
  64. .media-widget-control .media-widget-buttons .button {
  65. width: auto;
  66. height: auto;
  67. margin-top: 12px;
  68. white-space: normal;
  69. }
  70. .media-widget-buttons .button:first-child {
  71. margin-right: 8px;
  72. }
  73. .media-widget-control .placeholder {
  74. border: 1px dashed #b4b9be;
  75. box-sizing: border-box;
  76. cursor: pointer;
  77. line-height: 20px;
  78. padding: 9px 0;
  79. position: relative;
  80. text-align: center;
  81. width: 100%;
  82. }
  83. .media-widget-control .media-widget-preview {
  84. background: transparent;
  85. text-align: center;
  86. }
  87. .media-widget-control .media-widget-preview .notice {
  88. text-align: initial;
  89. }
  90. .media-frame .media-widget-embed-notice p code,
  91. .media-widget-control .notice p code {
  92. padding: 0 3px 0 0;
  93. }
  94. .media-frame .media-widget-embed-notice {
  95. margin-top: 16px;
  96. }
  97. .media-widget-control .media-widget-preview img {
  98. max-width: 100%;
  99. vertical-align: middle;
  100. }
  101. .media-widget-control .media-widget-preview .wp-video-shortcode {
  102. background: #000;
  103. }
  104. .media-frame.media-widget .media-toolbar-secondary {
  105. min-width: 300px;
  106. }
  107. .media-frame.media-widget .image-details .embed-media-settings .setting.align,
  108. .media-frame.media-widget .attachment-display-settings .setting.align,
  109. .media-frame.media-widget .embed-media-settings .setting.align,
  110. .media-frame.media-widget .embed-link-settings .setting.link-text,
  111. .media-frame.media-widget .replace-attachment,
  112. .media-frame.media-widget .checkbox-setting.autoplay {
  113. display: none;
  114. }
  115. .media-widget-video-preview {
  116. width: 100%;
  117. }
  118. .media-widget-video-link {
  119. display: inline-block;
  120. min-height: 132px;
  121. width: 100%;
  122. background: black;
  123. }
  124. .media-widget-video-link .dashicons {
  125. font: normal 60px/1 'dashicons';
  126. position: relative;
  127. width: 100%;
  128. top: -90px;
  129. color: white;
  130. text-decoration: none;
  131. }
  132. .media-widget-video-link.no-poster .dashicons {
  133. top: 30px;
  134. }
  135. .media-frame #embed-url-field.invalid,
  136. .media-widget-image-link > .link:invalid {
  137. border: 1px solid #dc3232;
  138. }
  139. .media-widget-image-link {
  140. margin: 1em 0;
  141. }
  142. .media-widget-gallery-preview {
  143. display: -webkit-box;
  144. display: flex;
  145. -webkit-box-pack: start;
  146. justify-content: flex-start;
  147. flex-wrap: wrap;
  148. margin: -1.79104477%;
  149. }
  150. .media-widget-preview.media_gallery,
  151. .media-widget-preview.media_image {
  152. cursor: pointer;
  153. }
  154. .media-widget-preview .placeholder {
  155. background: #f1f1f1;
  156. }
  157. .media-widget-gallery-preview .gallery-item {
  158. box-sizing: border-box;
  159. width: 50%;
  160. margin: 0;
  161. background: transparent;
  162. }
  163. .media-widget-gallery-preview .gallery-item .gallery-icon {
  164. margin: 4.5%;
  165. }
  166. /*
  167. * Use targeted nth-last-child selectors to control the size of each image
  168. * based on how many gallery items are present in the grid.
  169. * See: https://alistapart.com/article/quantity-queries-for-css
  170. */
  171. .media-widget-gallery-preview .gallery-item:nth-last-child(3):first-child,
  172. .media-widget-gallery-preview .gallery-item:nth-last-child(3):first-child ~ .gallery-item,
  173. .media-widget-gallery-preview .gallery-item:nth-last-child(n+5),
  174. .media-widget-gallery-preview .gallery-item:nth-last-child(n+5) ~ .gallery-item,
  175. .media-widget-gallery-preview .gallery-item:nth-last-child(n+6),
  176. .media-widget-gallery-preview .gallery-item:nth-last-child(n+6) ~ .gallery-item {
  177. max-width: 33.33%;
  178. }
  179. .media-widget-gallery-preview .gallery-item img {
  180. height: auto;
  181. vertical-align: bottom;
  182. }
  183. .media-widget-gallery-preview .gallery-icon {
  184. position: relative;
  185. }
  186. .media-widget-gallery-preview .gallery-icon-placeholder {
  187. position: absolute;
  188. top: 0;
  189. bottom: 0;
  190. width: 100%;
  191. box-sizing: border-box;
  192. display: -webkit-box;
  193. display: flex;
  194. -webkit-box-align: center;
  195. align-items: center;
  196. -webkit-box-pack: center;
  197. justify-content: center;
  198. background-color: rgba( 0, 0, 0, .5 );
  199. }
  200. .media-widget-gallery-preview .gallery-icon-placeholder-text {
  201. font-weight: 600;
  202. font-size: 2em;
  203. color: white;
  204. }
  205. /* Widget Dragging Helpers */
  206. .widget.ui-draggable-dragging {
  207. min-width: 100%;
  208. }
  209. .widget.ui-sortable-helper {
  210. opacity: 0.8;
  211. }
  212. .widget-placeholder {
  213. border: 1px dashed #b4b9be;
  214. margin: 0 auto 10px;
  215. height: 45px;
  216. width: 100%;
  217. box-sizing: border-box;
  218. }
  219. #widgets-right .widget-placeholder {
  220. margin-top: 0;
  221. }
  222. #widgets-right .closed .widget-placeholder {
  223. height: 0;
  224. border: 0;
  225. margin-top: -10px;
  226. }
  227. /* Widget Sidebars */
  228. .sidebar-name {
  229. position: relative;
  230. box-sizing: border-box;
  231. }
  232. .js .sidebar-name {
  233. cursor: pointer;
  234. }
  235. .sidebar-name .handlediv {
  236. float: right;
  237. width: 38px;
  238. height: 38px;
  239. border: 0;
  240. margin: 0;
  241. padding: 8px;
  242. background: none;
  243. cursor: pointer;
  244. outline: none;
  245. }
  246. #widgets-right .sidebar-name .handlediv {
  247. margin: 5px 3px 0 0;
  248. }
  249. .sidebar-name .handlediv:focus {
  250. box-shadow: none;
  251. outline: none;
  252. }
  253. #widgets-left .sidebar-name .toggle-indicator {
  254. display: none;
  255. }
  256. #widgets-left .widgets-holder-wrap.closed .sidebar-name .toggle-indicator,
  257. #widgets-left .sidebar-name:hover .toggle-indicator,
  258. #widgets-left .sidebar-name .handlediv:focus .toggle-indicator {
  259. display: block;
  260. }
  261. .sidebar-name .toggle-indicator:before {
  262. padding: 1px 2px 1px 0;
  263. border-radius: 50%;
  264. }
  265. .sidebar-name .handlediv:focus .toggle-indicator:before {
  266. box-shadow:
  267. 0 0 0 1px #5b9dd9,
  268. 0 0 2px 1px rgba(30, 140, 190, .8);
  269. }
  270. .sidebar-name h2,
  271. .sidebar-name h3 {
  272. margin: 0;
  273. padding: 8px 10px;
  274. overflow: hidden;
  275. white-space: nowrap;
  276. }
  277. .widgets-holder-wrap .description {
  278. padding: 0 0 15px;
  279. margin: 0;
  280. font-style: normal;
  281. color: #72777c;
  282. }
  283. .widget-holder .description,
  284. .inactive-sidebar .description {
  285. color: #555d66;
  286. }
  287. #widgets-right .widgets-holder-wrap .description {
  288. padding-left: 7px;
  289. padding-right: 7px;
  290. }
  291. /* Widgets 2-col Layout */
  292. div.widget-liquid-left {
  293. margin: 0;
  294. width: 38%;
  295. float: left;
  296. }
  297. div.widget-liquid-right {
  298. float: right;
  299. width: 58%;
  300. }
  301. /* Widgets Left - Available Widgets */
  302. div#widgets-left {
  303. padding-top: 12px;
  304. }
  305. div#widgets-left .closed .sidebar-name,
  306. div#widgets-left .inactive-sidebar.closed .sidebar-name {
  307. margin-bottom: 10px;
  308. }
  309. div#widgets-left .sidebar-name h2,
  310. div#widgets-left .sidebar-name h3 {
  311. padding: 10px 0;
  312. margin: 0 10px 0 0;
  313. }
  314. #widgets-left .widgets-holder-wrap,
  315. div#widgets-left .widget-holder {
  316. background: transparent;
  317. border: none;
  318. }
  319. #widgets-left .widgets-holder-wrap {
  320. border: none;
  321. box-shadow: none;
  322. }
  323. #available-widgets .widget-action {
  324. display: none;
  325. }
  326. #available-widgets .widget {
  327. margin: 0;
  328. }
  329. #available-widgets .widget:nth-child(odd) {
  330. clear: both;
  331. }
  332. #available-widgets .widget .widget-description {
  333. display: block;
  334. padding: 10px 15px;
  335. font-size: 12px;
  336. overflow-wrap: break-word;
  337. word-wrap: break-word;
  338. -ms-word-break: break-all;
  339. word-break: break-word;
  340. -ms-hyphens: auto;
  341. -webkit-hyphens: auto;
  342. hyphens: auto;
  343. }
  344. #available-widgets #widget-list {
  345. position: relative;
  346. }
  347. /* Inactive Sidebars */
  348. #widgets-left .inactive-sidebar {
  349. clear: both;
  350. width: 100%;
  351. background: transparent;
  352. padding: 0;
  353. margin: 0 0 20px 0;
  354. border: none;
  355. box-shadow: none;
  356. }
  357. #widgets-left .inactive-sidebar.first {
  358. margin-top: 40px;
  359. }
  360. /* Not sure what this is for... */
  361. div#widgets-left .inactive-sidebar .widget.expanded {
  362. left: auto;
  363. }
  364. .widget-title-action {
  365. float: right;
  366. position: relative;
  367. }
  368. div#widgets-left .inactive-sidebar .widgets-sortables {
  369. min-height: 42px;
  370. padding: 0;
  371. background: transparent;
  372. margin: 0;
  373. position: relative;
  374. }
  375. /* Widgets Right */
  376. div#widgets-right .sidebars-column-1,
  377. div#widgets-right .sidebars-column-2 {
  378. max-width: 450px;
  379. }
  380. div#widgets-right .widgets-holder-wrap {
  381. margin: 10px 0 0 0;
  382. }
  383. div#widgets-right .sidebar-description {
  384. min-height: 20px;
  385. margin-top: -5px;
  386. }
  387. div#widgets-right .sidebar-name h2,
  388. div#widgets-right .sidebar-name h3 {
  389. padding: 15px 7px;
  390. }
  391. div#widgets-right .widget-top {
  392. padding: 0;
  393. }
  394. div#widgets-right .widgets-sortables {
  395. padding: 0 8px;
  396. margin-bottom: 9px;
  397. position: relative;
  398. min-height: 123px;
  399. }
  400. div#widgets-right .closed .widgets-sortables {
  401. min-height: 0;
  402. margin-bottom: 0;
  403. }
  404. .sidebar-name .spinner,
  405. .remove-inactive-widgets .spinner {
  406. float: none;
  407. position: relative;
  408. top: -2px;
  409. margin: -5px 5px;
  410. }
  411. /* Dragging a widget over a closed sidebar */
  412. #widgets-right .widgets-holder-wrap.widget-hover {
  413. border-color: #72777c;
  414. box-shadow: 0 1px 2px rgba(0,0,0,0.3);
  415. }
  416. /* Accessibility Mode */
  417. .widgets_access #widgets-left .widget .widget-top {
  418. cursor: auto;
  419. }
  420. .widgets_access #wpwrap .widgets-holder-wrap.closed .sidebar-description,
  421. .widgets_access #wpwrap .widgets-holder-wrap.closed .widget,
  422. .widgets_access #wpwrap .widget-control-edit {
  423. display: block;
  424. }
  425. .widgets_access #widgets-left .widget .widget-top:hover,
  426. .widgets_access #widgets-right .widget .widget-top:hover {
  427. border-color: #ddd;
  428. }
  429. #available-widgets .widget-control-edit .edit,
  430. #widgets-left .inactive-sidebar .widget-control-edit .add,
  431. #widgets-right .widget-control-edit .add {
  432. display: none;
  433. }
  434. .widget-control-edit {
  435. display: block;
  436. color: #666;
  437. background: #EEE;
  438. padding: 0 15px;
  439. line-height: 43px;
  440. border-left: 1px solid #DDD;
  441. }
  442. #widgets-left .widget-control-edit:hover,
  443. #widgets-right .widget-control-edit:hover {
  444. color: #fff;
  445. background: #444;
  446. border-left: 0;
  447. outline: 1px solid #444;
  448. }
  449. .widgets-holder-wrap .sidebar-name,
  450. .widgets-holder-wrap .sidebar-description {
  451. -webkit-user-select: none;
  452. -moz-user-select: none;
  453. -ms-user-select: none;
  454. user-select: none;
  455. }
  456. .editwidget {
  457. margin: 0 auto;
  458. }
  459. .editwidget .widget-inside {
  460. display: block;
  461. padding: 0 15px;
  462. }
  463. .editwidget .widget-control-actions {
  464. margin-top: 20px;
  465. }
  466. .js .widgets-holder-wrap.closed .widget,
  467. .js .widgets-holder-wrap.closed .sidebar-description,
  468. .js .widgets-holder-wrap.closed .remove-inactive-widgets,
  469. .js .widgets-holder-wrap.closed .description,
  470. .js .closed br.clear {
  471. display: none;
  472. }
  473. .js .widgets-holder-wrap.closed .widget.ui-sortable-helper {
  474. display: block;
  475. }
  476. /* Hide Widget Settings by Default */
  477. .widget-inside,
  478. .widget-description {
  479. display: none;
  480. }
  481. .widget-inside {
  482. background: #fff;
  483. }
  484. /* Dragging widgets over the available widget area show's a "Deactivate" message */
  485. #removing-widget {
  486. display: none;
  487. font-weight: 400;
  488. padding-left: 15px;
  489. font-size: 12px;
  490. line-height: 1;
  491. color: black;
  492. }
  493. .js #removing-widget {
  494. color: #00a0d2;
  495. }
  496. .widget-control-noform,
  497. #access-off,
  498. .widgets_access .widget-action,
  499. .widgets_access .handlediv,
  500. .widgets_access #access-on,
  501. .widgets_access .widget-holder .description,
  502. .no-js .widget-holder .description {
  503. display: none;
  504. }
  505. .widgets_access .widget-holder,
  506. .widgets_access #widget-list {
  507. padding-top: 10px;
  508. }
  509. .widgets_access #access-off {
  510. display: inline;
  511. }
  512. .widgets_access .sidebar-name,
  513. .widgets_access .widget .widget-top {
  514. cursor: default;
  515. }
  516. /* Widgets Area Chooser */
  517. .widget-liquid-left #widgets-left.chooser #available-widgets .widget,
  518. .widget-liquid-left #widgets-left.chooser .inactive-sidebar {
  519. transition: opacity 0.1s linear;
  520. }
  521. .widget-liquid-left #widgets-left.chooser #available-widgets .widget,
  522. .widget-liquid-left #widgets-left.chooser .inactive-sidebar {
  523. /* -webkit-filter: blur(1px); */
  524. opacity: 0.2;
  525. pointer-events: none;
  526. }
  527. .widget-liquid-left #widgets-left.chooser #available-widgets .widget-in-question {
  528. /* -webkit-filter: none; */
  529. opacity: 1;
  530. pointer-events: auto;
  531. }
  532. .widgets-chooser ul,
  533. #widgets-left .widget-in-question .widget-top,
  534. #available-widgets .widget-top:hover,
  535. div#widgets-right .widget-top:hover,
  536. #widgets-left .widget-top:hover {
  537. border-color: #999;
  538. box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  539. }
  540. .widgets-chooser ul.widgets-chooser-sidebars {
  541. margin: 0;
  542. list-style-type: none;
  543. max-height: 300px;
  544. overflow: auto;
  545. }
  546. .widgets-chooser {
  547. display: none;
  548. }
  549. .widgets-chooser ul {
  550. border: 1px solid #ccc;
  551. }
  552. .widgets-chooser li {
  553. padding: 10px 15px 10px 35px;
  554. border-bottom: 1px solid #ccc;
  555. background: #fff;
  556. margin: 0;
  557. cursor: pointer;
  558. outline: none;
  559. position: relative;
  560. transition: background 0.2s ease-in-out;
  561. }
  562. /* @todo looks like these hover/focus states are overridden by .widgets-chooser-selected */
  563. .widgets-chooser li:hover,
  564. .widgets-chooser li:focus {
  565. background: rgba(255,255,255,0.7);
  566. }
  567. .widgets-chooser li:focus:before {
  568. content: "\f147";
  569. display: block;
  570. -webkit-font-smoothing: antialiased;
  571. font: normal 26px/1 dashicons;
  572. color: #555d66;
  573. position: absolute;
  574. top: 7px;
  575. left: 5px;
  576. }
  577. .widgets-chooser li:last-child {
  578. border: none;
  579. }
  580. .widgets-chooser li.widgets-chooser-selected {
  581. background: #00a0d2;
  582. color: #fff;
  583. }
  584. .widgets-chooser li.widgets-chooser-selected:before,
  585. .widgets-chooser li.widgets-chooser-selected:focus:before {
  586. content: "\f147";
  587. display: block;
  588. -webkit-font-smoothing: antialiased;
  589. font: normal 26px/1 dashicons;
  590. color: #fff;
  591. position: absolute;
  592. top: 7px;
  593. left: 5px;
  594. }
  595. .widgets-chooser .widgets-chooser-actions {
  596. padding: 10px 0 12px 0;
  597. text-align: center;
  598. }
  599. .widgets-chooser button {
  600. margin-right: 5px;
  601. }
  602. #available-widgets .widget .widget-top {
  603. cursor: pointer;
  604. }
  605. #available-widgets .widget.ui-draggable-dragging .widget-top {
  606. cursor: move;
  607. }
  608. /* =Specific widget styling
  609. -------------------------------------------------------------- */
  610. .text-widget-fields {
  611. position: relative;
  612. }
  613. .text-widget-fields [hidden] {
  614. display: none;
  615. }
  616. .text-widget-fields .wp-pointer.wp-pointer-top {
  617. position: absolute;
  618. z-index: 3;
  619. top: 100px;
  620. right: 10px;
  621. left: 10px;
  622. }
  623. .text-widget-fields .wp-pointer .wp-pointer-arrow {
  624. left: auto;
  625. right: 15px;
  626. }
  627. .text-widget-fields .wp-pointer .wp-pointer-buttons {
  628. line-height: 1.4em;
  629. }
  630. .custom-html-widget-fields > p > .CodeMirror {
  631. border: 1px solid #e5e5e5;
  632. }
  633. .custom-html-widget-fields code {
  634. padding-top: 1px;
  635. padding-bottom: 1px;
  636. }
  637. ul.CodeMirror-hints {
  638. z-index: 101; /* Due to z-index 100 set on .widget.open */
  639. }
  640. .widget-control-actions .custom-html-widget-save-button.button.validation-blocked {
  641. cursor: not-allowed;
  642. }
  643. /* =Media Queries
  644. -------------------------------------------------------------- */
  645. @media screen and (max-width: 480px) {
  646. div.widget-liquid-left {
  647. width: 100%;
  648. float: none;
  649. border-right: none;
  650. padding-right: 0;
  651. }
  652. #widgets-left .sidebar-name {
  653. margin-right: 0;
  654. }
  655. #widgets-left #available-widgets .widget-top {
  656. margin-right: 0;
  657. }
  658. #widgets-left .inactive-sidebar .widgets-sortables {
  659. margin-right: 0;
  660. }
  661. div.widget-liquid-right {
  662. width: 100%;
  663. float: none;
  664. }
  665. div.widget {
  666. margin: 0 auto !important;
  667. max-width: 480px;
  668. }
  669. }
  670. @media screen and (max-width: 320px) {
  671. div.widget {
  672. max-width: 320px;
  673. }
  674. }
  675. @media only screen and (min-width: 1250px) {
  676. #widgets-left #available-widgets .widget {
  677. width: 49%;
  678. float: left;
  679. }
  680. .widget.ui-draggable-dragging {
  681. min-width: 49%;
  682. }
  683. #widgets-left #available-widgets .widget:nth-child(even) {
  684. float: right;
  685. }
  686. #widgets-right .sidebars-column-1,
  687. #widgets-right .sidebars-column-2 {
  688. float: left;
  689. width: 49%;
  690. }
  691. #widgets-right .sidebars-column-1 {
  692. margin-right: 2%;
  693. }
  694. #widgets-right.single-sidebar .sidebars-column-1,
  695. #widgets-right.single-sidebar .sidebars-column-2 {
  696. float: none;
  697. width: 100%;
  698. margin: 0;
  699. }
  700. }