JoryHogeveen/view-admin-as

View on GitHub
assets/css/view-admin-as.css

Summary

Maintainability
Test Coverage
/*!
 * View Admin As
 * https://wordpress.org/plugins/view-admin-as/
 *
 * @author  Jory Hogeveen <info@keraweb.nl>
 * @package View_Admin_As
 * @since   1.1.0
 * @version 1.8.8
 * @preserve
 */

/**
 * Overlay
 */
.vaa-loader-icon {width: 96px; height: 96px; background: transparent url('../img/loader.gif') center center no-repeat; background-size: contain;}

#vaa-overlay {position: fixed; top: 0; left: 0; height: 100%; width: 100%; background: rgba(255,255,255,0.85); display: none; z-index: 999999999;}
#vaa-overlay .vaa-loader-icon {position: fixed; top: 50%; left: 50%; margin: -48px 0 0 -48px; display: block;}

#vaa-overlay .vaa-popup {
    max-width: 75%;
    min-width: 50%;
    max-height: 50%;
    min-height: 20px;
    margin: 0 25%;
    padding: 10px;
    top: 10%;
    background: #fcfcfc;
    box-shadow: 0 1px 1px rgba(0,0,0,0.15), 0 0 1px 3px #fff;
    border: 2px solid #666;
    position: relative;
}
#vaa-overlay .vaa-popup > .remove {position: absolute; right: -10px; top: -10px; background: #FFF; width: 20px; height: 20px; cursor: pointer; border-radius: 100%;}
#vaa-overlay .vaa-popup .vaa-popup-content {overflow: hidden; overflow-y: auto;}
#vaa-overlay .vaa-popup .vaa-popup-content ul li {margin-left: 20px; list-style: disc outside;}
#vaa-overlay .vaa-popup .vaa-popup-content .button .icon {line-height: inherit; height: auto; width: auto;}
#vaa-overlay .vaa-popup.vaa-message {border-color: #0075b3;}
#vaa-overlay .vaa-popup.vaa-warning {border-color: #C8730C;}
#vaa-overlay .vaa-popup.vaa-error   {border-color: #dc3232;}
#vaa-overlay .vaa-popup.vaa-success {border-color: #46b450;}

/**
 * Notices
 */
#wpadminbar .vaa-notice {display: inline-block; padding: 0 5px 0 10px; background: #fff;}
#wpadminbar .vaa-notice.vaa-message,
#wpadminbar .vaa-notice.vaa-message .ab-icon:before {color: #0075B3 !important;}
#wpadminbar .vaa-notice.vaa-warning,
#wpadminbar .vaa-notice.vaa-warning .ab-icon:before {color: #C8730C !important;}
#wpadminbar .vaa-notice.vaa-error,
#wpadminbar .vaa-notice.vaa-error   .ab-icon:before {color: #dc3232 !important;}
#wpadminbar .vaa-notice.vaa-success,
#wpadminbar .vaa-notice.vaa-success .ab-icon:before {color: #46b450 !important;}
#wpadminbar #wp-admin-bar-vaa .vaa-notice {display: block; clear: both; margin-bottom: 3px;}
#wpadminbar #wp-admin-bar-vaa .vaa-notice button {vertical-align: baseline; margin: 0 0 0 -5px; padding: 1px 10px;}

#wpadminbar .vaa-notice .remove,
#wpadminbar #wp-admin-bar-vaa .remove {cursor: pointer; top: 2px; float: right; margin-right: 0; margin-left: 6px;}

/**
 * General
 */
#wpadminbar #wp-admin-bar-vaa ul li,
#wpadminbar #wp-admin-bar-vaa .ab-item {clear: both; z-index: auto; line-height: 26px;}

#wpadminbar #wp-admin-bar-vaa .ab-sub-wrapper .ab-item > span {line-height: 26px;}
#wpadminbar #wp-admin-bar-vaa .ab-item > span.remove {font-size: 16px; line-height: 16px; top: 1px;}

#wpadminbar #wp-admin-bar-vaa b,
#wpadminbar #wp-admin-bar-vaa strong,
#wpadminbar #wp-admin-bar-vaa .ab-item.ab-bold,
#wpadminbar #wp-admin-bar-vaa .ab-item .ab-bold,
#wpadminbar #wp-admin-bar-vaa .ab-bold > .ab-item,
#wpadminbar #wp-admin-bar-vaa .ab-bold > .ab-item * {font-weight: bold !important;}
#wpadminbar #wp-admin-bar-vaa i,
#wpadminbar #wp-admin-bar-vaa em,
#wpadminbar #wp-admin-bar-vaa .ab-item.ab-italic,
#wpadminbar #wp-admin-bar-vaa .ab-item .ab-italic,
#wpadminbar #wp-admin-bar-vaa .ab-italic > .ab-item,
#wpadminbar #wp-admin-bar-vaa .ab-italic > .ab-item * {font-style: italic !important;}

