enmi-conf.org: comparison wp/wp-admin/css/customize-controls.css

equal deleted inserted replaced

-:c7c34916027a
+:177826044cd9
 #customize-controls .submit {
 	text-align: center;
 }
 #customize-controls #customize-notifications-area .notice.notification-overlay.notification-changeset-locked {
-	background-color: rgba( 0, 0, 0, 0.7 );
+	background-color: rgba(0, 0, 0, 0.7);
 	padding: 25px;
 }
 #customize-controls #customize-notifications-area .notice.notification-overlay.notification-changeset-locked .customize-changeset-locked-message {
 	margin-left: auto;
 	min-height: 64px;
 	width: auto;
 	padding: 25px 25px 25px 109px;
 	position: relative;
 	background: #fff;
-	box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.3 );
+	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
 	line-height: 1.5;
 	overflow-y: auto;
 	text-align: left;
 	top: calc( 50% - 100px );
 }
 	padding-right: 0;
 	box-shadow: none; /* @todo Adjust box shadow based on the disable states of paired button. */
 	font-size: 14px;
 	width: 30px;
 	float: left;
-	-webkit-transform: none;
 	transform: none;
 	margin-top: 0;
 }
 body:not(.ready) #publish-settings,
 #customize-controls .customize-info.is-in-view,
 #customize-controls .customize-section-title.is-in-view {
 	position: absolute;
 	z-index: 9;
 	width: 100%;
-	box-shadow: 0 1px 0 rgba(0, 0, 0, .1);
+	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
 }
 #customize-controls .customize-section-title.is-in-view {
 	margin-top: 0;
 }
 	display: none;
 }
 #customize-controls .customize-info .preview-notice {
 	font-size: 13px;
-	line-height: 24px;
+	line-height: 1.9;
 }
 #customize-controls .customize-pane-child .customize-section-title h3,
 #customize-controls .customize-pane-child h3.customize-section-title,
 #customize-outer-theme-controls .customize-pane-child .customize-section-title h3,
 #customize-outer-theme-controls .accordion-section-title {
 	color: #555d66;
 	background-color: #fff;
 	border-bottom: 1px solid #ddd;
 	border-left: 4px solid #fff;
-	transition: .15s color ease-in-out,
+	transition:
-	            .15s background-color ease-in-out,
+		.15s color ease-in-out,
-	            .15s border-color ease-in-out;
+		.15s background-color ease-in-out,
+		.15s border-color ease-in-out;
 }
 #customize-controls #customize-theme-controls .customize-themes-panel .accordion-section-title {
 	color: #555;
 	background-color: #fff;
 	overflow: visible;
 	width: 100%;
 	margin: 0;
 	padding: 0;
 	box-sizing: border-box;
-	transition: 0.18s -webkit-transform cubic-bezier(0.645, 0.045, 0.355, 1);
+	transition: 0.18s transform cubic-bezier(0.645, 0.045, 0.355, 1); /* easeInOutCubic */
-	transition: 0.18s transform cubic-bezier(0.645, 0.045, 0.355, 1);
-	transition: 0.18s transform cubic-bezier(0.645, 0.045, 0.355, 1), 0.18s -webkit-transform cubic-bezier(0.645, 0.045, 0.355, 1); /* easeInOutCubic */
 }
 #customize-theme-controls .customize-pane-child.skip-transition {
 	transition: none;
 }
 	position: relative;
 	visibility: visible;
 	height: auto;
 	max-height: none;
 	overflow: auto;
-	-webkit-transform: none;
 	transform: none;
 }
 #customize-theme-controls .customize-pane-child {
 	position: absolute;
 	left: 0;
 	visibility: hidden;
 	height: 0;
 	max-height: none;
 	overflow: hidden;
-	-webkit-transform: translateX(100%);
 	transform: translateX(100%);
 }
 #customize-theme-controls .customize-pane-child.open,
 #customize-theme-controls .customize-pane-child.current-panel {
-	-webkit-transform: none;
 	transform: none;
 }
 .section-open #customize-theme-controls .customize-pane-parent,
 .in-sub-panel #customize-theme-controls .customize-pane-parent,
 .in-sub-panel #customize-info,
 .in-sub-panel.section-open #customize-theme-controls .customize-pane-child.current-panel {
 	visibility: hidden;
 	height: 0;
 	overflow: hidden;
