1 /* General Widgets Styles */
6 -webkit-box-sizing: border-box;
7 -moz-box-sizing: border-box;
8 box-sizing: border-box;
17 .widget-top a.widget-action,
18 .widget-top a.widget-action:hover {
19 -webkit-box-shadow: none;
22 text-decoration: none;
33 text-overflow: ellipsis;
34 -webkit-user-select: none;
35 -moz-user-select: none;
36 -ms-user-select: none;
40 .widgets-holder-wrap .widget-inside {
42 padding: 1px 15px 15px 15px;
47 #widgets-right a.widget-control-edit,
48 #available-widgets .widget-description {
52 .deleting .widget-title,
53 .deleting .widget-top a.widget-action:after {
57 /* Widget Dragging Helpers */
58 .widget.ui-draggable-dragging {
62 .widget.ui-sortable-helper {
67 border: 1px dashed #b4b9be;
71 -webkit-box-sizing: border-box;
72 -moz-box-sizing: border-box;
73 box-sizing: border-box;
76 #widgets-right .widget-placeholder {
80 #widgets-right .closed .widget-placeholder {
89 -webkit-box-sizing: border-box;
90 -moz-box-sizing: border-box;
91 box-sizing: border-box;
113 .widgets-holder-wrap .description {
120 .widget-holder .description,
121 .inactive-sidebar .description {
125 #widgets-right .widgets-holder-wrap .description {
130 /* Widgets 2-col Layout */
131 div.widget-liquid-left {
137 div.widget-liquid-right {
142 /* Widgets Left - Available Widgets */
148 div#widgets-left .closed .sidebar-name,
149 div#widgets-left .inactive-sidebar.closed .sidebar-name {
153 div#widgets-left .sidebar-name h2,
154 div#widgets-left .sidebar-name h3 {
159 #widgets-left .sidebar-name .sidebar-name-arrow:before {
163 #widgets-left .widgets-holder-wrap,
164 div#widgets-left .widget-holder {
165 background: transparent;
169 #widgets-left .widgets-holder-wrap {
171 -webkit-box-shadow: none;
175 #available-widgets .widget-action {
179 #available-widgets .widget {
183 #available-widgets .widget:nth-child(odd) {
187 #available-widgets .widget .widget-description {
193 #available-widgets #widget-list {
197 /* Inactive Sidebars */
198 #widgets-left .inactive-sidebar {
201 background: transparent;
205 -webkit-box-shadow: none;
209 #widgets-left .inactive-sidebar.first {
213 /* Not sure what this is for... */
214 div#widgets-left .inactive-sidebar .widget.expanded {
218 .widget-title-action {
223 div#widgets-left .inactive-sidebar .widgets-sortables {
226 background: transparent;
233 div#widgets-right .sidebars-column-1,
234 div#widgets-right .sidebars-column-2 {
238 div#widgets-right .widgets-holder-wrap {
242 div#widgets-right .sidebar-description {
247 div#widgets-right .sidebar-name h2,
248 div#widgets-right .sidebar-name h3 {
252 div#widgets-right .sidebar-name .sidebar-name-arrow:before {
256 div#widgets-right .widget-top {
260 div#widgets-right .widgets-sortables {
267 div#widgets-right .closed .widgets-sortables {
272 .sidebar-name .spinner,
273 .remove-inactive-widgets .spinner {
280 /* Dragging a widget over a closed sidebar */
281 #widgets-right .widgets-holder-wrap.widget-hover {
282 border-color: #72777c;
283 -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.3);
284 box-shadow: 0 1px 2px rgba(0,0,0,0.3);
287 /* Accessibility Mode */
288 .widgets_access #widgets-left .widget .widget-top {
292 .widgets_access #wpwrap .widgets-holder-wrap.closed .sidebar-description,
293 .widgets_access #wpwrap .widgets-holder-wrap.closed .widget,
294 .widgets_access #wpwrap .widget-control-edit {
298 .widgets_access #widgets-left .widget .widget-top:hover,
299 .widgets_access #widgets-right .widget .widget-top:hover {
303 #available-widgets .widget-control-edit .edit,
304 #widgets-left .inactive-sidebar .widget-control-edit .add,
305 #widgets-right .widget-control-edit .add {
309 .widget-control-edit {
315 border-left: 1px solid #DDD;
318 #widgets-left .widget-control-edit:hover,
319 #widgets-right .widget-control-edit:hover {
323 outline: 1px solid #444;
326 .widgets-holder-wrap .sidebar-name,
327 .widgets-holder-wrap .sidebar-description {
328 -webkit-user-select: none;
329 -moz-user-select: none;
330 -ms-user-select: none;
338 .editwidget .widget-inside {
343 .editwidget .widget-control-actions {
347 .js .widgets-holder-wrap.closed .widget,
348 .js .widgets-holder-wrap.closed .sidebar-description,
349 .js .widgets-holder-wrap.closed .remove-inactive-widgets,
350 .js .widgets-holder-wrap.closed .description,
351 .js .closed br.clear {
355 .js .widgets-holder-wrap.closed .widget.ui-sortable-helper {
359 /* Hide Widget Settings by Default */
361 .widget-description {
369 /* Dragging widgets over the available widget area show's a "Deactivate" message */
379 .js #removing-widget {
383 .widget-control-noform,
385 .widgets_access .widget-action,
386 .widgets_access .sidebar-name-arrow,
387 .widgets_access #access-on,
388 .widgets_access .widget-holder .description,
389 .no-js .widget-holder .description {
393 .widgets_access .widget-holder,
394 .widgets_access #widget-list {
398 .widgets_access #access-off {
402 .widgets_access .sidebar-name,
403 .widgets_access .widget .widget-top {
408 /* Widgets Area Chooser */
409 .widget-liquid-left #widgets-left.chooser #available-widgets .widget,
410 .widget-liquid-left #widgets-left.chooser .inactive-sidebar {
411 -webkit-transition: opacity 0.1s linear;
412 transition: opacity 0.1s linear;
415 .widget-liquid-left #widgets-left.chooser #available-widgets .widget,
416 .widget-liquid-left #widgets-left.chooser .inactive-sidebar {
417 /* -webkit-filter: blur(1px); */
419 pointer-events: none;
422 .widget-liquid-left #widgets-left.chooser #available-widgets .widget-in-question {
423 /* -webkit-filter: none; */
425 pointer-events: auto;
429 #widgets-left .widget-in-question .widget-top,
430 #available-widgets .widget-top:hover,
431 div#widgets-right .widget-top:hover,
432 #widgets-left .widget-top:hover {
434 -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1);
435 box-shadow: 0 1px 2px rgba(0,0,0,0.1);
438 .widgets-chooser ul.widgets-chooser-sidebars {
440 list-style-type: none;
449 .widgets-chooser ul {
450 border: 1px solid #ccc;
453 .widgets-chooser li {
454 padding: 10px 15px 10px 35px;
455 border-bottom: 1px solid #ccc;
461 -webkit-transition: background 0.2s ease-in-out;
462 transition: background 0.2s ease-in-out;
465 /* @todo looks like these hover/focus states are overridden by .widgets-chooser-selected */
466 .widgets-chooser li:hover,
467 .widgets-chooser li:focus {
468 background: rgba(255,255,255,0.7);
471 .widgets-chooser li:focus:before {
474 -webkit-font-smoothing: antialiased;
475 font: normal 26px/1 dashicons;
482 .widgets-chooser li:last-child {
486 .widgets-chooser li.widgets-chooser-selected {
491 .widgets-chooser li.widgets-chooser-selected:before,
492 .widgets-chooser li.widgets-chooser-selected:focus:before {
495 -webkit-font-smoothing: antialiased;
496 font: normal 26px/1 dashicons;
503 .widgets-chooser .widgets-chooser-actions {
504 padding: 10px 0 12px 0;
508 .widgets-chooser button {
512 #available-widgets .widget .widget-top {
516 #available-widgets .widget.ui-draggable-dragging .widget-top {
521 -------------------------------------------------------------- */
523 @media screen and (max-width: 480px) {
524 div.widget-liquid-left {
531 #widgets-left .sidebar-name {
535 #widgets-left #available-widgets .widget-top {
539 #widgets-left .inactive-sidebar .widgets-sortables {
543 div.widget-liquid-right {
549 margin: 0 auto 10px !important;
554 @media screen and (max-width: 320px) {
560 @media only screen and (min-width: 1250px) {
561 #widgets-left #available-widgets .widget {
566 .widget.ui-draggable-dragging {
570 #widgets-left #available-widgets .widget:nth-child(even) {
574 #widgets-right .sidebars-column-1,
575 #widgets-right .sidebars-column-2 {
580 #widgets-right .sidebars-column-1 {
584 #widgets-right.single-sidebar .sidebars-column-1,
585 #widgets-right.single-sidebar .sidebars-column-2 {