#wpadminbar #wp-admin-bar-vaa .vaa-highlight,
#wpadminbar #wp-admin-bar-vaa code {background: rgba(0,0,0,0.1); padding: 1px 5px 2px; line-height: normal;}
#wpadminbar #wp-admin-bar-vaa code {font-family: Consolas, Monaco, monospace;}

/* Semi transparent groups */
#wpadminbar #wp-admin-bar-vaa .vaa-sub-transparent > * {opacity: 0.5; transition: opacity 0.2s;}
#wpadminbar #wp-admin-bar-vaa .vaa-sub-transparent:hover > *,
#wpadminbar #wp-admin-bar-vaa .vaa-sub-transparent .active,
#wpadminbar #wp-admin-bar-vaa .vaa-sub-transparent .active ~ * {opacity: 1;}

/* Search results */
#wpadminbar #wp-admin-bar-vaa .ab-vaa-results {margin: 6px 0; padding: 0;}
#wpadminbar #wp-admin-bar-vaa .ab-vaa-results.vaa-auto-max-height {margin-right: 10px;}
#wpadminbar #wp-admin-bar-vaa .ab-vaa-results:empty {display: none;}

/* Spacing for first level sub groups */
#wpadminbar #wp-admin-bar-vaa ul.ab-sub-secondary + ul.ab-sub-secondary {margin-top: 3px;}
/* Spacing for second level sub groups and lower */
#wpadminbar #wp-admin-bar-vaa .menupop ul + ul,
#wpadminbar #wp-admin-bar-vaa .menupop ul.ab-sub-secondary + ul.ab-sub-secondary {margin-top: 2px;}
/* Spacing for third level sub groups and lower */
#wpadminbar #wp-admin-bar-vaa .menupop .menupop ul + ul,
#wpadminbar #wp-admin-bar-vaa .menupop .menupop ul.ab-sub-secondary + ul.ab-sub-secondary {margin-top: 1px;}
/* Remove unneeded spacing */
#wpadminbar #wp-admin-bar-vaa ul:not(.ab-sub-secondary) + ul.ab-sub-secondary,
#wpadminbar #wp-admin-bar-vaa ul.ab-sub-secondary + ul:not(.ab-sub-secondary) {margin-top: 0;}

/* Toggle groups */
#wpadminbar #wp-admin-bar-vaa .menupop .ab-sub-wrapper ul.vaa-toggle-group {padding: 3px 0 4px;}
#wpadminbar #wp-admin-bar-vaa .menupop .ab-sub-wrapper ul.vaa-toggle-group li.active ~ li:last-child {padding-bottom: 3px;}

/* Auto height */
#wpadminbar #wp-admin-bar-vaa .auto-height > .ab-item {height: auto;}

/* Descriptions */
#wpadminbar #wp-admin-bar-vaa .ab-item .description {height: auto; line-height: 1.2; font-size: 0.8em; font-style: italic; margin-bottom: 7px; white-space: normal; color: inherit;}
#wpadminbar #wp-admin-bar-vaa .ab-item .description:first-child:not(:only-child) {margin-bottom: 0;}
#wpadminbar #wp-admin-bar-vaa .ab-item .description .ab-icon {line-height: 1 !important; font-size: 1em !important; padding: 1px 0; margin-right: 3px; width: auto; height: 1em;}

/* First level group titles */
#wpadminbar #wp-admin-bar-vaa.menupop .ab-vaa-title > .ab-item {font-weight: bold; line-height: 26px; font-size: 1.1em; text-transform: uppercase;}

/* Current view items */
#wpadminbar #wp-admin-bar-vaa .current > .ab-item,
#wpadminbar #wp-admin-bar-vaa .current > .ab-item .vaa-view-data,
#wpadminbar #wp-admin-bar-vaa .current > input:checked + label,
#wpadminbar #wp-admin-bar-vaa .current-parent > .ab-item,
#wpadminbar #wp-admin-bar-vaa .current-parent > .ab-item .vaa-view-data,
#wpadminbar #wp-admin-bar-vaa .current-parent > label {font-weight: bold;}
#wpadminbar #wp-admin-bar-vaa .current > .ab-item::after,
#wpadminbar #wp-admin-bar-vaa .current > label::after {content: '\f177'; font-family: 'dashicons'; margin: 0 5px; font-size: 17px; vertical-align: middle; font-weight: normal;}
#wpadminbar #wp-admin-bar-vaa .current.ab-vaa-title > .ab-item::after {vertical-align: top;}

/**
 * Icon fixes
 */
