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