Index: /trunk/src/wp-admin/css/wp-admin.css =================================================================== --- /trunk/src/wp-admin/css/wp-admin.css (revision 26139) +++ /trunk/src/wp-admin/css/wp-admin.css (revision 26140) @@ -631,6 +631,5 @@ #TB_window, .tbtitle, -.highlight, -.editwidget .widget-inside { +.highlight { border-width: 1px; border-style: solid; @@ -2559,5 +2558,4 @@ } -.widget, .postbox, .stuffbox { @@ -2567,5 +2565,4 @@ } -.widget .widget-top, .postbox h3, .stuffbox h3 { @@ -9703,56 +9700,91 @@ } -/* widgets */ - -/* 2 column liquid layout */ -div.widget-liquid-left { - float: left; - clear: left; + +/* 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; +} + +.widget-top { + font-size: 12px; + 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: 18px 15px; + line-height: 1; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +.widget-inside { + background: #fff !important; /* ln 1204 in colors.fresh.css */ + padding: 1px 15px 15px 15px; + line-height: 16px; +} + +/* 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%; - margin-right: -325px; -} - -div#widgets-left { - margin-left: 5px; - margin-right: 325px; -} - -div#widgets-right { - width: 285px; - margin: 0 auto; -} - -div.widget-liquid-right { - float: right; - clear: right; - width: 300px; -} - -.widget-liquid-right .widget { + 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 Sidebars */ +.sidebar-name { + border: none; position: relative; -} - -.widget-liquid-right .widget, -.inactive-sidebar .widget, -.widget-liquid-right .sidebar-description { - width: 250px; - margin: 0 auto 20px; -} - -.widget-liquid-right .widget, -.widget-liquid-right .sidebar-description { - overflow: hidden; -} - -.widget-liquid-right .sidebar-description { - margin-bottom: 10px; -} - -.inactive-sidebar .widget { - margin: 0 10px 20px; - display: inline-block; -} - -div.sidebar-name h3 { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +.sidebar-name-arrow { + position: absolute; + top: 0; + right: 0; + bottom: 0; +} + +.js .sidebar-name { + cursor: pointer; +} + +.sidebar-name h3 { font-weight: normal; font-size: 15px; @@ -9763,29 +9795,312 @@ } -div.sidebar-name { - font-size: 13px; - border-bottom-width: 1px; - border-bottom-style: solid; -} - -.js .sidebar-name { - cursor: pointer; -} - -.js .closed .sidebar-name { +.widgets-holder-wrap .description { + padding: 0; + margin: 0; + font-style: normal; + font-size: 12px; + color: #777; +} + +/* Widgets 2-col Layout */ +div.widget-liquid-left { + margin: 0; + width: 38%; + float: left; + border-right: 2px solid #ccc; +} + +div.widget-liquid-right { + float: right; + width: 60%; +} + +/* Widgets Left - Available Widgets */ + +div#widgets-left { + margin: 0; + padding: 12px 5% 0 0; +} + +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 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 { + background: transparent; + 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; +} +#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; +font-size: 12px; +} + +/* 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; +} + +#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; -} - -.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; + 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 { + float: right; + position: relative; + top: 13px; + right: 10px; +} + +div#widgets-left .inactive-sidebar .widget-action:after { + content: '\f111'; + color: #888; +} + +div#widgets-left .inactive-sidebar .widgets-sortables { + min-height: 42px; + padding: 0; + background: transparent; + margin: 0; + position: relative; +} + +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 Right */ + +div#widgets-right:after { + content: "."; + display: block; + height: 0; + clear: both; + visibility: hidden; +} + +div#widgets-right .widgets-holder-wrap { + margin: 10px 0 0 0; +} + +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 */ +} + +div#widgets-right .sidebar-description { + border-top: 1px solid #eeeeee; + padding: 10px 15px 15px 15px; +} + +div#widgets-right .closed .sidebar-description { + display: none; +} + +div#widgets-right .sidebar-name h3 { + padding: 15px 15px; +} +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; +} +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; +} + +/* 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 */ +} + +div#widgets-right .widgets-sortables { + min-height: 42px !important; /* Inline styles */ + padding: 0 8px; + margin-bottom: 8px; + position: relative; +} +div#widgets-right .widgets-sortables:before { + display: block; + 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; +} + +/* Accessibility Mode */ +#available-widgets .widget-control-edit .edit { + display :none; +} +#available-widgets .widget-control-edit .add { + display: block; + position: absolute; + top: 0; + right: 50px; + bottom: 0; + left: 0; + z-index: 40; + text-align: center; + text-indent: -5000px; +} + +#widgets-right .widget-control-edit { + background: #EEE; + margin: -14px -10px 0 0; + padding: 16px 15px; + border-left: 1px solid #DDD; +} +#widgets-right .widget-control-edit .add { + display: none; +} +#widgets-right .widget-control-edit:hover { + background: #444; +} +#widgets-right .widget-control-edit:before { + content: '\f111'; + display: inline-block; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font: normal 16px/1 'dashicons'; + vertical-align: top; + position: relative; + top: -1px; + padding-right: 4px; +} + +.editwidget { + margin: 0 auto; +} +.editwidget .widget-control-actions { + margin-top: 20px; } @@ -9795,101 +10110,4 @@ display: none; } - -.widget-liquid-right .widgets-sortables { - padding: 15px 0 0; -} - -#available-widgets .widget-holder { - padding: 7px 5px 0; -} - -.inactive-sidebar { - padding: 5px 5px 0; -} - -#widget-list .widget { - width: 250px; - margin: 0 10px 15px; - border: 0 none; - background: transparent; - display: inline-block; - vertical-align: top; -} - -#widget-list .widget-description { - padding: 5px 8px; -} - -.widget-placeholder { - border-width: 1px; - border-style: dashed; - margin: 0 auto 20px; - height: 34px; - width: 250px; -} - -.inactive-sidebar .widget-placeholder { - margin: 0 10px 20px; - float: left; -} - -div.widgets-holder-wrap { - padding: 0; - margin: 10px 0 20px; -} - -#widgets-left #available-widgets { - background-color: transparent; - border: 0 none; -} - -ul#widget-list { - list-style: none; - margin: 0; - padding: 0; - min-height: 100px; -} - -.widget .widget-top { - font-size: 12px; - font-weight: 600; - height: 26px; -} - -.widget .widget-top, -.menu-item-handle { - margin-top: 0; - padding: 4px; -} - -.widget-top .widget-title { - padding: 7px 9px; -} - -.widget-top .widget-title-action { - float: right; -} - -a.widget-action { - display: block; - width: 24px; - height: 26px; - text-decoration: none; -} - -#available-widgets a.widget-action { - display: 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; -} - .nav-menus-php .item-edit:after, .widget-top a.widget-action:after, @@ -9911,5 +10129,4 @@ text-decoration: none !important; } - .control-section .accordion-section-title::after, .accordion-section-title::after { @@ -9918,9 +10135,4 @@ top: -2px; } - -.widget-top a.widget-action:after { - content: '\f140'; -} - .control-section.open .accordion-section-title::after, #customize-info.open .accordion-section-title::after, @@ -9928,5 +10140,4 @@ content: '\f140'; } - .nav-menus-php .item-controls .item-type { padding: 11px; @@ -9934,11 +10145,5 @@ } -.widget .widget-inside, -.widget .widget-description { - padding: 12px 12px 10px; - font-size: 12px; - line-height: 16px; -} - +/* Hide Widget Settings by Default */ .widget-inside, .widget-description { @@ -9946,118 +10151,5 @@ } -#available-widgets .widget-description { - display: block; -} - -.widget .widget-inside p { - margin: 0 0 1em; - padding: 0; -} - -.widget-title h4 { - margin: 0; - padding-bottom: 0.2em; - line-height: 1; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; -} - -.widgets-sortables { - min-height: 90px; -} - -.widget-control-actions { - margin-top: 8px; -} - -.widget-control-actions a { - text-decoration: none; -} - -.widget-control-actions a:hover { - text-decoration: underline; -} - -.widget-control-actions div.alignleft { - margin-top: 6px; -} - -div#sidebar-info { - padding: 0 1em; - margin-bottom: 1em; - font-size: 12px; -} - -.widget-title a, -.widget-title a:hover { - text-decoration: none; - border-bottom: none; -} - -.widget-control-edit { - display: block; - font-size: 12px; - font-weight: normal; - line-height: 26px; - padding: 0 8px 0 0; -} - -a.widget-control-edit { - text-decoration: none; -} - -.widget-control-edit .add, -.widget-control-edit .edit { - display: none; -} - -#available-widgets .widget-control-edit .add, -#widgets-right .widget-control-edit .edit, -.inactive-sidebar .widget-control-edit .edit { - display: inline; -} - -.editwidget { - margin: 0 auto 15px; -} - -.editwidget .widget-inside { - display: block; - padding: 10px; -} - -.inactive p.description { - margin: 5px 15px 10px; -} - -#available-widgets p.description { - margin: 0 12px 12px; -} - -.widget-position { - margin-top: 8px; -} - -.inactive { - padding-top: 2px; -} - -.sidebar-name .spinner { - float: none; - margin: -4px 3px; -} - -.sidebar-name-arrow { - float: right; - height: 29px; - width: 26px; -} - -.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; @@ -10132,4 +10224,5 @@ #widgets-chooser { + clear: both; display: none; margin: auto; @@ -10337,4 +10430,30 @@ -------------------------------------------------------------- */ +@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 */ @@ -10406,4 +10525,31 @@ max-width: 400px; 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%; } } @@ -10416,6 +10562,5 @@ (-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: /trunk/src/wp-admin/includes/widgets.php =================================================================== --- /trunk/src/wp-admin/includes/widgets.php (revision 26139) +++ /trunk/src/wp-admin/includes/widgets.php (revision 26140) @@ -68,6 +68,4 @@ add_filter( 'dynamic_sidebar_params', 'wp_list_widget_controls_dynamic_sidebar' ); - echo "