#wpadminbar #wp-admin-bar-vaa .ab-item .ab-icon.alignright {float: right; margin-right: 0; margin-left: 6px;}
#wpadminbar #wp-admin-bar-vaa > .ab-item .ab-icon {top: 2px;}
#wpadminbar #wp-admin-bar-vaa > .ab-item .ab-label {float: left;} /* IE fix */
#wpadminbar #wp-admin-bar-vaa > .ab-item .ab-label .ab-icon {margin-right: -3px;}
#wpadminbar #wp-admin-bar-vaa .ab-icon.vaa-icon-image {
    width: 16px;
    height: 16px;
    background-size: 100% auto !important;
    background: center left no-repeat;
    display: inline-block;
}

#wpadminbar > #wp-toolbar > #wp-admin-bar-root-default #wp-admin-bar-vaa .vaa-has-icon > .ab-item > .ab-icon, /* Fix when located on admin bar default */
#wpadminbar #wp-admin-bar-vaa .vaa-has-icon > .ab-item .ab-icon {
    float: none;
    font-weight: normal !important;
    font-size: 16px;
    line-height: 16px;
    vertical-align: text-bottom;
    padding: 0;
}
#wpadminbar #wp-admin-bar-vaa .vaa-has-icon > .ab-item::before, /* WP < 5.2 */
#wpadminbar #wp-admin-bar-vaa .vaa-has-icon > .ab-item .wp-admin-bar-arrow {display: none;} /* WP 5.2+ */
#wpadminbar #wp-admin-bar-vaa .vaa-has-icon.menupop > .ab-item {padding-left: 10px; padding-right: 10px;}
#wpadminbar #wp-admin-bar-vaa .vaa-has-icon.ab-vaa-title > .ab-item > .ab-icon {line-height: 20px; transform: scale(1.1);}
#wpadminbar #wp-admin-bar-vaa .vaa-has-icon.ab-vaa-title > .ab-item > .ab-icon.vaa-icon-image {width: 18px; height: 18px;}

/* Subgroups with icons */
#wpadminbar .ab-top-secondary .menupop .vaa-menupop > .ab-item {padding-left: 2em; padding-right: 1em;}
#wpadminbar .ab-top-secondary .menupop .vaa-menupop > .ab-item .ab-icon {margin-left: -20px; margin-right: 4px;}

#wpadminbar #wp-admin-bar-vaa.menupop ul.ab-sub-secondary {position: static;}
#wpadminbar #wp-admin-bar-vaa.menupop .menupop > .ab-item:before {top: 1px;}

#wpadminbar #vaa-combine-views-selection .ab-item {padding-right: 28px;}
#wpadminbar #vaa-combine-views-selection .ab-item .remove {position: absolute; right: 4px;}

/**
 * Buttons
 */
#wpadminbar #wp-admin-bar-vaa button > .ab-icon {margin: 0 5px 0 -5px; padding: 0; top: 0;}
#wpadminbar #wp-admin-bar-vaa .ab-item > label + button {margin: 0 0 0 12px; vertical-align: baseline;}

#wpadminbar #wp-admin-bar-vaa .vaa-button-container > .ab-item {overflow: hidden; height: auto;}
#wpadminbar #wp-admin-bar-vaa button {
    float: none;
    text-decoration: none;
    font-size: 13px;
    line-height: 20px;
    min-height: 23px; /* Aligned with input fields. */
    margin: 3px 0;
    padding: 0 .5em 1px;
    vertical-align: middle;
    cursor: pointer;
}
/* Prevent theme button overrides. */
body:not(.wp-admin) #wpadminbar #wp-admin-bar-vaa button {
    border: 1px solid transparent;
}
body:not(.wp-admin) #wpadminbar #wp-admin-bar-vaa button:before,
body:not(.wp-admin) #wpadminbar #wp-admin-bar-vaa button:after {
    display: none;
}

/**
 * Button icon fixes
 */
#wpadminbar #wp-admin-bar-vaa .vaa-icon {padding: 0 2px 1px;}
#wpadminbar #wp-admin-bar-vaa .vaa-icon .ab-icon {margin: 0;}
#wpadminbar #wp-admin-bar-vaa button.vaa-icon .ab-icon {padding: 0;}

/**
 * Help tooltips
 */
#wpadminbar #wp-admin-bar-vaa .vaa-tooltip {
    position: absolute !important;
    display: none;
    opacity: 0;
    transition: all .2s;
    right: 12px;
    top: 0;
    padding: 10px 15px;
    width: 140px;
    height: auto;
    font-size: 11px;
    line-height: 1.2em;
    text-align: center;
    white-space: normal;
    border-radius: 3px;
    border: 1px solid rgba(175,175,175,0.5);
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    z-index: 99999;
}
#wpadminbar > #wp-toolbar > #wp-admin-bar-root-default #wp-admin-bar-vaa .vaa-help, /* Fix when located on admin bar default */
#wpadminbar #wp-admin-bar-vaa .vaa-help {
    float: right;
    text-align: right;
    padding: 0;
    font-size: 16px;
    line-height: inherit !important;
    margin: 0 0 0 5px;
}
#wpadminbar #wp-admin-bar-vaa .vaa-help ~ label + select,
#wpadminbar #wp-admin-bar-vaa .vaa-help ~ label + input,
#wpadminbar #wp-admin-bar-vaa .vaa-help ~ input + label {margin-right: 20px;}
#wpadminbar #wp-admin-bar-vaa .vaa-help:hover {cursor: help;}
#wpadminbar #wp-admin-bar-vaa .vaa-help:hover .vaa-tooltip {display: inline-block; opacity: 1;}

