X-Git-Url: https://scripts.mit.edu/gitweb/autoinstalls/wordpress.git/blobdiff_plain/8ab4a4532479e8db471032b51042ec8c4716d091..3194d1bb103c2d8db4f44feeced5e58ee2756658:/wp-admin/css/customize-controls.css diff --git a/wp-admin/css/customize-controls.css b/wp-admin/css/customize-controls.css index becc7a53..ced97351 100644 --- a/wp-admin/css/customize-controls.css +++ b/wp-admin/css/customize-controls.css @@ -20,7 +20,7 @@ body { } #customize-controls .description { - color: #666666; + color: #555; } #customize-header-actions .button-primary { @@ -41,54 +41,110 @@ body { border-bottom: 1px solid #ddd; } -#customize-header-actions .secondary-actions { - display: none; -} - #customize-controls .wp-full-overlay-sidebar-content { overflow-y: auto; overflow-x: hidden; } -#customize-info { +#customize-controls .customize-info { border: none; border-top: 1px solid #ddd; + border-bottom: 1px solid #ddd; + margin-bottom: 15px; } -#customize-info .accordion-section-title { - background-color: #fff; - color: #666666; +#customize-controls .customize-info .accordion-section-title { + background: #fff; + color: #555; border-left: none; border-right: none; - border-bottom: 1px solid #eeeeee; + border-bottom: none; + cursor: default; } -#customize-info.open .accordion-section-title:after, -#customize-info .accordion-section-title:hover:after, -#customize-info .accordion-section-title:focus:after { - color: #555555; +#customize-controls .customize-info.open .accordion-section-title:after, +#customize-controls .customize-info .accordion-section-title:hover:after, +#customize-controls .customize-info .accordion-section-title:focus:after { + color: #333; } -#customize-info .preview-notice { +#customize-controls .customize-info .accordion-section-title:after { + display: none; +} + +#customize-controls .customize-info .preview-notice { font-size: 13px; line-height: 24px; } -#customize-info .theme-name { +#customize-controls .control-section .customize-section-title h3, +#customize-controls .control-section h3.customize-section-title, +#customize-controls .customize-info .panel-title { font-size: 20px; font-weight: 200; - line-height: 24px; + line-height: 26px; display: block; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +#customize-controls .customize-section-title span.customize-action { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } -#customize-info .theme-screenshot { - width: 258px; +#customize-controls .customize-info .customize-help-toggle { + position: absolute; + top: 4px; + right: 1px; + padding: 20px 20px 10px 10px; + width: 20px; + height: 20px; + cursor: pointer; + -webkit-box-shadow: none; + box-shadow: none; + -webkit-appearance: none; + background: transparent; + color: #555; + border: none; } -#customize-info .theme-description { - margin-top: 1em; - color: #666666; - line-height: 20px; +#customize-controls .customize-info .customize-help-toggle:before { + position: absolute; + top: 5px; + left: 6px; +} + +#customize-controls .customize-info.open .customize-help-toggle, +#customize-controls .customize-info .customize-help-toggle:focus, +#customize-controls .customize-info .customize-help-toggle:hover { + color: #0073aa; +} + +#customize-controls .customize-info .customize-panel-description, +#customize-controls .no-widget-areas-rendered-notice { + color: #555; + display: none; + background: #fff; + padding: 12px 15px; + border-top: 1px solid #ddd; +} +#customize-controls .customize-info .customize-panel-description.open + .no-widget-areas-rendered-notice { + border-top: none; +} + +#customize-controls .customize-info .customize-panel-description p:first-child { + margin-top: 0; +} + +#customize-controls .customize-info .customize-panel-description p:last-child { + margin-bottom: 0; +} + +#customize-controls .current-panel .control-section > h3.accordion-section-title { + padding-right: 30px; } #customize-theme-controls .control-section { @@ -96,23 +152,24 @@ body { } #customize-theme-controls .accordion-section-title { - color: #555555; + color: #555; background-color: #fff; - border-bottom: 1px solid #eeeeee; + border-bottom: 1px solid #eee; +} + +#customize-theme-controls .accordion-section-title:after { + content: "\f345"; } #customize-theme-controls .accordion-section-content { - color: #555555; - background: #fff; + color: #555; + background: transparent; } -#customize-info.open .accordion-section-title, -#customize-info .accordion-section-title:hover, -#customize-info .accordion-section-title:focus, -#customize-theme-controls .control-section:hover > .accordion-section-title, -#customize-theme-controls .control-section .accordion-section-title:hover, -#customize-theme-controls .control-section.open .accordion-section-title, -#customize-theme-controls .control-section .accordion-section-title:focus { +#customize-controls .control-section:hover > .accordion-section-title, +#customize-controls .control-section .accordion-section-title:hover, +#customize-controls .control-section.open .accordion-section-title, +#customize-controls .control-section .accordion-section-title:focus { color: #23282d; background: #f5f5f5; } @@ -128,16 +185,15 @@ body { #customize-theme-controls .control-section .accordion-section-title:hover:after, #customize-theme-controls .control-section.open .accordion-section-title:after, #customize-theme-controls .control-section .accordion-section-title:focus:after { - color: #555; + color: #23282d; } -#customize-info.open, #customize-theme-controls .control-section.open { - border-bottom: 1px solid #eeeeee; + border-bottom: 1px solid #eee; } #customize-theme-controls .control-section.open .accordion-section-title { - border-bottom-color: #eeeeee !important; + border-bottom-color: #eee !important; } #customize-theme-controls .control-section:last-of-type.open, @@ -145,37 +201,76 @@ body { border-bottom-color: #ddd; } -#customize-theme-controls > ul, +#customize-theme-controls > ul { + margin: 0; +} + #customize-theme-controls .accordion-section-content { + position: absolute; + top: 0; + left: 100%; + width: 100%; margin: 0; + padding: 12px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; } -.control-section.control-panel > .accordion-section-title { - padding-right: 54px; +.customize-section-description-container { + margin-bottom: 15px; } -.control-section.control-panel > .accordion-section-title:after { - content: "\f345"; - background: #f5f5f5; +.customize-section-title { + margin: -12px -12px 0 -12px; + border-bottom: 1px solid #ddd; + background: #fff; +} + +div.customize-section-description { + margin-top: 22px; +} + +div.customize-section-description p:first-child { + margin-top: 0; +} + +div.customize-section-description p:last-child { + margin-bottom: 0; +} + +#customize-theme-controls .customize-themes-panel h3.customize-section-title:first-child { + border-bottom: 1px solid #ddd; + padding: 12px 12px 12px 12px; +} + +.ios #customize-theme-controls .customize-themes-panel h3.customize-section-title:first-child { + padding: 12px 12px 13px 12px; +} + +.customize-section-title h3, +h3.customize-section-title { + padding: 10px 10px 12px 14px; + margin: 0; + line-height: 21px; color: #555; - width: 38px; - height: 100%; - margin: -11px -10px -11px 0; /* compensate for positioning */ - line-height: 45px; - padding-left: 5px; - border-left: 1px solid #eee; - z-index: 0; } -#customize-theme-controls .control-section.control-panel > h3.accordion-section-title:focus:after, -#customize-theme-controls .control-section.control-panel > h3.accordion-section-title:hover:after { - background: #ddd; - color: #000; - border: 1px solid #d9d9d9; - border-right: none; - margin-top: -12px; - line-height: 44px; - z-index: 1; +#customize-theme-controls { + position: relative; + left: 0; + -webkit-transition: .18s left ease-in-out; + transition: .18s left ease-in-out; +} + +.ios #customize-theme-controls { + -webkit-transition: left 0s; + transition: left 0s; +} + +.section-open #customize-info, +.section-open #customize-theme-controls { + left: -100%; } .accordion-sub-container.control-panel-content { @@ -184,11 +279,15 @@ body { left: 300px; top: 0; width: 300px; - border-top: 1px solid #ddd; -webkit-transition: left ease-in-out .18s; transition: left ease-in-out .18s; } +.ios .accordion-sub-container.control-panel-content { + -webkit-transition: left 0s; + transition: left 0s; +} + .accordion-sub-container.control-panel-content.animating { display: block; } @@ -197,7 +296,6 @@ body { width: 100%; } -.customize-overlay-close, .customize-controls-close { display: block; position: absolute; @@ -219,44 +317,53 @@ body { box-sizing: content-box; } -.customize-overlay-close { - left: auto; - right: 0; - border-right: 0; - border-left: 1px solid #ddd; -} - -.control-panel-back { +.customize-panel-back, +.customize-section-back { display: block; - position: fixed; - top: 0; - z-index: 99; - left: -48px; - width: 45px; - height: 45px; - padding-right: 2px; - background: #eee; + float: left; + width: 48px; + height: 71px; + padding: 0 24px 0 0; + margin: 0; + background: #fff; + border: none; border-right: 1px solid #ddd; + -webkit-box-shadow: none; + box-shadow: none; cursor: pointer; -webkit-transition: left .18s ease-in-out, color .1s ease-in-out, background .1s ease-in-out; transition: left .18s ease-in-out, color .1s ease-in-out, background .1s ease-in-out; } -.ios .control-panel-back { +.customize-section-back { + height: 74px; +} + +.ios .customize-panel-back, +.ios .customize-section-back { -webkit-transition: left 0s; transition: left 0s; } -.collapsed .control-panel-back { +.ios .customize-panel-back { display: none; } -.customize-overlay-close:focus, -.customize-overlay-close:hover, +.ios .expanded.in-sub-panel .customize-panel-back { + display: block; +} + +.panel-meta.customize-info .accordion-section-title { + margin-left: 48px; +} + +#customize-controls .panel-meta.customize-info .accordion-section-title:hover { + background: #fff; + color: #555; +} + .customize-controls-close:focus, .customize-controls-close:hover, -.control-panel-back:focus, -.control-panel-back:hover, .customize-controls-preview-toggle:focus, .customize-controls-preview-toggle:hover { background: #ddd; @@ -267,7 +374,17 @@ body { box-shadow: none; } -.customize-overlay-close:before, +.customize-panel-back:hover, +.customize-panel-back:focus, +.customize-section-back:hover, +.customize-section-back:focus { + color: #23282d; + background: #f5f5f5; + outline: none; + -webkit-box-shadow: none; + box-shadow: none; +} + .customize-controls-close:before { font: normal 22px/45px dashicons; content: "\f335"; @@ -276,22 +393,14 @@ body { left: 13px; } -.control-panel-back:before { - font: normal 20px/45px dashicons; +.customize-panel-back:before, +.customize-section-back:before { + font: normal 20px/72px dashicons; content: "\f341"; position: relative; - top: 1px; left: 13px; } -.in-sub-panel .control-panel-back { - left: 0; -} - -.current-panel > .accordion-section-title { - height: 22px; -} - .wp-full-overlay-sidebar .wp-full-overlay-header { -webkit-transition: padding ease-in-out .18s; transition: padding ease-in-out .18s; @@ -345,28 +454,30 @@ body { transition: left 0s; } -.control-section.control-panel .accordion-section-title .panel-title { - font-size: 20px; - font-weight: 200; - line-height: 24px; - display: block; - border: none; +.wp-full-overlay.section-open #customize-controls .wp-full-overlay-sidebar-content { + visibility: hidden; + overflow-y: hidden; } -.control-section.control-panel .preview-notice { - font-size: 13px; - line-height: 24px; +.wp-full-overlay.section-open .wp-full-overlay-sidebar-content .accordion-section.open { + visibility: visible; +} + +.wp-full-overlay.section-open .wp-full-overlay-sidebar-content .accordion-section.open .accordion-section-content { + overflow-y: auto; } p.customize-section-description { font-style: normal; + margin-top: 22px; + margin-bottom: 0; } .customize-control { width: 100%; float: left; clear: both; - margin-bottom: 8px; + margin-bottom: 12px; } .customize-control select, @@ -423,13 +534,25 @@ p.customize-section-description { } .customize-control-color .color-picker, -.customize-control-checkbox label, .customize-control-upload div { line-height: 28px; } -.customize-control-checkbox input { - margin-right: 5px; +.customize-control-radio label, +.customize-control-checkbox label, +.customize-control-nav_menu_auto_add label { + line-height: 20px; + display: block; + margin-left: 24px; + padding-top: 6px; + padding-bottom: 6px; +} + +.customize-control-radio input, +.customize-control-checkbox input, +.customize-control-nav_menu_auto_add input { + margin-right: 4px; + margin-left: -24px; } .customize-control-radio { @@ -445,14 +568,6 @@ p.customize-section-description { margin-top: 7px; } -.customize-control-radio label { - line-height: 32px; -} - -.customize-control-radio input { - margin-right: 5px; -} - .customize-control .attachment-thumb.type-icon { float: left; margin: 10px; @@ -498,35 +613,16 @@ p.customize-section-description { } .wp-full-overlay-sidebar { - background: #eeeeee; + background: #eee; border-right: 1px solid #ddd; } -.collapse-sidebar { - background-color: transparent !important; - border: none !important; - -webkit-box-shadow: none !important; - box-shadow: none !important; - -webkit-border-radius: 0 !important; - border-radius: 0 !important; -} - - -.collapse-sidebar:active, -.collapse-sidebar:active .collapse-sidebar-label, -.collapse-sidebar:active .collapse-sidebar-arrow:before { - text-shadow: none; -} - -.collapsed .collapse-sidebar-arrow:before { - color: #82878c; -} - /* Style for custom settings */ -/* +/** * Dropdowns */ + .accordion-section .dropdown { float: left; display: block; @@ -542,7 +638,7 @@ p.customize-section-description { line-height: 16px; margin-right: 16px; padding: 4px 5px; - border: 2px solid #eeeeee; + border: 2px solid #eee; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; @@ -555,12 +651,12 @@ p.customize-section-description { bottom: 0; right: 0; width: 20px; - background: #eeeeee; + background: #eee; } .customize-control .dropdown-arrow:after { content: "\f140"; - font: normal 20px/1 'dashicons'; + font: normal 20px/1 dashicons; speak: none; display: block; padding: 0; @@ -575,7 +671,7 @@ p.customize-section-description { .customize-control .dropdown-status { color: #32373c; - background: #eeeeee; + background: #eee; display: none; max-width: 112px; } @@ -595,7 +691,7 @@ p.customize-section-description { } .customize-control-color .dropdown .dropdown-content { - background-color: #555555; + background-color: #555; border: 1px solid rgba(0, 0, 0, 0.15); } @@ -607,6 +703,7 @@ p.customize-section-description { * iOS can't scroll iframes, * instead it expands the iframe size to match the size of the content */ + .ios .wp-full-overlay { position: relative; } @@ -619,12 +716,14 @@ p.customize-section-description { -webkit-overflow-scrolling: touch; } -/** Media controls **/ +/* Media controls */ .customize-control-media .current, .customize-control-upload .current, .customize-control-image .current, .customize-control-background .current, +.customize-control-cropped_image .current, +.customize-control-site_icon .current, .customize-control-header .current { margin-bottom: 8px; } @@ -660,6 +759,12 @@ p.customize-section-description { .customize-control-background .remove-button, .customize-control-background .default-button, .customize-control-background .upload-button, +.customize-control-cropped_image .remove-button, +.customize-control-cropped_image .default-button, +.customize-control-cropped_image .upload-button, +.customize-control-site_icon .remove-button, +.customize-control-site_icon .default-button, +.customize-control-site_icon .upload-button, .customize-control-header button.new, .customize-control-header button.remove { white-space: normal; @@ -671,6 +776,8 @@ p.customize-section-description { .customize-control-upload .current .container, .customize-control-image .current .container, .customize-control-background .current .container, +.customize-control-cropped_image .current .container, +.customize-control-site_icon .current .container, .customize-control-header .current .container { overflow: hidden; -webkit-border-radius: 2px; @@ -682,6 +789,8 @@ p.customize-section-description { .customize-control-media .current .container, .customize-control-upload .current .container, .customize-control-background .current .container, +.customize-control-cropped_image .current .container, +.customize-control-site_icon .current .container, .customize-control-image .current .container { min-height: 40px; } @@ -690,6 +799,8 @@ p.customize-section-description { .customize-control-upload .placeholder, .customize-control-image .placeholder, .customize-control-background .placeholder, +.customize-control-cropped_image .placeholder, +.customize-control-site_icon .placeholder, .customize-control-header .placeholder { width: 100%; position: relative; @@ -701,6 +812,8 @@ p.customize-section-description { .customize-control-upload .inner, .customize-control-image .inner, .customize-control-background .inner, +.customize-control-cropped_image .inner, +.customize-control-site_icon .inner, .customize-control-header .inner { display: none; position: absolute; @@ -714,6 +827,8 @@ p.customize-section-description { .customize-control-media .inner, .customize-control-upload .inner, .customize-control-background .inner, +.customize-control-cropped_image .inner, +.customize-control-site_icon .inner, .customize-control-image .inner { display: block; min-height: 40px; @@ -723,6 +838,8 @@ p.customize-section-description { .customize-control-upload .inner, .customize-control-image .inner, .customize-control-background .inner, +.customize-control-cropped_image .inner, +.customize-control-site_icon .inner, .customize-control-header .inner, .customize-control-header .inner .dashicons { line-height: 20px; @@ -764,29 +881,22 @@ p.customize-section-description { /* Header control: overlay "close" button */ .customize-control-header .uploaded .header-view .close { - font-size: 2em; - color: grey; + font-size: 20px; + color: #fff; + background: #555; + background: rgba(0, 0, 0, 0.5); position: absolute; - visibility: hidden; top: 10px; - right: 10px; + right: -999px; z-index: 1; - width: 20px; - height: 20px; + width: 26px; + height: 26px; cursor: pointer; } -.customize-control-header .uploaded .header-view .close:hover { - color: black; - text-shadow: - -1px -1px 0 #fff, - 1px -1px 0 #fff, - -1px 1px 0 #fff, - 1px 1px 0 #fff; -} - -.customize-control-header .header-view:hover .close { - visibility: visible; +.customize-control-header .header-view:hover .close, +.customize-control-header .header-view .close:focus { + right: 10px; } /* Header control: randomiz(s)er */ @@ -833,6 +943,8 @@ p.customize-section-description { .customize-control-upload .actions, .customize-control-image .actions, .customize-control-background .actions, +.customize-control-cropped_image .actions, +.customize-control-site_icon .actions, .customize-control-header .actions { margin-bottom: 32px; } @@ -851,6 +963,8 @@ p.customize-section-description { .customize-control-upload img, .customize-control-image img, .customize-control-background img, +.customize-control-cropped_image img, +.customize-control-site_icon img, .customize-control-header img { width: 100%; -webkit-border-radius: 2px; @@ -865,6 +979,10 @@ p.customize-section-description { .customize-control-image .default-button, .customize-control-background .remove-button, .customize-control-background .default-button, +.customize-control-cropped_image .remove-button, +.customize-control-cropped_image .default-button, +.customize-control-site_icon .remove-button, +.customize-control-site_icon .default-button, .customize-control-header .remove { float: left; margin-right: 3px; @@ -874,6 +992,8 @@ p.customize-section-description { .customize-control-upload .upload-button, .customize-control-image .upload-button, .customize-control-background .upload-button, +.customize-control-cropped_image .upload-button, +.customize-control-site_icon .upload-button, .customize-control-header .new { float: right; } @@ -881,6 +1001,7 @@ p.customize-section-description { /** * Themes */ + @-webkit-keyframes customize-reload { 0% { opacity: 0; } 100% { opacity: 1; } @@ -904,7 +1025,7 @@ p.customize-section-description { #customize-theme-controls .control-section-themes .accordion-section-title:hover, #customize-theme-controls .control-section-themes .accordion-section-title:focus { - color: #555555; + color: #555; background-color: #fff; } @@ -920,8 +1041,9 @@ p.customize-section-description { padding-right: 100px; /* Space for the button */ } -.control-section-themes .accordion-section-title span { - font-size: small; +.control-section-themes .accordion-section-title span.customize-action, +#customize-controls .customize-section-title span.customize-action { + font-size: 13px; display: block; font-weight: 400; } @@ -935,16 +1057,27 @@ p.customize-section-description { font-weight: normal; } +.control-section-themes .accordion-section-title:before { + display: none; +} + .customize-themes-panel { display: none; padding: 0 8px; background: #f1f1f1; - box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } +.customize-themes-panel .accordion-section-title:first-child { + margin-top: 0; +} + +#customize-controls .customize-themes-panel .accordion-section-title:nth-child(2) { + font-size: 14px; + font-weight: 600; +} .customize-themes-panel > h2 { padding: 15px 8px 0 8px; @@ -963,6 +1096,13 @@ p.customize-section-description { margin-bottom: 8px; } +#customize-theme-controls .themes.accordion-section-content { + position: relative; + left: 0; + padding: 0; + width: 100%; +} + .wp-customizer .theme-browser .themes { padding-bottom: 8px; } @@ -1079,18 +1219,104 @@ body.cheatin { box-shadow: 0 1px 3px rgba(0,0,0,0.13); } +body.cheatin h1 { + border-bottom: 1px solid #dadada; + clear: both; + color: #666; + font: 24px "Open Sans", sans-serif; + margin: 30px 0 0 0; + padding: 0; + padding-bottom: 7px; +} + body.cheatin p { font-size: 14px; line-height: 1.5; margin: 25px 0 20px; } +/** + * Widgets and Menus common styles + */ + +/* higher specificity than .wp-core-ui .button-secondary */ +#customize-theme-controls .add-new-widget, +#customize-theme-controls .add-new-menu-item { + cursor: pointer; + float: right; + margin-left: 10px; + -webkit-transition: all 0.2s; + transition: all 0.2s; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + outline: none; +} + +.reordering .add-new-widget, +.reordering .add-new-menu-item { + opacity: 0.2; + pointer-events: none; + cursor: not-allowed; /* doesn't work in conjunction with pointer-events */ +} + +.add-new-widget:before, +.add-new-menu-item:before { + content: "\f132"; + display: inline-block; + position: relative; + left: -2px; + top: -1px; + font: normal 20px/1 dashicons; + vertical-align: middle; + -webkit-transition: all 0.2s; + transition: all 0.2s; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* Reordering */ +.reorder-toggle { + float: right; + padding: 5px 8px; + text-decoration: none; + cursor: pointer; + outline: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.reorder-toggle:focus { + outline: 1px dotted; +} + +.reorder, +.reordering .reorder-done { + display: block; + padding: 5px 8px; +} + +.reorder-done, +.reordering .reorder { + display: none; + color: #0073aa; +} + +.reorder-toggle:hover .reorder-done, +.reorder-toggle:active .reorder-done, +.reorder-toggle:focus .reorder-done { + color: #00a0d2; +} + /* Responsive */ .customize-controls-preview-toggle { display: none; } -@media only screen and (max-width: 780px) { +@media only screen and (max-width: 782px) { .wp-customizer .theme:not(.active):hover .theme-actions, .wp-customizer .theme:not(.active):focus .theme-actions { display: block; @@ -1099,6 +1325,23 @@ body.cheatin p { .wp-customizer .theme-browser .theme.active .theme-name span { display: inline; } + + .customize-control-radio label, + .customize-control-checkbox label, + .customize-control-nav_menu_auto_add label { + margin-left: 32px; + } + + .customize-control-radio input, + .customize-control-checkbox input, + .customize-control-nav_menu_auto_add input { + margin-left: -32px; + } + + .customize-control input[type="radio"] + label, + .customize-control input[type="checkbox"] + label { + line-height: 32px; + } } @media screen and ( max-width: 640px ) { @@ -1150,7 +1393,7 @@ body.cheatin p { } .customize-controls-preview-toggle .controls:before { - content: "\f100"; + content: "\f540"; } .preview-only #customize-controls { @@ -1177,14 +1420,6 @@ body.cheatin p { margin-bottom: 4px; } - .adding-widget #customize-header-actions .primary-actions { - display: none; - } - - .adding-widget #customize-header-actions .secondary-actions { - display: block; - } - #customize-header-actions .button-primary { margin-top: 6px; }