-	-webkit-transform: translateX(-100%);
 	transform: translateX(-100%);
 }
 .section-open #customize-theme-controls .customize-pane-parent.busy,
 .in-sub-panel #customize-theme-controls .customize-pane-parent.busy,
 	border-top: 4px solid #eee;
 	border-right: 1px solid #ddd;
 	color: #444;
 	text-align: left;
 	cursor: pointer;
-	transition: color .15s ease-in-out,
+	transition:
-	            border-color .15s ease-in-out,
+		color .15s ease-in-out,
-	            background .15s ease-in-out;
+		border-color .15s ease-in-out,
+		background .15s ease-in-out;
 	box-sizing: content-box;
 }
 .customize-panel-back,
 .customize-section-back {
 	border: none;
 	border-right: 1px solid #ddd;
 	border-left: 4px solid #fff;
 	box-shadow: none;
 	cursor: pointer;
-	transition: color .15s ease-in-out,
+	transition:
-	            border-color .15s ease-in-out,
+		color .15s ease-in-out,
-	            background .15s ease-in-out;
+		border-color .15s ease-in-out,
+		background .15s ease-in-out;
 }
 .customize-section-back {
 	height: 74px;
 }
 }
 .customize-control select,
 .customize-control input[type="radio"],
 .customize-control input[type="checkbox"] {
-	line-height: 28px;
+	line-height: 2;
 }
 .customize-control input[type="text"],
 .customize-control input[type="password"],
 .customize-control input[type="email"],
 .customize-control input[type="number"],
 .customize-control input[type="search"],
 .customize-control input[type="tel"],
 .customize-control input[type="url"] {
 	width: 100%;
-	line-height: 18px;
+	line-height: 1.3;
 	margin: 0;
 }
 .customize-control-hidden {
 	margin: 0;
 }
 .customize-control select {
 	width: 100%;
 	height: 28px;
-	line-height: 28px;
+	line-height: 2;
 }
 .customize-control select[multiple] {
 	height: auto;
 }
 .customize-control-title {
 	display: block;
 	font-size: 14px;
-	line-height: 24px;
+	line-height: 1.75;
 	font-weight: 600;
 	margin-bottom: 4px;
 }
 .customize-control-description {
 	display: block;
 	font-style: italic;
-	line-height: 18px;
+	line-height: 1.4;
 	margin-top: 0;
 	margin-bottom: 5px;
 }
 .customize-section-description a.external-link:after {
 .customize-control-upload div {
 	line-height: 28px;
 }
 .customize-control .customize-inside-control-row {
-	line-height: 20px;
+	line-height: 1.6;
 	display: block;
 	margin-left: 24px;
 	padding-top: 6px;
 	padding-bottom: 6px;
 }
 	padding: 5px 0 10px;
 }
 .customize-control-radio .customize-control-title {
 	margin-bottom: 0;
-	line-height: 22px;
+	line-height: 1.6;
 }
 .customize-control-radio .customize-control-title + .customize-control-description {
 	margin-top: 7px;
 }
 	padding: 8px 15px;
 	position: absolute;
 	bottom: 0;
 	z-index: 10;
 	background: #eee;
-	display: -webkit-box;
 	display: flex;
 }
 .customize-control-dropdown-pages .new-content-item {
 	width: 100%;
 	position: relative;
 }
 #available-menu-items .new-content-item .create-item-input,
 .customize-control-dropdown-pages .new-content-item .create-item-input {
-	-webkit-box-flex: 10;
 	flex-grow: 10;
 }
 #available-menu-items .new-content-item .add-content,
 .customize-control-dropdown-pages .new-content-item .add-content {
 	margin: 2px 0 2px 6px;
-	-webkit-box-flex: 10;
 	flex-grow: 1;
 }
 .customize-control-dropdown-pages .new-content-item .create-item-input.invalid {
 	border: 1px solid #dc3232;
 }
 .customize-control-dropdown-pages .add-new-toggle {
 	margin-left: 1px;
 	font-weight: 600;
-	line-height: 28px;
+	line-height: 2.2;
 }
 #customize-preview iframe {
 	width: 100%;
 	height: 100%;
 #customize-controls .panel-meta > .customize-control-notifications-container .notice + .notice,
 #customize-controls .customize-section-title > .customize-control-notifications-container .notice + .notice {
 	margin-top: 1px;
 }