.rtl #wpadminbar #wp-admin-bar-vaa .vaa-help {float: left; margin: 0 5px 0 0;}
.rtl #wpadminbar #wp-admin-bar-vaa .vaa-help ~ label + select,
.rtl #wpadminbar #wp-admin-bar-vaa .vaa-help ~ label + input,
.rtl #wpadminbar #wp-admin-bar-vaa .vaa-help ~ input + label {margin-right: inherit; margin-left: 20px;}

/**
 * Auto max height
 * Min height = height of a single node
 */
#wpadminbar #wp-admin-bar-vaa .vaa-auto-max-height {min-height: 26px; overflow-y: auto; transition: max-height .3s;}

/**
 * Form elements
 */
#wpadminbar #wp-admin-bar-vaa .ab-vaa-multipleselect .ab-item,
#wpadminbar #wp-admin-bar-vaa .ab-vaa-input  .ab-item,
#wpadminbar #wp-admin-bar-vaa .ab-vaa-file   .ab-item,
#wpadminbar #wp-admin-bar-vaa .ab-vaa-search .ab-item,
#wpadminbar #wp-admin-bar-vaa .ab-vaa-filter .ab-item,
#wpadminbar #wp-admin-bar-vaa .ab-vaa-select .ab-item {height: auto; clear: both;}
#wpadminbar #wp-admin-bar-vaa .ab-vaa-input  .ab-item input,
#wpadminbar #wp-admin-bar-vaa .ab-vaa-file   .ab-item input,
#wpadminbar #wp-admin-bar-vaa .ab-vaa-search .ab-item input,
#wpadminbar #wp-admin-bar-vaa .ab-vaa-filter .ab-item input,
#wpadminbar #wp-admin-bar-vaa .ab-vaa-search .ab-item select,
#wpadminbar #wp-admin-bar-vaa .ab-vaa-select .ab-item select {display: inline-block; min-height: 26px; margin: 5px 0; padding: 0 .5em 1px; border: 0; line-height: normal; height: auto; width: 100%; box-sizing: border-box;}
#wpadminbar #wp-admin-bar-vaa .ab-vaa-select .ab-item label + input,
#wpadminbar #wp-admin-bar-vaa .ab-vaa-select .ab-item label + select {margin-top: 0; width: auto;}
#wpadminbar #wp-admin-bar-vaa .ab-vaa-textarea .ab-item {height: auto; line-height: normal;}
#wpadminbar #wp-admin-bar-vaa .ab-vaa-textarea .ab-item textarea {width: 100%; padding: 5px; margin-top: 5px; box-sizing: border-box; line-height: normal;}

.rtl #wpadminbar #wp-admin-bar-vaa .ab-vaa-input  .ab-item input,
.rtl #wpadminbar #wp-admin-bar-vaa .ab-vaa-file   .ab-item input,
.rtl #wpadminbar #wp-admin-bar-vaa .ab-vaa-search .ab-item input,
.rtl #wpadminbar #wp-admin-bar-vaa .ab-vaa-filter .ab-item input,
.rtl #wpadminbar #wp-admin-bar-vaa .ab-vaa-search .ab-item select,
.rtl #wpadminbar #wp-admin-bar-vaa .ab-vaa-select .ab-item select {margin: 5px 0;} /* Overwrite for .vaa-help */
.rtl #wpadminbar #wp-admin-bar-vaa .ab-vaa-select .ab-item label + input,
.rtl #wpadminbar #wp-admin-bar-vaa .ab-vaa-select .ab-item label + select {margin-top: 0; width: auto;}

#wpadminbar #wp-admin-bar-vaa .ab-item input.vaa-wide,
#wpadminbar #wp-admin-bar-vaa .ab-item select.vaa-wide {display: block; box-sizing: border-box; width: 100%; margin: 5px 0;}

#wpadminbar #wp-admin-bar-vaa .ab-item select + button.input-overlay,
#wpadminbar #wp-admin-bar-vaa .ab-item input + button.input-overlay {position: absolute; right: 10px; margin: 5px 0;}
.rtl #wpadminbar #wp-admin-bar-vaa .ab-item select + button.input-overlay,
.rtl #wpadminbar #wp-admin-bar-vaa .ab-item input + button.input-overlay {right: auto; left: 10px;}

