wp/wp-admin/css/customize-controls.css
changeset 21 48c4eec2b7e6
parent 19 3d72ae0968f4
child 22 8c2e4d02f4ef
equal deleted inserted replaced
20:7b1b88e27a20 21:48c4eec2b7e6
   470 	padding: 20px 20px 10px 10px;
   470 	padding: 20px 20px 10px 10px;
   471 	width: 20px;
   471 	width: 20px;
   472 	height: 20px;
   472 	height: 20px;
   473 	cursor: pointer;
   473 	cursor: pointer;
   474 	box-shadow: none;
   474 	box-shadow: none;
   475 	-webkit-appearance: none;
       
   476 	background: transparent;
   475 	background: transparent;
   477 	color: #50575e;
   476 	color: #50575e;
   478 	border: none;
   477 	border: none;
   479 }
   478 }
   480 
   479 
  1081 	max-height: 64px;
  1080 	max-height: 64px;
  1082 	margin: 10px;
  1081 	margin: 10px;
  1083 	float: left;
  1082 	float: left;
  1084 }
  1083 }
  1085 
  1084 
  1086 #available-menu-items .accordion-section-content .new-content-item,
  1085 #available-menu-items .accordion-section-content .new-content-item-wrapper,
  1087 .customize-control-dropdown-pages .new-content-item {
  1086 .customize-control-dropdown-pages .new-content-item-wrapper {
  1088 	width: calc(100% - 30px);
  1087 	width: calc(100% - 30px);
  1089 	padding: 8px 15px;
  1088 	padding: 8px 15px;
  1090 	position: absolute;
  1089 	position: absolute;
  1091 	bottom: 0;
  1090 	bottom: 0;
  1092 	z-index: 10;
  1091 	z-index: 10;
  1093 	background: #f0f0f1;
  1092 	background: #f0f0f1;
       
  1093 }
       
  1094 
       
  1095 .customize-control-dropdown-pages .new-content-item-wrapper {
       
  1096 	width: 100%;
       
  1097 	padding: 0;
       
  1098 	position: static;
       
  1099 }
       
  1100 
       
  1101 #available-menu-items .accordion-section-content .new-content-item,
       
  1102 .customize-control-dropdown-pages .new-content-item {
  1094 	display: flex;
  1103 	display: flex;
  1095 }
  1104 }
  1096 
  1105 
  1097 .customize-control-dropdown-pages .new-content-item {
  1106 .customize-control-dropdown-pages .new-content-item {
  1098 	width: 100%;
  1107 	width: 100%;
  1099 	padding: 5px 0 5px 1px;
  1108 	padding: 5px 0 5px 1px;
  1100 	position: relative;
  1109 	position: relative;
       
  1110 }
       
  1111 
       
  1112 .customize-control-dropdown-pages .new-content-item-wrapper .new-content-item {
       
  1113 	padding: 0;
       
  1114 }
       
  1115 
       
  1116 .customize-control-dropdown-pages .new-content-item-wrapper .new-content-item label {
       
  1117 	line-height: 1.6;
  1101 }
  1118 }
  1102 
  1119 
  1103 #available-menu-items .new-content-item .create-item-input,
  1120 #available-menu-items .new-content-item .create-item-input,
  1104 .customize-control-dropdown-pages .new-content-item .create-item-input {
  1121 .customize-control-dropdown-pages .new-content-item .create-item-input {
  1105 	flex-grow: 10;
  1122 	flex-grow: 10;
  1565 	display: block;
  1582 	display: block;
  1566 	margin-bottom: 9px;
  1583 	margin-bottom: 9px;
  1567 }
  1584 }
  1568 
  1585 
  1569 .customize-control-header .choice:focus {
  1586 .customize-control-header .choice:focus {
  1570 	outline: none;
  1587 	box-shadow: 0 0 0 2px #2271b1;
  1571 	box-shadow:
  1588 	/* Only visible in Windows High Contrast mode */
  1572 		0 0 0 1px #4f94d4,
  1589 	outline: 2px solid transparent;
  1573 		0 0 3px 1px rgba(79, 148, 212, 0.8);
       
  1574 }
  1590 }
  1575 
  1591 
  1576 .customize-control-header .uploaded div:last-child > .choice {
  1592 .customize-control-header .uploaded div:last-child > .choice {
  1577 	margin-bottom: 0;
  1593 	margin-bottom: 0;
  1578 }
  1594 }
  1603 .customize-control-code_editor textarea {
  1619 .customize-control-code_editor textarea {
  1604 	width: 100%;
  1620 	width: 100%;
  1605 	font-family: Consolas, Monaco, monospace;
  1621 	font-family: Consolas, Monaco, monospace;
  1606 	font-size: 12px;
  1622 	font-size: 12px;
  1607 	padding: 6px 8px;
  1623 	padding: 6px 8px;
  1608 	-o-tab-size: 2;
       
  1609 	tab-size: 2;
  1624 	tab-size: 2;
  1610 }
  1625 }
  1611 .customize-control-code_editor textarea,
  1626 .customize-control-code_editor textarea,
  1612 .customize-control-code_editor .CodeMirror {
  1627 .customize-control-code_editor .CodeMirror {
  1613 	height: 14em;
  1628 	height: 14em;
  1816 
  1831 
  1817 .in-themes-panel.wp-full-overlay .wp-full-overlay-sidebar-content {
  1832 .in-themes-panel.wp-full-overlay .wp-full-overlay-sidebar-content {
  1818 	bottom: 0;
  1833 	bottom: 0;
  1819 }
  1834 }
  1820 
  1835 
  1821 .themes-filter-bar .feature-filter-toggle {
       
  1822 	float: right;
       
  1823 	margin: 3px 0 3px 25px;
       
  1824 }
       
  1825 
       
  1826 .themes-filter-bar .feature-filter-toggle:before {
  1836 .themes-filter-bar .feature-filter-toggle:before {
  1827 	content: "\f111";
  1837 	content: "\f111";
  1828 	margin: 0 5px 0 0;
  1838 	margin: 0 5px 0 0;
  1829 	font: normal 16px/1 dashicons;
  1839 	font: normal 16px/1 dashicons;
  1830 	vertical-align: text-bottom;
  1840 	vertical-align: text-bottom;
  1879 	animation: .6s themes-fade-in 1;
  1889 	animation: .6s themes-fade-in 1;
  1880 }
  1890 }
  1881 
  1891 
  1882 .in-themes-panel:not(.animating) .control-panel-themes .filter-themes-count {
  1892 .in-themes-panel:not(.animating) .control-panel-themes .filter-themes-count {
  1883 	animation: .6s themes-fade-in 1;
  1893 	animation: .6s themes-fade-in 1;
  1884 }
       
  1885 
       
  1886 .control-panel-themes .filter-themes-count {
       
  1887 	position: relative;
       
  1888 	float: right;
       
  1889 	line-height: 2.6;
       
  1890 }
  1894 }
  1891 
  1895 
  1892 .control-panel-themes .filter-themes-count .themes-displayed {
  1896 .control-panel-themes .filter-themes-count .themes-displayed {
  1893 	font-weight: 600;
  1897 	font-weight: 600;
  1894 	color: #50575e;
  1898 	color: #50575e;
  2098 	z-index: 10;
  2102 	z-index: 10;
  2099 	padding: 6px 25px;
  2103 	padding: 6px 25px;
  2100 	box-sizing: border-box;
  2104 	box-sizing: border-box;
  2101 	border-bottom: 1px solid #dcdcde;
  2105 	border-bottom: 1px solid #dcdcde;
  2102 }
  2106 }
       
  2107 .customize-preview-header.themes-filter-bar,
       
  2108 .customize-preview-header.themes-filter-bar .search-form {
       
  2109 	display: flex;
       
  2110 	align-items: center;
       
  2111 	gap: 10px;
       
  2112 	flex-wrap: wrap;
       
  2113 }
       
  2114 
       
  2115 .customize-preview-header.themes-filter-bar .search-form-input {
       
  2116 	position: relative;
       
  2117 }
       
  2118 
       
  2119 .customize-preview-header .filter-themes-wrapper {
       
  2120 	display: grid;
       
  2121 	align-items: center;
       
  2122 	gap: 10px;
       
  2123 	grid-template-columns: auto 1fr;
       
  2124 }
       
  2125 
       
  2126 .customize-preview-header .filter-themes-wrapper .filter-themes-count {
       
  2127 	justify-self: end;
       
  2128 }
  2103 
  2129 
  2104 @media screen and (min-width: 1670px) {
  2130 @media screen and (min-width: 1670px) {
  2105 	.customize-preview-header.themes-filter-bar {
  2131 	.customize-preview-header.themes-filter-bar {
  2106 		width: 82%;
  2132 		width: 82%;
  2107 		right: 0;
  2133 		right: 0;
  2110 }
  2136 }
  2111 
  2137 
  2112 .themes-filter-bar .themes-filter-container {
  2138 .themes-filter-bar .themes-filter-container {
  2113 	margin: 0;
  2139 	margin: 0;
  2114 	padding: 0;
  2140 	padding: 0;
       
  2141 	display: flex;
       
  2142 	align-items: center;
       
  2143 	gap: 10px;
  2115 }
  2144 }
  2116 
  2145 
  2117 .themes-filter-bar .wp-filter-search {
  2146 .themes-filter-bar .wp-filter-search {
  2118 	line-height: 1.8;
  2147 	line-height: 1.8;
  2119 	padding: 6px 10px 6px 30px;
  2148 	padding: 6px 10px 6px 30px;
  2120 	max-width: 100%;
  2149 	max-width: 100%;
  2121 	width: 40%;
  2150 	width: 40%;
  2122 	min-width: 300px;
  2151 	min-width: 300px;
  2123 	position: absolute;
       
  2124 	top: 6px;
       
  2125 	left: 25px;
       
  2126 	height: 32px;
  2152 	height: 32px;
  2127 	margin: 1px 0;
  2153 	margin: 1px 0;
       
  2154 	top: 0;
       
  2155 	left: 0;
  2128 }
  2156 }
  2129 
  2157 
  2130 /* Unstick the filter bar on short windows/screens. This breakpoint is based on the
  2158 /* Unstick the filter bar on short windows/screens. This breakpoint is based on the
  2131    current length of .org feature filters assuming translations do not wrap lines. */
  2159    current length of .org feature filters assuming translations do not wrap lines. */
  2132 @media screen and (max-height: 540px), screen and (max-width: 1018px) {
  2160 @media screen and (max-height: 540px), screen and (max-width: 1018px) {
  2156 	.filter-drawer .filter-group {
  2184 	.filter-drawer .filter-group {
  2157 		width: calc( (100% - 50px) / 2);
  2185 		width: calc( (100% - 50px) / 2);
  2158 	}
  2186 	}
  2159 }
  2187 }
  2160 
  2188 
       
  2189 @media screen and (max-width: 960px) {
       
  2190 	.customize-preview-header.themes-filter-bar {
       
  2191 		height: 96px;
       
  2192 	}
       
  2193 }
       
  2194 
  2161 @media screen and (max-width: 900px) {
  2195 @media screen and (max-width: 900px) {
  2162 	.customize-preview-header.themes-filter-bar {
       
  2163 		height: 86px;
       
  2164 		padding-top: 46px;
       
  2165 	}
       
  2166 
       
  2167 	.themes-filter-bar .wp-filter-search {
  2196 	.themes-filter-bar .wp-filter-search {
  2168 		width: calc(100% - 50px);
  2197 		width: 100%;
  2169 		margin: 0;
  2198 		margin: 0;
  2170 		min-width: 200px;
  2199 		min-width: 200px;
       
  2200 	}
       
  2201 
       
  2202 	.customize-preview-header.themes-filter-bar,
       
  2203 	.customize-preview-header.themes-filter-bar .search-form
       
  2204 	.themes-filter-bar .themes-filter-container {
       
  2205 		display: grid;
       
  2206 		gap: 4px;
       
  2207 	}
       
  2208 
       
  2209 	.customize-preview-header.themes-filter-bar .search-form-input {
       
  2210 		display: flex;
       
  2211 		flex-grow: 1;
  2171 	}
  2212 	}
  2172 
  2213 
  2173 	.filter-drawer {
  2214 	.filter-drawer {
  2174 		top: 86px;
  2215 		top: 86px;
  2175 	}
  2216 	}
  2317 	z-index: 120;
  2358 	z-index: 120;
  2318 }
  2359 }
  2319 
  2360 
  2320 .wp-customizer .theme-overlay .theme-actions {
  2361 .wp-customizer .theme-overlay .theme-actions {
  2321 	text-align: right; /* Because there're only one or two actions, match the UI pattern of media modals and right-align the action. */
  2362 	text-align: right; /* Because there're only one or two actions, match the UI pattern of media modals and right-align the action. */
  2322 	padding: 10px 25px;
  2363 	padding: 10px 25px 5px;
  2323 	background: #f0f0f1;
  2364 	background: #f0f0f1;
  2324 	border-top: 1px solid #dcdcde;
  2365 	border-top: 1px solid #dcdcde;
  2325 }
  2366 }
  2326 
  2367 
  2327 .wp-customizer .theme-overlay .theme-actions .theme-install.preview {
  2368 .wp-customizer .theme-overlay .theme-actions .theme-install.preview {
  2328 	margin-left: 8px;
  2369 	margin-left: 8px;
  2329 }
       
  2330 
       
  2331 .control-panel-themes .theme-actions .delete-theme {
       
  2332 	left: 15px; /* these override themes.css on mobile */
       
  2333 	right: auto;
       
  2334 	bottom: auto;
       
  2335 	position: absolute;
       
  2336 }
  2370 }
  2337 
  2371 
  2338 .modal-open .in-themes-panel #customize-controls .wp-full-overlay-sidebar-content {
  2372 .modal-open .in-themes-panel #customize-controls .wp-full-overlay-sidebar-content {
  2339 	overflow: visible; /* Prevent the top-level Customizer controls from becoming visible when elements on the right of the details modal are focused. */
  2373 	overflow: visible; /* Prevent the top-level Customizer controls from becoming visible when elements on the right of the details modal are focused. */
  2340 }
  2374 }
  2588 #available-menu-items .customize-section-title {
  2622 #available-menu-items .customize-section-title {
  2589 	display: none;
  2623 	display: none;
  2590 }
  2624 }
  2591 
  2625 
  2592 #available-widgets-list {
  2626 #available-widgets-list {
  2593 	top: 60px;
  2627 	top: 82px;
  2594 	position: absolute;
  2628 	position: absolute;
  2595 	overflow: auto;
  2629 	overflow: auto;
  2596 	bottom: 0;
  2630 	bottom: 0;
  2597 	width: 100%;
  2631 	width: 100%;
  2598 	border-top: 1px solid #dcdcde;
  2632 	border-top: 1px solid #dcdcde;
  2632 
  2666 
  2633 #available-menu-items-search .search-icon,
  2667 #available-menu-items-search .search-icon,
  2634 #available-widgets-filter .search-icon {
  2668 #available-widgets-filter .search-icon {
  2635 	display: block;
  2669 	display: block;
  2636 	position: absolute;
  2670 	position: absolute;
  2637 	top: 15px; /* 13 container padding +1 input margin +1 input border */
  2671 	bottom: 15px; /* 13 container padding +1 input margin +1 input border */
  2638 	left: 16px;
  2672 	left: 16px;
  2639 	width: 30px;
  2673 	width: 30px;
  2640 	height: 30px;
  2674 	height: 30px;
  2641 	line-height: 2.1;
  2675 	line-height: 2.1;
  2642 	text-align: center;
  2676 	text-align: center;
  2643 	color: #646970;
  2677 	color: #646970;
  2644 }
  2678 }
  2645 
  2679 
  2646 #available-widgets-filter .clear-results,
  2680 #available-widgets-filter .clear-results,
  2647 #available-menu-items-search .clear-results {
  2681 #available-menu-items-search .accordion-section-title .clear-results {
  2648 	position: absolute;
  2682 	position: absolute;
  2649 	top: 15px; /* 13 container padding +1 input margin +1 input border */
  2683 	top: 36px; /* 13 container padding +1 input margin +1 input border */
  2650 	right: 16px;
  2684 	right: 16px;
  2651 	width: 30px;
  2685 	width: 30px;
  2652 	height: 30px;
  2686 	height: 30px;
  2653 	padding: 0;
  2687 	padding: 0;
  2654 	border: 0;
  2688 	border: 0;
  2686 	color: #d63638;
  2720 	color: #d63638;
  2687 }
  2721 }
  2688 
  2722 
  2689 #available-widgets-filter .clear-results:focus,
  2723 #available-widgets-filter .clear-results:focus,
  2690 #available-menu-items-search .clear-results:focus {
  2724 #available-menu-items-search .clear-results:focus {
  2691 	box-shadow:
  2725 	box-shadow: 0 0 0 2px #2271b1;
  2692 		0 0 0 1px #4f94d4,
  2726 	/* Only visible in Windows High Contrast mode */
  2693 		0 0 2px 1px rgba(79, 148, 212, 0.8);
  2727 	outline: 2px solid transparent;
  2694 }
  2728 }
  2695 
  2729 
  2696 #available-menu-items-search .search-icon:after,
  2730 #available-menu-items-search .search-icon:after,
  2697 #available-widgets-filter .search-icon:after,
  2731 #available-widgets-filter .search-icon:after,
  2698 .themes-filter-bar .search-icon:after {
  2732 .themes-filter-bar .search-icon:after {
  2703 	-moz-osx-font-smoothing: grayscale;
  2737 	-moz-osx-font-smoothing: grayscale;
  2704 }
  2738 }
  2705 
  2739 
  2706 .themes-filter-bar .search-icon {
  2740 .themes-filter-bar .search-icon {
  2707 	position: absolute;
  2741 	position: absolute;
  2708 	top: 7px;
  2742 	top: 2px;
  2709 	left: 26px;
  2743 	left: 2px;
  2710 	z-index: 1;
  2744 	z-index: 1;
  2711 	color: #646970;
  2745 	color: #646970;
  2712 	height: 30px;
  2746 	height: 30px;
  2713 	width: 30px;
  2747 	width: 30px;
  2714 	line-height: 2;
  2748 	line-height: 2;
  2822 	.media-widget-control .media-widget-buttons .button.change-media,
  2856 	.media-widget-control .media-widget-buttons .button.change-media,
  2823 	.media-widget-control .media-widget-buttons .button.select-media {
  2857 	.media-widget-control .media-widget-buttons .button.select-media {
  2824 		margin-top: 12px;
  2858 		margin-top: 12px;
  2825 	}
  2859 	}
  2826 
  2860 
  2827 	.wp-core-ui .themes-filter-bar .feature-filter-toggle {
  2861 	.customize-preview-header.themes-filter-bar .search-icon {
  2828 		margin: 3px 0 3px 25px;
  2862 		top: 6px;
  2829 	}
  2863 	}
  2830 }
  2864 }
  2831 
  2865 
  2832 @media screen and (max-width: 1200px) {
  2866 @media screen and (max-width: 1200px) {
  2833 	.outer-section-open .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main,
  2867 	.outer-section-open .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main,
  2960 		width: 100%;
  2994 		width: 100%;
  2961 		height: auto;
  2995 		height: auto;
  2962 	}
  2996 	}
  2963 
  2997 
  2964 	#available-widgets-list {
  2998 	#available-widgets-list {
  2965 		top: 130px;
  2999 		top: 152px;
  2966 	}
  3000 	}
  2967 
  3001 
  2968 	#available-menu-items-search .clear-results,
  3002 	#available-menu-items-search .clear-results {
  2969 	#available-menu-items-search .search-icon {
  3003 		top: 36px;
  2970 		top: 85px; /* 70 section title height + 13 container padding +1 input margin +1 input border */
  3004 		right: 16px;
  2971 	}
  3005 	}
  2972 
  3006 
  2973 	.reorder,
  3007 	.reorder,
  2974 	.reordering .reorder-done {
  3008 	.reordering .reorder-done {
  2975 		padding: 8px;
  3009 		padding: 8px;
  2976 	}
       
  2977 
       
  2978 	.wp-core-ui .themes-filter-bar .feature-filter-toggle {
       
  2979 		margin: 0;
       
  2980 	}
  3010 	}
  2981 }
  3011 }
  2982 
  3012 
  2983 @media screen and (max-width: 600px) {
  3013 @media screen and (max-width: 600px) {
  2984 	.wp-full-overlay.expanded {
  3014 	.wp-full-overlay.expanded {