-@-webkit-keyframes customize-fade-in {
-	0%   { opacity: 0; }
-	100% { opacity: 1; }
-}
 @keyframes customize-fade-in {
 	0%   { opacity: 0; }
 	100% { opacity: 1; }
 }
 	margin: 0;
 	border-left: 0; /* @todo Appropriate styles could be added for notice-error, notice-warning, notice-success, etc */
 }
 #customize-controls .customize-control-notifications-container.has-overlay-notifications {
-	-webkit-animation: customize-fade-in 0.5s;
 	animation: customize-fade-in 0.5s;
 	z-index: 30;
 }
 /* Note: Styles for this are also defined in themes.css */
 .customize-control-header .current .container {
 	overflow: hidden;
 }
 .customize-control .attachment-media-view .placeholder,
+.customize-control .attachment-media-view .button-add-media,
 .customize-control-header .placeholder {
 	width: 100%;
 	position: relative;
 	text-align: center;
 	cursor: default;
 	border: 1px dashed #b4b9be;
 	box-sizing: border-box;
 	padding: 9px 0;
-	line-height: 20px;
+	line-height: 1.6;
+}
+.customize-control .attachment-media-view .button-add-media {
+	cursor: pointer;
+	background-color: #edeff0;
+	color: #32373c;
+}
+.customize-control .attachment-media-view .button-add-media:hover {
+	background-color: #fbfbfc;
+}
+.customize-control .attachment-media-view .button-add-media:focus {
+	background-color: #fbfbfc;
+	border-style: solid;
+	border-color: #5b9dd9;
+	box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
+	/* Only visible in Windows High Contrast mode */
+	outline: 2px solid transparent;
+	outline-offset: -2px;
 }
 .customize-control-header .inner {
 	display: none;
 	position: absolute;
 .customize-control-header .header-view.selected .choice:focus {
 	outline: none;
 }
 .customize-control-header .header-view.selected:after {
-	content: '';
+	content: "";
 	position: absolute;
 	height: auto;
 	top: 0;
 	left: 0;
 	bottom: 0;
 	margin-top: 4px;
 }
 .customize-control-header .placeholder:hover .dice,
 .customize-control-header .header-view:hover > button.random .dice {
-	-webkit-animation: dice-color-change 3s infinite;
 	animation: dice-color-change 3s infinite;
 }
 .button-see-me {
-	-webkit-animation: bounce .7s 1;
 	animation: bounce .7s 1;
-	-webkit-transform-origin: center bottom;
 	transform-origin: center bottom;
-}
-@-webkit-keyframes bounce {
-	from, 20%, 53%, 80%, to {
-		-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-		-webkit-transform: translate3d(0,0,0);
-	}
-	40%, 43% {
-		-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-		-webkit-transform: translate3d(0, -12px, 0);
-	}
-	70% {
-		-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-		-webkit-transform: translate3d(0, -6px, 0);
-	}
-	90% {
-		-webkit-transform: translate3d(0,-1px,0);
-	}
 }
 @keyframes bounce {
 	from, 20%, 53%, 80%, to {
-		-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 		animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-		-webkit-transform: translate3d(0,0,0);
 		transform: translate3d(0,0,0);
 	}
 	40%, 43% {
-		-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
 		animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-		-webkit-transform: translate3d(0, -12px, 0);
 		transform: translate3d(0, -12px, 0);
 	}
 	70% {
-		-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
 		animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-		-webkit-transform: translate3d(0, -6px, 0);
 		transform: translate3d(0, -6px, 0);
 	}
 	90% {
-		-webkit-transform: translate3d(0,-1px,0);
 		transform: translate3d(0,-1px,0);
 	}
 }
 .customize-control-header .choice {
 .customize-control-header .choice:focus {
 	outline: none;
 	box-shadow:
 		0 0 0 1px #5b9dd9,
-		0 0 3px 1px rgba(30, 140, 190, .8);
+		0 0 3px 1px rgba(30, 140, 190, 0.8);
 }
 .customize-control-header .uploaded div:last-child > .choice {
 	margin-bottom: 0;
 }
 }
 .theme-browser .theme.active .theme-actions,
 .wp-customizer .theme-browser .theme .theme-actions {
 	padding: 10px 15px;
-	box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
+	box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1);
 }
