mirror of
https://github.com/WordPress/WordPress.git
synced 2024-11-14 22:56:19 +01:00
50cb2c5e28
WordPress no longer supports many old old browsers: https://make.wordpress.org/core/2017/04/23/target-browser-coverage/ This also removes alot of no longer necessary CSS. It served us well, but we are never getting back together with IE8,9,10. So, in the (paraphrased) words of Taylor Swift: I remember when we dropped support the first time Saying, "This is it, I've had enough, " 'cause like We hadn't seen many users in a month When you said you needed flexbox. (What?) Then you postMessage again and say "IE8, I miss you and I swear I'm gonna change, trust me." Remember how that lasted for a day? I say, "I hate the box model, " we break up, you call me, "I love css-grids." Ooh, we called it off again last night But ooh, this time I'm telling you, I'm telling you We are never ever ever supporting IE 8,9,10, We are never ever ever supporting IE 8,9,10, You go talk to EDGE, talk to my FIREFOX, talk to CHROME But we are never ever ever ever getting back together Like, ever... Fixes #37651. Props stunnedbeast, netweb, jorbin. Built from https://develop.svn.wordpress.org/trunk@41062 git-svn-id: http://core.svn.wordpress.org/trunk@40912 1a063a9b-81f0-0310-95a4-ce76da25c4cd
702 lines
13 KiB
CSS
702 lines
13 KiB
CSS
/* General Widgets Styles */
|
|
|
|
.widget {
|
|
margin: 0 auto 10px;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.widget-top {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
background: #f7f7f7;
|
|
}
|
|
|
|
.widget-top .widget-action {
|
|
border: 0;
|
|
margin: 0;
|
|
padding: 10px;
|
|
background: none;
|
|
cursor: pointer;
|
|
outline: none;
|
|
}
|
|
|
|
.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;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.widgets-holder-wrap .widget-inside {
|
|
border-top: none;
|
|
padding: 1px 15px 15px 15px;
|
|
line-height: 16px;
|
|
}
|
|
|
|
.in-widget-title,
|
|
#widgets-right a.widget-control-edit,
|
|
#available-widgets .widget-description {
|
|
color: #666;
|
|
}
|
|
|
|
.deleting .widget-title,
|
|
.deleting .widget-top .widget-action .toggle-indicator:before {
|
|
color: #a0a5aa;
|
|
}
|
|
|
|
/* 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 .placeholder {
|
|
border: 1px dashed #b4b9be;
|
|
box-sizing: border-box;
|
|
cursor: default;
|
|
line-height: 20px;
|
|
padding: 9px 0;
|
|
position: relative;
|
|
text-align: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.media-widget-control .media-widget-preview {
|
|
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%;
|
|
}
|
|
.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-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: black;
|
|
}
|
|
|
|
.media-widget-video-link .dashicons {
|
|
font: normal 60px/1 'dashicons';
|
|
position: relative;
|
|
width: 100%;
|
|
top: -90px;
|
|
color: white;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.media-widget-video-link.no-poster .dashicons {
|
|
top: 30px;
|
|
}
|
|
|
|
.media-frame #embed-url-field.invalid {
|
|
border: 1px solid #f00;
|
|
}
|
|
|
|
/* Widget Dragging Helpers */
|
|
.widget.ui-draggable-dragging {
|
|
min-width: 100%;
|
|
}
|
|
|
|
.widget.ui-sortable-helper {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.widget-placeholder {
|
|
border: 1px dashed #b4b9be;
|
|
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;
|
|
}
|
|
|
|
.sidebar-name-arrow {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
.js .sidebar-name {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.sidebar-name h2,
|
|
.sidebar-name h3 {
|
|
margin: 0;
|
|
padding: 8px 10px;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.widgets-holder-wrap .description {
|
|
padding: 0 0 15px;
|
|
margin: 0;
|
|
font-style: normal;
|
|
color: #72777c;
|
|
}
|
|
|
|
.widget-holder .description,
|
|
.inactive-sidebar .description {
|
|
color: #555d66;
|
|
}
|
|
|
|
#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 .sidebar-name .sidebar-name-arrow:before {
|
|
padding: 9px;
|
|
}
|
|
|
|
#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-action {
|
|
display: 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;
|
|
}
|
|
|
|
#available-widgets #widget-list {
|
|
position: relative;
|
|
}
|
|
|
|
/* Inactive Sidebars */
|
|
#widgets-left .inactive-sidebar {
|
|
clear: both;
|
|
width: 100%;
|
|
background: transparent;
|
|
padding: 0;
|
|
margin: 0 0 20px 0;
|
|
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 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;
|
|
}
|
|
|
|
div#widgets-right .sidebar-name .sidebar-name-arrow:before {
|
|
top: 2px;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
/* Dragging a widget over a closed sidebar */
|
|
#widgets-right .widgets-holder-wrap.widget-hover {
|
|
border-color: #72777c;
|
|
box-shadow: 0 1px 2px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
/* Accessibility Mode */
|
|
.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: #ddd;
|
|
}
|
|
|
|
#available-widgets .widget-control-edit .edit,
|
|
#widgets-left .inactive-sidebar .widget-control-edit .add,
|
|
#widgets-right .widget-control-edit .add {
|
|
display: none;
|
|
}
|
|
|
|
.widget-control-edit {
|
|
display: block;
|
|
color: #666;
|
|
background: #EEE;
|
|
padding: 0 15px;
|
|
line-height: 43px;
|
|
border-right: 1px solid #DDD;
|
|
}
|
|
|
|
#widgets-left .widget-control-edit:hover,
|
|
#widgets-right .widget-control-edit:hover {
|
|
color: #fff;
|
|
background: #444;
|
|
border-right: 0;
|
|
outline: 1px solid #444;
|
|
}
|
|
|
|
.widgets-holder-wrap .sidebar-name,
|
|
.widgets-holder-wrap .sidebar-description {
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-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;
|
|
}
|
|
|
|
/* 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: black;
|
|
}
|
|
|
|
.js #removing-widget {
|
|
color: #00a0d2;
|
|
}
|
|
|
|
.widget-control-noform,
|
|
#access-off,
|
|
.widgets_access .widget-action,
|
|
.widgets_access .sidebar-name-arrow,
|
|
.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: #999;
|
|
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 #ccc;
|
|
}
|
|
|
|
.widgets-chooser li {
|
|
padding: 10px 35px 10px 15px;
|
|
border-bottom: 1px solid #ccc;
|
|
background: #fff;
|
|
margin: 0;
|
|
cursor: pointer;
|
|
outline: none;
|
|
position: relative;
|
|
transition: background 0.2s ease-in-out;
|
|
}
|
|
|
|
/* @todo looks like these hover/focus states are overridden by .widgets-chooser-selected */
|
|
.widgets-chooser li:hover,
|
|
.widgets-chooser li:focus {
|
|
background: rgba(255,255,255,0.7);
|
|
}
|
|
|
|
.widgets-chooser li:focus:before {
|
|
content: "\f147";
|
|
display: block;
|
|
-webkit-font-smoothing: antialiased;
|
|
font: normal 26px/1 dashicons;
|
|
color: #555d66;
|
|
position: absolute;
|
|
top: 7px;
|
|
right: 5px;
|
|
}
|
|
|
|
.widgets-chooser li:last-child {
|
|
border: none;
|
|
}
|
|
|
|
.widgets-chooser li.widgets-chooser-selected {
|
|
background: #00a0d2;
|
|
color: #fff;
|
|
}
|
|
|
|
.widgets-chooser li.widgets-chooser-selected:before,
|
|
.widgets-chooser li.widgets-chooser-selected:focus: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 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.widgets-chooser button {
|
|
margin-left: 5px;
|
|
}
|
|
|
|
#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.4em;
|
|
}
|
|
|
|
/* =Media Queries
|
|
-------------------------------------------------------------- */
|
|
|
|
@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 {
|
|
margin: 0 auto 10px !important;
|
|
max-width: 480px;
|
|
}
|
|
}
|
|
|
|
@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;
|
|
}
|
|
}
|