.remove-inactive-widgets .spinner {
/* Dragging a widget over a closed sidebar */
#widgets-right .widgets-holder-wrap.widget-hover {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
margin: -5px 0 10px 10px;
.widgets_access #widgets-left .widget .widget-top {
.widgets_access #wpwrap .widgets-holder-wrap.closed .sidebar-description,
.widgets_access #wpwrap .widgets-holder-wrap.closed .widget,
.widgets_access #wpwrap .widget-control-edit {
.widgets_access #widgets-left .widget .widget-top:hover,
.widgets_access #widgets-right .widget .widget-top:hover {
#available-widgets .widget-control-edit .edit,
#available-widgets .widget-action .edit,
#widgets-left .inactive-sidebar .widget-control-edit .add,
#widgets-left .inactive-sidebar .widget-action .add,
#widgets-right .widget-control-edit .add,
#widgets-right .widget-action .add {
border-left: 1px solid #dcdcde;
#widgets-left .widget-control-edit:hover,
#widgets-right .widget-control-edit:hover {
outline: 1px solid #3c434a;
.widgets-holder-wrap .sidebar-name,
.widgets-holder-wrap .sidebar-description {
-webkit-user-select: none;
.editwidget .widget-inside {
.editwidget .widget-control-actions {
.js .widgets-holder-wrap.closed .widget,
.js .widgets-holder-wrap.closed .sidebar-description,
.js .widgets-holder-wrap.closed .remove-inactive-widgets,
.js .widgets-holder-wrap.closed .description,
.js .widgets-holder-wrap.closed .widget.ui-sortable-helper {
/* Hide Widget Settings by Default */
/* Dragging widgets over the available widget area show's a "Deactivate" message */
.widgets_access .widget-action,
.widgets_access .handlediv,
.widgets_access #access-on,
.widgets_access .widget-holder .description,
.no-js .widget-holder .description {
.widgets_access .widget-holder,
.widgets_access #widget-list {
.widgets_access #access-off {
.widgets_access .sidebar-name,
.widgets_access .widget .widget-top {
/* Widgets Area Chooser */
.widget-liquid-left #widgets-left.chooser #available-widgets .widget,
.widget-liquid-left #widgets-left.chooser .inactive-sidebar {
transition: opacity 0.1s linear;
.widget-liquid-left #widgets-left.chooser #available-widgets .widget,
.widget-liquid-left #widgets-left.chooser .inactive-sidebar {
/* -webkit-filter: blur(1px); */
.widget-liquid-left #widgets-left.chooser #available-widgets .widget-in-question {
/* -webkit-filter: none; */
#widgets-left .widget-in-question .widget-top,
#available-widgets .widget-top:hover,
div#widgets-right .widget-top:hover,
#widgets-left .widget-top:hover {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
.widgets-chooser ul.widgets-chooser-sidebars {
border: 1px solid #c3c4c7;
border-bottom: 1px solid #c3c4c7;
.widgets-chooser .widgets-chooser-button {
padding: 10px 15px 10px 35px;
transition: background 0.2s ease-in-out;
/* @todo looks like these hover/focus states are overridden by .widgets-chooser-selected */
.widgets-chooser .widgets-chooser-button:hover,
.widgets-chooser .widgets-chooser-button:focus {
text-decoration: underline;
.widgets-chooser li:last-child {
.widgets-chooser .widgets-chooser-selected .widgets-chooser-button {
.widgets-chooser .widgets-chooser-selected:before {
-webkit-font-smoothing: antialiased;
font: normal 26px/1 dashicons;
.widgets-chooser .widgets-chooser-actions {
#available-widgets .widget .widget-top {
#available-widgets .widget.ui-draggable-dragging .widget-top {
/* =Specific widget styling
-------------------------------------------------------------- */
.text-widget-fields [hidden] {
.text-widget-fields .wp-pointer.wp-pointer-top {
.text-widget-fields .wp-pointer .wp-pointer-arrow {
.text-widget-fields .wp-pointer .wp-pointer-buttons {
.custom-html-widget-fields > p > .CodeMirror {
border: 1px solid #dcdcde;
.custom-html-widget-fields code {
z-index: 101; /* Due to z-index 100 set on .widget.open */
.widget-control-actions .custom-html-widget-save-button.button.validation-blocked {
-------------------------------------------------------------- */
@media screen and (max-width: 782px) {
.widgets-holder-wrap .widget-inside input[type="checkbox"],
.widgets-holder-wrap .widget-inside input[type="radio"],
.editwidget .widget-inside input[type="checkbox"], /* Selectors for the "accessibility mode" page. */
.editwidget .widget-inside input[type="radio"] {
margin: 0.25rem 0.25rem 0.25rem 0;
@media screen and (max-width: 480px) {
#widgets-left .sidebar-name {
#widgets-left #available-widgets .widget-top {
#widgets-left .inactive-sidebar .widgets-sortables {
div.widget-liquid-right {
@media screen and (max-width: 320px) {
@media only screen and (min-width: 1250px) {
#widgets-left #available-widgets .widget {
.widget.ui-draggable-dragging {
#widgets-left #available-widgets .widget:nth-child(even) {
#widgets-right .sidebars-column-1,
#widgets-right .sidebars-column-2 {
#widgets-right .sidebars-column-1 {
#widgets-right.single-sidebar .sidebars-column-1,
#widgets-right.single-sidebar .sidebars-column-2 {