#wpadminbar #wp-admin-bar-vaa input.checkbox,
#wpadminbar #wp-admin-bar-vaa input.radio {display: inline-block; height: 16px; width: 16px; vertical-align: text-bottom; box-sizing: border-box; cursor: pointer;}
#wpadminbar #wp-admin-bar-vaa .ab-item input.checkbox,
#wpadminbar #wp-admin-bar-vaa .ab-item input.radio {margin: 0 6px 0 0;}
#wpadminbar #wp-admin-bar-vaa .ab-item input.radio {border-radius:  100%;}
#wpadminbar #wp-admin-bar-vaa .ab-item input.checkbox + label,
#wpadminbar #wp-admin-bar-vaa .ab-item input.checkbox + label *,
#wpadminbar #wp-admin-bar-vaa .ab-item input.radio + label,
#wpadminbar #wp-admin-bar-vaa .ab-item input.radio + label * {line-height: 18px; vertical-align: text-top; display: inline-block;}
#wpadminbar #wp-admin-bar-vaa .ab-item input.checkbox + label:hover,
#wpadminbar #wp-admin-bar-vaa .ab-item input.radio + label:hover {cursor: pointer;}
#wpadminbar #wp-admin-bar-vaa .ab-item input.radio + label + br {line-height: 0;}

.rtl #wpadminbar #wp-admin-bar-vaa .ab-item input.checkbox,
.rtl #wpadminbar #wp-admin-bar-vaa .ab-item input.radio {margin: 0 0 0 6px;}

#wpadminbar #wp-admin-bar-vaa input.checkbox.vaa-right,
#wpadminbar #wp-admin-bar-vaa input.radio.vaa-right {position: absolute; top: 5px; right: 1em; z-index: 99;}
.rtl #wpadminbar #wp-admin-bar-vaa input.checkbox.vaa-right,
.rtl #wpadminbar #wp-admin-bar-vaa input.radio.vaa-right {right: auto; left: 1em;}

#wpadminbar #wp-admin-bar-vaa .ab-item .vaa-radio-wrapper {line-height: 20px;}
#wpadminbar #wp-admin-bar-vaa .ab-item .vaa-radio-wrapper p.description,
#wpadminbar #wp-admin-bar-vaa .ab-item .vaa-radio-wrapper:first-of-type {margin-top: 6px;}
#wpadminbar #wp-admin-bar-vaa .ab-item .vaa-radio-wrapper:last-of-type {margin-bottom: 6px;}

/* Multipleselect */
#wpadminbar #wp-admin-bar-vaa .ab-vaa-multipleselect {max-height: 400px; min-width: 250px; overflow: hidden; overflow-y: auto; margin: 6px 10px; padding: 0; background-color: #fff;}
#wpadminbar #wp-admin-bar-vaa .ab-vaa-multipleselect:empty {height: 0; margin: 0; padding: 0;}
#wpadminbar #wp-admin-bar-vaa .ab-vaa-multipleselect .ab-empty-item {height: auto; overflow: hidden; margin: 0; padding: 5px 10px;}
#wpadminbar #wp-admin-bar-vaa .ab-vaa-multipleselect .ab-empty-item .ab-item {color: #333;}
#wpadminbar #wp-admin-bar-vaa .ab-vaa-multipleselect.vaa-small {max-height: 100px;}
#wpadminbar #wp-admin-bar-vaa .ab-vaa-multipleselect .remove:before {color: #333;}

/**
 * Node columns
 */
#wpadminbar #wp-admin-bar-vaa .vaa-column-one-half {width: 50%; display: block; float: left; clear: none;}
#wpadminbar #wp-admin-bar-vaa .vaa-column-one-half .ab-item {min-width: 0;}
#wpadminbar #wp-admin-bar-vaa .vaa-column-one-half.vaa-column-first .ab-item {padding-right: 1px;}
#wpadminbar #wp-admin-bar-vaa .vaa-column-one-half.vaa-column-last .ab-item {padding-left: 1px;}
#wpadminbar #wp-admin-bar-vaa .vaa-clear-float {clear: both;}

/**
 * Toggle
 */
#wpadminbar #wp-admin-bar-vaa .ab-vaa-toggle > .ab-item {padding-right: 34px;}
#wpadminbar #wp-admin-bar-vaa .ab-vaa-toggle > .ab-item:hover {cursor: pointer;}
#wpadminbar #wp-admin-bar-vaa .ab-vaa-toggle > .ab-item::after {display: block !important; content: "\f140"; font-family: 'dashicons'; position: absolute; top: 0; right: 10px; margin: 0; font-size: 20px; font-weight: normal; width: auto;}
#wpadminbar #wp-admin-bar-vaa .ab-vaa-toggle.active > .ab-item::after {content: "\f142";}
.rtl #wpadminbar #wp-admin-bar-vaa .ab-vaa-toggle > .ab-item {padding-left: 34px; padding-right: 10px;}
.rtl #wpadminbar #wp-admin-bar-vaa .ab-vaa-toggle > .ab-item::after {left: 10px; right: auto;}

