| [ Index ] |
PHP Cross Reference of WordPress Trunk (Updated Daily) |
[Summary view] [Print] [Text view]
1 /** 2 * Colors 3 */ 4 /** 5 * Breakpoints & Media Queries 6 */ 7 /** 8 * Often re-used variables 9 */ 10 /** 11 * Breakpoint mixins 12 */ 13 /** 14 * Long content fade mixin 15 * 16 * Creates a fading overlay to signify that the content is longer 17 * than the space allows. 18 */ 19 /** 20 * Button states and focus styles 21 */ 22 /** 23 * Applies editor left position to the selector passed as argument 24 */ 25 /** 26 * Applies editor right position to the selector passed as argument 27 */ 28 /** 29 * Styles that are reused verbatim in a few places 30 */ 31 /** 32 * Allows users to opt-out of animations via OS-level preferences. 33 */ 34 /** 35 * Reset default styles for JavaScript UI based pages. 36 * This is a WP-admin agnostic reset 37 */ 38 /** 39 * Reset the WP Admin page styles for Gutenberg-like pages. 40 */ 41 .components-animate__appear { 42 animation: components-animate__appear-animation 0.1s cubic-bezier(0, 0, 0.2, 1) 0s; 43 animation-fill-mode: forwards; } 44 @media (prefers-reduced-motion: reduce) { 45 .components-animate__appear { 46 animation-duration: 1ms; } } 47 .components-animate__appear.is-from-top, .components-animate__appear.is-from-top.is-from-left { 48 transform-origin: top left; } 49 .components-animate__appear.is-from-top.is-from-right { 50 transform-origin: top right; } 51 .components-animate__appear.is-from-bottom, .components-animate__appear.is-from-bottom.is-from-left { 52 transform-origin: bottom left; } 53 .components-animate__appear.is-from-bottom.is-from-right { 54 transform-origin: bottom right; } 55 56 @keyframes components-animate__appear-animation { 57 from { 58 transform: translateY(-2em) scaleY(0) scaleX(0); } 59 to { 60 transform: translateY(0%) scaleY(1) scaleX(1); } } 61 62 .components-animate__slide-in { 63 animation: components-animate__slide-in-animation 0.1s cubic-bezier(0, 0, 0.2, 1); 64 animation-fill-mode: forwards; } 65 @media (prefers-reduced-motion: reduce) { 66 .components-animate__slide-in { 67 animation-duration: 1ms; } } 68 .components-animate__slide-in.is-from-left { 69 transform: translateX(100%); } 70 71 @keyframes components-animate__slide-in-animation { 72 100% { 73 transform: translateX(0%); } } 74 75 .components-animate__loading { 76 animation: components-animate__loading 1.6s ease-in-out infinite; } 77 78 @keyframes components-animate__loading { 79 0% { 80 opacity: 0.5; } 81 50% { 82 opacity: 1; } 83 100% { 84 opacity: 0.5; } } 85 86 .components-autocomplete__popover .components-popover__content { 87 min-width: 200px; } 88 89 .components-autocomplete__popover .components-autocomplete__results { 90 padding: 3px; 91 display: flex; 92 flex-direction: column; 93 align-items: stretch; } 94 .components-autocomplete__popover .components-autocomplete__results:empty { 95 display: none; } 96 97 .components-autocomplete__result.components-button { 98 margin-bottom: 0; 99 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 100 font-size: 13px; 101 color: #555d66; 102 display: flex; 103 flex-direction: row; 104 flex-grow: 1; 105 flex-shrink: 0; 106 align-items: center; 107 padding: 6px 8px; 108 margin-left: -3px; 109 margin-right: -3px; 110 text-align: left; } 111 .components-autocomplete__result.components-button.is-selected { 112 color: #191e23; 113 border: none; 114 box-shadow: none; 115 outline-offset: -2px; 116 outline: 1px dotted #555d66; } 117 .components-autocomplete__result.components-button:hover { 118 color: #191e23; 119 border: none; 120 box-shadow: none; 121 background: #f3f4f5; } 122 123 .components-base-control { 124 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 125 font-size: 13px; } 126 .components-base-control .components-base-control__field { 127 margin-bottom: 8px; } 128 .components-panel__row .components-base-control .components-base-control__field { 129 margin-bottom: inherit; } 130 .components-base-control .components-base-control__label { 131 display: inline-block; 132 margin-bottom: 4px; } 133 .components-base-control .components-base-control__help { 134 margin-top: -8px; 135 font-style: italic; } 136 137 .components-base-control + .components-base-control { 138 margin-bottom: 16px; } 139 140 .components-button-group { 141 display: inline-block; } 142 .components-button-group .components-button.is-button { 143 border-radius: 0; 144 display: inline-flex; } 145 .components-button-group .components-button.is-button + .components-button.is-button { 146 margin-left: -1px; } 147 .components-button-group .components-button.is-button:first-child { 148 border-radius: 3px 0 0 3px; } 149 .components-button-group .components-button.is-button:last-child { 150 border-radius: 0 3px 3px 0; } 151 .components-button-group .components-button.is-button:focus, .components-button-group .components-button.is-button.is-primary { 152 position: relative; 153 z-index: 1; } 154 .components-button-group .components-button.is-button.is-primary { 155 box-shadow: none; } 156 157 .components-button { 158 display: inline-flex; 159 text-decoration: none; 160 font-size: 13px; 161 margin: 0; 162 border: 0; 163 cursor: pointer; 164 -webkit-appearance: none; 165 background: none; 166 transition: box-shadow 0.1s linear; 167 /* Buttons that look like links, for a cross of good semantics with the visual */ 168 /* Link buttons that are red to indicate destructive behavior. */ } 169 @media (prefers-reduced-motion: reduce) { 170 .components-button { 171 transition-duration: 0s; } } 172 .components-button.is-button { 173 padding: 0 10px; 174 line-height: 2; 175 height: 28px; 176 border-radius: 3px; 177 white-space: nowrap; 178 border-width: 1px; 179 border-style: solid; } 180 .components-button.is-default { 181 color: rgb(0, 117, 175); 182 border-color: rgb(0, 117, 175); 183 background: #f3f5f6; } 184 body.admin-color-sunrise .components-button.is-default { 185 color: rgb(196, 126, 70); 186 border-color: rgb(196, 126, 70); } 187 body.admin-color-ocean .components-button.is-default { 188 color: rgb(153, 174, 152); 189 border-color: rgb(153, 174, 152); } 190 body.admin-color-midnight .components-button.is-default { 191 color: rgb(212, 72, 63); 192 border-color: rgb(212, 72, 63); } 193 body.admin-color-ectoplasm .components-button.is-default { 194 color: rgb(157, 171, 81); 195 border-color: rgb(157, 171, 81); } 196 body.admin-color-coffee .components-button.is-default { 197 color: rgb(182, 156, 132); 198 border-color: rgb(182, 156, 132); } 199 body.admin-color-blue .components-button.is-default { 200 color: rgb(204, 161, 84); 201 border-color: rgb(204, 161, 84); } 202 body.admin-color-light .components-button.is-default { 203 color: rgb(0, 125, 175); 204 border-color: rgb(0, 125, 175); } 205 .components-button.is-default:hover { 206 background: #f1f1f1; 207 border-color: rgb(0, 93, 140); 208 color: rgb(0, 93, 140); 209 text-decoration: none; } 210 body.admin-color-sunrise .components-button.is-default:hover { 211 border-color: rgb(157, 101, 56); 212 color: rgb(157, 101, 56); } 213 body.admin-color-ocean .components-button.is-default:hover { 214 border-color: rgb(122, 139, 122); 215 color: rgb(122, 139, 122); } 216 body.admin-color-midnight .components-button.is-default:hover { 217 border-color: rgb(169, 58, 50); 218 color: rgb(169, 58, 50); } 219 body.admin-color-ectoplasm .components-button.is-default:hover { 220 border-color: rgb(125, 137, 65); 221 color: rgb(125, 137, 65); } 222 body.admin-color-coffee .components-button.is-default:hover { 223 border-color: rgb(146, 125, 105); 224 color: rgb(146, 125, 105); } 225 body.admin-color-blue .components-button.is-default:hover { 226 border-color: rgb(163, 128, 67); 227 color: rgb(163, 128, 67); } 228 body.admin-color-light .components-button.is-default:hover { 229 border-color: rgb(0, 100, 140); 230 color: rgb(0, 100, 140); } 231 .components-button.is-default:focus:enabled { 232 background: #f3f5f6; 233 color: rgb(0, 93, 140); 234 border-color: rgb(0, 118, 177); 235 box-shadow: 0 0 0 1px rgb(0, 118, 177); 236 text-decoration: none; } 237 body.admin-color-sunrise .components-button.is-default:focus:enabled { 238 color: rgb(157, 101, 56); 239 border-color: rgb(199, 127, 70); 240 box-shadow: 0 0 0 1px rgb(199, 127, 70); } 241 body.admin-color-ocean .components-button.is-default:focus:enabled { 242 color: rgb(122, 139, 122); 243 border-color: rgb(155, 176, 154); 244 box-shadow: 0 0 0 1px rgb(155, 176, 154); } 245 body.admin-color-midnight .components-button.is-default:focus:enabled { 246 color: rgb(169, 58, 50); 247 border-color: rgb(214, 73, 64); 248 box-shadow: 0 0 0 1px rgb(214, 73, 64); } 249 body.admin-color-ectoplasm .components-button.is-default:focus:enabled { 250 color: rgb(125, 137, 65); 251 border-color: rgb(159, 173, 82); 252 box-shadow: 0 0 0 1px rgb(159, 173, 82); } 253 body.admin-color-coffee .components-button.is-default:focus:enabled { 254 color: rgb(146, 125, 105); 255 border-color: rgb(184, 158, 133); 256 box-shadow: 0 0 0 1px rgb(184, 158, 133); } 257 body.admin-color-blue .components-button.is-default:focus:enabled { 258 color: rgb(163, 128, 67); 259 border-color: rgb(206, 162, 85); 260 box-shadow: 0 0 0 1px rgb(206, 162, 85); } 261 body.admin-color-light .components-button.is-default:focus:enabled { 262 color: rgb(0, 100, 140); 263 border-color: rgb(0, 126, 177); 264 box-shadow: 0 0 0 1px rgb(0, 126, 177); } 265 .components-button.is-default:active:enabled { 266 background: #f3f5f6; 267 color: rgb(0, 118, 177); 268 border-color: #7e8993; 269 box-shadow: none; } 270 body.admin-color-sunrise .components-button.is-default:active:enabled { 271 color: rgb(199, 127, 70); } 272 body.admin-color-ocean .components-button.is-default:active:enabled { 273 color: rgb(155, 176, 154); } 274 body.admin-color-midnight .components-button.is-default:active:enabled { 275 color: rgb(214, 73, 64); } 276 body.admin-color-ectoplasm .components-button.is-default:active:enabled { 277 color: rgb(159, 173, 82); } 278 body.admin-color-coffee .components-button.is-default:active:enabled { 279 color: rgb(184, 158, 133); } 280 body.admin-color-blue .components-button.is-default:active:enabled { 281 color: rgb(206, 162, 85); } 282 body.admin-color-light .components-button.is-default:active:enabled { 283 color: rgb(0, 126, 177); } 284 .components-button.is-default:disabled, .components-button.is-default[aria-disabled="true"] { 285 color: #a0a5aa; 286 border-color: #ddd; 287 background: #f7f7f7; 288 text-shadow: 0 1px 0 #fff; 289 transform: none; 290 opacity: 1; } 291 .components-button.is-primary { 292 background: rgb(0, 124, 186); 293 border-color: rgb(0, 124, 186); 294 color: #fff; 295 text-decoration: none; 296 text-shadow: none; } 297 body.admin-color-sunrise .components-button.is-primary { 298 background: rgb(209, 134, 74); 299 border-color: rgb(209, 134, 74); } 300 body.admin-color-ocean .components-button.is-primary { 301 background: rgb(163, 185, 162); 302 border-color: rgb(163, 185, 162); } 303 body.admin-color-midnight .components-button.is-primary { 304 background: rgb(225, 77, 67); 305 border-color: rgb(225, 77, 67); } 306 body.admin-color-ectoplasm .components-button.is-primary { 307 background: rgb(167, 182, 86); 308 border-color: rgb(167, 182, 86); } 309 body.admin-color-coffee .components-button.is-primary { 310 background: rgb(194, 166, 140); 311 border-color: rgb(194, 166, 140); } 312 body.admin-color-blue .components-button.is-primary { 313 background: rgb(217, 171, 89); 314 border-color: rgb(217, 171, 89); } 315 body.admin-color-light .components-button.is-primary { 316 background: rgb(0, 133, 186); 317 border-color: rgb(0, 133, 186); } 318 .components-button.is-primary:hover, .components-button.is-primary:focus:enabled { 319 background: rgb(0, 112, 167); 320 border-color: rgb(0, 112, 167); 321 color: #fff; } 322 body.admin-color-sunrise .components-button.is-primary:hover, body.admin-color-sunrise .components-button.is-primary:focus:enabled { 323 background: rgb(188, 121, 67); 324 border-color: rgb(188, 121, 67); } 325 body.admin-color-ocean .components-button.is-primary:hover, body.admin-color-ocean .components-button.is-primary:focus:enabled { 326 background: rgb(147, 167, 146); 327 border-color: rgb(147, 167, 146); } 328 body.admin-color-midnight .components-button.is-primary:hover, body.admin-color-midnight .components-button.is-primary:focus:enabled { 329 background: rgb(203, 69, 60); 330 border-color: rgb(203, 69, 60); } 331 body.admin-color-ectoplasm .components-button.is-primary:hover, body.admin-color-ectoplasm .components-button.is-primary:focus:enabled { 332 background: rgb(150, 164, 77); 333 border-color: rgb(150, 164, 77); } 334 body.admin-color-coffee .components-button.is-primary:hover, body.admin-color-coffee .components-button.is-primary:focus:enabled { 335 background: rgb(175, 149, 126); 336 border-color: rgb(175, 149, 126); } 337 body.admin-color-blue .components-button.is-primary:hover, body.admin-color-blue .components-button.is-primary:focus:enabled { 338 background: rgb(195, 154, 80); 339 border-color: rgb(195, 154, 80); } 340 body.admin-color-light .components-button.is-primary:hover, body.admin-color-light .components-button.is-primary:focus:enabled { 341 background: rgb(0, 120, 167); 342 border-color: rgb(0, 120, 167); } 343 .components-button.is-primary:focus:enabled { 344 box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgb(0, 124, 186); } 345 body.admin-color-sunrise .components-button.is-primary:focus:enabled { 346 box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgb(209, 134, 74); } 347 body.admin-color-ocean .components-button.is-primary:focus:enabled { 348 box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgb(163, 185, 162); } 349 body.admin-color-midnight .components-button.is-primary:focus:enabled { 350 box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgb(225, 77, 67); } 351 body.admin-color-ectoplasm .components-button.is-primary:focus:enabled { 352 box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgb(167, 182, 86); } 353 body.admin-color-coffee .components-button.is-primary:focus:enabled { 354 box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgb(194, 166, 140); } 355 body.admin-color-blue .components-button.is-primary:focus:enabled { 356 box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgb(217, 171, 89); } 357 body.admin-color-light .components-button.is-primary:focus:enabled { 358 box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgb(0, 133, 186); } 359 .components-button.is-primary:active:enabled { 360 background: rgb(0, 99, 149); 361 border-color: rgb(0, 99, 149); 362 color: #fff; } 363 body.admin-color-sunrise .components-button.is-primary:active:enabled { 364 background: rgb(167, 107, 59); 365 border-color: rgb(167, 107, 59); } 366 body.admin-color-ocean .components-button.is-primary:active:enabled { 367 background: rgb(130, 148, 130); 368 border-color: rgb(130, 148, 130); } 369 body.admin-color-midnight .components-button.is-primary:active:enabled { 370 background: rgb(180, 62, 54); 371 border-color: rgb(180, 62, 54); } 372 body.admin-color-ectoplasm .components-button.is-primary:active:enabled { 373 background: rgb(134, 146, 69); 374 border-color: rgb(134, 146, 69); } 375 body.admin-color-coffee .components-button.is-primary:active:enabled { 376 background: rgb(155, 133, 112); 377 border-color: rgb(155, 133, 112); } 378 body.admin-color-blue .components-button.is-primary:active:enabled { 379 background: rgb(174, 137, 71); 380 border-color: rgb(174, 137, 71); } 381 body.admin-color-light .components-button.is-primary:active:enabled { 382 background: rgb(0, 106, 149); 383 border-color: rgb(0, 106, 149); } 384 .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 { 385 color: rgb(102, 176, 214); 386 background: rgb(25, 137, 193); 387 border-color: rgb(25, 137, 193); 388 opacity: 1; } 389 body.admin-color-sunrise .components-button.is-primary:disabled, body.admin-color-sunrise .components-button.is-primary:disabled:active:enabled, body.admin-color-sunrise .components-button.is-primary[aria-disabled="true"], body.admin-color-sunrise .components-button.is-primary[aria-disabled="true"]:enabled, body.admin-color-sunrise .components-button.is-primary[aria-disabled="true"]:active:enabled { 390 color: rgb(227, 182, 146); 391 background: rgb(214, 146, 92); 392 border-color: rgb(214, 146, 92); } 393 body.admin-color-ocean .components-button.is-primary:disabled, body.admin-color-ocean .components-button.is-primary:disabled:active:enabled, body.admin-color-ocean .components-button.is-primary[aria-disabled="true"], body.admin-color-ocean .components-button.is-primary[aria-disabled="true"]:enabled, body.admin-color-ocean .components-button.is-primary[aria-disabled="true"]:active:enabled { 394 color: rgb(200, 213, 199); 395 background: rgb(172, 192, 171); 396 border-color: rgb(172, 192, 171); } 397 body.admin-color-midnight .components-button.is-primary:disabled, body.admin-color-midnight .components-button.is-primary:disabled:active:enabled, body.admin-color-midnight .components-button.is-primary[aria-disabled="true"], body.admin-color-midnight .components-button.is-primary[aria-disabled="true"]:enabled, body.admin-color-midnight .components-button.is-primary[aria-disabled="true"]:active:enabled { 398 color: rgb(237, 148, 142); 399 background: rgb(228, 95, 86); 400 border-color: rgb(228, 95, 86); } 401 body.admin-color-ectoplasm .components-button.is-primary:disabled, body.admin-color-ectoplasm .components-button.is-primary:disabled:active:enabled, body.admin-color-ectoplasm .components-button.is-primary[aria-disabled="true"], body.admin-color-ectoplasm .components-button.is-primary[aria-disabled="true"]:enabled, body.admin-color-ectoplasm .components-button.is-primary[aria-disabled="true"]:active:enabled { 402 color: rgb(202, 211, 154); 403 background: rgb(176, 189, 103); 404 border-color: rgb(176, 189, 103); } 405 body.admin-color-coffee .components-button.is-primary:disabled, body.admin-color-coffee .components-button.is-primary:disabled:active:enabled, body.admin-color-coffee .components-button.is-primary[aria-disabled="true"], body.admin-color-coffee .components-button.is-primary[aria-disabled="true"]:enabled, body.admin-color-coffee .components-button.is-primary[aria-disabled="true"]:active:enabled { 406 color: rgb(218, 202, 186); 407 background: rgb(200, 175, 152); 408 border-color: rgb(200, 175, 152); } 409 body.admin-color-blue .components-button.is-primary:disabled, body.admin-color-blue .components-button.is-primary:disabled:active:enabled, body.admin-color-blue .components-button.is-primary[aria-disabled="true"], body.admin-color-blue .components-button.is-primary[aria-disabled="true"]:enabled, body.admin-color-blue .components-button.is-primary[aria-disabled="true"]:active:enabled { 410 color: rgb(232, 205, 155); 411 background: rgb(221, 179, 106); 412 border-color: rgb(221, 179, 106); } 413 body.admin-color-light .components-button.is-primary:disabled, body.admin-color-light .components-button.is-primary:disabled:active:enabled, body.admin-color-light .components-button.is-primary[aria-disabled="true"], body.admin-color-light .components-button.is-primary[aria-disabled="true"]:enabled, body.admin-color-light .components-button.is-primary[aria-disabled="true"]:active:enabled { 414 color: rgb(102, 182, 214); 415 background: rgb(25, 145, 193); 416 border-color: rgb(25, 145, 193); } 417 .components-button.is-primary:disabled.is-button, .components-button.is-primary:disabled.is-button:hover, .components-button.is-primary:disabled:active:enabled, .components-button.is-primary:disabled:active:enabled.is-button, .components-button.is-primary:disabled:active:enabled.is-button:hover, .components-button.is-primary:disabled:active:enabled:active:enabled, .components-button.is-primary[aria-disabled="true"].is-button, .components-button.is-primary[aria-disabled="true"].is-button:hover, .components-button.is-primary[aria-disabled="true"]:active:enabled, .components-button.is-primary[aria-disabled="true"]:enabled.is-button, .components-button.is-primary[aria-disabled="true"]:enabled.is-button:hover, .components-button.is-primary[aria-disabled="true"]:enabled:active:enabled, .components-button.is-primary[aria-disabled="true"]:active:enabled.is-button, .components-button.is-primary[aria-disabled="true"]:active:enabled.is-button:hover, .components-button.is-primary[aria-disabled="true"]:active:enabled:active:enabled { 418 box-shadow: none; 419 text-shadow: none; } 420 .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 { 421 box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgb(0, 124, 186); } 422 body.admin-color-sunrise .components-button.is-primary:disabled:focus:enabled, body.admin-color-sunrise .components-button.is-primary:disabled:active:enabled:focus:enabled, body.admin-color-sunrise .components-button.is-primary[aria-disabled="true"]:focus:enabled, body.admin-color-sunrise .components-button.is-primary[aria-disabled="true"]:enabled:focus:enabled, body.admin-color-sunrise .components-button.is-primary[aria-disabled="true"]:active:enabled:focus:enabled { 423 box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgb(209, 134, 74); } 424 body.admin-color-ocean .components-button.is-primary:disabled:focus:enabled, body.admin-color-ocean .components-button.is-primary:disabled:active:enabled:focus:enabled, body.admin-color-ocean .components-button.is-primary[aria-disabled="true"]:focus:enabled, body.admin-color-ocean .components-button.is-primary[aria-disabled="true"]:enabled:focus:enabled, body.admin-color-ocean .components-button.is-primary[aria-disabled="true"]:active:enabled:focus:enabled { 425 box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgb(163, 185, 162); } 426 body.admin-color-midnight .components-button.is-primary:disabled:focus:enabled, body.admin-color-midnight .components-button.is-primary:disabled:active:enabled:focus:enabled, body.admin-color-midnight .components-button.is-primary[aria-disabled="true"]:focus:enabled, body.admin-color-midnight .components-button.is-primary[aria-disabled="true"]:enabled:focus:enabled, body.admin-color-midnight .components-button.is-primary[aria-disabled="true"]:active:enabled:focus:enabled { 427 box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgb(225, 77, 67); } 428 body.admin-color-ectoplasm .components-button.is-primary:disabled:focus:enabled, body.admin-color-ectoplasm .components-button.is-primary:disabled:active:enabled:focus:enabled, body.admin-color-ectoplasm .components-button.is-primary[aria-disabled="true"]:focus:enabled, body.admin-color-ectoplasm .components-button.is-primary[aria-disabled="true"]:enabled:focus:enabled, body.admin-color-ectoplasm .components-button.is-primary[aria-disabled="true"]:active:enabled:focus:enabled { 429 box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgb(167, 182, 86); } 430 body.admin-color-coffee .components-button.is-primary:disabled:focus:enabled, body.admin-color-coffee .components-button.is-primary:disabled:active:enabled:focus:enabled, body.admin-color-coffee .components-button.is-primary[aria-disabled="true"]:focus:enabled, body.admin-color-coffee .components-button.is-primary[aria-disabled="true"]:enabled:focus:enabled, body.admin-color-coffee .components-button.is-primary[aria-disabled="true"]:active:enabled:focus:enabled { 431 box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgb(194, 166, 140); } 432 body.admin-color-blue .components-button.is-primary:disabled:focus:enabled, body.admin-color-blue .components-button.is-primary:disabled:active:enabled:focus:enabled, body.admin-color-blue .components-button.is-primary[aria-disabled="true"]:focus:enabled, body.admin-color-blue .components-button.is-primary[aria-disabled="true"]:enabled:focus:enabled, body.admin-color-blue .components-button.is-primary[aria-disabled="true"]:active:enabled:focus:enabled { 433 box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgb(217, 171, 89); } 434 body.admin-color-light .components-button.is-primary:disabled:focus:enabled, body.admin-color-light .components-button.is-primary:disabled:active:enabled:focus:enabled, body.admin-color-light .components-button.is-primary[aria-disabled="true"]:focus:enabled, body.admin-color-light .components-button.is-primary[aria-disabled="true"]:enabled:focus:enabled, body.admin-color-light .components-button.is-primary[aria-disabled="true"]:active:enabled:focus:enabled { 435 box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgb(0, 133, 186); } 436 .components-button.is-primary.is-busy, .components-button.is-primary.is-busy:disabled, .components-button.is-primary.is-busy[aria-disabled="true"] { 437 color: #fff; 438 background-size: 100px 100%; 439 /* stylelint-disable */ 440 background-image: linear-gradient(-45deg, #007cba 28%, rgb(0, 99, 149) 28%, rgb(0, 99, 149) 72%, #007cba 72%); 441 /* stylelint-enable */ 442 border-color: rgb(0, 124, 186); } 443 body.admin-color-sunrise .components-button.is-primary.is-busy, body.admin-color-sunrise .components-button.is-primary.is-busy:disabled, body.admin-color-sunrise .components-button.is-primary.is-busy[aria-disabled="true"] { 444 background-image: linear-gradient(-45deg, #d1864a 28%, rgb(167, 107, 59) 28%, rgb(167, 107, 59) 72%, #d1864a 72%); 445 border-color: rgb(209, 134, 74); } 446 body.admin-color-ocean .components-button.is-primary.is-busy, body.admin-color-ocean .components-button.is-primary.is-busy:disabled, body.admin-color-ocean .components-button.is-primary.is-busy[aria-disabled="true"] { 447 background-image: linear-gradient(-45deg, #a3b9a2 28%, rgb(130, 148, 130) 28%, rgb(130, 148, 130) 72%, #a3b9a2 72%); 448 border-color: rgb(163, 185, 162); } 449 body.admin-color-midnight .components-button.is-primary.is-busy, body.admin-color-midnight .components-button.is-primary.is-busy:disabled, body.admin-color-midnight .components-button.is-primary.is-busy[aria-disabled="true"] { 450 background-image: linear-gradient(-45deg, #e14d43 28%, rgb(180, 62, 54) 28%, rgb(180, 62, 54) 72%, #e14d43 72%); 451 border-color: rgb(225, 77, 67); } 452 body.admin-color-ectoplasm .components-button.is-primary.is-busy, body.admin-color-ectoplasm .components-button.is-primary.is-busy:disabled, body.admin-color-ectoplasm .components-button.is-primary.is-busy[aria-disabled="true"] { 453 background-image: linear-gradient(-45deg, #a7b656 28%, rgb(134, 146, 69) 28%, rgb(134, 146, 69) 72%, #a7b656 72%); 454 border-color: rgb(167, 182, 86); } 455 body.admin-color-coffee .components-button.is-primary.is-busy, body.admin-color-coffee .components-button.is-primary.is-busy:disabled, body.admin-color-coffee .components-button.is-primary.is-busy[aria-disabled="true"] { 456 background-image: linear-gradient(-45deg, #c2a68c 28%, rgb(155, 133, 112) 28%, rgb(155, 133, 112) 72%, #c2a68c 72%); 457 border-color: rgb(194, 166, 140); } 458 body.admin-color-blue .components-button.is-primary.is-busy, body.admin-color-blue .components-button.is-primary.is-busy:disabled, body.admin-color-blue .components-button.is-primary.is-busy[aria-disabled="true"] { 459 background-image: linear-gradient(-45deg, #d9ab59 28%, rgb(174, 137, 71) 28%, rgb(174, 137, 71) 72%, #d9ab59 72%); 460 border-color: rgb(217, 171, 89); } 461 body.admin-color-light .components-button.is-primary.is-busy, body.admin-color-light .components-button.is-primary.is-busy:disabled, body.admin-color-light .components-button.is-primary.is-busy[aria-disabled="true"] { 462 background-image: linear-gradient(-45deg, #0085ba 28%, rgb(0, 106, 149) 28%, rgb(0, 106, 149) 72%, #0085ba 72%); 463 border-color: rgb(0, 133, 186); } 464 .components-button.is-link { 465 margin: 0; 466 padding: 0; 467 box-shadow: none; 468 border: 0; 469 border-radius: 0; 470 background: none; 471 outline: none; 472 text-align: left; 473 /* Mimics the default link style in common.css */ 474 color: #0073aa; 475 text-decoration: underline; 476 transition-property: border, background, color; 477 transition-duration: 0.05s; 478 transition-timing-function: ease-in-out; } 479 @media (prefers-reduced-motion: reduce) { 480 .components-button.is-link { 481 transition-duration: 0s; } } 482 .components-button.is-link:hover, .components-button.is-link:active { 483 color: #00a0d2; } 484 .components-button.is-link:focus { 485 color: #124964; 486 box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, 0.8); } 487 .components-button.is-link.is-destructive { 488 color: #d94f4f; } 489 .components-button:active { 490 color: inherit; } 491 .components-button:disabled, .components-button[aria-disabled="true"] { 492 cursor: default; 493 opacity: 0.3; } 494 .components-button:focus:not(:disabled) { 495 background-color: #fff; 496 color: #191e23; 497 box-shadow: inset 0 0 0 1px #6c7781, inset 0 0 0 2px #fff; 498 outline: 2px solid transparent; } 499 .components-button.is-busy, .components-button.is-default.is-busy, .components-button.is-default.is-busy:disabled, .components-button.is-default.is-busy[aria-disabled="true"] { 500 animation: components-button__busy-animation 2500ms infinite linear; 501 background-size: 100px 100%; 502 background-image: repeating-linear-gradient(-45deg, #e2e4e7, #fff 11px, #fff 10px, #e2e4e7 20px); 503 opacity: 1; } 504 .components-button.is-large { 505 height: 30px; 506 line-height: 28px; 507 padding: 0 12px 2px; } 508 .components-button.is-small { 509 height: 24px; 510 line-height: 22px; 511 padding: 0 8px 1px; 512 font-size: 11px; } 513 .components-button.is-tertiary { 514 color: #007cba; 515 padding: 0 10px; 516 line-height: 26px; 517 height: 28px; } 518 body.admin-color-sunrise .components-button.is-tertiary { 519 color: #837425; } 520 body.admin-color-ocean .components-button.is-tertiary { 521 color: #5e7d5e; } 522 body.admin-color-midnight .components-button.is-tertiary { 523 color: #497b8d; } 524 body.admin-color-ectoplasm .components-button.is-tertiary { 525 color: #523f6d; } 526 body.admin-color-coffee .components-button.is-tertiary { 527 color: #59524c; } 528 body.admin-color-blue .components-button.is-tertiary { 529 color: #417e9B; } 530 body.admin-color-light .components-button.is-tertiary { 531 color: #007cba; } 532 .components-button.is-tertiary .dashicon { 533 display: inline-block; 534 flex: 0 0 auto; } 535 .components-button.is-tertiary svg { 536 fill: currentColor; 537 outline: none; } 538 .components-button.is-tertiary:active:focus:enabled { 539 box-shadow: none; } 540 .components-button.is-tertiary:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover { 541 color: rgb(0, 93, 140); } 542 body.admin-color-sunrise .components-button.is-tertiary:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover { 543 color: rgb(98, 87, 28); } 544 body.admin-color-ocean .components-button.is-tertiary:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover { 545 color: rgb(71, 94, 71); } 546 body.admin-color-midnight .components-button.is-tertiary:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover { 547 color: rgb(55, 92, 106); } 548 body.admin-color-ectoplasm .components-button.is-tertiary:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover { 549 color: rgb(62, 47, 82); } 550 body.admin-color-coffee .components-button.is-tertiary:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover { 551 color: rgb(67, 62, 57); } 552 body.admin-color-blue .components-button.is-tertiary:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover { 553 color: rgb(49, 95, 116); } 554 body.admin-color-light .components-button.is-tertiary:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover { 555 color: rgb(0, 93, 140); } 556 .components-button .screen-reader-text { 557 height: auto; } 558 559 @keyframes components-button__busy-animation { 560 0% { 561 background-position: 200px 0; } } 562 563 .components-checkbox-control__input[type="checkbox"] { 564 border: 1px solid #b4b9be; 565 background: #fff; 566 color: #555; 567 clear: none; 568 cursor: pointer; 569 display: inline-block; 570 line-height: 0; 571 margin: 0 4px 0 0; 572 outline: 0; 573 padding: 0 !important; 574 text-align: center; 575 vertical-align: top; 576 width: 25px; 577 height: 25px; 578 -webkit-appearance: none; 579 box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); 580 transition: 0.05s border-color ease-in-out; } 581 @media (min-width: 600px) { 582 .components-checkbox-control__input[type="checkbox"] { 583 height: 16px; 584 width: 16px; } } 585 .components-checkbox-control__input[type="checkbox"]:focus { 586 border-color: #5b9dd9; 587 box-shadow: 0 0 2px rgba(30, 140, 190, 0.8); 588 outline: 2px solid transparent; } 589 .components-checkbox-control__input[type="checkbox"]:checked { 590 background: #11a0d2; 591 border-color: #11a0d2; } 592 .components-checkbox-control__input[type="checkbox"]:checked::-ms-check { 593 opacity: 0; } 594 .components-checkbox-control__input[type="checkbox"]:focus:checked { 595 border: none; } 596 .components-checkbox-control__input[type="checkbox"]:checked::before { 597 content: none; } 598 599 .components-checkbox-control__input-container { 600 position: relative; 601 display: inline-block; 602 margin-right: 12px; 603 vertical-align: middle; 604 width: 25px; 605 height: 25px; } 606 @media (min-width: 600px) { 607 .components-checkbox-control__input-container { 608 width: 16px; 609 height: 16px; } } 610 611 svg.dashicon.components-checkbox-control__checked { 612 fill: #fff; 613 cursor: pointer; 614 position: absolute; 615 left: -4px; 616 top: -2px; 617 width: 31px; 618 height: 31px; 619 -webkit-user-select: none; 620 -moz-user-select: none; 621 -ms-user-select: none; 622 user-select: none; 623 pointer-events: none; } 624 @media (min-width: 600px) { 625 svg.dashicon.components-checkbox-control__checked { 626 width: 21px; 627 height: 21px; 628 left: -3px; } } 629 630 .component-color-indicator { 631 width: 25px; 632 height: 16px; 633 margin-left: 0.8rem; 634 border: 1px solid #dadada; 635 display: inline-block; } 636 .component-color-indicator + .component-color-indicator { 637 margin-left: 0.5rem; } 638 639 .components-color-palette { 640 margin-right: -14px; 641 width: calc(100% + 14px); } 642 .components-color-palette .components-color-palette__custom-clear-wrapper { 643 width: calc(100% - 14px); 644 display: flex; 645 justify-content: flex-end; } 646 647 .components-color-palette__item-wrapper { 648 display: inline-block; 649 height: 28px; 650 width: 28px; 651 margin-right: 14px; 652 margin-bottom: 14px; 653 vertical-align: top; 654 transform: scale(1); 655 transition: 100ms transform ease; } 656 @media (prefers-reduced-motion: reduce) { 657 .components-color-palette__item-wrapper { 658 transition-duration: 0s; } } 659 .components-color-palette__item-wrapper:hover { 660 transform: scale(1.2); } 661 .components-color-palette__item-wrapper > div { 662 height: 100%; 663 width: 100%; } 664 665 .components-color-palette__item { 666 display: inline-block; 667 vertical-align: top; 668 height: 100%; 669 width: 100%; 670 border: none; 671 border-radius: 50%; 672 background: transparent; 673 box-shadow: inset 0 0 0 14px; 674 transition: 100ms box-shadow ease; 675 cursor: pointer; } 676 @media (prefers-reduced-motion: reduce) { 677 .components-color-palette__item { 678 transition-duration: 0s; } } 679 .components-color-palette__item.is-active { 680 box-shadow: inset 0 0 0 4px; 681 position: relative; 682 z-index: 1; } 683 .components-color-palette__item.is-active + .dashicons-saved { 684 position: absolute; 685 left: 4px; 686 top: 4px; } 687 .components-color-palette__item::after { 688 content: ""; 689 position: absolute; 690 top: -1px; 691 left: -1px; 692 bottom: -1px; 693 right: -1px; 694 border-radius: 50%; 695 box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); 696 border: 1px solid transparent; } 697 .components-color-palette__item:focus { 698 outline: none; } 699 .components-color-palette__item:focus::after { 700 content: ""; 701 border: 2px solid #606a73; 702 width: 32px; 703 height: 32px; 704 position: absolute; 705 top: -2px; 706 left: -2px; 707 border-radius: 50%; 708 box-shadow: inset 0 0 0 2px #fff; } 709 710 .components-color-palette__custom-color { 711 margin-right: 16px; } 712 .components-color-palette__custom-color .components-button { 713 line-height: 22px; } 714 715 /** 716 * Parts of this source were derived and modified from react-color, 717 * released under the MIT license. 718 * 719 * https://github.com/casesandberg/react-color/ 720 * 721 * Copyright (c) 2015 Case Sandberg 722 * 723 * Permission is hereby granted, free of charge, to any person obtaining a copy 724 * of this software and associated documentation files (the "Software"), to deal 725 * in the Software without restriction, including without limitation the rights 726 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 727 * copies of the Software, and to permit persons to whom the Software is 728 * furnished to do so, subject to the following conditions: 729 * 730 * The above copyright notice and this permission notice shall be included in 731 * all copies or substantial portions of the Software. 732 * 733 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 734 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 735 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 736 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 737 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 738 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 739 * THE SOFTWARE. 740 */ 741 .components-color-picker { 742 width: 100%; 743 overflow: hidden; } 744 745 .components-color-picker__saturation { 746 width: 100%; 747 padding-bottom: 55%; 748 position: relative; } 749 750 .components-color-picker__body { 751 padding: 16px 16px 12px; } 752 753 .components-color-picker__controls { 754 display: flex; } 755 756 .components-color-picker__saturation-pointer, 757 .components-color-picker__hue-pointer, 758 .components-color-picker__alpha-pointer { 759 padding: 0; 760 position: absolute; 761 cursor: pointer; 762 box-shadow: none; 763 border: none; } 764 765 /* CURRENT COLOR COMPONENT */ 766 .components-color-picker__swatch { 767 margin-right: 8px; 768 width: 32px; 769 height: 32px; 770 border-radius: 50%; 771 position: relative; 772 overflow: hidden; 773 background-image: linear-gradient(45deg, #ddd 25%, transparent 25%), linear-gradient(-45deg, #ddd 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ddd 75%), linear-gradient(-45deg, transparent 75%, #ddd 75%); 774 background-size: 10px 10px; 775 background-position: 0 0, 0 5px, 5px -5px, -5px 0; } 776 .is-alpha-disabled .components-color-picker__swatch { 777 width: 12px; 778 height: 12px; 779 margin-top: 0; } 780 781 .components-color-picker__active { 782 position: absolute; 783 top: 0; 784 left: 0; 785 right: 0; 786 bottom: 0; 787 border-radius: 50%; 788 box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); 789 z-index: 2; } 790 791 /* SATURATION COMPONENT */ 792 .components-color-picker__saturation-color, 793 .components-color-picker__saturation-white, 794 .components-color-picker__saturation-black { 795 position: absolute; 796 top: 0; 797 left: 0; 798 right: 0; 799 bottom: 0; } 800 801 .components-color-picker__saturation-color { 802 overflow: hidden; } 803 804 .components-color-picker__saturation-white { 805 /*rtl:ignore*/ 806 background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0)); } 807 808 .components-color-picker__saturation-black { 809 background: linear-gradient(to top, #000, rgba(0, 0, 0, 0)); } 810 811 .components-color-picker__saturation-pointer { 812 width: 8px; 813 height: 8px; 814 box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0, 0, 0, 0.3), 0 0 1px 2px rgba(0, 0, 0, 0.4); 815 border-radius: 50%; 816 background-color: transparent; 817 transform: translate(-4px, -4px); } 818 819 /* HUE & ALPHA BARS */ 820 .components-color-picker__toggles { 821 flex: 1; } 822 823 .components-color-picker__alpha { 824 background-image: linear-gradient(45deg, #ddd 25%, transparent 25%), linear-gradient(-45deg, #ddd 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ddd 75%), linear-gradient(-45deg, transparent 75%, #ddd 75%); 825 background-size: 10px 10px; 826 background-position: 0 0, 0 5px, 5px -5px, -5px 0; } 827 828 .components-color-picker__hue-gradient, 829 .components-color-picker__alpha-gradient { 830 position: absolute; 831 top: 0; 832 left: 0; 833 right: 0; 834 bottom: 0; } 835 836 .components-color-picker__hue, 837 .components-color-picker__alpha { 838 height: 12px; 839 position: relative; } 840 841 .is-alpha-enabled .components-color-picker__hue { 842 margin-bottom: 8px; } 843 844 .components-color-picker__hue-bar, 845 .components-color-picker__alpha-bar { 846 position: relative; 847 margin: 0 3px; 848 height: 100%; 849 padding: 0 2px; } 850 851 .components-color-picker__hue-gradient { 852 /*rtl:ignore*/ 853 background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%); } 854 855 .components-color-picker__hue-pointer, 856 .components-color-picker__alpha-pointer { 857 /*rtl:ignore*/ 858 left: 0; 859 width: 14px; 860 height: 14px; 861 border-radius: 50%; 862 box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37); 863 background: #fff; 864 transform: translate(-7px, -1px); } 865 866 .components-color-picker__hue-pointer, 867 .components-color-picker__saturation-pointer { 868 transition: box-shadow 0.1s linear; } 869 @media (prefers-reduced-motion: reduce) { 870 .components-color-picker__hue-pointer, 871 .components-color-picker__saturation-pointer { 872 transition-duration: 0s; } } 873 874 .components-color-picker__saturation-pointer:focus { 875 box-shadow: 0 0 0 2px #fff, 0 0 0 4px #00a0d2, 0 0 5px 0 #00a0d2, inset 0 0 1px 1px rgba(0, 0, 0, 0.3), 0 0 1px 2px rgba(0, 0, 0, 0.4); } 876 877 .components-color-picker__hue-pointer:focus, 878 .components-color-picker__alpha-pointer:focus { 879 border-color: #00a0d2; 880 box-shadow: 0 0 0 2px #00a0d2, 0 0 3px 0 #00a0d2; 881 outline: 2px solid transparent; 882 outline-offset: -2px; } 883 884 /* INPUTS COMPONENT */ 885 .components-color-picker__inputs-wrapper { 886 margin: 0 -4px; 887 padding-top: 16px; 888 display: flex; 889 align-items: flex-end; } 890 .components-color-picker__inputs-wrapper fieldset { 891 flex: 1; } 892 .components-color-picker__inputs-wrapper .components-color-picker__inputs-fields .components-text-control__input[type="number"] { 893 padding: 2px; } 894 895 .components-color-picker__inputs-fields { 896 display: flex; 897 /*rtl:ignore*/ 898 direction: ltr; } 899 .components-color-picker__inputs-fields .components-base-control__field { 900 margin: 0 4px; } 901 902 svg.dashicon { 903 fill: currentColor; 904 outline: none; } 905 906 /*rtl:begin:ignore*/ 907 .PresetDateRangePicker_panel { 908 padding: 0 22px 11px; } 909 910 .PresetDateRangePicker_button { 911 position: relative; 912 height: 100%; 913 text-align: center; 914 background: 0 0; 915 border: 2px solid #00a699; 916 color: #00a699; 917 padding: 4px 12px; 918 margin-right: 8px; 919 font: inherit; 920 font-weight: 700; 921 line-height: normal; 922 overflow: visible; 923 box-sizing: border-box; 924 cursor: pointer; } 925 926 .PresetDateRangePicker_button:active { 927 outline: 0; } 928 929 .PresetDateRangePicker_button__selected { 930 color: #fff; 931 background: #00a699; } 932 933 .SingleDatePickerInput { 934 display: inline-block; 935 background-color: #fff; } 936 937 .SingleDatePickerInput__withBorder { 938 border-radius: 2px; 939 border: 1px solid #dbdbdb; } 940 941 .SingleDatePickerInput__rtl { 942 direction: rtl; } 943 944 .SingleDatePickerInput__disabled { 945 background-color: #f2f2f2; } 946 947 .SingleDatePickerInput__block { 948 display: block; } 949 950 .SingleDatePickerInput__showClearDate { 951 padding-right: 30px; } 952 953 .SingleDatePickerInput_clearDate { 954 background: 0 0; 955 border: 0; 956 color: inherit; 957 font: inherit; 958 line-height: normal; 959 overflow: visible; 960 cursor: pointer; 961 padding: 10px; 962 margin: 0 10px 0 5px; 963 position: absolute; 964 right: 0; 965 top: 50%; 966 transform: translateY(-50%); } 967 968 .SingleDatePickerInput_clearDate__default:focus, 969 .SingleDatePickerInput_clearDate__default:hover { 970 background: #dbdbdb; 971 border-radius: 50%; } 972 973 .SingleDatePickerInput_clearDate__small { 974 padding: 6px; } 975 976 .SingleDatePickerInput_clearDate__hide { 977 visibility: hidden; } 978 979 .SingleDatePickerInput_clearDate_svg { 980 fill: #82888a; 981 height: 12px; 982 width: 15px; 983 vertical-align: middle; } 984 985 .SingleDatePickerInput_clearDate_svg__small { 986 height: 9px; } 987 988 .SingleDatePickerInput_calendarIcon { 989 background: 0 0; 990 border: 0; 991 color: inherit; 992 font: inherit; 993 line-height: normal; 994 overflow: visible; 995 cursor: pointer; 996 display: inline-block; 997 vertical-align: middle; 998 padding: 10px; 999 margin: 0 5px 0 10px; } 1000 1001 .SingleDatePickerInput_calendarIcon_svg { 1002 fill: #82888a; 1003 height: 15px; 1004 width: 14px; 1005 vertical-align: middle; } 1006 1007 .SingleDatePicker { 1008 position: relative; 1009 display: inline-block; } 1010 1011 .SingleDatePicker__block { 1012 display: block; } 1013 1014 .SingleDatePicker_picker { 1015 z-index: 1; 1016 background-color: #fff; 1017 position: absolute; } 1018 1019 .SingleDatePicker_picker__rtl { 1020 direction: rtl; } 1021 1022 .SingleDatePicker_picker__directionLeft { 1023 left: 0; } 1024 1025 .SingleDatePicker_picker__directionRight { 1026 right: 0; } 1027 1028 .SingleDatePicker_picker__portal { 1029 background-color: rgba(0, 0, 0, 0.3); 1030 position: fixed; 1031 top: 0; 1032 left: 0; 1033 height: 100%; 1034 width: 100%; } 1035 1036 .SingleDatePicker_picker__fullScreenPortal { 1037 background-color: #fff; } 1038 1039 .SingleDatePicker_closeButton { 1040 background: 0 0; 1041 border: 0; 1042 color: inherit; 1043 font: inherit; 1044 line-height: normal; 1045 overflow: visible; 1046 cursor: pointer; 1047 position: absolute; 1048 top: 0; 1049 right: 0; 1050 padding: 15px; 1051 z-index: 2; } 1052 1053 .SingleDatePicker_closeButton:focus, 1054 .SingleDatePicker_closeButton:hover { 1055 color: #b0b3b4; 1056 text-decoration: none; } 1057 1058 .SingleDatePicker_closeButton_svg { 1059 height: 15px; 1060 width: 15px; 1061 fill: #cacccd; } 1062 1063 .DayPickerKeyboardShortcuts_buttonReset { 1064 background: 0 0; 1065 border: 0; 1066 border-radius: 0; 1067 color: inherit; 1068 font: inherit; 1069 line-height: normal; 1070 overflow: visible; 1071 padding: 0; 1072 cursor: pointer; 1073 font-size: 14px; } 1074 1075 .DayPickerKeyboardShortcuts_buttonReset:active { 1076 outline: 0; } 1077 1078 .DayPickerKeyboardShortcuts_show { 1079 width: 22px; 1080 position: absolute; 1081 z-index: 2; } 1082 1083 .DayPickerKeyboardShortcuts_show__bottomRight { 1084 border-top: 26px solid transparent; 1085 border-right: 33px solid #00a699; 1086 bottom: 0; 1087 right: 0; } 1088 1089 .DayPickerKeyboardShortcuts_show__bottomRight:hover { 1090 border-right: 33px solid #008489; } 1091 1092 .DayPickerKeyboardShortcuts_show__topRight { 1093 border-bottom: 26px solid transparent; 1094 border-right: 33px solid #00a699; 1095 top: 0; 1096 right: 0; } 1097 1098 .DayPickerKeyboardShortcuts_show__topRight:hover { 1099 border-right: 33px solid #008489; } 1100 1101 .DayPickerKeyboardShortcuts_show__topLeft { 1102 border-bottom: 26px solid transparent; 1103 border-left: 33px solid #00a699; 1104 top: 0; 1105 left: 0; } 1106 1107 .DayPickerKeyboardShortcuts_show__topLeft:hover { 1108 border-left: 33px solid #008489; } 1109 1110 .DayPickerKeyboardShortcuts_showSpan { 1111 color: #fff; 1112 position: absolute; } 1113 1114 .DayPickerKeyboardShortcuts_showSpan__bottomRight { 1115 bottom: 0; 1116 right: -28px; } 1117 1118 .DayPickerKeyboardShortcuts_showSpan__topRight { 1119 top: 1px; 1120 right: -28px; } 1121 1122 .DayPickerKeyboardShortcuts_showSpan__topLeft { 1123 top: 1px; 1124 left: -28px; } 1125 1126 .DayPickerKeyboardShortcuts_panel { 1127 overflow: auto; 1128 background: #fff; 1129 border: 1px solid #dbdbdb; 1130 border-radius: 2px; 1131 position: absolute; 1132 top: 0; 1133 bottom: 0; 1134 right: 0; 1135 left: 0; 1136 z-index: 2; 1137 padding: 22px; 1138 margin: 33px; } 1139 1140 .DayPickerKeyboardShortcuts_title { 1141 font-size: 16px; 1142 font-weight: 700; 1143 margin: 0; } 1144 1145 .DayPickerKeyboardShortcuts_list { 1146 list-style: none; 1147 padding: 0; 1148 font-size: 14px; } 1149 1150 .DayPickerKeyboardShortcuts_close { 1151 position: absolute; 1152 right: 22px; 1153 top: 22px; 1154 z-index: 2; } 1155 1156 .DayPickerKeyboardShortcuts_close:active { 1157 outline: 0; } 1158 1159 .DayPickerKeyboardShortcuts_closeSvg { 1160 height: 15px; 1161 width: 15px; 1162 fill: #cacccd; } 1163 1164 .DayPickerKeyboardShortcuts_closeSvg:focus, 1165 .DayPickerKeyboardShortcuts_closeSvg:hover { 1166 fill: #82888a; } 1167 1168 .CalendarDay { 1169 box-sizing: border-box; 1170 cursor: pointer; 1171 font-size: 14px; 1172 text-align: center; } 1173 1174 .CalendarDay:active { 1175 outline: 0; } 1176 1177 .CalendarDay__defaultCursor { 1178 cursor: default; } 1179 1180 .CalendarDay__default { 1181 border: 1px solid #e4e7e7; 1182 color: #484848; 1183 background: #fff; } 1184 1185 .CalendarDay__default:hover { 1186 background: #e4e7e7; 1187 border: 1px double #e4e7e7; 1188 color: inherit; } 1189 1190 .CalendarDay__hovered_offset { 1191 background: #f4f5f5; 1192 border: 1px double #e4e7e7; 1193 color: inherit; } 1194 1195 .CalendarDay__outside { 1196 border: 0; 1197 background: #fff; 1198 color: #484848; } 1199 1200 .CalendarDay__outside:hover { 1201 border: 0; } 1202 1203 .CalendarDay__blocked_minimum_nights { 1204 background: #fff; 1205 border: 1px solid #eceeee; 1206 color: #cacccd; } 1207 1208 .CalendarDay__blocked_minimum_nights:active, 1209 .CalendarDay__blocked_minimum_nights:hover { 1210 background: #fff; 1211 color: #cacccd; } 1212 1213 .CalendarDay__highlighted_calendar { 1214 background: #ffe8bc; 1215 color: #484848; } 1216 1217 .CalendarDay__highlighted_calendar:active, 1218 .CalendarDay__highlighted_calendar:hover { 1219 background: #ffce71; 1220 color: #484848; } 1221 1222 .CalendarDay__selected_span { 1223 background: #66e2da; 1224 border: 1px solid #33dacd; 1225 color: #fff; } 1226 1227 .CalendarDay__selected_span:active, 1228 .CalendarDay__selected_span:hover { 1229 background: #33dacd; 1230 border: 1px solid #33dacd; 1231 color: #fff; } 1232 1233 .CalendarDay__last_in_range { 1234 border-right: #00a699; } 1235 1236 .CalendarDay__selected, 1237 .CalendarDay__selected:active, 1238 .CalendarDay__selected:hover { 1239 background: #00a699; 1240 border: 1px solid #00a699; 1241 color: #fff; } 1242 1243 .CalendarDay__hovered_span, 1244 .CalendarDay__hovered_span:hover { 1245 background: #b2f1ec; 1246 border: 1px solid #80e8e0; 1247 color: #007a87; } 1248 1249 .CalendarDay__hovered_span:active { 1250 background: #80e8e0; 1251 border: 1px solid #80e8e0; 1252 color: #007a87; } 1253 1254 .CalendarDay__blocked_calendar, 1255 .CalendarDay__blocked_calendar:active, 1256 .CalendarDay__blocked_calendar:hover { 1257 background: #cacccd; 1258 border: 1px solid #cacccd; 1259 color: #82888a; } 1260 1261 .CalendarDay__blocked_out_of_range, 1262 .CalendarDay__blocked_out_of_range:active, 1263 .CalendarDay__blocked_out_of_range:hover { 1264 background: #fff; 1265 border: 1px solid #e4e7e7; 1266 color: #cacccd; } 1267 1268 .CalendarMonth { 1269 background: #fff; 1270 text-align: center; 1271 vertical-align: top; 1272 -webkit-user-select: none; 1273 -moz-user-select: none; 1274 -ms-user-select: none; 1275 user-select: none; } 1276 1277 .CalendarMonth_table { 1278 border-collapse: collapse; 1279 border-spacing: 0; } 1280 1281 .CalendarMonth_verticalSpacing { 1282 border-collapse: separate; } 1283 1284 .CalendarMonth_caption { 1285 color: #484848; 1286 font-size: 18px; 1287 text-align: center; 1288 padding-top: 22px; 1289 padding-bottom: 37px; 1290 caption-side: initial; } 1291 1292 .CalendarMonth_caption__verticalScrollable { 1293 padding-top: 12px; 1294 padding-bottom: 7px; } 1295 1296 .CalendarMonthGrid { 1297 background: #fff; 1298 text-align: left; 1299 z-index: 0; } 1300 1301 .CalendarMonthGrid__animating { 1302 z-index: 1; } 1303 1304 .CalendarMonthGrid__horizontal { 1305 position: absolute; 1306 left: 9px; } 1307 1308 .CalendarMonthGrid__vertical { 1309 margin: 0 auto; } 1310 1311 .CalendarMonthGrid__vertical_scrollable { 1312 margin: 0 auto; 1313 overflow-y: scroll; } 1314 1315 .CalendarMonthGrid_month__horizontal { 1316 display: inline-block; 1317 vertical-align: top; 1318 min-height: 100%; } 1319 1320 .CalendarMonthGrid_month__hideForAnimation { 1321 position: absolute; 1322 z-index: -1; 1323 opacity: 0; 1324 pointer-events: none; } 1325 1326 .CalendarMonthGrid_month__hidden { 1327 visibility: hidden; } 1328 1329 .DayPickerNavigation { 1330 position: relative; 1331 z-index: 2; } 1332 1333 .DayPickerNavigation__horizontal { 1334 height: 0; } 1335 1336 .DayPickerNavigation__verticalDefault { 1337 position: absolute; 1338 width: 100%; 1339 height: 52px; 1340 bottom: 0; 1341 left: 0; } 1342 1343 .DayPickerNavigation__verticalScrollableDefault { 1344 position: relative; } 1345 1346 .DayPickerNavigation_button { 1347 cursor: pointer; 1348 -webkit-user-select: none; 1349 -moz-user-select: none; 1350 -ms-user-select: none; 1351 user-select: none; 1352 border: 0; 1353 padding: 0; 1354 margin: 0; } 1355 1356 .DayPickerNavigation_button__default { 1357 border: 1px solid #e4e7e7; 1358 background-color: #fff; 1359 color: #757575; } 1360 1361 .DayPickerNavigation_button__default:focus, 1362 .DayPickerNavigation_button__default:hover { 1363 border: 1px solid #c4c4c4; } 1364 1365 .DayPickerNavigation_button__default:active { 1366 background: #f2f2f2; } 1367 1368 .DayPickerNavigation_button__horizontalDefault { 1369 position: absolute; 1370 top: 18px; 1371 line-height: .78; 1372 border-radius: 3px; 1373 padding: 6px 9px; } 1374 1375 .DayPickerNavigation_leftButton__horizontalDefault { 1376 left: 22px; } 1377 1378 .DayPickerNavigation_rightButton__horizontalDefault { 1379 right: 22px; } 1380 1381 .DayPickerNavigation_button__verticalDefault { 1382 padding: 5px; 1383 background: #fff; 1384 box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1); 1385 position: relative; 1386 display: inline-block; 1387 height: 100%; 1388 width: 50%; } 1389 1390 .DayPickerNavigation_nextButton__verticalDefault { 1391 border-left: 0; } 1392 1393 .DayPickerNavigation_nextButton__verticalScrollableDefault { 1394 width: 100%; } 1395 1396 .DayPickerNavigation_svg__horizontal { 1397 height: 19px; 1398 width: 19px; 1399 fill: #82888a; 1400 display: block; } 1401 1402 .DayPickerNavigation_svg__vertical { 1403 height: 42px; 1404 width: 42px; 1405 fill: #484848; 1406 display: block; } 1407 1408 .DayPicker { 1409 background: #fff; 1410 position: relative; 1411 text-align: left; } 1412 1413 .DayPicker__horizontal { 1414 background: #fff; } 1415 1416 .DayPicker__verticalScrollable { 1417 height: 100%; } 1418 1419 .DayPicker__hidden { 1420 visibility: hidden; } 1421 1422 .DayPicker__withBorder { 1423 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.07); 1424 border-radius: 3px; } 1425 1426 .DayPicker_portal__horizontal { 1427 box-shadow: none; 1428 position: absolute; 1429 left: 50%; 1430 top: 50%; } 1431 1432 .DayPicker_portal__vertical { 1433 position: initial; } 1434 1435 .DayPicker_focusRegion { 1436 outline: 0; } 1437 1438 .DayPicker_calendarInfo__horizontal, 1439 .DayPicker_wrapper__horizontal { 1440 display: inline-block; 1441 vertical-align: top; } 1442 1443 .DayPicker_weekHeaders { 1444 position: relative; } 1445 1446 .DayPicker_weekHeaders__horizontal { 1447 margin-left: 9px; } 1448 1449 .DayPicker_weekHeader { 1450 color: #757575; 1451 position: absolute; 1452 top: 62px; 1453 z-index: 2; 1454 text-align: left; } 1455 1456 .DayPicker_weekHeader__vertical { 1457 left: 50%; } 1458 1459 .DayPicker_weekHeader__verticalScrollable { 1460 top: 0; 1461 display: table-row; 1462 border-bottom: 1px solid #dbdbdb; 1463 background: #fff; 1464 margin-left: 0; 1465 left: 0; 1466 width: 100%; 1467 text-align: center; } 1468 1469 .DayPicker_weekHeader_ul { 1470 list-style: none; 1471 margin: 1px 0; 1472 padding-left: 0; 1473 padding-right: 0; 1474 font-size: 14px; } 1475 1476 .DayPicker_weekHeader_li { 1477 display: inline-block; 1478 text-align: center; } 1479 1480 .DayPicker_transitionContainer { 1481 position: relative; 1482 overflow: hidden; 1483 border-radius: 3px; } 1484 1485 .DayPicker_transitionContainer__horizontal { 1486 transition: height .2s ease-in-out; } 1487 1488 .DayPicker_transitionContainer__vertical { 1489 width: 100%; } 1490 1491 .DayPicker_transitionContainer__verticalScrollable { 1492 padding-top: 20px; 1493 height: 100%; 1494 position: absolute; 1495 top: 0; 1496 bottom: 0; 1497 right: 0; 1498 left: 0; 1499 overflow-y: scroll; } 1500 1501 .DateInput { 1502 margin: 0; 1503 padding: 0; 1504 background: #fff; 1505 position: relative; 1506 display: inline-block; 1507 width: 130px; 1508 vertical-align: middle; } 1509 1510 .DateInput__small { 1511 width: 97px; } 1512 1513 .DateInput__block { 1514 width: 100%; } 1515 1516 .DateInput__disabled { 1517 background: #f2f2f2; 1518 color: #dbdbdb; } 1519 1520 .DateInput_input { 1521 font-weight: 200; 1522 font-size: 19px; 1523 line-height: 24px; 1524 color: #484848; 1525 background-color: #fff; 1526 width: 100%; 1527 padding: 11px 11px 9px; 1528 border: 0; 1529 border-top: 0; 1530 border-right: 0; 1531 border-bottom: 2px solid transparent; 1532 border-left: 0; 1533 border-radius: 0; } 1534 1535 .DateInput_input__small { 1536 font-size: 15px; 1537 line-height: 18px; 1538 letter-spacing: .2px; 1539 padding: 7px 7px 5px; } 1540 1541 .DateInput_input__regular { 1542 font-weight: auto; } 1543 1544 .DateInput_input__readOnly { 1545 -webkit-user-select: none; 1546 -moz-user-select: none; 1547 -ms-user-select: none; 1548 user-select: none; } 1549 1550 .DateInput_input__focused { 1551 outline: 0; 1552 background: #fff; 1553 border: 0; 1554 border-top: 0; 1555 border-right: 0; 1556 border-bottom: 2px solid #008489; 1557 border-left: 0; } 1558 1559 .DateInput_input__disabled { 1560 background: #f2f2f2; 1561 font-style: italic; } 1562 1563 .DateInput_screenReaderMessage { 1564 border: 0; 1565 clip: rect(0, 0, 0, 0); 1566 height: 1px; 1567 margin: -1px; 1568 overflow: hidden; 1569 padding: 0; 1570 position: absolute; 1571 width: 1px; } 1572 1573 .DateInput_fang { 1574 position: absolute; 1575 width: 20px; 1576 height: 10px; 1577 left: 22px; 1578 z-index: 2; } 1579 1580 .DateInput_fangShape { 1581 fill: #fff; } 1582 1583 .DateInput_fangStroke { 1584 stroke: #dbdbdb; 1585 fill: transparent; } 1586 1587 .DateRangePickerInput { 1588 background-color: #fff; 1589 display: inline-block; } 1590 1591 .DateRangePickerInput__disabled { 1592 background: #f2f2f2; } 1593 1594 .DateRangePickerInput__withBorder { 1595 border-radius: 2px; 1596 border: 1px solid #dbdbdb; } 1597 1598 .DateRangePickerInput__rtl { 1599 direction: rtl; } 1600 1601 .DateRangePickerInput__block { 1602 display: block; } 1603 1604 .DateRangePickerInput__showClearDates { 1605 padding-right: 30px; } 1606 1607 .DateRangePickerInput_arrow { 1608 display: inline-block; 1609 vertical-align: middle; 1610 color: #484848; } 1611 1612 .DateRangePickerInput_arrow_svg { 1613 vertical-align: middle; 1614 fill: #484848; 1615 height: 24px; 1616 width: 24px; } 1617 1618 .DateRangePickerInput_clearDates { 1619 background: 0 0; 1620 border: 0; 1621 color: inherit; 1622 font: inherit; 1623 line-height: normal; 1624 overflow: visible; 1625 cursor: pointer; 1626 padding: 10px; 1627 margin: 0 10px 0 5px; 1628 position: absolute; 1629 right: 0; 1630 top: 50%; 1631 transform: translateY(-50%); } 1632 1633 .DateRangePickerInput_clearDates__small { 1634 padding: 6px; } 1635 1636 .DateRangePickerInput_clearDates_default:focus, 1637 .DateRangePickerInput_clearDates_default:hover { 1638 background: #dbdbdb; 1639 border-radius: 50%; } 1640 1641 .DateRangePickerInput_clearDates__hide { 1642 visibility: hidden; } 1643 1644 .DateRangePickerInput_clearDates_svg { 1645 fill: #82888a; 1646 height: 12px; 1647 width: 15px; 1648 vertical-align: middle; } 1649 1650 .DateRangePickerInput_clearDates_svg__small { 1651 height: 9px; } 1652 1653 .DateRangePickerInput_calendarIcon { 1654 background: 0 0; 1655 border: 0; 1656 color: inherit; 1657 font: inherit; 1658 line-height: normal; 1659 overflow: visible; 1660 cursor: pointer; 1661 display: inline-block; 1662 vertical-align: middle; 1663 padding: 10px; 1664 margin: 0 5px 0 10px; } 1665 1666 .DateRangePickerInput_calendarIcon_svg { 1667 fill: #82888a; 1668 height: 15px; 1669 width: 14px; 1670 vertical-align: middle; } 1671 1672 .DateRangePicker { 1673 position: relative; 1674 display: inline-block; } 1675 1676 .DateRangePicker__block { 1677 display: block; } 1678 1679 .DateRangePicker_picker { 1680 z-index: 1; 1681 background-color: #fff; 1682 position: absolute; } 1683 1684 .DateRangePicker_picker__rtl { 1685 direction: rtl; } 1686 1687 .DateRangePicker_picker__directionLeft { 1688 left: 0; } 1689 1690 .DateRangePicker_picker__directionRight { 1691 right: 0; } 1692 1693 .DateRangePicker_picker__portal { 1694 background-color: rgba(0, 0, 0, 0.3); 1695 position: fixed; 1696 top: 0; 1697 left: 0; 1698 height: 100%; 1699 width: 100%; } 1700 1701 .DateRangePicker_picker__fullScreenPortal { 1702 background-color: #fff; } 1703 1704 .DateRangePicker_closeButton { 1705 background: 0 0; 1706 border: 0; 1707 color: inherit; 1708 font: inherit; 1709 line-height: normal; 1710 overflow: visible; 1711 cursor: pointer; 1712 position: absolute; 1713 top: 0; 1714 right: 0; 1715 padding: 15px; 1716 z-index: 2; } 1717 1718 .DateRangePicker_closeButton:focus, 1719 .DateRangePicker_closeButton:hover { 1720 color: #b0b3b4; 1721 text-decoration: none; } 1722 1723 .DateRangePicker_closeButton_svg { 1724 height: 15px; 1725 width: 15px; 1726 fill: #cacccd; } 1727 1728 /*rtl:end:ignore*/ 1729 .components-datetime .components-datetime__calendar-help { 1730 padding: 8px; } 1731 .components-datetime .components-datetime__calendar-help h4 { 1732 margin: 0; } 1733 1734 .components-datetime .components-datetime__date-help-button { 1735 display: block; 1736 margin-left: auto; 1737 margin-right: 8px; 1738 margin-top: 0.5em; } 1739 1740 .components-datetime fieldset { 1741 border: 0; 1742 padding: 0; 1743 margin: 0; } 1744 1745 .components-datetime select, 1746 .components-datetime input { 1747 box-sizing: border-box; 1748 height: 28px; 1749 vertical-align: middle; 1750 padding: 0; 1751 box-shadow: 0 0 0 transparent; 1752 transition: box-shadow 0.1s linear; 1753 border-radius: 4px; 1754 border: 1px solid #7e8993; } 1755 @media (prefers-reduced-motion: reduce) { 1756 .components-datetime select, 1757 .components-datetime input { 1758 transition-duration: 0s; } } 1759 1760 .components-datetime__date { 1761 min-height: 236px; 1762 border-top: 1px solid #e2e4e7; 1763 margin-left: -8px; 1764 margin-right: -8px; } 1765 .components-datetime__date .CalendarMonth_caption { 1766 font-size: 13px; } 1767 .components-datetime__date .CalendarDay { 1768 font-size: 13px; 1769 border: 1px solid transparent; 1770 border-radius: 50%; 1771 text-align: center; } 1772 .components-datetime__date .CalendarDay__selected { 1773 background: #0085ba; } 1774 body.admin-color-sunrise .components-datetime__date .CalendarDay__selected { 1775 background: #d1864a; } 1776 body.admin-color-ocean .components-datetime__date .CalendarDay__selected { 1777 background: #a3b9a2; } 1778 body.admin-color-midnight .components-datetime__date .CalendarDay__selected { 1779 background: #e14d43; } 1780 body.admin-color-ectoplasm .components-datetime__date .CalendarDay__selected { 1781 background: #a7b656; } 1782 body.admin-color-coffee .components-datetime__date .CalendarDay__selected { 1783 background: #c2a68c; } 1784 body.admin-color-blue .components-datetime__date .CalendarDay__selected { 1785 background: #82b4cb; } 1786 body.admin-color-light .components-datetime__date .CalendarDay__selected { 1787 background: #0085ba; } 1788 .components-datetime__date .CalendarDay__selected:hover { 1789 background: rgb(0, 113, 158); } 1790 body.admin-color-sunrise .components-datetime__date .CalendarDay__selected:hover { 1791 background: rgb(178, 114, 63); } 1792 body.admin-color-ocean .components-datetime__date .CalendarDay__selected:hover { 1793 background: rgb(139, 157, 138); } 1794 body.admin-color-midnight .components-datetime__date .CalendarDay__selected:hover { 1795 background: rgb(191, 65, 57); } 1796 body.admin-color-ectoplasm .components-datetime__date .CalendarDay__selected:hover { 1797 background: rgb(142, 155, 73); } 1798 body.admin-color-coffee .components-datetime__date .CalendarDay__selected:hover { 1799 background: rgb(165, 141, 119); } 1800 body.admin-color-blue .components-datetime__date .CalendarDay__selected:hover { 1801 background: rgb(111, 153, 173); } 1802 body.admin-color-light .components-datetime__date .CalendarDay__selected:hover { 1803 background: rgb(0, 113, 158); } 1804 .components-datetime__date .DayPickerNavigation_button__horizontalDefault { 1805 padding: 2px 8px; 1806 top: 20px; } 1807 .components-datetime__date .DayPickerNavigation_button__horizontalDefault:focus { 1808 color: #191e23; 1809 border-color: #007cba; 1810 box-shadow: 0 0 0 1px #007cba; 1811 outline: 2px solid transparent; } 1812 .components-datetime__date .DayPicker_weekHeader { 1813 top: 50px; } 1814 .components-datetime__date.is-description-visible .DayPicker, 1815 .components-datetime__date.is-description-visible .components-datetime__date-help-button { 1816 visibility: hidden; } 1817 1818 .components-datetime__time { 1819 margin-bottom: 1em; } 1820 .components-datetime__time fieldset { 1821 margin-top: 0.5em; 1822 position: relative; } 1823 .components-datetime__time .components-datetime__time-field-am-pm fieldset { 1824 margin-top: 0; } 1825 .components-datetime__time .components-datetime__time-wrapper { 1826 display: flex; } 1827 .components-datetime__time .components-datetime__time-wrapper .components-datetime__time-separator { 1828 display: inline-block; 1829 padding: 0 3px 0 0; 1830 color: #555d66; } 1831 .components-datetime__time .components-datetime__time-wrapper .components-datetime__time-am-button { 1832 margin-left: 8px; 1833 margin-right: -1px; 1834 border-radius: 3px 0 0 3px; } 1835 .components-datetime__time .components-datetime__time-wrapper .components-datetime__time-pm-button { 1836 margin-left: -1px; 1837 border-radius: 0 3px 3px 0; } 1838 .components-datetime__time .components-datetime__time-wrapper .components-datetime__time-am-button:focus, 1839 .components-datetime__time .components-datetime__time-wrapper .components-datetime__time-pm-button:focus { 1840 position: relative; 1841 z-index: 1; } 1842 .components-datetime__time .components-datetime__time-wrapper .components-datetime__time-am-button.is-toggled, 1843 .components-datetime__time .components-datetime__time-wrapper .components-datetime__time-pm-button.is-toggled { 1844 background: #edeff0; 1845 border-color: #8f98a1; 1846 box-shadow: inset 0 2px 5px -3px #555d66; } 1847 .components-datetime__time .components-datetime__time-wrapper .components-datetime__time-am-button.is-toggled:focus, 1848 .components-datetime__time .components-datetime__time-wrapper .components-datetime__time-pm-button.is-toggled:focus { 1849 box-shadow: inset 0 2px 5px -3px #555d66, 0 0 0 1px #fff, 0 0 0 3px #007cba; } 1850 .components-datetime__time .components-datetime__time-wrapper .components-datetime__time-field-time { 1851 /*rtl:ignore*/ 1852 direction: ltr; } 1853 .components-datetime__time .components-datetime__time-wrapper .components-datetime__time-field.am-pm button { 1854 font-size: 11px; 1855 font-weight: 600; } 1856 .components-datetime__time .components-datetime__time-wrapper .components-datetime__time-field select { 1857 margin-right: 4px; } 1858 .components-datetime__time .components-datetime__time-wrapper .components-datetime__time-field select:focus { 1859 position: relative; 1860 z-index: 1; } 1861 .components-datetime__time .components-datetime__time-wrapper .components-datetime__time-field input[type="number"] { 1862 padding: 2px; 1863 margin-right: 4px; 1864 text-align: center; 1865 -moz-appearance: textfield; } 1866 .components-datetime__time .components-datetime__time-wrapper .components-datetime__time-field input[type="number"]:focus { 1867 position: relative; 1868 z-index: 1; } 1869 .components-datetime__time .components-datetime__time-wrapper .components-datetime__time-field input[type="number"]::-webkit-inner-spin-button { 1870 -webkit-appearance: none; 1871 margin: 0; } 1872 .components-datetime__time.is-12-hour .components-datetime__time-field-day input { 1873 margin: 0 -4px 0 0 !important; 1874 border-radius: 4px 0 0 4px !important; } 1875 .components-datetime__time.is-12-hour .components-datetime__time-field-year input { 1876 border-radius: 0 4px 4px 0 !important; } 1877 1878 .components-datetime__time-legend { 1879 font-weight: 600; 1880 margin-top: 0.5em; } 1881 .components-datetime__time-legend.invisible { 1882 position: absolute; 1883 top: -999em; 1884 left: -999em; } 1885 1886 .components-datetime__time-field-hours-input, 1887 .components-datetime__time-field-minutes-input, 1888 .components-datetime__time-field-day-input { 1889 width: 35px; } 1890 1891 .components-datetime__time-field-year-input { 1892 width: 55px; } 1893 1894 .components-datetime__time-field-month-select { 1895 max-width: 145px; } 1896 1897 .components-popover .components-datetime__date { 1898 padding-left: 4px; } 1899 1900 .components-popover.edit-post-post-schedule__dialog.is-bottom.is-left { 1901 z-index: 100000; } 1902 1903 .components-disabled { 1904 position: relative; 1905 pointer-events: none; } 1906 .components-disabled::after { 1907 content: ""; 1908 position: absolute; 1909 top: 0; 1910 right: 0; 1911 bottom: 0; 1912 left: 0; } 1913 .components-disabled * { 1914 pointer-events: none; } 1915 1916 body.is-dragging-components-draggable { 1917 cursor: move; 1918 /* Fallback for IE/Edge < 14 */ 1919 cursor: grabbing !important; } 1920 1921 .components-draggable__invisible-drag-image { 1922 position: fixed; 1923 left: -1000px; 1924 height: 50px; 1925 width: 50px; } 1926 1927 .components-draggable__clone { 1928 position: fixed; 1929 padding: 20px; 1930 background: transparent; 1931 pointer-events: none; 1932 z-index: 1000000000; 1933 opacity: 0.8; } 1934 1935 .components-drop-zone { 1936 position: absolute; 1937 top: 0; 1938 right: 0; 1939 bottom: 0; 1940 left: 0; 1941 z-index: 40; 1942 visibility: hidden; 1943 opacity: 0; 1944 transition: 0.3s opacity, 0.3s background-color, 0s visibility 0.3s; 1945 border: 2px solid #0071a1; 1946 border-radius: 2px; } 1947 @media (prefers-reduced-motion: reduce) { 1948 .components-drop-zone { 1949 transition-duration: 0s; } } 1950 .components-drop-zone.is-active { 1951 opacity: 1; 1952 visibility: visible; 1953 transition: 0.3s opacity, 0.3s background-color; } 1954 @media (prefers-reduced-motion: reduce) { 1955 .components-drop-zone.is-active { 1956 transition-duration: 0s; } } 1957 .components-drop-zone.is-dragging-over-element { 1958 background-color: rgba(0, 113, 161, 0.8); } 1959 1960 .components-drop-zone__content { 1961 position: absolute; 1962 top: 50%; 1963 left: 0; 1964 right: 0; 1965 z-index: 50; 1966 transform: translateY(-50%); 1967 width: 100%; 1968 text-align: center; 1969 color: #fff; 1970 transition: transform 0.2s ease-in-out; } 1971 @media (prefers-reduced-motion: reduce) { 1972 .components-drop-zone__content { 1973 transition-duration: 0s; } } 1974 1975 .components-drop-zone.is-dragging-over-element .components-drop-zone__content { 1976 transform: translateY(-50%) scale(1.05); } 1977 1978 .components-drop-zone__content-icon, 1979 .components-drop-zone__content-text { 1980 display: block; } 1981 1982 .components-drop-zone__content-icon { 1983 margin: 0 auto; 1984 line-height: 0; } 1985 1986 .components-drop-zone__content-text { 1987 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; } 1988 1989 .components-drop-zone__provider { 1990 height: 100%; } 1991 1992 .components-dropdown-menu { 1993 padding: 3px; 1994 display: flex; } 1995 .components-dropdown-menu .components-dropdown-menu__toggle { 1996 width: auto; 1997 margin: 0; 1998 padding: 4px; 1999 border: 1px solid transparent; 2000 display: flex; 2001 flex-direction: row; } 2002 .components-dropdown-menu .components-dropdown-menu__toggle.is-active, .components-dropdown-menu .components-dropdown-menu__toggle.is-active:hover { 2003 box-shadow: none; 2004 background-color: #555d66; 2005 color: #fff; } 2006 .components-dropdown-menu .components-dropdown-menu__toggle:focus::before { 2007 top: -3px; 2008 right: -3px; 2009 bottom: -3px; 2010 left: -3px; } 2011 .components-dropdown-menu .components-dropdown-menu__toggle:hover, .components-dropdown-menu .components-dropdown-menu__toggle:focus, .components-dropdown-menu .components-dropdown-menu__toggle:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover { 2012 color: #555d66; 2013 box-shadow: inset 0 0 0 1px #555d66, inset 0 0 0 2px #fff; } 2014 .components-dropdown-menu .components-dropdown-menu__toggle .components-dropdown-menu__indicator::after { 2015 content: ""; 2016 pointer-events: none; 2017 display: block; 2018 width: 0; 2019 height: 0; 2020 border-left: 3px solid transparent; 2021 border-right: 3px solid transparent; 2022 border-top: 5px solid; 2023 margin-left: 4px; 2024 margin-right: 2px; } 2025 2026 .components-dropdown-menu__popover .components-popover__content { 2027 width: 200px; } 2028 2029 .components-dropdown-menu__menu { 2030 width: 100%; 2031 padding: 7px 0; 2032 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 2033 font-size: 13px; 2034 line-height: 1.4; } 2035 .components-dropdown-menu__menu .components-dropdown-menu__menu-item, 2036 .components-dropdown-menu__menu .components-menu-item { 2037 width: 100%; 2038 padding: 6px; 2039 outline: none; 2040 cursor: pointer; 2041 margin-bottom: 4px; } 2042 .components-dropdown-menu__menu .components-dropdown-menu__menu-item.has-separator, 2043 .components-dropdown-menu__menu .components-menu-item.has-separator { 2044 margin-top: 6px; 2045 position: relative; 2046 overflow: visible; } 2047 .components-dropdown-menu__menu .components-dropdown-menu__menu-item.has-separator::before, 2048 .components-dropdown-menu__menu .components-menu-item.has-separator::before { 2049 display: block; 2050 content: ""; 2051 box-sizing: content-box; 2052 background-color: #e2e4e7; 2053 position: absolute; 2054 top: -3px; 2055 left: 0; 2056 right: 0; 2057 height: 1px; } 2058 .components-dropdown-menu__menu .components-dropdown-menu__menu-item:focus:not(:disabled):not([aria-disabled="true"]):not(.is-default), 2059 .components-dropdown-menu__menu .components-menu-item:focus:not(:disabled):not([aria-disabled="true"]):not(.is-default) { 2060 color: #191e23; 2061 border: none; 2062 box-shadow: none; 2063 outline-offset: -2px; 2064 outline: 1px dotted #555d66; } 2065 .components-dropdown-menu__menu .components-dropdown-menu__menu-item:hover, .components-dropdown-menu__menu .components-dropdown-menu__menu-item:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover, 2066 .components-dropdown-menu__menu .components-menu-item:hover, 2067 .components-dropdown-menu__menu .components-menu-item:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover { 2068 color: #191e23; 2069 border: none; 2070 box-shadow: none; 2071 background: #f3f4f5; } 2072 .components-dropdown-menu__menu .components-dropdown-menu__menu-item > svg, 2073 .components-dropdown-menu__menu .components-menu-item > svg { 2074 border-radius: 4px; 2075 padding: 2px; 2076 width: 24px; 2077 height: 24px; 2078 margin: -1px 8px -1px 0; } 2079 .components-dropdown-menu__menu .components-dropdown-menu__menu-item:not(:disabled):not([aria-disabled="true"]):not(.is-default).is-active > svg, 2080 .components-dropdown-menu__menu .components-menu-item:not(:disabled):not([aria-disabled="true"]):not(.is-default).is-active > svg { 2081 outline: none; 2082 color: #fff; 2083 box-shadow: none; 2084 background: #555d66; } 2085 .components-dropdown-menu__menu .components-menu-group:not(:last-child) { 2086 border-bottom: 1px solid #e2e4e7; } 2087 .components-dropdown-menu__menu .components-menu-item__button, 2088 .components-dropdown-menu__menu .components-menu-item__button.components-icon-button { 2089 padding-left: 2rem; } 2090 .components-dropdown-menu__menu .components-menu-item__button.has-icon, 2091 .components-dropdown-menu__menu .components-menu-item__button.components-icon-button.has-icon { 2092 padding-left: 0.5rem; } 2093 .components-dropdown-menu__menu .components-menu-item__button .dashicon, 2094 .components-dropdown-menu__menu .components-menu-item__button.components-icon-button .dashicon { 2095 margin-right: 4px; } 2096 2097 .components-external-link__icon { 2098 width: 1.4em; 2099 height: 1.4em; 2100 margin: -0.2em 0.1em 0; 2101 vertical-align: middle; } 2102 2103 .components-focal-point-picker-wrapper { 2104 background-color: transparent; 2105 border: 1px solid #e2e4e7; 2106 height: 200px; 2107 width: 100%; 2108 padding: 14px; } 2109 2110 .components-focal-point-picker { 2111 align-items: center; 2112 cursor: pointer; 2113 display: flex; 2114 height: 100%; 2115 justify-content: center; 2116 position: relative; 2117 width: 100%; } 2118 .components-focal-point-picker img { 2119 height: auto; 2120 max-height: 100%; 2121 max-width: 100%; 2122 width: auto; 2123 -webkit-user-select: none; 2124 -moz-user-select: none; 2125 -ms-user-select: none; 2126 user-select: none; } 2127 2128 .components-focal-point-picker__icon_container { 2129 background-color: transparent; 2130 cursor: grab; 2131 height: 30px; 2132 opacity: 0.8; 2133 position: absolute; 2134 will-change: transform; 2135 width: 30px; 2136 z-index: 10000; } 2137 .components-focal-point-picker__icon_container.is-dragging { 2138 cursor: grabbing; } 2139 2140 .components-focal-point-picker__icon { 2141 display: block; 2142 height: 100%; 2143 left: -15px; 2144 position: absolute; 2145 top: -15px; 2146 width: 100%; } 2147 .components-focal-point-picker__icon .components-focal-point-picker__icon-outline { 2148 fill: #fff; } 2149 .components-focal-point-picker__icon .components-focal-point-picker__icon-fill { 2150 fill: #0085ba; } 2151 body.admin-color-sunrise .components-focal-point-picker__icon .components-focal-point-picker__icon-fill { 2152 fill: #d1864a; } 2153 body.admin-color-ocean .components-focal-point-picker__icon .components-focal-point-picker__icon-fill { 2154 fill: #a3b9a2; } 2155 body.admin-color-midnight .components-focal-point-picker__icon .components-focal-point-picker__icon-fill { 2156 fill: #e14d43; } 2157 body.admin-color-ectoplasm .components-focal-point-picker__icon .components-focal-point-picker__icon-fill { 2158 fill: #a7b656; } 2159 body.admin-color-coffee .components-focal-point-picker__icon .components-focal-point-picker__icon-fill { 2160 fill: #c2a68c; } 2161 body.admin-color-blue .components-focal-point-picker__icon .components-focal-point-picker__icon-fill { 2162 fill: #82b4cb; } 2163 body.admin-color-light .components-focal-point-picker__icon .components-focal-point-picker__icon-fill { 2164 fill: #0085ba; } 2165 2166 .components-focal-point-picker_position-display-container { 2167 margin: 1em 0; 2168 display: flex; } 2169 .components-focal-point-picker_position-display-container .components-base-control__field { 2170 margin: 0 1em 0 0; } 2171 .components-focal-point-picker_position-display-container input[type="number"].components-text-control__input { 2172 max-width: 4em; 2173 padding: 6px 4px; } 2174 .components-focal-point-picker_position-display-container span { 2175 margin: 0 0 0 0.2em; } 2176 2177 .components-font-size-picker__controls { 2178 max-width: 248px; 2179 display: flex; 2180 justify-content: space-between; 2181 align-items: center; 2182 margin-bottom: 24px; } 2183 .components-font-size-picker__controls .components-range-control__number { 2184 height: 30px; 2185 margin-left: 0; } 2186 .components-font-size-picker__controls .components-range-control__number[value=""] + .components-button { 2187 cursor: default; 2188 opacity: 0.3; 2189 pointer-events: none; } 2190 2191 .components-font-size-picker__select.components-font-size-picker__select.components-font-size-picker__select.components-font-size-picker__select, 2192 .components-font-size-picker__select .components-base-control__field { 2193 margin-bottom: 0; } 2194 2195 .components-font-size-picker__custom-input .components-range-control__slider + .dashicon { 2196 width: 30px; 2197 height: 30px; } 2198 2199 .components-form-file-upload .components-button.is-large { 2200 padding-left: 6px; } 2201 2202 .components-form-toggle { 2203 position: relative; 2204 display: inline-block; } 2205 .components-form-toggle .components-form-toggle__on, 2206 .components-form-toggle .components-form-toggle__off { 2207 position: absolute; 2208 top: 6px; 2209 box-sizing: border-box; } 2210 .components-form-toggle .components-form-toggle__off { 2211 color: #6c7781; 2212 fill: currentColor; 2213 right: 6px; } 2214 .components-form-toggle .components-form-toggle__on { 2215 left: 8px; } 2216 .components-form-toggle .components-form-toggle__track { 2217 content: ""; 2218 display: inline-block; 2219 box-sizing: border-box; 2220 vertical-align: top; 2221 background-color: #fff; 2222 border: 2px solid #6c7781; 2223 width: 36px; 2224 height: 18px; 2225 border-radius: 9px; 2226 transition: 0.2s background ease; } 2227 @media (prefers-reduced-motion: reduce) { 2228 .components-form-toggle .components-form-toggle__track { 2229 transition-duration: 0s; } } 2230 .components-form-toggle .components-form-toggle__thumb { 2231 display: block; 2232 position: absolute; 2233 box-sizing: border-box; 2234 top: 4px; 2235 left: 4px; 2236 width: 10px; 2237 height: 10px; 2238 border-radius: 50%; 2239 transition: 0.1s transform ease; 2240 background-color: #6c7781; 2241 border: 5px solid #6c7781; } 2242 @media (prefers-reduced-motion: reduce) { 2243 .components-form-toggle .components-form-toggle__thumb { 2244 transition-duration: 0s; } } 2245 .components-form-toggle:hover .components-form-toggle__track { 2246 border: 2px solid #555d66; } 2247 .components-form-toggle:hover .components-form-toggle__thumb { 2248 background-color: #555d66; 2249 border: 5px solid #6c7781; } 2250 .components-form-toggle:hover .components-form-toggle__off { 2251 color: #555d66; } 2252 .components-form-toggle.is-checked .components-form-toggle__track { 2253 background-color: #11a0d2; 2254 border: 2px solid #11a0d2; 2255 border: 9px solid transparent; } 2256 body.admin-color-sunrise .components-form-toggle.is-checked .components-form-toggle__track { 2257 background-color: #c8b03c; 2258 border: 2px solid #c8b03c; } 2259 body.admin-color-ocean .components-form-toggle.is-checked .components-form-toggle__track { 2260 background-color: #a3b9a2; 2261 border: 2px solid #a3b9a2; } 2262 body.admin-color-midnight .components-form-toggle.is-checked .components-form-toggle__track { 2263 background-color: #77a6b9; 2264 border: 2px solid #77a6b9; } 2265 body.admin-color-ectoplasm .components-form-toggle.is-checked .components-form-toggle__track { 2266 background-color: #a7b656; 2267 border: 2px solid #a7b656; } 2268 body.admin-color-coffee .components-form-toggle.is-checked .components-form-toggle__track { 2269 background-color: #c2a68c; 2270 border: 2px solid #c2a68c; } 2271 body.admin-color-blue .components-form-toggle.is-checked .components-form-toggle__track { 2272 background-color: #82b4cb; 2273 border: 2px solid #82b4cb; } 2274 body.admin-color-light .components-form-toggle.is-checked .components-form-toggle__track { 2275 background-color: #11a0d2; 2276 border: 2px solid #11a0d2; } 2277 .components-form-toggle__input:focus + .components-form-toggle__track { 2278 box-shadow: 0 0 0 2px #fff, 0 0 0 3px #6c7781; 2279 outline: 2px solid transparent; 2280 outline-offset: 2px; } 2281 .components-form-toggle.is-checked .components-form-toggle__thumb { 2282 background-color: #fff; 2283 border-width: 0; 2284 transform: translateX(18px); } 2285 .components-form-toggle.is-checked::before { 2286 background-color: #11a0d2; 2287 border: 2px solid #11a0d2; } 2288 body.admin-color-sunrise .components-form-toggle.is-checked::before { 2289 background-color: #c8b03c; 2290 border: 2px solid #c8b03c; } 2291 body.admin-color-ocean .components-form-toggle.is-checked::before { 2292 background-color: #a3b9a2; 2293 border: 2px solid #a3b9a2; } 2294 body.admin-color-midnight .components-form-toggle.is-checked::before { 2295 background-color: #77a6b9; 2296 border: 2px solid #77a6b9; } 2297 body.admin-color-ectoplasm .components-form-toggle.is-checked::before { 2298 background-color: #a7b656; 2299 border: 2px solid #a7b656; } 2300 body.admin-color-coffee .components-form-toggle.is-checked::before { 2301 background-color: #c2a68c; 2302 border: 2px solid #c2a68c; } 2303 body.admin-color-blue .components-form-toggle.is-checked::before { 2304 background-color: #82b4cb; 2305 border: 2px solid #82b4cb; } 2306 body.admin-color-light .components-form-toggle.is-checked::before { 2307 background-color: #11a0d2; 2308 border: 2px solid #11a0d2; } 2309 .components-disabled .components-form-toggle { 2310 opacity: 0.3; } 2311 2312 .components-form-toggle input.components-form-toggle__input[type="checkbox"] { 2313 position: absolute; 2314 top: 0; 2315 left: 0; 2316 width: 100%; 2317 height: 100%; 2318 opacity: 0; 2319 margin: 0; 2320 padding: 0; 2321 z-index: 1; 2322 border: none; } 2323 .components-form-toggle input.components-form-toggle__input[type="checkbox"]:checked { 2324 background: none; } 2325 .components-form-toggle input.components-form-toggle__input[type="checkbox"]::before { 2326 content: ""; } 2327 2328 .components-form-toggle .components-form-toggle__on { 2329 outline: 1px solid transparent; 2330 outline-offset: -1px; 2331 border: 1px solid #000; 2332 filter: invert(100%) contrast(500%); } 2333 2334 @supports (-ms-high-contrast-adjust: auto) { 2335 .components-form-toggle .components-form-toggle__on { 2336 filter: none; 2337 border: 1px solid #fff; } } 2338 2339 .components-form-token-field__input-container { 2340 display: flex; 2341 flex-wrap: wrap; 2342 align-items: flex-start; 2343 width: 100%; 2344 margin: 0 0 8px 0; 2345 padding: 4px; 2346 background-color: #fff; 2347 border: 1px solid #ccd0d4; 2348 color: #32373c; 2349 cursor: text; 2350 box-shadow: 0 0 0 transparent; 2351 transition: box-shadow 0.1s linear; 2352 border-radius: 4px; 2353 border: 1px solid #7e8993; } 2354 @media (prefers-reduced-motion: reduce) { 2355 .components-form-token-field__input-container { 2356 transition-duration: 0s; } } 2357 .components-form-token-field__input-container.is-disabled { 2358 background: #e2e4e7; 2359 border-color: #ccd0d4; } 2360 .components-form-token-field__input-container.is-active { 2361 color: #191e23; 2362 border-color: #007cba; 2363 box-shadow: 0 0 0 1px #007cba; 2364 outline: 2px solid transparent; } 2365 .components-form-token-field__input-container input[type="text"].components-form-token-field__input { 2366 display: inline-block; 2367 width: 100%; 2368 max-width: 100%; 2369 margin: 2px 0 2px 8px; 2370 padding: 0; 2371 min-height: 24px; 2372 background: inherit; 2373 border: 0; 2374 color: #23282d; 2375 box-shadow: none; } 2376 .components-form-token-field__input-container input[type="text"].components-form-token-field__input:focus, 2377 .components-form-token-field.is-active .components-form-token-field__input-container input[type="text"].components-form-token-field__input { 2378 outline: none; 2379 box-shadow: none; } 2380 .components-form-token-field__input-container .components-form-token-field__token + input[type="text"].components-form-token-field__input { 2381 width: auto; } 2382 2383 .components-form-token-field__label { 2384 display: inline-block; 2385 margin-bottom: 4px; } 2386 2387 .components-form-token-field__help { 2388 font-style: italic; } 2389 2390 .components-form-token-field__token { 2391 font-size: 13px; 2392 display: flex; 2393 margin: 2px 4px 2px 0; 2394 color: #32373c; 2395 overflow: hidden; } 2396 .components-form-token-field__token.is-success .components-form-token-field__token-text, 2397 .components-form-token-field__token.is-success .components-form-token-field__remove-token { 2398 background: #4ab866; } 2399 .components-form-token-field__token.is-error .components-form-token-field__token-text, 2400 .components-form-token-field__token.is-error .components-form-token-field__remove-token { 2401 background: #d94f4f; } 2402 .components-form-token-field__token.is-validating .components-form-token-field__token-text, 2403 .components-form-token-field__token.is-validating .components-form-token-field__remove-token { 2404 color: #555d66; } 2405 .components-form-token-field__token.is-borderless { 2406 position: relative; 2407 padding: 0 16px 0 0; } 2408 .components-form-token-field__token.is-borderless .components-form-token-field__token-text { 2409 background: transparent; 2410 color: #11a0d2; } 2411 body.admin-color-sunrise .components-form-token-field__token.is-borderless .components-form-token-field__token-text { 2412 color: #c8b03c; } 2413 body.admin-color-ocean .components-form-token-field__token.is-borderless .components-form-token-field__token-text { 2414 color: #a89d8a; } 2415 body.admin-color-midnight .components-form-token-field__token.is-borderless .components-form-token-field__token-text { 2416 color: #77a6b9; } 2417 body.admin-color-ectoplasm .components-form-token-field__token.is-borderless .components-form-token-field__token-text { 2418 color: #c77430; } 2419 body.admin-color-coffee .components-form-token-field__token.is-borderless .components-form-token-field__token-text { 2420 color: #9fa47b; } 2421 body.admin-color-blue .components-form-token-field__token.is-borderless .components-form-token-field__token-text { 2422 color: #d9ab59; } 2423 body.admin-color-light .components-form-token-field__token.is-borderless .components-form-token-field__token-text { 2424 color: #c75726; } 2425 .components-form-token-field__token.is-borderless .components-form-token-field__remove-token { 2426 background: transparent; 2427 color: #555d66; 2428 position: absolute; 2429 top: 1px; 2430 right: 0; } 2431 .components-form-token-field__token.is-borderless.is-success .components-form-token-field__token-text { 2432 color: #4ab866; } 2433 .components-form-token-field__token.is-borderless.is-error .components-form-token-field__token-text { 2434 color: #d94f4f; 2435 border-radius: 4px 0 0 4px; 2436 padding: 0 4px 0 6px; } 2437 .components-form-token-field__token.is-borderless.is-validating .components-form-token-field__token-text { 2438 color: #23282d; } 2439 .components-form-token-field__token.is-disabled .components-form-token-field__remove-token { 2440 cursor: default; } 2441 2442 .components-form-token-field__token-text, 2443 .components-form-token-field__remove-token.components-icon-button { 2444 display: inline-block; 2445 line-height: 24px; 2446 background: #e2e4e7; 2447 transition: all 0.2s cubic-bezier(0.4, 1, 0.4, 1); } 2448 @media (prefers-reduced-motion: reduce) { 2449 .components-form-token-field__token-text, 2450 .components-form-token-field__remove-token.components-icon-button { 2451 transition-duration: 0s; 2452 animation-duration: 1ms; } } 2453 2454 .components-form-token-field__token-text { 2455 border-radius: 12px 0 0 12px; 2456 padding: 0 4px 0 8px; 2457 white-space: nowrap; 2458 overflow: hidden; 2459 text-overflow: ellipsis; } 2460 2461 .components-form-token-field__remove-token.components-icon-button { 2462 cursor: pointer; 2463 border-radius: 0 12px 12px 0; 2464 padding: 0 2px; 2465 color: #555d66; 2466 line-height: 10px; 2467 overflow: initial; } 2468 .components-form-token-field__remove-token.components-icon-button:hover { 2469 color: #32373c; } 2470 2471 .components-form-token-field__suggestions-list { 2472 flex: 1 0 100%; 2473 min-width: 100%; 2474 max-height: 9em; 2475 overflow-y: scroll; 2476 transition: all 0.15s ease-in-out; 2477 list-style: none; 2478 border-top: 1px solid #6c7781; 2479 margin: 4px -4px -4px; 2480 padding-top: 3px; } 2481 @media (prefers-reduced-motion: reduce) { 2482 .components-form-token-field__suggestions-list { 2483 transition-duration: 0s; } } 2484 2485 .components-form-token-field__suggestion { 2486 color: #555d66; 2487 display: block; 2488 font-size: 13px; 2489 padding: 4px 8px; 2490 cursor: pointer; } 2491 .components-form-token-field__suggestion.is-selected { 2492 background: #0071a1; 2493 color: #fff; } 2494 2495 .components-form-token-field__suggestion-match { 2496 text-decoration: underline; } 2497 2498 .components-navigate-regions.is-focusing-regions [role="region"]:focus::after { 2499 content: ""; 2500 position: absolute; 2501 top: 0; 2502 bottom: 0; 2503 left: 0; 2504 right: 0; 2505 pointer-events: none; 2506 outline: 4px solid transparent; 2507 box-shadow: inset 0 0 0 4px #33b3db; } 2508 2509 @supports (outline-offset: 1px) { 2510 .components-navigate-regions.is-focusing-regions [role="region"]:focus::after { 2511 content: none; } 2512 .components-navigate-regions.is-focusing-regions [role="region"]:focus { 2513 outline-style: solid; 2514 outline-color: #33b3db; 2515 outline-width: 4px; 2516 outline-offset: -4px; } } 2517 2518 .components-icon-button { 2519 display: flex; 2520 align-items: center; 2521 padding: 8px; 2522 margin: 0; 2523 border: none; 2524 background: none; 2525 color: #555d66; 2526 position: relative; 2527 overflow: hidden; 2528 border-radius: 4px; } 2529 .components-icon-button .dashicon { 2530 display: inline-block; 2531 flex: 0 0 auto; } 2532 .components-icon-button svg { 2533 fill: currentColor; 2534 outline: none; } 2535 .components-icon-button.has-text svg { 2536 margin-right: 4px; } 2537 .components-icon-button:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover { 2538 background-color: #fff; 2539 color: #191e23; 2540 box-shadow: inset 0 0 0 1px #555d66, inset 0 0 0 2px #fff; } 2541 .components-icon-button:not(:disabled):not([aria-disabled="true"]):not(.is-default):active { 2542 outline: none; 2543 background-color: #fff; 2544 color: #191e23; 2545 box-shadow: inset 0 0 0 1px #ccd0d4, inset 0 0 0 2px #fff; } 2546 .components-icon-button[aria-disabled="true"]:focus, .components-icon-button:disabled:focus { 2547 box-shadow: none; } 2548 2549 .components-menu-group { 2550 width: 100%; 2551 padding: 7px 0; } 2552 2553 .components-menu-group__label { 2554 margin-bottom: 8px; 2555 color: #6c7781; 2556 padding: 0 7px; } 2557 2558 .components-menu-item__button, 2559 .components-menu-item__button.components-icon-button { 2560 width: 100%; 2561 padding: 8px 15px; 2562 text-align: left; 2563 color: #40464d; 2564 border: none; 2565 box-shadow: none; } 2566 .components-menu-item__button .dashicon, 2567 .components-menu-item__button .components-menu-items__item-icon, 2568 .components-menu-item__button > span > svg, 2569 .components-menu-item__button.components-icon-button .dashicon, 2570 .components-menu-item__button.components-icon-button .components-menu-items__item-icon, 2571 .components-menu-item__button.components-icon-button > span > svg { 2572 margin-right: 5px; } 2573 .components-menu-item__button .components-menu-items__item-icon, 2574 .components-menu-item__button.components-icon-button .components-menu-items__item-icon { 2575 display: inline-block; 2576 flex: 0 0 auto; } 2577 .components-menu-item__button:hover:not(:disabled):not([aria-disabled="true"]), 2578 .components-menu-item__button.components-icon-button:hover:not(:disabled):not([aria-disabled="true"]) { 2579 color: #191e23; 2580 border: none; 2581 box-shadow: none; 2582 background: #f3f4f5; } 2583 .components-menu-item__button:hover:not(:disabled):not([aria-disabled="true"]) .components-menu-item__shortcut, 2584 .components-menu-item__button.components-icon-button:hover:not(:disabled):not([aria-disabled="true"]) .components-menu-item__shortcut { 2585 color: #40464d; } 2586 .components-menu-item__button:focus:not(:disabled):not([aria-disabled="true"]), 2587 .components-menu-item__button.components-icon-button:focus:not(:disabled):not([aria-disabled="true"]) { 2588 color: #191e23; 2589 border: none; 2590 box-shadow: none; 2591 outline-offset: -2px; 2592 outline: 1px dotted #555d66; } 2593 2594 .components-menu-item__info-wrapper { 2595 display: flex; 2596 flex-direction: column; } 2597 2598 .components-menu-item__info { 2599 margin-top: 4px; 2600 font-size: 12px; 2601 color: #6c7781; } 2602 2603 .components-menu-item__shortcut { 2604 -ms-grid-row-align: center; 2605 align-self: center; 2606 color: #6c7781; 2607 margin-right: 0; 2608 margin-left: auto; 2609 padding-left: 8px; 2610 display: none; } 2611 @media (min-width: 480px) { 2612 .components-menu-item__shortcut { 2613 display: inline; } } 2614 2615 .components-modal__screen-overlay { 2616 position: fixed; 2617 top: 0; 2618 right: 0; 2619 bottom: 0; 2620 left: 0; 2621 background-color: rgba(0, 0, 0, 0.7); 2622 z-index: 100000; 2623 animation: edit-post__fade-in-animation 0.2s ease-out 0s; 2624 animation-fill-mode: forwards; } 2625 @media (prefers-reduced-motion: reduce) { 2626 .components-modal__screen-overlay { 2627 animation-duration: 1ms; } } 2628 2629 .components-modal__frame { 2630 position: absolute; 2631 top: 0; 2632 right: 0; 2633 bottom: 0; 2634 left: 0; 2635 box-sizing: border-box; 2636 margin: 0; 2637 border: 1px solid #e2e4e7; 2638 background: #fff; 2639 box-shadow: 0 3px 30px rgba(25, 30, 35, 0.2); 2640 overflow: auto; } 2641 @media (min-width: 600px) { 2642 .components-modal__frame { 2643 top: 50%; 2644 right: auto; 2645 bottom: auto; 2646 left: 50%; 2647 min-width: 360px; 2648 max-width: calc(100% - 16px - 16px); 2649 max-height: calc(100% - 56px - 56px); 2650 transform: translate(-50%, -50%); 2651 animation: components-modal__appear-animation 0.1s ease-out; 2652 animation-fill-mode: forwards; } } 2653 @media (min-width: 600px) and (prefers-reduced-motion: reduce) { 2654 .components-modal__frame { 2655 animation-duration: 1ms; } } 2656 2657 @keyframes components-modal__appear-animation { 2658 from { 2659 margin-top: 32px; } 2660 to { 2661 margin-top: 0; } } 2662 2663 .components-modal__header { 2664 box-sizing: border-box; 2665 border-bottom: 1px solid #e2e4e7; 2666 padding: 0 24px; 2667 display: flex; 2668 flex-direction: row; 2669 justify-content: space-between; 2670 background: #fff; 2671 align-items: center; 2672 height: 56px; 2673 position: -webkit-sticky; 2674 position: sticky; 2675 top: 0; 2676 z-index: 10; 2677 margin: 0 -24px 24px; } 2678 @supports (-ms-ime-align: auto) { 2679 .components-modal__header { 2680 position: fixed; 2681 width: 100%; } } 2682 .components-modal__header .components-modal__header-heading { 2683 font-size: 1rem; 2684 font-weight: 600; } 2685 .components-modal__header h1 { 2686 line-height: 1; 2687 margin: 0; } 2688 .components-modal__header .components-icon-button { 2689 position: relative; 2690 left: 8px; } 2691 2692 .components-modal__header-heading-container { 2693 align-items: center; 2694 flex-grow: 1; 2695 display: flex; 2696 flex-direction: row; 2697 justify-content: left; } 2698 2699 .components-modal__header-icon-container { 2700 display: inline-block; } 2701 .components-modal__header-icon-container svg { 2702 max-width: 36px; 2703 max-height: 36px; 2704 padding: 8px; } 2705 2706 .components-modal__content { 2707 box-sizing: border-box; 2708 height: 100%; 2709 padding: 0 24px 24px; } 2710 @supports (-ms-ime-align: auto) { 2711 .components-modal__content { 2712 padding-top: 56px; } } 2713 2714 .components-notice { 2715 display: flex; 2716 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 2717 font-size: 13px; 2718 background-color: #e5f5fa; 2719 border-left: 4px solid #00a0d2; 2720 margin: 5px 15px 2px; 2721 padding: 8px 12px; 2722 align-items: center; } 2723 .components-notice.is-dismissible { 2724 padding-right: 36px; 2725 position: relative; } 2726 .components-notice.is-success { 2727 border-left-color: #4ab866; 2728 background-color: #eff9f1; } 2729 .components-notice.is-warning { 2730 border-left-color: #f0b849; 2731 background-color: #fef8ee; } 2732 .components-notice.is-error { 2733 border-left-color: #d94f4f; 2734 background-color: #f9e2e2; } 2735 2736 .components-notice__content { 2737 flex-grow: 1; 2738 margin: 4px 25px 4px 0; } 2739 2740 .components-notice__action.components-button, .components-notice__action.components-button.is-link { 2741 margin-left: 4px; } 2742 2743 .components-notice__action.components-button.is-default { 2744 vertical-align: initial; } 2745 2746 .components-notice__dismiss { 2747 color: #6c7781; 2748 align-self: flex-start; 2749 flex-shrink: 0; } 2750 .components-notice__dismiss:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover, .components-notice__dismiss:not(:disabled):not([aria-disabled="true"]):not(.is-default):active, .components-notice__dismiss:not(:disabled):not([aria-disabled="true"]):focus { 2751 color: #191e23; 2752 background-color: transparent; } 2753 .components-notice__dismiss:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover { 2754 box-shadow: none; } 2755 2756 .components-notice-list { 2757 max-width: 100vw; 2758 box-sizing: border-box; 2759 z-index: 29; } 2760 .components-notice-list .components-notice__content { 2761 margin-top: 12px; 2762 margin-bottom: 12px; 2763 line-height: 1.6; } 2764 .components-notice-list .components-notice__action.components-button { 2765 margin-top: -2px; 2766 margin-bottom: -2px; } 2767 2768 .components-panel { 2769 background: #fff; 2770 border: 1px solid #e2e4e7; } 2771 .components-panel > .components-panel__header:first-child, 2772 .components-panel > .components-panel__body:first-child { 2773 margin-top: -1px; } 2774 .components-panel > .components-panel__header:last-child, 2775 .components-panel > .components-panel__body:last-child { 2776 border-bottom-width: 0; } 2777 2778 .components-panel + .components-panel { 2779 margin-top: -1px; } 2780 2781 .components-panel__body { 2782 border-top: 1px solid #e2e4e7; 2783 border-bottom: 1px solid #e2e4e7; } 2784 .components-panel__body h3 { 2785 margin: 0 0 0.5em; } 2786 .components-panel__body.is-opened { 2787 padding: 16px; } 2788 .components-panel__body > .components-icon-button { 2789 color: #191e23; } 2790 2791 .components-panel__header { 2792 display: flex; 2793 justify-content: space-between; 2794 align-items: center; 2795 padding: 0 16px; 2796 height: 50px; 2797 border-top: 1px solid #e2e4e7; 2798 border-bottom: 1px solid #e2e4e7; } 2799 .components-panel__header h2 { 2800 margin: 0; 2801 font-size: inherit; 2802 color: inherit; } 2803 2804 .components-panel__body + .components-panel__body, 2805 .components-panel__body + .components-panel__header, 2806 .components-panel__header + .components-panel__body, 2807 .components-panel__header + .components-panel__header { 2808 margin-top: -1px; } 2809 2810 .components-panel__body > .components-panel__body-title { 2811 display: block; 2812 padding: 0; 2813 font-size: inherit; 2814 margin-top: 0; 2815 margin-bottom: 0; 2816 transition: 0.1s background ease-in-out; } 2817 @media (prefers-reduced-motion: reduce) { 2818 .components-panel__body > .components-panel__body-title { 2819 transition-duration: 0s; } } 2820 2821 .components-panel__body.is-opened > .components-panel__body-title { 2822 margin: -16px; 2823 margin-bottom: 5px; } 2824 2825 .components-panel__body > .components-panel__body-title:hover, 2826 .edit-post-last-revision__panel > .components-icon-button:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover { 2827 background: #f3f4f5; } 2828 2829 .components-panel__body-toggle.components-button { 2830 position: relative; 2831 padding: 15px; 2832 outline: none; 2833 width: 100%; 2834 font-weight: 600; 2835 text-align: left; 2836 color: #191e23; 2837 border: none; 2838 box-shadow: none; 2839 transition: 0.1s background ease-in-out; 2840 /* rtl:begin:ignore */ 2841 /* rtl:end:ignore */ } 2842 @media (prefers-reduced-motion: reduce) { 2843 .components-panel__body-toggle.components-button { 2844 transition-duration: 0s; } } 2845 .components-panel__body-toggle.components-button:focus:not(:disabled):not([aria-disabled="true"]) { 2846 color: #191e23; 2847 border: none; 2848 box-shadow: none; 2849 outline-offset: -2px; 2850 outline: 1px dotted #555d66; } 2851 .components-panel__body-toggle.components-button .components-panel__arrow { 2852 position: absolute; 2853 right: 10px; 2854 top: 50%; 2855 transform: translateY(-50%); 2856 color: #191e23; 2857 fill: currentColor; 2858 transition: 0.1s color ease-in-out; } 2859 @media (prefers-reduced-motion: reduce) { 2860 .components-panel__body-toggle.components-button .components-panel__arrow { 2861 transition-duration: 0s; } } 2862 body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right { 2863 transform: scaleX(-1); 2864 -ms-filter: fliph; 2865 filter: FlipH; 2866 margin-top: -10px; } 2867 2868 .components-panel__icon { 2869 color: #555d66; 2870 margin: -2px 0 -2px 6px; } 2871 2872 .components-panel__body-toggle-icon { 2873 margin-right: -5px; } 2874 2875 .components-panel__color-title { 2876 float: left; 2877 height: 19px; } 2878 2879 .components-panel__row { 2880 display: flex; 2881 justify-content: space-between; 2882 align-items: center; 2883 margin-top: 20px; } 2884 .components-panel__row select { 2885 min-width: 0; } 2886 .components-panel__row label { 2887 margin-right: 10px; 2888 flex-shrink: 0; 2889 max-width: 75%; } 2890 .components-panel__row:empty, .components-panel__row:first-of-type { 2891 margin-top: 0; } 2892 2893 .components-panel .circle-picker { 2894 padding-bottom: 20px; } 2895 2896 .components-placeholder { 2897 margin-bottom: 28px; 2898 padding: 1em; 2899 min-height: 200px; 2900 width: 100%; 2901 text-align: center; 2902 background: rgba(139, 139, 150, 0.1); } 2903 @supports ((position: -webkit-sticky) or (position: sticky)) { 2904 .components-placeholder { 2905 display: flex; 2906 flex-direction: column; 2907 align-items: center; 2908 justify-content: center; } } 2909 .is-dark-theme .components-placeholder { 2910 background: rgba(255, 255, 255, 0.15); } 2911 2912 .components-placeholder__instructions, 2913 .components-placeholder__label, 2914 .components-placeholder__fieldset { 2915 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 2916 font-size: 13px; } 2917 2918 .components-placeholder__label { 2919 display: flex; 2920 align-items: center; 2921 justify-content: center; 2922 font-weight: 600; 2923 margin-bottom: 1em; } 2924 .components-placeholder__label .dashicon, 2925 .components-placeholder__label .block-editor-block-icon { 2926 fill: currentColor; 2927 margin-right: 1ch; } 2928 2929 .components-placeholder__fieldset, 2930 .components-placeholder__fieldset form { 2931 display: flex; 2932 flex-direction: row; 2933 justify-content: center; 2934 width: 100%; 2935 max-width: 400px; 2936 flex-wrap: wrap; 2937 z-index: 1; } 2938 .components-placeholder__fieldset p, 2939 .components-placeholder__fieldset form p { 2940 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 2941 font-size: 13px; } 2942 2943 .components-placeholder__fieldset.is-column-layout, 2944 .components-placeholder__fieldset.is-column-layout form { 2945 flex-direction: column; } 2946 2947 .components-placeholder__input { 2948 margin-top: 0; 2949 margin-right: 8px; 2950 flex: 1 1 auto; } 2951 2952 .components-placeholder__instructions { 2953 margin-bottom: 1em; } 2954 2955 .components-placeholder__preview img { 2956 margin: 3%; 2957 width: 50%; } 2958 2959 /*!rtl:begin:ignore*/ 2960 .components-popover { 2961 position: fixed; 2962 z-index: 1000000; 2963 left: 50%; } 2964 .components-popover.is-mobile { 2965 top: 0; 2966 left: 0; 2967 right: 0; 2968 bottom: 0; } 2969 .components-popover:not(.is-without-arrow):not(.is-mobile) { 2970 margin-left: 2px; } 2971 .components-popover:not(.is-without-arrow):not(.is-mobile)::before { 2972 border: 8px solid #e2e4e7; } 2973 .components-popover:not(.is-without-arrow):not(.is-mobile)::after { 2974 border: 8px solid #fff; } 2975 .components-popover:not(.is-without-arrow):not(.is-mobile)::before, .components-popover:not(.is-without-arrow):not(.is-mobile)::after { 2976 content: ""; 2977 position: absolute; 2978 height: 0; 2979 width: 0; 2980 line-height: 0; } 2981 .components-popover:not(.is-without-arrow):not(.is-mobile).is-top { 2982 margin-top: -8px; } 2983 .components-popover:not(.is-without-arrow):not(.is-mobile).is-top::before { 2984 bottom: -8px; } 2985 .components-popover:not(.is-without-arrow):not(.is-mobile).is-top::after { 2986 bottom: -6px; } 2987 .components-popover:not(.is-without-arrow):not(.is-mobile).is-top::before, .components-popover:not(.is-without-arrow):not(.is-mobile).is-top::after { 2988 border-bottom: none; 2989 border-left-color: transparent; 2990 border-right-color: transparent; 2991 border-top-style: solid; 2992 margin-left: -10px; } 2993 .components-popover:not(.is-without-arrow):not(.is-mobile).is-bottom { 2994 margin-top: 8px; } 2995 .components-popover:not(.is-without-arrow):not(.is-mobile).is-bottom::before { 2996 top: -8px; } 2997 .components-popover:not(.is-without-arrow):not(.is-mobile).is-bottom::after { 2998 top: -6px; } 2999 .components-popover:not(.is-without-arrow):not(.is-mobile).is-bottom::before, .components-popover:not(.is-without-arrow):not(.is-mobile).is-bottom::after { 3000 border-bottom-style: solid; 3001 border-left-color: transparent; 3002 border-right-color: transparent; 3003 border-top: none; 3004 margin-left: -10px; } 3005 .components-popover:not(.is-without-arrow):not(.is-mobile).is-middle.is-left { 3006 margin-left: -8px; } 3007 .components-popover:not(.is-without-arrow):not(.is-mobile).is-middle.is-left::before { 3008 right: -8px; } 3009 .components-popover:not(.is-without-arrow):not(.is-mobile).is-middle.is-left::after { 3010 right: -6px; } 3011 .components-popover:not(.is-without-arrow):not(.is-mobile).is-middle.is-left::before, .components-popover:not(.is-without-arrow):not(.is-mobile).is-middle.is-left::after { 3012 border-bottom-color: transparent; 3013 border-left-style: solid; 3014 border-right: none; 3015 border-top-color: transparent; } 3016 .components-popover:not(.is-without-arrow):not(.is-mobile).is-middle.is-right { 3017 margin-left: 8px; } 3018 .components-popover:not(.is-without-arrow):not(.is-mobile).is-middle.is-right::before { 3019 left: -8px; } 3020 .components-popover:not(.is-without-arrow):not(.is-mobile).is-middle.is-right::after { 3021 left: -6px; } 3022 .components-popover:not(.is-without-arrow):not(.is-mobile).is-middle.is-right::before, .components-popover:not(.is-without-arrow):not(.is-mobile).is-middle.is-right::after { 3023 border-bottom-color: transparent; 3024 border-left: none; 3025 border-right-style: solid; 3026 border-top-color: transparent; } 3027 .components-popover:not(.is-mobile).is-top { 3028 bottom: 100%; } 3029 .components-popover:not(.is-mobile).is-bottom { 3030 top: 100%; } 3031 .components-popover:not(.is-mobile).is-middle { 3032 align-items: center; 3033 display: flex; } 3034 3035 .components-popover__content { 3036 box-shadow: 0 3px 30px rgba(25, 30, 35, 0.1); 3037 border: 1px solid #e2e4e7; 3038 background: #fff; 3039 height: 100%; } 3040 .components-popover.is-mobile .components-popover__content { 3041 height: calc(100% - 50px); 3042 border-top: 0; } 3043 .components-popover:not(.is-mobile) .components-popover__content { 3044 position: absolute; 3045 height: auto; 3046 overflow-y: auto; 3047 min-width: 260px; } 3048 .components-popover:not(.is-mobile).is-top .components-popover__content { 3049 bottom: 100%; } 3050 .components-popover:not(.is-mobile).is-center .components-popover__content { 3051 left: 50%; 3052 transform: translateX(-50%); } 3053 .components-popover:not(.is-mobile).is-right .components-popover__content { 3054 position: absolute; 3055 left: 100%; } 3056 .components-popover:not(.is-mobile):not(.is-middle).is-right .components-popover__content { 3057 margin-left: -24px; } 3058 .components-popover:not(.is-mobile).is-left .components-popover__content { 3059 position: absolute; 3060 right: 100%; } 3061 .components-popover:not(.is-mobile):not(.is-middle).is-left .components-popover__content { 3062 margin-right: -24px; } 3063 3064 .components-popover__content > div { 3065 height: 100%; } 3066 3067 .components-popover__header { 3068 align-items: center; 3069 background: #fff; 3070 border: 1px solid #e2e4e7; 3071 display: flex; 3072 height: 50px; 3073 justify-content: space-between; 3074 padding: 0 8px 0 16px; } 3075 3076 .components-popover__header-title { 3077 overflow: hidden; 3078 text-overflow: ellipsis; 3079 white-space: nowrap; 3080 width: 100%; } 3081 3082 .components-popover__close.components-icon-button { 3083 z-index: 5; } 3084 3085 /*!rtl:end:ignore*/ 3086 .components-radio-control { 3087 display: flex; 3088 flex-direction: column; } 3089 .components-radio-control .components-base-control__help { 3090 margin-top: 0; } 3091 3092 .components-radio-control__option:not(:last-child) { 3093 margin-bottom: 4px; } 3094 3095 .components-radio-control__input[type="radio"] { 3096 margin-top: 0; 3097 margin-right: 6px; } 3098 3099 .components-range-control .components-base-control__field { 3100 display: flex; 3101 justify-content: center; 3102 flex-wrap: wrap; 3103 align-items: center; } 3104 3105 .components-range-control .dashicon { 3106 flex-shrink: 0; 3107 margin-right: 10px; } 3108 3109 .components-range-control .components-base-control__label { 3110 width: 100%; } 3111 3112 .components-range-control .components-range-control__slider { 3113 margin-left: 0; 3114 flex: 1; } 3115 3116 .components-range-control__reset { 3117 margin-left: 8px; } 3118 3119 .components-range-control__slider { 3120 width: 100%; 3121 margin-left: 8px; 3122 padding: 0; 3123 -webkit-appearance: none; 3124 background: transparent; 3125 /** 3126 * Thumb 3127 */ 3128 /** 3129 * Track 3130 */ } 3131 .components-range-control__slider::-webkit-slider-thumb { 3132 -webkit-appearance: none; 3133 height: 18px; 3134 width: 18px; 3135 border-radius: 50%; 3136 cursor: pointer; 3137 background: #555d66; 3138 border: 4px solid transparent; 3139 background-clip: padding-box; 3140 box-sizing: border-box; 3141 margin-top: -7px; } 3142 .components-range-control__slider::-moz-range-thumb { 3143 height: 18px; 3144 width: 18px; 3145 border-radius: 50%; 3146 cursor: pointer; 3147 background: #555d66; 3148 border: 4px solid transparent; 3149 background-clip: padding-box; 3150 box-sizing: border-box; } 3151 .components-range-control__slider::-ms-thumb { 3152 height: 18px; 3153 width: 18px; 3154 border-radius: 50%; 3155 cursor: pointer; 3156 background: #555d66; 3157 border: 4px solid transparent; 3158 background-clip: padding-box; 3159 box-sizing: border-box; 3160 margin-top: 0; 3161 height: 14px; 3162 width: 14px; 3163 border: 2px solid transparent; } 3164 .components-range-control__slider:focus { 3165 outline: none; } 3166 .components-range-control__slider:focus::-webkit-slider-thumb { 3167 background-color: #fff; 3168 color: #191e23; 3169 box-shadow: inset 0 0 0 1px #6c7781, inset 0 0 0 2px #fff; 3170 outline: 2px solid transparent; } 3171 .components-range-control__slider:focus::-moz-range-thumb { 3172 background-color: #fff; 3173 color: #191e23; 3174 box-shadow: inset 0 0 0 1px #6c7781, inset 0 0 0 2px #fff; 3175 outline: 2px solid transparent; } 3176 .components-range-control__slider:focus::-ms-thumb { 3177 background-color: #fff; 3178 color: #191e23; 3179 box-shadow: inset 0 0 0 1px #6c7781, inset 0 0 0 2px #fff; 3180 outline: 2px solid transparent; } 3181 .components-range-control__slider::-webkit-slider-runnable-track { 3182 height: 3px; 3183 cursor: pointer; 3184 background: #e2e4e7; 3185 border-radius: 1.5px; 3186 margin-top: -4px; } 3187 .components-range-control__slider::-moz-range-track { 3188 height: 3px; 3189 cursor: pointer; 3190 background: #e2e4e7; 3191 border-radius: 1.5px; } 3192 .components-range-control__slider::-ms-track { 3193 margin-top: -4px; 3194 background: transparent; 3195 border-color: transparent; 3196 color: transparent; 3197 height: 3px; 3198 cursor: pointer; 3199 background: #e2e4e7; 3200 border-radius: 1.5px; } 3201 3202 .components-range-control__number { 3203 display: inline-block; 3204 margin-left: 8px; 3205 font-weight: 500; 3206 width: 54px; } 3207 3208 .components-resizable-box__handle { 3209 display: none; 3210 width: 23px; 3211 height: 23px; } 3212 .components-resizable-box__container.is-selected .components-resizable-box__handle { 3213 display: block; } 3214 3215 .components-resizable-box__handle::after { 3216 display: block; 3217 content: ""; 3218 width: 15px; 3219 height: 15px; 3220 border: 2px solid #fff; 3221 border-radius: 50%; 3222 background: #0085ba; 3223 cursor: inherit; 3224 position: absolute; 3225 top: calc(50% - 8px); 3226 right: calc(50% - 8px); } 3227 3228 body.admin-color-sunrise .components-resizable-box__handle::after { 3229 background: #d1864a; } 3230 3231 body.admin-color-ocean .components-resizable-box__handle::after { 3232 background: #a3b9a2; } 3233 3234 body.admin-color-midnight .components-resizable-box__handle::after { 3235 background: #e14d43; } 3236 3237 body.admin-color-ectoplasm .components-resizable-box__handle::after { 3238 background: #a7b656; } 3239 3240 body.admin-color-coffee .components-resizable-box__handle::after { 3241 background: #c2a68c; } 3242 3243 body.admin-color-blue .components-resizable-box__handle::after { 3244 background: #82b4cb; } 3245 3246 body.admin-color-light .components-resizable-box__handle::after { 3247 background: #0085ba; } 3248 3249 .components-resizable-box__side-handle::before { 3250 display: block; 3251 content: ""; 3252 width: 7px; 3253 height: 7px; 3254 border: 2px solid #fff; 3255 background: #0085ba; 3256 cursor: inherit; 3257 position: absolute; 3258 top: calc(50% - 4px); 3259 right: calc(50% - 4px); 3260 transition: transform 0.1s ease-in; 3261 opacity: 0; } 3262 3263 body.admin-color-sunrise .components-resizable-box__side-handle::before { 3264 background: #d1864a; } 3265 3266 body.admin-color-ocean .components-resizable-box__side-handle::before { 3267 background: #a3b9a2; } 3268 3269 body.admin-color-midnight .components-resizable-box__side-handle::before { 3270 background: #e14d43; } 3271 3272 body.admin-color-ectoplasm .components-resizable-box__side-handle::before { 3273 background: #a7b656; } 3274 3275 body.admin-color-coffee .components-resizable-box__side-handle::before { 3276 background: #c2a68c; } 3277 3278 body.admin-color-blue .components-resizable-box__side-handle::before { 3279 background: #82b4cb; } 3280 3281 body.admin-color-light .components-resizable-box__side-handle::before { 3282 background: #0085ba; } 3283 @media (prefers-reduced-motion: reduce) { 3284 .components-resizable-box__side-handle::before { 3285 transition-duration: 0s; } } 3286 3287 .is-dark-theme .components-resizable-box__side-handle::before, 3288 .is-dark-theme .components-resizable-box__handle::after { 3289 border-color: #d7dade; } 3290 3291 .components-resizable-box__side-handle { 3292 z-index: 1; } 3293 3294 .components-resizable-box__corner-handle { 3295 z-index: 2; } 3296 3297 .components-resizable-box__side-handle.components-resizable-box__handle-top, 3298 .components-resizable-box__side-handle.components-resizable-box__handle-bottom, 3299 .components-resizable-box__side-handle.components-resizable-box__handle-top::before, 3300 .components-resizable-box__side-handle.components-resizable-box__handle-bottom::before { 3301 width: 100%; 3302 left: 0; 3303 border-left: 0; 3304 border-right: 0; } 3305 3306 .components-resizable-box__side-handle.components-resizable-box__handle-left, 3307 .components-resizable-box__side-handle.components-resizable-box__handle-right, 3308 .components-resizable-box__side-handle.components-resizable-box__handle-left::before, 3309 .components-resizable-box__side-handle.components-resizable-box__handle-right::before { 3310 height: 100%; 3311 top: 0; 3312 border-top: 0; 3313 border-bottom: 0; } 3314 3315 .components-resizable-box__side-handle.components-resizable-box__handle-top:hover::before, 3316 .components-resizable-box__side-handle.components-resizable-box__handle-bottom:hover::before, 3317 .components-resizable-box__side-handle.components-resizable-box__handle-top:active::before, 3318 .components-resizable-box__side-handle.components-resizable-box__handle-bottom:active::before { 3319 animation: components-resizable-box__top-bottom-animation 0.1s ease-out 0s; 3320 animation-fill-mode: forwards; } 3321 @media (prefers-reduced-motion: reduce) { 3322 .components-resizable-box__side-handle.components-resizable-box__handle-top:hover::before, 3323 .components-resizable-box__side-handle.components-resizable-box__handle-bottom:hover::before, 3324 .components-resizable-box__side-handle.components-resizable-box__handle-top:active::before, 3325 .components-resizable-box__side-handle.components-resizable-box__handle-bottom:active::before { 3326 animation-duration: 1ms; } } 3327 3328 .components-resizable-box__side-handle.components-resizable-box__handle-left:hover::before, 3329 .components-resizable-box__side-handle.components-resizable-box__handle-right:hover::before, 3330 .components-resizable-box__side-handle.components-resizable-box__handle-left:active::before, 3331 .components-resizable-box__side-handle.components-resizable-box__handle-right:active::before { 3332 animation: components-resizable-box__left-right-animation 0.1s ease-out 0s; 3333 animation-fill-mode: forwards; } 3334 @media (prefers-reduced-motion: reduce) { 3335 .components-resizable-box__side-handle.components-resizable-box__handle-left:hover::before, 3336 .components-resizable-box__side-handle.components-resizable-box__handle-right:hover::before, 3337 .components-resizable-box__side-handle.components-resizable-box__handle-left:active::before, 3338 .components-resizable-box__side-handle.components-resizable-box__handle-right:active::before { 3339 animation-duration: 1ms; } } 3340 3341 @keyframes components-resizable-box__top-bottom-animation { 3342 from { 3343 transform: scaleX(0); 3344 opacity: 0; } 3345 to { 3346 transform: scaleX(1); 3347 opacity: 1; } } 3348 3349 @keyframes components-resizable-box__left-right-animation { 3350 from { 3351 transform: scaleY(0); 3352 opacity: 0; } 3353 to { 3354 transform: scaleY(1); 3355 opacity: 1; } } 3356 3357 /*!rtl:begin:ignore*/ 3358 .components-resizable-box__handle-right { 3359 right: calc(11.5px * -1); } 3360 3361 .components-resizable-box__handle-left { 3362 left: calc(11.5px * -1); } 3363 3364 .components-resizable-box__handle-top { 3365 top: calc(11.5px * -1); } 3366 3367 .components-resizable-box__handle-bottom { 3368 bottom: calc(11.5px * -1); } 3369 3370 /*!rtl:end:ignore*/ 3371 .components-responsive-wrapper { 3372 position: relative; 3373 max-width: 100%; } 3374 .components-responsive-wrapper, 3375 .components-responsive-wrapper > span { 3376 display: block; } 3377 3378 .components-responsive-wrapper__content { 3379 position: absolute; 3380 top: 0; 3381 right: 0; 3382 bottom: 0; 3383 left: 0; 3384 width: 100%; 3385 height: 100%; } 3386 3387 .components-sandbox { 3388 overflow: hidden; } 3389 3390 iframe.components-sandbox { 3391 width: 100%; } 3392 3393 html.lockscroll, 3394 body.lockscroll { 3395 overflow: hidden; } 3396 3397 .components-select-control__input { 3398 background: #fff; 3399 height: 36px; 3400 line-height: 36px; 3401 margin: 1px; 3402 outline: 0; 3403 width: 100%; 3404 -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important; } 3405 @media (min-width: 782px) { 3406 .components-select-control__input { 3407 height: 28px; 3408 line-height: 28px; } } 3409 3410 @media (max-width: 782px) { 3411 .components-base-control .components-base-control__field .components-select-control__input { 3412 font-size: 16px; } } 3413 3414 .components-snackbar { 3415 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 3416 font-size: 13px; 3417 background-color: #32373c; 3418 border-radius: 4px; 3419 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); 3420 color: #fff; 3421 padding: 16px 24px; 3422 width: 100%; 3423 max-width: 600px; 3424 box-sizing: border-box; 3425 cursor: pointer; } 3426 @media (min-width: 600px) { 3427 .components-snackbar { 3428 width: -webkit-fit-content; 3429 width: fit-content; } } 3430 .components-snackbar:hover { 3431 background-color: #191e23; } 3432 .components-snackbar:focus { 3433 background-color: #191e23; 3434 box-shadow: 0 0 0 1px #fff, 0 0 0 3px #007cba; } 3435 3436 .components-snackbar__action.components-button { 3437 margin-left: 32px; 3438 color: #fff; 3439 height: auto; 3440 flex-shrink: 0; 3441 line-height: 1.4; 3442 padding: 0; } 3443 .components-snackbar__action.components-button:not(:disabled):not([aria-disabled="true"]):not(.is-default) { 3444 text-decoration: underline; 3445 background-color: transparent; } 3446 .components-snackbar__action.components-button:not(:disabled):not([aria-disabled="true"]):not(.is-default):focus { 3447 color: #fff; 3448 box-shadow: none; 3449 outline: 1px dotted #fff; } 3450 .components-snackbar__action.components-button:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover { 3451 color: #33b3db; } 3452 3453 .components-snackbar__content { 3454 display: flex; 3455 align-items: baseline; 3456 justify-content: space-between; 3457 line-height: 1.4; } 3458 3459 .components-snackbar-list { 3460 position: absolute; 3461 z-index: 100000; 3462 width: 100%; 3463 box-sizing: border-box; } 3464 3465 .components-snackbar-list__notice-container { 3466 position: relative; 3467 padding-top: 8px; } 3468 3469 .components-spinner { 3470 display: inline-block; 3471 background-color: #7e8993; 3472 width: 18px; 3473 height: 18px; 3474 opacity: 0.7; 3475 float: right; 3476 margin: 5px 11px 0; 3477 border-radius: 100%; 3478 position: relative; } 3479 .components-spinner::before { 3480 /* rtl:begin:ignore */ 3481 content: ""; 3482 position: absolute; 3483 background-color: #fff; 3484 top: 3px; 3485 left: 3px; 3486 width: 4px; 3487 height: 4px; 3488 border-radius: 100%; 3489 transform-origin: 6px 6px; 3490 animation: components-spinner__animation 1s infinite linear; 3491 /* rtl:end:ignore */ } 3492 3493 @keyframes components-spinner__animation { 3494 from { 3495 transform: rotate(0deg); } 3496 to { 3497 transform: rotate(360deg); } } 3498 3499 .components-text-control__input { 3500 width: 100%; 3501 padding: 6px 8px; } 3502 3503 .components-textarea-control__input { 3504 width: 100%; 3505 padding: 6px 8px; } 3506 3507 .components-tip { 3508 display: flex; 3509 color: #555d66; } 3510 .components-tip svg { 3511 -ms-grid-row-align: center; 3512 align-self: center; 3513 fill: #f0b849; 3514 flex-shrink: 0; 3515 margin-right: 16px; } 3516 .components-tip p { 3517 margin: 0; } 3518 3519 .components-toggle-control .components-base-control__field { 3520 display: flex; 3521 margin-bottom: 12px; } 3522 .components-toggle-control .components-base-control__field .components-form-toggle { 3523 margin-right: 16px; } 3524 .components-toggle-control .components-base-control__field .components-toggle-control__label { 3525 display: block; 3526 margin-bottom: 4px; } 3527 3528 .components-toolbar { 3529 margin: 0; 3530 border: 1px solid #e2e4e7; 3531 background-color: #fff; 3532 display: inline-flex; 3533 flex-shrink: 0; } 3534 @supports ((position: -webkit-sticky) or (position: sticky)) { 3535 .components-toolbar { 3536 display: flex; } } 3537 3538 div.components-toolbar > div { 3539 display: block; 3540 margin: 0; } 3541 @supports ((position: -webkit-sticky) or (position: sticky)) { 3542 div.components-toolbar > div { 3543 display: flex; } } 3544 3545 div.components-toolbar > div + div { 3546 margin-left: -3px; } 3547 div.components-toolbar > div + div.has-left-divider { 3548 margin-left: 6px; 3549 position: relative; 3550 overflow: visible; } 3551 div.components-toolbar > div + div.has-left-divider::before { 3552 display: inline-block; 3553 content: ""; 3554 box-sizing: content-box; 3555 background-color: #e2e4e7; 3556 position: absolute; 3557 top: 8px; 3558 left: -3px; 3559 width: 1px; 3560 height: 20px; } 3561 3562 .components-toolbar__control.components-button { 3563 display: inline-flex; 3564 align-items: flex-end; 3565 margin: 0; 3566 padding: 3px; 3567 outline: none; 3568 cursor: pointer; 3569 position: relative; 3570 width: 36px; 3571 height: 36px; } 3572 .components-toolbar__control.components-button:not([aria-disabled="true"]):not(.is-default):active, .components-toolbar__control.components-button:not([aria-disabled="true"]):hover, .components-toolbar__control.components-button:not([aria-disabled="true"]):focus { 3573 outline: none; 3574 box-shadow: none; 3575 background: none; 3576 border: none; } 3577 .components-toolbar__control.components-button:disabled { 3578 cursor: default; } 3579 .components-toolbar__control.components-button > svg { 3580 padding: 5px; 3581 border-radius: 4px; 3582 height: 30px; 3583 width: 30px; } 3584 .components-toolbar__control.components-button[data-subscript] svg { 3585 padding: 5px 10px 5px 0; } 3586 .components-toolbar__control.components-button[data-subscript]::after { 3587 content: attr(data-subscript); 3588 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 3589 font-size: 13px; 3590 font-weight: 600; 3591 line-height: 12px; 3592 position: absolute; 3593 right: 8px; 3594 bottom: 10px; } 3595 .components-toolbar__control.components-button:not(:disabled):not([aria-disabled="true"]):hover { 3596 box-shadow: none; } 3597 .components-toolbar__control.components-button:not(:disabled).is-active > svg, 3598 .components-toolbar__control.components-button:not(:disabled):hover > svg { 3599 color: #555d66; 3600 box-shadow: inset 0 0 0 1px #555d66, inset 0 0 0 2px #fff; } 3601 .components-toolbar__control.components-button:not(:disabled).is-active > svg { 3602 outline: none; 3603 color: #fff; 3604 box-shadow: none; 3605 background: #555d66; } 3606 .components-toolbar__control.components-button:not(:disabled).is-active[data-subscript]::after { 3607 color: #fff; } 3608 .components-toolbar__control.components-button:not(:disabled):focus > svg { 3609 box-shadow: inset 0 0 0 1px #555d66, inset 0 0 0 2px #fff; 3610 outline: 2px solid transparent; 3611 outline: 0; } 3612 .components-toolbar__control.components-button:not(:disabled).is-active { 3613 outline: 1px dotted transparent; 3614 outline-offset: -2px; } 3615 .components-toolbar__control.components-button:not(:disabled):focus { 3616 outline: 2px solid transparent; } 3617 3618 .components-toolbar__control .dashicon { 3619 display: block; } 3620 3621 .components-tooltip.components-popover { 3622 z-index: 1000002; } 3623 .components-tooltip.components-popover::before { 3624 border-color: transparent; } 3625 .components-tooltip.components-popover.is-top::after { 3626 border-top-color: #191e23; } 3627 .components-tooltip.components-popover.is-bottom::after { 3628 border-bottom-color: #191e23; } 3629 .components-tooltip.components-popover:not(.is-mobile) .components-popover__content { 3630 min-width: 0; } 3631 3632 .components-tooltip .components-popover__content { 3633 padding: 4px 12px; 3634 background: #191e23; 3635 border-width: 0; 3636 color: #fff; 3637 white-space: nowrap; 3638 text-align: center; } 3639 3640 .components-tooltip__shortcut { 3641 display: block; 3642 color: #7e8993; }
title
Description
Body
title
Description
Body
title
Description
Body
title
Body
| Generated: Sat Nov 23 20:47:33 2019 | Cross-referenced by PHPXref 0.7 |