1 @charset "UTF-8"; |
1 @charset "UTF-8"; |
2 /** |
2 :root{ |
3 * Colors |
3 --wp-admin-theme-color:#3858e9; |
4 */ |
4 --wp-admin-theme-color--rgb:56, 88, 233; |
5 /** |
5 --wp-admin-theme-color-darker-10:#2145e6; |
6 * Breakpoints & Media Queries |
6 --wp-admin-theme-color-darker-10--rgb:33, 69, 230; |
7 */ |
7 --wp-admin-theme-color-darker-20:#183ad6; |
8 /** |
8 --wp-admin-theme-color-darker-20--rgb:24, 58, 214; |
9 * SCSS Variables. |
9 --wp-admin-border-width-focus:2px; |
10 * |
10 } |
11 * Please use variables from this sheet to ensure consistency across the UI. |
11 @media (min-resolution:192dpi){ |
12 * Don't add to this sheet unless you're pretty sure the value will be reused in many places. |
12 :root{ |
13 * For example, don't add rules to this sheet that affect block visuals. It's purely for UI. |
13 --wp-admin-border-width-focus:1.5px; |
14 */ |
14 } |
15 /** |
15 } |
16 * Colors |
16 |
17 */ |
17 .components-animate__appear{ |
18 /** |
18 animation:components-animate__appear-animation .1s cubic-bezier(0, 0, .2, 1) 0s; |
19 * Fonts & basic variables. |
19 animation-fill-mode:forwards; |
20 */ |
20 } |
21 /** |
21 @media (prefers-reduced-motion:reduce){ |
22 * Grid System. |
22 .components-animate__appear{ |
23 * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/ |
23 animation-delay:0s; |
24 */ |
24 animation-duration:1ms; |
25 /** |
25 } |
26 * Dimensions. |
26 } |
27 */ |
27 .components-animate__appear.is-from-top,.components-animate__appear.is-from-top.is-from-left{ |
28 /** |
28 transform-origin:top right; |
29 * Shadows. |
29 } |
30 */ |
30 .components-animate__appear.is-from-top.is-from-right{ |
31 /** |
31 transform-origin:top left; |
32 * Editor widths. |
32 } |
33 */ |
33 .components-animate__appear.is-from-bottom,.components-animate__appear.is-from-bottom.is-from-left{ |
34 /** |
34 transform-origin:bottom right; |
35 * Block & Editor UI. |
35 } |
36 */ |
36 .components-animate__appear.is-from-bottom.is-from-right{ |
37 /** |
37 transform-origin:bottom left; |
38 * Block paddings. |
38 } |
39 */ |
39 |
40 /** |
40 @keyframes components-animate__appear-animation{ |
41 * React Native specific. |
41 0%{ |
42 * These variables do not appear to be used anywhere else. |
42 transform:translateY(-2em) scaleY(0) scaleX(0); |
43 */ |
43 } |
44 /** |
44 to{ |
45 * Converts a hex value into the rgb equivalent. |
45 transform:translateY(0) scaleY(1) scaleX(1); |
46 * |
46 } |
47 * @param {string} hex - the hexadecimal value to convert |
47 } |
48 * @return {string} comma separated rgb values |
48 .components-animate__slide-in{ |
49 */ |
49 animation:components-animate__slide-in-animation .1s cubic-bezier(0, 0, .2, 1); |
50 /** |
50 animation-fill-mode:forwards; |
51 * Breakpoint mixins |
51 } |
52 */ |
52 @media (prefers-reduced-motion:reduce){ |
53 /** |
53 .components-animate__slide-in{ |
54 * Long content fade mixin |
54 animation-delay:0s; |
55 * |
55 animation-duration:1ms; |
56 * Creates a fading overlay to signify that the content is longer |
56 } |
57 * than the space allows. |
57 } |
58 */ |
58 .components-animate__slide-in.is-from-left{ |
59 /** |
59 transform:translateX(-100%); |
60 * Focus styles. |
60 } |
61 */ |
61 .components-animate__slide-in.is-from-right{ |
62 /** |
62 transform:translateX(100%); |
63 * Applies editor left position to the selector passed as argument |
63 } |
64 */ |
64 |
65 /** |
65 @keyframes components-animate__slide-in-animation{ |
66 * Styles that are reused verbatim in a few places |
66 to{ |
67 */ |
67 transform:translateX(0); |
68 /** |
68 } |
69 * Allows users to opt-out of animations via OS-level preferences. |
69 } |
70 */ |
70 .components-animate__loading{ |
71 /** |
71 animation:components-animate__loading 1.6s ease-in-out infinite; |
72 * Reset default styles for JavaScript UI based pages. |
72 } |
73 * This is a WP-admin agnostic reset |
73 |
74 */ |
74 @keyframes components-animate__loading{ |
75 /** |
75 0%{ |
76 * Reset the WP Admin page styles for Gutenberg-like pages. |
76 opacity:.5; |
77 */ |
77 } |
78 :root { |
78 50%{ |
79 --wp-admin-theme-color: #007cba; |
79 opacity:1; |
80 --wp-admin-theme-color--rgb: 0, 124, 186; |
80 } |
81 --wp-admin-theme-color-darker-10: #006ba1; |
81 to{ |
82 --wp-admin-theme-color-darker-10--rgb: 0, 107, 161; |
82 opacity:.5; |
83 --wp-admin-theme-color-darker-20: #005a87; |
83 } |
84 --wp-admin-theme-color-darker-20--rgb: 0, 90, 135; |
84 } |
85 --wp-admin-border-width-focus: 2px; |
85 .components-autocomplete__popover .components-popover__content{ |
86 } |
86 min-width:200px; |
87 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { |
87 padding:8px; |
88 :root { |
88 } |
89 --wp-admin-border-width-focus: 1.5px; |
89 |
90 } |
90 .components-autocomplete__result.components-button{ |
91 } |
91 display:flex; |
92 |
92 height:auto; |
93 .components-animate__appear { |
93 min-height:36px; |
94 animation: components-animate__appear-animation 0.1s cubic-bezier(0, 0, 0.2, 1) 0s; |
94 text-align:right; |
95 animation-fill-mode: forwards; |
95 width:100%; |
96 } |
96 } |
97 @media (prefers-reduced-motion: reduce) { |
97 .components-autocomplete__result.components-button:focus:not(:disabled){ |
98 .components-animate__appear { |
98 box-shadow:inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); |
99 animation-duration: 1ms; |
99 outline:2px solid #0000; |
100 animation-delay: 0s; |
100 } |
101 } |
101 .components-autocomplete__result.components-button.is-selected,.components-autocomplete__result.components-button:not(:disabled,[aria-disabled=true]):active{ |
102 } |
102 background:var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); |
103 .components-animate__appear.is-from-top, .components-animate__appear.is-from-top.is-from-left { |
103 color:#fff; |
104 transform-origin: top right; |
104 } |
105 } |
105 |
106 .components-animate__appear.is-from-top.is-from-right { |
106 .components-button-group{ |
107 transform-origin: top left; |
107 display:inline-block; |
108 } |
108 } |
109 .components-animate__appear.is-from-bottom, .components-animate__appear.is-from-bottom.is-from-left { |
109 .components-button-group .components-button{ |
110 transform-origin: bottom right; |
110 border-radius:0; |
111 } |
111 box-shadow:inset 0 0 0 1px #1e1e1e; |
112 .components-animate__appear.is-from-bottom.is-from-right { |
112 color:#1e1e1e; |
113 transform-origin: bottom left; |
113 display:inline-flex; |
114 } |
114 } |
115 |
115 .components-button-group .components-button+.components-button{ |
116 @keyframes components-animate__appear-animation { |
116 margin-right:-1px; |
117 from { |
117 } |
118 transform: translateY(-2em) scaleY(0) scaleX(0); |
118 .components-button-group .components-button:first-child{ |
119 } |
119 border-radius:0 2px 2px 0; |
120 to { |
120 } |
121 transform: translateY(0%) scaleY(1) scaleX(1); |
121 .components-button-group .components-button:last-child{ |
122 } |
122 border-radius:2px 0 0 2px; |
123 } |
123 } |
124 .components-animate__slide-in { |
124 .components-button-group .components-button.is-primary,.components-button-group .components-button:focus{ |
125 animation: components-animate__slide-in-animation 0.1s cubic-bezier(0, 0, 0.2, 1); |
125 position:relative; |
126 animation-fill-mode: forwards; |
126 z-index:1; |
127 } |
127 } |
128 @media (prefers-reduced-motion: reduce) { |
128 .components-button-group .components-button.is-primary{ |
129 .components-animate__slide-in { |
129 box-shadow:inset 0 0 0 1px #1e1e1e; |
130 animation-duration: 1ms; |
130 } |
131 animation-delay: 0s; |
131 |
132 } |
132 .components-button{ |
133 } |
133 align-items:center; |
134 .components-animate__slide-in.is-from-left { |
134 -webkit-appearance:none; |
135 transform: translateX(-100%); |
135 background:none; |
136 } |
136 border:0; |
137 .components-animate__slide-in.is-from-right { |
137 border-radius:2px; |
138 transform: translateX(100%); |
138 box-sizing:border-box; |
139 } |
139 color:var(--wp-components-color-foreground, #1e1e1e); |
140 |
140 cursor:pointer; |
141 @keyframes components-animate__slide-in-animation { |
141 display:inline-flex; |
142 100% { |
142 font-family:inherit; |
143 transform: translateX(0%); |
143 font-size:13px; |
144 } |
144 font-weight:400; |
145 } |
145 height:36px; |
146 .components-animate__loading { |
146 margin:0; |
147 animation: components-animate__loading 1.6s ease-in-out infinite; |
147 padding:6px 12px; |
148 } |
148 text-decoration:none; |
149 |
149 transition:box-shadow .1s linear; |
150 @keyframes components-animate__loading { |
150 } |
151 0% { |
151 @media (prefers-reduced-motion:reduce){ |
152 opacity: 0.5; |
152 .components-button{ |
153 } |
153 transition-delay:0s; |
154 50% { |
154 transition-duration:0s; |
155 opacity: 1; |
155 } |
156 } |
156 } |
157 100% { |
157 .components-button.is-next-40px-default-size{ |
158 opacity: 0.5; |
158 height:40px; |
159 } |
159 } |
160 } |
160 .components-button:hover,.components-button[aria-expanded=true]{ |
161 .components-autocomplete__popover .components-popover__content > div { |
161 color:var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); |
162 padding: 16px; |
162 } |
163 min-width: 220px; |
163 .components-button:disabled:hover,.components-button[aria-disabled=true]:hover{ |
164 } |
164 color:initial; |
165 |
165 } |
166 .components-autocomplete__result.components-button { |
166 .components-button:focus:not(:disabled){ |
167 display: flex; |
167 box-shadow:0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); |
168 height: auto; |
168 outline:3px solid #0000; |
169 min-height: 36px; |
169 } |
170 text-align: right; |
170 .components-button.is-primary{ |
171 width: 100%; |
171 background:var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); |
172 } |
172 color:var(--wp-components-color-accent-inverted, #fff); |
173 .components-autocomplete__result.components-button.is-selected { |
173 outline:1px solid #0000; |
174 box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); |
174 text-decoration:none; |
175 } |
175 text-shadow:none; |
176 |
176 white-space:nowrap; |
177 .components-button-group { |
177 } |
178 display: inline-block; |
178 .components-button.is-primary:hover:not(:disabled){ |
179 } |
179 background:var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6)); |
180 .components-button-group .components-button { |
180 color:var(--wp-components-color-accent-inverted, #fff); |
181 border-radius: 0; |
181 } |
182 display: inline-flex; |
182 .components-button.is-primary:active:not(:disabled){ |
183 color: #1e1e1e; |
183 background:var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6)); |
184 box-shadow: inset 0 0 0 1px #1e1e1e; |
184 border-color:var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6)); |
185 } |
185 color:var(--wp-components-color-accent-inverted, #fff); |
186 .components-button-group .components-button + .components-button { |
186 } |
187 margin-right: -1px; |
187 .components-button.is-primary:focus:not(:disabled){ |
188 } |
188 box-shadow:inset 0 0 0 1px var(--wp-components-color-background, #fff), 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); |
189 .components-button-group .components-button:first-child { |
189 } |
190 border-radius: 0 2px 2px 0; |
190 .components-button.is-primary:disabled,.components-button.is-primary:disabled:active:enabled,.components-button.is-primary[aria-disabled=true],.components-button.is-primary[aria-disabled=true]:active:enabled,.components-button.is-primary[aria-disabled=true]:enabled{ |
191 } |
191 background:var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); |
192 .components-button-group .components-button:last-child { |
192 border-color:var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); |
193 border-radius: 2px 0 0 2px; |
193 color:#fff6; |
194 } |
194 opacity:1; |
195 .components-button-group .components-button:focus, .components-button-group .components-button.is-primary { |
195 outline:none; |
196 position: relative; |
196 } |
197 z-index: 1; |
197 .components-button.is-primary:disabled:active:enabled:focus:enabled,.components-button.is-primary:disabled:focus:enabled,.components-button.is-primary[aria-disabled=true]:active:enabled:focus:enabled,.components-button.is-primary[aria-disabled=true]:enabled:focus:enabled,.components-button.is-primary[aria-disabled=true]:focus:enabled{ |
198 } |
198 box-shadow:inset 0 0 0 1px var(--wp-components-color-background, #fff), 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); |
199 .components-button-group .components-button.is-primary { |
199 } |
200 box-shadow: inset 0 0 0 1px #1e1e1e; |
200 .components-button.is-primary.is-busy,.components-button.is-primary.is-busy:disabled,.components-button.is-primary.is-busy[aria-disabled=true]{ |
201 } |
201 background-image:linear-gradient(45deg, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 33%, var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6)) 33%, var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6)) 70%, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 70%); |
202 |
202 background-size:100px 100%; |
203 .components-button { |
203 border-color:var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); |
204 display: inline-flex; |
204 color:var(--wp-components-color-accent-inverted, #fff); |
205 text-decoration: none; |
205 } |
206 font-family: inherit; |
206 .components-button.is-secondary,.components-button.is-tertiary{ |
207 font-weight: normal; |
207 outline:1px solid #0000; |
208 font-size: 13px; |
208 } |
209 margin: 0; |
209 .components-button.is-secondary:active:not(:disabled),.components-button.is-tertiary:active:not(:disabled){ |
210 border: 0; |
210 box-shadow:none; |
211 cursor: pointer; |
211 } |
212 -webkit-appearance: none; |
212 .components-button.is-secondary:disabled,.components-button.is-secondary[aria-disabled=true],.components-button.is-secondary[aria-disabled=true]:hover,.components-button.is-tertiary:disabled,.components-button.is-tertiary[aria-disabled=true],.components-button.is-tertiary[aria-disabled=true]:hover{ |
213 background: none; |
213 background:#0000; |
214 transition: box-shadow 0.1s linear; |
214 color:#949494; |
215 height: 36px; |
215 opacity:1; |
216 align-items: center; |
216 transform:none; |
217 box-sizing: border-box; |
217 } |
218 padding: 6px 12px; |
218 .components-button.is-secondary{ |
219 border-radius: 2px; |
219 background:#0000; |
220 color: #1e1e1e; |
220 box-shadow:inset 0 0 0 1px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); |
221 /** |
221 color:var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); |
222 * Primary button style. |
222 outline:1px solid #0000; |
223 */ |
223 white-space:nowrap; |
224 /** |
224 } |
225 * Secondary and tertiary buttons. |
225 .components-button.is-secondary:hover:not(:disabled,[aria-disabled=true]){ |
226 */ |
226 box-shadow:inset 0 0 0 1px var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6)); |
227 /** |
227 } |
228 * Secondary button style. |
228 .components-button.is-secondary:disabled:not(:focus),.components-button.is-secondary[aria-disabled=true]:hover:not(:focus),.components-button.is-secondary[aria-disabled=true]:not(:focus){ |
229 */ |
229 box-shadow:inset 0 0 0 1px #ddd; |
230 /** |
230 } |
231 * Tertiary buttons. |
231 .components-button.is-tertiary{ |
232 */ |
232 background:#0000; |
233 /** |
233 color:var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); |
234 * Destructive buttons. |
234 white-space:nowrap; |
235 */ |
235 } |
236 /** |
236 .components-button.is-tertiary:hover:not(:disabled,[aria-disabled=true]){ |
237 * Link buttons. |
237 background:rgba(var(--wp-admin-theme-color--rgb), .04); |
238 */ |
238 } |
239 } |
239 .components-button.is-tertiary:active:not(:disabled,[aria-disabled=true]){ |
240 @media (prefers-reduced-motion: reduce) { |
240 background:rgba(var(--wp-admin-theme-color--rgb), .08); |
241 .components-button { |
241 } |
242 transition-duration: 0s; |
242 p+.components-button.is-tertiary{ |
243 transition-delay: 0s; |
243 margin-right:-6px; |
244 } |
244 } |
245 } |
245 .components-button.is-tertiary:disabled:not(:focus),.components-button.is-tertiary[aria-disabled=true]:hover:not(:focus),.components-button.is-tertiary[aria-disabled=true]:not(:focus){ |
246 .components-button[aria-expanded=true], .components-button:hover { |
246 box-shadow:none; |
247 color: var(--wp-admin-theme-color); |
247 outline:none; |
248 } |
248 } |
249 .components-button[aria-disabled=true]:hover { |
249 .components-button.is-destructive{ |
250 color: initial; |
250 --wp-components-color-accent:#cc1818; |
251 } |
251 --wp-components-color-accent-darker-10:#9e1313; |
252 .components-button:focus:not(:disabled) { |
252 --wp-components-color-accent-darker-20:#710d0d; |
253 box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); |
253 } |
254 outline: 3px solid transparent; |
254 .components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link){ |
255 } |
255 color:#cc1818; |
256 .components-button.is-primary { |
256 } |
257 white-space: nowrap; |
257 .components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link):hover:not(:disabled){ |
258 background: var(--wp-admin-theme-color); |
258 color:#710d0d; |
259 color: #fff; |
259 } |
260 text-decoration: none; |
260 .components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link):focus:not(:disabled){ |
261 text-shadow: none; |
261 box-shadow:0 0 0 var(--wp-admin-border-width-focus) #cc1818; |
262 outline: 1px solid transparent; |
262 } |
263 } |
263 .components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link):active:not(:disabled){ |
264 .components-button.is-primary:hover:not(:disabled) { |
264 background:#ccc; |
265 background: var(--wp-admin-theme-color-darker-10); |
265 } |
266 color: #fff; |
266 .components-button.is-link{ |
267 } |
267 background:none; |
268 .components-button.is-primary:active:not(:disabled) { |
268 border:0; |
269 background: var(--wp-admin-theme-color-darker-20); |
269 border-radius:0; |
270 border-color: var(--wp-admin-theme-color-darker-20); |
270 box-shadow:none; |
271 color: #fff; |
271 color:var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); |
272 } |
272 height:auto; |
273 .components-button.is-primary:focus:not(:disabled) { |
273 margin:0; |
274 box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); |
274 outline:none; |
275 } |
275 padding:0; |
276 .components-button.is-primary:disabled, .components-button.is-primary:disabled:active:enabled, .components-button.is-primary[aria-disabled=true], .components-button.is-primary[aria-disabled=true]:enabled, .components-button.is-primary[aria-disabled=true]:active:enabled { |
276 text-align:right; |
277 color: rgba(255, 255, 255, 0.4); |
277 text-decoration:underline; |
278 background: var(--wp-admin-theme-color); |
278 transition-duration:.05s; |
279 border-color: var(--wp-admin-theme-color); |
279 transition-property:border, background, color; |
280 opacity: 1; |
280 transition-timing-function:ease-in-out; |
281 outline: none; |
281 } |
282 } |
282 @media (prefers-reduced-motion:reduce){ |
283 .components-button.is-primary:disabled:focus:enabled, .components-button.is-primary:disabled:active:enabled:focus:enabled, .components-button.is-primary[aria-disabled=true]:focus:enabled, .components-button.is-primary[aria-disabled=true]:enabled:focus:enabled, .components-button.is-primary[aria-disabled=true]:active:enabled:focus:enabled { |
283 .components-button.is-link{ |
284 box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--wp-admin-theme-color); |
284 transition-delay:0s; |
285 } |
285 transition-duration:0s; |
286 .components-button.is-primary.is-busy, .components-button.is-primary.is-busy:disabled, .components-button.is-primary.is-busy[aria-disabled=true] { |
286 } |
287 color: #fff; |
287 } |
288 background-size: 100px 100%; |
288 .components-button.is-link:focus{ |
289 /* stylelint-disable */ |
289 border-radius:2px; |
290 background-image: linear-gradient(45deg, var(--wp-admin-theme-color) 33%, var(--wp-admin-theme-color-darker-20) 33%, var(--wp-admin-theme-color-darker-20) 70%, var(--wp-admin-theme-color) 70%); |
290 } |
291 /* stylelint-enable */ |
291 .components-button:not(:disabled,[aria-disabled=true]):active{ |
292 border-color: var(--wp-admin-theme-color); |
292 color:var(--wp-components-color-foreground, #1e1e1e); |
293 } |
293 } |
294 .components-button.is-secondary, .components-button.is-tertiary { |
294 .components-button:disabled,.components-button[aria-disabled=true]{ |
295 outline: 1px solid transparent; |
295 cursor:default; |
296 } |
296 opacity:.3; |
297 .components-button.is-secondary:active:not(:disabled), .components-button.is-tertiary:active:not(:disabled) { |
297 } |
298 background: #ddd; |
298 .components-button.is-busy,.components-button.is-secondary.is-busy,.components-button.is-secondary.is-busy:disabled,.components-button.is-secondary.is-busy[aria-disabled=true]{ |
299 color: var(--wp-admin-theme-color-darker-10); |
299 animation:components-button__busy-animation 2.5s linear infinite; |
300 box-shadow: none; |
300 background-image:linear-gradient(45deg, #fafafa 33%, #e0e0e0 0, #e0e0e0 70%, #fafafa 0); |
301 } |
301 background-size:100px 100%; |
302 .components-button.is-secondary:hover:not(:disabled), .components-button.is-tertiary:hover:not(:disabled) { |
302 opacity:1; |
303 color: var(--wp-admin-theme-color-darker-10); |
303 } |
304 box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color-darker-10); |
304 @media (prefers-reduced-motion:reduce){ |
305 } |
305 .components-button.is-busy,.components-button.is-secondary.is-busy,.components-button.is-secondary.is-busy:disabled,.components-button.is-secondary.is-busy[aria-disabled=true]{ |
306 .components-button.is-secondary:disabled, .components-button.is-secondary[aria-disabled=true], .components-button.is-secondary[aria-disabled=true]:hover, .components-button.is-tertiary:disabled, .components-button.is-tertiary[aria-disabled=true], .components-button.is-tertiary[aria-disabled=true]:hover { |
306 animation-duration:0s; |
307 color: #828282; |
307 } |
308 background: #eaeaea; |
308 } |
309 transform: none; |
309 .components-button.is-compact{ |
310 opacity: 1; |
310 height:32px; |
311 box-shadow: none; |
311 } |
312 outline: none; |
312 .components-button.is-compact.has-icon:not(.has-text){ |
313 } |
313 min-width:32px; |
314 .components-button.is-secondary { |
314 padding:0; |
315 box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color); |
315 width:32px; |
316 outline: 1px solid transparent; |
316 } |
317 white-space: nowrap; |
317 .components-button.is-small{ |
318 color: var(--wp-admin-theme-color); |
318 font-size:11px; |
319 background: transparent; |
319 height:24px; |
320 } |
320 line-height:22px; |
321 .components-button.is-tertiary { |
321 padding:0 8px; |
322 white-space: nowrap; |
322 } |
323 color: var(--wp-admin-theme-color); |
323 .components-button.is-small.has-icon:not(.has-text){ |
324 background: transparent; |
324 min-width:24px; |
325 padding: 6px; |
325 padding:0; |
326 } |
326 width:24px; |
327 .components-button.is-tertiary .dashicon { |
327 } |
328 display: inline-block; |
328 .components-button.has-icon{ |
329 flex: 0 0 auto; |
329 justify-content:center; |
330 } |
330 min-width:36px; |
331 p + .components-button.is-tertiary { |
331 padding:6px; |
332 margin-right: -6px; |
332 } |
333 } |
333 .components-button.has-icon.is-next-40px-default-size{ |
334 .components-button.is-destructive { |
334 min-width:40px; |
335 color: #cc1818; |
335 } |
336 box-shadow: inset 0 0 0 1px #cc1818; |
336 .components-button.has-icon .dashicon{ |
337 } |
337 align-items:center; |
338 .components-button.is-destructive:hover:not(:disabled) { |
338 box-sizing:initial; |
339 color: #710d0d; |
339 display:inline-flex; |
340 box-shadow: inset 0 0 0 1px #710d0d; |
340 justify-content:center; |
341 } |
341 padding:2px; |
342 .components-button.is-destructive:focus:not(:disabled) { |
342 } |
343 color: var(--wp-admin-theme-color); |
343 .components-button.has-icon.has-text{ |
344 } |
344 gap:4px; |
345 .components-button.is-destructive:active:not(:disabled) { |
345 justify-content:start; |
346 background: #ccc; |
346 padding-left:12px; |
347 } |
347 padding-right:8px; |
348 .components-button.is-destructive.is-primary { |
348 } |
349 color: #fff; |
349 .components-button.is-pressed{ |
350 background: #cc1818; |
350 background:var(--wp-components-color-foreground, #1e1e1e); |
351 box-shadow: inset 0 0 0 1px #cc1818; |
351 color:var(--wp-components-color-foreground-inverted, #fff); |
352 } |
352 } |
353 .components-button.is-destructive.is-primary:hover:not(:disabled) { |
353 .components-button.is-pressed:focus:not(:disabled){ |
354 color: #fff; |
354 box-shadow:inset 0 0 0 1px var(--wp-components-color-background, #fff), 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); |
355 background: #710d0d; |
355 outline:2px solid #0000; |
356 box-shadow: inset 0 0 0 1px #710d0d; |
356 } |
357 } |
357 .components-button.is-pressed:hover:not(:disabled){ |
358 .components-button.is-destructive.is-tertiary { |
358 background:var(--wp-components-color-foreground, #1e1e1e); |
359 box-shadow: none; |
359 color:var(--wp-components-color-foreground-inverted, #fff); |
360 } |
360 } |
361 .components-button.is-destructive.is-tertiary:hover:not(:disabled) { |
361 .components-button svg{ |
362 box-shadow: inset 0 0 0 1px #cc1818; |
362 fill:currentColor; |
363 color: #cc1818; |
363 outline:none; |
364 } |
364 } |
365 .components-button.is-destructive.is-tertiary:focus:not(:disabled) { |
365 @media (forced-colors:active){ |
366 box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) #cc1818; |
366 .components-button svg{ |
367 color: #cc1818; |
367 fill:CanvasText; |
368 } |
368 } |
369 .components-button.is-link { |
369 } |
370 margin: 0; |
370 .components-button .components-visually-hidden{ |
371 padding: 0; |
371 height:auto; |
372 box-shadow: none; |
372 } |
373 border: 0; |
373 |
374 border-radius: 0; |
374 @keyframes components-button__busy-animation{ |
375 background: none; |
375 0%{ |
376 outline: none; |
376 background-position:right 200px top 0; |
377 text-align: right; |
377 } |
378 color: var(--wp-admin-theme-color); |
378 } |
379 text-decoration: underline; |
379 .components-checkbox-control{ |
380 transition-property: border, background, color; |
380 --checkbox-input-size:24px; |
381 transition-duration: 0.05s; |
381 } |
382 transition-timing-function: ease-in-out; |
382 @media (min-width:600px){ |
383 height: auto; |
383 .components-checkbox-control{ |
384 } |
384 --checkbox-input-size:20px; |
385 @media (prefers-reduced-motion: reduce) { |
385 } |
386 .components-button.is-link { |
386 } |
387 transition-duration: 0s; |
387 |
388 transition-delay: 0s; |
388 .components-checkbox-control__label{ |
389 } |
389 line-height:var(--checkbox-input-size); |
390 } |
390 } |
391 .components-button.is-link:focus { |
391 |
392 border-radius: 2px; |
392 .components-checkbox-control__input[type=checkbox]{ |
393 } |
393 appearance:none; |
394 .components-button.is-link.is-destructive { |
394 background:#fff; |
395 color: #cc1818; |
395 border:1px solid #1e1e1e; |
396 } |
396 border-radius:2px; |
397 .components-button.is-link.is-destructive:active:not(:disabled), .components-button.is-link.is-destructive:hover:not(:disabled) { |
397 box-shadow:0 0 0 #0000; |
398 color: #710d0d; |
398 clear:none; |
399 background: none; |
399 color:#1e1e1e; |
400 } |
400 cursor:pointer; |
401 .components-button.is-link.is-destructive:focus:not(:disabled) { |
401 display:inline-block; |
402 color: var(--wp-admin-theme-color); |
402 font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif; |
403 } |
403 font-size:16px; |
404 .components-button:not([aria-disabled=true]):active { |
404 height:var(--checkbox-input-size); |
405 color: inherit; |
405 line-height:normal; |
406 } |
406 line-height:0; |
407 .components-button:disabled, .components-button[aria-disabled=true] { |
407 margin:0 0 0 4px; |
408 cursor: default; |
408 outline:0; |
409 opacity: 0.3; |
409 padding:6px 8px; |
410 } |
410 padding:0 !important; |
411 .components-button.is-busy, .components-button.is-secondary.is-busy, .components-button.is-secondary.is-busy:disabled, .components-button.is-secondary.is-busy[aria-disabled=true] { |
411 text-align:center; |
412 animation: components-button__busy-animation 2500ms infinite linear; |
412 transition:box-shadow .1s linear; |
413 opacity: 1; |
413 transition:none; |
414 background-size: 100px 100%; |
414 transition:border-color .1s ease-in-out; |
415 /* stylelint-disable */ |
415 vertical-align:top; |
416 background-image: linear-gradient(45deg, #fafafa 33%, #e0e0e0 33%, #e0e0e0 70%, #fafafa 70%); |
416 width:var(--checkbox-input-size); |
417 /* stylelint-enable */ |
417 } |
418 } |
418 @media (min-width:600px){ |
419 .components-button.is-small { |
419 .components-checkbox-control__input[type=checkbox]{ |
420 height: 24px; |
420 font-size:13px; |
421 line-height: 22px; |
421 line-height:normal; |
422 padding: 0 8px; |
422 } |
423 font-size: 11px; |
423 } |
424 } |
424 .components-checkbox-control__input[type=checkbox]:focus{ |
425 .components-button.is-small.has-icon:not(.has-text) { |
425 border-color:var(--wp-admin-theme-color); |
426 padding: 0 8px; |
426 box-shadow:0 0 0 .5px var(--wp-admin-theme-color); |
427 width: 24px; |
427 } |
428 } |
428 .components-checkbox-control__input[type=checkbox]::-webkit-input-placeholder{ |
429 .components-button.has-icon { |
429 color:#1e1e1e9e; |
430 padding: 6px; |
430 } |
431 min-width: 36px; |
431 .components-checkbox-control__input[type=checkbox]::-moz-placeholder{ |
432 justify-content: center; |
432 color:#1e1e1e9e; |
433 } |
433 opacity:1; |
434 .components-button.has-icon .dashicon { |
434 } |
435 display: inline-block; |
435 .components-checkbox-control__input[type=checkbox]:-ms-input-placeholder{ |
436 flex: 0 0 auto; |
436 color:#1e1e1e9e; |
437 margin-right: 2px; |
437 } |
438 margin-left: 2px; |
438 .components-checkbox-control__input[type=checkbox]:focus{ |
439 } |
439 box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color); |
440 .components-button.has-icon.has-text { |
440 } |
441 justify-content: left; |
441 .components-checkbox-control__input[type=checkbox]:checked{ |
442 } |
442 background:var(--wp-admin-theme-color); |
443 .components-button.has-icon.has-text svg { |
443 border-color:var(--wp-admin-theme-color); |
444 margin-left: 8px; |
444 } |
445 } |
445 .components-checkbox-control__input[type=checkbox]:checked::-ms-check{ |
446 .components-button.has-icon.has-text .dashicon { |
446 opacity:0; |
447 margin-left: 10px; |
447 } |
448 } |
448 .components-checkbox-control__input[type=checkbox]:checked:before,.components-checkbox-control__input[type=checkbox][aria-checked=mixed]:before{ |
449 .components-button.is-pressed { |
449 color:#fff; |
450 color: #fff; |
450 margin:-3px -5px; |
451 background: #1e1e1e; |
451 } |
452 } |
452 @media (min-width:782px){ |
453 .components-button.is-pressed:focus:not(:disabled) { |
453 .components-checkbox-control__input[type=checkbox]:checked:before,.components-checkbox-control__input[type=checkbox][aria-checked=mixed]:before{ |
454 box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); |
454 margin:-4px -5px 0 0; |
455 outline: 2px solid transparent; |
455 } |
456 } |
456 } |
457 .components-button.is-pressed:hover:not(:disabled) { |
457 .components-checkbox-control__input[type=checkbox][aria-checked=mixed]{ |
458 color: #fff; |
458 background:var(--wp-admin-theme-color); |
459 background: #1e1e1e; |
459 border-color:var(--wp-admin-theme-color); |
460 } |
460 } |
461 .components-button svg { |
461 .components-checkbox-control__input[type=checkbox][aria-checked=mixed]:before{ |
462 fill: currentColor; |
462 content:"ï‘ "; |
463 outline: none; |
463 display:inline-block; |
464 } |
464 float:right; |
465 @media (forced-colors: active) { |
465 font:normal 30px/1 dashicons; |
466 .components-button svg { |
466 vertical-align:middle; |
467 fill: CanvasText; |
467 width:16px; |
468 } |
468 speak:none; |
469 } |
469 -webkit-font-smoothing:antialiased; |
470 .components-button .components-visually-hidden { |
470 -moz-osx-font-smoothing:grayscale; |
471 height: auto; |
471 } |
472 } |
472 @media (min-width:782px){ |
473 |
473 .components-checkbox-control__input[type=checkbox][aria-checked=mixed]:before{ |
474 @keyframes components-button__busy-animation { |
474 float:none; |
475 0% { |
475 font-size:21px; |
476 background-position: 200px 0; |
476 } |
477 } |
477 } |
478 } |
478 .components-checkbox-control__input[type=checkbox]:disabled,.components-checkbox-control__input[type=checkbox][aria-disabled=true]{ |
479 .components-checkbox-control__input[type=checkbox] { |
479 background:#f0f0f0; |
480 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; |
480 border-color:#ddd; |
481 padding: 6px 8px; |
481 cursor:default; |
482 box-shadow: 0 0 0 transparent; |
482 opacity:1; |
483 transition: box-shadow 0.1s linear; |
483 } |
484 border-radius: 2px; |
484 @media (prefers-reduced-motion:reduce){ |
485 border: 1px solid #757575; |
485 .components-checkbox-control__input[type=checkbox]{ |
486 /* Fonts smaller than 16px causes mobile safari to zoom. */ |
486 transition-delay:0s; |
487 font-size: 16px; |
487 transition-duration:0s; |
488 /* Override core line-height. To be reviewed. */ |
488 } |
489 line-height: normal; |
489 } |
490 border: 1px solid #1e1e1e; |
490 .components-checkbox-control__input[type=checkbox]:focus{ |
491 margin-left: 12px; |
491 box-shadow:0 0 0 var(--wp-admin-border-width-focus) #fff, 0 0 0 calc(var(--wp-admin-border-width-focus)*2) var(--wp-admin-theme-color); |
492 transition: none; |
492 outline:2px solid #0000; |
493 border-radius: 2px; |
493 outline-offset:2px; |
494 background: #fff; |
494 } |
495 color: #1e1e1e; |
495 .components-checkbox-control__input[type=checkbox]:checked,.components-checkbox-control__input[type=checkbox]:indeterminate{ |
496 clear: none; |
496 background:var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); |
497 cursor: pointer; |
497 border-color:var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); |
498 display: inline-block; |
498 } |
499 line-height: 0; |
499 .components-checkbox-control__input[type=checkbox]:checked::-ms-check,.components-checkbox-control__input[type=checkbox]:indeterminate::-ms-check{ |
500 margin: 0 0 0 4px; |
500 opacity:0; |
501 outline: 0; |
501 } |
502 padding: 0 !important; |
502 .components-checkbox-control__input[type=checkbox]:checked:before{ |
503 text-align: center; |
503 content:none; |
504 vertical-align: top; |
504 } |
505 width: 24px; |
505 |
506 height: 24px; |
506 .components-checkbox-control__input-container{ |
507 -webkit-appearance: none; |
507 aspect-ratio:1; |
508 appearance: none; |
508 display:inline-block; |
509 transition: 0.1s border-color ease-in-out; |
509 flex-shrink:0; |
510 } |
510 margin-left:12px; |
511 @media (prefers-reduced-motion: reduce) { |
511 position:relative; |
512 .components-checkbox-control__input[type=checkbox] { |
512 vertical-align:middle; |
513 transition-duration: 0s; |
513 width:var(--checkbox-input-size); |
514 transition-delay: 0s; |
514 } |
515 } |
515 |
516 } |
516 svg.components-checkbox-control__checked,svg.components-checkbox-control__indeterminate{ |
517 @media (min-width: 600px) { |
517 --checkmark-size:var(--checkbox-input-size); |
518 .components-checkbox-control__input[type=checkbox] { |
518 fill:#fff; |
519 font-size: 13px; |
519 cursor:pointer; |
520 /* Override core line-height. To be reviewed. */ |
520 height:var(--checkmark-size); |
521 line-height: normal; |
521 pointer-events:none; |
522 } |
522 position:absolute; |
523 } |
523 right:50%; |
524 .components-checkbox-control__input[type=checkbox]:focus { |
524 top:50%; |
525 border-color: var(--wp-admin-theme-color); |
525 transform:translate(50%, -50%); |
526 box-shadow: 0 0 0 1px var(--wp-admin-theme-color); |
526 -webkit-user-select:none; |
527 outline: 2px solid transparent; |
527 user-select:none; |
528 } |
528 width:var(--checkmark-size); |
529 .components-checkbox-control__input[type=checkbox]::-webkit-input-placeholder { |
529 } |
530 color: rgba(30, 30, 30, 0.62); |
530 @media (min-width:600px){ |
531 } |
531 svg.components-checkbox-control__checked,svg.components-checkbox-control__indeterminate{ |
532 .components-checkbox-control__input[type=checkbox]::-moz-placeholder { |
532 --checkmark-size:calc(var(--checkbox-input-size) + 4px); |
533 opacity: 1; |
533 } |
534 color: rgba(30, 30, 30, 0.62); |
534 } |
535 } |
535 |
536 .components-checkbox-control__input[type=checkbox]:-ms-input-placeholder { |
536 .components-checkbox-control__help{ |
537 color: rgba(30, 30, 30, 0.62); |
537 display:inline-block; |
538 } |
538 margin-inline-start:calc(var(--checkbox-input-size) + 12px); |
539 .components-checkbox-control__input[type=checkbox]:focus { |
539 } |
540 box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color); |
540 |
541 outline: 2px solid transparent; |
541 .components-circular-option-picker{ |
542 } |
542 display:inline-block; |
543 .components-checkbox-control__input[type=checkbox]:checked { |
543 min-width:188px; |
544 background: var(--wp-admin-theme-color); |
544 width:100%; |
545 border-color: var(--wp-admin-theme-color); |
545 } |
546 } |
546 .components-circular-option-picker .components-circular-option-picker__custom-clear-wrapper{ |
547 .components-checkbox-control__input[type=checkbox]:checked::-ms-check { |
547 display:flex; |
548 opacity: 0; |
548 justify-content:flex-end; |
549 } |
549 margin-top:12px; |
550 .components-checkbox-control__input[type=checkbox]:checked::before, .components-checkbox-control__input[type=checkbox][aria-checked=mixed]::before { |
550 } |
551 margin: -3px -5px; |
551 .components-circular-option-picker .components-circular-option-picker__swatches{ |
552 color: #fff; |
552 display:flex; |
553 } |
553 flex-wrap:wrap; |
554 @media (min-width: 782px) { |
554 gap:12px; |
555 .components-checkbox-control__input[type=checkbox]:checked::before, .components-checkbox-control__input[type=checkbox][aria-checked=mixed]::before { |
555 position:relative; |
556 margin: -4px -5px 0 0; |
556 z-index:1; |
557 } |
557 } |
558 } |
558 .components-circular-option-picker>:not(.components-circular-option-picker__swatches){ |
559 .components-checkbox-control__input[type=checkbox][aria-checked=mixed] { |
559 position:relative; |
560 background: var(--wp-admin-theme-color); |
560 z-index:0; |
561 border-color: var(--wp-admin-theme-color); |
561 } |
562 } |
562 |
563 .components-checkbox-control__input[type=checkbox][aria-checked=mixed]::before { |
563 .components-circular-option-picker__option-wrapper{ |
564 content: "ï‘ "; |
564 display:inline-block; |
565 float: right; |
565 height:28px; |
566 display: inline-block; |
566 transform:scale(1); |
567 vertical-align: middle; |
567 transition:transform .1s ease; |
568 width: 16px; |
568 vertical-align:top; |
569 /* stylelint-disable */ |
569 width:28px; |
570 font: normal 30px/1 dashicons; |
570 will-change:transform; |
571 /* stylelint-enable */ |
571 } |
572 speak: none; |
572 @media (prefers-reduced-motion:reduce){ |
573 -webkit-font-smoothing: antialiased; |
573 .components-circular-option-picker__option-wrapper{ |
574 -moz-osx-font-smoothing: grayscale; |
574 transition-delay:0s; |
575 } |
575 transition-duration:0s; |
576 @media (min-width: 782px) { |
576 } |
577 .components-checkbox-control__input[type=checkbox][aria-checked=mixed]::before { |
577 } |
578 float: none; |
578 .components-circular-option-picker__option-wrapper:hover{ |
579 font-size: 21px; |
579 transform:scale(1.2); |
580 } |
580 } |
581 } |
581 .components-circular-option-picker__option-wrapper>div{ |
582 @media (min-width: 600px) { |
582 height:100%; |
583 .components-checkbox-control__input[type=checkbox] { |
583 width:100%; |
584 height: 20px; |
584 } |
585 width: 20px; |
585 |
586 } |
586 .components-circular-option-picker__option-wrapper:before{ |
587 } |
587 background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' fill='none'%3E%3Cpath fill='%23555D65' d='M6 8V6H4v2zm2 0V6h2v2zm2 8H8v-2h2zm2 0v-2h2v2zm0 2v-2h-2v2H8v2h2v-2zm2 0v2h-2v-2zm2 0h-2v-2h2z'/%3E%3Cpath fill='%23555D65' fill-rule='evenodd' d='M18 18h2v-2h-2v-2h2v-2h-2v-2h2V8h-2v2h-2V8h-2v2h2v2h-2v2h2v2h2zm-2-4v-2h2v2z' clip-rule='evenodd'/%3E%3Cpath fill='%23555D65' d='M18 18v2h-2v-2z'/%3E%3Cpath fill='%23555D65' fill-rule='evenodd' d='M8 10V8H6v2H4v2h2v2H4v2h2v2H4v2h2v2H4v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2v2h-2V4h-2v2h-2V4h-2v2h-2V4h-2v2h2v2h-2v2zm0 2v-2H6v2zm2 0v-2h2v2zm0 2v-2H8v2H6v2h2v2H6v2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h-2v2h-2V6h-2v2h-2v2h2v2h-2v2z' clip-rule='evenodd'/%3E%3Cpath fill='%23555D65' fill-rule='evenodd' d='M4 0H2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2V2h2V0h-2v2h-2V0h-2v2h-2V0h-2v2h-2V0h-2v2h-2V0h-2v2H8V0H6v2H4zm0 4V2H2v2zm2 0V2h2v2zm0 2V4H4v2H2v2h2v2H2v2h2v2H2v2h2v2H2v2h2v2H2v2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2V2h-2v2h-2V2h-2v2h-2V2h-2v2h-2V2h-2v2H8v2z' clip-rule='evenodd'/%3E%3C/svg%3E"); |
588 @media (prefers-reduced-motion: reduce) { |
588 border-radius:50%; |
589 .components-checkbox-control__input[type=checkbox] { |
589 bottom:1px; |
590 transition-duration: 0s; |
590 content:""; |
591 transition-delay: 0s; |
591 left:1px; |
592 } |
592 position:absolute; |
593 } |
593 right:1px; |
594 .components-checkbox-control__input[type=checkbox]:focus { |
594 top:1px; |
595 box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color); |
595 z-index:-1; |
596 outline: 2px solid transparent; |
596 } |
597 } |
597 |
598 .components-checkbox-control__input[type=checkbox]:checked, .components-checkbox-control__input[type=checkbox]:indeterminate { |
598 .components-circular-option-picker__option{ |
599 background: var(--wp-admin-theme-color); |
599 background:#0000; |
600 border-color: var(--wp-admin-theme-color); |
600 border:none; |
601 } |
601 border-radius:50%; |
602 .components-checkbox-control__input[type=checkbox]:checked::-ms-check, .components-checkbox-control__input[type=checkbox]:indeterminate::-ms-check { |
602 box-shadow:inset 0 0 0 14px; |
603 opacity: 0; |
603 cursor:pointer; |
604 } |
604 display:inline-block; |
605 .components-checkbox-control__input[type=checkbox]:checked::before { |
605 height:100%; |
606 content: none; |
606 transition:box-shadow .1s ease; |
607 } |
607 vertical-align:top; |
608 |
608 width:100%; |
609 .components-checkbox-control__input-container { |
609 } |
610 position: relative; |
610 @media (prefers-reduced-motion:reduce){ |
611 display: inline-block; |
611 .components-circular-option-picker__option{ |
612 margin-left: 12px; |
612 transition-delay:0s; |
613 vertical-align: middle; |
613 transition-duration:0s; |
614 width: 24px; |
614 } |
615 height: 24px; |
615 } |
616 } |
616 .components-circular-option-picker__option:hover{ |
617 @media (min-width: 600px) { |
617 box-shadow:inset 0 0 0 14px !important; |
618 .components-checkbox-control__input-container { |
618 } |
619 width: 20px; |
619 .components-circular-option-picker__option[aria-pressed=true],.components-circular-option-picker__option[aria-selected=true]{ |
620 height: 20px; |
620 box-shadow:inset 0 0 0 4px; |
621 } |
621 overflow:visible; |
622 } |
622 position:relative; |
623 |
623 z-index:1; |
624 svg.components-checkbox-control__checked, |
624 } |
625 svg.components-checkbox-control__indeterminate { |
625 .components-circular-option-picker__option[aria-pressed=true]+svg,.components-circular-option-picker__option[aria-selected=true]+svg{ |
626 fill: #fff; |
626 border-radius:50%; |
627 cursor: pointer; |
627 pointer-events:none; |
628 position: absolute; |
628 position:absolute; |
629 right: 0; |
629 right:2px; |
630 top: 0; |
630 top:2px; |
631 width: 24px; |
631 z-index:2; |
632 height: 24px; |
632 } |
633 -webkit-user-select: none; |
633 .components-circular-option-picker__option:after{ |
634 user-select: none; |
634 border:1px solid #0000; |
635 pointer-events: none; |
635 border-radius:50%; |
636 } |
636 bottom:-1px; |
637 @media (min-width: 600px) { |
637 box-shadow:inset 0 0 0 1px #0003; |
638 svg.components-checkbox-control__checked, |
638 box-sizing:inherit; |
639 svg.components-checkbox-control__indeterminate { |
639 content:""; |
640 right: -2px; |
640 left:-1px; |
641 top: -2px; |
641 position:absolute; |
642 } |
642 right:-1px; |
643 } |
643 top:-1px; |
644 |
644 } |
645 .components-circular-option-picker { |
645 .components-circular-option-picker__option:focus:after{ |
646 display: inline-block; |
646 border:2px solid #757575; |
647 width: 100%; |
647 border-radius:50%; |
648 min-width: 188px; |
648 box-shadow:inset 0 0 0 2px #fff; |
649 } |
649 content:""; |
650 .components-circular-option-picker .components-circular-option-picker__custom-clear-wrapper { |
650 height:calc(100% + 4px); |
651 display: flex; |
651 position:absolute; |
652 justify-content: flex-end; |
652 right:50%; |
653 margin-top: 12px; |
653 top:50%; |
654 } |
654 transform:translate(50%, -50%); |
655 .components-circular-option-picker .components-circular-option-picker__swatches { |
655 width:calc(100% + 4px); |
656 display: flex; |
656 } |
657 flex-wrap: wrap; |
657 .components-circular-option-picker__option.components-button:focus{ |
658 gap: 12px; |
658 background-color:initial; |
659 } |
659 box-shadow:inset 0 0 0 14px; |
660 |
660 outline:none; |
661 .components-circular-option-picker__option-wrapper { |
661 } |
662 display: inline-block; |
662 |
663 height: 28px; |
663 .components-circular-option-picker__button-action .components-circular-option-picker__option{ |
664 width: 28px; |
664 background:#fff; |
665 vertical-align: top; |
665 color:#fff; |
666 transform: scale(1); |
666 } |
667 transition: 100ms transform ease; |
667 |
668 } |
668 .components-circular-option-picker__dropdown-link-action{ |
669 @media (prefers-reduced-motion: reduce) { |
669 margin-left:16px; |
670 .components-circular-option-picker__option-wrapper { |
670 } |
671 transition-duration: 0s; |
671 .components-circular-option-picker__dropdown-link-action .components-button{ |
672 transition-delay: 0s; |
672 line-height:22px; |
673 } |
673 } |
674 } |
674 |
675 .components-circular-option-picker__option-wrapper:hover { |
675 .components-palette-edit__popover-gradient-picker{ |
676 transform: scale(1.2); |
676 padding:8px; |
677 } |
677 width:260px; |
678 .components-circular-option-picker__option-wrapper > div { |
678 } |
679 height: 100%; |
679 |
680 width: 100%; |
680 .components-dropdown-menu__menu .components-palette-edit__menu-button{ |
681 } |
681 width:100%; |
682 |
682 } |
683 .components-circular-option-picker__option-wrapper::before { |
683 |
684 content: ""; |
684 .component-color-indicator{ |
685 position: absolute; |
685 background:#fff linear-gradient(45deg, #0000 48%, #ddd 0, #ddd 52%, #0000 0); |
686 top: 1px; |
686 border-radius:50%; |
687 right: 1px; |
687 box-shadow:inset 0 0 0 1px #0003; |
688 bottom: 1px; |
688 display:inline-block; |
689 left: 1px; |
689 height:20px; |
690 border-radius: 50%; |
690 padding:0; |
691 z-index: -1; |
691 width:20px; |
692 /* stylelint-disable-next-line function-url-quotes */ |
692 } |
693 background: url('data:image/svg+xml,%3Csvg width="28" height="28" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M6 8V6H4v2h2zM8 8V6h2v2H8zM10 16H8v-2h2v2zM12 16v-2h2v2h-2zM12 18v-2h-2v2H8v2h2v-2h2zM14 18v2h-2v-2h2zM16 18h-2v-2h2v2z" fill="%23555D65"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M18 18h2v-2h-2v-2h2v-2h-2v-2h2V8h-2v2h-2V8h-2v2h2v2h-2v2h2v2h2v2zm-2-4v-2h2v2h-2z" fill="%23555D65"/%3E%3Cpath d="M18 18v2h-2v-2h2z" fill="%23555D65"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M8 10V8H6v2H4v2h2v2H4v2h2v2H4v2h2v2H4v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2v2h-2V4h-2v2h-2V4h-2v2h-2V4h-2v2h2v2h-2v2H8zm0 2v-2H6v2h2zm2 0v-2h2v2h-2zm0 2v-2H8v2H6v2h2v2H6v2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h-2v2h-2V6h-2v2h-2v2h2v2h-2v2h-2z" fill="%23555D65"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M4 0H2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2V2h2V0h-2v2h-2V0h-2v2h-2V0h-2v2h-2V0h-2v2h-2V0h-2v2H8V0H6v2H4V0zm0 4V2H2v2h2zm2 0V2h2v2H6zm0 2V4H4v2H2v2h2v2H2v2h2v2H2v2h2v2H2v2h2v2H2v2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2V2h-2v2h-2V2h-2v2h-2V2h-2v2h-2V2h-2v2H8v2H6z" fill="%23555D65"/%3E%3C/svg%3E'); |
693 |
694 } |
694 .components-combobox-control{ |
695 |
695 width:100%; |
696 .components-circular-option-picker__option { |
696 } |
697 display: inline-block; |
697 |
698 vertical-align: top; |
698 input.components-combobox-control__input[type=text]{ |
699 height: 100%; |
699 border:none; |
700 width: 100%; |
700 box-shadow:none; |
701 border: none; |
701 font-family:inherit; |
702 border-radius: 50%; |
702 font-size:16px; |
703 background: transparent; |
703 line-height:inherit; |
704 box-shadow: inset 0 0 0 14px; |
704 margin:0; |
705 transition: 100ms box-shadow ease; |
705 min-height:auto; |
706 cursor: pointer; |
706 padding:2px; |
707 } |
707 width:100%; |
708 @media (prefers-reduced-motion: reduce) { |
708 } |
709 .components-circular-option-picker__option { |
709 @media (min-width:600px){ |
710 transition-duration: 0s; |
710 input.components-combobox-control__input[type=text]{ |
711 transition-delay: 0s; |
711 font-size:13px; |
712 } |
712 } |
713 } |
713 } |
714 .components-circular-option-picker__option:hover { |
714 input.components-combobox-control__input[type=text]:focus{ |
715 box-shadow: inset 0 0 0 14px !important; |
715 box-shadow:none; |
716 } |
716 outline:none; |
717 .components-circular-option-picker__option.is-pressed { |
717 } |
718 box-shadow: inset 0 0 0 4px; |
718 |
719 position: relative; |
719 .components-combobox-control__suggestions-container{ |
720 z-index: 1; |
720 align-items:flex-start; |
721 overflow: visible; |
721 border:1px solid #949494; |
722 } |
722 border-radius:2px; |
723 .components-circular-option-picker__option.is-pressed + svg { |
723 box-shadow:0 0 0 #0000; |
724 position: absolute; |
724 display:flex; |
725 right: 2px; |
725 flex-wrap:wrap; |
726 top: 2px; |
726 font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif; |
727 border-radius: 50%; |
727 font-size:16px; |
728 z-index: 2; |
728 line-height:normal; |
729 pointer-events: none; |
729 padding:0; |
730 } |
730 transition:box-shadow .1s linear; |
731 .components-circular-option-picker__option::after { |
731 width:100%; |
732 content: ""; |
732 } |
733 position: absolute; |
733 @media (prefers-reduced-motion:reduce){ |
734 top: -1px; |
734 .components-combobox-control__suggestions-container{ |
735 right: -1px; |
735 transition-delay:0s; |
736 bottom: -1px; |
736 transition-duration:0s; |
737 left: -1px; |
737 } |
738 border-radius: 50%; |
738 } |
739 box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); |
739 @media (min-width:600px){ |
740 border: 1px solid transparent; |
740 .components-combobox-control__suggestions-container{ |
741 } |
741 font-size:13px; |
742 .components-circular-option-picker__option:focus::after { |
742 line-height:normal; |
743 content: ""; |
743 } |
744 border: 2px solid #757575; |
744 } |
745 width: 32px; |
745 .components-combobox-control__suggestions-container:focus{ |
746 height: 32px; |
746 border-color:var(--wp-admin-theme-color); |
747 position: absolute; |
747 box-shadow:0 0 0 .5px var(--wp-admin-theme-color); |
748 top: -2px; |
748 outline:2px solid #0000; |
749 right: -2px; |
749 } |
750 border-radius: 50%; |
750 .components-combobox-control__suggestions-container::-webkit-input-placeholder{ |
751 box-shadow: inset 0 0 0 2px #fff; |
751 color:#1e1e1e9e; |
752 } |
752 } |
753 .components-circular-option-picker__option.components-button:focus { |
753 .components-combobox-control__suggestions-container::-moz-placeholder{ |
754 background-color: transparent; |
754 color:#1e1e1e9e; |
755 box-shadow: inset 0 0 0 14px; |
755 opacity:1; |
756 outline: none; |
756 } |
757 } |
757 .components-combobox-control__suggestions-container:-ms-input-placeholder{ |
758 |
758 color:#1e1e1e9e; |
759 .components-circular-option-picker__button-action .components-circular-option-picker__option { |
759 } |
760 color: #fff; |
760 .components-combobox-control__suggestions-container:focus-within{ |
761 background: #fff; |
761 border-color:var(--wp-admin-theme-color); |
762 } |
762 box-shadow:0 0 0 .5px var(--wp-admin-theme-color); |
763 |
763 outline:2px solid #0000; |
764 .components-circular-option-picker__dropdown-link-action { |
764 } |
765 margin-left: 16px; |
765 |
766 } |
766 .components-combobox-control__reset.components-button{ |
767 .components-circular-option-picker__dropdown-link-action .components-button { |
767 display:flex; |
768 line-height: 22px; |
768 height:16px; |
769 } |
769 min-width:16px; |
770 |
770 padding:0; |
771 @media (min-width: 782px) { |
771 } |
772 .components-palette-edit__popover.components-popover .components-popover__content.components-popover__content.components-popover__content { |
772 |
773 margin-left: 156px; |
773 .components-color-palette__custom-color-wrapper{ |
774 margin-top: -49px; |
774 position:relative; |
775 } |
775 z-index:0; |
776 } |
776 } |
777 .components-palette-edit__popover .components-custom-gradient-picker__gradient-bar { |
777 |
778 margin-top: 0; |
778 .components-color-palette__custom-color-button{ |
779 } |
779 background:none; |
780 .components-palette-edit__popover .components-custom-gradient-picker__ui-line { |
780 border:none; |
781 margin-bottom: 0; |
781 border-radius:2px 2px 0 0; |
782 } |
782 box-shadow:inset 0 0 0 1px #0003; |
783 .components-palette-edit__popover .components-custom-gradient-picker { |
783 box-sizing:border-box; |
784 width: 280px; |
784 cursor:pointer; |
785 padding: 8px; |
785 height:64px; |
786 } |
786 outline:1px solid #0000; |
787 |
787 position:relative; |
788 .components-dropdown-menu__menu .components-palette-edit__menu-button { |
788 width:100%; |
789 width: 100%; |
789 } |
790 } |
790 .components-color-palette__custom-color-button:focus{ |
791 |
791 box-shadow:inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); |
792 .component-color-indicator { |
792 outline-width:2px; |
793 width: 20px; |
793 } |
794 height: 20px; |
794 .components-color-palette__custom-color-button:after{ |
795 box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); |
795 background-image:repeating-linear-gradient(45deg, #e0e0e0 25%, #0000 0, #0000 75%, #e0e0e0 0, #e0e0e0), repeating-linear-gradient(45deg, #e0e0e0 25%, #0000 0, #0000 75%, #e0e0e0 0, #e0e0e0); |
796 border-radius: 50%; |
796 background-position:0 0, 24px 24px; |
797 display: inline-block; |
797 background-size:48px 48px; |
798 padding: 0; |
798 content:""; |
799 } |
799 height:100%; |
800 |
800 position:absolute; |
801 .components-combobox-control { |
801 right:0; |
802 width: 100%; |
802 top:0; |
803 } |
803 width:100%; |
804 |
804 z-index:-1; |
805 input.components-combobox-control__input[type=text] { |
805 } |
806 width: 100%; |
806 |
807 border: none; |
807 .components-color-palette__custom-color-text-wrapper{ |
808 box-shadow: none; |
808 border-radius:0 0 2px 2px; |
809 font-family: inherit; |
809 box-shadow:inset 0 -1px 0 0 #0003,inset -1px 0 0 0 #0003,inset 1px 0 0 0 #0003; |
810 font-size: 16px; |
810 font-size:13px; |
811 padding: 2px; |
811 padding:12px 16px; |
812 margin: 0; |
812 position:relative; |
813 line-height: inherit; |
813 } |
814 min-height: auto; |
814 |
815 } |
815 .components-color-palette__custom-color-name{ |
816 @media (min-width: 600px) { |
816 color:var(--wp-components-color-foreground, #1e1e1e); |
817 input.components-combobox-control__input[type=text] { |
817 margin:0 1px; |
818 font-size: 13px; |
818 } |
819 } |
819 |
820 } |
820 .components-color-palette__custom-color-value{ |
821 input.components-combobox-control__input[type=text]:focus { |
821 color:#757575; |
822 outline: none; |
822 } |
823 box-shadow: none; |
823 .components-color-palette__custom-color-value--is-hex{ |
824 } |
824 text-transform:uppercase; |
825 |
825 } |
826 .components-combobox-control__suggestions-container { |
826 .components-color-palette__custom-color-value:empty:after{ |
827 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; |
827 content:"​"; |
828 padding: 6px 8px; |
828 visibility:hidden; |
829 box-shadow: 0 0 0 transparent; |
829 } |
830 transition: box-shadow 0.1s linear; |
830 |
831 border-radius: 2px; |
831 .components-custom-gradient-picker__gradient-bar{ |
832 border: 1px solid #757575; |
832 border-radius:2px; |
833 /* Fonts smaller than 16px causes mobile safari to zoom. */ |
833 height:48px; |
834 font-size: 16px; |
834 position:relative; |
835 /* Override core line-height. To be reviewed. */ |
835 width:100%; |
836 line-height: normal; |
836 z-index:1; |
837 display: flex; |
837 } |
838 flex-wrap: wrap; |
838 .components-custom-gradient-picker__gradient-bar.has-gradient{ |
839 align-items: flex-start; |
839 background-image:repeating-linear-gradient(45deg, #e0e0e0 25%, #0000 0, #0000 75%, #e0e0e0 0, #e0e0e0), repeating-linear-gradient(45deg, #e0e0e0 25%, #0000 0, #0000 75%, #e0e0e0 0, #e0e0e0); |
840 width: 100%; |
840 background-position:0 0, 12px 12px; |
841 margin: 0 0 8px 0; |
841 background-size:24px 24px; |
842 padding: 4px; |
842 } |
843 } |
843 .components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__gradient-bar-background{ |
844 @media (prefers-reduced-motion: reduce) { |
844 inset:0; |
845 .components-combobox-control__suggestions-container { |
845 position:absolute; |
846 transition-duration: 0s; |
846 } |
847 transition-delay: 0s; |
847 .components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__markers-container{ |
848 } |
848 margin-left:auto; |
849 } |
849 margin-right:auto; |
850 @media (min-width: 600px) { |
850 position:relative; |
851 .components-combobox-control__suggestions-container { |
851 width:calc(100% - 48px); |
852 font-size: 13px; |
852 } |
853 /* Override core line-height. To be reviewed. */ |
853 .components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-dropdown{ |
854 line-height: normal; |
854 display:flex; |
855 } |
855 height:16px; |
856 } |
856 position:absolute; |
857 .components-combobox-control__suggestions-container:focus { |
857 top:16px; |
858 border-color: var(--wp-admin-theme-color); |
858 width:16px; |
859 box-shadow: 0 0 0 1px var(--wp-admin-theme-color); |
859 } |
860 outline: 2px solid transparent; |
860 .components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__insert-point-dropdown{ |
861 } |
861 background:#fff; |
862 .components-combobox-control__suggestions-container::-webkit-input-placeholder { |
862 border-radius:50%; |
863 color: rgba(30, 30, 30, 0.62); |
863 color:#1e1e1e; |
864 } |
864 height:inherit; |
865 .components-combobox-control__suggestions-container::-moz-placeholder { |
865 min-width:16px; |
866 opacity: 1; |
866 padding:2px; |
867 color: rgba(30, 30, 30, 0.62); |
867 position:relative; |
868 } |
868 width:inherit; |
869 .components-combobox-control__suggestions-container:-ms-input-placeholder { |
869 } |
870 color: rgba(30, 30, 30, 0.62); |
870 .components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__insert-point-dropdown svg{ |
871 } |
871 height:100%; |
872 .components-combobox-control__suggestions-container:focus-within { |
872 width:100%; |
873 border-color: var(--wp-admin-theme-color); |
873 } |
874 box-shadow: 0 0 0 1px var(--wp-admin-theme-color); |
874 .components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-button{ |
875 outline: 2px solid transparent; |
875 border-radius:50%; |
876 } |
876 box-shadow:inset 0 0 0 var(--wp-admin-border-width-focus) #fff, 0 0 2px 0 #00000040; |
877 |
877 height:inherit; |
878 .components-combobox-control__reset.components-button { |
878 outline:2px solid #0000; |
879 display: flex; |
879 padding:0; |
880 height: 16px; |
880 width:inherit; |
881 min-width: 16px; |
881 } |
882 padding: 0; |
882 .components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-button.is-active,.components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-button:focus{ |
883 } |
883 box-shadow:inset 0 0 0 calc(var(--wp-admin-border-width-focus)*2) #fff, 0 0 2px 0 #00000040; |
884 |
884 outline:1.5px solid #0000; |
885 .components-color-list-picker, |
885 } |
886 .components-color-list-picker__swatch-button { |
886 |
887 width: 100%; |
887 .components-custom-gradient-picker__remove-control-point-wrapper{ |
888 } |
888 padding-bottom:8px; |
889 |
889 } |
890 .components-color-list-picker__color-picker { |
890 |
891 margin: 8px 0; |
891 .components-custom-gradient-picker__inserter{ |
892 } |
892 direction:ltr; |
893 |
893 } |
894 .components-color-palette__custom-color { |
894 |
895 position: relative; |
895 .components-custom-gradient-picker__liner-gradient-indicator{ |
896 border: none; |
896 display:inline-block; |
897 background: none; |
897 flex:0 auto; |
898 border-radius: 2px; |
898 height:20px; |
899 height: 64px; |
899 width:20px; |
900 padding: 12px; |
900 } |
901 font-family: inherit; |
901 |
902 width: 100%; |
902 .components-custom-gradient-picker .components-custom-gradient-picker__toolbar{ |
903 background-image: repeating-linear-gradient(-45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0), repeating-linear-gradient(-45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0); |
903 border:none; |
904 background-position: 100% 0, 25px 25px; |
904 } |
905 background-size: calc(2 * 25px) calc(2 * 25px); |
905 .components-custom-gradient-picker .components-custom-gradient-picker__toolbar>div+div{ |
906 box-sizing: border-box; |
906 margin-right:1px; |
907 color: #fff; |
907 } |
908 cursor: pointer; |
908 .components-custom-gradient-picker .components-custom-gradient-picker__toolbar button.is-pressed>svg{ |
909 box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); |
909 background:#fff; |
910 outline: 1px solid transparent; |
910 border:1px solid #949494; |
911 } |
911 border-radius:2px; |
912 .components-color-palette__custom-color:focus { |
912 } |
913 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); |
913 |
914 outline-width: 2px; |
914 .components-custom-gradient-picker__ui-line{ |
915 } |
915 position:relative; |
916 |
916 z-index:0; |
917 .components-dropdown__content.components-color-palette__custom-color-dropdown-content .components-popover__content { |
917 } |
918 overflow: visible; |
918 |
919 box-shadow: 0 4px 4px rgba(0, 0, 0, 0.05); |
919 .components-custom-select-control{ |
920 border: none; |
920 font-size:13px; |
921 border-radius: 2px; |
921 position:relative; |
922 max-height: -moz-fit-content !important; |
922 } |
923 max-height: fit-content !important; |
923 |
924 } |
924 .components-custom-select-control__button{ |
925 .components-dropdown__content.components-color-palette__custom-color-dropdown-content .components-popover__content > div { |
925 outline:0; |
926 padding: 0; |
926 position:relative; |
927 } |
927 text-align:right; |
928 .components-dropdown__content.components-color-palette__custom-color-dropdown-content .components-popover__content .react-colorful__saturation { |
928 } |
929 border-top-left-radius: 2px; |
929 |
930 border-top-right-radius: 2px; |
930 .components-custom-select-control__hint{ |
931 } |
931 color:#949494; |
932 |
932 margin-right:10px; |
933 @media (min-width: 782px) { |
933 } |
934 .components-dropdown__content.components-color-palette__custom-color-dropdown-content.is-rendered-in-sidebar .components-popover__content.components-popover__content { |
934 |
935 margin-left: 156px; |
935 .components-custom-select-control__menu-wrapper{ |
936 } |
936 bottom:0; |
937 .components-dropdown__content.components-color-palette__custom-color-dropdown-content.is-rendered-in-sidebar.is-from-top .components-popover__content { |
937 min-width:100%; |
938 margin-top: -60px; |
938 position:absolute; |
939 } |
939 } |
940 .components-dropdown__content.components-color-palette__custom-color-dropdown-content.is-rendered-in-sidebar.is-from-bottom .components-popover__content { |
940 |
941 margin-bottom: -60px; |
941 .components-custom-select-control__menu{ |
942 } |
942 background-color:#fff; |
943 } |
943 border:1px solid #1e1e1e; |
944 .components-color-palette__custom-color-name { |
944 border-radius:2px; |
945 text-align: right; |
945 max-height:400px; |
946 } |
946 min-width:100%; |
947 |
947 outline:none; |
948 .components-color-palette__custom-color-value { |
948 overflow:auto; |
949 margin-right: 16px; |
949 padding:0; |
950 text-transform: uppercase; |
950 position:absolute; |
951 } |
951 transition:none; |
952 |
952 z-index:1000000; |
953 .components-custom-gradient-picker__gradient-bar:not(.has-gradient) { |
953 } |
954 opacity: 0.4; |
954 .components-custom-select-control__menu[aria-hidden=true]{ |
955 } |
955 display:none; |
956 |
956 } |
957 .components-custom-gradient-picker__gradient-bar { |
957 |
958 border-radius: 2px; |
958 .components-custom-select-control__item{ |
959 margin-top: 12px; |
959 align-items:center; |
960 width: 100%; |
960 cursor:default; |
961 height: 48px; |
961 display:grid; |
962 margin-bottom: 20px; |
962 grid-template-columns:auto auto; |
963 padding-right: 16px; |
963 line-height:28px; |
964 } |
964 list-style-type:none; |
965 .components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__markers-container { |
965 padding:8px 16px; |
966 position: relative; |
966 } |
967 width: calc(100% - 32px); |
967 .components-custom-select-control__item:not(.is-next-40px-default-size){ |
968 margin-right: auto; |
968 padding:8px; |
969 margin-left: auto; |
969 } |
970 } |
970 .components-custom-select-control__item.has-hint{ |
971 .components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__insert-point { |
971 grid-template-columns:auto auto 30px; |
972 border-radius: 50%; |
972 } |
973 background: #fff; |
973 .components-custom-select-control__item.is-highlighted{ |
974 padding: 2px; |
974 background:#ddd; |
975 top: 16px; |
975 } |
976 min-width: 16px; |
976 .components-custom-select-control__item .components-custom-select-control__item-hint{ |
977 width: 16px; |
977 color:#949494; |
978 height: 16px; |
978 padding-left:4px; |
979 position: relative; |
979 text-align:left; |
980 color: #1e1e1e; |
980 } |
981 } |
981 .components-custom-select-control__item .components-custom-select-control__item-icon{ |
982 .components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__insert-point svg { |
982 margin-right:auto; |
983 height: 100%; |
983 } |
984 width: 100%; |
984 .components-custom-select-control__item:last-child{ |
985 } |
985 margin-bottom:0; |
986 .components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-button { |
986 } |
987 border-radius: 50%; |
987 |
988 height: 16px; |
988 .block-editor-dimension-control .components-base-control__field{ |
989 width: 16px; |
989 align-items:center; |
990 padding: 0; |
990 display:flex; |
991 position: absolute; |
991 } |
992 top: 16px; |
992 .block-editor-dimension-control .components-base-control__label{ |
993 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #fff, 0 0 2px 0 rgba(0, 0, 0, 0.25); |
993 align-items:center; |
994 outline: 2px solid transparent; |
994 display:flex; |
995 } |
995 margin-bottom:0; |
996 .components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-button:focus, .components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-button.is-active { |
996 margin-left:1em; |
997 box-shadow: inset 0 0 0 calc(var(--wp-admin-border-width-focus) * 2) #fff, 0 0 2px 0 rgba(0, 0, 0, 0.25); |
997 } |
998 outline: 4px solid transparent; |
998 .block-editor-dimension-control .components-base-control__label .dashicon{ |
999 } |
999 margin-left:.5em; |
1000 |
1000 } |
1001 .components-custom-gradient-picker__color-picker-popover .components-custom-gradient-picker__remove-control-point { |
1001 .block-editor-dimension-control.is-manual .components-base-control__label{ |
1002 margin-right: auto; |
1002 width:10em; |
1003 margin-left: auto; |
1003 } |
1004 display: block; |
1004 |
1005 margin-bottom: 8px; |
1005 body.is-dragging-components-draggable{ |
1006 } |
1006 cursor:move; |
1007 |
1007 cursor:grabbing !important; |
1008 .components-custom-gradient-picker__inserter { |
1008 } |
1009 direction: ltr; |
1009 |
1010 width: 100%; |
1010 .components-draggable__invisible-drag-image{ |
1011 } |
1011 height:50px; |
1012 |
1012 position:fixed; |
1013 .components-custom-gradient-picker__liner-gradient-indicator { |
1013 right:-1000px; |
1014 display: inline-block; |
1014 width:50px; |
1015 flex: 0 auto; |
1015 } |
1016 width: 20px; |
1016 |
1017 height: 20px; |
1017 .components-draggable__clone{ |
1018 } |
1018 background:#0000; |
1019 |
1019 padding:0; |
1020 .components-custom-gradient-picker .components-custom-gradient-picker__ui-line { |
1020 pointer-events:none; |
1021 margin-bottom: 16px; |
1021 position:fixed; |
1022 } |
1022 z-index:1000000000; |
1023 .components-custom-gradient-picker .components-custom-gradient-picker__ui-line .components-base-control.components-angle-picker, |
1023 } |
1024 .components-custom-gradient-picker .components-custom-gradient-picker__ui-line .components-base-control.components-custom-gradient-picker__type-picker { |
1024 |
1025 margin-bottom: 0; |
1025 .components-drop-zone{ |
1026 } |
1026 border-radius:2px; |
1027 |
1027 bottom:0; |
1028 .components-custom-gradient-picker .components-custom-gradient-picker__toolbar { |
1028 left:0; |
1029 border: none; |
1029 opacity:0; |
1030 } |
1030 position:absolute; |
1031 .components-custom-gradient-picker .components-custom-gradient-picker__toolbar > div + div { |
1031 right:0; |
1032 margin-right: 1px; |
1032 top:0; |
1033 } |
1033 visibility:hidden; |
1034 .components-custom-gradient-picker .components-custom-gradient-picker__toolbar button.is-pressed > svg { |
1034 z-index:40; |
1035 background: #fff; |
1035 } |
1036 border: 1px solid #949494; |
1036 .components-drop-zone.is-active{ |
1037 border-radius: 2px; |
1037 opacity:1; |
1038 } |
1038 visibility:visible; |
1039 |
1039 } |
1040 .components-custom-gradient-picker .components-input-control__label { |
1040 |
1041 line-height: 1; |
1041 .components-drop-zone__content{ |
1042 } |
1042 align-items:center; |
1043 .components-custom-gradient-picker label { |
1043 background-color:var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); |
1044 text-transform: uppercase; |
1044 bottom:0; |
1045 font-size: 11px; |
1045 color:#fff; |
1046 font-weight: 500; |
1046 display:flex; |
1047 } |
1047 height:100%; |
1048 |
1048 justify-content:center; |
1049 .components-custom-select-control { |
1049 left:0; |
1050 position: relative; |
1050 position:absolute; |
1051 } |
1051 right:0; |
1052 |
1052 text-align:center; |
1053 .components-custom-select-control__label { |
1053 top:0; |
1054 display: block; |
1054 width:100%; |
1055 margin-bottom: 8px; |
1055 z-index:50; |
1056 } |
1056 } |
1057 |
1057 |
1058 .components-custom-select-control__button { |
1058 .components-drop-zone__content-icon,.components-drop-zone__content-text{ |
1059 border: 1px solid #757575; |
1059 display:block; |
1060 border-radius: 2px; |
1060 } |
1061 min-width: 130px; |
1061 |
1062 position: relative; |
1062 .components-drop-zone__content-icon{ |
1063 text-align: right; |
1063 line-height:0; |
1064 } |
1064 margin:0 auto 8px; |
1065 .components-custom-select-control__button:not(.is-next-36px-default-size) { |
1065 fill:currentColor; |
1066 min-height: 30px; |
1066 pointer-events:none; |
1067 } |
1067 } |
1068 .components-custom-select-control__button.components-custom-select-control__button { |
1068 |
1069 padding-right: 16px; |
1069 .components-drop-zone__content-text{ |
1070 padding-left: 32px; |
1070 font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif; |
1071 } |
1071 font-size:13px; |
1072 .components-custom-select-control__button.components-custom-select-control__button:not(.is-next-36px-default-size) { |
1072 } |
1073 padding-right: 8px; |
1073 |
1074 padding-left: 24px; |
1074 .components-dropdown{ |
1075 } |
1075 display:inline-block; |
1076 .components-custom-select-control__button:focus:not(:disabled) { |
1076 } |
1077 border-color: var(--wp-admin-theme-color); |
1077 |
1078 box-shadow: 0 0 0 1px var(--wp-admin-theme-color); |
1078 .components-dropdown__content .components-popover__content{ |
1079 } |
1079 padding:8px; |
1080 .components-custom-select-control__button .components-custom-select-control__button-icon { |
1080 } |
1081 height: 100%; |
1081 .components-dropdown__content [role=menuitem]{ |
1082 padding: 0; |
1082 white-space:nowrap; |
1083 position: absolute; |
1083 } |
1084 left: 8px; |
1084 .components-dropdown__content .components-menu-group{ |
1085 top: 0; |
1085 margin:0 -8px; |
1086 } |
1086 padding:8px; |
1087 .components-custom-select-control__button .components-custom-select-control__button-icon:not(.is-next-36px-default-size) { |
1087 } |
1088 left: 4px; |
1088 .components-dropdown__content .components-menu-group:first-child{ |
1089 } |
1089 margin-top:-8px; |
1090 |
1090 } |
1091 .components-custom-select-control__menu { |
1091 .components-dropdown__content .components-menu-group:last-child{ |
1092 border: 1px solid #1e1e1e; |
1092 margin-bottom:-8px; |
1093 background-color: #fff; |
1093 } |
1094 border-radius: 2px; |
1094 .components-dropdown__content .components-menu-group+.components-menu-group{ |
1095 outline: none; |
1095 border-top:1px solid #ccc; |
1096 transition: none; |
1096 margin-top:0; |
1097 max-height: 400px; |
1097 padding:8px; |
1098 min-width: 100%; |
1098 } |
1099 overflow: auto; |
1099 .components-dropdown__content.is-alternate .components-menu-group+.components-menu-group{ |
1100 padding: 0; |
1100 border-color:#1e1e1e; |
1101 position: absolute; |
1101 } |
1102 z-index: 1000000; |
1102 |
1103 } |
1103 .components-dropdown-menu__toggle{ |
1104 .components-custom-select-control__menu[aria-hidden=true] { |
1104 vertical-align:top; |
1105 display: none; |
1105 } |
1106 } |
1106 |
1107 |
1107 .components-dropdown-menu__menu{ |
1108 .components-custom-select-control__item { |
1108 font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif; |
1109 align-items: center; |
1109 font-size:13px; |
1110 display: grid; |
1110 line-height:1.4; |
1111 grid-template-columns: auto auto; |
1111 width:100%; |
1112 list-style-type: none; |
1112 } |
1113 padding: 8px 16px; |
1113 .components-dropdown-menu__menu .components-dropdown-menu__menu-item,.components-dropdown-menu__menu .components-menu-item{ |
1114 cursor: default; |
1114 cursor:pointer; |
1115 line-height: 28px; |
1115 outline:none; |
1116 } |
1116 padding:6px; |
1117 .components-custom-select-control__item:not(.is-next-36px-default-size) { |
1117 white-space:nowrap; |
1118 padding: 8px; |
1118 width:100%; |
1119 } |
1119 } |
1120 .components-custom-select-control__item.has-hint { |
1120 .components-dropdown-menu__menu .components-dropdown-menu__menu-item.has-separator,.components-dropdown-menu__menu .components-menu-item.has-separator{ |
1121 grid-template-columns: auto auto 30px; |
1121 margin-top:6px; |
1122 } |
1122 overflow:visible; |
1123 .components-custom-select-control__item.is-highlighted { |
1123 position:relative; |
1124 background: #ddd; |
1124 } |
1125 } |
1125 .components-dropdown-menu__menu .components-dropdown-menu__menu-item.has-separator:before,.components-dropdown-menu__menu .components-menu-item.has-separator:before{ |
1126 .components-custom-select-control__item .components-custom-select-control__item-hint { |
1126 background-color:#ddd; |
1127 color: #757575; |
1127 box-sizing:initial; |
1128 text-align: left; |
1128 content:""; |
1129 padding-left: 4px; |
1129 display:block; |
1130 } |
1130 height:1px; |
1131 .components-custom-select-control__item .components-custom-select-control__item-icon { |
1131 left:0; |
1132 margin-right: auto; |
1132 position:absolute; |
1133 } |
1133 right:0; |
1134 .components-custom-select-control__item:last-child { |
1134 top:-3px; |
1135 margin-bottom: 0; |
1135 } |
1136 } |
1136 .components-dropdown-menu__menu .components-dropdown-menu__menu-item.is-active .dashicon,.components-dropdown-menu__menu .components-dropdown-menu__menu-item.is-active svg,.components-dropdown-menu__menu .components-menu-item.is-active .dashicon,.components-dropdown-menu__menu .components-menu-item.is-active svg{ |
1137 |
1137 background:#1e1e1e; |
1138 /** |
1138 border-radius:1px; |
1139 * Parts of this source were derived and modified from react-dates, |
1139 box-shadow:0 0 0 1px #1e1e1e; |
1140 * released under the MIT license. |
1140 color:#fff; |
1141 * |
1141 } |
1142 * https://github.com/airbnb/react-dates |
1142 .components-dropdown-menu__menu .components-dropdown-menu__menu-item.is-icon-only,.components-dropdown-menu__menu .components-menu-item.is-icon-only{ |
1143 * |
1143 width:auto; |
1144 * The MIT License (MIT) |
1144 } |
1145 * |
1145 .components-dropdown-menu__menu .components-menu-item__button,.components-dropdown-menu__menu .components-menu-item__button.components-button{ |
1146 * Copyright (c) 2016 Airbnb |
1146 height:auto; |
1147 * |
1147 min-height:36px; |
1148 * Permission is hereby granted, free of charge, to any person obtaining a copy |
1148 padding-left:8px; |
1149 * of this software and associated documentation files (the "Software"), to deal |
1149 padding-right:8px; |
1150 * in the Software without restriction, including without limitation the rights |
1150 text-align:right; |
1151 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
1151 } |
1152 * copies of the Software, and to permit persons to whom the Software is |
1152 |
1153 * furnished to do so, subject to the following conditions: |
1153 .components-duotone-picker__color-indicator:before{ |
1154 * |
1154 background:#0000; |
1155 * The above copyright notice and this permission notice shall be included in all |
1155 } |
1156 * copies or substantial portions of the Software. |
1156 .components-duotone-picker__color-indicator>.components-button,.components-duotone-picker__color-indicator>.components-button.is-pressed:hover:not(:disabled){ |
1157 * |
1157 background:linear-gradient(45deg, #0000 48%, #ddd 0, #ddd 52%, #0000 0); |
1158 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
1158 color:#0000; |
1159 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
1159 } |
1160 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
1160 .components-duotone-picker__color-indicator>.components-button:not([aria-disabled=true]):active{ |
1161 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
1161 color:#0000; |
1162 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
1162 } |
1163 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE |
1163 |
1164 * SOFTWARE. |
1164 .components-color-list-picker,.components-color-list-picker__swatch-button{ |
1165 */ |
1165 width:100%; |
1166 .PresetDateRangePicker_panel { |
1166 } |
1167 padding: 0 22px 11px; |
1167 |
1168 } |
1168 .components-color-list-picker__color-picker{ |
1169 |
1169 margin:8px 0; |
1170 .PresetDateRangePicker_button { |
1170 } |
1171 position: relative; |
1171 |
1172 height: 100%; |
1172 .components-color-list-picker__swatch-button{ |
1173 text-align: center; |
1173 padding:6px; |
1174 background: 0 0; |
1174 } |
1175 border: 2px solid #00a699; |
1175 |
1176 color: #00a699; |
1176 .components-color-list-picker__swatch-color{ |
1177 padding: 4px 12px; |
1177 margin:2px; |
1178 margin-right: 8px; |
1178 } |
1179 font: inherit; |
1179 |
1180 font-weight: 700; |
1180 .components-external-link{ |
1181 line-height: normal; |
1181 text-decoration:none; |
1182 overflow: visible; |
1182 } |
1183 box-sizing: border-box; |
1183 |
1184 cursor: pointer; |
1184 .components-external-link__contents{ |
1185 } |
1185 text-decoration:underline; |
1186 |
1186 } |
1187 .PresetDateRangePicker_button:active { |
1187 |
1188 outline: 0; |
1188 .components-external-link__icon{ |
1189 } |
1189 font-weight:400; |
1190 |
1190 margin-right:.5ch; |
1191 .PresetDateRangePicker_button__selected { |
1191 } |
1192 color: #fff; |
1192 |
1193 background: #00a699; |
1193 .components-form-toggle{ |
1194 } |
1194 display:inline-block; |
1195 |
1195 position:relative; |
1196 .SingleDatePickerInput { |
1196 } |
1197 display: inline-block; |
1197 .components-form-toggle .components-form-toggle__track{ |
1198 background-color: #fff; |
1198 background-color:#fff; |
1199 } |
1199 border:1px solid #1e1e1e; |
1200 |
1200 border-radius:9px; |
1201 .SingleDatePickerInput__withBorder { |
1201 box-sizing:border-box; |
1202 border-radius: 2px; |
1202 content:""; |
1203 border: 1px solid #dbdbdb; |
1203 display:inline-block; |
1204 } |
1204 height:18px; |
1205 |
1205 overflow:hidden; |
1206 .SingleDatePickerInput__rtl { |
1206 position:relative; |
1207 direction: rtl; |
1207 transition:background-color .2s ease,border-color .2s ease; |
1208 } |
1208 vertical-align:top; |
1209 |
1209 width:36px; |
1210 .SingleDatePickerInput__disabled { |
1210 } |
1211 background-color: #f2f2f2; |
1211 @media (prefers-reduced-motion:reduce){ |
1212 } |
1212 .components-form-toggle .components-form-toggle__track{ |
1213 |
1213 transition-delay:0s; |
1214 .SingleDatePickerInput__block { |
1214 transition-duration:0s; |
1215 display: block; |
1215 } |
1216 } |
1216 } |
1217 |
1217 .components-form-toggle .components-form-toggle__track:after{ |
1218 .SingleDatePickerInput__showClearDate { |
1218 border-top:18px solid #0000; |
1219 padding-right: 30px; |
1219 box-sizing:border-box; |
1220 } |
1220 content:""; |
1221 |
1221 inset:0; |
1222 .SingleDatePickerInput_clearDate { |
1222 opacity:0; |
1223 background: 0 0; |
1223 position:absolute; |
1224 border: 0; |
1224 transition:opacity .2s ease; |
1225 color: inherit; |
1225 } |
1226 font: inherit; |
1226 @media (prefers-reduced-motion:reduce){ |
1227 line-height: normal; |
1227 .components-form-toggle .components-form-toggle__track:after{ |
1228 overflow: visible; |
1228 transition-delay:0s; |
1229 cursor: pointer; |
1229 transition-duration:0s; |
1230 padding: 10px; |
1230 } |
1231 margin: 0 10px 0 5px; |
1231 } |
1232 position: absolute; |
1232 .components-form-toggle .components-form-toggle__thumb{ |
1233 right: 0; |
1233 background-color:#1e1e1e; |
1234 top: 50%; |
1234 border:6px solid #0000; |
1235 transform: translateY(-50%); |
1235 border-radius:50%; |
1236 } |
1236 box-sizing:border-box; |
1237 |
1237 display:block; |
1238 .SingleDatePickerInput_clearDate__default:focus, |
1238 height:12px; |
1239 .SingleDatePickerInput_clearDate__default:hover { |
1239 position:absolute; |
1240 background: #dbdbdb; |
1240 right:3px; |
1241 border-radius: 50%; |
1241 top:3px; |
1242 } |
1242 transition:transform .2s ease,background-color .2s ease-out; |
1243 |
1243 width:12px; |
1244 .SingleDatePickerInput_clearDate__small { |
1244 } |
1245 padding: 6px; |
1245 @media (prefers-reduced-motion:reduce){ |
1246 } |
1246 .components-form-toggle .components-form-toggle__thumb{ |
1247 |
1247 transition-delay:0s; |
1248 .SingleDatePickerInput_clearDate__hide { |
1248 transition-duration:0s; |
1249 visibility: hidden; |
1249 } |
1250 } |
1250 } |
1251 |
1251 .components-form-toggle.is-checked .components-form-toggle__track{ |
1252 .SingleDatePickerInput_clearDate_svg { |
1252 background-color:var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); |
1253 fill: #82888a; |
1253 border-color:var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); |
1254 height: 12px; |
1254 } |
1255 width: 15px; |
1255 .components-form-toggle.is-checked .components-form-toggle__track:after{ |
1256 vertical-align: middle; |
1256 opacity:1; |
1257 } |
1257 } |
1258 |
1258 .components-form-toggle .components-form-toggle__input:focus+.components-form-toggle__track{ |
1259 .SingleDatePickerInput_clearDate_svg__small { |
1259 box-shadow:0 0 0 var(--wp-admin-border-width-focus) #fff, 0 0 0 calc(var(--wp-admin-border-width-focus)*2) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); |
1260 height: 9px; |
1260 outline:2px solid #0000; |
1261 } |
1261 outline-offset:2px; |
1262 |
1262 } |
1263 .SingleDatePickerInput_calendarIcon { |
1263 .components-form-toggle.is-checked .components-form-toggle__thumb{ |
1264 background: 0 0; |
1264 background-color:#fff; |
1265 border: 0; |
1265 border-width:0; |
1266 color: inherit; |
1266 transform:translateX(-18px); |
1267 font: inherit; |
1267 } |
1268 line-height: normal; |
1268 .components-disabled .components-form-toggle,.components-form-toggle.is-disabled{ |
1269 overflow: visible; |
1269 opacity:.3; |
1270 cursor: pointer; |
1270 } |
1271 display: inline-block; |
1271 |
1272 vertical-align: middle; |
1272 .components-form-toggle input.components-form-toggle__input[type=checkbox]{ |
1273 padding: 10px; |
1273 border:none; |
1274 margin: 0 5px 0 10px; |
1274 height:100%; |
1275 } |
1275 margin:0; |
1276 |
1276 opacity:0; |
1277 .SingleDatePickerInput_calendarIcon_svg { |
1277 padding:0; |
1278 fill: #82888a; |
1278 position:absolute; |
1279 height: 15px; |
1279 right:0; |
1280 width: 14px; |
1280 top:0; |
1281 vertical-align: middle; |
1281 width:100%; |
1282 } |
1282 z-index:1; |
1283 |
1283 } |
1284 .SingleDatePicker { |
1284 .components-form-toggle input.components-form-toggle__input[type=checkbox]:checked{ |
1285 position: relative; |
1285 background:none; |
1286 display: inline-block; |
1286 } |
1287 } |
1287 .components-form-toggle input.components-form-toggle__input[type=checkbox]:before{ |
1288 |
1288 content:""; |
1289 .SingleDatePicker__block { |
1289 } |
1290 display: block; |
1290 |
1291 } |
1291 .components-form-token-field__input-container{ |
1292 |
1292 border:1px solid #949494; |
1293 .SingleDatePicker_picker { |
1293 border-radius:2px; |
1294 z-index: 1; |
1294 box-shadow:0 0 0 #0000; |
1295 background-color: #fff; |
1295 cursor:text; |
1296 position: absolute; |
1296 font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif; |
1297 } |
1297 font-size:16px; |
1298 |
1298 line-height:normal; |
1299 .SingleDatePicker_picker__rtl { |
1299 padding:0; |
1300 direction: rtl; |
1300 transition:box-shadow .1s linear; |
1301 } |
1301 width:100%; |
1302 |
1302 } |
1303 .SingleDatePicker_picker__directionLeft { |
1303 @media (prefers-reduced-motion:reduce){ |
1304 left: 0; |
1304 .components-form-token-field__input-container{ |
1305 } |
1305 transition-delay:0s; |
1306 |
1306 transition-duration:0s; |
1307 .SingleDatePicker_picker__directionRight { |
1307 } |
1308 right: 0; |
1308 } |
1309 } |
1309 @media (min-width:600px){ |
1310 |
1310 .components-form-token-field__input-container{ |
1311 .SingleDatePicker_picker__portal { |
1311 font-size:13px; |
1312 background-color: rgba(0, 0, 0, 0.3); |
1312 line-height:normal; |
1313 position: fixed; |
1313 } |
1314 top: 0; |
1314 } |
1315 left: 0; |
1315 .components-form-token-field__input-container:focus{ |
1316 height: 100%; |
1316 border-color:var(--wp-admin-theme-color); |
1317 width: 100%; |
1317 box-shadow:0 0 0 .5px var(--wp-admin-theme-color); |
1318 } |
1318 outline:2px solid #0000; |
1319 |
1319 } |
1320 .SingleDatePicker_picker__fullScreenPortal { |
1320 .components-form-token-field__input-container::-webkit-input-placeholder{ |
1321 background-color: #fff; |
1321 color:#1e1e1e9e; |
1322 } |
1322 } |
1323 |
1323 .components-form-token-field__input-container::-moz-placeholder{ |
1324 .SingleDatePicker_closeButton { |
1324 color:#1e1e1e9e; |
1325 background: 0 0; |
1325 opacity:1; |
1326 border: 0; |
1326 } |
1327 color: inherit; |
1327 .components-form-token-field__input-container:-ms-input-placeholder{ |
1328 font: inherit; |
1328 color:#1e1e1e9e; |
1329 line-height: normal; |
1329 } |
1330 overflow: visible; |
1330 .components-form-token-field__input-container.is-disabled{ |
1331 cursor: pointer; |
1331 background:#ddd; |
1332 position: absolute; |
1332 border-color:#ddd; |
1333 top: 0; |
1333 } |
1334 right: 0; |
1334 .components-form-token-field__input-container.is-active{ |
1335 padding: 15px; |
1335 border-color:var(--wp-admin-theme-color); |
1336 z-index: 2; |
1336 box-shadow:0 0 0 .5px var(--wp-admin-theme-color); |
1337 } |
1337 outline:2px solid #0000; |
1338 |
1338 } |
1339 .SingleDatePicker_closeButton:focus, |
1339 .components-form-token-field__input-container input[type=text].components-form-token-field__input{ |
1340 .SingleDatePicker_closeButton:hover { |
1340 background:inherit; |
1341 color: #b0b3b4; |
1341 border:0; |
1342 text-decoration: none; |
1342 box-shadow:none; |
1343 } |
1343 color:#1e1e1e; |
1344 |
1344 display:inline-block; |
1345 .SingleDatePicker_closeButton_svg { |
1345 flex:1; |
1346 height: 15px; |
1346 font-family:inherit; |
1347 width: 15px; |
1347 font-size:16px; |
1348 fill: #cacccd; |
1348 margin-right:4px; |
1349 } |
1349 max-width:100%; |
1350 |
1350 min-height:24px; |
1351 .DayPickerKeyboardShortcuts_buttonReset { |
1351 min-width:50px; |
1352 background: 0 0; |
1352 padding:0; |
1353 border: 0; |
1353 width:100%; |
1354 border-radius: 0; |
1354 } |
1355 color: inherit; |
1355 @media (min-width:600px){ |
1356 font: inherit; |
1356 .components-form-token-field__input-container input[type=text].components-form-token-field__input{ |
1357 line-height: normal; |
1357 font-size:13px; |
1358 overflow: visible; |
1358 } |
1359 padding: 0; |
1359 } |
1360 cursor: pointer; |
1360 .components-form-token-field.is-active .components-form-token-field__input-container input[type=text].components-form-token-field__input,.components-form-token-field__input-container input[type=text].components-form-token-field__input:focus{ |
1361 font-size: 14px; |
1361 box-shadow:none; |
1362 } |
1362 outline:none; |
1363 |
1363 } |
1364 .DayPickerKeyboardShortcuts_buttonReset:active { |
1364 .components-form-token-field__input-container .components-form-token-field__token+input[type=text].components-form-token-field__input{ |
1365 outline: 0; |
1365 width:auto; |
1366 } |
1366 } |
1367 |
1367 |
1368 .DayPickerKeyboardShortcuts_show { |
1368 .components-form-token-field__token{ |
1369 width: 22px; |
1369 color:#1e1e1e; |
1370 position: absolute; |
1370 display:flex; |
1371 z-index: 2; |
1371 font-size:13px; |
1372 } |
1372 max-width:100%; |
1373 |
1373 } |
1374 .DayPickerKeyboardShortcuts_show__bottomRight { |
1374 .components-form-token-field__token.is-success .components-form-token-field__remove-token,.components-form-token-field__token.is-success .components-form-token-field__token-text{ |
1375 border-top: 26px solid transparent; |
1375 background:#4ab866; |
1376 border-right: 33px solid #00a699; |
1376 } |
1377 bottom: 0; |
1377 .components-form-token-field__token.is-error .components-form-token-field__remove-token,.components-form-token-field__token.is-error .components-form-token-field__token-text{ |
1378 right: 0; |
1378 background:#cc1818; |
1379 } |
1379 } |
1380 |
1380 .components-form-token-field__token.is-validating .components-form-token-field__remove-token,.components-form-token-field__token.is-validating .components-form-token-field__token-text{ |
1381 .DayPickerKeyboardShortcuts_show__bottomRight:hover { |
1381 color:#757575; |
1382 border-right: 33px solid #008489; |
1382 } |
1383 } |
1383 .components-form-token-field__token.is-borderless{ |
1384 |
1384 padding:0 0 0 24px; |
1385 .DayPickerKeyboardShortcuts_show__topRight { |
1385 position:relative; |
1386 border-bottom: 26px solid transparent; |
1386 } |
1387 border-right: 33px solid #00a699; |
1387 .components-form-token-field__token.is-borderless .components-form-token-field__token-text{ |
1388 top: 0; |
1388 background:#0000; |
1389 right: 0; |
1389 color:var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); |
1390 } |
1390 } |
1391 |
1391 .components-form-token-field__token.is-borderless .components-form-token-field__remove-token{ |
1392 .DayPickerKeyboardShortcuts_show__topRight:hover { |
1392 background:#0000; |
1393 border-right: 33px solid #008489; |
1393 color:#757575; |
1394 } |
1394 left:0; |
1395 |
1395 padding:0; |
1396 .DayPickerKeyboardShortcuts_show__topLeft { |
1396 position:absolute; |
1397 border-bottom: 26px solid transparent; |
1397 top:1px; |
1398 border-left: 33px solid #00a699; |
1398 } |
1399 top: 0; |
1399 .components-form-token-field__token.is-borderless.is-success .components-form-token-field__token-text{ |
1400 left: 0; |
1400 color:#4ab866; |
1401 } |
1401 } |
1402 |
1402 .components-form-token-field__token.is-borderless.is-error .components-form-token-field__token-text{ |
1403 .DayPickerKeyboardShortcuts_show__topLeft:hover { |
1403 border-radius:0 4px 4px 0; |
1404 border-left: 33px solid #008489; |
1404 color:#cc1818; |
1405 } |
1405 padding:0 6px 0 4px; |
1406 |
1406 } |
1407 .DayPickerKeyboardShortcuts_showSpan { |
1407 .components-form-token-field__token.is-borderless.is-validating .components-form-token-field__token-text{ |
1408 color: #fff; |
1408 color:#1e1e1e; |
1409 position: absolute; |
1409 } |
1410 } |
1410 .components-form-token-field__token.is-disabled .components-form-token-field__remove-token{ |
1411 |
1411 cursor:default; |
1412 .DayPickerKeyboardShortcuts_showSpan__bottomRight { |
1412 } |
1413 bottom: 0; |
1413 |
1414 right: -28px; |
1414 .components-form-token-field__remove-token.components-button,.components-form-token-field__token-text{ |
1415 } |
1415 background:#ddd; |
1416 |
1416 display:inline-block; |
1417 .DayPickerKeyboardShortcuts_showSpan__topRight { |
1417 height:auto; |
1418 top: 1px; |
1418 line-height:24px; |
1419 right: -28px; |
1419 min-width:unset; |
1420 } |
1420 transition:all .2s cubic-bezier(.4, 1, .4, 1); |
1421 |
1421 } |
1422 .DayPickerKeyboardShortcuts_showSpan__topLeft { |
1422 @media (prefers-reduced-motion:reduce){ |
1423 top: 1px; |
1423 .components-form-token-field__remove-token.components-button,.components-form-token-field__token-text{ |
1424 left: -28px; |
1424 animation-delay:0s; |
1425 } |
1425 animation-duration:1ms; |
1426 |
1426 transition-delay:0s; |
1427 .DayPickerKeyboardShortcuts_panel { |
1427 transition-duration:0s; |
1428 overflow: auto; |
1428 } |
1429 background: #fff; |
1429 } |
1430 border: 1px solid #dbdbdb; |
1430 |
1431 border-radius: 2px; |
1431 .components-form-token-field__token-text{ |
1432 position: absolute; |
1432 border-radius:0 2px 2px 0; |
1433 top: 0; |
1433 overflow:hidden; |
1434 bottom: 0; |
1434 padding:0 8px 0 0; |
1435 right: 0; |
1435 text-overflow:ellipsis; |
1436 left: 0; |
1436 white-space:nowrap; |
1437 z-index: 2; |
1437 } |
1438 padding: 22px; |
1438 |
1439 margin: 33px; |
1439 .components-form-token-field__remove-token.components-button{ |
1440 } |
1440 border-radius:2px 0 0 2px; |
1441 |
1441 color:#1e1e1e; |
1442 .DayPickerKeyboardShortcuts_title { |
1442 cursor:pointer; |
1443 font-size: 16px; |
1443 line-height:10px; |
1444 font-weight: 700; |
1444 overflow:initial; |
1445 margin: 0; |
1445 padding:0 2px; |
1446 } |
1446 } |
1447 |
1447 .components-form-token-field__remove-token.components-button:hover{ |
1448 .DayPickerKeyboardShortcuts_list { |
1448 color:#1e1e1e; |
1449 list-style: none; |
1449 } |
1450 padding: 0; |
1450 |
1451 font-size: 14px; |
1451 .components-form-token-field__suggestions-list{ |
1452 } |
1452 box-shadow:inset 0 1px 0 0 #949494; |
1453 |
1453 flex:1 0 100%; |
1454 .DayPickerKeyboardShortcuts_close { |
1454 list-style:none; |
1455 position: absolute; |
1455 margin:0; |
1456 right: 22px; |
1456 max-height:128px; |
1457 top: 22px; |
1457 min-width:100%; |
1458 z-index: 2; |
1458 overflow-y:auto; |
1459 } |
1459 padding:0; |
1460 |
1460 transition:all .15s ease-in-out; |
1461 .DayPickerKeyboardShortcuts_close:active { |
1461 } |
1462 outline: 0; |
1462 @media (prefers-reduced-motion:reduce){ |
1463 } |
1463 .components-form-token-field__suggestions-list{ |
1464 |
1464 transition-delay:0s; |
1465 .DayPickerKeyboardShortcuts_closeSvg { |
1465 transition-duration:0s; |
1466 height: 15px; |
1466 } |
1467 width: 15px; |
1467 } |
1468 fill: #cacccd; |
1468 |
1469 } |
1469 .components-form-token-field__suggestion{ |
1470 |
1470 box-sizing:border-box; |
1471 .DayPickerKeyboardShortcuts_closeSvg:focus, |
1471 color:#1e1e1e; |
1472 .DayPickerKeyboardShortcuts_closeSvg:hover { |
1472 cursor:pointer; |
1473 fill: #82888a; |
1473 display:block; |
1474 } |
1474 font-size:13px; |
1475 |
1475 margin:0; |
1476 .CalendarDay { |
1476 min-height:32px; |
1477 box-sizing: border-box; |
1477 padding:8px 12px; |
1478 cursor: pointer; |
1478 } |
1479 font-size: 14px; |
1479 .components-form-token-field__suggestion.is-selected{ |
1480 text-align: center; |
1480 background:var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); |
1481 } |
1481 color:#fff; |
1482 |
1482 } |
1483 .CalendarDay:active { |
1483 .components-form-token-field__suggestion[aria-disabled=true]{ |
1484 outline: 0; |
1484 color:#949494; |
1485 } |
1485 pointer-events:none; |
1486 |
1486 } |
1487 .CalendarDay__defaultCursor { |
1487 .components-form-token-field__suggestion[aria-disabled=true].is-selected{ |
1488 cursor: default; |
1488 background-color:rgba(var(--wp-components-color-accent--rgb, var(--wp-admin-theme-color--rgb)), .04); |
1489 } |
1489 } |
1490 |
1490 |
1491 .CalendarDay__default { |
1491 @media (min-width:600px){ |
1492 border: 1px solid #e4e7e7; |
1492 .components-guide{ |
1493 color: #484848; |
1493 width:600px; |
1494 background: #fff; |
1494 } |
1495 } |
1495 } |
1496 |
1496 .components-guide .components-modal__content{ |
1497 .CalendarDay__default:hover { |
1497 border-radius:2px; |
1498 background: #e4e7e7; |
1498 margin-top:0; |
1499 border: 1px double #e4e7e7; |
1499 padding:0; |
1500 color: inherit; |
1500 } |
1501 } |
1501 .components-guide .components-modal__content:before{ |
1502 |
1502 content:none; |
1503 .CalendarDay__hovered_offset { |
1503 } |
1504 background: #f4f5f5; |
1504 .components-guide .components-modal__header{ |
1505 border: 1px double #e4e7e7; |
1505 border-bottom:none; |
1506 color: inherit; |
1506 height:60px; |
1507 } |
1507 padding:0; |
1508 |
1508 position:sticky; |
1509 .CalendarDay__outside { |
1509 } |
1510 border: 0; |
1510 .components-guide .components-modal__header .components-button{ |
1511 background: #fff; |
1511 align-self:flex-start; |
1512 color: #484848; |
1512 margin:8px 0 0 8px; |
1513 } |
1513 position:static; |
1514 |
1514 } |
1515 .CalendarDay__outside:hover { |
1515 .components-guide .components-modal__header .components-button:hover svg{ |
1516 border: 0; |
1516 fill:#fff; |
1517 } |
1517 } |
1518 |
1518 .components-guide__container{ |
1519 .CalendarDay__blocked_minimum_nights { |
1519 display:flex; |
1520 background: #fff; |
1520 flex-direction:column; |
1521 border: 1px solid #eceeee; |
1521 justify-content:space-between; |
1522 color: #cacccd; |
1522 margin-top:-60px; |
1523 } |
1523 min-height:100%; |
1524 |
1524 } |
1525 .CalendarDay__blocked_minimum_nights:active, |
1525 .components-guide__page{ |
1526 .CalendarDay__blocked_minimum_nights:hover { |
1526 display:flex; |
1527 background: #fff; |
1527 flex-direction:column; |
1528 color: #cacccd; |
1528 justify-content:center; |
1529 } |
1529 position:relative; |
1530 |
1530 } |
1531 .CalendarDay__highlighted_calendar { |
1531 @media (min-width:600px){ |
1532 background: #ffe8bc; |
1532 .components-guide__page{ |
1533 color: #484848; |
1533 min-height:300px; |
1534 } |
1534 } |
1535 |
1535 } |
1536 .CalendarDay__highlighted_calendar:active, |
1536 .components-guide__footer{ |
1537 .CalendarDay__highlighted_calendar:hover { |
1537 align-content:center; |
1538 background: #ffce71; |
1538 display:flex; |
1539 color: #484848; |
1539 height:36px; |
1540 } |
1540 justify-content:center; |
1541 |
1541 margin:0 0 24px; |
1542 .CalendarDay__selected_span { |
1542 padding:0 32px; |
1543 background: #66e2da; |
1543 position:relative; |
1544 border: 1px solid #33dacd; |
1544 width:100%; |
1545 color: #fff; |
1545 } |
1546 } |
1546 .components-guide__page-control{ |
1547 |
1547 margin:0; |
1548 .CalendarDay__selected_span:active, |
1548 text-align:center; |
1549 .CalendarDay__selected_span:hover { |
1549 } |
1550 background: #33dacd; |
1550 .components-guide__page-control li{ |
1551 border: 1px solid #33dacd; |
1551 display:inline-block; |
1552 color: #fff; |
1552 margin:0; |
1553 } |
1553 } |
1554 |
1554 .components-guide__page-control .components-button{ |
1555 .CalendarDay__last_in_range { |
1555 color:#e0e0e0; |
1556 border-right: #00a699; |
1556 height:30px; |
1557 } |
1557 margin:-6px 0; |
1558 |
1558 min-width:20px; |
1559 .CalendarDay__selected, |
1559 } |
1560 .CalendarDay__selected:active, |
1560 .components-guide__page-control li[aria-current=step] .components-button{ |
1561 .CalendarDay__selected:hover { |
1561 color:var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); |
1562 background: #00a699; |
1562 } |
1563 border: 1px solid #00a699; |
1563 |
1564 color: #fff; |
1564 .components-modal__frame.components-guide{ |
1565 } |
1565 border:none; |
1566 |
1566 max-height:575px; |
1567 .CalendarDay__hovered_span, |
1567 min-width:312px; |
1568 .CalendarDay__hovered_span:hover { |
1568 } |
1569 background: #b2f1ec; |
1569 @media (max-width:600px){ |
1570 border: 1px solid #80e8e0; |
1570 .components-modal__frame.components-guide{ |
1571 color: #007a87; |
1571 margin:auto; |
1572 } |
1572 max-width:calc(100vw - 32px); |
1573 |
1573 } |
1574 .CalendarDay__hovered_span:active { |
1574 } |
1575 background: #80e8e0; |
1575 |
1576 border: 1px solid #80e8e0; |
1576 .components-button.components-guide__back-button,.components-button.components-guide__finish-button,.components-button.components-guide__forward-button{ |
1577 color: #007a87; |
1577 position:absolute; |
1578 } |
1578 } |
1579 |
1579 .components-button.components-guide__back-button{ |
1580 .CalendarDay__blocked_calendar, |
1580 right:32px; |
1581 .CalendarDay__blocked_calendar:active, |
1581 } |
1582 .CalendarDay__blocked_calendar:hover { |
1582 .components-button.components-guide__finish-button,.components-button.components-guide__forward-button{ |
1583 background: #cacccd; |
1583 left:32px; |
1584 border: 1px solid #cacccd; |
1584 } |
1585 color: #82888a; |
1585 |
1586 } |
1586 [role=region]{ |
1587 |
1587 position:relative; |
1588 .CalendarDay__blocked_out_of_range, |
1588 } |
1589 .CalendarDay__blocked_out_of_range:active, |
1589 |
1590 .CalendarDay__blocked_out_of_range:hover { |
1590 .is-focusing-regions [role=region]:focus:after{ |
1591 background: #fff; |
1591 bottom:0; |
1592 border: 1px solid #e4e7e7; |
1592 content:""; |
1593 color: #cacccd; |
1593 left:0; |
1594 } |
1594 pointer-events:none; |
1595 |
1595 position:absolute; |
1596 .CalendarMonth { |
1596 right:0; |
1597 background: #fff; |
1597 top:0; |
1598 text-align: center; |
1598 z-index:1000000; |
1599 vertical-align: top; |
1599 } |
1600 -webkit-user-select: none; |
1600 .is-focusing-regions .editor-post-publish-panel,.is-focusing-regions .interface-interface-skeleton__actions .editor-layout__toggle-entities-saved-states-panel,.is-focusing-regions .interface-interface-skeleton__actions .editor-layout__toggle-publish-panel,.is-focusing-regions .interface-interface-skeleton__sidebar .editor-layout__toggle-sidebar-panel,.is-focusing-regions [role=region]:focus:after,.is-focusing-regions.is-distraction-free .interface-interface-skeleton__header .edit-post-header{ |
1601 user-select: none; |
1601 outline:4px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); |
1602 } |
1602 outline-offset:-4px; |
1603 |
1603 } |
1604 .CalendarMonth_table { |
1604 |
1605 border-collapse: collapse; |
1605 .components-menu-group+.components-menu-group{ |
1606 border-spacing: 0; |
1606 border-top:1px solid #1e1e1e; |
1607 } |
1607 margin-top:8px; |
1608 |
1608 padding-top:8px; |
1609 .CalendarMonth_verticalSpacing { |
1609 } |
1610 border-collapse: separate; |
1610 .components-menu-group+.components-menu-group.has-hidden-separator{ |
1611 } |
1611 border-top:none; |
1612 |
1612 margin-top:0; |
1613 .CalendarMonth_caption { |
1613 padding-top:0; |
1614 color: #484848; |
1614 } |
1615 font-size: 18px; |
1615 |
1616 text-align: center; |
1616 .components-menu-group__label{ |
1617 padding-top: 22px; |
1617 color:#757575; |
1618 padding-bottom: 37px; |
1618 font-size:11px; |
1619 caption-side: initial; |
1619 font-weight:500; |
1620 } |
1620 margin-bottom:12px; |
1621 |
1621 margin-top:4px; |
1622 .CalendarMonth_caption__verticalScrollable { |
1622 padding:0 8px; |
1623 padding-top: 12px; |
1623 text-transform:uppercase; |
1624 padding-bottom: 7px; |
1624 white-space:nowrap; |
1625 } |
1625 } |
1626 |
1626 |
1627 .CalendarMonthGrid { |
1627 .components-menu-item__button,.components-menu-item__button.components-button{ |
1628 background: #fff; |
1628 width:100%; |
1629 text-align: left; |
1629 } |
1630 z-index: 0; |
1630 .components-menu-item__button.components-button[role=menuitemcheckbox] .components-menu-item__item:only-child,.components-menu-item__button.components-button[role=menuitemradio] .components-menu-item__item:only-child,.components-menu-item__button[role=menuitemcheckbox] .components-menu-item__item:only-child,.components-menu-item__button[role=menuitemradio] .components-menu-item__item:only-child{ |
1631 } |
1631 box-sizing:initial; |
1632 |
1632 padding-left:48px; |
1633 .CalendarMonthGrid__animating { |
1633 } |
1634 z-index: 1; |
1634 .components-menu-item__button .components-menu-items__item-icon,.components-menu-item__button.components-button .components-menu-items__item-icon{ |
1635 } |
1635 display:inline-block; |
1636 |
1636 flex:0 0 auto; |
1637 .CalendarMonthGrid__horizontal { |
1637 } |
1638 position: absolute; |
1638 .components-menu-item__button .components-menu-items__item-icon.has-icon-right,.components-menu-item__button.components-button .components-menu-items__item-icon.has-icon-right{ |
1639 left: 0; |
1639 margin-left:-2px; |
1640 } |
1640 margin-right:24px; |
1641 |
1641 } |
1642 .CalendarMonthGrid__vertical { |
1642 .components-menu-item__button .components-menu-item__shortcut+.components-menu-items__item-icon.has-icon-right,.components-menu-item__button.components-button .components-menu-item__shortcut+.components-menu-items__item-icon.has-icon-right{ |
1643 margin: 0 auto; |
1643 margin-right:8px; |
1644 } |
1644 } |
1645 |
1645 .components-menu-item__button .block-editor-block-icon,.components-menu-item__button.components-button .block-editor-block-icon{ |
1646 .CalendarMonthGrid__vertical_scrollable { |
1646 margin-left:8px; |
1647 margin: 0 auto; |
1647 margin-right:-2px; |
1648 overflow-y: scroll; |
1648 } |
1649 } |
1649 .components-menu-item__button.components-button.is-primary,.components-menu-item__button.is-primary{ |
1650 |
1650 justify-content:center; |
1651 .CalendarMonthGrid_month__horizontal { |
1651 } |
1652 display: inline-block; |
1652 .components-menu-item__button.components-button.is-primary .components-menu-item__item,.components-menu-item__button.is-primary .components-menu-item__item{ |
1653 vertical-align: top; |
1653 margin-left:0; |
1654 min-height: 100%; |
1654 } |
1655 } |
1655 .components-menu-item__button.components-button:disabled.is-tertiary,.components-menu-item__button.components-button[aria-disabled=true].is-tertiary,.components-menu-item__button:disabled.is-tertiary,.components-menu-item__button[aria-disabled=true].is-tertiary{ |
1656 |
1656 background:none; |
1657 .CalendarMonthGrid_month__hideForAnimation { |
1657 color:var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6)); |
1658 position: absolute; |
1658 opacity:.3; |
1659 z-index: -1; |
1659 } |
1660 opacity: 0; |
1660 |
1661 pointer-events: none; |
1661 .components-menu-item__info-wrapper{ |
1662 } |
1662 display:flex; |
1663 |
1663 flex-direction:column; |
1664 .CalendarMonthGrid_month__hidden { |
1664 margin-left:auto; |
1665 visibility: hidden; |
1665 } |
1666 } |
1666 |
1667 |
1667 .components-menu-item__info{ |
1668 .DayPickerNavigation { |
1668 color:#757575; |
1669 position: relative; |
1669 font-size:12px; |
1670 z-index: 2; |
1670 margin-top:4px; |
1671 } |
1671 white-space:normal; |
1672 |
1672 } |
1673 .DayPickerNavigation__horizontal { |
1673 |
1674 height: 0; |
1674 .components-menu-item__item{ |
1675 } |
1675 align-items:center; |
1676 |
1676 display:inline-flex; |
1677 .DayPickerNavigation__verticalDefault { |
1677 margin-left:auto; |
1678 position: absolute; |
1678 min-width:160px; |
1679 width: 100%; |
1679 white-space:nowrap; |
1680 height: 52px; |
1680 } |
1681 bottom: 0; |
1681 |
1682 left: 0; |
1682 .components-menu-item__shortcut{ |
1683 } |
1683 align-self:center; |
1684 |
1684 color:currentColor; |
1685 .DayPickerNavigation__verticalScrollableDefault { |
1685 display:none; |
1686 position: relative; |
1686 margin-left:0; |
1687 } |
1687 margin-right:auto; |
1688 |
1688 padding-right:24px; |
1689 .DayPickerNavigation_button { |
1689 } |
1690 cursor: pointer; |
1690 @media (min-width:480px){ |
1691 -webkit-user-select: none; |
1691 .components-menu-item__shortcut{ |
1692 user-select: none; |
1692 display:inline; |
1693 border: 0; |
1693 } |
1694 padding: 0; |
1694 } |
1695 margin: 0; |
1695 |
1696 } |
1696 .components-menu-items-choice svg,.components-menu-items-choice.components-button svg{ |
1697 |
1697 margin-left:12px; |
1698 .DayPickerNavigation_button__default { |
1698 } |
1699 border: 1px solid #e4e7e7; |
1699 .components-menu-items-choice.components-button.has-icon,.components-menu-items-choice.has-icon{ |
1700 background-color: #fff; |
1700 padding-right:12px; |
1701 color: #757575; |
1701 } |
1702 } |
1702 |
1703 |
1703 .components-modal__screen-overlay{ |
1704 .DayPickerNavigation_button__default:focus, |
1704 animation:edit-post__fade-in-animation .2s ease-out 0s; |
1705 .DayPickerNavigation_button__default:hover { |
1705 animation-fill-mode:forwards; |
1706 border: 1px solid #c4c4c4; |
1706 background-color:#00000059; |
1707 } |
1707 bottom:0; |
1708 |
1708 display:flex; |
1709 .DayPickerNavigation_button__default:active { |
1709 left:0; |
1710 background: #f2f2f2; |
1710 position:fixed; |
1711 } |
1711 right:0; |
1712 |
1712 top:0; |
1713 .DayPickerNavigation_button__horizontalDefault { |
1713 z-index:100000; |
1714 position: absolute; |
1714 } |
1715 top: 18px; |
1715 @media (prefers-reduced-motion:reduce){ |
1716 line-height: 0.78; |
1716 .components-modal__screen-overlay{ |
1717 border-radius: 3px; |
1717 animation-delay:0s; |
1718 padding: 6px 9px; |
1718 animation-duration:1ms; |
1719 } |
1719 } |
1720 |
1720 } |
1721 .DayPickerNavigation_leftButton__horizontalDefault { |
1721 |
1722 left: 22px; |
1722 .components-modal__frame{ |
1723 } |
1723 animation:components-modal__appear-animation .1s ease-out; |
1724 |
1724 animation-fill-mode:forwards; |
1725 .DayPickerNavigation_rightButton__horizontalDefault { |
1725 background:#fff; |
1726 right: 22px; |
1726 border-radius:4px 4px 0 0; |
1727 } |
1727 box-shadow:0 .7px 1px #00000026,0 2.7px 3.8px -.2px #00000026,0 5.5px 7.8px -.3px #00000026,-.1px 11.5px 16.4px -.5px #00000026; |
1728 |
1728 box-sizing:border-box; |
1729 .DayPickerNavigation_button__verticalDefault { |
1729 display:flex; |
1730 padding: 5px; |
1730 margin:40px 0 0; |
1731 background: #fff; |
1731 overflow:hidden; |
1732 box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1); |
1732 width:100%; |
1733 position: relative; |
1733 } |
1734 display: inline-block; |
1734 .components-modal__frame *,.components-modal__frame :after,.components-modal__frame :before{ |
1735 height: 100%; |
1735 box-sizing:inherit; |
1736 width: 50%; |
1736 } |
1737 } |
1737 @media (prefers-reduced-motion:reduce){ |
1738 |
1738 .components-modal__frame{ |
1739 .DayPickerNavigation_nextButton__verticalDefault { |
1739 animation-delay:0s; |
1740 border-left: 0; |
1740 animation-duration:1ms; |
1741 } |
1741 } |
1742 |
1742 } |
1743 .DayPickerNavigation_nextButton__verticalScrollableDefault { |
1743 @media (min-width:600px){ |
1744 width: 100%; |
1744 .components-modal__frame{ |
1745 } |
1745 border-radius:4px; |
1746 |
1746 margin:auto; |
1747 .DayPickerNavigation_svg__horizontal { |
1747 max-height:calc(100% - 120px); |
1748 height: 19px; |
1748 max-width:calc(100% - 32px); |
1749 width: 19px; |
1749 min-width:350px; |
1750 fill: #82888a; |
1750 width:auto; |
1751 display: block; |
1751 } |
1752 } |
1752 } |
1753 |
1753 @media (min-width:600px) and (min-width:600px){ |
1754 .DayPickerNavigation_svg__vertical { |
1754 .components-modal__frame.is-full-screen{ |
1755 height: 42px; |
1755 height:calc(100% - 32px); |
1756 width: 42px; |
1756 max-height:none; |
1757 fill: #484848; |
1757 width:calc(100% - 32px); |
1758 display: block; |
1758 } |
1759 } |
1759 } |
1760 |
1760 @media (min-width:600px) and (min-width:782px){ |
1761 .DayPicker { |
1761 .components-modal__frame.is-full-screen{ |
1762 background: #fff; |
1762 height:calc(100% - 80px); |
1763 position: relative; |
1763 max-width:none; |
1764 text-align: left; |
1764 width:calc(100% - 80px); |
1765 } |
1765 } |
1766 |
1766 } |
1767 .DayPicker__horizontal { |
1767 @media (min-width:600px){ |
1768 background: #fff; |
1768 .components-modal__frame.has-size-large,.components-modal__frame.has-size-medium,.components-modal__frame.has-size-small{ |
1769 } |
1769 width:100%; |
1770 |
1770 } |
1771 .DayPicker__verticalScrollable { |
1771 .components-modal__frame.has-size-small{ |
1772 height: 100%; |
1772 max-width:384px; |
1773 } |
1773 } |
1774 |
1774 .components-modal__frame.has-size-medium{ |
1775 .DayPicker__hidden { |
1775 max-width:512px; |
1776 visibility: hidden; |
1776 } |
1777 } |
1777 .components-modal__frame.has-size-large{ |
1778 |
1778 max-width:840px; |
1779 .DayPicker__withBorder { |
1779 } |
1780 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.07); |
1780 } |
1781 border-radius: 3px; |
1781 @media (min-width:960px){ |
1782 } |
1782 .components-modal__frame{ |
1783 |
1783 max-height:70%; |
1784 .DayPicker_portal__horizontal { |
1784 } |
1785 box-shadow: none; |
1785 } |
1786 position: absolute; |
1786 |
1787 left: 50%; |
1787 @keyframes components-modal__appear-animation{ |
1788 top: 50%; |
1788 0%{ |
1789 } |
1789 transform:translateY(32px); |
1790 |
1790 } |
1791 .DayPicker_portal__vertical { |
1791 to{ |
1792 position: initial; |
1792 transform:translateY(0); |
1793 } |
1793 } |
1794 |
1794 } |
1795 .DayPicker_focusRegion { |
1795 .components-modal__header{ |
1796 outline: 0; |
1796 align-items:center; |
1797 } |
1797 border-bottom:1px solid #0000; |
1798 |
1798 box-sizing:border-box; |
1799 .DayPicker_calendarInfo__horizontal, |
1799 display:flex; |
1800 .DayPicker_wrapper__horizontal { |
1800 flex-direction:row; |
1801 display: inline-block; |
1801 height:72px; |
1802 vertical-align: top; |
1802 justify-content:space-between; |
1803 } |
1803 padding:24px 32px 8px; |
1804 |
1804 position:absolute; |
1805 .DayPicker_weekHeaders { |
1805 right:0; |
1806 position: relative; |
1806 top:0; |
1807 } |
1807 width:100%; |
1808 |
1808 z-index:10; |
1809 .DayPicker_weekHeaders__horizontal { |
1809 } |
1810 margin-left: 13px; |
1810 .components-modal__header .components-modal__header-heading{ |
1811 } |
1811 font-size:1.2rem; |
1812 |
1812 font-weight:600; |
1813 .DayPicker_weekHeader { |
1813 } |
1814 color: #757575; |
1814 .components-modal__header h1{ |
1815 position: absolute; |
1815 line-height:1; |
1816 top: 62px; |
1816 margin:0; |
1817 z-index: 2; |
1817 } |
1818 text-align: left; |
1818 .components-modal__header .components-button{ |
1819 padding: 0 !important; |
1819 position:relative; |
1820 } |
1820 right:8px; |
1821 |
1821 } |
1822 .DayPicker_weekHeader__vertical { |
1822 .components-modal__content.has-scrolled-content:not(.hide-header) .components-modal__header{ |
1823 left: 50%; |
1823 border-bottom-color:#ddd; |
1824 } |
1824 } |
1825 |
1825 .components-modal__header+p{ |
1826 .DayPicker_weekHeader__verticalScrollable { |
1826 margin-top:0; |
1827 top: 0; |
1827 } |
1828 display: table-row; |
1828 |
1829 border-bottom: 1px solid #dbdbdb; |
1829 .components-modal__header-heading-container{ |
1830 background: #fff; |
1830 align-items:center; |
1831 margin-left: 0; |
1831 display:flex; |
1832 left: 0; |
1832 flex-direction:row; |
1833 width: 100%; |
1833 flex-grow:1; |
1834 text-align: center; |
1834 justify-content:right; |
1835 } |
1835 } |
1836 |
1836 |
1837 .DayPicker_weekHeader_ul { |
1837 .components-modal__header-icon-container{ |
1838 list-style: none; |
1838 display:inline-block; |
1839 margin: 1px 0; |
1839 } |
1840 padding-left: 0; |
1840 .components-modal__header-icon-container svg{ |
1841 padding-right: 0; |
1841 max-height:36px; |
1842 font-size: 14px; |
1842 max-width:36px; |
1843 } |
1843 padding:8px; |
1844 |
1844 } |
1845 .DayPicker_weekHeader_li { |
1845 |
1846 display: inline-block; |
1846 .components-modal__content{ |
1847 text-align: center; |
1847 flex:1; |
1848 margin: 0 1px; |
1848 margin-top:72px; |
1849 } |
1849 overflow:auto; |
1850 |
1850 padding:4px 32px 32px; |
1851 .DayPicker_transitionContainer { |
1851 } |
1852 position: relative; |
1852 .components-modal__content.hide-header{ |
1853 overflow: hidden; |
1853 margin-top:0; |
1854 border-radius: 3px; |
1854 padding-top:32px; |
1855 } |
1855 } |
1856 |
1856 .components-modal__content.is-scrollable:focus-visible{ |
1857 .DayPicker_transitionContainer__horizontal { |
1857 box-shadow:inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); |
1858 transition: height 0.2s ease-in-out; |
1858 outline:2px solid #0000; |
1859 } |
1859 outline-offset:-2px; |
1860 |
1860 } |
1861 .DayPicker_transitionContainer__vertical { |
1861 |
1862 width: 100%; |
1862 .components-notice{ |
1863 } |
1863 align-items:center; |
1864 |
1864 background-color:#fff; |
1865 .DayPicker_transitionContainer__verticalScrollable { |
1865 border-right:4px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); |
1866 padding-top: 20px; |
1866 display:flex; |
1867 height: 100%; |
1867 font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif; |
1868 position: absolute; |
1868 font-size:13px; |
1869 top: 0; |
1869 padding:8px 12px; |
1870 bottom: 0; |
1870 } |
1871 right: 0; |
1871 .components-notice.is-dismissible{ |
1872 left: 0; |
1872 position:relative; |
1873 overflow-y: scroll; |
1873 } |
1874 } |
1874 .components-notice.is-success{ |
1875 |
1875 background-color:#eff9f1; |
1876 .DateInput { |
1876 border-right-color:#4ab866; |
1877 margin: 0; |
1877 } |
1878 padding: 0; |
1878 .components-notice.is-warning{ |
1879 background: #fff; |
1879 background-color:#fef8ee; |
1880 position: relative; |
1880 border-right-color:#f0b849; |
1881 display: inline-block; |
1881 } |
1882 width: 130px; |
1882 .components-notice.is-error{ |
1883 vertical-align: middle; |
1883 background-color:#f4a2a2; |
1884 } |
1884 border-right-color:#cc1818; |
1885 |
1885 } |
1886 .DateInput__small { |
1886 |
1887 width: 97px; |
1887 .components-notice__content{ |
1888 } |
1888 flex-grow:1; |
1889 |
1889 margin:4px 0 4px 25px; |
1890 .DateInput__block { |
1890 } |
1891 width: 100%; |
1891 |
1892 } |
1892 .components-notice__actions{ |
1893 |
1893 display:flex; |
1894 .DateInput__disabled { |
1894 flex-wrap:wrap; |
1895 background: #f2f2f2; |
1895 } |
1896 color: #dbdbdb; |
1896 |
1897 } |
1897 .components-notice__action.components-button{ |
1898 |
1898 margin-left:8px; |
1899 .DateInput_input { |
1899 } |
1900 font-weight: 200; |
1900 .components-notice__action.components-button,.components-notice__action.components-button.is-link{ |
1901 font-size: 19px; |
1901 margin-right:12px; |
1902 line-height: 24px; |
1902 } |
1903 color: #484848; |
1903 .components-notice__action.components-button.is-secondary{ |
1904 background-color: #fff; |
1904 vertical-align:initial; |
1905 width: 100%; |
1905 } |
1906 padding: 11px 11px 9px; |
1906 |
1907 border: 0; |
1907 .components-notice__dismiss{ |
1908 border-top: 0; |
1908 align-self:flex-start; |
1909 border-right: 0; |
1909 color:#757575; |
1910 border-bottom: 2px solid transparent; |
1910 flex-shrink:0; |
1911 border-left: 0; |
1911 } |
1912 border-radius: 0; |
1912 .components-notice__dismiss:not(:disabled):not([aria-disabled=true]):focus,.components-notice__dismiss:not(:disabled):not([aria-disabled=true]):not(.is-secondary):active,.components-notice__dismiss:not(:disabled):not([aria-disabled=true]):not(.is-secondary):hover{ |
1913 } |
1913 background-color:initial; |
1914 |
1914 color:#1e1e1e; |
1915 .DateInput_input__small { |
1915 } |
1916 font-size: 15px; |
1916 .components-notice__dismiss:not(:disabled):not([aria-disabled=true]):not(.is-secondary):hover{ |
1917 line-height: 18px; |
1917 box-shadow:none; |
1918 letter-spacing: 0.2px; |
1918 } |
1919 padding: 7px 7px 5px; |
1919 |
1920 } |
1920 .components-notice-list{ |
1921 |
1921 box-sizing:border-box; |
1922 .DateInput_input__regular { |
1922 max-width:100vw; |
1923 font-weight: auto; |
1923 } |
1924 } |
1924 .components-notice-list .components-notice__content{ |
1925 |
1925 line-height:2; |
1926 .DateInput_input__readOnly { |
1926 margin-bottom:12px; |
1927 -webkit-user-select: none; |
1927 margin-top:12px; |
1928 user-select: none; |
1928 } |
1929 } |
1929 .components-notice-list .components-notice__action.components-button{ |
1930 |
1930 display:block; |
1931 .DateInput_input__focused { |
1931 margin-right:0; |
1932 outline: 0; |
1932 margin-top:8px; |
1933 background: #fff; |
1933 } |
1934 border: 0; |
1934 |
1935 border-top: 0; |
1935 .components-panel{ |
1936 border-right: 0; |
1936 background:#fff; |
1937 border-bottom: 2px solid #008489; |
1937 border:1px solid #e0e0e0; |
1938 border-left: 0; |
1938 } |
1939 } |
1939 .components-panel>.components-panel__body:first-child,.components-panel>.components-panel__header:first-child{ |
1940 |
1940 margin-top:-1px; |
1941 .DateInput_input__disabled { |
1941 } |
1942 background: #f2f2f2; |
1942 .components-panel>.components-panel__body:last-child,.components-panel>.components-panel__header:last-child{ |
1943 font-style: italic; |
1943 border-bottom-width:0; |
1944 } |
1944 } |
1945 |
1945 |
1946 .DateInput_screenReaderMessage { |
1946 .components-panel+.components-panel{ |
1947 border: 0; |
1947 margin-top:-1px; |
1948 clip: rect(0, 0, 0, 0); |
1948 } |
1949 height: 1px; |
1949 |
1950 margin: -1px; |
1950 .components-panel__body{ |
1951 overflow: hidden; |
1951 border-bottom:1px solid #e0e0e0; |
1952 padding: 0; |
1952 border-top:1px solid #e0e0e0; |
1953 position: absolute; |
1953 } |
1954 width: 1px; |
1954 .components-panel__body h3{ |
1955 } |
1955 margin:0 0 .5em; |
1956 |
1956 } |
1957 .DateInput_fang { |
1957 .components-panel__body.is-opened{ |
1958 position: absolute; |
1958 padding:16px; |
1959 width: 20px; |
1959 } |
1960 height: 10px; |
1960 |
1961 left: 22px; |
1961 .components-panel__header{ |
1962 z-index: 2; |
1962 align-items:center; |
1963 } |
1963 border-bottom:1px solid #ddd; |
1964 |
1964 box-sizing:initial; |
1965 .DateInput_fangShape { |
1965 display:flex; |
1966 fill: #fff; |
1966 flex-shrink:0; |
1967 } |
1967 height:47px; |
1968 |
1968 justify-content:space-between; |
1969 .DateInput_fangStroke { |
1969 padding:0 16px; |
1970 stroke: #dbdbdb; |
1970 } |
1971 fill: transparent; |
1971 .components-panel__header h2{ |
1972 } |
1972 color:inherit; |
1973 |
1973 font-size:inherit; |
1974 .DateRangePickerInput { |
1974 margin:0; |
1975 background-color: #fff; |
1975 } |
1976 display: inline-block; |
1976 |
1977 } |
1977 .components-panel__body+.components-panel__body,.components-panel__body+.components-panel__header,.components-panel__header+.components-panel__body,.components-panel__header+.components-panel__header{ |
1978 |
1978 margin-top:-1px; |
1979 .DateRangePickerInput__disabled { |
1979 } |
1980 background: #f2f2f2; |
1980 |
1981 } |
1981 .components-panel__body>.components-panel__body-title{ |
1982 |
1982 display:block; |
1983 .DateRangePickerInput__withBorder { |
1983 font-size:inherit; |
1984 border-radius: 2px; |
1984 margin-bottom:0; |
1985 border: 1px solid #dbdbdb; |
1985 margin-top:0; |
1986 } |
1986 padding:0; |
1987 |
1987 transition:background .1s ease-in-out; |
1988 .DateRangePickerInput__rtl { |
1988 } |
1989 direction: rtl; |
1989 @media (prefers-reduced-motion:reduce){ |
1990 } |
1990 .components-panel__body>.components-panel__body-title{ |
1991 |
1991 transition-delay:0s; |
1992 .DateRangePickerInput__block { |
1992 transition-duration:0s; |
1993 display: block; |
1993 } |
1994 } |
1994 } |
1995 |
1995 |
1996 .DateRangePickerInput__showClearDates { |
1996 .components-panel__body.is-opened>.components-panel__body-title{ |
1997 padding-right: 30px; |
1997 margin:-16px -16px 5px; |
1998 } |
1998 } |
1999 |
1999 |
2000 .DateRangePickerInput_arrow { |
2000 .components-panel__body>.components-panel__body-title:hover{ |
2001 display: inline-block; |
2001 background:#f0f0f0; |
2002 vertical-align: middle; |
2002 border:none; |
2003 color: #484848; |
2003 } |
2004 } |
2004 |
2005 |
2005 .components-panel__body-toggle.components-button{ |
2006 .DateRangePickerInput_arrow_svg { |
2006 border:none; |
2007 vertical-align: middle; |
2007 box-shadow:none; |
2008 fill: #484848; |
2008 color:#1e1e1e; |
2009 height: 24px; |
2009 font-weight:500; |
2010 width: 24px; |
2010 height:auto; |
2011 } |
2011 outline:none; |
2012 |
2012 padding:16px 16px 16px 48px; |
2013 .DateRangePickerInput_clearDates { |
2013 position:relative; |
2014 background: 0 0; |
2014 text-align:right; |
2015 border: 0; |
2015 transition:background .1s ease-in-out; |
2016 color: inherit; |
2016 width:100%; |
2017 font: inherit; |
2017 } |
2018 line-height: normal; |
2018 @media (prefers-reduced-motion:reduce){ |
2019 overflow: visible; |
2019 .components-panel__body-toggle.components-button{ |
2020 cursor: pointer; |
2020 transition-delay:0s; |
2021 padding: 10px; |
2021 transition-duration:0s; |
2022 margin: 0 10px 0 5px; |
2022 } |
2023 position: absolute; |
2023 } |
2024 right: 0; |
2024 .components-panel__body-toggle.components-button:focus{ |
2025 top: 50%; |
2025 border-radius:0; |
2026 transform: translateY(-50%); |
2026 box-shadow:inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); |
2027 } |
2027 } |
2028 |
2028 .components-panel__body-toggle.components-button .components-panel__arrow{ |
2029 .DateRangePickerInput_clearDates__small { |
2029 color:#1e1e1e; |
2030 padding: 6px; |
2030 left:16px; |
2031 } |
2031 position:absolute; |
2032 |
2032 top:50%; |
2033 .DateRangePickerInput_clearDates_default:focus, |
2033 transform:translateY(-50%); |
2034 .DateRangePickerInput_clearDates_default:hover { |
2034 fill:currentColor; |
2035 background: #dbdbdb; |
2035 transition:color .1s ease-in-out; |
2036 border-radius: 50%; |
2036 } |
2037 } |
2037 @media (prefers-reduced-motion:reduce){ |
2038 |
2038 .components-panel__body-toggle.components-button .components-panel__arrow{ |
2039 .DateRangePickerInput_clearDates__hide { |
2039 transition-delay:0s; |
2040 visibility: hidden; |
2040 transition-duration:0s; |
2041 } |
2041 } |
2042 |
2042 } |
2043 .DateRangePickerInput_clearDates_svg { |
2043 body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right{ |
2044 fill: #82888a; |
2044 -ms-filter:fliph; |
2045 height: 12px; |
2045 filter:FlipH; |
2046 width: 15px; |
2046 margin-top:-10px; |
2047 vertical-align: middle; |
2047 transform:scaleX(-1); |
2048 } |
2048 } |
2049 |
2049 |
2050 .DateRangePickerInput_clearDates_svg__small { |
2050 .components-panel__icon{ |
2051 height: 9px; |
2051 color:#757575; |
2052 } |
2052 margin:-2px 6px -2px 0; |
2053 |
2053 } |
2054 .DateRangePickerInput_calendarIcon { |
2054 |
2055 background: 0 0; |
2055 .components-panel__body-toggle-icon{ |
2056 border: 0; |
2056 margin-left:-5px; |
2057 color: inherit; |
2057 } |
2058 font: inherit; |
2058 |
2059 line-height: normal; |
2059 .components-panel__color-title{ |
2060 overflow: visible; |
2060 float:right; |
2061 cursor: pointer; |
2061 height:19px; |
2062 display: inline-block; |
2062 } |
2063 vertical-align: middle; |
2063 |
2064 padding: 10px; |
2064 .components-panel__row{ |
2065 margin: 0 5px 0 10px; |
2065 align-items:center; |
2066 } |
2066 display:flex; |
2067 |
2067 justify-content:space-between; |
2068 .DateRangePickerInput_calendarIcon_svg { |
2068 margin-top:8px; |
2069 fill: #82888a; |
2069 min-height:36px; |
2070 height: 15px; |
2070 } |
2071 width: 14px; |
2071 .components-panel__row select{ |
2072 vertical-align: middle; |
2072 min-width:0; |
2073 } |
2073 } |
2074 |
2074 .components-panel__row label{ |
2075 .DateRangePicker { |
2075 flex-shrink:0; |
2076 position: relative; |
2076 margin-left:12px; |
2077 display: inline-block; |
2077 max-width:75%; |
2078 } |
2078 } |
2079 |
2079 .components-panel__row:empty,.components-panel__row:first-of-type{ |
2080 .DateRangePicker__block { |
2080 margin-top:0; |
2081 display: block; |
2081 } |
2082 } |
2082 |
2083 |
2083 .components-panel .circle-picker{ |
2084 .DateRangePicker_picker { |
2084 padding-bottom:20px; |
2085 z-index: 1; |
2085 } |
2086 background-color: #fff; |
2086 |
2087 position: absolute; |
2087 .components-placeholder.components-placeholder{ |
2088 } |
2088 align-items:flex-start; |
2089 |
2089 box-sizing:border-box; |
2090 .DateRangePicker_picker__rtl { |
2090 color:#1e1e1e; |
2091 direction: rtl; |
2091 display:flex; |
2092 } |
2092 flex-direction:column; |
2093 |
2093 font-size:13px; |
2094 .DateRangePicker_picker__directionLeft { |
2094 gap:16px; |
2095 left: 0; |
2095 margin:0; |
2096 } |
2096 padding:24px; |
2097 |
2097 position:relative; |
2098 .DateRangePicker_picker__directionRight { |
2098 text-align:right; |
2099 right: 0; |
2099 width:100%; |
2100 } |
2100 -moz-font-smoothing:subpixel-antialiased; |
2101 |
2101 -webkit-font-smoothing:subpixel-antialiased; |
2102 .DateRangePicker_picker__portal { |
2102 background-color:#fff; |
2103 background-color: rgba(0, 0, 0, 0.3); |
2103 border-radius:2px; |
2104 position: fixed; |
2104 box-shadow:inset 0 0 0 1px #1e1e1e; |
2105 top: 0; |
2105 outline:1px solid #0000; |
2106 left: 0; |
2106 } |
2107 height: 100%; |
2107 |
2108 width: 100%; |
2108 .components-placeholder__error,.components-placeholder__fieldset,.components-placeholder__instructions,.components-placeholder__label{ |
2109 } |
2109 font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif; |
2110 |
2110 font-size:13px; |
2111 .DateRangePicker_picker__fullScreenPortal { |
2111 font-weight:400; |
2112 background-color: #fff; |
2112 letter-spacing:normal; |
2113 } |
2113 line-height:normal; |
2114 |
2114 text-transform:none; |
2115 .DateRangePicker_closeButton { |
2115 } |
2116 background: 0 0; |
2116 |
2117 border: 0; |
2117 .components-placeholder__label{ |
2118 color: inherit; |
2118 align-items:center; |
2119 font: inherit; |
2119 display:flex; |
2120 line-height: normal; |
2120 font-weight:600; |
2121 overflow: visible; |
2121 } |
2122 cursor: pointer; |
2122 .components-placeholder__label .block-editor-block-icon,.components-placeholder__label .dashicon,.components-placeholder__label>svg{ |
2123 position: absolute; |
2123 margin-left:4px; |
2124 top: 0; |
2124 fill:currentColor; |
2125 right: 0; |
2125 } |
2126 padding: 15px; |
2126 @media (forced-colors:active){ |
2127 z-index: 2; |
2127 .components-placeholder__label .block-editor-block-icon,.components-placeholder__label .dashicon,.components-placeholder__label>svg{ |
2128 } |
2128 fill:CanvasText; |
2129 |
2129 } |
2130 .DateRangePicker_closeButton:focus, |
2130 } |
2131 .DateRangePicker_closeButton:hover { |
2131 .components-placeholder__label:empty{ |
2132 color: #b0b3b4; |
2132 display:none; |
2133 text-decoration: none; |
2133 } |
2134 } |
2134 |
2135 |
2135 .components-placeholder__fieldset,.components-placeholder__fieldset form{ |
2136 .DateRangePicker_closeButton_svg { |
2136 display:flex; |
2137 height: 15px; |
2137 flex-direction:row; |
2138 width: 15px; |
2138 flex-wrap:wrap; |
2139 fill: #cacccd; |
2139 gap:16px; |
2140 } |
2140 justify-content:flex-start; |
2141 .components-datetime { |
2141 width:100%; |
2142 padding: 16px; |
2142 } |
2143 } |
2143 .components-placeholder__fieldset form p,.components-placeholder__fieldset p{ |
2144 .components-panel__body .components-datetime { |
2144 font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif; |
2145 padding: 0; |
2145 font-size:13px; |
2146 } |
2146 } |
2147 .components-datetime .components-datetime__calendar-help { |
2147 |
2148 padding: 16px; |
2148 .components-placeholder__fieldset.is-column-layout,.components-placeholder__fieldset.is-column-layout form{ |
2149 min-width: 260px; |
2149 flex-direction:column; |
2150 } |
2150 } |
2151 .components-datetime .components-datetime__calendar-help h4 { |
2151 |
2152 margin: 0; |
2152 .components-placeholder__input[type=url]{ |
2153 } |
2153 border:1px solid #949494; |
2154 .components-datetime .components-datetime__buttons { |
2154 border-radius:2px; |
2155 display: flex; |
2155 box-shadow:0 0 0 #0000; |
2156 justify-content: space-between; |
2156 flex:1 1 auto; |
2157 } |
2157 font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif; |
2158 .components-datetime .components-datetime__date-help-toggle { |
2158 font-size:16px; |
2159 display: block; |
2159 line-height:normal; |
2160 margin-right: auto; |
2160 padding:6px 8px; |
2161 } |
2161 transition:box-shadow .1s linear; |
2162 .components-datetime fieldset { |
2162 } |
2163 border: 0; |
2163 @media (prefers-reduced-motion:reduce){ |
2164 padding: 0; |
2164 .components-placeholder__input[type=url]{ |
2165 margin: 0; |
2165 transition-delay:0s; |
2166 } |
2166 transition-duration:0s; |
2167 .components-datetime select, |
2167 } |
2168 .components-datetime input { |
2168 } |
2169 box-shadow: 0 0 0 transparent; |
2169 @media (min-width:600px){ |
2170 transition: box-shadow 0.1s linear; |
2170 .components-placeholder__input[type=url]{ |
2171 border-radius: 2px; |
2171 font-size:13px; |
2172 border: 1px solid #757575; |
2172 line-height:normal; |
2173 } |
2173 } |
2174 @media (prefers-reduced-motion: reduce) { |
2174 } |
2175 .components-datetime select, |
2175 .components-placeholder__input[type=url]:focus{ |
2176 .components-datetime input { |
2176 border-color:var(--wp-admin-theme-color); |
2177 transition-duration: 0s; |
2177 box-shadow:0 0 0 .5px var(--wp-admin-theme-color); |
2178 transition-delay: 0s; |
2178 outline:2px solid #0000; |
2179 } |
2179 } |
2180 } |
2180 .components-placeholder__input[type=url]::-webkit-input-placeholder{ |
2181 .components-datetime select, |
2181 color:#1e1e1e9e; |
2182 .components-datetime input[type=number], |
2182 } |
2183 .components-datetime .components-button { |
2183 .components-placeholder__input[type=url]::-moz-placeholder{ |
2184 height: 30px; |
2184 color:#1e1e1e9e; |
2185 margin-top: 0; |
2185 opacity:1; |
2186 margin-bottom: 0; |
2186 } |
2187 } |
2187 .components-placeholder__input[type=url]:-ms-input-placeholder{ |
2188 .components-datetime .components-button:focus { |
2188 color:#1e1e1e9e; |
2189 z-index: 1; |
2189 } |
2190 } |
2190 |
2191 |
2191 .components-placeholder__error{ |
2192 .components-datetime__date { |
2192 gap:8px; |
2193 min-height: 236px; |
2193 width:100%; |
2194 border-top: 1px solid #ddd; |
2194 } |
2195 } |
2195 |
2196 .components-datetime__date .DayPickerNavigation_leftButton__horizontalDefault { |
2196 .components-placeholder__fieldset .components-button:not(.is-link)~.components-button.is-link{ |
2197 left: 13px; |
2197 margin-left:10px; |
2198 } |
2198 margin-right:10px; |
2199 .components-datetime__date .CalendarMonth_caption { |
2199 } |
2200 font-size: 13px; |
2200 .components-placeholder__fieldset .components-button:not(.is-link)~.components-button.is-link:last-child{ |
2201 } |
2201 margin-left:0; |
2202 .components-datetime__date .CalendarMonth_table { |
2202 } |
2203 border-collapse: separate; |
2203 |
2204 border-spacing: 2px; |
2204 .components-placeholder.is-medium .components-placeholder__instructions,.components-placeholder.is-small .components-placeholder__instructions{ |
2205 } |
2205 display:none; |
2206 .components-datetime__date .CalendarDay { |
2206 } |
2207 font-size: 13px; |
2207 .components-placeholder.is-medium .components-placeholder__fieldset,.components-placeholder.is-medium .components-placeholder__fieldset form,.components-placeholder.is-small .components-placeholder__fieldset,.components-placeholder.is-small .components-placeholder__fieldset form{ |
2208 border: none; |
2208 flex-direction:column; |
2209 border-radius: 50%; |
2209 } |
2210 text-align: center; |
2210 .components-placeholder.is-medium .components-button,.components-placeholder.is-medium .components-placeholder__fieldset>*,.components-placeholder.is-small .components-button,.components-placeholder.is-small .components-placeholder__fieldset>*{ |
2211 } |
2211 justify-content:center; |
2212 .components-datetime__date .CalendarDay:focus { |
2212 width:100%; |
2213 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 3px #fff; |
2213 } |
2214 outline: 2px solid transparent; |
2214 .components-placeholder.is-small{ |
2215 } |
2215 padding:16px; |
2216 .components-datetime__date .CalendarDay__selected { |
2216 } |
2217 background: var(--wp-admin-theme-color); |
2217 .components-placeholder.has-illustration{ |
2218 border: 2px solid transparent; |
2218 -webkit-backdrop-filter:blur(100px); |
2219 } |
2219 backdrop-filter:blur(100px); |
2220 .components-datetime__date .CalendarDay__selected:hover { |
2220 backface-visibility:hidden; |
2221 background: var(--wp-admin-theme-color-darker-20); |
2221 background-color:initial; |
2222 } |
2222 border-radius:2px; |
2223 .components-datetime__date .CalendarDay__selected:focus { |
2223 box-shadow:none; |
2224 box-shadow: inset 0 0 0 1px #fff; |
2224 color:inherit; |
2225 } |
2225 display:flex; |
2226 .components-datetime__date .DayPickerNavigation_button__horizontalDefault { |
2226 overflow:hidden; |
2227 padding: 2px 8px; |
2227 } |
2228 top: 20px; |
2228 .is-dark-theme .components-placeholder.has-illustration{ |
2229 } |
2229 background-color:#0000001a; |
2230 .components-datetime__date .DayPickerNavigation_button__horizontalDefault:focus { |
2230 } |
2231 border-color: var(--wp-admin-theme-color); |
2231 .components-placeholder.has-illustration .components-placeholder__fieldset{ |
2232 box-shadow: 0 0 0 1px var(--wp-admin-theme-color); |
2232 margin-left:0; |
2233 outline: 2px solid transparent; |
2233 margin-right:0; |
2234 } |
2234 } |
2235 .components-datetime__date .DayPicker_weekHeader { |
2235 .components-placeholder.has-illustration .components-button,.components-placeholder.has-illustration .components-placeholder__instructions,.components-placeholder.has-illustration .components-placeholder__label{ |
2236 top: 50px; |
2236 opacity:0; |
2237 } |
2237 pointer-events:none; |
2238 .components-datetime__date .DayPicker_weekHeader .DayPicker_weekHeader_ul { |
2238 transition:opacity .1s linear; |
2239 margin: 1px; |
2239 } |
2240 padding-right: 0; |
2240 @media (prefers-reduced-motion:reduce){ |
2241 padding-left: 0; |
2241 .components-placeholder.has-illustration .components-button,.components-placeholder.has-illustration .components-placeholder__instructions,.components-placeholder.has-illustration .components-placeholder__label{ |
2242 } |
2242 transition-delay:0s; |
2243 .components-datetime__date.is-description-visible .DayPicker { |
2243 transition-duration:0s; |
2244 visibility: hidden; |
2244 } |
2245 } |
2245 } |
2246 |
2246 .is-selected>.components-placeholder.has-illustration .components-button,.is-selected>.components-placeholder.has-illustration .components-placeholder__instructions,.is-selected>.components-placeholder.has-illustration .components-placeholder__label{ |
2247 .components-datetime__date .CalendarDay .components-datetime__date__day { |
2247 opacity:1; |
2248 height: 100%; |
2248 pointer-events:auto; |
2249 display: flex; |
2249 } |
2250 justify-content: center; |
2250 .components-placeholder.has-illustration:before{ |
2251 align-content: center; |
2251 background:currentColor; |
2252 flex-direction: column; |
2252 bottom:0; |
2253 position: relative; |
2253 content:""; |
2254 } |
2254 left:0; |
2255 .components-datetime__date .CalendarDay .components-datetime__date__day.has-events::before { |
2255 opacity:.1; |
2256 content: " "; |
2256 pointer-events:none; |
2257 width: 4px; |
2257 position:absolute; |
2258 height: 4px; |
2258 right:0; |
2259 border-radius: 2px; |
2259 top:0; |
2260 position: absolute; |
2260 } |
2261 right: 50%; |
2261 .is-selected .components-placeholder.has-illustration{ |
2262 margin-right: -2px; |
2262 overflow:auto; |
2263 bottom: 0; |
2263 } |
2264 background-color: #fff; |
2264 |
2265 } |
2265 .components-placeholder__preview{ |
2266 |
2266 display:flex; |
2267 .components-datetime__date .CalendarDay:not(.CalendarDay__selected) .components-datetime__date__day.has-events::before { |
2267 justify-content:center; |
2268 background: var(--wp-admin-theme-color); |
2268 } |
2269 } |
2269 |
2270 |
2270 .components-placeholder__illustration{ |
2271 .components-datetime__time { |
2271 box-sizing:initial; |
2272 padding-bottom: 16px; |
2272 height:100%; |
2273 } |
2273 position:absolute; |
2274 .components-datetime__time fieldset { |
2274 right:50%; |
2275 position: relative; |
2275 top:50%; |
2276 margin-bottom: 0.5em; |
2276 transform:translate(50%, -50%); |
2277 } |
2277 width:100%; |
2278 .components-datetime__time fieldset + fieldset { |
2278 stroke:currentColor; |
2279 margin-bottom: 0; |
2279 opacity:.25; |
2280 } |
2280 } |
2281 .components-datetime__time .components-datetime__time-field-am-pm fieldset { |
2281 |
2282 margin-top: 0; |
2282 .components-popover{ |
2283 } |
2283 box-sizing:border-box; |
2284 .components-datetime__time .components-datetime__time-wrapper { |
2284 will-change:transform; |
2285 display: flex; |
2285 z-index:1000000; |
2286 } |
2286 } |
2287 .components-datetime__time .components-datetime__time-wrapper .components-datetime__time-separator { |
2287 .components-popover *,.components-popover :after,.components-popover :before{ |
2288 display: inline-block; |
2288 box-sizing:inherit; |
2289 padding: 0 0 0 3px; |
2289 } |
2290 } |
2290 .components-popover.is-expanded{ |
2291 .components-datetime__time .components-datetime__time-wrapper .components-datetime__time-field-time { |
2291 bottom:0; |
2292 direction: ltr; |
2292 left:0; |
2293 } |
2293 position:fixed; |
2294 .components-datetime__time .components-datetime__time-wrapper .components-datetime__time-field select { |
2294 right:0; |
2295 margin-left: 4px; |
2295 top:0; |
2296 } |
2296 z-index:1000000 !important; |
2297 .components-datetime__time .components-datetime__time-wrapper .components-datetime__time-field select:focus { |
2297 } |
2298 position: relative; |
2298 |
2299 z-index: 1; |
2299 .components-popover__content{ |
2300 } |
2300 background:#fff; |
2301 .components-datetime__time .components-datetime__time-wrapper .components-datetime__time-field input[type=number] { |
2301 border-radius:2px; |
2302 padding: 2px; |
2302 box-shadow:0 0 0 1px #ccc,0 .7px 1px #0000001a,0 1.2px 1.7px -.2px #0000001a,0 2.3px 3.3px -.5px #0000001a; |
2303 margin-left: 4px; |
2303 box-sizing:border-box; |
2304 text-align: center; |
2304 width:min-content; |
2305 -moz-appearance: textfield; |
2305 } |
2306 } |
2306 .is-alternate .components-popover__content{ |
2307 .components-datetime__time .components-datetime__time-wrapper .components-datetime__time-field input[type=number]:focus { |
2307 box-shadow:0 0 0 1px #1e1e1e; |
2308 position: relative; |
2308 } |
2309 z-index: 1; |
2309 .is-unstyled .components-popover__content{ |
2310 } |
2310 background:none; |
2311 .components-datetime__time .components-datetime__time-wrapper .components-datetime__time-field input[type=number]::-webkit-inner-spin-button { |
2311 border-radius:0; |
2312 -webkit-appearance: none; |
2312 box-shadow:none; |
2313 margin: 0; |
2313 } |
2314 } |
2314 .components-popover.is-expanded .components-popover__content{ |
2315 .components-datetime__time.is-12-hour .components-datetime__time-field-day input { |
2315 box-shadow:0 -1px 0 0 #ccc; |
2316 margin: -4px 0 0 !important; |
2316 height:calc(100% - 48px); |
2317 border-radius: 0 2px 2px 0 !important; |
2317 overflow-y:visible; |
2318 } |
2318 position:static; |
2319 .components-datetime__time.is-12-hour .components-datetime__time-field-year input { |
2319 width:auto; |
2320 border-radius: 2px 0 0 2px !important; |
2320 } |
2321 } |
2321 .components-popover.is-expanded.is-alternate .components-popover__content{ |
2322 |
2322 box-shadow:0 -1px 0 #1e1e1e; |
2323 .components-datetime__timezone { |
2323 } |
2324 line-height: 30px; |
2324 |
2325 margin-right: 4px; |
2325 .components-popover__header{ |
2326 -webkit-text-decoration: underline dotted; |
2326 align-items:center; |
2327 text-decoration: underline dotted; |
2327 background:#fff; |
2328 } |
2328 display:flex; |
2329 |
2329 height:48px; |
2330 .components-datetime__time-legend { |
2330 justify-content:space-between; |
2331 font-weight: 600; |
2331 padding:0 16px 0 8px; |
2332 margin-top: 0.5em; |
2332 } |
2333 } |
2333 |
2334 .components-datetime__time-legend.invisible { |
2334 .components-popover__header-title{ |
2335 position: absolute; |
2335 overflow:hidden; |
2336 top: -999em; |
2336 text-overflow:ellipsis; |
2337 right: -999em; |
2337 white-space:nowrap; |
2338 } |
2338 width:100%; |
2339 |
2339 } |
2340 .components-datetime__time-field-integer-field { |
2340 |
2341 font-family: inherit; |
2341 .components-popover__close.components-button{ |
2342 } |
2342 z-index:5; |
2343 |
2343 } |
2344 .components-datetime__time-field-hours-input, |
2344 |
2345 .components-datetime__time-field-minutes-input, |
2345 .components-popover__arrow{ |
2346 .components-datetime__time-field-day-input { |
2346 display:flex; |
2347 width: 35px; |
2347 height:14px; |
2348 } |
2348 pointer-events:none; |
2349 |
2349 position:absolute; |
2350 .components-datetime__time-field-year-input { |
2350 width:14px; |
2351 width: 55px; |
2351 } |
2352 } |
2352 .components-popover__arrow:before{ |
2353 |
2353 background-color:#fff; |
2354 .components-datetime__time-field-month-select { |
2354 content:""; |
2355 max-width: 145px; |
2355 height:2px; |
2356 } |
2356 left:1px; |
2357 |
2357 position:absolute; |
2358 .components-popover .components-datetime__date { |
2358 right:1px; |
2359 padding-right: 4px; |
2359 top:-1px; |
2360 } |
2360 } |
2361 |
2361 .components-popover__arrow.is-top{ |
2362 .block-editor-dimension-control .components-base-control__field { |
2362 bottom:-14px !important; |
2363 display: flex; |
2363 transform:rotate(0); |
2364 align-items: center; |
2364 } |
2365 } |
2365 .components-popover__arrow.is-right{ |
2366 .block-editor-dimension-control .components-base-control__label { |
2366 left:-14px !important; |
2367 display: flex; |
2367 transform:rotate(90deg); |
2368 align-items: center; |
2368 } |
2369 margin-left: 1em; |
2369 .components-popover__arrow.is-bottom{ |
2370 margin-bottom: 0; |
2370 top:-14px !important; |
2371 } |
2371 transform:rotate(180deg); |
2372 .block-editor-dimension-control .components-base-control__label .dashicon { |
2372 } |
2373 margin-left: 0.5em; |
2373 .components-popover__arrow.is-left{ |
2374 } |
2374 right:-14px !important; |
2375 .block-editor-dimension-control.is-manual .components-base-control__label { |
2375 transform:rotate(-90deg); |
2376 width: 10em; |
2376 } |
2377 } |
2377 |
2378 |
2378 .components-popover__triangle{ |
2379 body.is-dragging-components-draggable { |
2379 display:block; |
2380 cursor: move; |
2380 flex:1; |
2381 /* Fallback for IE/Edge < 14 */ |
2381 } |
2382 cursor: grabbing !important; |
2382 |
2383 } |
2383 .components-popover__triangle-bg{ |
2384 |
2384 fill:#fff; |
2385 .components-draggable__invisible-drag-image { |
2385 } |
2386 position: fixed; |
2386 |
2387 right: -1000px; |
2387 .components-popover__triangle-border{ |
2388 height: 50px; |
2388 fill:#0000; |
2389 width: 50px; |
2389 stroke-width:1px; |
2390 } |
2390 stroke:#ccc; |
2391 |
2391 } |
2392 .components-draggable__clone { |
2392 .is-alternate .components-popover__triangle-border{ |
2393 position: fixed; |
2393 stroke:#1e1e1e; |
2394 padding: 0; |
2394 } |
2395 background: transparent; |
2395 |
2396 pointer-events: none; |
2396 .components-radio-control__option{ |
2397 z-index: 1000000000; |
2397 align-items:center; |
2398 } |
2398 display:flex; |
2399 |
2399 } |
2400 .components-drop-zone { |
2400 |
2401 position: absolute; |
2401 .components-radio-control__input[type=radio]{ |
2402 top: 0; |
2402 appearance:none; |
2403 left: 0; |
2403 border:1px solid #1e1e1e; |
2404 bottom: 0; |
2404 border-radius:2px; |
2405 right: 0; |
2405 border-radius:50%; |
2406 z-index: 40; |
2406 box-shadow:0 0 0 #0000; |
2407 visibility: hidden; |
2407 cursor:pointer; |
2408 opacity: 0; |
2408 display:inline-flex; |
2409 border-radius: 2px; |
2409 font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif; |
2410 } |
2410 font-size:16px; |
2411 .components-drop-zone.is-active { |
2411 height:24px; |
2412 opacity: 1; |
2412 line-height:normal; |
2413 visibility: visible; |
2413 margin:0 0 0 6px; |
2414 } |
2414 max-width:24px; |
2415 |
2415 min-width:24px; |
2416 .components-drop-zone__content { |
2416 padding:0; |
2417 position: absolute; |
2417 transition:box-shadow .1s linear; |
2418 top: 0; |
2418 transition:none; |
2419 bottom: 0; |
2419 width:24px; |
2420 right: 0; |
2420 } |
2421 left: 0; |
2421 @media (prefers-reduced-motion:reduce){ |
2422 height: 100%; |
2422 .components-radio-control__input[type=radio]{ |
2423 width: 100%; |
2423 transition-delay:0s; |
2424 display: flex; |
2424 transition-duration:0s; |
2425 background-color: var(--wp-admin-theme-color); |
2425 } |
2426 align-items: center; |
2426 } |
2427 justify-content: center; |
2427 @media (min-width:600px){ |
2428 z-index: 50; |
2428 .components-radio-control__input[type=radio]{ |
2429 text-align: center; |
2429 font-size:13px; |
2430 color: #fff; |
2430 line-height:normal; |
2431 } |
2431 } |
2432 |
2432 } |
2433 .components-drop-zone__content-icon, |
2433 .components-radio-control__input[type=radio]:focus{ |
2434 .components-drop-zone__content-text { |
2434 border-color:var(--wp-admin-theme-color); |
2435 display: block; |
2435 box-shadow:0 0 0 .5px var(--wp-admin-theme-color); |
2436 } |
2436 } |
2437 |
2437 .components-radio-control__input[type=radio]::-webkit-input-placeholder{ |
2438 .components-drop-zone__content-icon { |
2438 color:#1e1e1e9e; |
2439 margin: 0 auto; |
2439 } |
2440 line-height: 0; |
2440 .components-radio-control__input[type=radio]::-moz-placeholder{ |
2441 fill: currentColor; |
2441 color:#1e1e1e9e; |
2442 pointer-events: none; |
2442 opacity:1; |
2443 } |
2443 } |
2444 |
2444 .components-radio-control__input[type=radio]:-ms-input-placeholder{ |
2445 .components-drop-zone__content-text { |
2445 color:#1e1e1e9e; |
2446 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; |
2446 } |
2447 font-size: 13px; |
2447 @media (min-width:600px){ |
2448 } |
2448 .components-radio-control__input[type=radio]{ |
2449 |
2449 height:20px; |
2450 .components-dropdown { |
2450 max-width:20px; |
2451 display: inline-block; |
2451 min-width:20px; |
2452 } |
2452 width:20px; |
2453 |
2453 } |
2454 .components-dropdown__content .components-popover__content > div { |
2454 } |
2455 padding: 8px; |
2455 .components-radio-control__input[type=radio]:checked:before{ |
2456 } |
2456 background-color:#fff; |
2457 .components-dropdown__content [role=menuitem] { |
2457 border:4px solid #fff; |
2458 white-space: nowrap; |
2458 box-sizing:inherit; |
2459 } |
2459 height:8px; |
2460 |
2460 margin:0; |
2461 .components-dropdown-menu__menu { |
2461 transform:translate(-7px, 7px); |
2462 width: 100%; |
2462 width:8px; |
2463 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; |
2463 } |
2464 font-size: 13px; |
2464 @media (min-width:600px){ |
2465 line-height: 1.4; |
2465 .components-radio-control__input[type=radio]:checked:before{ |
2466 } |
2466 transform:translate(-5px, 5px); |
2467 .components-dropdown-menu__menu .components-dropdown-menu__menu-item, |
2467 } |
2468 .components-dropdown-menu__menu .components-menu-item { |
2468 } |
2469 width: 100%; |
2469 .components-radio-control__input[type=radio]:focus{ |
2470 padding: 6px; |
2470 box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color); |
2471 outline: none; |
2471 outline:2px solid #0000; |
2472 cursor: pointer; |
2472 } |
2473 white-space: nowrap; |
2473 .components-radio-control__input[type=radio]:checked{ |
2474 } |
2474 background:var(--wp-admin-theme-color); |
2475 .components-dropdown-menu__menu .components-dropdown-menu__menu-item.has-separator, |
2475 border-color:var(--wp-admin-theme-color); |
2476 .components-dropdown-menu__menu .components-menu-item.has-separator { |
2476 } |
2477 margin-top: 6px; |
2477 .components-radio-control__input[type=radio]:focus{ |
2478 position: relative; |
2478 box-shadow:0 0 0 2px var(--wp-components-color-background, #fff), 0 0 0 4px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); |
2479 overflow: visible; |
2479 } |
2480 } |
2480 .components-radio-control__input[type=radio]:checked{ |
2481 .components-dropdown-menu__menu .components-dropdown-menu__menu-item.has-separator::before, |
2481 background:var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); |
2482 .components-dropdown-menu__menu .components-menu-item.has-separator::before { |
2482 border-color:var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); |
2483 display: block; |
2483 } |
2484 content: ""; |
2484 .components-radio-control__input[type=radio]:checked:before{ |
2485 box-sizing: content-box; |
2485 border-radius:50%; |
2486 background-color: #ddd; |
2486 content:""; |
2487 position: absolute; |
2487 } |
2488 top: -3px; |
2488 |
2489 right: 0; |
2489 .components-radio-control__label{ |
2490 left: 0; |
2490 cursor:pointer; |
2491 height: 1px; |
2491 } |
2492 } |
2492 |
2493 .components-dropdown-menu__menu .components-dropdown-menu__menu-item.is-active svg, |
2493 .components-resizable-box__handle{ |
2494 .components-dropdown-menu__menu .components-menu-item.is-active svg { |
2494 display:none; |
2495 color: #fff; |
2495 height:23px; |
2496 background: #1e1e1e; |
2496 width:23px; |
2497 box-shadow: 0 0 0 1px #1e1e1e; |
2497 z-index:2; |
2498 border-radius: 1px; |
2498 } |
2499 } |
2499 .components-resizable-box__container.has-show-handle .components-resizable-box__handle{ |
2500 .components-dropdown-menu__menu .components-dropdown-menu__menu-item > svg, |
2500 display:block; |
2501 .components-dropdown-menu__menu .components-menu-item > svg { |
2501 } |
2502 border-radius: 2px; |
2502 |
2503 width: 24px; |
2503 .components-resizable-box__container>img{ |
2504 height: 24px; |
2504 width:inherit; |
2505 } |
2505 } |
2506 .components-dropdown-menu__menu .components-dropdown-menu__menu-item.is-icon-only, |
2506 |
2507 .components-dropdown-menu__menu .components-menu-item.is-icon-only { |
2507 .components-resizable-box__handle:after{ |
2508 width: auto; |
2508 background:#fff; |
2509 } |
2509 border-radius:50%; |
2510 .components-dropdown-menu__menu .components-menu-item__button, |
2510 box-shadow:inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); |
2511 .components-dropdown-menu__menu .components-menu-item__button.components-button { |
2511 content:""; |
2512 min-height: 36px; |
2512 cursor:inherit; |
2513 height: auto; |
2513 display:block; |
2514 text-align: right; |
2514 height:15px; |
2515 padding-right: 8px; |
2515 left:calc(50% - 8px); |
2516 padding-left: 8px; |
2516 outline:2px solid #0000; |
2517 } |
2517 position:absolute; |
2518 .components-dropdown-menu__menu .components-menu-group { |
2518 top:calc(50% - 8px); |
2519 padding: 8px; |
2519 width:15px; |
2520 margin-top: 0; |
2520 } |
2521 margin-bottom: 0; |
2521 |
2522 margin-right: -8px; |
2522 .components-resizable-box__side-handle:before{ |
2523 margin-left: -8px; |
2523 background:var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); |
2524 } |
2524 border-radius:2px; |
2525 .components-dropdown-menu__menu .components-menu-group:first-child { |
2525 content:""; |
2526 margin-top: -8px; |
2526 cursor:inherit; |
2527 } |
2527 display:block; |
2528 .components-dropdown-menu__menu .components-menu-group:last-child { |
2528 height:3px; |
2529 margin-bottom: -8px; |
2529 left:calc(50% - 1px); |
2530 } |
2530 opacity:0; |
2531 .components-dropdown-menu__menu .components-menu-group + .components-menu-group { |
2531 position:absolute; |
2532 margin-top: 0; |
2532 top:calc(50% - 1px); |
2533 border-top: 1px solid #ccc; |
2533 transition:transform .1s ease-in; |
2534 padding: 8px; |
2534 width:3px; |
2535 } |
2535 will-change:transform; |
2536 .is-alternate .components-dropdown-menu__menu .components-menu-group + .components-menu-group { |
2536 } |
2537 border-color: #1e1e1e; |
2537 @media (prefers-reduced-motion:reduce){ |
2538 } |
2538 .components-resizable-box__side-handle:before{ |
2539 |
2539 transition-delay:0s; |
2540 .components-font-size-picker__header__hint { |
2540 transition-duration:0s; |
2541 margin-right: 4px; |
2541 } |
2542 color: #757575; |
2542 } |
2543 } |
2543 |
2544 .components-font-size-picker__header .components-button.is-small.has-icon:not(.has-text) { |
2544 .components-resizable-box__corner-handle,.components-resizable-box__side-handle{ |
2545 min-width: 24px; |
2545 z-index:2; |
2546 padding: 0; |
2546 } |
2547 } |
2547 |
2548 |
2548 .components-resizable-box__side-handle.components-resizable-box__handle-bottom,.components-resizable-box__side-handle.components-resizable-box__handle-bottom:before,.components-resizable-box__side-handle.components-resizable-box__handle-top,.components-resizable-box__side-handle.components-resizable-box__handle-top:before{ |
2549 .components-font-size-picker__controls { |
2549 border-left:0; |
2550 max-width: 248px; |
2550 border-right:0; |
2551 align-items: center; |
2551 right:0; |
2552 margin-top: 8px; |
2552 width:100%; |
2553 margin-bottom: 24px; |
2553 } |
2554 } |
2554 |
2555 .components-font-size-picker__controls .components-unit-control-wrapper .components-input-control__label { |
2555 .components-resizable-box__side-handle.components-resizable-box__handle-left,.components-resizable-box__side-handle.components-resizable-box__handle-left:before,.components-resizable-box__side-handle.components-resizable-box__handle-right,.components-resizable-box__side-handle.components-resizable-box__handle-right:before{ |
2556 font-weight: 300; |
2556 border-bottom:0; |
2557 padding-bottom: 0 !important; |
2557 border-top:0; |
2558 margin-bottom: 8px !important; |
2558 height:100%; |
2559 } |
2559 top:0; |
2560 .components-font-size-picker__controls .components-custom-select-control__button { |
2560 } |
2561 width: 100%; |
2561 |
2562 } |
2562 .components-resizable-box__side-handle.components-resizable-box__handle-bottom:active:before,.components-resizable-box__side-handle.components-resizable-box__handle-bottom:hover:before,.components-resizable-box__side-handle.components-resizable-box__handle-top:active:before,.components-resizable-box__side-handle.components-resizable-box__handle-top:hover:before{ |
2563 .components-font-size-picker__controls .components-font-size-picker__number { |
2563 animation:components-resizable-box__top-bottom-animation .1s ease-out 0s; |
2564 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; |
2564 animation-fill-mode:forwards; |
2565 padding: 6px 8px; |
2565 } |
2566 box-shadow: 0 0 0 transparent; |
2566 @media (prefers-reduced-motion:reduce){ |
2567 transition: box-shadow 0.1s linear; |
2567 .components-resizable-box__side-handle.components-resizable-box__handle-bottom:active:before,.components-resizable-box__side-handle.components-resizable-box__handle-bottom:hover:before,.components-resizable-box__side-handle.components-resizable-box__handle-top:active:before,.components-resizable-box__side-handle.components-resizable-box__handle-top:hover:before{ |
2568 border-radius: 2px; |
2568 animation-delay:0s; |
2569 border: 1px solid #757575; |
2569 animation-duration:1ms; |
2570 /* Fonts smaller than 16px causes mobile safari to zoom. */ |
2570 } |
2571 font-size: 16px; |
2571 } |
2572 /* Override core line-height. To be reviewed. */ |
2572 |
2573 line-height: normal; |
2573 .components-resizable-box__side-handle.components-resizable-box__handle-left:active:before,.components-resizable-box__side-handle.components-resizable-box__handle-left:hover:before,.components-resizable-box__side-handle.components-resizable-box__handle-right:active:before,.components-resizable-box__side-handle.components-resizable-box__handle-right:hover:before{ |
2574 display: inline-block; |
2574 animation:components-resizable-box__left-right-animation .1s ease-out 0s; |
2575 font-weight: 500; |
2575 animation-fill-mode:forwards; |
2576 height: 30px; |
2576 } |
2577 margin-bottom: 0; |
2577 @media (prefers-reduced-motion:reduce){ |
2578 margin-right: 0; |
2578 .components-resizable-box__side-handle.components-resizable-box__handle-left:active:before,.components-resizable-box__side-handle.components-resizable-box__handle-left:hover:before,.components-resizable-box__side-handle.components-resizable-box__handle-right:active:before,.components-resizable-box__side-handle.components-resizable-box__handle-right:hover:before{ |
2579 margin-left: 8px; |
2579 animation-delay:0s; |
2580 margin-top: 8px; |
2580 animation-duration:1ms; |
2581 width: 54px; |
2581 } |
2582 } |
2582 } |
2583 @media (prefers-reduced-motion: reduce) { |
2583 @media not all and (min-resolution:0.001dpcm){ |
2584 .components-font-size-picker__controls .components-font-size-picker__number { |
2584 @supports (-webkit-appearance:none){ |
2585 transition-duration: 0s; |
2585 |
2586 transition-delay: 0s; |
2586 .components-resizable-box__side-handle.components-resizable-box__handle-bottom:active:before,.components-resizable-box__side-handle.components-resizable-box__handle-bottom:hover:before,.components-resizable-box__side-handle.components-resizable-box__handle-left:active:before,.components-resizable-box__side-handle.components-resizable-box__handle-left:hover:before,.components-resizable-box__side-handle.components-resizable-box__handle-right:active:before,.components-resizable-box__side-handle.components-resizable-box__handle-right:hover:before,.components-resizable-box__side-handle.components-resizable-box__handle-top:active:before,.components-resizable-box__side-handle.components-resizable-box__handle-top:hover:before{ |
2587 } |
2587 animation:none; |
2588 } |
|
2589 @media (min-width: 600px) { |
|
2590 .components-font-size-picker__controls .components-font-size-picker__number { |
|
2591 font-size: 13px; |
|
2592 /* Override core line-height. To be reviewed. */ |
|
2593 line-height: normal; |
|
2594 } |
|
2595 } |
|
2596 .components-font-size-picker__controls .components-font-size-picker__number:focus { |
|
2597 border-color: var(--wp-admin-theme-color); |
|
2598 box-shadow: 0 0 0 1px var(--wp-admin-theme-color); |
|
2599 outline: 2px solid transparent; |
|
2600 } |
|
2601 .components-font-size-picker__controls .components-font-size-picker__number::-webkit-input-placeholder { |
|
2602 color: rgba(30, 30, 30, 0.62); |
|
2603 } |
|
2604 .components-font-size-picker__controls .components-font-size-picker__number::-moz-placeholder { |
|
2605 opacity: 1; |
|
2606 color: rgba(30, 30, 30, 0.62); |
|
2607 } |
|
2608 .components-font-size-picker__controls .components-font-size-picker__number:-ms-input-placeholder { |
|
2609 color: rgba(30, 30, 30, 0.62); |
|
2610 } |
|
2611 .components-font-size-picker__controls .components-font-size-picker__number[value=""] + .components-button { |
|
2612 cursor: default; |
|
2613 opacity: 0.3; |
|
2614 pointer-events: none; |
|
2615 } |
|
2616 .components-font-size-picker__controls .components-font-size-picker__number-container { |
|
2617 display: flex; |
|
2618 flex-direction: column; |
|
2619 } |
|
2620 .components-font-size-picker__controls .components-color-palette__clear { |
|
2621 height: 30px; |
|
2622 } |
|
2623 |
|
2624 .components-font-size-picker__custom-input .components-range-control__slider + .dashicon { |
|
2625 width: 30px; |
|
2626 height: 30px; |
|
2627 } |
|
2628 |
|
2629 .components-font-size-picker { |
|
2630 border: 0; |
|
2631 padding: 0; |
|
2632 margin: 0; |
|
2633 } |
|
2634 |
|
2635 .components-form-toggle { |
|
2636 position: relative; |
|
2637 display: inline-block; |
|
2638 } |
|
2639 .components-form-toggle .components-form-toggle__track { |
|
2640 content: ""; |
|
2641 display: inline-block; |
|
2642 box-sizing: border-box; |
|
2643 vertical-align: top; |
|
2644 background-color: #fff; |
|
2645 border: 1px solid #1e1e1e; |
|
2646 width: 36px; |
|
2647 height: 18px; |
|
2648 border-radius: 9px; |
|
2649 transition: 0.2s background ease; |
|
2650 } |
|
2651 @media (prefers-reduced-motion: reduce) { |
|
2652 .components-form-toggle .components-form-toggle__track { |
|
2653 transition-duration: 0s; |
|
2654 transition-delay: 0s; |
|
2655 } |
|
2656 } |
|
2657 .components-form-toggle .components-form-toggle__thumb { |
|
2658 display: block; |
|
2659 position: absolute; |
|
2660 box-sizing: border-box; |
|
2661 top: 3px; |
|
2662 right: 3px; |
|
2663 width: 12px; |
|
2664 height: 12px; |
|
2665 border-radius: 50%; |
|
2666 transition: 0.1s transform ease; |
|
2667 background-color: #1e1e1e; |
|
2668 border: 5px solid #1e1e1e; |
|
2669 } |
|
2670 @media (prefers-reduced-motion: reduce) { |
|
2671 .components-form-toggle .components-form-toggle__thumb { |
|
2672 transition-duration: 0s; |
|
2673 transition-delay: 0s; |
|
2674 } |
|
2675 } |
|
2676 .components-form-toggle.is-checked .components-form-toggle__track { |
|
2677 background-color: var(--wp-admin-theme-color); |
|
2678 border: 1px solid var(--wp-admin-theme-color); |
|
2679 border: 9px solid transparent; |
|
2680 } |
|
2681 .components-form-toggle .components-form-toggle__input:focus + .components-form-toggle__track { |
|
2682 box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color); |
|
2683 outline: 2px solid transparent; |
|
2684 outline-offset: 2px; |
|
2685 } |
|
2686 .components-form-toggle.is-checked .components-form-toggle__thumb { |
|
2687 background-color: #fff; |
|
2688 border-width: 0; |
|
2689 transform: translateX(-18px); |
|
2690 } |
|
2691 .components-form-toggle.is-disabled, .components-disabled .components-form-toggle { |
|
2692 opacity: 0.3; |
|
2693 } |
|
2694 |
|
2695 .components-form-toggle input.components-form-toggle__input[type=checkbox] { |
|
2696 position: absolute; |
|
2697 top: 0; |
|
2698 right: 0; |
|
2699 width: 100%; |
|
2700 height: 100%; |
|
2701 opacity: 0; |
|
2702 margin: 0; |
|
2703 padding: 0; |
|
2704 z-index: 1; |
|
2705 border: none; |
|
2706 } |
|
2707 .components-form-toggle input.components-form-toggle__input[type=checkbox]:checked { |
|
2708 background: none; |
|
2709 } |
|
2710 .components-form-toggle input.components-form-toggle__input[type=checkbox]::before { |
|
2711 content: ""; |
|
2712 } |
|
2713 |
|
2714 .components-form-token-field__input-container { |
|
2715 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; |
|
2716 padding: 6px 8px; |
|
2717 box-shadow: 0 0 0 transparent; |
|
2718 transition: box-shadow 0.1s linear; |
|
2719 border-radius: 2px; |
|
2720 border: 1px solid #757575; |
|
2721 /* Fonts smaller than 16px causes mobile safari to zoom. */ |
|
2722 font-size: 16px; |
|
2723 /* Override core line-height. To be reviewed. */ |
|
2724 line-height: normal; |
|
2725 display: flex; |
|
2726 flex-wrap: wrap; |
|
2727 align-items: center; |
|
2728 width: 100%; |
|
2729 margin: 0 0 8px 0; |
|
2730 padding: 2px 4px; |
|
2731 cursor: text; |
|
2732 } |
|
2733 @media (prefers-reduced-motion: reduce) { |
|
2734 .components-form-token-field__input-container { |
|
2735 transition-duration: 0s; |
|
2736 transition-delay: 0s; |
|
2737 } |
|
2738 } |
|
2739 @media (min-width: 600px) { |
|
2740 .components-form-token-field__input-container { |
|
2741 font-size: 13px; |
|
2742 /* Override core line-height. To be reviewed. */ |
|
2743 line-height: normal; |
|
2744 } |
|
2745 } |
|
2746 .components-form-token-field__input-container:focus { |
|
2747 border-color: var(--wp-admin-theme-color); |
|
2748 box-shadow: 0 0 0 1px var(--wp-admin-theme-color); |
|
2749 outline: 2px solid transparent; |
|
2750 } |
|
2751 .components-form-token-field__input-container::-webkit-input-placeholder { |
|
2752 color: rgba(30, 30, 30, 0.62); |
|
2753 } |
|
2754 .components-form-token-field__input-container::-moz-placeholder { |
|
2755 opacity: 1; |
|
2756 color: rgba(30, 30, 30, 0.62); |
|
2757 } |
|
2758 .components-form-token-field__input-container:-ms-input-placeholder { |
|
2759 color: rgba(30, 30, 30, 0.62); |
|
2760 } |
|
2761 .components-form-token-field__input-container.is-disabled { |
|
2762 background: #ddd; |
|
2763 border-color: #ddd; |
|
2764 } |
|
2765 .components-form-token-field__input-container.is-active { |
|
2766 border-color: var(--wp-admin-theme-color); |
|
2767 box-shadow: 0 0 0 1px var(--wp-admin-theme-color); |
|
2768 outline: 2px solid transparent; |
|
2769 } |
|
2770 .components-form-token-field__input-container input[type=text].components-form-token-field__input { |
|
2771 display: inline-block; |
|
2772 flex: 1; |
|
2773 font-family: inherit; |
|
2774 font-size: 16px; |
|
2775 width: 100%; |
|
2776 max-width: 100%; |
|
2777 margin-right: 4px; |
|
2778 padding: 0; |
|
2779 min-height: 24px; |
|
2780 min-width: 50px; |
|
2781 background: inherit; |
|
2782 border: 0; |
|
2783 color: #1e1e1e; |
|
2784 box-shadow: none; |
|
2785 } |
|
2786 @media (min-width: 600px) { |
|
2787 .components-form-token-field__input-container input[type=text].components-form-token-field__input { |
|
2788 font-size: 13px; |
|
2789 } |
|
2790 } |
|
2791 .components-form-token-field__input-container input[type=text].components-form-token-field__input:focus, .components-form-token-field.is-active .components-form-token-field__input-container input[type=text].components-form-token-field__input { |
|
2792 outline: none; |
|
2793 box-shadow: none; |
|
2794 } |
|
2795 .components-form-token-field__input-container .components-form-token-field__token + input[type=text].components-form-token-field__input { |
|
2796 width: auto; |
|
2797 } |
|
2798 |
|
2799 .components-form-token-field__label { |
|
2800 display: inline-block; |
|
2801 margin-bottom: 8px; |
|
2802 } |
|
2803 |
|
2804 .components-form-token-field__help { |
|
2805 font-size: 12px; |
|
2806 font-style: normal; |
|
2807 color: #757575; |
|
2808 } |
|
2809 |
|
2810 .components-form-token-field__token { |
|
2811 font-size: 13px; |
|
2812 display: flex; |
|
2813 margin: 2px 0 2px 4px; |
|
2814 color: #1e1e1e; |
|
2815 max-width: 100%; |
|
2816 } |
|
2817 .components-form-token-field__token.is-success .components-form-token-field__token-text, |
|
2818 .components-form-token-field__token.is-success .components-form-token-field__remove-token { |
|
2819 background: #4ab866; |
|
2820 } |
|
2821 .components-form-token-field__token.is-error .components-form-token-field__token-text, |
|
2822 .components-form-token-field__token.is-error .components-form-token-field__remove-token { |
|
2823 background: #cc1818; |
|
2824 } |
|
2825 .components-form-token-field__token.is-validating .components-form-token-field__token-text, |
|
2826 .components-form-token-field__token.is-validating .components-form-token-field__remove-token { |
|
2827 color: #757575; |
|
2828 } |
|
2829 .components-form-token-field__token.is-borderless { |
|
2830 position: relative; |
|
2831 padding: 0 0 0 16px; |
|
2832 } |
|
2833 .components-form-token-field__token.is-borderless .components-form-token-field__token-text { |
|
2834 background: transparent; |
|
2835 color: var(--wp-admin-theme-color); |
|
2836 } |
|
2837 .components-form-token-field__token.is-borderless .components-form-token-field__remove-token { |
|
2838 background: transparent; |
|
2839 color: #757575; |
|
2840 position: absolute; |
|
2841 top: 1px; |
|
2842 left: 0; |
|
2843 } |
|
2844 .components-form-token-field__token.is-borderless.is-success .components-form-token-field__token-text { |
|
2845 color: #4ab866; |
|
2846 } |
|
2847 .components-form-token-field__token.is-borderless.is-error .components-form-token-field__token-text { |
|
2848 color: #cc1818; |
|
2849 border-radius: 0 4px 4px 0; |
|
2850 padding: 0 6px 0 4px; |
|
2851 } |
|
2852 .components-form-token-field__token.is-borderless.is-validating .components-form-token-field__token-text { |
|
2853 color: #1e1e1e; |
|
2854 } |
|
2855 .components-form-token-field__token.is-disabled .components-form-token-field__remove-token { |
|
2856 cursor: default; |
|
2857 } |
|
2858 |
|
2859 .components-form-token-field__token-text, |
|
2860 .components-form-token-field__remove-token.components-button { |
|
2861 display: inline-block; |
|
2862 line-height: 24px; |
|
2863 height: auto; |
|
2864 background: #ddd; |
|
2865 min-width: unset; |
|
2866 transition: all 0.2s cubic-bezier(0.4, 1, 0.4, 1); |
|
2867 } |
|
2868 @media (prefers-reduced-motion: reduce) { |
|
2869 .components-form-token-field__token-text, |
|
2870 .components-form-token-field__remove-token.components-button { |
|
2871 transition-duration: 0s; |
|
2872 transition-delay: 0s; |
|
2873 animation-duration: 1ms; |
|
2874 animation-delay: 0s; |
|
2875 } |
|
2876 } |
|
2877 |
|
2878 .components-form-token-field__token-text { |
|
2879 border-radius: 0 2px 2px 0; |
|
2880 padding: 0 8px 0 0; |
|
2881 white-space: nowrap; |
|
2882 overflow: hidden; |
|
2883 text-overflow: ellipsis; |
|
2884 } |
|
2885 |
|
2886 .components-form-token-field__remove-token.components-button { |
|
2887 cursor: pointer; |
|
2888 border-radius: 2px 0 0 2px; |
|
2889 padding: 0 2px; |
|
2890 color: #1e1e1e; |
|
2891 line-height: 10px; |
|
2892 overflow: initial; |
|
2893 } |
|
2894 .components-form-token-field__remove-token.components-button:hover { |
|
2895 color: #1e1e1e; |
|
2896 } |
|
2897 |
|
2898 .components-form-token-field__suggestions-list { |
|
2899 flex: 1 0 100%; |
|
2900 min-width: 100%; |
|
2901 max-height: 9em; |
|
2902 overflow-y: auto; |
|
2903 transition: all 0.15s ease-in-out; |
|
2904 list-style: none; |
|
2905 border-top: 1px solid #757575; |
|
2906 margin: 4px -4px -4px; |
|
2907 padding: 0; |
|
2908 } |
|
2909 @media (prefers-reduced-motion: reduce) { |
|
2910 .components-form-token-field__suggestions-list { |
|
2911 transition-duration: 0s; |
|
2912 transition-delay: 0s; |
|
2913 } |
|
2914 } |
|
2915 |
|
2916 .components-form-token-field__suggestion { |
|
2917 color: #757575; |
|
2918 display: block; |
|
2919 font-size: 13px; |
|
2920 padding: 4px 8px; |
|
2921 margin: 0; |
|
2922 cursor: pointer; |
|
2923 } |
|
2924 .components-form-token-field__suggestion.is-selected { |
|
2925 background: var(--wp-admin-theme-color); |
|
2926 color: #fff; |
|
2927 } |
|
2928 |
|
2929 .components-form-token-field__suggestion-match { |
|
2930 text-decoration: underline; |
|
2931 } |
|
2932 |
|
2933 @media (min-width: 600px) { |
|
2934 .components-guide { |
|
2935 width: 600px; |
|
2936 } |
|
2937 } |
|
2938 .components-guide .components-modal__content { |
|
2939 padding: 0; |
|
2940 margin-top: 0; |
|
2941 border-radius: 2px; |
|
2942 } |
|
2943 .components-guide .components-modal__content::before { |
|
2944 content: none; |
|
2945 } |
|
2946 .components-guide .components-modal__header { |
|
2947 border-bottom: none; |
|
2948 padding: 0; |
|
2949 position: sticky; |
|
2950 } |
|
2951 .components-guide .components-modal__header .components-button { |
|
2952 align-self: flex-start; |
|
2953 margin: 8px 0 0 8px; |
|
2954 position: static; |
|
2955 } |
|
2956 .components-guide .components-modal__header .components-button:hover svg { |
|
2957 fill: #fff; |
|
2958 } |
|
2959 .components-guide__container { |
|
2960 display: flex; |
|
2961 flex-direction: column; |
|
2962 justify-content: space-between; |
|
2963 margin-top: -60px; |
|
2964 min-height: 100%; |
|
2965 } |
|
2966 .components-guide__page { |
|
2967 display: flex; |
|
2968 flex-direction: column; |
|
2969 justify-content: center; |
|
2970 position: relative; |
|
2971 } |
|
2972 @media (min-width: 600px) { |
|
2973 .components-guide__page { |
|
2974 min-height: 300px; |
|
2975 } |
|
2976 } |
|
2977 .components-guide__footer { |
|
2978 align-content: center; |
|
2979 display: flex; |
|
2980 height: 30px; |
|
2981 justify-content: center; |
|
2982 margin: 0 0 24px 0; |
|
2983 padding: 0 32px; |
|
2984 position: relative; |
|
2985 width: 100%; |
|
2986 } |
|
2987 .components-guide__page-control { |
|
2988 margin: 0; |
|
2989 text-align: center; |
|
2990 } |
|
2991 .components-guide__page-control li { |
|
2992 display: inline-block; |
|
2993 margin: 0; |
|
2994 } |
|
2995 .components-guide__page-control .components-button { |
|
2996 height: 30px; |
|
2997 min-width: 20px; |
|
2998 margin: -6px 0; |
|
2999 } |
|
3000 |
|
3001 .components-modal__frame.components-guide { |
|
3002 border: none; |
|
3003 min-width: 312px; |
|
3004 height: 80vh; |
|
3005 max-height: 575px; |
|
3006 } |
|
3007 @media (max-width: 600px) { |
|
3008 .components-modal__frame.components-guide { |
|
3009 margin: auto; |
|
3010 max-width: calc(100vw - 16px * 2); |
|
3011 } |
|
3012 } |
|
3013 |
|
3014 .components-button.components-guide__back-button, .components-button.components-guide__forward-button, .components-button.components-guide__finish-button { |
|
3015 height: 30px; |
|
3016 position: absolute; |
|
3017 } |
|
3018 .components-button.components-guide__back-button, .components-button.components-guide__forward-button { |
|
3019 font-size: 13px; |
|
3020 padding: 4px 2px; |
|
3021 } |
|
3022 .components-button.components-guide__back-button.has-text svg, .components-button.components-guide__forward-button.has-text svg { |
|
3023 margin: 0; |
|
3024 } |
|
3025 .components-button.components-guide__back-button:hover, .components-button.components-guide__forward-button:hover { |
|
3026 text-decoration: underline; |
|
3027 } |
|
3028 .components-button.components-guide__back-button { |
|
3029 right: 32px; |
|
3030 } |
|
3031 .components-button.components-guide__forward-button { |
|
3032 left: 32px; |
|
3033 color: #1386bf; |
|
3034 font-weight: bold; |
|
3035 } |
|
3036 .components-button.components-guide__finish-button { |
|
3037 left: 32px; |
|
3038 } |
|
3039 |
|
3040 [role=region] { |
|
3041 position: relative; |
|
3042 } |
|
3043 |
|
3044 .is-focusing-regions [role=region]:focus::after { |
|
3045 content: ""; |
|
3046 position: absolute; |
|
3047 top: 0; |
|
3048 bottom: 0; |
|
3049 right: 0; |
|
3050 left: 0; |
|
3051 pointer-events: none; |
|
3052 outline: 4px solid transparent; |
|
3053 box-shadow: inset 0 0 0 4px var(--wp-admin-theme-color); |
|
3054 } |
|
3055 @supports (outline-offset: 1px) { |
|
3056 .is-focusing-regions [role=region]:focus::after { |
|
3057 content: none; |
|
3058 } |
|
3059 .is-focusing-regions [role=region]:focus { |
|
3060 outline-style: solid; |
|
3061 outline-color: var(--wp-admin-theme-color); |
|
3062 outline-width: 4px; |
|
3063 outline-offset: -4px; |
|
3064 } |
|
3065 } |
|
3066 |
|
3067 .components-menu-group + .components-menu-group { |
|
3068 margin-top: 8px; |
|
3069 padding-top: 8px; |
|
3070 border-top: 1px solid #1e1e1e; |
|
3071 } |
|
3072 .components-menu-group + .components-menu-group.has-hidden-separator { |
|
3073 border-top: none; |
|
3074 margin-top: 0; |
|
3075 padding-top: 0; |
|
3076 } |
|
3077 |
|
3078 .components-menu-group__label { |
|
3079 padding: 0 8px; |
|
3080 margin-top: 4px; |
|
3081 margin-bottom: 12px; |
|
3082 color: #757575; |
|
3083 text-transform: uppercase; |
|
3084 font-size: 11px; |
|
3085 font-weight: 500; |
|
3086 white-space: nowrap; |
|
3087 } |
|
3088 |
|
3089 .components-menu-item__button, |
|
3090 .components-menu-item__button.components-button { |
|
3091 width: 100%; |
|
3092 } |
|
3093 .components-menu-item__button[role=menuitemradio] .components-menu-item__item:only-child, .components-menu-item__button[role=menuitemcheckbox] .components-menu-item__item:only-child, |
|
3094 .components-menu-item__button.components-button[role=menuitemradio] .components-menu-item__item:only-child, |
|
3095 .components-menu-item__button.components-button[role=menuitemcheckbox] .components-menu-item__item:only-child { |
|
3096 padding-left: 48px; |
|
3097 } |
|
3098 .components-menu-item__button .components-menu-items__item-icon, |
|
3099 .components-menu-item__button.components-button .components-menu-items__item-icon { |
|
3100 display: inline-block; |
|
3101 flex: 0 0 auto; |
|
3102 } |
|
3103 .components-menu-item__button .components-menu-items__item-icon.has-icon-right, |
|
3104 .components-menu-item__button.components-button .components-menu-items__item-icon.has-icon-right { |
|
3105 margin-left: -2px; |
|
3106 margin-right: 24px; |
|
3107 } |
|
3108 .components-menu-item__button .components-menu-item__shortcut + .components-menu-items__item-icon.has-icon-right, |
|
3109 .components-menu-item__button.components-button .components-menu-item__shortcut + .components-menu-items__item-icon.has-icon-right { |
|
3110 margin-right: 8px; |
|
3111 } |
|
3112 .components-menu-item__button .block-editor-block-icon, |
|
3113 .components-menu-item__button.components-button .block-editor-block-icon { |
|
3114 margin-right: -2px; |
|
3115 margin-left: 8px; |
|
3116 } |
|
3117 .components-menu-item__button.is-primary, |
|
3118 .components-menu-item__button.components-button.is-primary { |
|
3119 justify-content: center; |
|
3120 } |
|
3121 .components-menu-item__button.is-primary .components-menu-item__item, |
|
3122 .components-menu-item__button.components-button.is-primary .components-menu-item__item { |
|
3123 margin-left: 0; |
|
3124 } |
|
3125 |
|
3126 .components-menu-item__info-wrapper { |
|
3127 display: flex; |
|
3128 flex-direction: column; |
|
3129 margin-left: auto; |
|
3130 } |
|
3131 |
|
3132 .components-menu-item__info { |
|
3133 margin-top: 4px; |
|
3134 font-size: 12px; |
|
3135 color: #757575; |
|
3136 white-space: normal; |
|
3137 } |
|
3138 |
|
3139 .components-menu-item__item { |
|
3140 white-space: nowrap; |
|
3141 min-width: 160px; |
|
3142 margin-left: auto; |
|
3143 display: inline-flex; |
|
3144 align-items: center; |
|
3145 } |
|
3146 |
|
3147 .components-menu-item__shortcut { |
|
3148 align-self: center; |
|
3149 margin-left: 0; |
|
3150 margin-right: auto; |
|
3151 padding-right: 24px; |
|
3152 color: currentColor; |
|
3153 display: none; |
|
3154 } |
|
3155 @media (min-width: 480px) { |
|
3156 .components-menu-item__shortcut { |
|
3157 display: inline; |
|
3158 } |
|
3159 } |
|
3160 |
|
3161 .components-menu-items-choice svg, |
|
3162 .components-menu-items-choice.components-button svg { |
|
3163 margin-left: 12px; |
|
3164 } |
|
3165 .components-menu-items-choice.has-icon, |
|
3166 .components-menu-items-choice.components-button.has-icon { |
|
3167 padding-right: 12px; |
|
3168 } |
|
3169 |
|
3170 .components-modal__screen-overlay { |
|
3171 position: fixed; |
|
3172 top: 0; |
|
3173 left: 0; |
|
3174 bottom: 0; |
|
3175 right: 0; |
|
3176 background-color: rgba(0, 0, 0, 0.35); |
|
3177 z-index: 100000; |
|
3178 display: flex; |
|
3179 animation: edit-post__fade-in-animation 0.2s ease-out 0s; |
|
3180 animation-fill-mode: forwards; |
|
3181 } |
|
3182 @media (prefers-reduced-motion: reduce) { |
|
3183 .components-modal__screen-overlay { |
|
3184 animation-duration: 1ms; |
|
3185 animation-delay: 0s; |
|
3186 } |
|
3187 } |
|
3188 |
|
3189 .components-modal__frame { |
|
3190 margin: 0; |
|
3191 width: 100%; |
|
3192 background: #fff; |
|
3193 box-shadow: 0 10px 10px rgba(0, 0, 0, 0.25); |
|
3194 border-radius: 2px; |
|
3195 overflow: hidden; |
|
3196 display: flex; |
|
3197 } |
|
3198 @media (min-width: 600px) { |
|
3199 .components-modal__frame { |
|
3200 margin: auto; |
|
3201 width: auto; |
|
3202 min-width: 360px; |
|
3203 max-width: calc(100% - 32px); |
|
3204 max-height: calc(100% - 120px); |
|
3205 animation: components-modal__appear-animation 0.1s ease-out; |
|
3206 animation-fill-mode: forwards; |
|
3207 } |
|
3208 } |
|
3209 @media (min-width: 600px) and (prefers-reduced-motion: reduce) { |
|
3210 .components-modal__frame { |
|
3211 animation-duration: 1ms; |
|
3212 animation-delay: 0s; |
|
3213 } |
|
3214 } |
|
3215 @media (min-width: 600px) { |
|
3216 .components-modal__frame.is-full-screen { |
|
3217 width: 90vw; |
|
3218 min-height: 90vh; |
|
3219 } |
|
3220 } |
|
3221 @media (min-width: 960px) { |
|
3222 .components-modal__frame { |
|
3223 max-height: 70%; |
|
3224 } |
|
3225 } |
|
3226 |
|
3227 @keyframes components-modal__appear-animation { |
|
3228 from { |
|
3229 transform: translateY(32px); |
|
3230 } |
|
3231 to { |
|
3232 transform: translateY(0); |
|
3233 } |
|
3234 } |
|
3235 .components-modal__header { |
|
3236 box-sizing: border-box; |
|
3237 border-bottom: 1px solid #ddd; |
|
3238 padding: 0 32px; |
|
3239 display: flex; |
|
3240 flex-direction: row; |
|
3241 justify-content: space-between; |
|
3242 align-items: center; |
|
3243 height: 60px; |
|
3244 width: 100%; |
|
3245 z-index: 10; |
|
3246 position: absolute; |
|
3247 top: 0; |
|
3248 right: 0; |
|
3249 } |
|
3250 .components-modal__header .components-modal__header-heading { |
|
3251 font-size: 1rem; |
|
3252 font-weight: 600; |
|
3253 } |
|
3254 .components-modal__header h1 { |
|
3255 line-height: 1; |
|
3256 margin: 0; |
|
3257 } |
|
3258 .components-modal__header .components-button { |
|
3259 position: relative; |
|
3260 right: 8px; |
|
3261 } |
|
3262 |
|
3263 .components-modal__header-heading-container { |
|
3264 align-items: center; |
|
3265 flex-grow: 1; |
|
3266 display: flex; |
|
3267 flex-direction: row; |
|
3268 justify-content: left; |
|
3269 } |
|
3270 |
|
3271 .components-modal__header-icon-container { |
|
3272 display: inline-block; |
|
3273 } |
|
3274 .components-modal__header-icon-container svg { |
|
3275 max-width: 36px; |
|
3276 max-height: 36px; |
|
3277 padding: 8px; |
|
3278 } |
|
3279 |
|
3280 .components-modal__content { |
|
3281 flex: 1; |
|
3282 margin-top: 60px; |
|
3283 padding: 0 32px 24px; |
|
3284 overflow: auto; |
|
3285 } |
|
3286 .components-modal__content::before { |
|
3287 content: ""; |
|
3288 display: block; |
|
3289 margin-bottom: 24px; |
|
3290 } |
|
3291 .components-modal__content.hide-header { |
|
3292 margin-top: 0; |
|
3293 padding-top: 24px; |
|
3294 } |
|
3295 .components-modal__content.hide-header::before { |
|
3296 content: none; |
|
3297 } |
|
3298 |
|
3299 .components-notice { |
|
3300 display: flex; |
|
3301 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; |
|
3302 font-size: 13px; |
|
3303 background-color: #fff; |
|
3304 border-right: 4px solid var(--wp-admin-theme-color); |
|
3305 margin: 5px 15px 2px; |
|
3306 padding: 8px 12px; |
|
3307 align-items: center; |
|
3308 } |
|
3309 .components-notice.is-dismissible { |
|
3310 padding-left: 36px; |
|
3311 position: relative; |
|
3312 } |
|
3313 .components-notice.is-success { |
|
3314 border-right-color: #4ab866; |
|
3315 background-color: #eff9f1; |
|
3316 } |
|
3317 .components-notice.is-warning { |
|
3318 border-right-color: #f0b849; |
|
3319 background-color: #fef8ee; |
|
3320 } |
|
3321 .components-notice.is-error { |
|
3322 border-right-color: #cc1818; |
|
3323 background-color: #f4a2a2; |
|
3324 } |
|
3325 |
|
3326 .components-notice__content { |
|
3327 flex-grow: 1; |
|
3328 margin: 4px 0 4px 25px; |
|
3329 } |
|
3330 |
|
3331 .components-notice__actions { |
|
3332 display: flex; |
|
3333 flex-wrap: wrap; |
|
3334 } |
|
3335 |
|
3336 .components-notice__action.components-button { |
|
3337 margin-left: 8px; |
|
3338 } |
|
3339 .components-notice__action.components-button, .components-notice__action.components-button.is-link { |
|
3340 margin-right: 12px; |
|
3341 } |
|
3342 .components-notice__action.components-button.is-secondary { |
|
3343 vertical-align: initial; |
|
3344 } |
|
3345 |
|
3346 .components-notice__dismiss { |
|
3347 color: #757575; |
|
3348 align-self: flex-start; |
|
3349 flex-shrink: 0; |
|
3350 } |
|
3351 .components-notice__dismiss:not(:disabled):not([aria-disabled=true]):not(.is-secondary):hover, .components-notice__dismiss:not(:disabled):not([aria-disabled=true]):not(.is-secondary):active, .components-notice__dismiss:not(:disabled):not([aria-disabled=true]):focus { |
|
3352 color: #1e1e1e; |
|
3353 background-color: transparent; |
|
3354 } |
|
3355 .components-notice__dismiss:not(:disabled):not([aria-disabled=true]):not(.is-secondary):hover { |
|
3356 box-shadow: none; |
|
3357 } |
|
3358 |
|
3359 .components-notice-list { |
|
3360 max-width: 100vw; |
|
3361 box-sizing: border-box; |
|
3362 } |
|
3363 .components-notice-list .components-notice__content { |
|
3364 margin-top: 12px; |
|
3365 margin-bottom: 12px; |
|
3366 line-height: 2; |
|
3367 } |
|
3368 .components-notice-list .components-notice__action.components-button { |
|
3369 display: block; |
|
3370 margin-right: 0; |
|
3371 margin-top: 8px; |
|
3372 } |
|
3373 |
|
3374 .components-panel { |
|
3375 background: #fff; |
|
3376 border: 1px solid #e0e0e0; |
|
3377 } |
|
3378 .components-panel > .components-panel__header:first-child, |
|
3379 .components-panel > .components-panel__body:first-child { |
|
3380 margin-top: -1px; |
|
3381 } |
|
3382 .components-panel > .components-panel__header:last-child, |
|
3383 .components-panel > .components-panel__body:last-child { |
|
3384 border-bottom-width: 0; |
|
3385 } |
|
3386 |
|
3387 .components-panel + .components-panel { |
|
3388 margin-top: -1px; |
|
3389 } |
|
3390 |
|
3391 .components-panel__body { |
|
3392 border-top: 1px solid #e0e0e0; |
|
3393 border-bottom: 1px solid #e0e0e0; |
|
3394 } |
|
3395 .components-panel__body h3 { |
|
3396 margin: 0 0 0.5em; |
|
3397 } |
|
3398 .components-panel__body.is-opened { |
|
3399 padding: 16px; |
|
3400 } |
|
3401 |
|
3402 .components-panel__header { |
|
3403 display: flex; |
|
3404 justify-content: space-between; |
|
3405 align-items: center; |
|
3406 padding: 0 16px; |
|
3407 height: 48px; |
|
3408 border-bottom: 1px solid #ddd; |
|
3409 } |
|
3410 .components-panel__header h2 { |
|
3411 margin: 0; |
|
3412 font-size: inherit; |
|
3413 color: inherit; |
|
3414 } |
|
3415 |
|
3416 .components-panel__body + .components-panel__body, |
|
3417 .components-panel__body + .components-panel__header, |
|
3418 .components-panel__header + .components-panel__body, |
|
3419 .components-panel__header + .components-panel__header { |
|
3420 margin-top: -1px; |
|
3421 } |
|
3422 |
|
3423 .components-panel__body > .components-panel__body-title { |
|
3424 display: block; |
|
3425 padding: 0; |
|
3426 font-size: inherit; |
|
3427 margin-top: 0; |
|
3428 margin-bottom: 0; |
|
3429 transition: 0.1s background ease-in-out; |
|
3430 } |
|
3431 @media (prefers-reduced-motion: reduce) { |
|
3432 .components-panel__body > .components-panel__body-title { |
|
3433 transition-duration: 0s; |
|
3434 transition-delay: 0s; |
|
3435 } |
|
3436 } |
|
3437 |
|
3438 .components-panel__body.is-opened > .components-panel__body-title { |
|
3439 margin: -16px; |
|
3440 margin-bottom: 5px; |
|
3441 } |
|
3442 |
|
3443 .components-panel__body > .components-panel__body-title:hover { |
|
3444 background: #f0f0f0; |
|
3445 border: none; |
|
3446 } |
|
3447 |
|
3448 .components-panel__body-toggle.components-button { |
|
3449 position: relative; |
|
3450 padding: 16px 16px 16px 48px; |
|
3451 outline: none; |
|
3452 width: 100%; |
|
3453 font-weight: 500; |
|
3454 text-align: right; |
|
3455 color: #1e1e1e; |
|
3456 border: none; |
|
3457 box-shadow: none; |
|
3458 transition: 0.1s background ease-in-out; |
|
3459 height: auto; |
|
3460 } |
|
3461 @media (prefers-reduced-motion: reduce) { |
|
3462 .components-panel__body-toggle.components-button { |
|
3463 transition-duration: 0s; |
|
3464 transition-delay: 0s; |
|
3465 } |
|
3466 } |
|
3467 .components-panel__body-toggle.components-button:focus { |
|
3468 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); |
|
3469 border-radius: 0; |
|
3470 } |
|
3471 .components-panel__body-toggle.components-button .components-panel__arrow { |
|
3472 position: absolute; |
|
3473 left: 16px; |
|
3474 top: 50%; |
|
3475 transform: translateY(-50%); |
|
3476 color: #1e1e1e; |
|
3477 fill: currentColor; |
|
3478 transition: 0.1s color ease-in-out; |
|
3479 } |
|
3480 @media (prefers-reduced-motion: reduce) { |
|
3481 .components-panel__body-toggle.components-button .components-panel__arrow { |
|
3482 transition-duration: 0s; |
|
3483 transition-delay: 0s; |
|
3484 } |
|
3485 } |
|
3486 body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right { |
|
3487 transform: scaleX(-1); |
|
3488 -ms-filter: fliph; |
|
3489 filter: FlipH; |
|
3490 margin-top: -10px; |
|
3491 } |
|
3492 |
|
3493 .components-panel__icon { |
|
3494 color: #757575; |
|
3495 margin: -2px 6px -2px 0; |
|
3496 } |
|
3497 |
|
3498 .components-panel__body-toggle-icon { |
|
3499 margin-left: -5px; |
|
3500 } |
|
3501 |
|
3502 .components-panel__color-title { |
|
3503 float: right; |
|
3504 height: 19px; |
|
3505 } |
|
3506 |
|
3507 .components-panel__row { |
|
3508 display: flex; |
|
3509 justify-content: space-between; |
|
3510 align-items: center; |
|
3511 margin-top: 8px; |
|
3512 min-height: 36px; |
|
3513 } |
|
3514 .components-panel__row select { |
|
3515 min-width: 0; |
|
3516 } |
|
3517 .components-panel__row label { |
|
3518 margin-left: 12px; |
|
3519 flex-shrink: 0; |
|
3520 max-width: 75%; |
|
3521 } |
|
3522 .components-panel__row:empty, .components-panel__row:first-of-type { |
|
3523 margin-top: 0; |
|
3524 } |
|
3525 |
|
3526 .components-panel .circle-picker { |
|
3527 padding-bottom: 20px; |
|
3528 } |
|
3529 |
|
3530 .components-placeholder.components-placeholder { |
|
3531 box-sizing: border-box; |
|
3532 position: relative; |
|
3533 padding: 1em; |
|
3534 min-height: 200px; |
|
3535 width: 100%; |
|
3536 text-align: right; |
|
3537 margin: 0; |
|
3538 color: #1e1e1e; |
|
3539 -moz-font-smoothing: subpixel-antialiased; |
|
3540 -webkit-font-smoothing: subpixel-antialiased; |
|
3541 border-radius: 2px; |
|
3542 background-color: #fff; |
|
3543 box-shadow: inset 0 0 0 1px #1e1e1e; |
|
3544 outline: 1px solid transparent; |
|
3545 } |
|
3546 @supports (position: sticky) { |
|
3547 .components-placeholder.components-placeholder { |
|
3548 display: flex; |
|
3549 flex-direction: column; |
|
3550 justify-content: center; |
|
3551 align-items: flex-start; |
|
3552 } |
|
3553 } |
|
3554 .components-placeholder.components-placeholder .components-base-control__label { |
|
3555 font-size: 13px; |
|
3556 } |
|
3557 |
|
3558 .components-placeholder__error, |
|
3559 .components-placeholder__instructions, |
|
3560 .components-placeholder__label, |
|
3561 .components-placeholder__fieldset { |
|
3562 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; |
|
3563 font-size: 13px; |
|
3564 } |
|
3565 |
|
3566 .components-placeholder__label { |
|
3567 display: flex; |
|
3568 font-weight: 600; |
|
3569 margin-bottom: 16px; |
|
3570 align-items: center; |
|
3571 } |
|
3572 .components-placeholder__label > svg, |
|
3573 .components-placeholder__label .dashicon, |
|
3574 .components-placeholder__label .block-editor-block-icon { |
|
3575 margin-left: 1ch; |
|
3576 fill: currentColor; |
|
3577 } |
|
3578 @media (forced-colors: active) { |
|
3579 .components-placeholder__label > svg, |
|
3580 .components-placeholder__label .dashicon, |
|
3581 .components-placeholder__label .block-editor-block-icon { |
|
3582 fill: CanvasText; |
|
3583 } |
|
3584 } |
|
3585 .components-placeholder__label:empty { |
|
3586 display: none; |
|
3587 } |
|
3588 |
|
3589 .components-placeholder__fieldset, |
|
3590 .components-placeholder__fieldset form { |
|
3591 display: flex; |
|
3592 flex-direction: row; |
|
3593 width: 100%; |
|
3594 flex-wrap: wrap; |
|
3595 } |
|
3596 .components-placeholder__fieldset p, |
|
3597 .components-placeholder__fieldset form p { |
|
3598 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; |
|
3599 font-size: 13px; |
|
3600 } |
|
3601 |
|
3602 .components-placeholder__fieldset.components-placeholder__fieldset { |
|
3603 border: none; |
|
3604 padding: 0; |
|
3605 } |
|
3606 .components-placeholder__fieldset.components-placeholder__fieldset .components-placeholder__instructions { |
|
3607 padding: 0; |
|
3608 font-weight: normal; |
|
3609 font-size: 1em; |
|
3610 } |
|
3611 |
|
3612 .components-placeholder__fieldset.is-column-layout, |
|
3613 .components-placeholder__fieldset.is-column-layout form { |
|
3614 flex-direction: column; |
|
3615 } |
|
3616 |
|
3617 .components-placeholder__input[type=url] { |
|
3618 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; |
|
3619 padding: 6px 8px; |
|
3620 box-shadow: 0 0 0 transparent; |
|
3621 transition: box-shadow 0.1s linear; |
|
3622 border-radius: 2px; |
|
3623 border: 1px solid #757575; |
|
3624 /* Fonts smaller than 16px causes mobile safari to zoom. */ |
|
3625 font-size: 16px; |
|
3626 /* Override core line-height. To be reviewed. */ |
|
3627 line-height: normal; |
|
3628 margin: 0 0 0 8px; |
|
3629 flex: 1 1 auto; |
|
3630 } |
|
3631 @media (prefers-reduced-motion: reduce) { |
|
3632 .components-placeholder__input[type=url] { |
|
3633 transition-duration: 0s; |
|
3634 transition-delay: 0s; |
|
3635 } |
|
3636 } |
|
3637 @media (min-width: 600px) { |
|
3638 .components-placeholder__input[type=url] { |
|
3639 font-size: 13px; |
|
3640 /* Override core line-height. To be reviewed. */ |
|
3641 line-height: normal; |
|
3642 } |
|
3643 } |
|
3644 .components-placeholder__input[type=url]:focus { |
|
3645 border-color: var(--wp-admin-theme-color); |
|
3646 box-shadow: 0 0 0 1px var(--wp-admin-theme-color); |
|
3647 outline: 2px solid transparent; |
|
3648 } |
|
3649 .components-placeholder__input[type=url]::-webkit-input-placeholder { |
|
3650 color: rgba(30, 30, 30, 0.62); |
|
3651 } |
|
3652 .components-placeholder__input[type=url]::-moz-placeholder { |
|
3653 opacity: 1; |
|
3654 color: rgba(30, 30, 30, 0.62); |
|
3655 } |
|
3656 .components-placeholder__input[type=url]:-ms-input-placeholder { |
|
3657 color: rgba(30, 30, 30, 0.62); |
|
3658 } |
|
3659 |
|
3660 .components-placeholder__instructions { |
|
3661 margin-bottom: 1em; |
|
3662 } |
|
3663 |
|
3664 .components-placeholder__error { |
|
3665 margin-top: 1em; |
|
3666 width: 100%; |
|
3667 } |
|
3668 |
|
3669 .components-placeholder__preview img { |
|
3670 margin: 3%; |
|
3671 width: 50%; |
|
3672 } |
|
3673 |
|
3674 .components-placeholder__fieldset .components-button { |
|
3675 margin-left: 12px; |
|
3676 margin-bottom: 12px; |
|
3677 } |
|
3678 .components-placeholder__fieldset .components-button:last-child { |
|
3679 margin-bottom: 0; |
|
3680 margin-left: 0; |
|
3681 } |
|
3682 |
|
3683 .components-placeholder__fieldset .components-button:not(.is-link) ~ .components-button.is-link { |
|
3684 margin-right: 10px; |
|
3685 margin-left: 10px; |
|
3686 } |
|
3687 .components-placeholder__fieldset .components-button:not(.is-link) ~ .components-button.is-link:last-child { |
|
3688 margin-left: 0; |
|
3689 } |
|
3690 |
|
3691 .components-placeholder.is-large .components-placeholder__label { |
|
3692 font-size: 18pt; |
|
3693 font-weight: normal; |
|
3694 } |
|
3695 .components-placeholder.is-medium .components-placeholder__instructions, .components-placeholder.is-small .components-placeholder__instructions { |
|
3696 display: none; |
|
3697 } |
|
3698 .components-placeholder.is-medium .components-placeholder__fieldset, |
|
3699 .components-placeholder.is-medium .components-placeholder__fieldset form, .components-placeholder.is-small .components-placeholder__fieldset, |
|
3700 .components-placeholder.is-small .components-placeholder__fieldset form { |
|
3701 flex-direction: column; |
|
3702 } |
|
3703 .components-placeholder.is-medium .components-placeholder__fieldset .components-button, .components-placeholder.is-small .components-placeholder__fieldset .components-button { |
|
3704 margin-left: auto; |
|
3705 } |
|
3706 .components-placeholder.is-small .components-button { |
|
3707 padding: 0 8px 2px; |
|
3708 } |
|
3709 .components-popover { |
|
3710 position: fixed; |
|
3711 z-index: 1000000; |
|
3712 top: 0; |
|
3713 left: 0; |
|
3714 opacity: 0; |
|
3715 } |
|
3716 .components-popover.is-expanded, .components-popover[data-x-axis][data-y-axis] { |
|
3717 opacity: 1; |
|
3718 } |
|
3719 .components-popover.is-expanded { |
|
3720 top: 0; |
|
3721 left: 0; |
|
3722 right: 0; |
|
3723 bottom: 0; |
|
3724 z-index: 1000000 !important; |
|
3725 } |
|
3726 .components-popover:not(.is-without-arrow) { |
|
3727 margin-left: 2px; |
|
3728 } |
|
3729 .components-popover:not(.is-without-arrow)::before { |
|
3730 border: 8px solid #ccc; |
|
3731 } |
|
3732 .components-popover:not(.is-without-arrow).is-alternate::before { |
|
3733 border-color: #1e1e1e; |
|
3734 } |
|
3735 .components-popover:not(.is-without-arrow)::after { |
|
3736 border: 8px solid #fff; |
|
3737 } |
|
3738 .components-popover:not(.is-without-arrow)::before, .components-popover:not(.is-without-arrow)::after { |
|
3739 content: ""; |
|
3740 position: absolute; |
|
3741 height: 0; |
|
3742 width: 0; |
|
3743 line-height: 0; |
|
3744 } |
|
3745 .components-popover:not(.is-without-arrow)[data-y-axis=top] { |
|
3746 margin-top: -8px; |
|
3747 } |
|
3748 .components-popover:not(.is-without-arrow)[data-y-axis=top]::before { |
|
3749 bottom: -8px; |
|
3750 } |
|
3751 .components-popover:not(.is-without-arrow)[data-y-axis=top]::after { |
|
3752 bottom: -6px; |
|
3753 } |
|
3754 .components-popover:not(.is-without-arrow)[data-y-axis=top]::before, .components-popover:not(.is-without-arrow)[data-y-axis=top]::after { |
|
3755 border-bottom: none; |
|
3756 border-left-color: transparent; |
|
3757 border-right-color: transparent; |
|
3758 border-top-style: solid; |
|
3759 margin-left: -10px; |
|
3760 } |
|
3761 .components-popover:not(.is-without-arrow)[data-y-axis=bottom] { |
|
3762 margin-top: 8px; |
|
3763 } |
|
3764 .components-popover:not(.is-without-arrow)[data-y-axis=bottom]::before { |
|
3765 top: -8px; |
|
3766 } |
|
3767 .components-popover:not(.is-without-arrow)[data-y-axis=bottom]::after { |
|
3768 top: -6px; |
|
3769 } |
|
3770 .components-popover:not(.is-without-arrow)[data-y-axis=bottom]::before, .components-popover:not(.is-without-arrow)[data-y-axis=bottom]::after { |
|
3771 border-bottom-style: solid; |
|
3772 border-left-color: transparent; |
|
3773 border-right-color: transparent; |
|
3774 border-top: none; |
|
3775 margin-left: -10px; |
|
3776 } |
|
3777 .components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=left] { |
|
3778 margin-left: -8px; |
|
3779 } |
|
3780 .components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=left]::before { |
|
3781 right: -8px; |
|
3782 } |
|
3783 .components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=left]::after { |
|
3784 right: -6px; |
|
3785 } |
|
3786 .components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=left]::before, .components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=left]::after { |
|
3787 border-bottom-color: transparent; |
|
3788 border-left-style: solid; |
|
3789 border-right: none; |
|
3790 border-top-color: transparent; |
|
3791 } |
|
3792 .components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=right] { |
|
3793 margin-left: 8px; |
|
3794 } |
|
3795 .components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=right]::before { |
|
3796 left: -8px; |
|
3797 } |
|
3798 .components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=right]::after { |
|
3799 left: -6px; |
|
3800 } |
|
3801 .components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=right]::before, .components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=right]::after { |
|
3802 border-bottom-color: transparent; |
|
3803 border-left: none; |
|
3804 border-right-style: solid; |
|
3805 border-top-color: transparent; |
|
3806 } |
|
3807 .components-popover[data-y-axis=top] { |
|
3808 bottom: 100%; |
|
3809 } |
|
3810 .components-popover[data-y-axis=bottom] { |
|
3811 top: 100%; |
|
3812 } |
|
3813 .components-popover[data-y-axis=middle] { |
|
3814 align-items: center; |
|
3815 display: flex; |
|
3816 } |
|
3817 .components-popover.is-from-top { |
|
3818 margin-top: 12px; |
|
3819 } |
|
3820 .components-popover.is-from-bottom { |
|
3821 margin-top: -12px; |
|
3822 } |
|
3823 .components-popover.is-from-left:not(.is-from-top):not(.is-from-bottom) { |
|
3824 margin-left: 12px; |
|
3825 } |
|
3826 .components-popover.is-from-right:not(.is-from-top):not(.is-from-bottom) { |
|
3827 margin-right: 12px; |
|
3828 } |
|
3829 |
|
3830 .components-popover__content { |
|
3831 height: 100%; |
|
3832 background: #fff; |
|
3833 border: 1px solid #ccc; |
|
3834 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); |
|
3835 border-radius: 2px; |
|
3836 } |
|
3837 .is-alternate .components-popover__content { |
|
3838 border: 1px solid #1e1e1e; |
|
3839 box-shadow: none; |
|
3840 } |
|
3841 .components-popover .components-popover__content { |
|
3842 position: absolute; |
|
3843 height: auto; |
|
3844 overflow-y: auto; |
|
3845 } |
|
3846 .components-popover.is-expanded .components-popover__content { |
|
3847 position: static; |
|
3848 height: calc(100% - 48px); |
|
3849 overflow-y: visible; |
|
3850 min-width: auto; |
|
3851 border: none; |
|
3852 border-top: 1px solid #1e1e1e; |
|
3853 } |
|
3854 .components-popover[data-y-axis=top] .components-popover__content { |
|
3855 bottom: 100%; |
|
3856 } |
|
3857 .components-popover[data-x-axis=center] .components-popover__content { |
|
3858 left: 50%; |
|
3859 transform: translateX(-50%); |
|
3860 } |
|
3861 .components-popover[data-x-axis=right] .components-popover__content { |
|
3862 position: absolute; |
|
3863 left: 100%; |
|
3864 } |
|
3865 .components-popover:not([data-y-axis=middle])[data-x-axis=right] .components-popover__content { |
|
3866 margin-left: -25px; |
|
3867 } |
|
3868 .components-popover[data-x-axis=left] .components-popover__content { |
|
3869 position: absolute; |
|
3870 right: 100%; |
|
3871 } |
|
3872 .components-popover:not([data-y-axis=middle])[data-x-axis=left] .components-popover__content { |
|
3873 margin-right: -25px; |
|
3874 } |
|
3875 |
|
3876 .components-popover__header { |
|
3877 align-items: center; |
|
3878 background: #fff; |
|
3879 display: flex; |
|
3880 height: 48px; |
|
3881 justify-content: space-between; |
|
3882 padding: 0 8px 0 16px; |
|
3883 } |
|
3884 |
|
3885 .components-popover__header-title { |
|
3886 overflow: hidden; |
|
3887 text-overflow: ellipsis; |
|
3888 white-space: nowrap; |
|
3889 width: 100%; |
|
3890 } |
|
3891 |
|
3892 .components-popover__close.components-button { |
|
3893 z-index: 5; |
|
3894 } |
|
3895 .components-radio-control { |
|
3896 display: flex; |
|
3897 flex-direction: column; |
|
3898 } |
|
3899 .components-radio-control .components-base-control__help { |
|
3900 margin-top: 0; |
|
3901 } |
|
3902 .components-radio-control .components-base-control__field { |
|
3903 margin-bottom: 0; |
|
3904 } |
|
3905 |
|
3906 .components-radio-control__option:not(:last-child) { |
|
3907 margin-bottom: 4px; |
|
3908 } |
|
3909 |
|
3910 .components-radio-control__input[type=radio] { |
|
3911 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; |
|
3912 padding: 6px 8px; |
|
3913 box-shadow: 0 0 0 transparent; |
|
3914 transition: box-shadow 0.1s linear; |
|
3915 border-radius: 2px; |
|
3916 border: 1px solid #757575; |
|
3917 /* Fonts smaller than 16px causes mobile safari to zoom. */ |
|
3918 font-size: 16px; |
|
3919 /* Override core line-height. To be reviewed. */ |
|
3920 line-height: normal; |
|
3921 border: 1px solid #1e1e1e; |
|
3922 margin-left: 12px; |
|
3923 transition: none; |
|
3924 border-radius: 50%; |
|
3925 width: 24px; |
|
3926 height: 24px; |
|
3927 margin-top: 0; |
|
3928 margin-left: 6px; |
|
3929 } |
|
3930 @media (prefers-reduced-motion: reduce) { |
|
3931 .components-radio-control__input[type=radio] { |
|
3932 transition-duration: 0s; |
|
3933 transition-delay: 0s; |
|
3934 } |
|
3935 } |
|
3936 @media (min-width: 600px) { |
|
3937 .components-radio-control__input[type=radio] { |
|
3938 font-size: 13px; |
|
3939 /* Override core line-height. To be reviewed. */ |
|
3940 line-height: normal; |
|
3941 } |
|
3942 } |
|
3943 .components-radio-control__input[type=radio]:focus { |
|
3944 border-color: var(--wp-admin-theme-color); |
|
3945 box-shadow: 0 0 0 1px var(--wp-admin-theme-color); |
|
3946 outline: 2px solid transparent; |
|
3947 } |
|
3948 .components-radio-control__input[type=radio]::-webkit-input-placeholder { |
|
3949 color: rgba(30, 30, 30, 0.62); |
|
3950 } |
|
3951 .components-radio-control__input[type=radio]::-moz-placeholder { |
|
3952 opacity: 1; |
|
3953 color: rgba(30, 30, 30, 0.62); |
|
3954 } |
|
3955 .components-radio-control__input[type=radio]:-ms-input-placeholder { |
|
3956 color: rgba(30, 30, 30, 0.62); |
|
3957 } |
|
3958 @media (min-width: 600px) { |
|
3959 .components-radio-control__input[type=radio] { |
|
3960 height: 20px; |
|
3961 width: 20px; |
|
3962 } |
|
3963 } |
|
3964 .components-radio-control__input[type=radio]:checked::before { |
|
3965 box-sizing: inherit; |
|
3966 width: 8px; |
|
3967 height: 8px; |
|
3968 transform: translate(-7px, 7px); |
|
3969 margin: 0; |
|
3970 background-color: #fff; |
|
3971 border: 4px solid #fff; |
|
3972 } |
|
3973 @media (min-width: 600px) { |
|
3974 .components-radio-control__input[type=radio]:checked::before { |
|
3975 transform: translate(-5px, 5px); |
|
3976 } |
|
3977 } |
|
3978 .components-radio-control__input[type=radio]:focus { |
|
3979 box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color); |
|
3980 outline: 2px solid transparent; |
|
3981 } |
|
3982 .components-radio-control__input[type=radio]:checked { |
|
3983 background: var(--wp-admin-theme-color); |
|
3984 border-color: var(--wp-admin-theme-color); |
|
3985 } |
|
3986 |
|
3987 .components-resizable-box__handle { |
|
3988 display: none; |
|
3989 width: 23px; |
|
3990 height: 23px; |
|
3991 z-index: 2; |
|
3992 } |
|
3993 .components-resizable-box__container.has-show-handle .components-resizable-box__handle { |
|
3994 display: block; |
|
3995 } |
|
3996 |
|
3997 .components-resizable-box__container > img { |
|
3998 width: inherit; |
|
3999 } |
|
4000 |
|
4001 .components-resizable-box__handle::after { |
|
4002 display: block; |
|
4003 content: ""; |
|
4004 width: 15px; |
|
4005 height: 15px; |
|
4006 border-radius: 50%; |
|
4007 background: #fff; |
|
4008 cursor: inherit; |
|
4009 position: absolute; |
|
4010 top: calc(50% - 8px); |
|
4011 left: calc(50% - 8px); |
|
4012 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); |
|
4013 outline: 2px solid transparent; |
|
4014 } |
|
4015 |
|
4016 .components-resizable-box__side-handle::before { |
|
4017 display: block; |
|
4018 border-radius: 2px; |
|
4019 content: ""; |
|
4020 width: 3px; |
|
4021 height: 3px; |
|
4022 background: var(--wp-admin-theme-color); |
|
4023 cursor: inherit; |
|
4024 position: absolute; |
|
4025 top: calc(50% - 1px); |
|
4026 left: calc(50% - 1px); |
|
4027 transition: transform 0.1s ease-in; |
|
4028 opacity: 0; |
|
4029 } |
|
4030 @media (prefers-reduced-motion: reduce) { |
|
4031 .components-resizable-box__side-handle::before { |
|
4032 transition-duration: 0s; |
|
4033 transition-delay: 0s; |
|
4034 } |
|
4035 } |
|
4036 |
|
4037 .components-resizable-box__side-handle { |
|
4038 z-index: 2; |
|
4039 } |
|
4040 |
|
4041 .components-resizable-box__corner-handle { |
|
4042 z-index: 2; |
|
4043 } |
|
4044 |
|
4045 .components-resizable-box__side-handle.components-resizable-box__handle-top, |
|
4046 .components-resizable-box__side-handle.components-resizable-box__handle-bottom, |
|
4047 .components-resizable-box__side-handle.components-resizable-box__handle-top::before, |
|
4048 .components-resizable-box__side-handle.components-resizable-box__handle-bottom::before { |
|
4049 width: 100%; |
|
4050 right: 0; |
|
4051 border-right: 0; |
|
4052 border-left: 0; |
|
4053 } |
|
4054 |
|
4055 .components-resizable-box__side-handle.components-resizable-box__handle-left, |
|
4056 .components-resizable-box__side-handle.components-resizable-box__handle-right, |
|
4057 .components-resizable-box__side-handle.components-resizable-box__handle-left::before, |
|
4058 .components-resizable-box__side-handle.components-resizable-box__handle-right::before { |
|
4059 height: 100%; |
|
4060 top: 0; |
|
4061 border-top: 0; |
|
4062 border-bottom: 0; |
|
4063 } |
|
4064 |
|
4065 .components-resizable-box__side-handle.components-resizable-box__handle-top:hover::before, |
|
4066 .components-resizable-box__side-handle.components-resizable-box__handle-bottom:hover::before, |
|
4067 .components-resizable-box__side-handle.components-resizable-box__handle-top:active::before, |
|
4068 .components-resizable-box__side-handle.components-resizable-box__handle-bottom:active::before { |
|
4069 animation: components-resizable-box__top-bottom-animation 0.1s ease-out 0s; |
|
4070 animation-fill-mode: forwards; |
|
4071 } |
|
4072 @media (prefers-reduced-motion: reduce) { |
|
4073 .components-resizable-box__side-handle.components-resizable-box__handle-top:hover::before, |
|
4074 .components-resizable-box__side-handle.components-resizable-box__handle-bottom:hover::before, |
|
4075 .components-resizable-box__side-handle.components-resizable-box__handle-top:active::before, |
|
4076 .components-resizable-box__side-handle.components-resizable-box__handle-bottom:active::before { |
|
4077 animation-duration: 1ms; |
|
4078 animation-delay: 0s; |
|
4079 } |
|
4080 } |
|
4081 |
|
4082 .components-resizable-box__side-handle.components-resizable-box__handle-left:hover::before, |
|
4083 .components-resizable-box__side-handle.components-resizable-box__handle-right:hover::before, |
|
4084 .components-resizable-box__side-handle.components-resizable-box__handle-left:active::before, |
|
4085 .components-resizable-box__side-handle.components-resizable-box__handle-right:active::before { |
|
4086 animation: components-resizable-box__left-right-animation 0.1s ease-out 0s; |
|
4087 animation-fill-mode: forwards; |
|
4088 } |
|
4089 @media (prefers-reduced-motion: reduce) { |
|
4090 .components-resizable-box__side-handle.components-resizable-box__handle-left:hover::before, |
|
4091 .components-resizable-box__side-handle.components-resizable-box__handle-right:hover::before, |
|
4092 .components-resizable-box__side-handle.components-resizable-box__handle-left:active::before, |
|
4093 .components-resizable-box__side-handle.components-resizable-box__handle-right:active::before { |
|
4094 animation-duration: 1ms; |
|
4095 animation-delay: 0s; |
|
4096 } |
|
4097 } |
|
4098 |
|
4099 /* This CSS is shown only to Safari, which has a bug with table-caption making it jumpy. |
|
4100 See https://bugs.webkit.org/show_bug.cgi?id=187903. */ |
|
4101 @media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) { |
|
4102 @supports (-webkit-appearance: none) { |
|
4103 .components-resizable-box__side-handle.components-resizable-box__handle-top:hover::before, |
|
4104 .components-resizable-box__side-handle.components-resizable-box__handle-bottom:hover::before, |
|
4105 .components-resizable-box__side-handle.components-resizable-box__handle-top:active::before, |
|
4106 .components-resizable-box__side-handle.components-resizable-box__handle-bottom:active::before { |
|
4107 animation: none; |
|
4108 } |
2588 } |
4109 |
2589 } |
4110 .components-resizable-box__side-handle.components-resizable-box__handle-left:hover::before, |
2590 } |
4111 .components-resizable-box__side-handle.components-resizable-box__handle-right:hover::before, |
2591 @keyframes components-resizable-box__top-bottom-animation{ |
4112 .components-resizable-box__side-handle.components-resizable-box__handle-left:active::before, |
2592 0%{ |
4113 .components-resizable-box__side-handle.components-resizable-box__handle-right:active::before { |
2593 opacity:0; |
4114 animation: none; |
2594 transform:scaleX(0); |
4115 } |
2595 } |
4116 } |
2596 to{ |
4117 } |
2597 opacity:1; |
4118 @keyframes components-resizable-box__top-bottom-animation { |
2598 transform:scaleX(1); |
4119 from { |
2599 } |
4120 transform: scaleX(0); |
2600 } |
4121 opacity: 0; |
2601 @keyframes components-resizable-box__left-right-animation{ |
4122 } |
2602 0%{ |
4123 to { |
2603 opacity:0; |
4124 transform: scaleX(1); |
2604 transform:scaleY(0); |
4125 opacity: 1; |
2605 } |
4126 } |
2606 to{ |
4127 } |
2607 opacity:1; |
4128 @keyframes components-resizable-box__left-right-animation { |
2608 transform:scaleY(1); |
4129 from { |
2609 } |
4130 transform: scaleY(0); |
2610 } |
4131 opacity: 0; |
2611 .components-resizable-box__handle-right{ |
4132 } |
2612 right:-11.5px; |
4133 to { |
2613 } |
4134 transform: scaleY(1); |
2614 |
4135 opacity: 1; |
2615 .components-resizable-box__handle-left{ |
4136 } |
2616 left:-11.5px; |
4137 } |
2617 } |
4138 .components-resizable-box__handle-right { |
2618 |
4139 right: calc(11.5px * -1); |
2619 .components-resizable-box__handle-top{ |
4140 } |
2620 top:-11.5px; |
4141 |
2621 } |
4142 .components-resizable-box__handle-left { |
2622 |
4143 left: calc(11.5px * -1); |
2623 .components-resizable-box__handle-bottom{ |
4144 } |
2624 bottom:-11.5px; |
4145 |
2625 } |
4146 .components-resizable-box__handle-top { |
2626 .components-responsive-wrapper{ |
4147 top: calc(11.5px * -1); |
2627 align-items:center; |
4148 } |
2628 display:flex; |
4149 |
2629 justify-content:center; |
4150 .components-resizable-box__handle-bottom { |
2630 max-width:100%; |
4151 bottom: calc(11.5px * -1); |
2631 position:relative; |
4152 } |
2632 } |
4153 .components-responsive-wrapper { |
2633 |
4154 position: relative; |
2634 .components-responsive-wrapper__content{ |
4155 max-width: 100%; |
2635 display:block; |
4156 } |
2636 max-width:100%; |
4157 .components-responsive-wrapper, .components-responsive-wrapper > span { |
2637 width:100%; |
4158 display: block; |
2638 } |
4159 } |
2639 |
4160 |
2640 .components-sandbox{ |
4161 .components-responsive-wrapper__content { |
2641 overflow:hidden; |
4162 position: absolute; |
2642 } |
4163 top: 0; |
2643 |
4164 left: 0; |
2644 iframe.components-sandbox{ |
4165 bottom: 0; |
2645 width:100%; |
4166 right: 0; |
2646 } |
4167 width: 100%; |
2647 |
4168 height: 100%; |
2648 body.lockscroll,html.lockscroll{ |
4169 margin: auto; |
2649 overflow:hidden; |
4170 } |
2650 } |
4171 |
2651 |
4172 .components-sandbox { |
2652 .components-select-control__input{ |
4173 overflow: hidden; |
2653 outline:0; |
4174 } |
2654 -webkit-tap-highlight-color:rgba(0, 0, 0, 0) !important; |
4175 |
2655 } |
4176 iframe.components-sandbox { |
2656 |
4177 width: 100%; |
2657 @media (max-width:782px){ |
4178 } |
2658 .components-base-control .components-base-control__field .components-select-control__input{ |
4179 |
2659 font-size:16px; |
4180 html.lockscroll, |
2660 } |
4181 body.lockscroll { |
2661 } |
4182 overflow: hidden; |
2662 .components-snackbar{ |
4183 } |
2663 -webkit-backdrop-filter:blur(16px) saturate(180%); |
4184 |
2664 backdrop-filter:blur(16px) saturate(180%); |
4185 .components-search-control { |
2665 background:#000000d9; |
4186 position: relative; |
2666 border-radius:2px; |
4187 } |
2667 box-shadow:0 .7px 1px #0000001a,0 1.2px 1.7px -.2px #0000001a,0 2.3px 3.3px -.5px #0000001a; |
4188 .components-search-control input[type=search].components-search-control__input { |
2668 box-sizing:border-box; |
4189 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; |
2669 color:#fff; |
4190 padding: 6px 8px; |
2670 cursor:pointer; |
4191 box-shadow: 0 0 0 transparent; |
2671 font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif; |
4192 transition: box-shadow 0.1s linear; |
2672 font-size:13px; |
4193 border-radius: 2px; |
2673 max-width:600px; |
4194 border: 1px solid #757575; |
2674 padding:12px 20px; |
4195 /* Fonts smaller than 16px causes mobile safari to zoom. */ |
2675 pointer-events:auto; |
4196 font-size: 16px; |
2676 width:100%; |
4197 /* Override core line-height. To be reviewed. */ |
2677 } |
4198 line-height: normal; |
2678 @media (min-width:600px){ |
4199 display: block; |
2679 .components-snackbar{ |
4200 padding: 16px 16px 16px 48px; |
2680 width:-moz-fit-content; |
4201 background: #f0f0f0; |
2681 width:fit-content; |
4202 border: none; |
2682 } |
4203 width: 100%; |
2683 } |
4204 height: 48px; |
2684 .components-snackbar:focus{ |
4205 /* Fonts smaller than 16px causes mobile safari to zoom. */ |
2685 box-shadow:inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); |
4206 font-size: 16px; |
2686 } |
4207 } |
2687 .components-snackbar.components-snackbar-explicit-dismiss{ |
4208 @media (prefers-reduced-motion: reduce) { |
2688 cursor:default; |
4209 .components-search-control input[type=search].components-search-control__input { |
2689 } |
4210 transition-duration: 0s; |
2690 .components-snackbar .components-snackbar__content-with-icon{ |
4211 transition-delay: 0s; |
2691 padding-right:24px; |
4212 } |
2692 position:relative; |
4213 } |
2693 } |
4214 @media (min-width: 600px) { |
2694 .components-snackbar .components-snackbar__icon{ |
4215 .components-search-control input[type=search].components-search-control__input { |
2695 position:absolute; |
4216 font-size: 13px; |
2696 right:-8px; |
4217 /* Override core line-height. To be reviewed. */ |
2697 top:-2.9px; |
4218 line-height: normal; |
2698 } |
4219 } |
2699 .components-snackbar .components-snackbar__dismiss-button{ |
4220 } |
2700 cursor:pointer; |
4221 .components-search-control input[type=search].components-search-control__input:focus { |
2701 margin-right:24px; |
4222 border-color: var(--wp-admin-theme-color); |
2702 } |
4223 box-shadow: 0 0 0 1px var(--wp-admin-theme-color); |
2703 |
4224 outline: 2px solid transparent; |
2704 .components-snackbar__action.components-button{ |
4225 } |
2705 color:#fff; |
4226 .components-search-control input[type=search].components-search-control__input::-webkit-input-placeholder { |
2706 flex-shrink:0; |
4227 color: rgba(30, 30, 30, 0.62); |
2707 height:auto; |
4228 } |
2708 line-height:1.4; |
4229 .components-search-control input[type=search].components-search-control__input::-moz-placeholder { |
2709 margin-right:32px; |
4230 opacity: 1; |
2710 padding:0; |
4231 color: rgba(30, 30, 30, 0.62); |
2711 } |
4232 } |
2712 .components-snackbar__action.components-button:not(:disabled):not([aria-disabled=true]):not(.is-secondary){ |
4233 .components-search-control input[type=search].components-search-control__input:-ms-input-placeholder { |
2713 background-color:initial; |
4234 color: rgba(30, 30, 30, 0.62); |
2714 text-decoration:underline; |
4235 } |
2715 } |
4236 @media (min-width: 600px) { |
2716 .components-snackbar__action.components-button:not(:disabled):not([aria-disabled=true]):not(.is-secondary):focus{ |
4237 .components-search-control input[type=search].components-search-control__input { |
2717 box-shadow:none; |
4238 font-size: 13px; |
2718 color:#fff; |
4239 } |
2719 outline:1px dotted #fff; |
4240 } |
2720 } |
4241 .components-search-control input[type=search].components-search-control__input:focus { |
2721 .components-snackbar__action.components-button:not(:disabled):not([aria-disabled=true]):not(.is-secondary):hover{ |
4242 background: #fff; |
2722 color:#fff; |
4243 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); |
2723 text-decoration:none; |
4244 } |
2724 } |
4245 .components-search-control input[type=search].components-search-control__input::placeholder { |
2725 |
4246 color: #757575; |
2726 .components-snackbar__content{ |
4247 } |
2727 align-items:baseline; |
4248 .components-search-control input[type=search].components-search-control__input::-webkit-search-decoration, .components-search-control input[type=search].components-search-control__input::-webkit-search-cancel-button, .components-search-control input[type=search].components-search-control__input::-webkit-search-results-button, .components-search-control input[type=search].components-search-control__input::-webkit-search-results-decoration { |
2728 display:flex; |
4249 -webkit-appearance: none; |
2729 justify-content:space-between; |
4250 } |
2730 line-height:1.4; |
4251 |
2731 } |
4252 .components-search-control__icon { |
2732 |
4253 position: absolute; |
2733 .components-snackbar-list{ |
4254 top: 0; |
2734 box-sizing:border-box; |
4255 left: 12px; |
2735 pointer-events:none; |
4256 bottom: 0; |
2736 position:absolute; |
4257 display: flex; |
2737 width:100%; |
4258 align-items: center; |
2738 z-index:100000; |
4259 } |
2739 } |
4260 .components-search-control__icon > svg { |
2740 |
4261 margin: 8px 0; |
2741 .components-snackbar-list__notice-container{ |
4262 } |
2742 padding-top:8px; |
4263 |
2743 position:relative; |
4264 .components-search-control__input-wrapper { |
2744 } |
4265 position: relative; |
2745 |
4266 } |
2746 .components-tab-panel__tabs{ |
4267 |
2747 align-items:stretch; |
4268 .components-select-control__input { |
2748 display:flex; |
4269 background: #fff; |
2749 flex-direction:row; |
4270 height: 36px; |
2750 } |
4271 line-height: 36px; |
2751 .components-tab-panel__tabs[aria-orientation=vertical]{ |
4272 margin: 1px; |
2752 flex-direction:column; |
4273 outline: 0; |
2753 } |
4274 width: 100%; |
2754 |
4275 -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important; |
2755 .components-tab-panel__tabs-item{ |
4276 } |
2756 background:#0000; |
4277 @media (min-width: 782px) { |
2757 border:none; |
4278 .components-select-control__input { |
2758 border-radius:0; |
4279 height: 28px; |
2759 box-shadow:none; |
4280 line-height: 28px; |
2760 cursor:pointer; |
4281 } |
2761 font-weight:500; |
4282 } |
2762 height:48px; |
4283 |
2763 margin-right:0; |
4284 @media (max-width: 782px) { |
2764 padding:3px 16px; |
4285 .components-base-control .components-base-control__field .components-select-control__input { |
2765 position:relative; |
4286 font-size: 16px; |
2766 } |
4287 } |
2767 .components-tab-panel__tabs-item:focus:not(:disabled){ |
4288 } |
2768 box-shadow:none; |
4289 .components-snackbar { |
2769 outline:none; |
4290 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; |
2770 position:relative; |
4291 font-size: 13px; |
2771 } |
4292 background-color: #1e1e1e; |
2772 .components-tab-panel__tabs-item:after{ |
4293 border-radius: 2px; |
2773 background:var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); |
4294 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); |
2774 border-radius:0; |
4295 color: #fff; |
2775 bottom:0; |
4296 padding: 16px 24px; |
2776 content:""; |
4297 width: 100%; |
2777 height:calc(var(--wp-admin-border-width-focus)*0); |
4298 max-width: 600px; |
2778 left:0; |
4299 box-sizing: border-box; |
2779 pointer-events:none; |
4300 cursor: pointer; |
2780 position:absolute; |
4301 pointer-events: auto; |
2781 right:0; |
4302 } |
2782 transition:all .1s linear; |
4303 @media (min-width: 600px) { |
2783 } |
4304 .components-snackbar { |
2784 @media (prefers-reduced-motion:reduce){ |
4305 width: -moz-fit-content; |
2785 .components-tab-panel__tabs-item:after{ |
4306 width: fit-content; |
2786 transition-delay:0s; |
4307 } |
2787 transition-duration:0s; |
4308 } |
2788 } |
4309 .components-snackbar:focus { |
2789 } |
4310 box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--wp-admin-theme-color); |
2790 .components-tab-panel__tabs-item.is-active:after{ |
4311 } |
2791 height:calc(var(--wp-admin-border-width-focus)*1); |
4312 .components-snackbar.components-snackbar-explicit-dismiss { |
2792 outline:2px solid #0000; |
4313 cursor: default; |
2793 outline-offset:-1px; |
4314 } |
2794 } |
4315 .components-snackbar .components-snackbar__content-with-icon { |
2795 .components-tab-panel__tabs-item:before{ |
4316 margin-right: 24px; |
2796 border-radius:2px; |
4317 } |
2797 bottom:12px; |
4318 .components-snackbar .components-snackbar__icon { |
2798 box-shadow:0 0 0 0 #0000; |
4319 position: absolute; |
2799 content:""; |
4320 top: 24px; |
2800 left:12px; |
4321 right: 28px; |
2801 pointer-events:none; |
4322 } |
2802 position:absolute; |
4323 .components-snackbar .components-snackbar__dismiss-button { |
2803 right:12px; |
4324 margin-right: 32px; |
2804 top:12px; |
4325 cursor: pointer; |
2805 transition:all .1s linear; |
4326 } |
2806 } |
4327 |
2807 @media (prefers-reduced-motion:reduce){ |
4328 .components-snackbar__action.components-button { |
2808 .components-tab-panel__tabs-item:before{ |
4329 margin-right: 32px; |
2809 transition-delay:0s; |
4330 color: #fff; |
2810 transition-duration:0s; |
4331 height: auto; |
2811 } |
4332 flex-shrink: 0; |
2812 } |
4333 line-height: 1.4; |
2813 .components-tab-panel__tabs-item:focus-visible:before{ |
4334 padding: 0; |
2814 box-shadow:0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); |
4335 } |
2815 outline:2px solid #0000; |
4336 .components-snackbar__action.components-button:not(:disabled):not([aria-disabled=true]):not(.is-secondary) { |
2816 } |
4337 text-decoration: underline; |
2817 |
4338 background-color: transparent; |
2818 .components-tab-panel__tab-content:focus{ |
4339 } |
2819 box-shadow:none; |
4340 .components-snackbar__action.components-button:not(:disabled):not([aria-disabled=true]):not(.is-secondary):focus { |
2820 outline:none; |
4341 color: #fff; |
2821 } |
4342 box-shadow: none; |
2822 .components-tab-panel__tab-content:focus-visible{ |
4343 outline: 1px dotted #fff; |
2823 border-radius:2px; |
4344 } |
2824 box-shadow:0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); |
4345 .components-snackbar__action.components-button:not(:disabled):not([aria-disabled=true]):not(.is-secondary):hover { |
2825 outline:2px solid #0000; |
4346 color: var(--wp-admin-theme-color); |
2826 outline-offset:0; |
4347 } |
2827 } |
4348 |
2828 |
4349 .components-snackbar__content { |
2829 .components-text-control__input,.components-text-control__input[type=color],.components-text-control__input[type=date],.components-text-control__input[type=datetime-local],.components-text-control__input[type=datetime],.components-text-control__input[type=email],.components-text-control__input[type=month],.components-text-control__input[type=number],.components-text-control__input[type=password],.components-text-control__input[type=tel],.components-text-control__input[type=text],.components-text-control__input[type=time],.components-text-control__input[type=url],.components-text-control__input[type=week]{ |
4350 display: flex; |
2830 border:1px solid #949494; |
4351 align-items: baseline; |
2831 border-radius:2px; |
4352 justify-content: space-between; |
2832 box-shadow:0 0 0 #0000; |
4353 line-height: 1.4; |
2833 font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif; |
4354 } |
2834 font-size:16px; |
4355 |
2835 height:32px; |
4356 .components-snackbar-list { |
2836 line-height:normal; |
4357 position: absolute; |
2837 margin:0; |
4358 z-index: 100000; |
2838 padding:6px 8px; |
4359 width: 100%; |
2839 transition:box-shadow .1s linear; |
4360 box-sizing: border-box; |
2840 width:100%; |
4361 pointer-events: none; |
2841 } |
4362 } |
2842 @media (prefers-reduced-motion:reduce){ |
4363 |
2843 .components-text-control__input,.components-text-control__input[type=color],.components-text-control__input[type=date],.components-text-control__input[type=datetime-local],.components-text-control__input[type=datetime],.components-text-control__input[type=email],.components-text-control__input[type=month],.components-text-control__input[type=number],.components-text-control__input[type=password],.components-text-control__input[type=tel],.components-text-control__input[type=text],.components-text-control__input[type=time],.components-text-control__input[type=url],.components-text-control__input[type=week]{ |
4364 .components-snackbar-list__notice-container { |
2844 transition-delay:0s; |
4365 position: relative; |
2845 transition-duration:0s; |
4366 padding-top: 8px; |
2846 } |
4367 } |
2847 } |
4368 |
2848 @media (min-width:600px){ |
4369 .components-swatch { |
2849 .components-text-control__input,.components-text-control__input[type=color],.components-text-control__input[type=date],.components-text-control__input[type=datetime-local],.components-text-control__input[type=datetime],.components-text-control__input[type=email],.components-text-control__input[type=month],.components-text-control__input[type=number],.components-text-control__input[type=password],.components-text-control__input[type=tel],.components-text-control__input[type=text],.components-text-control__input[type=time],.components-text-control__input[type=url],.components-text-control__input[type=week]{ |
4370 width: 18px; |
2850 font-size:13px; |
4371 height: 18px; |
2851 line-height:normal; |
4372 border-radius: 50%; |
2852 } |
4373 color: transparent; |
2853 } |
4374 background: transparent; |
2854 .components-text-control__input:focus,.components-text-control__input[type=color]:focus,.components-text-control__input[type=date]:focus,.components-text-control__input[type=datetime-local]:focus,.components-text-control__input[type=datetime]:focus,.components-text-control__input[type=email]:focus,.components-text-control__input[type=month]:focus,.components-text-control__input[type=number]:focus,.components-text-control__input[type=password]:focus,.components-text-control__input[type=tel]:focus,.components-text-control__input[type=text]:focus,.components-text-control__input[type=time]:focus,.components-text-control__input[type=url]:focus,.components-text-control__input[type=week]:focus{ |
4375 } |
2855 border-color:var(--wp-admin-theme-color); |
4376 .components-swatch::after { |
2856 box-shadow:0 0 0 .5px var(--wp-admin-theme-color); |
4377 content: ""; |
2857 outline:2px solid #0000; |
4378 display: block; |
2858 } |
4379 width: 100%; |
2859 .components-text-control__input::-webkit-input-placeholder,.components-text-control__input[type=color]::-webkit-input-placeholder,.components-text-control__input[type=date]::-webkit-input-placeholder,.components-text-control__input[type=datetime-local]::-webkit-input-placeholder,.components-text-control__input[type=datetime]::-webkit-input-placeholder,.components-text-control__input[type=email]::-webkit-input-placeholder,.components-text-control__input[type=month]::-webkit-input-placeholder,.components-text-control__input[type=number]::-webkit-input-placeholder,.components-text-control__input[type=password]::-webkit-input-placeholder,.components-text-control__input[type=tel]::-webkit-input-placeholder,.components-text-control__input[type=text]::-webkit-input-placeholder,.components-text-control__input[type=time]::-webkit-input-placeholder,.components-text-control__input[type=url]::-webkit-input-placeholder,.components-text-control__input[type=week]::-webkit-input-placeholder{ |
4380 height: 100%; |
2860 color:#1e1e1e9e; |
4381 border: 1px solid rgba(0, 0, 0, 0.2); |
2861 } |
4382 border-radius: 50%; |
2862 .components-text-control__input::-moz-placeholder,.components-text-control__input[type=color]::-moz-placeholder,.components-text-control__input[type=date]::-moz-placeholder,.components-text-control__input[type=datetime-local]::-moz-placeholder,.components-text-control__input[type=datetime]::-moz-placeholder,.components-text-control__input[type=email]::-moz-placeholder,.components-text-control__input[type=month]::-moz-placeholder,.components-text-control__input[type=number]::-moz-placeholder,.components-text-control__input[type=password]::-moz-placeholder,.components-text-control__input[type=tel]::-moz-placeholder,.components-text-control__input[type=text]::-moz-placeholder,.components-text-control__input[type=time]::-moz-placeholder,.components-text-control__input[type=url]::-moz-placeholder,.components-text-control__input[type=week]::-moz-placeholder{ |
4383 } |
2863 color:#1e1e1e9e; |
4384 |
2864 opacity:1; |
4385 .components-button.has-icon.has-text .components-swatch { |
2865 } |
4386 margin-left: 8px; |
2866 .components-text-control__input:-ms-input-placeholder,.components-text-control__input[type=color]:-ms-input-placeholder,.components-text-control__input[type=date]:-ms-input-placeholder,.components-text-control__input[type=datetime-local]:-ms-input-placeholder,.components-text-control__input[type=datetime]:-ms-input-placeholder,.components-text-control__input[type=email]:-ms-input-placeholder,.components-text-control__input[type=month]:-ms-input-placeholder,.components-text-control__input[type=number]:-ms-input-placeholder,.components-text-control__input[type=password]:-ms-input-placeholder,.components-text-control__input[type=tel]:-ms-input-placeholder,.components-text-control__input[type=text]:-ms-input-placeholder,.components-text-control__input[type=time]:-ms-input-placeholder,.components-text-control__input[type=url]:-ms-input-placeholder,.components-text-control__input[type=week]:-ms-input-placeholder{ |
4387 } |
2867 color:#1e1e1e9e; |
4388 |
2868 } |
4389 .components-tab-panel__tabs { |
2869 .components-text-control__input.is-next-40px-default-size,.components-text-control__input[type=color].is-next-40px-default-size,.components-text-control__input[type=date].is-next-40px-default-size,.components-text-control__input[type=datetime-local].is-next-40px-default-size,.components-text-control__input[type=datetime].is-next-40px-default-size,.components-text-control__input[type=email].is-next-40px-default-size,.components-text-control__input[type=month].is-next-40px-default-size,.components-text-control__input[type=number].is-next-40px-default-size,.components-text-control__input[type=password].is-next-40px-default-size,.components-text-control__input[type=tel].is-next-40px-default-size,.components-text-control__input[type=text].is-next-40px-default-size,.components-text-control__input[type=time].is-next-40px-default-size,.components-text-control__input[type=url].is-next-40px-default-size,.components-text-control__input[type=week].is-next-40px-default-size{ |
4390 display: flex; |
2870 height:40px; |
4391 align-items: stretch; |
2871 } |
4392 flex-direction: row; |
2872 |
4393 } |
2873 .components-tip{ |
4394 .components-tab-panel__tabs[aria-orientation=vertical] { |
2874 color:#757575; |
4395 flex-direction: column; |
2875 display:flex; |
4396 } |
2876 } |
4397 |
2877 .components-tip svg{ |
4398 .components-tab-panel__tabs-item { |
2878 align-self:center; |
4399 background: transparent; |
2879 fill:#f0b849; |
4400 border: none; |
2880 flex-shrink:0; |
4401 box-shadow: none; |
2881 margin-left:16px; |
4402 border-radius: 0; |
2882 } |
4403 cursor: pointer; |
2883 .components-tip p{ |
4404 height: 48px; |
2884 margin:0; |
4405 padding: 3px 16px; |
2885 } |
4406 margin-right: 0; |
2886 |
4407 font-weight: 500; |
2887 .components-accessible-toolbar{ |
4408 transition: box-shadow 0.1s linear; |
2888 border:1px solid #1e1e1e; |
4409 box-sizing: border-box; |
2889 border-radius:2px; |
4410 } |
2890 display:inline-flex; |
4411 .components-tab-panel__tabs-item::after { |
2891 flex-shrink:0; |
4412 content: attr(data-label); |
2892 } |
4413 display: block; |
2893 .components-accessible-toolbar>.components-toolbar-group:last-child{ |
4414 height: 0; |
2894 border-left:none; |
4415 overflow: hidden; |
2895 } |
4416 speak: none; |
2896 .components-accessible-toolbar.is-unstyled{ |
4417 visibility: hidden; |
2897 border:none; |
4418 } |
2898 } |
4419 .components-tab-panel__tabs-item:focus:not(:disabled) { |
2899 .components-accessible-toolbar.is-unstyled>.components-toolbar-group{ |
4420 box-shadow: inset 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); |
2900 border-left:none; |
4421 } |
2901 } |
4422 .components-tab-panel__tabs-item.is-active { |
2902 |
4423 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) transparent, inset 0 -4px 0 0 var(--wp-admin-theme-color); |
2903 .components-accessible-toolbar .components-button,.components-toolbar .components-button{ |
4424 position: relative; |
2904 height:48px; |
4425 } |
2905 padding-left:16px; |
4426 .components-tab-panel__tabs-item.is-active::before { |
2906 padding-right:16px; |
4427 content: ""; |
2907 position:relative; |
4428 position: absolute; |
2908 z-index:1; |
4429 top: 0; |
2909 } |
4430 bottom: 1px; |
2910 .components-accessible-toolbar .components-button:focus:not(:disabled),.components-toolbar .components-button:focus:not(:disabled){ |
4431 left: 0; |
2911 box-shadow:none; |
4432 right: 0; |
2912 outline:none; |
4433 border-bottom: 4px solid transparent; |
2913 } |
4434 } |
2914 .components-accessible-toolbar .components-button:before,.components-toolbar .components-button:before{ |
4435 .components-tab-panel__tabs-item:focus { |
2915 animation:components-button__appear-animation .1s ease; |
4436 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); |
2916 animation-fill-mode:forwards; |
4437 } |
2917 border-radius:2px; |
4438 .components-tab-panel__tabs-item.is-active:focus { |
2918 content:""; |
4439 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 -4px 0 0 var(--wp-admin-theme-color); |
2919 display:block; |
4440 } |
2920 height:32px; |
4441 |
2921 left:8px; |
4442 .components-text-control__input, |
2922 position:absolute; |
4443 .components-text-control__input[type=text], |
2923 right:8px; |
4444 .components-text-control__input[type=tel], |
2924 z-index:-1; |
4445 .components-text-control__input[type=time], |
2925 } |
4446 .components-text-control__input[type=url], |
2926 @media (prefers-reduced-motion:reduce){ |
4447 .components-text-control__input[type=week], |
2927 .components-accessible-toolbar .components-button:before,.components-toolbar .components-button:before{ |
4448 .components-text-control__input[type=password], |
2928 animation-delay:0s; |
4449 .components-text-control__input[type=color], |
2929 animation-duration:1ms; |
4450 .components-text-control__input[type=date], |
2930 } |
4451 .components-text-control__input[type=datetime], |
2931 } |
4452 .components-text-control__input[type=datetime-local], |
2932 .components-accessible-toolbar .components-button svg,.components-toolbar .components-button svg{ |
4453 .components-text-control__input[type=email], |
2933 margin-left:auto; |
4454 .components-text-control__input[type=month], |
2934 margin-right:auto; |
4455 .components-text-control__input[type=number] { |
2935 position:relative; |
4456 width: 100%; |
2936 } |
4457 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; |
2937 .components-accessible-toolbar .components-button.is-pressed,.components-accessible-toolbar .components-button.is-pressed:hover,.components-toolbar .components-button.is-pressed,.components-toolbar .components-button.is-pressed:hover{ |
4458 padding: 6px 8px; |
2938 background:#0000; |
4459 box-shadow: 0 0 0 transparent; |
2939 } |
4460 transition: box-shadow 0.1s linear; |
2940 .components-accessible-toolbar .components-button.is-pressed:before,.components-toolbar .components-button.is-pressed:before{ |
4461 border-radius: 2px; |
2941 background:#1e1e1e; |
4462 border: 1px solid #757575; |
2942 } |
4463 /* Fonts smaller than 16px causes mobile safari to zoom. */ |
2943 .components-accessible-toolbar .components-button:focus:before,.components-toolbar .components-button:focus:before{ |
4464 font-size: 16px; |
2944 box-shadow:inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); |
4465 /* Override core line-height. To be reviewed. */ |
2945 outline:2px solid #0000; |
4466 line-height: normal; |
2946 } |
4467 } |
2947 .components-accessible-toolbar .components-button.has-icon.has-icon,.components-toolbar .components-button.has-icon.has-icon{ |
4468 @media (prefers-reduced-motion: reduce) { |
2948 min-width:48px; |
4469 .components-text-control__input, |
2949 padding-left:8px; |
4470 .components-text-control__input[type=text], |
2950 padding-right:8px; |
4471 .components-text-control__input[type=tel], |
2951 } |
4472 .components-text-control__input[type=time], |
2952 |
4473 .components-text-control__input[type=url], |
2953 @keyframes components-button__appear-animation{ |
4474 .components-text-control__input[type=week], |
2954 0%{ |
4475 .components-text-control__input[type=password], |
2955 transform:scaleY(0); |
4476 .components-text-control__input[type=color], |
2956 } |
4477 .components-text-control__input[type=date], |
2957 to{ |
4478 .components-text-control__input[type=datetime], |
2958 transform:scaleY(1); |
4479 .components-text-control__input[type=datetime-local], |
2959 } |
4480 .components-text-control__input[type=email], |
2960 } |
4481 .components-text-control__input[type=month], |
2961 .components-toolbar__control.components-button{ |
4482 .components-text-control__input[type=number] { |
2962 position:relative; |
4483 transition-duration: 0s; |
2963 } |
4484 transition-delay: 0s; |
2964 .components-toolbar__control.components-button[data-subscript] svg{ |
4485 } |
2965 padding:5px 0 5px 10px; |
4486 } |
2966 } |
4487 @media (min-width: 600px) { |
2967 .components-toolbar__control.components-button[data-subscript]:after{ |
4488 .components-text-control__input, |
2968 bottom:10px; |
4489 .components-text-control__input[type=text], |
2969 content:attr(data-subscript); |
4490 .components-text-control__input[type=tel], |
2970 font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif; |
4491 .components-text-control__input[type=time], |
2971 font-size:13px; |
4492 .components-text-control__input[type=url], |
2972 font-weight:600; |
4493 .components-text-control__input[type=week], |
2973 left:8px; |
4494 .components-text-control__input[type=password], |
2974 line-height:12px; |
4495 .components-text-control__input[type=color], |
2975 position:absolute; |
4496 .components-text-control__input[type=date], |
2976 } |
4497 .components-text-control__input[type=datetime], |
2977 .components-toolbar__control.components-button:not(:disabled).is-pressed[data-subscript]:after{ |
4498 .components-text-control__input[type=datetime-local], |
2978 color:#fff; |
4499 .components-text-control__input[type=email], |
2979 } |
4500 .components-text-control__input[type=month], |
2980 |
4501 .components-text-control__input[type=number] { |
2981 .components-toolbar-group{ |
4502 font-size: 13px; |
2982 background-color:#fff; |
4503 /* Override core line-height. To be reviewed. */ |
2983 border-left:1px solid #1e1e1e; |
4504 line-height: normal; |
2984 display:inline-flex; |
4505 } |
2985 flex-shrink:0; |
4506 } |
2986 flex-wrap:wrap; |
4507 .components-text-control__input:focus, |
2987 line-height:0; |
4508 .components-text-control__input[type=text]:focus, |
2988 min-height:48px; |
4509 .components-text-control__input[type=tel]:focus, |
2989 padding-left:6px; |
4510 .components-text-control__input[type=time]:focus, |
2990 padding-right:6px; |
4511 .components-text-control__input[type=url]:focus, |
2991 } |
4512 .components-text-control__input[type=week]:focus, |
2992 .components-toolbar-group .components-toolbar-group.components-toolbar-group{ |
4513 .components-text-control__input[type=password]:focus, |
2993 border-width:0; |
4514 .components-text-control__input[type=color]:focus, |
2994 margin:0; |
4515 .components-text-control__input[type=date]:focus, |
2995 } |
4516 .components-text-control__input[type=datetime]:focus, |
2996 .components-toolbar-group .components-button.components-button,.components-toolbar-group .components-button.has-icon.has-icon{ |
4517 .components-text-control__input[type=datetime-local]:focus, |
2997 justify-content:center; |
4518 .components-text-control__input[type=email]:focus, |
2998 min-width:36px; |
4519 .components-text-control__input[type=month]:focus, |
2999 padding-left:6px; |
4520 .components-text-control__input[type=number]:focus { |
3000 padding-right:6px; |
4521 border-color: var(--wp-admin-theme-color); |
3001 } |
4522 box-shadow: 0 0 0 1px var(--wp-admin-theme-color); |
3002 .components-toolbar-group .components-button.components-button svg,.components-toolbar-group .components-button.has-icon.has-icon svg{ |
4523 outline: 2px solid transparent; |
3003 min-width:24px; |
4524 } |
3004 } |
4525 .components-text-control__input::-webkit-input-placeholder, |
3005 .components-toolbar-group .components-button.components-button:before,.components-toolbar-group .components-button.has-icon.has-icon:before{ |
4526 .components-text-control__input[type=text]::-webkit-input-placeholder, |
3006 left:2px; |
4527 .components-text-control__input[type=tel]::-webkit-input-placeholder, |
3007 right:2px; |
4528 .components-text-control__input[type=time]::-webkit-input-placeholder, |
3008 } |
4529 .components-text-control__input[type=url]::-webkit-input-placeholder, |
3009 |
4530 .components-text-control__input[type=week]::-webkit-input-placeholder, |
3010 .components-toolbar{ |
4531 .components-text-control__input[type=password]::-webkit-input-placeholder, |
3011 background-color:#fff; |
4532 .components-text-control__input[type=color]::-webkit-input-placeholder, |
3012 border:1px solid #1e1e1e; |
4533 .components-text-control__input[type=date]::-webkit-input-placeholder, |
3013 display:inline-flex; |
4534 .components-text-control__input[type=datetime]::-webkit-input-placeholder, |
3014 flex-shrink:0; |
4535 .components-text-control__input[type=datetime-local]::-webkit-input-placeholder, |
3015 flex-wrap:wrap; |
4536 .components-text-control__input[type=email]::-webkit-input-placeholder, |
3016 margin:0; |
4537 .components-text-control__input[type=month]::-webkit-input-placeholder, |
3017 min-height:48px; |
4538 .components-text-control__input[type=number]::-webkit-input-placeholder { |
3018 } |
4539 color: rgba(30, 30, 30, 0.62); |
3019 .components-toolbar .components-toolbar.components-toolbar{ |
4540 } |
3020 border-width:0; |
4541 .components-text-control__input::-moz-placeholder, |
3021 margin:0; |
4542 .components-text-control__input[type=text]::-moz-placeholder, |
3022 } |
4543 .components-text-control__input[type=tel]::-moz-placeholder, |
3023 |
4544 .components-text-control__input[type=time]::-moz-placeholder, |
3024 div.components-toolbar>div{ |
4545 .components-text-control__input[type=url]::-moz-placeholder, |
3025 display:flex; |
4546 .components-text-control__input[type=week]::-moz-placeholder, |
3026 margin:0; |
4547 .components-text-control__input[type=password]::-moz-placeholder, |
3027 } |
4548 .components-text-control__input[type=color]::-moz-placeholder, |
3028 div.components-toolbar>div+div.has-left-divider{ |
4549 .components-text-control__input[type=date]::-moz-placeholder, |
3029 margin-right:6px; |
4550 .components-text-control__input[type=datetime]::-moz-placeholder, |
3030 overflow:visible; |
4551 .components-text-control__input[type=datetime-local]::-moz-placeholder, |
3031 position:relative; |
4552 .components-text-control__input[type=email]::-moz-placeholder, |
3032 } |
4553 .components-text-control__input[type=month]::-moz-placeholder, |
3033 div.components-toolbar>div+div.has-left-divider:before{ |
4554 .components-text-control__input[type=number]::-moz-placeholder { |
3034 background-color:#ddd; |
4555 opacity: 1; |
3035 box-sizing:initial; |
4556 color: rgba(30, 30, 30, 0.62); |
3036 content:""; |
4557 } |
3037 display:inline-block; |
4558 .components-text-control__input:-ms-input-placeholder, |
3038 height:20px; |
4559 .components-text-control__input[type=text]:-ms-input-placeholder, |
3039 position:absolute; |
4560 .components-text-control__input[type=tel]:-ms-input-placeholder, |
3040 right:-3px; |
4561 .components-text-control__input[type=time]:-ms-input-placeholder, |
3041 top:8px; |
4562 .components-text-control__input[type=url]:-ms-input-placeholder, |
3042 width:1px; |
4563 .components-text-control__input[type=week]:-ms-input-placeholder, |
3043 } |
4564 .components-text-control__input[type=password]:-ms-input-placeholder, |
3044 |
4565 .components-text-control__input[type=color]:-ms-input-placeholder, |
3045 .components-tooltip{ |
4566 .components-text-control__input[type=date]:-ms-input-placeholder, |
3046 background:#000; |
4567 .components-text-control__input[type=datetime]:-ms-input-placeholder, |
3047 border-radius:2px; |
4568 .components-text-control__input[type=datetime-local]:-ms-input-placeholder, |
3048 color:#f0f0f0; |
4569 .components-text-control__input[type=email]:-ms-input-placeholder, |
3049 font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif; |
4570 .components-text-control__input[type=month]:-ms-input-placeholder, |
3050 font-size:12px; |
4571 .components-text-control__input[type=number]:-ms-input-placeholder { |
3051 line-height:1.4; |
4572 color: rgba(30, 30, 30, 0.62); |
3052 padding:4px 8px; |
4573 } |
3053 text-align:center; |
4574 |
3054 z-index:1000002; |
4575 .components-tip { |
3055 } |
4576 display: flex; |
3056 |
4577 color: #757575; |
3057 .components-tooltip__shortcut{ |
4578 } |
3058 margin-right:8px; |
4579 .components-tip svg { |
3059 } |
4580 align-self: center; |
|
4581 fill: #f0b849; |
|
4582 flex-shrink: 0; |
|
4583 margin-left: 16px; |
|
4584 } |
|
4585 .components-tip p { |
|
4586 margin: 0; |
|
4587 } |
|
4588 |
|
4589 .components-toggle-control .components-base-control__field { |
|
4590 display: flex; |
|
4591 margin-bottom: 12px; |
|
4592 line-height: initial; |
|
4593 align-items: center; |
|
4594 } |
|
4595 .components-toggle-control .components-base-control__field .components-form-toggle { |
|
4596 margin-left: 12px; |
|
4597 } |
|
4598 .components-toggle-control .components-base-control__field .components-toggle-control__label { |
|
4599 display: block; |
|
4600 } |
|
4601 |
|
4602 .components-accessible-toolbar { |
|
4603 display: inline-flex; |
|
4604 border: 1px solid #1e1e1e; |
|
4605 border-radius: 2px; |
|
4606 flex-shrink: 0; |
|
4607 } |
|
4608 .components-accessible-toolbar > .components-toolbar-group:last-child { |
|
4609 border-left: none; |
|
4610 } |
|
4611 |
|
4612 .components-accessible-toolbar .components-button, |
|
4613 .components-toolbar .components-button { |
|
4614 position: relative; |
|
4615 height: 48px; |
|
4616 z-index: 1; |
|
4617 padding-right: 16px; |
|
4618 padding-left: 16px; |
|
4619 } |
|
4620 .components-accessible-toolbar .components-button:focus:enabled, |
|
4621 .components-toolbar .components-button:focus:enabled { |
|
4622 box-shadow: none; |
|
4623 outline: none; |
|
4624 } |
|
4625 .components-accessible-toolbar .components-button::before, |
|
4626 .components-toolbar .components-button::before { |
|
4627 content: ""; |
|
4628 position: absolute; |
|
4629 display: block; |
|
4630 border-radius: 2px; |
|
4631 height: 32px; |
|
4632 right: 8px; |
|
4633 left: 8px; |
|
4634 z-index: -1; |
|
4635 animation: components-button__appear-animation 0.1s ease; |
|
4636 animation-fill-mode: forwards; |
|
4637 } |
|
4638 @media (prefers-reduced-motion: reduce) { |
|
4639 .components-accessible-toolbar .components-button::before, |
|
4640 .components-toolbar .components-button::before { |
|
4641 animation-duration: 1ms; |
|
4642 animation-delay: 0s; |
|
4643 } |
|
4644 } |
|
4645 .components-accessible-toolbar .components-button svg, |
|
4646 .components-toolbar .components-button svg { |
|
4647 position: relative; |
|
4648 margin-right: auto; |
|
4649 margin-left: auto; |
|
4650 } |
|
4651 .components-accessible-toolbar .components-button.is-pressed, |
|
4652 .components-toolbar .components-button.is-pressed { |
|
4653 background: transparent; |
|
4654 } |
|
4655 .components-accessible-toolbar .components-button.is-pressed:hover, |
|
4656 .components-toolbar .components-button.is-pressed:hover { |
|
4657 background: transparent; |
|
4658 } |
|
4659 .components-accessible-toolbar .components-button.is-pressed::before, |
|
4660 .components-toolbar .components-button.is-pressed::before { |
|
4661 background: #1e1e1e; |
|
4662 } |
|
4663 .components-accessible-toolbar .components-button:focus::before, |
|
4664 .components-toolbar .components-button:focus::before { |
|
4665 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 4px #fff; |
|
4666 outline: 2px solid transparent; |
|
4667 } |
|
4668 .components-accessible-toolbar .components-button.has-icon.has-icon, |
|
4669 .components-toolbar .components-button.has-icon.has-icon { |
|
4670 padding-right: 12px; |
|
4671 padding-left: 12px; |
|
4672 min-width: 48px; |
|
4673 } |
|
4674 .components-accessible-toolbar .components-button.components-tab-button, |
|
4675 .components-toolbar .components-button.components-tab-button { |
|
4676 font-weight: 500; |
|
4677 } |
|
4678 .components-accessible-toolbar .components-button.components-tab-button span, |
|
4679 .components-toolbar .components-button.components-tab-button span { |
|
4680 display: inline-block; |
|
4681 padding-right: 0; |
|
4682 padding-left: 0; |
|
4683 position: relative; |
|
4684 } |
|
4685 |
|
4686 @keyframes components-button__appear-animation { |
|
4687 from { |
|
4688 transform: scaleY(0); |
|
4689 } |
|
4690 to { |
|
4691 transform: scaleY(1); |
|
4692 } |
|
4693 } |
|
4694 .components-toolbar__control.components-button { |
|
4695 position: relative; |
|
4696 } |
|
4697 .components-toolbar__control.components-button[data-subscript] svg { |
|
4698 padding: 5px 0 5px 10px; |
|
4699 } |
|
4700 .components-toolbar__control.components-button[data-subscript]::after { |
|
4701 content: attr(data-subscript); |
|
4702 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; |
|
4703 font-size: 13px; |
|
4704 font-weight: 600; |
|
4705 line-height: 12px; |
|
4706 position: absolute; |
|
4707 left: 8px; |
|
4708 bottom: 10px; |
|
4709 } |
|
4710 .components-toolbar__control.components-button:active::before { |
|
4711 display: none; |
|
4712 } |
|
4713 .components-toolbar__control.components-button:not(:disabled).is-pressed[data-subscript]::after { |
|
4714 color: #fff; |
|
4715 } |
|
4716 |
|
4717 .components-toolbar-group { |
|
4718 min-height: 48px; |
|
4719 border-left: 1px solid #1e1e1e; |
|
4720 background-color: #fff; |
|
4721 display: inline-flex; |
|
4722 flex-shrink: 0; |
|
4723 flex-wrap: wrap; |
|
4724 line-height: 0; |
|
4725 } |
|
4726 .components-toolbar-group .components-toolbar-group.components-toolbar-group { |
|
4727 border-width: 0; |
|
4728 margin: 0; |
|
4729 } |
|
4730 |
|
4731 .components-toolbar { |
|
4732 min-height: 48px; |
|
4733 margin: 0; |
|
4734 border: 1px solid #1e1e1e; |
|
4735 background-color: #fff; |
|
4736 display: inline-flex; |
|
4737 flex-shrink: 0; |
|
4738 flex-wrap: wrap; |
|
4739 } |
|
4740 .components-toolbar .components-toolbar.components-toolbar { |
|
4741 border-width: 0; |
|
4742 margin: 0; |
|
4743 } |
|
4744 |
|
4745 div.components-toolbar > div { |
|
4746 display: block; |
|
4747 margin: 0; |
|
4748 } |
|
4749 @supports (position: sticky) { |
|
4750 div.components-toolbar > div { |
|
4751 display: flex; |
|
4752 } |
|
4753 } |
|
4754 div.components-toolbar > div + div.has-left-divider { |
|
4755 margin-right: 6px; |
|
4756 position: relative; |
|
4757 overflow: visible; |
|
4758 } |
|
4759 div.components-toolbar > div + div.has-left-divider::before { |
|
4760 display: inline-block; |
|
4761 content: ""; |
|
4762 box-sizing: content-box; |
|
4763 background-color: #ddd; |
|
4764 position: absolute; |
|
4765 top: 8px; |
|
4766 right: -3px; |
|
4767 width: 1px; |
|
4768 height: 20px; |
|
4769 } |
|
4770 |
|
4771 .components-tooltip.components-popover { |
|
4772 z-index: 1000002; |
|
4773 } |
|
4774 .components-tooltip.components-popover .components-popover__content { |
|
4775 min-width: 0; |
|
4776 } |
|
4777 |
|
4778 .components-tooltip .components-popover__content { |
|
4779 background: #1e1e1e; |
|
4780 border-radius: 2px; |
|
4781 border-width: 0; |
|
4782 color: #fff; |
|
4783 white-space: nowrap; |
|
4784 text-align: center; |
|
4785 line-height: 1.4; |
|
4786 font-size: 12px; |
|
4787 box-shadow: none; |
|
4788 } |
|
4789 .components-tooltip .components-popover__content > div { |
|
4790 padding: 4px 8px; |
|
4791 } |
|
4792 |
|
4793 .components-tooltip__shortcut { |
|
4794 display: inline-block; |
|
4795 margin-right: 8px; |
|
4796 } |
|
4797 |
|
4798 .disabled-element-wrapper { |
|
4799 position: relative; |
|
4800 } |
|
4801 .disabled-element-wrapper .event-catcher { |
|
4802 z-index: 100002; |
|
4803 position: absolute; |
|
4804 width: 100%; |
|
4805 height: 100%; |
|
4806 top: 0; |
|
4807 right: 0; |
|
4808 bottom: 0; |
|
4809 left: 0; |
|
4810 } |
|