/**
 * Full width view
 */
#wpadminbar #wp-admin-bar-vaa.fullPopupActive .ab-sub-wrapper,
#wpadminbar #wp-admin-bar-vaa.fullPopupActive .ab-sub-wrapper .ab-item {display: none;}
#wpadminbar #wp-admin-bar-vaa.fullPopupActive > .ab-sub-wrapper {display: block;}
#wpadminbar #wp-admin-bar-vaa.fullPopupActive > .ab-sub-wrapper > .ab-submenu {padding: 0;}
#wpadminbar #wp-admin-bar-vaa.fullPopupActive .ab-sub-wrapper.fullPopup {position: fixed; display: block; visibility: visible; overflow: hidden; z-index: 999; max-height: 90%; width: 90%; margin: 5%; top: 0; left: 0; box-shadow: 0 0 50px rgba(0,0,0,0.3);}
#wpadminbar #wp-admin-bar-vaa.fullPopupActive .ab-sub-wrapper.fullPopup .ab-item {display: block;}
#wpadminbar #wp-admin-bar-vaa.fullPopupActive .ab-sub-wrapper.fullPopup > ul::after {display: table; clear: both; content: ' ';}

/* Capability nodes */
#wpadminbar #wp-admin-bar-vaa #wp-admin-bar-vaa-caps #apply-caps-view {float: left; margin-right: 5px;}
#wpadminbar #wp-admin-bar-vaa #wp-admin-bar-vaa-caps #reset-caps-view,
#wpadminbar #wp-admin-bar-vaa #wp-admin-bar-vaa-caps #open-caps-popup,
#wpadminbar #wp-admin-bar-vaa #wp-admin-bar-vaa-caps #close-caps-popup {float: right; margin-left: 5px; height: auto;}
#wpadminbar #wp-admin-bar-vaa #wp-admin-bar-vaa-caps #close-caps-popup {display: none;}
#wpadminbar #wp-admin-bar-vaa.fullPopupActive #wp-admin-bar-vaa-caps .ab-sub-wrapper.fullPopup #close-caps-popup {display: block;}
#wpadminbar #wp-admin-bar-vaa.fullPopupActive #wp-admin-bar-vaa-caps .ab-sub-wrapper.fullPopup #open-caps-popup {display: none;}
#wpadminbar #wp-admin-bar-vaa.fullPopupActive #wp-admin-bar-vaa-caps .ab-sub-wrapper.fullPopup #wp-admin-bar-vaa-caps-select-options .vaa-cap-item {width: 250px; float: left; clear: none;}
#wpadminbar #wp-admin-bar-vaa.fullPopupActive #wp-admin-bar-vaa-caps .ab-sub-wrapper.fullPopup #wp-admin-bar-vaa-caps-select-options .vaa-cap-item .remove {margin-right: 6px;}

#wpadminbar #wp-admin-bar-vaa #wp-admin-bar-vaa-caps-popup:hover {cursor: pointer;}

/**
 * Location: My Account
 */
#wpadminbar #wp-admin-bar-my-account-default {z-index: 999999;} /* Box shadow fix */
#wpadminbar #wp-admin-bar-my-account #wp-admin-bar-vaa > .ab-item .ab-label {line-height: 26px;}
#wpadminbar #wp-admin-bar-my-account #wp-admin-bar-vaa > .ab-item .ab-icon {top: 0;}

/**
 * Custom VAA toolbar
 */
#vaa_toolbar #wpadminbar {position: fixed !important; width: auto; min-width: 0; right: 0; left: auto; border-radius: 0 0 0 5px;}
#vaa_toolbar #wpadminbar #wp-admin-bar-vaa > .ab-item .ab-icon {margin-left: 0;}
#vaa_toolbar #wpadminbar #wp-admin-bar-vaa > .ab-item .ab-label {display: none;}
#vaa_toolbar #wpadminbar #wp-admin-bar-vaa:hover > .ab-item .ab-icon {margin-left: 6px;}
#vaa_toolbar #wpadminbar #wp-admin-bar-vaa:hover > .ab-item .ab-label {display: inline-block;}

/**
 * Dark mode
 */
body.dark-mode .vaa-loader-icon {background-image: url('../img/loader-dark.gif');}
body.dark-mode #vaa-overlay {background: rgba(0,0,0,0.75);}
body.dark-mode #vaa-overlay .vaa-popup {
    background: #23282d;
    box-shadow: 0 1px 1px rgba(0,0,0,0.15), 0 0 1px 3px #000;
}
body.dark-mode #vaa-overlay .vaa-popup > .remove {background: #000;}
body.dark-mode #wpadminbar .vaa-notice {background: #000;}
body.dark-mode #wpadminbar #wp-admin-bar-vaa .ab-vaa-multipleselect {background-color: #32373c;}
body.dark-mode #wpadminbar #wp-admin-bar-vaa .ab-vaa-multipleselect .ab-empty-item .ab-item {color: #fff;}
body.dark-mode #wpadminbar #wp-admin-bar-vaa .ab-vaa-multipleselect .remove:before {color: #fff;}

