Index: src/wp-admin/css/wp-admin.css =================================================================== --- src/wp-admin/css/wp-admin.css (revision 26130) +++ src/wp-admin/css/wp-admin.css (working copy) @@ -630,8 +630,7 @@ .nav-menus-php .major-publishing-actions .form-invalid, #TB_window, .tbtitle, -.highlight, -.editwidget .widget-inside { +.highlight { border-width: 1px; border-style: solid; } @@ -2562,7 +2561,6 @@ margin-bottom: 20px; } -.widget, .postbox, .stuffbox { margin-bottom: 20px; @@ -2570,7 +2568,6 @@ line-height: 1; } -.widget .widget-top, .postbox h3, .stuffbox h3 { margin-top: 1px; @@ -9613,58 +9610,93 @@ margin-bottom: 10px; } -/* widgets */ -/* 2 column liquid layout */ -div.widget-liquid-left { - float: left; - clear: left; - width: 100%; - margin-right: -325px; +/* General Widget Styles */ + +.widget { + 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; } -div#widgets-left { - margin-left: 5px; - margin-right: 325px; +.widget-top { + font-size: 12px; + font-weight: 600; + background: #f7f7f7; } -div#widgets-right { - width: 285px; - margin: 0 auto; +.widget-top a.widget-action, +.widget-top a.widget-action:hover { + text-decoration: none; } -div.widget-liquid-right { - float: right; - clear: right; - width: 300px; +.widget-title h4 { + margin: 0; + padding: 18px 15px; + line-height: 1; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } -.widget-liquid-right .widget { - position: relative; +.widget-inside { + background: #fff !important; /* ln 1204 in colors.fresh.css */ + padding: 1px 15px 15px 15px; + line-height: 16px; } -.widget-liquid-right .widget, -.inactive-sidebar .widget, -.widget-liquid-right .sidebar-description { - width: 250px; - margin: 0 auto 20px; +/* Widget Dragging Helpers */ + +.widget.ui-draggable-dragging { + width: 280px !important; + min-width: 280px !important; } +.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; + border-bottom: none; + margin: 0 auto; + height: 43px; + 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; +} -.widget-liquid-right .widget, -.widget-liquid-right .sidebar-description { - overflow: hidden; + +/* Widget Sidebars */ +.sidebar-name { + border: none; + position: relative; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; } -.widget-liquid-right .sidebar-description { - margin-bottom: 10px; +.sidebar-name-arrow { + position: absolute; + top: 0; + right: 0; + bottom: 0; } -.inactive-sidebar .widget { - margin: 0 10px 20px; - display: inline-block; +.js .sidebar-name { + cursor: pointer; } -div.sidebar-name h3 { +.sidebar-name h3 { font-weight: normal; font-size: 15px; margin: 0; @@ -9673,303 +9705,342 @@ white-space: nowrap; } -div.sidebar-name { - font-size: 13px; - border-bottom-width: 1px; - border-bottom-style: solid; +.widgets-holder-wrap .description { + padding: 0; + margin: 0; + font-style: normal; + font-size: 12px; + color: #777; } -.js .sidebar-name { - cursor: pointer; +/* Widgets 2-col Layout */ +div.widget-liquid-left { + margin: 0; + width: 38%; + float: left; + border-right: 2px solid #ccc; } -.js .closed .sidebar-name { - -webkit-border-bottom-right-radius: 3px; - -webkit-border-bottom-left-radius: 3px; - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; +div.widget-liquid-right { + float: right; + width: 60%; } -.widget-liquid-right .widgets-sortables, -#widgets-left .widget-holder { - border-width: 0 1px 1px; - border-style: none solid solid; - -webkit-border-bottom-right-radius: 3px; - -webkit-border-bottom-left-radius: 3px; - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; -} +/* Widgets Left - Available Widgets */ -.js .closed .widgets-sortables, -.js .closed .widget-holder, -.js .closed br.clear { - display: none; +div#widgets-left { + margin: 0; + padding: 12px 5% 0 0; } -.widget-liquid-right .widgets-sortables { - padding: 15px 0 0; +div#widgets-left .closed .sidebar-name, +div#widgets-left .inactive-sidebar.closed .sidebar-name { + margin-bottom: 10px; } -#available-widgets .widget-holder { - padding: 7px 5px 0; +div#widgets-left .sidebar-name h3 { + padding: 10px 0; + margin: 0 10px 0 0; } -.inactive-sidebar { - padding: 5px 5px 0; +div#widgets-left .sidebar-name:hover h3 { + color: #464646; } -#widget-list .widget { - width: 250px; - margin: 0 10px 15px; - border: 0 none; - background: transparent; - display: inline-block; - vertical-align: top; +div#widgets-left .sidebar-name .sidebar-name-arrow:before { + right: 0; + top: 4px; + padding: 4px 6px 4px 4px; + border-radius: 20px; } -#widget-list .widget-description { - padding: 5px 8px; +div#widgets-left .sidebar-name:hover .sidebar-name-arrow:before { + background: #ccc; } -.widget-placeholder { - border-width: 1px; - border-style: dashed; - margin: 0 auto 20px; - height: 34px; - width: 250px; +div#widgets-left .closed .sidebar-name .sidebar-name-arrow:before { + background: #999; + color: #fff; } -.inactive-sidebar .widget-placeholder { - margin: 0 10px 20px; - float: left; +div#widgets-left .widget-holder { + background: transparent; + border: none; } -div.widgets-holder-wrap { - padding: 0; - margin: 10px 0 20px; +#available-widgets { + background: transparent !important; /* ln 1620 colors-fresh.css */ + margin: 0; + border-radius: none; + box-shadow: none; + border: none; } -#widgets-left #available-widgets { - background-color: transparent; - border: 0 none; +#available-widgets .widget-title-action { + display: none; } -ul#widget-list { - list-style: none; - margin: 0; - padding: 0; - min-height: 100px; +#available-widgets .widget { + margin: 10px 0 0 0; } -.widget .widget-top { - font-size: 12px; - font-weight: 600; - height: 26px; +#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 */ } -.widget .widget-top, -.menu-item-handle { - margin-top: 0; - padding: 4px; +#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); } -.widget-top .widget-title { - padding: 7px 9px; +#available-widgets .more-info { + color: #ccc; + position: absolute; + top: 8px; + right: 0; + bottom: 8px; + padding: 6px 9px 6px 8px; + border-left: 1px dotted #DDD; + cursor: help; } -.widget-top .widget-title-action { - float: right; +#available-widgets .more-info:before { + content: '\f223'; + color: #ccc; + display: inline-block; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font: normal 20px/1 'dashicons'; + vertical-align: top; } -a.widget-action { - display: block; - width: 24px; - height: 26px; - text-decoration: none; +#available-widgets .widget .widget-description { + display: none; + position: absolute; + top: 40px; + right: 5px; + width: 150px; + padding: 10px 14px; + background: rgba(0, 0, 0, 0.7); + border-radius: 3px; + z-index: 10; + color: #fff; } -#available-widgets a.widget-action { - display: none; +/* Inactive Sidebars */ +#widgets-left .inactive-sidebar { + clear: both; + width: 100%; + background: transparent; + padding: 0; + margin: 0 0 20px 0; + border: none; + box-shadow: none; } -.widget-top a.widget-action, -.widget-top a.widget-action:hover { - background: none !important; - border: none !important; - width: 30px; - margin-right: 0 !important; - margin-top: 3px; - text-decoration: none; +#widgets-left .inactive-sidebar.first { + margin-top: 40px; } -.nav-menus-php .item-edit:after, -.widget-top a.widget-action:after, -.control-section .accordion-section-title::after, -.accordion-section-title::after { - right: 0; - content: '\f141'; - border: none; - background: none; - font: normal 20px/1 'dashicons'; - speak: none; - display: block; - padding: 0; - text-indent: 0; - text-align: center; - position: relative; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - text-decoration: none !important; +#widgets-left .inactive-sidebar .description { } -.control-section .accordion-section-title::after, -.accordion-section-title::after { - float: right; - right: 20px; - top: -2px; +#widgets-left .inactive-sidebar .widget { + margin: 10px 0 0 0; } -.widget-top a.widget-action:after { - content: '\f140'; +#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; } -.control-section.open .accordion-section-title::after, -#customize-info.open .accordion-section-title::after, -.nav-menus-php .menu-item-edit-active .item-edit:after { - content: '\f140'; +#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; } -.nav-menus-php .item-controls .item-type { - padding: 11px; - margin-right: 10px; +#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); } -.widget .widget-inside, -.widget .widget-description { - padding: 12px 12px 10px; - font-size: 12px; - line-height: 16px; +/* Not sure what this is for... */ +div#widgets-left .inactive-sidebar .widget.expanded { + left: auto; } -.widget-inside, -.widget-description { - display: none; +#widgets-left .inactive-sidebar .widget-title-action { + float: right; + position: relative; + top: 13px; + right: 10px; } -#available-widgets .widget-description { - display: block; +div#widgets-left .inactive-sidebar .widget-action:after { + content: '\f111'; + color: #888; } -.widget .widget-inside p { - margin: 0 0 1em; +div#widgets-left .inactive-sidebar .widgets-sortables { + min-height: 42px; padding: 0; + background: transparent; + margin: 0; + position: relative; } -.widget-title h4 { - margin: 0; - padding-bottom: 0.2em; - line-height: 1; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; +div#widgets-left .inactive-sidebar .widget-placeholder { + border: 1px solid #ccc; + margin: 0 auto 10px auto; + height: 43px; + width: 100%; + border-radius: 3px; + background: #aaa; + 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-sortables { - min-height: 90px; +/* Widgets Right */ + +div#widgets-right:after { + content: "."; + display: block; + height: 0; + clear: both; + visibility: hidden; } -.widget-control-actions { - margin-top: 8px; +div#widgets-right .widgets-holder-wrap { + margin: 10px 0 0 0; } -.widget-control-actions a { - text-decoration: none; +div#widgets-right .widget { + margin: 0 auto; + border: 1px solid #dedede !important; /* ln 991 in colors-fresh.css */ + border-bottom: none !important; /* ln 991 in colors-fresh.css */ + margin-left: 0 !important; /* Wide format widgets are the devil */ + width: 100% !important; /* Wide format widgets are the devil */ } -.widget-control-actions a:hover { - text-decoration: underline; +div#widgets-right .sidebar-description { + border-top: 1px solid #eeeeee; + padding: 10px 15px 15px 15px; } -.widget-control-actions div.alignleft { - margin-top: 6px; +div#widgets-right .closed .sidebar-description { + display: none; } -div#sidebar-info { - padding: 0 1em; - margin-bottom: 1em; - font-size: 12px; +div#widgets-right .sidebar-name h3 { + padding: 15px 15px; } - -.widget-title a, -.widget-title a:hover { - text-decoration: none; +div#widgets-right .sidebar-name .sidebar-name-arrow:before { + right: 0; + top: 4px; +} +div#widgets-right .widget-top { border-bottom: none; + padding: 0; + background: #f7f7f7; } - -.widget-control-edit { - display: block; - font-size: 12px; - font-weight: normal; - line-height: 26px; - padding: 0 8px 0 0; +div#widgets-right .widget-title-action { + float: right; + position: relative; + top: 14px; + right: 10px; } - -a.widget-control-edit { - text-decoration: none; +div#widgets-right a.widget-action:after { + content: '\f111'; + color: #888; } - -.widget-control-edit .add, -.widget-control-edit .edit { - display: none; +div#widgets-right .widget-inside { + border-top: 1px solid #dedede; } -#available-widgets .widget-control-edit .add, -#widgets-right .widget-control-edit .edit, -.inactive-sidebar .widget-control-edit .edit { - display: inline; +/* The last widget has some additional borders */ +div#widgets-right .widget:last-child { + border-bottom: 1px solid #dedede !important; /* ln 991 in colors-fresh.css */ } -.editwidget { - margin: 0 auto 15px; +div#widgets-right .widgets-sortables { + min-height: 42px !important; /* Inline styles */ + padding: 0 8px; + margin-bottom: 8px; + position: relative; } - -.editwidget .widget-inside { +div#widgets-right .widgets-sortables:before { display: block; - padding: 10px; + content: ""; + text-align: center; + position: absolute; + left: 8px; + right: 8px; + bottom: 1px; + height: 40px; + border: 1px dashed #dedede; + border-radius: 3px; + line-height: 40px; + font-weight: 600; + color: #aaa; } -.inactive p.description { - margin: 5px 15px 10px; +.js .closed .widgets-sortables, +.js .closed .widget-holder, +.js .closed br.clear { + display: none; } - -#available-widgets p.description { - margin: 0 12px 12px; +.nav-menus-php .item-edit:after, +.widget-top a.widget-action:after, +.control-section .accordion-section-title::after, +.accordion-section-title::after { + right: 0; + content: '\f141'; + border: none; + background: none; + font: normal 20px/1 'dashicons'; + speak: none; + display: block; + padding: 0; + text-indent: 0; + text-align: center; + position: relative; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-decoration: none !important; } - -.widget-position { - margin-top: 8px; +.control-section .accordion-section-title::after, +.accordion-section-title::after { + float: right; + right: 20px; + top: -2px; } - -.inactive { - padding-top: 2px; +.control-section.open .accordion-section-title::after, +#customize-info.open .accordion-section-title::after, +.nav-menus-php .menu-item-edit-active .item-edit:after { + content: '\f140'; } - -.sidebar-name .spinner { - float: none; - margin: -4px 3px; +.nav-menus-php .item-controls .item-type { + padding: 11px; + margin-right: 10px; } -.sidebar-name-arrow { - float: right; - height: 29px; - width: 26px; +/* Hide Widget Settings by Default */ +.widget-inside, +.widget-description { + display: none; } -.widget-title .in-widget-title { - font-size: 12px; - white-space: nowrap; -} - +/* Dragging widgets over the available widget area show's a "Deactivate" message */ #removing-widget { display: none; font-weight: normal; @@ -10042,6 +10113,7 @@ } #widgets-chooser { + clear: both; display: none; margin: auto; padding-bottom: 10px; @@ -10243,6 +10315,32 @@ /* =Media Queries -------------------------------------------------------------- */ +@media screen and (max-width: 480px) { + div.widget-liquid-left { + width: 100%; + float: none; + border-right: none; + padding-right: 0; + } + + #widgets-left .sidebar-name { + margin-right: 0; + } + + #widgets-left #available-widgets .widget-top { + margin-right: 0; + } + + #widgets-left .inactive-sidebar .widgets-sortables { + margin-right: 0; + } + + div.widget-liquid-right { + width: 100%; + float: none; + } +} + @media only screen and (max-width: 768px) { /* categories */ #col-left { @@ -10314,7 +10412,34 @@ width: auto; } } +@media only screen and (min-width: 1250px) { + #widgets-left #available-widgets .widget { + width: 49%; + float: left; + } + + #widgets-left #available-widgets .widget:nth-child(even) { + float: right; + } + #widgets-right .widgets-holder-wrap { + width: 48.5%; + float: left; + } + + #widgets-right .widgets-holder-wrap:nth-child(odd) { + clear: both; + } + + #widgets-right .widgets-holder-wrap:nth-child(even) { + float: right; + } + + #widgets-right.single-sidebar .widgets-holder-wrap { + width: 100%; + } +} + /** * HiDPI Displays */ @@ -10322,8 +10447,7 @@ (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { - - tr.wp-locked .locked-indicator { + tr.wp-locked .locked-indicator { background-image: url('../images/lock-2x.png'); background-size: 16px 16px; } Index: src/wp-admin/includes/widgets.php =================================================================== --- src/wp-admin/includes/widgets.php (revision 26130) +++ src/wp-admin/includes/widgets.php (working copy) @@ -67,8 +67,6 @@ function wp_list_widget_controls( $sidebar ) { add_filter( 'dynamic_sidebar_params', 'wp_list_widget_controls_dynamic_sidebar' ); - echo "
\n"; } + echo " \n"; } @@ -186,6 +186,9 @@ + + +