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