/**
 * Responsive
 */
@media screen and (min-width: 783px) {
    /* Full popup form elements */
    #wpadminbar #wp-admin-bar-vaa.fullPopupActive .ab-sub-wrapper.fullPopup ul {overflow: hidden;}
    #wpadminbar #wp-admin-bar-vaa.fullPopupActive .ab-sub-wrapper.fullPopup ul li.ab-vaa-input,
    #wpadminbar #wp-admin-bar-vaa.fullPopupActive .ab-sub-wrapper.fullPopup ul li.ab-vaa-select {float: left; clear: none; width: auto;}
    #wpadminbar #wp-admin-bar-vaa.fullPopupActive .ab-sub-wrapper.fullPopup ul li.ab-vaa-input button {margin: 5px 0;}
    #wpadminbar #wp-admin-bar-vaa.fullPopupActive .ab-sub-wrapper.fullPopup ul li.ab-vaa-input input,
    #wpadminbar #wp-admin-bar-vaa.fullPopupActive .ab-sub-wrapper.fullPopup ul li.ab-vaa-select select {width: auto;}
    #wpadminbar #wp-admin-bar-vaa.fullPopupActive .ab-sub-wrapper.fullPopup ul li.ab-vaa-input input + button.input-overlay,
    #wpadminbar #wp-admin-bar-vaa.fullPopupActive .ab-sub-wrapper.fullPopup ul li.ab-vaa-select select + button.input-overlay {position: static; vertical-align: top;}
}

