WordPress/wp-admin/css/widgets-rtl.css
joedolson 7464bdc47a Administration: Improve contrast and consistency of focus styles.
Apply new focus styles from WordPress 5.3 more broadly. An updated focus style for form inputs, buttons, and link styled as buttons was added in WordPress 5.3; this commit makes other focus styles consistent with those changes so they meet accessibility standards for color contrast.

Props johnbillion, kebbet, joedolson, afercia.
Fixes #51870.
Built from https://develop.svn.wordpress.org/trunk@57553


git-svn-id: http://core.svn.wordpress.org/trunk@57054 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2024-02-07 16:56:13 +00:00

878 lines
17 KiB
CSS

/*! This file is auto-generated */
/* General Widgets Styles */
.widget {
margin: 0 auto 10px;
position: relative;
box-sizing: border-box;
}
.widget.open {
z-index: 99;
}
.widget.open:focus-within {
z-index: 100;
}
.widget-top {
font-size: 13px;
font-weight: 600;
background: #f6f7f7;
}
.widget-top .widget-action {
border: 0;
margin: 0;
padding: 10px;
background: none;
cursor: pointer;
}
.widget-title h3,
.widget-title h4 {
margin: 0;
padding: 15px;
font-size: 1em;
line-height: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-webkit-user-select: none;
user-select: none;
}
.widgets-holder-wrap .widget-inside {
border-top: none;
padding: 1px 15px 15px;
line-height: 1.23076923;
}
.widget.widget-dirty .widget-control-close-wrapper {
display: none;
}
.in-widget-title,
#widgets-right a.widget-control-edit,
#available-widgets .widget-description {
color: #646970;
}
.deleting .widget-title,
.deleting .widget-top .widget-action .toggle-indicator:before {
color: #a7aaad;
}
/* Media Widgets */
.wp-core-ui .media-widget-control.selected .placeholder,
.wp-core-ui .media-widget-control.selected .not-selected,
.wp-core-ui .media-widget-control .selected {
display: none;
}
.media-widget-control.selected .selected {
display: inline-block;
}
.media-widget-buttons {
text-align: right;
margin-top: 0;
}
.media-widget-control .media-widget-buttons .button {
width: auto;
height: auto;
margin-top: 12px;
white-space: normal;
}
.media-widget-buttons .button:first-child {
margin-left: 8px;
}
.media-widget-control .attachment-media-view .button-add-media,
.media-widget-control .placeholder {
border: 1px dashed #c3c4c7;
box-sizing: border-box;
cursor: pointer;
line-height: 1.6;
padding: 9px 0;
position: relative;
text-align: center;
width: 100%;
}
.media-widget-control .attachment-media-view .button-add-media {
cursor: pointer;
background-color: #f0f0f1;
color: #2c3338;
}
.media-widget-control .attachment-media-view .button-add-media:hover {
background-color: #fff;
}
.media-widget-control .attachment-media-view .button-add-media:focus {
background-color: #fff;
border-style: solid;
border-color: #4f94d4;
box-shadow: 0 0 3px rgba(34, 113, 177, 0.8);
/* Only visible in Windows High Contrast mode */
outline: 2px solid transparent;
outline-offset: -2px;
}
.media-widget-control .media-widget-preview {
background: transparent;
text-align: center;
}
.media-widget-control .media-widget-preview .notice {
text-align: initial;
}
.media-frame .media-widget-embed-notice p code,
.media-widget-control .notice p code {
padding: 0 0 0 3px;
}
.media-frame .media-widget-embed-notice {
margin-top: 16px;
}
.media-widget-control .media-widget-preview img {
max-width: 100%;
vertical-align: middle;
background-image: linear-gradient(-45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7), linear-gradient(-45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7);
background-position: 100% 0, 10px 10px;
background-size: 20px 20px;
}
.media-widget-control .media-widget-preview .wp-video-shortcode {
background: #000;
}
.media-frame.media-widget .media-toolbar-secondary {
min-width: 300px;
}
.media-frame.media-widget .image-details .embed-media-settings .setting.align,
.media-frame.media-widget .attachment-display-settings .setting.align,
.media-frame.media-widget .embed-media-settings .setting.align,
.media-frame.media-widget .embed-media-settings .legend-inline,
.media-frame.media-widget .embed-link-settings .setting.link-text,
.media-frame.media-widget .replace-attachment,
.media-frame.media-widget .checkbox-setting.autoplay {
display: none;
}
.media-widget-video-preview {
width: 100%;
}
.media-widget-video-link {
display: inline-block;
min-height: 132px;
width: 100%;
background: #000;
}
.media-widget-video-link .dashicons {
font: normal 60px/1 'dashicons';
position: relative;
width: 100%;
top: -90px;
color: #fff;
text-decoration: none;
}
.media-widget-video-link.no-poster .dashicons {
top: 30px;
}
.media-frame #embed-url-field.invalid,
.media-widget-image-link > .link:invalid {
border: 1px solid #d63638;
}
.media-widget-image-link {
margin: 1em 0;
}
.media-widget-gallery-preview {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
margin: -1.79104477%;
}
.media-widget-preview.media_gallery,
.media-widget-preview.media_image {
cursor: pointer;
}
.media-widget-preview .placeholder {
background: #f0f0f1;
}
.media-widget-gallery-preview .gallery-item {
box-sizing: border-box;
width: 50%;
margin: 0;
background: transparent;
}
.media-widget-gallery-preview .gallery-item .gallery-icon {
margin: 4.5%;
}
/*
* Use targeted nth-last-child selectors to control the size of each image
* based on how many gallery items are present in the grid.
* See: https://alistapart.com/article/quantity-queries-for-css
*/
.media-widget-gallery-preview .gallery-item:nth-last-child(3):first-child,
.media-widget-gallery-preview .gallery-item:nth-last-child(3):first-child ~ .gallery-item,
.media-widget-gallery-preview .gallery-item:nth-last-child(n+5),
.media-widget-gallery-preview .gallery-item:nth-last-child(n+5) ~ .gallery-item,
.media-widget-gallery-preview .gallery-item:nth-last-child(n+6),
.media-widget-gallery-preview .gallery-item:nth-last-child(n+6) ~ .gallery-item {
max-width: 33.33%;
}
.media-widget-gallery-preview .gallery-item img {
height: auto;
vertical-align: bottom;
}
.media-widget-gallery-preview .gallery-icon {
position: relative;
}
.media-widget-gallery-preview .gallery-icon-placeholder {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.5);
}
.media-widget-gallery-preview .gallery-icon-placeholder-text {
font-weight: 600;
font-size: 2em;
color: #fff;
}
/* Widget Dragging Helpers */
.widget.ui-draggable-dragging {
min-width: 100%;
}
.widget.ui-sortable-helper {
opacity: 0.8;
}
.widget-placeholder {
border: 1px dashed #c3c4c7;
margin: 0 auto 10px;
height: 45px;
width: 100%;
box-sizing: border-box;
}
#widgets-right .widget-placeholder {
margin-top: 0;
}
#widgets-right .closed .widget-placeholder {
height: 0;
border: 0;
margin-top: -10px;
}
/* Widget Sidebars */
.sidebar-name {
position: relative;
box-sizing: border-box;
}
.js .sidebar-name {
cursor: pointer;
}
.sidebar-name .handlediv {
float: left;
width: 38px;
height: 38px;
border: 0;
margin: 0;
padding: 8px;
background: none;
cursor: pointer;
outline: none;
}
#widgets-right .sidebar-name .handlediv {
margin: 5px 0 0 3px;
}
.sidebar-name .handlediv:focus {
box-shadow: none;
/* Only visible in Windows High Contrast mode */
outline: 1px solid transparent;
}
#widgets-left .sidebar-name .toggle-indicator {
display: none;
}
#widgets-left .widgets-holder-wrap.closed .sidebar-name .toggle-indicator,
#widgets-left .sidebar-name:hover .toggle-indicator,
#widgets-left .sidebar-name .handlediv:focus .toggle-indicator {
display: block;
}
.sidebar-name .toggle-indicator:before {
padding: 1px 0 1px 2px;
border-radius: 50%;
}
.sidebar-name .handlediv:focus .toggle-indicator:before {
box-shadow: 0 0 0 2px #2271b1;
/* Only visible in Windows High Contrast mode */
outline: 2px solid transparent;
}
.sidebar-name h2,
.sidebar-name h3 {
margin: 0;
padding: 8px 10px;
overflow: hidden;
white-space: normal;
line-height: 1.5;
}
.widgets-holder-wrap .description {
padding: 0 0 15px;
margin: 0;
font-style: normal;
color: #646970;
}
.widget-holder .description,
.inactive-sidebar .description {
color: #50575e;
}
#widgets-right .widgets-holder-wrap .description {
padding-right: 7px;
padding-left: 7px;
}
/* Widgets 2-col Layout */
div.widget-liquid-left {
margin: 0;
width: 38%;
float: right;
}
div.widget-liquid-right {
float: left;
width: 58%;
}
/* Widgets Left - Available Widgets */
div#widgets-left {
padding-top: 12px;
}
div#widgets-left .closed .sidebar-name,
div#widgets-left .inactive-sidebar.closed .sidebar-name {
margin-bottom: 10px;
}
div#widgets-left .sidebar-name h2,
div#widgets-left .sidebar-name h3 {
padding: 10px 0;
margin: 0 0 0 10px;
}
#widgets-left .widgets-holder-wrap,
div#widgets-left .widget-holder {
background: transparent;
border: none;
}
#widgets-left .widgets-holder-wrap {
border: none;
box-shadow: none;
}
#available-widgets .widget {
margin: 0;
}
#available-widgets .widget:nth-child(odd) {
clear: both;
}
#available-widgets .widget .widget-description {
display: block;
padding: 10px 15px;
font-size: 12px;
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-all;
word-break: break-word;
-webkit-hyphens: auto;
hyphens: auto;
}
#available-widgets #widget-list {
position: relative;
}
/* Inactive Sidebars */
#widgets-left .inactive-sidebar {
clear: both;
width: 100%;
background: transparent;
padding: 0;
margin: 0 0 20px;
border: none;
box-shadow: none;
}
#widgets-left .inactive-sidebar.first {
margin-top: 40px;
}
/* Not sure what this is for... */
div#widgets-left .inactive-sidebar .widget.expanded {
right: auto;
}
.widget-title-action {
float: left;
position: relative;
}
div#widgets-left .inactive-sidebar .widgets-sortables {
min-height: 42px;
padding: 0;
background: transparent;
margin: 0;
position: relative;
}
/* Widgets Right */
div#widgets-right .sidebars-column-1,
div#widgets-right .sidebars-column-2 {
max-width: 450px;
}
div#widgets-right .widgets-holder-wrap {
margin: 10px 0 0;
}
div#widgets-right .sidebar-description {
min-height: 20px;
margin-top: -5px;
}
div#widgets-right .sidebar-name h2,
div#widgets-right .sidebar-name h3 {
padding: 15px 7px 15px 15px;
}
div#widgets-right .widget-top {
padding: 0;
}
div#widgets-right .widgets-sortables {
padding: 0 8px;
margin-bottom: 9px;
position: relative;
min-height: 123px;
}
div#widgets-right .closed .widgets-sortables {
min-height: 0;
margin-bottom: 0;
}
.sidebar-name .spinner,
.remove-inactive-widgets .spinner {
float: none;
position: relative;
top: -2px;
margin: -5px 5px;
}
.sidebar-name .spinner {
position: absolute;
top: 18px;
left: 30px;
}
/* Dragging a widget over a closed sidebar */
#widgets-right .widgets-holder-wrap.widget-hover {
border-color: #787c82;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
/* Accessibility Mode */
.widget-access-link {
float: left;
margin: -5px 10px 10px 0;
}
.widgets_access #widgets-left .widget .widget-top {
cursor: auto;
}
.widgets_access #wpwrap .widgets-holder-wrap.closed .sidebar-description,
.widgets_access #wpwrap .widgets-holder-wrap.closed .widget,
.widgets_access #wpwrap .widget-control-edit {
display: block;
}
.widgets_access #widgets-left .widget .widget-top:hover,
.widgets_access #widgets-right .widget .widget-top:hover {
border-color: #dcdcde;
}
#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 {
display: none;
}
.widget-control-edit {
display: block;
color: #646970;
background: #f0f0f1;
padding: 0 15px;
line-height: 3.30769230;
border-right: 1px solid #dcdcde;
}
#widgets-left .widget-control-edit:hover,
#widgets-right .widget-control-edit:hover {
color: #fff;
background: #3c434a;
border-right: 0;
outline: 1px solid #3c434a;
}
.widgets-holder-wrap .sidebar-name,
.widgets-holder-wrap .sidebar-description {
-webkit-user-select: none;
user-select: none;
}
.editwidget {
margin: 0 auto;
}
.editwidget .widget-inside {
display: block;
padding: 0 15px;
}
.editwidget .widget-control-actions {
margin-top: 20px;
}
.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 .closed br.clear {
display: none;
}
.js .widgets-holder-wrap.closed .widget.ui-sortable-helper {
display: block;
}
/* Hide Widget Settings by Default */
.widget-inside,
.widget-description {
display: none;
}
.widget-inside {
background: #fff;
}
.widget-inside select {
max-width: 100%;
}
/* Dragging widgets over the available widget area show's a "Deactivate" message */
#removing-widget {
display: none;
font-weight: 400;
padding-right: 15px;
font-size: 12px;
line-height: 1;
color: #000;
}
.js #removing-widget {
color: #72aee6;
}
.widget-control-noform,
#access-off,
.widgets_access .widget-action,
.widgets_access .handlediv,
.widgets_access #access-on,
.widgets_access .widget-holder .description,
.no-js .widget-holder .description {
display: none;
}
.widgets_access .widget-holder,
.widgets_access #widget-list {
padding-top: 10px;
}
.widgets_access #access-off {
display: inline;
}
.widgets_access .sidebar-name,
.widgets_access .widget .widget-top {
cursor: default;
}
/* 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); */
opacity: 0.2;
pointer-events: none;
}
.widget-liquid-left #widgets-left.chooser #available-widgets .widget-in-question {
/* -webkit-filter: none; */
opacity: 1;
pointer-events: auto;
}
.widgets-chooser ul,
#widgets-left .widget-in-question .widget-top,
#available-widgets .widget-top:hover,
div#widgets-right .widget-top:hover,
#widgets-left .widget-top:hover {
border-color: #8c8f94;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.widgets-chooser ul.widgets-chooser-sidebars {
margin: 0;
list-style-type: none;
max-height: 300px;
overflow: auto;
}
.widgets-chooser {
display: none;
}
.widgets-chooser ul {
border: 1px solid #c3c4c7;
}
.widgets-chooser li {
border-bottom: 1px solid #c3c4c7;
background: #fff;
margin: 0;
position: relative;
}
.widgets-chooser .widgets-chooser-button {
width: 100%;
padding: 10px 35px 10px 15px;
background: transparent;
border: 0;
box-sizing: border-box;
text-align: right;
cursor: pointer;
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 {
outline: none;
text-decoration: underline;
}
.widgets-chooser li:last-child {
border: none;
}
.widgets-chooser .widgets-chooser-selected .widgets-chooser-button {
background: #2271b1;
color: #fff;
}
.widgets-chooser .widgets-chooser-selected:before {
content: "\f147";
display: block;
-webkit-font-smoothing: antialiased;
font: normal 26px/1 dashicons;
color: #fff;
position: absolute;
top: 7px;
right: 5px;
}
.widgets-chooser .widgets-chooser-actions {
padding: 10px 0 12px;
text-align: center;
}
#available-widgets .widget .widget-top {
cursor: pointer;
}
#available-widgets .widget.ui-draggable-dragging .widget-top {
cursor: move;
}
/* =Specific widget styling
-------------------------------------------------------------- */
.text-widget-fields {
position: relative;
}
.text-widget-fields [hidden] {
display: none;
}
.text-widget-fields .wp-pointer.wp-pointer-top {
position: absolute;
z-index: 3;
top: 100px;
left: 10px;
right: 10px;
}
.text-widget-fields .wp-pointer .wp-pointer-arrow {
right: auto;
left: 15px;
}
.text-widget-fields .wp-pointer .wp-pointer-buttons {
line-height: 1.4;
}
.custom-html-widget-fields > p > .CodeMirror {
border: 1px solid #dcdcde;
}
.custom-html-widget-fields code {
padding-top: 1px;
padding-bottom: 1px;
}
ul.CodeMirror-hints {
z-index: 101; /* Due to z-index 100 set on .widget.open */
}
.widget-control-actions .custom-html-widget-save-button.button.validation-blocked {
cursor: not-allowed;
}
/* =Media Queries
-------------------------------------------------------------- */
@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 0.25rem 0.25rem;
}
}
@media screen and (max-width: 480px) {
div.widget-liquid-left {
width: 100%;
float: none;
border-left: none;
padding-left: 0;
}
#widgets-left .sidebar-name {
margin-left: 0;
}
#widgets-left #available-widgets .widget-top {
margin-left: 0;
}
#widgets-left .inactive-sidebar .widgets-sortables {
margin-left: 0;
}
div.widget-liquid-right {
width: 100%;
float: none;
}
div.widget {
max-width: 480px;
}
.widget-access-link {
float: none;
margin: 15px 0 0;
}
}
@media screen and (max-width: 320px) {
div.widget {
max-width: 320px;
}
}
@media only screen and (min-width: 1250px) {
#widgets-left #available-widgets .widget {
width: 49%;
float: right;
}
.widget.ui-draggable-dragging {
min-width: 49%;
}
#widgets-left #available-widgets .widget:nth-child(even) {
float: left;
}
#widgets-right .sidebars-column-1,
#widgets-right .sidebars-column-2 {
float: right;
width: 49%;
}
#widgets-right .sidebars-column-1 {
margin-left: 2%;
}
#widgets-right.single-sidebar .sidebars-column-1,
#widgets-right.single-sidebar .sidebars-column-2 {
float: none;
width: 100%;
margin: 0;
}
}