-@media screen and ( max-width: 640px ) {
+@media screen and (max-width: 640px) {
 	.customize-section-description-container + #customize-control-custom_css:last-child {
 		margin-right: 0;
 	}
 	.customize-section-description-container + #customize-control-custom_css:last-child textarea {
 	float: right;
 	margin: 3px 0 3px 25px;
 }
 .themes-filter-bar .feature-filter-toggle:before {
-content: "\f111";
+	content: "\f111";
-margin: 0 5px 0 0;
+	margin: 0 5px 0 0;
-font: normal 16px/1 dashicons;
+	font: normal 16px/1 dashicons;
-vertical-align: text-bottom;
+	vertical-align: text-bottom;
--webkit-font-smoothing: antialiased;
+	-webkit-font-smoothing: antialiased;
--moz-osx-font-smoothing: grayscale;
+	-moz-osx-font-smoothing: grayscale;
 }
 .themes-filter-bar .feature-filter-toggle.open {
 	background: #eee;
 	border-color: #999;
-	box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
+	box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);
-	-webkit-transform: translateY(1px);
 	transform: translateY(1px);
 }
 .themes-filter-bar .feature-filter-toggle .filter-count-filters {
 	display: none;
 	min-width: 200px;
 	max-width: 320px;
 }
 /* Adds a delay before fading in to avoid it "jumping" */
-@-webkit-keyframes themes-fade-in {
-	0% {
-		opacity: 0;
-	}
-	50% {
-		opacity: 0;
-	}
-	100% {
-		opacity: 1;
-	}
-}
 @keyframes themes-fade-in {
 	0% {
 		opacity: 0;
 	}
 	50% {
 		opacity: 1;
 	}
 }
 .control-panel-themes .customize-themes-full-container.animate {
-	-webkit-animation: .6s themes-fade-in 1;
 	animation: .6s themes-fade-in 1;
 }
 .in-themes-panel:not(.animating) .control-panel-themes .filter-themes-count {
-	-webkit-animation: .6s themes-fade-in 1;
 	animation: .6s themes-fade-in 1;
 }
 .control-panel-themes .filter-themes-count {
 	position: relative;
 	float: right;
-	line-height: 34px;
+	line-height: 2.6;
 }
 .control-panel-themes .filter-themes-count .themes-displayed {
 	font-weight: 600;
 	color: #555d66;
 	margin: 0;
 	padding: 0;
 }
 .themes-filter-bar .wp-filter-search {
-	line-height: 25px;
+	line-height: 1.8;
 	padding: 6px 10px 6px 30px;
 	max-width: 100%;
 	width: 40%;
 	min-width: 300px;
 	position: absolute;
 	margin: 1px 0;
 }
 /* Unstick the filter bar on short windows/screens. This breakpoint is based on the
 current length of .org feature filters assuming translations do not wrap lines. */
