home *** CD-ROM | disk | FTP | other *** search
/ HTML Examples / WP.iso / wordpress / wp-admin / css / widgets-rtl.css < prev    next >
Encoding:
Cascading Style Sheet File  |  2018-01-23  |  15.8 KB  |  835 lines

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