@media screen and (max-width: 782px) {

    /**
     * General
     */
    #wpadminbar #wp-admin-bar-vaa {display: block; position: static;}
    #wpadminbar #wp-admin-bar-vaa > .ab-item > .ab-icon {margin-left: 0;}
    #wpadminbar #wp-admin-bar-vaa .ab-sub-wrapper {width: 100%;}
    #wpadminbar #wp-admin-bar-vaa .ab-sub-wrapper .ab-sub-wrapper {position: static; top: auto; margin: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;}

    #wpadminbar #wp-admin-bar-vaa.menupop .menupop > .ab-item:before {content: '';}

    #wpadminbar #wp-admin-bar-vaa .ab-item .vaa-hide-responsive {display: none;}

    #wpadminbar #wp-admin-bar-vaa .menupop > .ab-sub-wrapper .ab-item.description,
    #wpadminbar #wp-admin-bar-vaa .ab-item p.description {display: block !important; padding-left: 0; padding-right: 0; margin-bottom: 0;}

    /**
     * Help tooltip
     */
    #wpadminbar #wp-admin-bar-vaa .vaa-help {display: block; padding: 8px 0; float: none; text-align: left; margin: 0;}
    #wpadminbar #wp-admin-bar-vaa .ab-item .vaa-help:empty {display: none;}
    /* Always display tooltip on mobile view. */
    #wpadminbar #wp-admin-bar-vaa .vaa-tooltip {
        font-size: 13px;
        display: inline-block;
        position: static !important;
        opacity: 1;
        border: 0;
        padding: 0 !important;
        margin-left: 5px !important;
        width: auto;
        vertical-align: text-top;
        line-height: 20px;
    }
    .rtl #wpadminbar #wp-admin-bar-vaa .vaa-tooltip {
        margin-left: 0 !important;
        margin-right: 5px !important;
    }

    /**
     * Notices
     */
    #wpadminbar #wp-admin-bar-vaa .vaa-notice {line-height: 42px; font-size: 16px;}
    #wpadminbar #wp-admin-bar-vaa .vaa-notice .ab-icon {height: auto;}

    #wpadminbar #wp-admin-bar-vaa > div > ul,
    #wpadminbar #wp-admin-bar-vaa .menupop > .ab-sub-wrapper .ab-submenu {padding: 5px 0;}
    #wpadminbar #wp-admin-bar-vaa .menupop > .ab-sub-wrapper .ab-item {padding: 8px 44px; white-space: normal; height: auto;}
    #wpadminbar #wp-admin-bar-vaa .menupop > .ab-sub-wrapper .ab-item > .ab-item {padding: 8px 0;}
    #wpadminbar #wp-admin-bar-vaa .menupop > .ab-sub-wrapper:last-child .ab-item.description {margin-bottom: 0;}
    #wpadminbar #wp-admin-bar-vaa .ab-item > span.remove,
    #wpadminbar #wp-admin-bar-vaa .vaa-has-icon .ab-item .ab-icon {width: auto; height: auto; font-size: 22px !important; margin-right: 10px; vertical-align: text-top; transform: none;}
    #wpadminbar #wp-admin-bar-vaa .vaa-has-icon .ab-item .ab-icon.vaa-icon-image {width: 22px; height: 22px;}
    #wpadminbar #wp-admin-bar-vaa .ab-vaa-title.vaa-has-icon > .ab-item > .ab-icon {font-size: 30px !important; margin-left: -6px; margin-top: -1px; vertical-align: top;}
    #wpadminbar #wp-admin-bar-vaa .ab-vaa-title.vaa-has-icon > .ab-item > .ab-icon.vaa-icon-image {width: 30px; height: 30px;}
    #wpadminbar #wp-admin-bar-vaa .vaa-has-icon.menupop > .ab-item {padding-left: 12px; padding-right: 12px;}
    #wpadminbar #wp-admin-bar-vaa .ab-vaa-title.vaa-has-icon.menupop > .ab-item {padding-left: 16px;}
    #wpadminbar #wp-admin-bar-vaa .vaa-menupop div li {margin-left: 12px;}

    .rtl #wpadminbar #wp-admin-bar-vaa .vaa-has-icon .ab-item .ab-icon {margin-right: 0; margin-left: 10px;}
    .rtl #wpadminbar #wp-admin-bar-vaa .ab-vaa-title.vaa-has-icon > .ab-item > .ab-icon {margin-right: -6px;}
    .rtl #wpadminbar #wp-admin-bar-vaa .ab-vaa-title.vaa-has-icon.menupop > .ab-item {padding-left: 10px; padding-right: 16px;}
    .rtl #wpadminbar #wp-admin-bar-vaa .ab-vaa-toggle > .ab-item {padding-right: 16px}

    /**
     * Icon fixes
     */
    #wpadminbar #vaa-combine-views-selection .ab-item {padding-right: 48px;}
    #wpadminbar #vaa-combine-views-selection .ab-item > span.remove {margin-right: 0; padding: 10px; top: 0; right: 0;}

    /**
     * Toggle
     */
    #wpadminbar #wp-admin-bar-vaa .ab-sub-wrapper .vaa-role-item.menupop > .ab-item {padding-left: 15px;}
    #wpadminbar #wp-admin-bar-vaa .ab-vaa-toggle > .ab-item::after,
    #wpadminbar #wp-admin-bar-vaa .ab-sub-wrapper .vaa-menupop.menupop > .ab-item:after {content: "\f140"; font-family: 'dashicons'; position: absolute; right: 10px; top: 8px; margin: 0; font-size: 30px; font-weight: normal;}
    #wpadminbar #wp-admin-bar-vaa .ab-vaa-toggle.active > .ab-item::after,
    #wpadminbar #wp-admin-bar-vaa .ab-sub-wrapper .vaa-menupop.menupop.active > .ab-item:after {content: "\f142";}

    /**
     * Form elements
     */
    #wpadminbar #wp-admin-bar-vaa button {font-size: 16px; padding: 5px 15px;}
    #wpadminbar #wp-admin-bar-vaa .ab-vaa-input .ab-item input,
    #wpadminbar #wp-admin-bar-vaa .ab-vaa-search .ab-item input,
    #wpadminbar #wp-admin-bar-vaa .ab-vaa-filter .ab-item input {padding: 8px 12px;}
    #wpadminbar #wp-admin-bar-vaa .ab-vaa-select .ab-item select {padding: 7px 12px;}

    #wpadminbar #wp-admin-bar-vaa .ab-item select + button.input-overlay,
    #wpadminbar #wp-admin-bar-vaa .ab-item input + button.input-overlay {right: 44px; padding: 6px 10px 7px; font-size: 14px;}
    #wpadminbar #wp-admin-bar-vaa .ab-vaa-multipleselect {border-width: 0 44px; max-height: 300px !important;}
    #wpadminbar #wp-admin-bar-vaa .menupop > .ab-sub-wrapper .ab-vaa-multipleselect > .ab-item {padding: 8px 16px;}

    #wpadminbar #wp-admin-bar-vaa input.checkbox,
    #wpadminbar #wp-admin-bar-vaa input.radio {width: 24px; height: 24px;}

    #wpadminbar #wp-admin-bar-vaa input.checkbox.vaa-right,
    #wpadminbar #wp-admin-bar-vaa input.radio.vaa-right {top: 9px; right: 11px;}
    .rtl #wpadminbar #wp-admin-bar-vaa input.checkbox.vaa-right,
    .rtl #wpadminbar #wp-admin-bar-vaa input.radio.vaa-right {right: auto; left: 11px;}

    #wpadminbar #wp-admin-bar-vaa .ab-item .vaa-radio-wrapper {margin: 6px 0;}

    /**
     * Custom VAA toolbar
     */
    #vaa_toolbar {display: none !important;}
}