-@media screen and (max-height:540px), screen and (max-width:1018px) {
+@media screen and (max-height: 540px), screen and (max-width: 1018px) {
 	.customize-preview-header.themes-filter-bar {
 		position: relative;
 		left: 0;
 		width: 100%;
 		margin: 0 0 25px 0;
 		height: 100%;
 		width: calc(100% - 300px);
 	}
 }
-@media screen and (max-width:1018px) {
+@media screen and (max-width: 1018px) {
 	.filter-drawer .filter-group {
 		width: calc( (100% - 50px) / 2);
 	}
 }
-@media screen and (max-width:900px) {
+@media screen and (max-width: 900px) {
 	.customize-preview-header.themes-filter-bar {
 		height: 86px;
 		padding-top: 46px;
 	}
 	.control-panel-themes .filter-themes-count {
 		float: left;
 	}
 }
-@media screen and (max-width:792px) {
+@media screen and (max-width: 792px) {
 	.filter-drawer .filter-group {
 		width: calc( 100% - 25px);
 	}
 }
 .control-panel-themes .customize-themes-mobile-back {
 	display: none;
 }
 /* Mobile - toggle between themes and filters */
-@media screen and (max-width:600px) {
+@media screen and (max-width: 600px) {
 	.filter-drawer {
 		top: 132px;
 	}
 		left: 0;
 		top: 0;
 		height: 46px;
 		width: 26px;
 		display: block;
-		line-height: 46px;
+		line-height: 2.3;
 		padding: 0 8px 0 8px;
 		border-right: 1px solid #ddd;
 	}
 	.wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back:hover,
 .wp-full-overlay.in-themes-panel.themes-panel-expanded #customize-controls .wp-full-overlay-sidebar-content {
 	overflow: visible;
 }
 .wp-customizer .theme-overlay .theme-backdrop {
-	background: rgba( 238, 238, 238, 0.75 );
+	background: rgba(238, 238, 238, 0.75);
 	position: fixed;
 	z-index: 110;
 }
 .wp-customizer .theme-overlay .star-rating {
 	background: transparent;
 	color: #ccc;
 }
 /* Small Screens */
-@media (max-width:850px), (max-height:472px) {
+@media (max-width: 850px), (max-height: 472px) {
 	.wp-customizer .theme-overlay .theme-wrap {
 		left: 0;
 		right: 0;
 		top: 0;
 		bottom: 0;
 	background: #fff;
 	margin: 50px auto 2em;
 	padding: 1em 2em;
 	max-width: 700px;
 	min-width: 0;
-	box-shadow: 0 1px 3px rgba(0,0,0,0.13);
+	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.13);
 }
 body.cheatin h1 {
 	border-bottom: 1px solid #ddd;
 	clear: both;
 }
 body.adding-widget .add-new-widget:before,
 .adding-menu-items .add-new-menu-item:before,
 #accordion-section-add_menu .add-new-menu-item.open:before {
-	-webkit-transform: rotate(45deg);
 	transform: rotate(45deg);
 }
 #available-widgets,
 #available-menu-items {
 	position: absolute;
 	top: 15px; /* 13 container padding +1 input margin +1 input border */
 	left: 16px;
 	width: 30px;
 	height: 30px;
-	line-height: 28px;
+	line-height: 2.1;
 	text-align: center;
 	color: #72777c;
 }
 #available-widgets-filter .clear-results,
 #available-widgets-filter .clear-results:focus,
 #available-menu-items-search .clear-results:focus {
 	box-shadow:
 		0 0 0 1px #5b9dd9,
-		0 0 2px 1px rgba(30, 140, 190, .8);
+		0 0 2px 1px rgba(30, 140, 190, 0.8);
 }
 #available-menu-items-search .search-icon:after,
 #available-widgets-filter .search-icon:after,
 .themes-filter-bar .search-icon:after {
 	position: relative;
 	padding: 15px 15px 15px 60px;
 	background: #fff;
 	border-bottom: 1px solid #ddd;
 	border-left: 4px solid #fff;
-	transition: .15s color ease-in-out,
+	transition:
-	            .15s background-color ease-in-out,
+		.15s color ease-in-out,
-	            .15s border-color ease-in-out;
+		.15s background-color ease-in-out,
+		.15s border-color ease-in-out;
 	cursor: pointer;
 	display: none;
 }
 #available-widgets .widget,
 		margin-left: -32px;
 	}
 	.customize-control input[type="radio"] + label + br,
 	.customize-control input[type="checkbox"] + label + br {
-		line-height: 32px; /* For widgets checkboxes */
+		line-height: 2.5; /* For widgets checkboxes */
 	}
 	.customize-control .date-time-fields select {
 		height: 39px;
 	}
 	.wp-core-ui .themes-filter-bar .feature-filter-toggle {
 		margin: 3px 0 3px 25px;
 	}
 }
-@media screen and ( max-width: 1200px ) {
+@media screen and (max-width: 1200px) {
 	.outer-section-open .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main,
 	.adding-menu-items .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main,
 	.adding-widget .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main {
 		left: 67%;
 	}
 }
-@media screen and ( max-width: 640px ) {
+@media screen and (max-width: 640px) {
 	/* when the sidebar is collapsed and switching to responsive view,
 	   bring it back see ticket #35220 */
 	.wp-full-overlay.collapsed #customize-controls {
 		margin-left: 0;
 	.customize-controls-preview-toggle {
 		display: block;
 		position: absolute;
 		top: 0;
 		left: 48px;
-		line-height: 45px;
+		line-height: 3.2;
 		font-size: 14px;
 		padding: 0 12px;
 		margin: 0;
 		height: 45px;
 		background: #eee;
 	}
 	.theme-browser .theme.active .theme-actions,
 	.wp-customizer .theme-browser .theme .theme-actions {
 		padding: 9px 15px;
-		box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
+		box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1);
 	}
 }
-@media screen and ( max-width: 600px ) {
+@media screen and (max-width: 600px) {
 	.theme-browser .theme.active .theme-actions,
 	.wp-customizer .theme-browser .theme .theme-actions {
 		padding: 8px 15px;
 		box-shadow: none;
 	}

changeset 9	177826044cd9
parent 7	cf61fcea0001
child 16	a86126ab1dd4