mirror of
https://github.com/WordPress/WordPress.git
synced 2024-06-30 16:55:02 +02:00
ab31bf8683
The admin CSS was merged in #18314. After a couple years as it stood, The mess it had become just was no good. One day we realized Grunt is pretty cool, And said "we should use this as our build tool!" Now we can maintain separate files with ease, Using @import and cssmin meets all our needs. Welcome to the future of the WordPress stylesheets, And thanks to Slick Rick for the beats. props jorbin for the initial patch. fixes #26669. Built from https://develop.svn.wordpress.org/trunk@27195 git-svn-id: http://core.svn.wordpress.org/trunk@27054 1a063a9b-81f0-0310-95a4-ce76da25c4cd
575 lines
10 KiB
CSS
575 lines
10 KiB
CSS
/* General Widgets Styles */
|
|
|
|
.widget {
|
|
margin: 0 auto 10px;
|
|
position: relative;
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.widget-top {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
background: #f7f7f7;
|
|
}
|
|
|
|
.widget-top a.widget-action,
|
|
.widget-top a.widget-action:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.widget-title h4 {
|
|
margin: 0;
|
|
padding: 15px;
|
|
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 a.widget-action:after {
|
|
color: #aaa;
|
|
}
|
|
|
|
/* Widget Dragging Helpers */
|
|
.widget.ui-draggable-dragging {
|
|
min-width: 100%;
|
|
}
|
|
|
|
.widget.ui-sortable-helper {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.widget-placeholder {
|
|
border: 1px dashed #bbb;
|
|
margin: 0 auto 10px;
|
|
height: 45px;
|
|
width: 100%;
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
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;
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.sidebar-name-arrow {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
.js .sidebar-name {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.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: #777;
|
|
}
|
|
|
|
#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 h3 {
|
|
padding: 10px 0;
|
|
margin: 0 0 0 10px;
|
|
}
|
|
|
|
div#widgets-left .sidebar-name .sidebar-name-arrow:before {
|
|
left: 0;
|
|
top: 4px;
|
|
padding: 4px 4px 4px 6px;
|
|
}
|
|
|
|
#widgets-left #available-widgets,
|
|
div#widgets-left .widget-holder {
|
|
background: transparent;
|
|
border: none;
|
|
}
|
|
|
|
#widgets-left .widgets-holder-wrap {
|
|
border: none;
|
|
-webkit-box-shadow: 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;
|
|
-webkit-box-shadow: 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:after {
|
|
content: ".";
|
|
display: block;
|
|
height: 0;
|
|
clear: both;
|
|
visibility: hidden;
|
|
}
|
|
|
|
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 h3 {
|
|
padding: 15px 7px;
|
|
}
|
|
|
|
div#widgets-right .sidebar-name .sidebar-name-arrow:before {
|
|
left: 0;
|
|
top: 4px;
|
|
}
|
|
|
|
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 {
|
|
margin: -5px 5px;
|
|
float: none;
|
|
}
|
|
|
|
/* Dragging a widget over a closed sidebar */
|
|
#widgets-right .widgets-holder-wrap.widget-hover {
|
|
border-color: #777;
|
|
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.3);
|
|
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 .closed br.clear {
|
|
display: none;
|
|
}
|
|
|
|
/* 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: normal;
|
|
padding-right: 15px;
|
|
font-size: 12px;
|
|
line-height: 1;
|
|
color: black;
|
|
}
|
|
|
|
.js #removing-widget {
|
|
color: #2ea2cc;
|
|
}
|
|
|
|
.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 {
|
|
-webkit-transition: opacity 0.1s linear;
|
|
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;
|
|
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1);
|
|
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;
|
|
-webkit-transition: background 0.2s ease-in-out;
|
|
transition: background 0.2s ease-in-out;
|
|
}
|
|
|
|
.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: #999;
|
|
position: absolute;
|
|
top: 7px;
|
|
right: 5px;
|
|
}
|
|
|
|
.widgets-chooser li:last-child {
|
|
border: none;
|
|
}
|
|
|
|
.widgets-chooser li.widgets-chooser-selected {
|
|
background: #2ea2cc;
|
|
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;
|
|
}
|
|
|
|
/* =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;
|
|
}
|
|
}
|