Making improvements to new styles added in the MP6 merge, and addressing visual feedback from core team.

Improved and more consistent styling on the widgets & menus pages:

* Use the same visual treatment for both widgets and menus.
* Re-use existing styles from input:focus for draggable elements.
* Use the standard H3 size for widget area titles.
* Re-style the Widgets page drop zone to match drop zone from dashboard.
* Replace the gear icon on Widgets with the standard open/close arrows.
* Remove "Choose a sidebar" header from widget area chooser.

Make open/close arrows more consistent:

* Use the same arrow direction everywhere: pointing down when its container is closed, pointing up when open (following the Dashboard example).
* Set a consistent color for open/close arrows.
* Add a hover color for open/close arrows.
* Make open/close arrows permanently visible; :hover states don't exist on touch.

Make typography and color more consistent:

* Switch all declarations of #dedede to #ddd for simplicity's sake.
* Make H3s the same weight and color as H2s.
* Make select elements the same color as text inputs.
* Make paragraph text #444 so it doesn't look washed out on grey backgrounds.

General improvements:

* Eliminate the border between rows in settings tables.
* Make text and buttons line up in the Customizer.

See #25858.


Built from https://develop.svn.wordpress.org/trunk@26293


git-svn-id: http://core.svn.wordpress.org/trunk@26198 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Matt Thomas 2013-11-20 22:48:09 +00:00
parent 701cd7bf86
commit f26fea70c5
16 changed files with 249 additions and 574 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -161,7 +161,7 @@ body,
#wpbody,
.form-table .pre,
.ui-autocomplete li a {
color: #555;
color: #444;
}
body > #upload-menu {
@ -273,7 +273,7 @@ input[type="tel"],
input[type="url"],
.titlewrap input,
select {
border-color: #dedede;
border-color: #ddd;
}
.inside textarea,
@ -297,7 +297,12 @@ input[type="tel"]:focus,
input[type="url"]:focus,
input[type="checkbox"]:focus,
input[type="radio"]:focus,
select:focus {
select:focus,
#widgets-left .widget-in-question .widget-top,
#available-widgets .widget-top:hover,
#widgets-right .widget-top:hover,
#widgets-left .widget-top:hover,
.menu-item-bar .menu-item-handle:hover {
border-color: #999;
}
@ -369,13 +374,6 @@ h3.dashboard-widget-title small,
color: #222;
}
.form-table th {
border-bottom: 1px solid #dfdfdf;
}
.form-table td {
border-bottom: 1px solid #dfdfdf;
}
.form-table.editcomment td {
border-bottom: none;
}
@ -411,8 +409,9 @@ strong .post-com-count:after {
color: #000;
}
.wrap h2 {
color: #000;
h2,
h3 {
color: #222;
}
.wrap .add-new-h2,
@ -970,9 +969,10 @@ a.post-format-icon:hover:before {
color: #888;
}
.widget,
#available-widgets .widget-top,
.widget-top,
.menu-item-handle,
.menu-item-settings,
.widget-inside,
.postbox,
#menu-settings-column .accordion-container,
#menu-management .menu-edit,
@ -986,21 +986,15 @@ p.popular-tags,
#post-status-info,
.popular-tags,
.feature-filter {
border: 1px solid #dedede;
-webkit-box-shadow: 0px 1px 1px -1px rgba(0,0,0,0.1);
box-shadow: 0px 1px 1px -1px rgba(0,0,0,0.1);
border: 1px solid #ddd;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.05);
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.wp-editor-container {
border-bottom: none;
}
#available-widgets .widget,
.widget.ui-sortable-helper {
-webkit-box-shadow: none;
box-shadow: none;
}
.postbox table.widefat {
-webkit-box-shadow: none;
box-shadow: none;
@ -1021,19 +1015,13 @@ p.popular-tags,
.postbox h3,
#namediv h3,
#submitdiv h3 {
color: #555;
border-bottom: 1px solid #eeeeee;
}
.widget .widget-top,
.menu-item-handle {
background: #e9e9e9;
color: #333;
}
.js .sidebar-name:hover h3,
.js .postbox h3:hover {
color: #000;
background: #fafafa;
color: #222;
}
#misc-publishing-actions label[for="post_status"]:before,
@ -1069,7 +1057,7 @@ span.wp-media-buttons-icon:before {
#screen-meta {
background-color: #fff;
border: 1px solid #dedede;
border: 1px solid #ddd;
border-top: none;
-webkit-box-shadow: 0 1px 0 rgba(0,0,0,.025);
box-shadow: 0 1px 0 rgba(0,0,0,.025);
@ -1105,7 +1093,7 @@ span.wp-media-buttons-icon:before {
/* screen options and help tabs */
#screen-options-link-wrap,
#contextual-help-link-wrap {
border: 1px solid #dedede;
border: 1px solid #ddd;
border-top: none;
background: #fff;
-webkit-box-shadow: 0px 1px 1px -1px rgba(0,0,0,0.1);
@ -1181,7 +1169,11 @@ table.widefat .spam a:hover {
.widget-inside,
.menu-item-settings {
background: #eee;
background: #fff;
}
.menu-item-settings {
border-top: none;
}
#titlediv #title {
@ -1500,10 +1492,6 @@ fieldset.inline-edit-col-right .inline-edit-col {
color: #2ea2cc;
}
.js .meta-box-sortables .postbox:hover .handlediv:before {
color: #888;
}
.tablenav .tablenav-pages {
color: #555;
}
@ -1567,7 +1555,6 @@ fieldset.inline-edit-col-right .inline-edit-col {
.sortable-placeholder {
border-color: #bbb;
background-color: #f5f5f5;
}
#post-body ul.category-tabs li.tabs a,
@ -1596,19 +1583,19 @@ div.widgets-sortables,
}
#widgets-left #available-widgets {
background: #fff;
background: transparent;
}
#available-widgets .widget-description {
color: #555;
#widgets-left .widgets-holder-wrap {
border: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.sidebar-name {
color: #464646;
border-bottom-color: #e1e1e1;
}
.js .sidebar-name:hover,
.js #removing-widget {
color: #2ea2cc;
}
@ -1619,8 +1606,9 @@ div.widgets-sortables,
.in-widget-title,
#widgets-right .widget-top a.widget-control-edit,
#wp_inactive_widgets .in-widget-title {
color: #777;
#wp_inactive_widgets .in-widget-title,
#available-widgets .widget-description {
color: #666;
}
#widgets-right .widget-top a.widget-control-edit:hover {
@ -1715,26 +1703,20 @@ div.widgets-sortables,
color: #f00;
}
.widget-top a.widget-action:hover {
color: #0074a2;
.widget-action,
.handlediv,
.item-edit,
.sidebar-name-arrow,
.accordion-section-title:after {
color: #aaa;
}
.widget-top a.widget-action:after {
color: #333;
}
#wp_inactive_widgets .widget .widget-top a.widget-action {
color: #ddd;
}
.nav-menus-php .item-edit:before,
#wp_inactive_widgets .widget .widget-top a.widget-action:after {
color: #888;
}
.control-section .accordion-section-title::after,
.accordion-section-title::after {
color: #888;
.widget-action:hover,
.handlediv:hover,
.item-edit:hover,
.sidebar-name:hover .sidebar-name-arrow,
.accordion-section-title:hover:after {
color: #777;
}
/* Menu editing */

File diff suppressed because one or more lines are too long

View File

@ -161,7 +161,7 @@ body,
#wpbody,
.form-table .pre,
.ui-autocomplete li a {
color: #555;
color: #444;
}
body > #upload-menu {
@ -273,7 +273,7 @@ input[type="tel"],
input[type="url"],
.titlewrap input,
select {
border-color: #dedede;
border-color: #ddd;
}
.inside textarea,
@ -297,7 +297,12 @@ input[type="tel"]:focus,
input[type="url"]:focus,
input[type="checkbox"]:focus,
input[type="radio"]:focus,
select:focus {
select:focus,
#widgets-left .widget-in-question .widget-top,
#available-widgets .widget-top:hover,
#widgets-right .widget-top:hover,
#widgets-left .widget-top:hover,
.menu-item-bar .menu-item-handle:hover {
border-color: #999;
}
@ -369,13 +374,6 @@ h3.dashboard-widget-title small,
color: #222;
}
.form-table th {
border-bottom: 1px solid #dfdfdf;
}
.form-table td {
border-bottom: 1px solid #dfdfdf;
}
.form-table.editcomment td {
border-bottom: none;
}
@ -411,8 +409,9 @@ strong .post-com-count:after {
color: #000;
}
.wrap h2 {
color: #000;
h2,
h3 {
color: #222;
}
.wrap .add-new-h2,
@ -970,9 +969,10 @@ a.post-format-icon:hover:before {
color: #888;
}
.widget,
#available-widgets .widget-top,
.widget-top,
.menu-item-handle,
.menu-item-settings,
.widget-inside,
.postbox,
#menu-settings-column .accordion-container,
#menu-management .menu-edit,
@ -986,21 +986,15 @@ p.popular-tags,
#post-status-info,
.popular-tags,
.feature-filter {
border: 1px solid #dedede;
-webkit-box-shadow: 0px 1px 1px -1px rgba(0,0,0,0.1);
box-shadow: 0px 1px 1px -1px rgba(0,0,0,0.1);
border: 1px solid #ddd;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.05);
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.wp-editor-container {
border-bottom: none;
}
#available-widgets .widget,
.widget.ui-sortable-helper {
-webkit-box-shadow: none;
box-shadow: none;
}
.postbox table.widefat {
-webkit-box-shadow: none;
box-shadow: none;
@ -1021,19 +1015,13 @@ p.popular-tags,
.postbox h3,
#namediv h3,
#submitdiv h3 {
color: #555;
border-bottom: 1px solid #eeeeee;
}
.widget .widget-top,
.menu-item-handle {
background: #e9e9e9;
color: #333;
}
.js .sidebar-name:hover h3,
.js .postbox h3:hover {
color: #000;
background: #fafafa;
color: #222;
}
#misc-publishing-actions label[for="post_status"]:before,
@ -1069,7 +1057,7 @@ span.wp-media-buttons-icon:before {
#screen-meta {
background-color: #fff;
border: 1px solid #dedede;
border: 1px solid #ddd;
border-top: none;
-webkit-box-shadow: 0 1px 0 rgba(0,0,0,.025);
box-shadow: 0 1px 0 rgba(0,0,0,.025);
@ -1105,7 +1093,7 @@ span.wp-media-buttons-icon:before {
/* screen options and help tabs */
#screen-options-link-wrap,
#contextual-help-link-wrap {
border: 1px solid #dedede;
border: 1px solid #ddd;
border-top: none;
background: #fff;
-webkit-box-shadow: 0px 1px 1px -1px rgba(0,0,0,0.1);
@ -1181,7 +1169,11 @@ table.widefat .spam a:hover {
.widget-inside,
.menu-item-settings {
background: #eee;
background: #fff;
}
.menu-item-settings {
border-top: none;
}
#titlediv #title {
@ -1500,10 +1492,6 @@ fieldset.inline-edit-col-right .inline-edit-col {
color: #2ea2cc;
}
.js .meta-box-sortables .postbox:hover .handlediv:before {
color: #888;
}
.tablenav .tablenav-pages {
color: #555;
}
@ -1567,7 +1555,6 @@ fieldset.inline-edit-col-right .inline-edit-col {
.sortable-placeholder {
border-color: #bbb;
background-color: #f5f5f5;
}
#post-body ul.category-tabs li.tabs a,
@ -1596,19 +1583,19 @@ div.widgets-sortables,
}
#widgets-left #available-widgets {
background: #fff;
background: transparent;
}
#available-widgets .widget-description {
color: #555;
#widgets-left .widgets-holder-wrap {
border: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.sidebar-name {
color: #464646;
border-bottom-color: #e1e1e1;
}
.js .sidebar-name:hover,
.js #removing-widget {
color: #2ea2cc;
}
@ -1619,8 +1606,9 @@ div.widgets-sortables,
.in-widget-title,
#widgets-right .widget-top a.widget-control-edit,
#wp_inactive_widgets .in-widget-title {
color: #777;
#wp_inactive_widgets .in-widget-title,
#available-widgets .widget-description {
color: #666;
}
#widgets-right .widget-top a.widget-control-edit:hover {
@ -1715,26 +1703,20 @@ div.widgets-sortables,
color: #f00;
}
.widget-top a.widget-action:hover {
color: #0074a2;
.widget-action,
.handlediv,
.item-edit,
.sidebar-name-arrow,
.accordion-section-title:after {
color: #aaa;
}
.widget-top a.widget-action:after {
color: #333;
}
#wp_inactive_widgets .widget .widget-top a.widget-action {
color: #ddd;
}
.nav-menus-php .item-edit:before,
#wp_inactive_widgets .widget .widget-top a.widget-action:after {
color: #888;
}
.control-section .accordion-section-title::after,
.accordion-section-title::after {
color: #888;
.widget-action:hover,
.handlediv:hover,
.item-edit:hover,
.sidebar-name:hover .sidebar-name-arrow,
.accordion-section-title:hover:after {
color: #777;
}
/* Menu editing */

File diff suppressed because one or more lines are too long

View File

@ -20,7 +20,7 @@ body {
#customize-header-actions .button-primary {
float: left;
margin-top: 10px;
margin-top: 9px;
}
#customize-header-actions .spinner {

File diff suppressed because one or more lines are too long

View File

@ -20,7 +20,7 @@ body {
#customize-header-actions .button-primary {
float: right;
margin-top: 10px;
margin-top: 9px;
}
#customize-header-actions .spinner {

File diff suppressed because one or more lines are too long

View File

@ -250,8 +250,6 @@ textarea {
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box; /* ie8 only */
box-sizing: border-box;
-webkit-border-radius: 0;
border-radius: 0;
}
input[type="checkbox"],
@ -289,10 +287,6 @@ td > input[type="checkbox"],
margin-top: -2px;
}
input[type="checkbox"] {
border-radius: 0;
}
input[type=radio] {
border-radius: 50%;
margin-left: 4px;
@ -492,6 +486,7 @@ h1 {
h2 {
font-size: 1.5em;
margin: .83em 0;
font-weight: 400;
}
h3 {
@ -884,7 +879,11 @@ input[type="tel"]:focus,
input[type="url"]:focus,
input[type="checkbox"]:focus,
input[type="radio"]:focus,
select:focus {
select:focus,
#widgets-chooser ul,
#widgets-left .widget-in-question .widget-top,
#available-widgets .widget-top:hover,
div#widgets-right .widget-top:hover {
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1);
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
@ -1088,7 +1087,7 @@ p.install-help {
padding: 2px;
line-height: 28px;
height: 28px;
color: #555;
color: #333;
vertical-align: top;
}
@ -1321,7 +1320,7 @@ ul#add-to-blog-users {
#major-publishing-actions {
padding: 10px;
clear: both;
border-top: 1px solid #dedede;
border-top: 1px solid #ddd;
background: #f5f5f5;
}
@ -2360,7 +2359,7 @@ html.wp-toolbar {
}
.metabox-holder .postbox-container .empty-container {
border: 3px dashed #CCCCCC;
border: 3px dashed #bbb;
height: 250px;
}
@ -5788,7 +5787,7 @@ form.upgrade .hint {
}
.drag-drop #drag-drop-area {
border: 4px dashed #DDDDDD;
border: 4px dashed #bbb;
height: 200px;
}
@ -6081,7 +6080,7 @@ span.imgedit-scale-warn {
.form-table td {
margin-bottom: 9px;
padding: 18px 10px;
padding: 15px 10px;
line-height: 1.3;
font-size: 14px;
vertical-align: middle;
@ -6787,7 +6786,7 @@ h2 .nav-tab {
.picker-dropdown {
background: #fcfcfc;
border: 1px solid #dedede;
border: 1px solid #ddd;
margin-left: 12%;
max-width: 270px;
position: relative;
@ -6833,7 +6832,7 @@ h2 .nav-tab {
.picker-dropdown.dropdown-container:before {
top: -11px;
z-index: 1;
border-bottom-color: #dedede;
border-bottom-color: #ddd;
}
.picker-dropdown-arrow {
@ -6845,7 +6844,7 @@ h2 .nav-tab {
height: 100%;
background: white;
text-align: center;
border: 1px solid #dedede;
border: 1px solid #ddd;
border-right-width: 0;
cursor: pointer;
}
@ -6862,7 +6861,7 @@ h2 .nav-tab {
.color-option {
display: block;
padding: 20px;
border-top: 1px solid #dedede;
border-top: 1px solid #ddd;
}
.color-option:hover,
@ -7504,7 +7503,7 @@ body.full-overlay-active {
right: 0;
left: 0;
height: 45px;
padding: 0 20px;
padding: 0 15px;
line-height: 45px;
z-index: 10;
margin: 0;
@ -7514,7 +7513,7 @@ body.full-overlay-active {
}
.wp-full-overlay-sidebar .wp-full-overlay-header a.back {
margin-top: 10px;
margin-top: 9px;
}
.wp-full-overlay-sidebar .wp-full-overlay-footer {
@ -9074,10 +9073,9 @@ body.interim-login {
.menu-item-bar .menu-item-handle {
border: 1px solid #dfdfdf;
position: relative;
padding-right: 10px;
padding-left: 2px;
padding: 10px 15px;
height: auto;
width: 400px;
width: 382px;
line-height: 30px;
overflow: hidden;
word-wrap: break-word;
@ -9092,14 +9090,6 @@ body.interim-login {
background-image: linear-gradient(to top, #f6c9cc, #fdf8ff);
}
.menu-item-edit-active .menu-item-handle {
-webkit-border-bottom-left-radius: 0;
-webkit-border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-bottom: none;
}
.no-js .menu-item-edit-active .item-edit {
display: none;
}
@ -9115,7 +9105,6 @@ body.interim-login {
.menu-item-handle .item-title {
font-size: 13px;
font-weight: 600;
padding: 5px 0;
line-height: 20px;
display: block;
margin-left: 13em;
@ -9179,7 +9168,7 @@ body.menu-max-depth-11 { min-width: 1280px !important; }
/* Menu item controls */
.item-type {
font-size: 12px;
padding: 7px 10px;
padding: 12px 10px;
line-height: 18px;
display: block;
}
@ -9209,7 +9198,7 @@ body.menu-max-depth-11 { min-width: 1280px !important; }
top: 0;
display: block;
width: 30px;
height: 36px;
height: 40px;
margin-left: 0 !important;
text-indent: 100%;
overflow: hidden;
@ -9225,6 +9214,8 @@ body.menu-max-depth-11 { min-width: 1280px !important; }
display: block;
width: 402px;
padding: 10px 10px 10px 0;
position: relative;
z-index: 10; /* Keep .item-title's shadow from appearing on top of .menu-item-settings */
}
.menu-item-settings .field-move a {
@ -9234,12 +9225,10 @@ body.menu-max-depth-11 { min-width: 1280px !important; }
.menu-item-edit-active .menu-item-settings {
display: block;
border-top: none;
}
.menu-item-edit-inactive .menu-item-settings {
display: none;
border-top: none;
}
.add-menu-item-pagelinks {
@ -9682,26 +9671,14 @@ h3.tb {
text-decoration: none !important;
}
/* Make the tiny arrow visible on the widgets page at all times */
.js .widgets-holder-wrap .sidebar-name .sidebar-name-arrow:before {
color: rgba(136,136,136,.4);
}
.js .widgets-holder-wrap .sidebar-name .sidebar-name-arrow:before {
content: '\f142';
}
.js .widgets-holder-wrap.closed .sidebar-name .sidebar-name-arrow:before {
content: '\f140';
}
/* Show the arrow only on hover */
.js .sidebar-name:hover .sidebar-name-arrow:before,
.js .meta-box-sortables .postbox:hover .handlediv:before {
.js .sidebar-name .sidebar-name-arrow:before,
.js .meta-box-sortables .postbox .handlediv:before {
content: '\f142';
color: #888;
}
.js .widgets-holder-wrap.closed:hover .sidebar-name-arrow:before,
.js .meta-box-sortables .postbox.closed:hover .handlediv:before {
.js .widgets-holder-wrap.closed .sidebar-name-arrow:before,
.js .meta-box-sortables .postbox.closed .handlediv:before {
content: '\f140';
}
@ -10002,14 +9979,13 @@ input.newtag:focus ~ div.taghint {
margin: 10px auto;
/* min-width: 50%; Not sure if this is needed */
position: relative;
border: none !important; /* ln 991 in colors-fresh.css */
box-sizing: border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
.widget-top {
font-size: 12px;
font-size: 13px;
font-weight: 600;
background: #f7f7f7;
}
@ -10021,15 +9997,15 @@ input.newtag:focus ~ div.taghint {
.widget-title h4 {
margin: 0;
padding: 18px 15px;
padding: 15px;
line-height: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.widget-inside {
background: #fff !important; /* ln 1204 in colors.fresh.css */
.widgets-holder-wrap .widget-inside {
border-top: none;
padding: 1px 15px 15px 15px;
line-height: 16px;
}
@ -10042,20 +10018,15 @@ input.newtag:focus ~ div.taghint {
}
.widget.ui-sortable-helper {
border: 1px solid #DEDEDE;
border-radius: 3px;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
opacity: 0.8;
z-index: 2000;
}
.widget-placeholder {
border: 1px solid #dedede;
margin: auto auto -1px;
border: 1px dashed #bbb;
margin: 10px 0;
height: 50px;
width: 100%;
background: #eee;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
@ -10082,8 +10053,6 @@ input.newtag:focus ~ div.taghint {
}
.sidebar-name h3 {
font-weight: normal;
font-size: 15px;
margin: 0;
padding: 8px 10px;
overflow: hidden;
@ -10094,16 +10063,18 @@ input.newtag:focus ~ div.taghint {
padding: 0;
margin: 0;
font-style: normal;
font-size: 12px;
color: #777;
}
#available-widgets.widgets-holder-wrap .description {
padding-bottom: 10px;
}
/* Widgets 2-col Layout */
div.widget-liquid-left {
margin: 0;
width: 38%;
float: right;
border-left: 2px solid #ccc;
}
div.widget-liquid-right {
@ -10114,8 +10085,7 @@ div.widget-liquid-right {
/* Widgets Left - Available Widgets */
div#widgets-left {
margin: 0;
padding: 12px 0 0 5%;
padding-top: 12px;
}
div#widgets-left .closed .sidebar-name,
@ -10128,24 +10098,10 @@ div#widgets-left .sidebar-name h3 {
margin: 0 0 0 10px;
}
div#widgets-left .sidebar-name:hover h3 {
color: #464646;
}
div#widgets-left .sidebar-name .sidebar-name-arrow:before {
left: 0;
top: 4px;
padding: 4px 4px 4px 6px;
border-radius: 20px;
}
div#widgets-left .sidebar-name:hover .sidebar-name-arrow:before {
background: #ccc;
}
div#widgets-left .closed .sidebar-name .sidebar-name-arrow:before {
background: #999;
color: #fff;
}
div#widgets-left .widget-holder {
@ -10153,41 +10109,21 @@ div#widgets-left .widget-holder {
border: none;
}
#available-widgets {
background: transparent !important; /* ln 1620 colors-fresh.css */
margin: 0;
border-radius: none;
box-shadow: none;
border: none;
}
#available-widgets .widget-title-action {
display: none;
}
#available-widgets .widget {
margin: 10px 0 0 0;
background: #ddd;
border-radius: 3px;
margin: 0;
}
#available-widgets .widget:nth-child(odd) {
clear: both;
}
#available-widgets .widget-top {
border-radius: 3px;
background: #ffffff; /* ln 1047 in colors-fresh.css */
border: 1px solid #bbb !important; /* ln 991 in colors-fresh.css */
}
#available-widgets .widget-top:hover {
border-color: #999 !important; /* ln 991 in colors-fresh.css */
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
#available-widgets .widget .widget-description {
display: block;
padding: 10px 16px;
padding: 10px 15px;
font-size: 12px;
}
@ -10206,46 +10142,21 @@ div#widgets-left .widget-holder {
margin-top: 40px;
}
#widgets-left .inactive-sidebar .widget {
margin: 10px 0 0 0;
}
#widgets-left .inactive-sidebar .widget-inside {
-webkit-border-bottom-left-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
-moz-border-radius-bottomright: 3px;
-moz-border-radius-bottomleft: 3px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
background: #dfdfdf;
}
#widgets-left .inactive-sidebar .widget-top {
background: #fff !important; /* ln 991 in colors-fresh.css */
border: 1px solid #bbb !important; /* ln 991 in colors-fresh.css */
border-radius: 3px;
}
#widgets-left .inactive-sidebar .widget-top:hover {
border-color: #999 !important; /* ln 991 in colors-fresh.css */
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
/* Not sure what this is for... */
div#widgets-left .inactive-sidebar .widget.expanded {
right: auto;
}
#widgets-left .inactive-sidebar .widget-title-action {
.widget-title-action {
float: left;
position: relative;
top: 13px;
top: 11px;
left: 10px;
}
div#widgets-right a.widget-action:after,
div#widgets-left .inactive-sidebar .widget-action:after {
content: '\f111';
color: #888;
content: '\f140';
}
div#widgets-left .inactive-sidebar .widgets-sortables {
@ -10256,19 +10167,6 @@ div#widgets-left .inactive-sidebar .widgets-sortables {
position: relative;
}
div#widgets-left .inactive-sidebar .widget-placeholder {
border: 1px solid #ccc;
margin: 10px 0 0;
height: 50px;
width: 100%;
border-radius: 3px;
background: #e7e7e7;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* Widgets Right */
div#widgets-right:after {
@ -10285,13 +10183,12 @@ div#widgets-right .widgets-holder-wrap {
div#widgets-right .widget {
margin: 0 auto;
border: 1px solid #dedede !important; /* ln 991 in colors-fresh.css */
margin-bottom: -1px;
margin-bottom: 10px;
}
div#widgets-right .sidebar-description {
border-top: 1px solid #eeeeee;
padding: 10px 15px 15px 15px;
padding: 10px 15px;
}
div#widgets-right .closed .sidebar-description {
@ -10309,23 +10206,6 @@ div#widgets-right .sidebar-name .sidebar-name-arrow:before {
div#widgets-right .widget-top {
padding: 0;
background: #f7f7f7;
}
div#widgets-right .widget-title-action {
float: left;
position: relative;
top: 14px;
left: 10px;
}
div#widgets-right a.widget-action:after {
content: '\f111';
color: #888;
}
div#widgets-right .widget-inside {
border-top: 1px solid #dedede;
}
div#widgets-right .widgets-sortables {
@ -10335,21 +10215,6 @@ div#widgets-right .widgets-sortables {
min-height: 50px;
}
div#widgets-right .widgets-sortables:before {
display: block;
content: "";
text-align: center;
position: absolute;
right: 8px;
left: 8px;
bottom: 0;
height: 47px;
border: 1px dashed #dedede;
line-height: 40px;
font-weight: 600;
color: #aaa;
}
.sidebar-name .spinner {
margin: -5px 5px;
float: none;
@ -10412,7 +10277,7 @@ div#widgets-right .widgets-sortables:before {
.control-section .accordion-section-title:after,
.accordion-section-title:after {
left: 0;
content: '\f141';
content: '\f140';
border: none;
background: none;
font: normal 20px/1 'dashicons';
@ -10427,7 +10292,7 @@ div#widgets-right .widgets-sortables:before {
text-decoration: none !important;
}
.nav-menus-php .item-edit:before {
line-height: 1.5;
line-height: 2.1;
}
.control-section .accordion-section-title:after,
.accordion-section-title:after {
@ -10438,7 +10303,7 @@ div#widgets-right .widgets-sortables:before {
.control-section.open .accordion-section-title:after,
#customize-info.open .accordion-section-title:after,
.nav-menus-php .menu-item-edit-active .item-edit:before {
content: '\f140';
content: '\f142';
}
/* Hide Widget Settings by Default */
@ -10513,27 +10378,6 @@ div#widgets-right .widgets-sortables:before {
pointer-events: auto;
}
.widget-liquid-left #widgets-left.chooser #available-widgets .widget-in-question .widget-top {
background: #fff;
border: 1px solid #bbb;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
#widgets-chooser {
clear: both;
display: none;
max-width: 400px;
}
#widgets-chooser h3 {
font-size: 12px;
padding: 15px 35px 12px 0;
margin: 0;
border-top: 1px solid #ccc;
background: rgba(0,0,0,0.6);
color: #fff;
}
#widgets-chooser ul.widgets-chooser-sidebars {
margin: 0;
list-style-type: none;
@ -10541,10 +10385,18 @@ div#widgets-right .widgets-sortables:before {
overflow: auto;
}
#widgets-chooser {
display: none;
}
#widgets-chooser ul {
border: 1px solid #ccc;
}
#widgets-chooser li {
padding: 10px 35px 10px 15px;
background: #fff;
border-bottom: 1px solid #ccc;
background: #fff;
margin: 0;
cursor: pointer;
outline: none;
@ -10568,8 +10420,12 @@ div#widgets-right .widgets-sortables:before {
right: 5px;
}
#widgets-chooser li:last-child {
border: none;
}
#widgets-chooser li.widgets-chooser-selected {
background: #1075a0;
background: #2ea2cc;
color: #fff;
}
@ -10632,7 +10488,7 @@ div#widgets-right .widgets-sortables:before {
.accordion-section-title {
margin: 0;
padding: 15px 20px;
padding: 12px 15px 15px;
position: relative;
border-right: 1px solid #dfdfdf;
border-left: 1px solid #dfdfdf;
@ -10686,7 +10542,7 @@ div#widgets-right .widgets-sortables:before {
.js .control-section .accordion-section-title:hover,
.js .control-section.open .accordion-section-title,
.js .control-section .accordion-section-title:focus {
color: #555;
color: #222;
background: #f5f5f5;
}

File diff suppressed because one or more lines are too long

View File

@ -250,8 +250,6 @@ textarea {
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box; /* ie8 only */
box-sizing: border-box;
-webkit-border-radius: 0;
border-radius: 0;
}
input[type="checkbox"],
@ -289,10 +287,6 @@ td > input[type="checkbox"],
margin-top: -2px;
}
input[type="checkbox"] {
border-radius: 0;
}
input[type=radio] {
border-radius: 50%;
margin-right: 4px;
@ -492,6 +486,7 @@ h1 {
h2 {
font-size: 1.5em;
margin: .83em 0;
font-weight: 400;
}
h3 {
@ -884,7 +879,11 @@ input[type="tel"]:focus,
input[type="url"]:focus,
input[type="checkbox"]:focus,
input[type="radio"]:focus,
select:focus {
select:focus,
#widgets-chooser ul,
#widgets-left .widget-in-question .widget-top,
#available-widgets .widget-top:hover,
div#widgets-right .widget-top:hover {
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1);
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
@ -1088,7 +1087,7 @@ p.install-help {
padding: 2px;
line-height: 28px;
height: 28px;
color: #555;
color: #333;
vertical-align: top;
}
@ -1321,7 +1320,7 @@ ul#add-to-blog-users {
#major-publishing-actions {
padding: 10px;
clear: both;
border-top: 1px solid #dedede;
border-top: 1px solid #ddd;
background: #f5f5f5;
}
@ -2360,7 +2359,7 @@ html.wp-toolbar {
}
.metabox-holder .postbox-container .empty-container {
border: 3px dashed #CCCCCC;
border: 3px dashed #bbb;
height: 250px;
}
@ -5788,7 +5787,7 @@ form.upgrade .hint {
}
.drag-drop #drag-drop-area {
border: 4px dashed #DDDDDD;
border: 4px dashed #bbb;
height: 200px;
}
@ -6081,7 +6080,7 @@ span.imgedit-scale-warn {
.form-table td {
margin-bottom: 9px;
padding: 18px 10px;
padding: 15px 10px;
line-height: 1.3;
font-size: 14px;
vertical-align: middle;
@ -6787,7 +6786,7 @@ h2 .nav-tab {
.picker-dropdown {
background: #fcfcfc;
border: 1px solid #dedede;
border: 1px solid #ddd;
margin-right: 12%;
max-width: 270px;
position: relative;
@ -6833,7 +6832,7 @@ h2 .nav-tab {
.picker-dropdown.dropdown-container:before {
top: -11px;
z-index: 1;
border-bottom-color: #dedede;
border-bottom-color: #ddd;
}
.picker-dropdown-arrow {
@ -6845,7 +6844,7 @@ h2 .nav-tab {
height: 100%;
background: white;
text-align: center;
border: 1px solid #dedede;
border: 1px solid #ddd;
border-left-width: 0;
cursor: pointer;
}
@ -6862,7 +6861,7 @@ h2 .nav-tab {
.color-option {
display: block;
padding: 20px;
border-top: 1px solid #dedede;
border-top: 1px solid #ddd;
}
.color-option:hover,
@ -7504,7 +7503,7 @@ body.full-overlay-active {
left: 0;
right: 0;
height: 45px;
padding: 0 20px;
padding: 0 15px;
line-height: 45px;
z-index: 10;
margin: 0;
@ -7514,7 +7513,7 @@ body.full-overlay-active {
}
.wp-full-overlay-sidebar .wp-full-overlay-header a.back {
margin-top: 10px;
margin-top: 9px;
}
.wp-full-overlay-sidebar .wp-full-overlay-footer {
@ -9074,10 +9073,9 @@ body.interim-login {
.menu-item-bar .menu-item-handle {
border: 1px solid #dfdfdf;
position: relative;
padding-left: 10px;
padding-right: 2px;
padding: 10px 15px;
height: auto;
width: 400px;
width: 382px;
line-height: 30px;
overflow: hidden;
word-wrap: break-word;
@ -9092,14 +9090,6 @@ body.interim-login {
background-image: linear-gradient(to top, #f6c9cc, #fdf8ff);
}
.menu-item-edit-active .menu-item-handle {
-webkit-border-bottom-right-radius: 0;
-webkit-border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
border-bottom: none;
}
.no-js .menu-item-edit-active .item-edit {
display: none;
}
@ -9115,7 +9105,6 @@ body.interim-login {
.menu-item-handle .item-title {
font-size: 13px;
font-weight: 600;
padding: 5px 0;
line-height: 20px;
display: block;
margin-right: 13em;
@ -9179,7 +9168,7 @@ body.menu-max-depth-11 { min-width: 1280px !important; }
/* Menu item controls */
.item-type {
font-size: 12px;
padding: 7px 10px;
padding: 12px 10px;
line-height: 18px;
display: block;
}
@ -9209,7 +9198,7 @@ body.menu-max-depth-11 { min-width: 1280px !important; }
top: 0;
display: block;
width: 30px;
height: 36px;
height: 40px;
margin-right: 0 !important;
text-indent: 100%;
overflow: hidden;
@ -9225,6 +9214,8 @@ body.menu-max-depth-11 { min-width: 1280px !important; }
display: block;
width: 402px;
padding: 10px 0 10px 10px;
position: relative;
z-index: 10; /* Keep .item-title's shadow from appearing on top of .menu-item-settings */
}
.menu-item-settings .field-move a {
@ -9234,12 +9225,10 @@ body.menu-max-depth-11 { min-width: 1280px !important; }
.menu-item-edit-active .menu-item-settings {
display: block;
border-top: none;
}
.menu-item-edit-inactive .menu-item-settings {
display: none;
border-top: none;
}
.add-menu-item-pagelinks {
@ -9682,26 +9671,14 @@ h3.tb {
text-decoration: none !important;
}
/* Make the tiny arrow visible on the widgets page at all times */
.js .widgets-holder-wrap .sidebar-name .sidebar-name-arrow:before {
color: rgba(136,136,136,.4);
}
.js .widgets-holder-wrap .sidebar-name .sidebar-name-arrow:before {
content: '\f142';
}
.js .widgets-holder-wrap.closed .sidebar-name .sidebar-name-arrow:before {
content: '\f140';
}
/* Show the arrow only on hover */
.js .sidebar-name:hover .sidebar-name-arrow:before,
.js .meta-box-sortables .postbox:hover .handlediv:before {
.js .sidebar-name .sidebar-name-arrow:before,
.js .meta-box-sortables .postbox .handlediv:before {
content: '\f142';
color: #888;
}
.js .widgets-holder-wrap.closed:hover .sidebar-name-arrow:before,
.js .meta-box-sortables .postbox.closed:hover .handlediv:before {
.js .widgets-holder-wrap.closed .sidebar-name-arrow:before,
.js .meta-box-sortables .postbox.closed .handlediv:before {
content: '\f140';
}
@ -10002,14 +9979,13 @@ input.newtag:focus ~ div.taghint {
margin: 10px auto;
/* min-width: 50%; Not sure if this is needed */
position: relative;
border: none !important; /* ln 991 in colors-fresh.css */
box-sizing: border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
.widget-top {
font-size: 12px;
font-size: 13px;
font-weight: 600;
background: #f7f7f7;
}
@ -10021,15 +9997,15 @@ input.newtag:focus ~ div.taghint {
.widget-title h4 {
margin: 0;
padding: 18px 15px;
padding: 15px;
line-height: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.widget-inside {
background: #fff !important; /* ln 1204 in colors.fresh.css */
.widgets-holder-wrap .widget-inside {
border-top: none;
padding: 1px 15px 15px 15px;
line-height: 16px;
}
@ -10042,20 +10018,15 @@ input.newtag:focus ~ div.taghint {
}
.widget.ui-sortable-helper {
border: 1px solid #DEDEDE;
border-radius: 3px;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
opacity: 0.8;
z-index: 2000;
}
.widget-placeholder {
border: 1px solid #dedede;
margin: auto auto -1px;
border: 1px dashed #bbb;
margin: 10px 0;
height: 50px;
width: 100%;
background: #eee;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
@ -10082,8 +10053,6 @@ input.newtag:focus ~ div.taghint {
}
.sidebar-name h3 {
font-weight: normal;
font-size: 15px;
margin: 0;
padding: 8px 10px;
overflow: hidden;
@ -10094,16 +10063,18 @@ input.newtag:focus ~ div.taghint {
padding: 0;
margin: 0;
font-style: normal;
font-size: 12px;
color: #777;
}
#available-widgets.widgets-holder-wrap .description {
padding-bottom: 10px;
}
/* Widgets 2-col Layout */
div.widget-liquid-left {
margin: 0;
width: 38%;
float: left;
border-right: 2px solid #ccc;
}
div.widget-liquid-right {
@ -10114,8 +10085,7 @@ div.widget-liquid-right {
/* Widgets Left - Available Widgets */
div#widgets-left {
margin: 0;
padding: 12px 5% 0 0;
padding-top: 12px;
}
div#widgets-left .closed .sidebar-name,
@ -10128,24 +10098,10 @@ div#widgets-left .sidebar-name h3 {
margin: 0 10px 0 0;
}
div#widgets-left .sidebar-name:hover h3 {
color: #464646;
}
div#widgets-left .sidebar-name .sidebar-name-arrow:before {
right: 0;
top: 4px;
padding: 4px 6px 4px 4px;
border-radius: 20px;
}
div#widgets-left .sidebar-name:hover .sidebar-name-arrow:before {
background: #ccc;
}
div#widgets-left .closed .sidebar-name .sidebar-name-arrow:before {
background: #999;
color: #fff;
}
div#widgets-left .widget-holder {
@ -10153,41 +10109,21 @@ div#widgets-left .widget-holder {
border: none;
}
#available-widgets {
background: transparent !important; /* ln 1620 colors-fresh.css */
margin: 0;
border-radius: none;
box-shadow: none;
border: none;
}
#available-widgets .widget-title-action {
display: none;
}
#available-widgets .widget {
margin: 10px 0 0 0;
background: #ddd;
border-radius: 3px;
margin: 0;
}
#available-widgets .widget:nth-child(odd) {
clear: both;
}
#available-widgets .widget-top {
border-radius: 3px;
background: #ffffff; /* ln 1047 in colors-fresh.css */
border: 1px solid #bbb !important; /* ln 991 in colors-fresh.css */
}
#available-widgets .widget-top:hover {
border-color: #999 !important; /* ln 991 in colors-fresh.css */
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
#available-widgets .widget .widget-description {
display: block;
padding: 10px 16px;
padding: 10px 15px;
font-size: 12px;
}
@ -10206,46 +10142,21 @@ div#widgets-left .widget-holder {
margin-top: 40px;
}
#widgets-left .inactive-sidebar .widget {
margin: 10px 0 0 0;
}
#widgets-left .inactive-sidebar .widget-inside {
-webkit-border-bottom-right-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-bottomright: 3px;
-moz-border-radius-bottomleft: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
background: #dfdfdf;
}
#widgets-left .inactive-sidebar .widget-top {
background: #fff !important; /* ln 991 in colors-fresh.css */
border: 1px solid #bbb !important; /* ln 991 in colors-fresh.css */
border-radius: 3px;
}
#widgets-left .inactive-sidebar .widget-top:hover {
border-color: #999 !important; /* ln 991 in colors-fresh.css */
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
/* Not sure what this is for... */
div#widgets-left .inactive-sidebar .widget.expanded {
left: auto;
}
#widgets-left .inactive-sidebar .widget-title-action {
.widget-title-action {
float: right;
position: relative;
top: 13px;
top: 11px;
right: 10px;
}
div#widgets-right a.widget-action:after,
div#widgets-left .inactive-sidebar .widget-action:after {
content: '\f111';
color: #888;
content: '\f140';
}
div#widgets-left .inactive-sidebar .widgets-sortables {
@ -10256,19 +10167,6 @@ div#widgets-left .inactive-sidebar .widgets-sortables {
position: relative;
}
div#widgets-left .inactive-sidebar .widget-placeholder {
border: 1px solid #ccc;
margin: 10px 0 0;
height: 50px;
width: 100%;
border-radius: 3px;
background: #e7e7e7;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* Widgets Right */
div#widgets-right:after {
@ -10285,13 +10183,12 @@ div#widgets-right .widgets-holder-wrap {
div#widgets-right .widget {
margin: 0 auto;
border: 1px solid #dedede !important; /* ln 991 in colors-fresh.css */
margin-bottom: -1px;
margin-bottom: 10px;
}
div#widgets-right .sidebar-description {
border-top: 1px solid #eeeeee;
padding: 10px 15px 15px 15px;
padding: 10px 15px;
}
div#widgets-right .closed .sidebar-description {
@ -10309,23 +10206,6 @@ div#widgets-right .sidebar-name .sidebar-name-arrow:before {
div#widgets-right .widget-top {
padding: 0;
background: #f7f7f7;
}
div#widgets-right .widget-title-action {
float: right;
position: relative;
top: 14px;
right: 10px;
}
div#widgets-right a.widget-action:after {
content: '\f111';
color: #888;
}
div#widgets-right .widget-inside {
border-top: 1px solid #dedede;
}
div#widgets-right .widgets-sortables {
@ -10335,21 +10215,6 @@ div#widgets-right .widgets-sortables {
min-height: 50px;
}
div#widgets-right .widgets-sortables:before {
display: block;
content: "";
text-align: center;
position: absolute;
left: 8px;
right: 8px;
bottom: 0;
height: 47px;
border: 1px dashed #dedede;
line-height: 40px;
font-weight: 600;
color: #aaa;
}
.sidebar-name .spinner {
margin: -5px 5px;
float: none;
@ -10412,7 +10277,7 @@ div#widgets-right .widgets-sortables:before {
.control-section .accordion-section-title:after,
.accordion-section-title:after {
right: 0;
content: '\f141';
content: '\f140';
border: none;
background: none;
font: normal 20px/1 'dashicons';
@ -10427,7 +10292,7 @@ div#widgets-right .widgets-sortables:before {
text-decoration: none !important;
}
.nav-menus-php .item-edit:before {
line-height: 1.5;
line-height: 2.1;
}
.control-section .accordion-section-title:after,
.accordion-section-title:after {
@ -10438,7 +10303,7 @@ div#widgets-right .widgets-sortables:before {
.control-section.open .accordion-section-title:after,
#customize-info.open .accordion-section-title:after,
.nav-menus-php .menu-item-edit-active .item-edit:before {
content: '\f140';
content: '\f142';
}
/* Hide Widget Settings by Default */
@ -10513,27 +10378,6 @@ div#widgets-right .widgets-sortables:before {
pointer-events: auto;
}
.widget-liquid-left #widgets-left.chooser #available-widgets .widget-in-question .widget-top {
background: #fff;
border: 1px solid #bbb;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
#widgets-chooser {
clear: both;
display: none;
max-width: 400px;
}
#widgets-chooser h3 {
font-size: 12px;
padding: 15px 0 12px 35px;
margin: 0;
border-top: 1px solid #ccc;
background: rgba(0,0,0,0.6);
color: #fff;
}
#widgets-chooser ul.widgets-chooser-sidebars {
margin: 0;
list-style-type: none;
@ -10541,10 +10385,18 @@ div#widgets-right .widgets-sortables:before {
overflow: auto;
}
#widgets-chooser {
display: none;
}
#widgets-chooser ul {
border: 1px solid #ccc;
}
#widgets-chooser li {
padding: 10px 15px 10px 35px;
background: #fff;
border-bottom: 1px solid #ccc;
background: #fff;
margin: 0;
cursor: pointer;
outline: none;
@ -10568,8 +10420,12 @@ div#widgets-right .widgets-sortables:before {
left: 5px;
}
#widgets-chooser li:last-child {
border: none;
}
#widgets-chooser li.widgets-chooser-selected {
background: #1075a0;
background: #2ea2cc;
color: #fff;
}
@ -10632,7 +10488,7 @@ div#widgets-right .widgets-sortables:before {
.accordion-section-title {
margin: 0;
padding: 15px 20px;
padding: 12px 15px 15px;
position: relative;
border-left: 1px solid #dfdfdf;
border-right: 1px solid #dfdfdf;
@ -10686,7 +10542,7 @@ div#widgets-right .widgets-sortables:before {
.js .control-section .accordion-section-title:hover,
.js .control-section.open .accordion-section-title,
.js .control-section .accordion-section-title:focus {
color: #555;
color: #222;
background: #f5f5f5;
}

File diff suppressed because one or more lines are too long

View File

@ -429,7 +429,6 @@ foreach ( $theme_sidebars as $sidebar => $registered_sidebar ) {
</div>
<div id="widgets-chooser">
<h3><?php _e( 'Choose a sidebar:' ); ?></h3>
<ul class="widgets-chooser-sidebars"></ul>
<div class="widgets-chooser-actions">
<button class="button-secondary"><?php _e( 'Cancel' ); ?></button>