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 text-decoration: none;
28 text-overflow: ellipsis;
29 -webkit-user-select: none;
30 -moz-user-select: none;
31 -ms-user-select: none;
35 .widgets-holder-wrap .widget-inside {
37 padding: 1px 15px 15px 15px;
42 #widgets-right a.widget-control-edit,
43 #available-widgets .widget-description {
47 .deleting .widget-title,
48 .deleting .widget-top a.widget-action:after {
52 /* Widget Dragging Helpers */
53 .widget.ui-draggable-dragging {
57 .widget.ui-sortable-helper {
62 border: 1px dashed #bbb;
66 -webkit-box-sizing: border-box;
67 -moz-box-sizing: border-box;
68 box-sizing: border-box;
71 #widgets-right .widget-placeholder {
75 #widgets-right .closed .widget-placeholder {
84 -webkit-box-sizing: border-box;
85 -moz-box-sizing: border-box;
86 box-sizing: border-box;
107 .widgets-holder-wrap .description {
114 #widgets-right .widgets-holder-wrap .description {
119 /* Widgets 2-col Layout */
120 div.widget-liquid-left {
126 div.widget-liquid-right {
131 /* Widgets Left - Available Widgets */
137 div#widgets-left .closed .sidebar-name,
138 div#widgets-left .inactive-sidebar.closed .sidebar-name {
142 div#widgets-left .sidebar-name h3 {
147 div#widgets-left .sidebar-name .sidebar-name-arrow:before {
150 padding: 4px 6px 4px 4px;
153 #widgets-left #available-widgets,
154 div#widgets-left .widget-holder {
155 background: transparent;
159 #widgets-left .widgets-holder-wrap {
161 -webkit-box-shadow: none;
165 #available-widgets .widget-action {
169 #available-widgets .widget {
173 #available-widgets .widget:nth-child(odd) {
177 #available-widgets .widget .widget-description {
183 #available-widgets #widget-list {
187 /* Inactive Sidebars */
188 #widgets-left .inactive-sidebar {
191 background: transparent;
195 -webkit-box-shadow: none;
199 #widgets-left .inactive-sidebar.first {
203 /* Not sure what this is for... */
204 div#widgets-left .inactive-sidebar .widget.expanded {
208 .widget-title-action {
213 div#widgets-left .inactive-sidebar .widgets-sortables {
216 background: transparent;
223 div#widgets-right:after {
231 div#widgets-right .sidebars-column-1,
232 div#widgets-right .sidebars-column-2 {
236 div#widgets-right .widgets-holder-wrap {
240 div#widgets-right .sidebar-description {
245 div#widgets-right .sidebar-name h3 {
249 div#widgets-right .sidebar-name .sidebar-name-arrow:before {
254 div#widgets-right .widget-top {
258 div#widgets-right .widgets-sortables {
265 div#widgets-right .closed .widgets-sortables {
270 .sidebar-name .spinner {
275 /* Dragging a widget over a closed sidebar */
276 #widgets-right .widgets-holder-wrap.widget-hover {
278 -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.3);
279 box-shadow: 0 1px 2px rgba(0,0,0,0.3);
282 /* Accessibility Mode */
283 .widgets_access #widgets-left .widget .widget-top {
287 .widgets_access #wpwrap .widgets-holder-wrap.closed .sidebar-description,
288 .widgets_access #wpwrap .widgets-holder-wrap.closed .widget,
289 .widgets_access #wpwrap .widget-control-edit {
293 .widgets_access #widgets-left .widget .widget-top:hover,
294 .widgets_access #widgets-right .widget .widget-top:hover {
298 #available-widgets .widget-control-edit .edit,
299 #widgets-left .inactive-sidebar .widget-control-edit .add,
300 #widgets-right .widget-control-edit .add {
304 .widget-control-edit {
310 border-left: 1px solid #DDD;
313 #widgets-left .widget-control-edit:hover,
314 #widgets-right .widget-control-edit:hover {
318 outline: 1px solid #444;
321 .widgets-holder-wrap .sidebar-name,
322 .widgets-holder-wrap .sidebar-description {
323 -webkit-user-select: none;
324 -moz-user-select: none;
325 -ms-user-select: none;
333 .editwidget .widget-inside {
338 .editwidget .widget-control-actions {
342 .js .widgets-holder-wrap.closed .widget,
343 .js .widgets-holder-wrap.closed .sidebar-description,
344 .js .closed br.clear {
348 /* Hide Widget Settings by Default */
350 .widget-description {
358 /* Dragging widgets over the available widget area show's a "Deactivate" message */
368 .js #removing-widget {
372 .widget-control-noform,
374 .widgets_access .widget-action,
375 .widgets_access .sidebar-name-arrow,
376 .widgets_access #access-on,
377 .widgets_access .widget-holder .description,
378 .no-js .widget-holder .description {
382 .widgets_access .widget-holder,
383 .widgets_access #widget-list {
387 .widgets_access #access-off {
391 .widgets_access .sidebar-name,
392 .widgets_access .widget .widget-top {
397 /* Widgets Area Chooser */
398 .widget-liquid-left #widgets-left.chooser #available-widgets .widget,
399 .widget-liquid-left #widgets-left.chooser .inactive-sidebar {
400 -webkit-transition: opacity 0.1s linear;
401 transition: opacity 0.1s linear;
404 .widget-liquid-left #widgets-left.chooser #available-widgets .widget,
405 .widget-liquid-left #widgets-left.chooser .inactive-sidebar {
406 /* -webkit-filter: blur(1px); */
408 pointer-events: none;
411 .widget-liquid-left #widgets-left.chooser #available-widgets .widget-in-question {
412 /* -webkit-filter: none; */
414 pointer-events: auto;
418 #widgets-left .widget-in-question .widget-top,
419 #available-widgets .widget-top:hover,
420 div#widgets-right .widget-top:hover,
421 #widgets-left .widget-top:hover {
423 -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1);
424 box-shadow: 0 1px 2px rgba(0,0,0,0.1);
427 .widgets-chooser ul.widgets-chooser-sidebars {
429 list-style-type: none;
438 .widgets-chooser ul {
439 border: 1px solid #ccc;
442 .widgets-chooser li {
443 padding: 10px 15px 10px 35px;
444 border-bottom: 1px solid #ccc;
450 -webkit-transition: background 0.2s ease-in-out;
451 transition: background 0.2s ease-in-out;
454 .widgets-chooser li:hover,
455 .widgets-chooser li:focus {
456 background: rgba(255,255,255,0.7);
459 .widgets-chooser li:focus:before {
462 -webkit-font-smoothing: antialiased;
463 font: normal 26px/1 'dashicons';
470 .widgets-chooser li:last-child {
474 .widgets-chooser li.widgets-chooser-selected {
479 .widgets-chooser li.widgets-chooser-selected:before,
480 .widgets-chooser li.widgets-chooser-selected:focus:before {
483 -webkit-font-smoothing: antialiased;
484 font: normal 26px/1 'dashicons';
491 .widgets-chooser .widgets-chooser-actions {
492 padding: 10px 0 12px 0;
496 .widgets-chooser button {
500 #available-widgets .widget .widget-top {
505 -------------------------------------------------------------- */
507 @media screen and (max-width: 480px) {
508 div.widget-liquid-left {
515 #widgets-left .sidebar-name {
519 #widgets-left #available-widgets .widget-top {
523 #widgets-left .inactive-sidebar .widgets-sortables {
527 div.widget-liquid-right {
533 margin: 0 auto 10px !important;
538 @media screen and (max-width: 320px) {
544 @media only screen and (min-width: 1250px) {
545 #widgets-left #available-widgets .widget {
550 .widget.ui-draggable-dragging {
554 #widgets-left #available-widgets .widget:nth-child(even) {
558 #widgets-right .sidebars-column-1,
559 #widgets-right .sidebars-column-2 {
564 #widgets-right .sidebars-column-1 {
568 #widgets-right.single-sidebar .sidebars-column-1,
569 #widgets-right.single-sidebar .sidebars-column-2 {