~canonical-sysadmins/wordpress/5.0.2

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"] {

318

background-image: linear-gradient(-45deg, #d1864a 28%, rgb(146, 94, 52) 28%, rgb(146, 94, 52) 72%, #d1864a 72%);

319

border-color: rgb(105, 67, 37); }

320

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"] {

321

background-image: linear-gradient(-45deg, #a3b9a2 28%, rgb(114, 130, 113) 28%, rgb(114, 130, 113) 72%, #a3b9a2 72%);

322

border-color: rgb(82, 93, 81); }

323

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"] {

324

background-image: linear-gradient(-45deg, #e14d43 28%, rgb(158, 54, 47) 28%, rgb(158, 54, 47) 72%, #e14d43 72%);

325

border-color: rgb(113, 39, 34); }

326

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"] {

327

background-image: linear-gradient(-45deg, #a7b656 28%, rgb(117, 127, 60) 28%, rgb(117, 127, 60) 72%, #a7b656 72%);

328

border-color: rgb(84, 91, 43); }

329

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"] {

330

background-image: linear-gradient(-45deg, #c2a68c 28%, rgb(136, 116, 98) 28%, rgb(136, 116, 98) 72%, #c2a68c 72%);

331

border-color: rgb(97, 83, 70); }

332

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"] {

333

background-image: linear-gradient(-45deg, #82b4cb 28%, rgb(91, 126, 142) 28%, rgb(91, 126, 142) 72%, #82b4cb 72%);

334

border-color: rgb(65, 90, 102); }

335

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"] {

336

background-image: linear-gradient(-45deg, #0085ba 28%, rgb(0, 93, 130) 28%, rgb(0, 93, 130) 72%, #0085ba 72%);

337

border-color: rgb(0, 67, 93); }

338

.components-button.is-link {

339

margin: 0;

340

padding: 0;

341

box-shadow: none;

342

border: 0;

343

border-radius: 0;

344

background: none;

345

outline: none;

346

text-align: left;

347

/* Mimics the default link style in common.css */

348

color: #0073aa;

349

text-decoration: underline;

350

transition-property: border, background, color;

351

transition-duration: 0.05s;

352

transition-timing-function: ease-in-out; }

353

.components-button.is-link:hover, .components-button.is-link:active {

354

color: #00a0d2; }

355

.components-button.is-link:focus {

356

color: #124964;

357

box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, 0.8); }

358

.components-button.is-link.is-destructive {

359

color: #d94f4f; }

360

.components-button:active {

361

color: currentColor; }

362

.components-button:disabled, .components-button[aria-disabled="true"] {

363

cursor: default;

364

opacity: 0.3; }

365

.components-button:focus:enabled {

366

background-color: #fff;

367

color: #191e23;

368

box-shadow: inset 0 0 0 1px #6c7781, inset 0 0 0 2px #fff;

369

outline: 2px solid transparent;

370

outline-offset: -2px; }

371

.components-button.is-busy {

372

animation: components-button__busy-animation 2500ms infinite linear;

373

background-size: 100px 100%;

374

background-image: repeating-linear-gradient(-45deg, #e2e4e7, #fff 11px, #fff 10px, #e2e4e7 20px);

375

opacity: 1; }

376

.components-button.is-large {

377

height: 30px;

378

line-height: 28px;

379

padding: 0 12px 2px; }

380

.components-button.is-small {

381

height: 24px;

382

line-height: 22px;

383

padding: 0 8px 1px;

384

font-size: 11px; }

385

.components-button.is-tertiary {

386

color: #007cba;

387

padding: 0 10px;

388

line-height: 26px;

389

height: 28px; }

390

body.admin-color-sunrise .components-button.is-tertiary {

391

color: #837425; }

392

body.admin-color-ocean .components-button.is-tertiary {

393

color: #5e7d5e; }

394

body.admin-color-midnight .components-button.is-tertiary {

395

color: #497b8d; }

396

body.admin-color-ectoplasm .components-button.is-tertiary {

397

color: #523f6d; }

398

body.admin-color-coffee .components-button.is-tertiary {

399

color: #59524c; }

400

body.admin-color-blue .components-button.is-tertiary {

401

color: #417e9B; }

402

body.admin-color-light .components-button.is-tertiary {

403

color: #007cba; }

404

.components-button.is-tertiary .dashicon {

405

display: inline-block;

406

flex: 0 0 auto; }

407

.components-button.is-tertiary svg {

408

fill: currentColor;

409

outline: none; }

410

.components-button.is-tertiary:active:focus:enabled {

411

box-shadow: none; }

412

.components-button.is-tertiary:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover {

413

color: rgb(0, 93, 140); }

414

body.admin-color-sunrise .components-button.is-tertiary:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover {

415

color: rgb(98, 87, 28); }

416

body.admin-color-ocean .components-button.is-tertiary:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover {

417

color: rgb(71, 94, 71); }

418

body.admin-color-midnight .components-button.is-tertiary:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover {

419

color: rgb(55, 92, 106); }

420

body.admin-color-ectoplasm .components-button.is-tertiary:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover {

421

color: rgb(62, 47, 82); }

422

body.admin-color-coffee .components-button.is-tertiary:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover {

423

color: rgb(67, 62, 57); }

424

body.admin-color-blue .components-button.is-tertiary:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover {

425

color: rgb(49, 95, 116); }

426

body.admin-color-light .components-button.is-tertiary:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover {

427

color: rgb(0, 93, 140); }

428

429

@keyframes components-button__busy-animation {

430

0% {

431

background-position: 200px 0; } }

432

433

.components-checkbox-control__input[type="checkbox"] {

434

margin-top: 0; }

435

436

.component-color-indicator {

437

width: 25px;

438

height: 16px;

439

margin-left: 0.8rem;

440

border: 1px solid #dadada;

441

display: inline-block; }

442

.component-color-indicator + .component-color-indicator {

443

margin-left: 0.5rem; }

444

445

.components-color-palette {

446

margin-right: -14px; }

447

.components-color-palette .components-color-palette__clear {

448

float: right;

449

margin-right: 20px; }

450

451

.components-color-palette__item-wrapper {

452

display: inline-block;

453

height: 28px;

454

width: 28px;

455

margin-right: 14px;

456

margin-bottom: 14px;

457

vertical-align: top;

458

transform: scale(1);

459

transition: 100ms transform ease; }

460

.components-color-palette__item-wrapper:hover {

461

transform: scale(1.2); }

462

.components-color-palette__item-wrapper > div {

463

height: 100%;

464

width: 100%; }

465

466

.components-color-palette__item {

467

display: inline-block;

468

vertical-align: top;

469

height: 100%;

470

width: 100%;

471

border: none;

472

border-radius: 50%;

473

background: transparent;

474

box-shadow: inset 0 0 0 14px;

475

transition: 100ms box-shadow ease;

476

cursor: pointer; }

477

.components-color-palette__item.is-active {

478

box-shadow: inset 0 0 0 4px; }

479

.components-color-palette__item::after {

480

content: "";

481

position: absolute;

482

top: 0;

483

left: 0;

484

bottom: 0;

485

right: 0;

486

border-radius: 50%;

487

box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); }

488

.components-color-palette__item:focus {

489

outline: none; }

490

.components-color-palette__item:focus::after {

491

content: "";

492

border: 1px solid #606a73;

493

width: 32px;

494

height: 32px;

495

position: absolute;

496

top: -2px;

497

left: -2px;

498

border-radius: 50%; }

499

500

.components-color-palette__clear-color .components-color-palette__item {

501

color: #fff;

502

background: #fff; }

503

504

.components-color-palette__clear-color-line {

505

display: block;

506

position: absolute;

507

border: 2px solid #d94f4f;

508

border-radius: 50%;

509

top: 0;

510

left: 0;

511

bottom: 0;

512

right: 0; }

513

.components-color-palette__clear-color-line::before {

514

position: absolute;

515

top: 0;

516

left: 0;

517

content: "";

518

width: 100%;

519

height: 100%;

520

border-bottom: 2px solid #d94f4f;

521

transform: rotate(45deg) translateY(-13px) translateX(-1px); }

522

523

.components-color-palette__custom-color .components-color-palette__item {

524

position: relative;

525

box-shadow: none; }

526

527

.components-color-palette__custom-color .components-color-palette__custom-color-gradient {

528

display: block;

529

width: 100%;

530

height: 100%;

531

position: absolute;

532

top: 0;

533

left: 0;

534

border-radius: 50%;

535

overflow: hidden; }

536

537

.components-color-palette__custom-color .components-color-palette__custom-color-gradient::before {

538

content: "";

539

-webkit-filter: blur(6px) saturate(0.7) brightness(1.1);

540

filter: blur(6px) saturate(0.7) brightness(1.1);

541

display: block;

542

width: 200%;

543

height: 200%;

544

position: absolute;

545

top: -50%;

546

left: -50%;

547

padding-top: 100%;

548

transform: scale(1);

549

background-image: linear-gradient(330deg, transparent 50%, #ff8100 50%), linear-gradient(300deg, transparent 50%, #ff5800 50%), linear-gradient(270deg, transparent 50%, #c92323 50%), linear-gradient(240deg, transparent 50%, #cc42a2 50%), linear-gradient(210deg, transparent 50%, #9f49ac 50%), linear-gradient(180deg, transparent 50%, #306cd3 50%), linear-gradient(150deg, transparent 50%, #179067 50%), linear-gradient(120deg, transparent 50%, #0eb5d6 50%), linear-gradient(90deg, transparent 50%, #50b517 50%), linear-gradient(60deg, transparent 50%, #ede604 50%), linear-gradient(30deg, transparent 50%, #fc0 50%), linear-gradient(0deg, transparent 50%, #feac00 50%);

550

background-clip: content-box, content-box, content-box, content-box, content-box, content-box, padding-box, padding-box, padding-box, padding-box, padding-box, padding-box; }

551

552

.block-editor__container .components-popover.components-color-palette__picker.is-bottom {

553

z-index: 100001; }

554

555

/**

556

* Parts of this source were derived and modified from react-color,

557

* released under the MIT license.

558

559

* https://github.com/casesandberg/react-color/

560

561

562

563

* Permission is hereby granted, free of charge, to any person obtaining a copy

564

* of this software and associated documentation files (the "Software"), to deal

565

* in the Software without restriction, including without limitation the rights

566

* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell

567

* copies of the Software, and to permit persons to whom the Software is

568

* furnished to do so, subject to the following conditions:

569

570

* The above copyright notice and this permission notice shall be included in

571

* all copies or substantial portions of the Software.

572

573

* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR

574

* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,

575

* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE

576

* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER

577

* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,

578

* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN

579

* THE SOFTWARE.

580

581

.components-color-picker {

582

width: 100%;

583

overflow: hidden; }

584

585

.components-color-picker__saturation {

586

width: 100%;

587

padding-bottom: 55%;

588

position: relative; }

589

590

.components-color-picker__body {

591

padding: 16px 16px 12px; }

592

593

.components-color-picker__controls {

594

display: flex; }

595

596

.components-color-picker__saturation-pointer,

597

.components-color-picker__hue-pointer,

598

.components-color-picker__alpha-pointer {

599

padding: 0;

600

position: absolute;

601

cursor: pointer;

602

box-shadow: none;

603

border: none; }

604

605

/* CURRENT COLOR COMPONENT */

606

.components-color-picker__swatch {

607

margin-right: 8px;

608

width: 32px;

609

height: 32px;

610

border-radius: 50%;

611

position: relative;

612

overflow: hidden;

613

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%);

614

background-size: 10px 10px;

615

background-position: 0 0, 0 5px, 5px -5px, -5px 0; }

616

.is-alpha-disabled .components-color-picker__swatch {

617

width: 12px;

618

height: 12px;

619

margin-top: 0; }

620

621

.components-color-picker__active {

622

position: absolute;

623

top: 0;

624

left: 0;

625

right: 0;

626

bottom: 0;

627

border-radius: 50%;

628

box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);

629

z-index: 2; }

630

631

/* SATURATION COMPONENT */

632

.components-color-picker__saturation-color,

633

.components-color-picker__saturation-white,

634

.components-color-picker__saturation-black {

635

position: absolute;

636

top: 0;

637

left: 0;

638

right: 0;

639

bottom: 0; }

640

641

.components-color-picker__saturation-color {

642

overflow: hidden; }

643

644

.components-color-picker__saturation-white {

645

background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0)); }

646

647

.components-color-picker__saturation-black {

648

background: linear-gradient(to top, #000, rgba(0, 0, 0, 0)); }

649

650

.components-color-picker__saturation-pointer {

651

width: 8px;

652

height: 8px;

653

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);

654

border-radius: 50%;

655

background-color: transparent;

656

transform: translate(-4px, -4px); }

657

658

/* HUE & ALPHA BARS */

659

.components-color-picker__toggles {

660

flex: 1; }

661

662

.components-color-picker__alpha {

663

664

background-size: 10px 10px;

665

background-position: 0 0, 0 5px, 5px -5px, -5px 0; }

666

667

.components-color-picker__hue-gradient,

668

.components-color-picker__alpha-gradient {

669

position: absolute;

670

top: 0;

671

left: 0;

672

right: 0;

673

bottom: 0; }

674

675

.components-color-picker__hue,

676

.components-color-picker__alpha {

677

height: 12px;

678

position: relative; }

679

680

.is-alpha-enabled .components-color-picker__hue {

681

margin-bottom: 8px; }

682

683

.components-color-picker__hue-bar,

684

.components-color-picker__alpha-bar {

685

position: relative;

686

margin: 0 3px;

687

height: 100%;

688

padding: 0 2px; }

689

690

.components-color-picker__hue-gradient {

691

background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%); }

692

693

.components-color-picker__hue-pointer,

694

.components-color-picker__alpha-pointer {

695

left: 0;

696

width: 14px;

697

height: 14px;

698

border-radius: 50%;

699

box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);

700

background: #fff;

701

transform: translate(-7px, -1px); }

702

703

.components-color-picker__hue-pointer,

704

.components-color-picker__saturation-pointer {

705

transition: box-shadow 0.1s linear; }

706

707

.components-color-picker__saturation-pointer:focus {

708

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); }

709

710

.components-color-picker__hue-pointer:focus,

711

.components-color-picker__alpha-pointer:focus {

712

border-color: #00a0d2;

713

box-shadow: 0 0 0 2px #00a0d2, 0 0 3px 0 #00a0d2;

714

outline: 2px solid transparent;

715

outline-offset: -2px; }

716

717

/* INPUTS COMPONENT */

718

.components-color-picker__inputs-wrapper {

719

margin: 0 -4px;

720

padding-top: 16px;

721

display: flex;

722

align-items: flex-end; }

723

.components-color-picker__inputs-wrapper fieldset {

724

flex: 1; }

725

726

.components-color-picker__inputs-fields {

727

display: flex; }

728

.components-color-picker__inputs-fields .components-base-control__field {

729

margin: 0 4px; }

730

731

svg.dashicon {

732

fill: currentColor;

733

outline: none; }

734

735

.PresetDateRangePicker_panel {

736

padding: 0 22px 11px; }

737

738

.PresetDateRangePicker_button {

739

position: relative;

740

height: 100%;

741

text-align: center;

742

background: 0 0;

743

border: 2px solid #00a699;

744

color: #00a699;

745

padding: 4px 12px;

746

margin-right: 8px;

747

font: inherit;

748

font-weight: 700;

749

line-height: normal;

750

overflow: visible;

751

box-sizing: border-box;

752

cursor: pointer; }

753

754

.PresetDateRangePicker_button:active {

755

outline: 0; }

756

757

.PresetDateRangePicker_button__selected {

758

color: #fff;

759

background: #00a699; }

760

761

.SingleDatePickerInput {

762

display: inline-block;

763

background-color: #fff; }

764

765

.SingleDatePickerInput__withBorder {

766

border-radius: 2px;

767

border: 1px solid #dbdbdb; }

768

769

.SingleDatePickerInput__rtl {

770

direction: rtl; }

771

772

.SingleDatePickerInput__disabled {

773

background-color: #f2f2f2; }

774

775

.SingleDatePickerInput__block {

776

display: block; }

777

778

.SingleDatePickerInput__showClearDate {

779

padding-right: 30px; }

780

781

.SingleDatePickerInput_clearDate {

782

background: 0 0;

783

border: 0;

784

color: inherit;

785

font: inherit;

786

line-height: normal;

787

overflow: visible;

788

cursor: pointer;

789

padding: 10px;

790

margin: 0 10px 0 5px;

791

position: absolute;

792

right: 0;

793

top: 50%;

794

transform: translateY(-50%); }

795

796

.SingleDatePickerInput_clearDate__default:focus,

797

.SingleDatePickerInput_clearDate__default:hover {

798

background: #dbdbdb;

799

border-radius: 50%; }

800

801

.SingleDatePickerInput_clearDate__small {

802

padding: 6px; }

803

804

.SingleDatePickerInput_clearDate__hide {

805

visibility: hidden; }

806

807

.SingleDatePickerInput_clearDate_svg {

808

fill: #82888a;

809

height: 12px;

810

width: 15px;

811

vertical-align: middle; }

812

813

.SingleDatePickerInput_clearDate_svg__small {

814

height: 9px; }

815

816

.SingleDatePickerInput_calendarIcon {

817

background: 0 0;

818

border: 0;

819

color: inherit;

820

font: inherit;

821

line-height: normal;

822

overflow: visible;

823

cursor: pointer;

824

display: inline-block;

825

vertical-align: middle;

826

padding: 10px;

827

margin: 0 5px 0 10px; }

828

829

.SingleDatePickerInput_calendarIcon_svg {

830

fill: #82888a;

831

height: 15px;

832

width: 14px;

833

vertical-align: middle; }

834

835

.SingleDatePicker {

836

position: relative;

837

display: inline-block; }

838

839

.SingleDatePicker__block {

840

display: block; }

841

842

.SingleDatePicker_picker {

843

z-index: 1;

844

background-color: #fff;

845

position: absolute; }

846

847

.SingleDatePicker_picker__rtl {

848

direction: rtl; }

849

850

.SingleDatePicker_picker__directionLeft {

851

left: 0; }

852

853

.SingleDatePicker_picker__directionRight {

854

right: 0; }

855

856

.SingleDatePicker_picker__portal {

857

background-color: rgba(0, 0, 0, 0.3);

858

position: fixed;

859

top: 0;

860

left: 0;

861

height: 100%;

862

width: 100%; }

863

864

.SingleDatePicker_picker__fullScreenPortal {

865

background-color: #fff; }

866

867

.SingleDatePicker_closeButton {

868

background: 0 0;

869

border: 0;

870

color: inherit;

871

font: inherit;

872

line-height: normal;

873

overflow: visible;

874

cursor: pointer;

875

position: absolute;

876

top: 0;

877

right: 0;

878

padding: 15px;

879

z-index: 2; }

880

881

.SingleDatePicker_closeButton:focus,

882

.SingleDatePicker_closeButton:hover {

883

color: #b0b3b4;

884

text-decoration: none; }

885

886

.SingleDatePicker_closeButton_svg {

887

height: 15px;

888

width: 15px;

889

fill: #cacccd; }

890

891

.DayPickerKeyboardShortcuts_buttonReset {

892

background: 0 0;

893

border: 0;

894

border-radius: 0;

895

color: inherit;

896

font: inherit;

897

line-height: normal;

898

overflow: visible;

899

padding: 0;

900

cursor: pointer;

901

font-size: 14px; }

902

903

.DayPickerKeyboardShortcuts_buttonReset:active {

904

outline: 0; }

905

906

.DayPickerKeyboardShortcuts_show {

907

width: 22px;

908

position: absolute;

909

z-index: 2; }

910

911

.DayPickerKeyboardShortcuts_show__bottomRight {

912

border-top: 26px solid transparent;

913

border-right: 33px solid #00a699;

914

bottom: 0;

915

right: 0; }

916

917

.DayPickerKeyboardShortcuts_show__bottomRight:hover {

918

border-right: 33px solid #008489; }

919

920

.DayPickerKeyboardShortcuts_show__topRight {

921

border-bottom: 26px solid transparent;

922

border-right: 33px solid #00a699;

923

top: 0;

924

right: 0; }

925

926

.DayPickerKeyboardShortcuts_show__topRight:hover {

927

border-right: 33px solid #008489; }

928

929

.DayPickerKeyboardShortcuts_show__topLeft {

930

border-bottom: 26px solid transparent;

931

border-left: 33px solid #00a699;

932

top: 0;

933

left: 0; }

934

935

.DayPickerKeyboardShortcuts_show__topLeft:hover {

936

border-left: 33px solid #008489; }

937

938

.DayPickerKeyboardShortcuts_showSpan {

939

color: #fff;

940

position: absolute; }

941

942

.DayPickerKeyboardShortcuts_showSpan__bottomRight {

943

bottom: 0;

944

right: -28px; }

945

946

.DayPickerKeyboardShortcuts_showSpan__topRight {

947

top: 1px;

948

right: -28px; }

949

950

.DayPickerKeyboardShortcuts_showSpan__topLeft {

951

top: 1px;

952

left: -28px; }

953

954

.DayPickerKeyboardShortcuts_panel {

955

overflow: auto;

956

background: #fff;

957

border: 1px solid #dbdbdb;

958

border-radius: 2px;

959

position: absolute;

960

top: 0;

961

bottom: 0;

962

right: 0;

963

left: 0;

964

z-index: 2;

965

padding: 22px;

966

margin: 33px; }

967

968

.DayPickerKeyboardShortcuts_title {

969

font-size: 16px;

970

font-weight: 700;

971

margin: 0; }

972

973

.DayPickerKeyboardShortcuts_list {

974

list-style: none;

975

padding: 0;

976

font-size: 14px; }

977

978

.DayPickerKeyboardShortcuts_close {

979

position: absolute;

980

right: 22px;

981

top: 22px;

982

z-index: 2; }

983

984

.DayPickerKeyboardShortcuts_close:active {

985

outline: 0; }

986

987

.DayPickerKeyboardShortcuts_closeSvg {

988

height: 15px;

989

width: 15px;

990

fill: #cacccd; }

991

992

.DayPickerKeyboardShortcuts_closeSvg:focus,

993

.DayPickerKeyboardShortcuts_closeSvg:hover {

994

fill: #82888a; }

995

996

.CalendarDay {

997

box-sizing: border-box;

998

cursor: pointer;

999

font-size: 14px;

1000

text-align: center; }

1001

1002

.CalendarDay:active {

1003

outline: 0; }

1004

1005

.CalendarDay__defaultCursor {

1006

cursor: default; }

1007

1008

.CalendarDay__default {

1009

border: 1px solid #e4e7e7;

1010

color: #484848;

1011

background: #fff; }

1012

1013

.CalendarDay__default:hover {

1014

background: #e4e7e7;

1015

border: 1px double #e4e7e7;

1016

color: inherit; }

1017

1018

.CalendarDay__hovered_offset {

1019

background: #f4f5f5;

1020

border: 1px double #e4e7e7;

1021

color: inherit; }

1022

1023

.CalendarDay__outside {

1024

border: 0;

1025

background: #fff;

1026

color: #484848; }

1027

1028

.CalendarDay__outside:hover {

1029

border: 0; }

1030

1031

.CalendarDay__blocked_minimum_nights {

1032

background: #fff;

1033

border: 1px solid #eceeee;

1034

color: #cacccd; }

1035

1036

.CalendarDay__blocked_minimum_nights:active,

1037

.CalendarDay__blocked_minimum_nights:hover {

1038

background: #fff;

1039

color: #cacccd; }

1040

1041

.CalendarDay__highlighted_calendar {

1042

background: #ffe8bc;

1043

color: #484848; }

1044

1045

.CalendarDay__highlighted_calendar:active,

1046

.CalendarDay__highlighted_calendar:hover {

1047

background: #ffce71;

1048

color: #484848; }

1049

1050

.CalendarDay__selected_span {

1051

background: #66e2da;

1052

border: 1px solid #33dacd;

1053

color: #fff; }

1054

1055

.CalendarDay__selected_span:active,

1056

.CalendarDay__selected_span:hover {

1057

background: #33dacd;

1058

border: 1px solid #33dacd;

1059

color: #fff; }

1060

1061

.CalendarDay__last_in_range {

1062

border-right: #00a699; }

1063

1064

.CalendarDay__selected,

1065

.CalendarDay__selected:active,

1066

.CalendarDay__selected:hover {

1067

background: #00a699;

1068

border: 1px solid #00a699;

1069

color: #fff; }

1070

1071

.CalendarDay__hovered_span,

1072

.CalendarDay__hovered_span:hover {

1073

background: #b2f1ec;

1074

border: 1px solid #80e8e0;

1075

color: #007a87; }

1076

1077

.CalendarDay__hovered_span:active {

1078

background: #80e8e0;

1079

border: 1px solid #80e8e0;

1080

color: #007a87; }

1081

1082

.CalendarDay__blocked_calendar,

1083

.CalendarDay__blocked_calendar:active,

1084

.CalendarDay__blocked_calendar:hover {

1085

background: #cacccd;

1086

border: 1px solid #cacccd;

1087

color: #82888a; }

1088

1089

.CalendarDay__blocked_out_of_range,

1090

.CalendarDay__blocked_out_of_range:active,

1091

.CalendarDay__blocked_out_of_range:hover {

1092

background: #fff;

1093

border: 1px solid #e4e7e7;

1094

color: #cacccd; }

1095

1096

.CalendarMonth {

1097

background: #fff;

1098

text-align: center;

1099

vertical-align: top;

1100

-webkit-user-select: none;

1101

-moz-user-select: none;

1102

-ms-user-select: none;

1103

user-select: none; }

1104

1105

.CalendarMonth_table {

1106

border-collapse: collapse;

1107

border-spacing: 0; }

1108

1109

.CalendarMonth_verticalSpacing {

1110

border-collapse: separate; }

1111

1112

.CalendarMonth_caption {

1113

color: #484848;

1114

font-size: 18px;

1115

text-align: center;

1116

padding-top: 22px;

1117

padding-bottom: 37px;

1118

caption-side: initial; }

1119

1120

.CalendarMonth_caption__verticalScrollable {

1121

padding-top: 12px;

1122

padding-bottom: 7px; }

1123

1124

.CalendarMonthGrid {

1125

background: #fff;

1126

text-align: left;

1127

z-index: 0; }

1128

1129

.CalendarMonthGrid__animating {

1130

z-index: 1; }

1131

1132

.CalendarMonthGrid__horizontal {

1133

position: absolute;

1134

left: 9px; }

1135

1136

.CalendarMonthGrid__vertical {

1137

margin: 0 auto; }

1138

1139

.CalendarMonthGrid__vertical_scrollable {

1140

margin: 0 auto;

1141

overflow-y: scroll; }

1142

1143

.CalendarMonthGrid_month__horizontal {

1144

display: inline-block;

1145

vertical-align: top;

1146

min-height: 100%; }

1147

1148

.CalendarMonthGrid_month__hideForAnimation {

1149

position: absolute;

1150

z-index: -1;

1151

opacity: 0;

1152

pointer-events: none; }

1153

1154

.CalendarMonthGrid_month__hidden {

1155

visibility: hidden; }

1156

1157

.DayPickerNavigation {

1158

position: relative;

1159

z-index: 2; }

1160

1161

.DayPickerNavigation__horizontal {

1162

height: 0; }

1163

1164

.DayPickerNavigation__verticalDefault {

1165

position: absolute;

1166

width: 100%;

1167

height: 52px;

1168

bottom: 0;

1169

left: 0; }

1170

1171

.DayPickerNavigation__verticalScrollableDefault {

1172

position: relative; }

1173

1174

.DayPickerNavigation_button {

1175

cursor: pointer;

1176

-webkit-user-select: none;

1177

-moz-user-select: none;

1178

-ms-user-select: none;

1179

user-select: none;

1180

border: 0;

1181

padding: 0;

1182

margin: 0; }

1183

1184

.DayPickerNavigation_button__default {

1185

border: 1px solid #e4e7e7;

1186

background-color: #fff;

1187

color: #757575; }

1188

1189

.DayPickerNavigation_button__default:focus,

1190

.DayPickerNavigation_button__default:hover {

1191

border: 1px solid #c4c4c4; }

1192

1193

.DayPickerNavigation_button__default:active {

1194

background: #f2f2f2; }

1195

1196

.DayPickerNavigation_button__horizontalDefault {

1197

position: absolute;

1198

top: 18px;

1199

line-height: .78;

1200

border-radius: 3px;

1201

padding: 6px 9px; }

1202

1203

.DayPickerNavigation_leftButton__horizontalDefault {

1204

left: 22px; }

1205

1206

.DayPickerNavigation_rightButton__horizontalDefault {

1207

right: 22px; }

1208

1209

.DayPickerNavigation_button__verticalDefault {

1210

padding: 5px;

1211

background: #fff;

1212

box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1);

1213

position: relative;

1214

display: inline-block;

1215

height: 100%;

1216

width: 50%; }

1217

1218

.DayPickerNavigation_nextButton__verticalDefault {

1219

border-left: 0; }

1220

1221

.DayPickerNavigation_nextButton__verticalScrollableDefault {

1222

width: 100%; }

1223

1224

.DayPickerNavigation_svg__horizontal {

1225

height: 19px;

1226

width: 19px;

1227

fill: #82888a;

1228

display: block; }

1229

1230

.DayPickerNavigation_svg__vertical {

1231

height: 42px;

1232

width: 42px;

1233

fill: #484848;

1234

display: block; }

1235

1236

.DayPicker {

1237

background: #fff;

1238

position: relative;

1239

text-align: left; }

1240

1241

.DayPicker__horizontal {

1242

background: #fff; }

1243

1244

.DayPicker__verticalScrollable {

1245

height: 100%; }

1246

1247

.DayPicker__hidden {

1248

visibility: hidden; }

1249

1250

.DayPicker__withBorder {

1251

box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.07);

1252

border-radius: 3px; }

1253

1254

.DayPicker_portal__horizontal {

1255

box-shadow: none;

1256

position: absolute;

1257

left: 50%;

1258

top: 50%; }

1259

1260

.DayPicker_portal__vertical {

1261

position: initial; }

1262

1263

.DayPicker_focusRegion {

1264

outline: 0; }

1265

1266

.DayPicker_calendarInfo__horizontal,

1267

.DayPicker_wrapper__horizontal {

1268

display: inline-block;

1269

vertical-align: top; }

1270

1271

.DayPicker_weekHeaders {

1272

position: relative; }

1273

1274

.DayPicker_weekHeaders__horizontal {

1275

margin-left: 9px; }

1276

1277

.DayPicker_weekHeader {

1278

color: #757575;

1279

position: absolute;

1280

top: 62px;

1281

z-index: 2;

1282

text-align: left; }

1283

1284

.DayPicker_weekHeader__vertical {

1285

left: 50%; }

1286

1287

.DayPicker_weekHeader__verticalScrollable {

1288

top: 0;

1289

display: table-row;

1290

border-bottom: 1px solid #dbdbdb;

1291

background: #fff;

1292

margin-left: 0;

1293

left: 0;

1294

width: 100%;

1295

text-align: center; }

1296

1297

.DayPicker_weekHeader_ul {

1298

list-style: none;

1299

margin: 1px 0;

1300

padding-left: 0;

1301

padding-right: 0;

1302

font-size: 14px; }

1303

1304

.DayPicker_weekHeader_li {

1305

display: inline-block;

1306

text-align: center; }

1307

1308

.DayPicker_transitionContainer {

1309

position: relative;

1310

overflow: hidden;

1311

border-radius: 3px; }

1312

1313

.DayPicker_transitionContainer__horizontal {

1314

transition: height .2s ease-in-out; }

1315

1316

.DayPicker_transitionContainer__vertical {

1317

width: 100%; }

1318

1319

.DayPicker_transitionContainer__verticalScrollable {

1320

padding-top: 20px;

1321

height: 100%;

1322

position: absolute;

1323

top: 0;

1324

bottom: 0;

1325

right: 0;

1326

left: 0;

1327

overflow-y: scroll; }

1328

1329

.DateInput {

1330

margin: 0;

1331

padding: 0;

1332

background: #fff;

1333

position: relative;

1334

display: inline-block;

1335

width: 130px;

1336

vertical-align: middle; }

1337

1338

.DateInput__small {

1339

width: 97px; }

1340

1341

.DateInput__block {

1342

width: 100%; }

1343

1344

.DateInput__disabled {

1345

background: #f2f2f2;

1346

color: #dbdbdb; }

1347

1348

.DateInput_input {

1349

font-weight: 200;

1350

font-size: 19px;

1351

line-height: 24px;

1352

color: #484848;

1353

background-color: #fff;

1354

width: 100%;

1355

padding: 11px 11px 9px;

1356

border: 0;

1357

border-top: 0;

1358

border-right: 0;

1359

border-bottom: 2px solid transparent;

1360

border-left: 0;

1361

border-radius: 0; }

1362

1363

.DateInput_input__small {

1364

font-size: 15px;

1365

line-height: 18px;

1366

letter-spacing: .2px;

1367

padding: 7px 7px 5px; }

1368

1369

.DateInput_input__regular {

1370

font-weight: auto; }

1371

1372

.DateInput_input__readOnly {

1373

-webkit-user-select: none;

1374

-moz-user-select: none;

1375

-ms-user-select: none;

1376

user-select: none; }

1377

1378

.DateInput_input__focused {

1379

outline: 0;

1380

background: #fff;

1381

border: 0;

1382

border-top: 0;

1383

border-right: 0;

1384

border-bottom: 2px solid #008489;

1385

border-left: 0; }

1386

1387

.DateInput_input__disabled {

1388

background: #f2f2f2;

1389

font-style: italic; }

1390

1391

.DateInput_screenReaderMessage {

1392

border: 0;

1393

clip: rect(0, 0, 0, 0);

1394

height: 1px;

1395

margin: -1px;

1396

overflow: hidden;

1397

padding: 0;

1398

position: absolute;

1399

width: 1px; }

1400

1401

.DateInput_fang {

1402

position: absolute;

1403

width: 20px;

1404

height: 10px;

1405

left: 22px;

1406

z-index: 2; }

1407

1408

.DateInput_fangShape {

1409

fill: #fff; }

1410

1411

.DateInput_fangStroke {

1412

stroke: #dbdbdb;

1413

fill: transparent; }

1414

1415

.DateRangePickerInput {

1416

background-color: #fff;

1417

display: inline-block; }

1418

1419

.DateRangePickerInput__disabled {

1420

background: #f2f2f2; }

1421

1422

.DateRangePickerInput__withBorder {

1423

border-radius: 2px;

1424

border: 1px solid #dbdbdb; }

1425

1426

.DateRangePickerInput__rtl {

1427

direction: rtl; }

1428

1429

.DateRangePickerInput__block {

1430

display: block; }

1431

1432

.DateRangePickerInput__showClearDates {

1433

padding-right: 30px; }

1434

1435

.DateRangePickerInput_arrow {

1436

display: inline-block;

1437

vertical-align: middle;

1438

color: #484848; }

1439

1440

.DateRangePickerInput_arrow_svg {

1441

vertical-align: middle;

1442

fill: #484848;

1443

height: 24px;

1444

width: 24px; }

1445

1446

.DateRangePickerInput_clearDates {

1447

background: 0 0;

1448

border: 0;

1449

color: inherit;

1450

font: inherit;

1451

line-height: normal;

1452

overflow: visible;

1453

cursor: pointer;

1454

padding: 10px;

1455

margin: 0 10px 0 5px;

1456

position: absolute;

1457

right: 0;

1458

top: 50%;

1459

transform: translateY(-50%); }

1460

1461

.DateRangePickerInput_clearDates__small {

1462

padding: 6px; }

1463

1464

.DateRangePickerInput_clearDates_default:focus,

1465

.DateRangePickerInput_clearDates_default:hover {

1466

background: #dbdbdb;

1467

border-radius: 50%; }

1468

1469

.DateRangePickerInput_clearDates__hide {

1470

visibility: hidden; }

1471

1472

.DateRangePickerInput_clearDates_svg {

1473

fill: #82888a;

1474

height: 12px;

1475

width: 15px;

1476

vertical-align: middle; }

1477

1478

.DateRangePickerInput_clearDates_svg__small {

1479

height: 9px; }

1480

1481

.DateRangePickerInput_calendarIcon {

1482

background: 0 0;

1483

border: 0;

1484

color: inherit;

1485

font: inherit;

1486

line-height: normal;

1487

overflow: visible;

1488

cursor: pointer;

1489

display: inline-block;

1490

vertical-align: middle;

1491

padding: 10px;

1492

margin: 0 5px 0 10px; }

1493

1494

.DateRangePickerInput_calendarIcon_svg {

1495

fill: #82888a;

1496

height: 15px;

1497

width: 14px;

1498

vertical-align: middle; }

1499

1500

.DateRangePicker {

1501

position: relative;

1502

display: inline-block; }

1503

1504

.DateRangePicker__block {

1505

display: block; }

1506

1507

.DateRangePicker_picker {

1508

z-index: 1;

1509

background-color: #fff;

1510

position: absolute; }

1511

1512

.DateRangePicker_picker__rtl {

1513

direction: rtl; }

1514

1515

.DateRangePicker_picker__directionLeft {

1516

left: 0; }

1517

1518

.DateRangePicker_picker__directionRight {

1519

right: 0; }

1520

1521

.DateRangePicker_picker__portal {

1522

background-color: rgba(0, 0, 0, 0.3);

1523

position: fixed;

1524

top: 0;

1525

left: 0;

1526

height: 100%;

1527

width: 100%; }

1528

1529

.DateRangePicker_picker__fullScreenPortal {

1530

background-color: #fff; }

1531

1532

.DateRangePicker_closeButton {

1533

background: 0 0;

1534

border: 0;

1535

color: inherit;

1536

font: inherit;

1537

line-height: normal;

1538

overflow: visible;

1539

cursor: pointer;

1540

position: absolute;

1541

top: 0;

1542

right: 0;

1543

padding: 15px;

1544

z-index: 2; }

1545

1546

.DateRangePicker_closeButton:focus,

1547

.DateRangePicker_closeButton:hover {

1548

color: #b0b3b4;

1549

text-decoration: none; }

1550

1551

.DateRangePicker_closeButton_svg {

1552

height: 15px;

1553

width: 15px;

1554

fill: #cacccd; }

1555

1556

.components-datetime .components-datetime__calendar-help {

1557

padding: 8px; }

1558

.components-datetime .components-datetime__calendar-help h4 {

1559

margin: 0; }

1560

1561

.components-datetime .components-datetime__date-help-button {

1562

display: block;

1563

margin-left: auto;

1564

margin-right: 8px;

1565

margin-top: 0.5em; }

1566

1567

.components-datetime__date {

1568

min-height: 236px;

1569

border-top: 1px solid #e2e4e7;

1570

margin-left: -8px;

1571

margin-right: -8px; }

1572

.components-datetime__date .CalendarMonth_caption {

1573

font-size: 13px; }

1574

.components-datetime__date .CalendarDay {

1575

font-size: 13px;

1576

border: 1px solid transparent;

1577

border-radius: 50%;

1578

text-align: center; }

1579

.components-datetime__date .CalendarDay__selected {

1580

background: #0085ba; }

1581

body.admin-color-sunrise .components-datetime__date .CalendarDay__selected {

1582

background: #d1864a; }

1583

body.admin-color-ocean .components-datetime__date .CalendarDay__selected {

1584

background: #a3b9a2; }

1585

body.admin-color-midnight .components-datetime__date .CalendarDay__selected {

1586

background: #e14d43; }

1587

body.admin-color-ectoplasm .components-datetime__date .CalendarDay__selected {

1588

background: #a7b656; }

1589

body.admin-color-coffee .components-datetime__date .CalendarDay__selected {

1590

background: #c2a68c; }

1591

body.admin-color-blue .components-datetime__date .CalendarDay__selected {

1592

background: #82b4cb; }

1593

body.admin-color-light .components-datetime__date .CalendarDay__selected {

1594

background: #0085ba; }

1595

.components-datetime__date .CalendarDay__selected:hover {

1596

background: rgb(0, 113, 158); }

1597

body.admin-color-sunrise .components-datetime__date .CalendarDay__selected:hover {

1598

background: rgb(178, 114, 63); }

1599

body.admin-color-ocean .components-datetime__date .CalendarDay__selected:hover {

1600

background: rgb(139, 157, 138); }

1601

body.admin-color-midnight .components-datetime__date .CalendarDay__selected:hover {

1602

background: rgb(191, 65, 57); }

1603

body.admin-color-ectoplasm .components-datetime__date .CalendarDay__selected:hover {

1604

background: rgb(142, 155, 73); }

1605

body.admin-color-coffee .components-datetime__date .CalendarDay__selected:hover {

1606

background: rgb(165, 141, 119); }

1607

body.admin-color-blue .components-datetime__date .CalendarDay__selected:hover {

1608

background: rgb(111, 153, 173); }

1609

body.admin-color-light .components-datetime__date .CalendarDay__selected:hover {

1610

background: rgb(0, 113, 158); }

1611

.components-datetime__date .DayPickerNavigation_button__horizontalDefault {

1612

padding: 2px 8px;

1613

top: 20px; }

1614

.components-datetime__date .DayPicker_weekHeader {

1615

top: 50px; }

1616

.components-datetime__date.is-description-visible .DayPicker,

1617

.components-datetime__date.is-description-visible .components-datetime__date-help-button {

1618

visibility: hidden; }

1619

1620

.components-datetime__time {

1621

margin-bottom: 1em; }

1622

.components-datetime__time fieldset {

1623

margin-top: 0.5em;

1624

position: relative; }

1625

.components-datetime__time .components-datetime__time-field-am-pm fieldset {

1626

margin-top: 0; }

1627

.components-datetime__time .components-datetime__time-wrapper {

1628

display: flex; }

1629

.components-datetime__time .components-datetime__time-wrapper .components-datetime__time-separator {

1630

display: inline-block;

1631

padding: 0 3px 0 0;

1632

color: #555d66; }

1633

.components-datetime__time .components-datetime__time-wrapper .components-datetime__time-am-button {

1634

margin-left: 8px;

1635

margin-right: -1px;

1636

border-radius: 3px 0 0 3px; }

1637

.components-datetime__time .components-datetime__time-wrapper .components-datetime__time-pm-button {

1638

margin-left: -1px;

1639

border-radius: 0 3px 3px 0; }

1640

.components-datetime__time .components-datetime__time-wrapper .components-datetime__time-am-button.is-toggled,

1641

.components-datetime__time .components-datetime__time-wrapper .components-datetime__time-pm-button.is-toggled {

1642

background: #edeff0;

1643

border-color: #8f98a1;

1644

box-shadow: inset 0 2px 5px -3px #555d66; }

1645

.components-datetime__time .components-datetime__time-wrapper .components-datetime__time-field {

1646

align-self: center;

1647

flex: 0 1 auto;

1648

order: 1; }

1649

.components-datetime__time .components-datetime__time-wrapper .components-datetime__time-field.am-pm button {

1650

font-size: 11px;

1651

font-weight: 600; }

1652

.components-datetime__time .components-datetime__time-wrapper .components-datetime__time-field select {

1653

padding: 2px;

1654

margin-right: 4px; }

1655

.components-datetime__time .components-datetime__time-wrapper .components-datetime__time-field select:focus {

1656

position: relative;

1657

z-index: 1; }

1658

.components-datetime__time .components-datetime__time-wrapper .components-datetime__time-field input[type="number"] {

1659

padding: 2px;

1660

margin-right: 4px;

1661

width: 40px;

1662

text-align: center;

1663

-moz-appearance: textfield; }

1664

.components-datetime__time .components-datetime__time-wrapper .components-datetime__time-field input[type="number"]:focus {

1665

position: relative;

1666

z-index: 1; }

1667

.components-datetime__time .components-datetime__time-wrapper .components-datetime__time-field input[type="number"]::-webkit-inner-spin-button {

1668

-webkit-appearance: none;

1669

margin: 0; }

1670

.components-datetime__time.is-12-hour .components-datetime__time-field-day input {

1671

margin: 0 -4px 0 0 !important;

1672

border-radius: 4px 0 0 4px !important; }

1673

.components-datetime__time.is-12-hour .components-datetime__time-field-year input {

1674

border-radius: 0 4px 4px 0 !important; }

1675

.components-datetime__time.is-24-hour .components-datetime__time-field-day {

1676

order: 0 !important; }

1677

1678

.components-datetime__time-legend {

1679

font-weight: 600;

1680

margin-top: 0.5em; }

1681

.components-datetime__time-legend.invisible {

1682

position: absolute;

1683

top: -999em;

1684

left: -999em; }

1685

1686

.components-datetime__time-field-hours-input,

1687

.components-datetime__time-field-minutes-input,

1688

.components-datetime__time-field-day-input {

1689

width: 35px; }

1690

1691

.components-datetime__time-field-year-input {

1692

width: 55px; }

1693

1694

.components-datetime__time-field-month-select {

1695

width: 90px; }

1696

1697

.components-popover .components-datetime__date {

1698

padding-left: 6px; }

1699

1700

.components-popover.edit-post-post-schedule__dialog.is-bottom.is-left {

1701

z-index: 100000; }

1702

1703

.components-disabled {

1704

position: relative;

1705

pointer-events: none; }

1706

.components-disabled::after {

1707

content: "";

1708

position: absolute;

1709

top: 0;

1710

right: 0;

1711

bottom: 0;

1712

left: 0; }

1713

.components-disabled * {

1714

pointer-events: none; }

1715

1716

body.is-dragging-components-draggable {

1717

cursor: move;

1718

/* Fallback for IE/Edge < 14 */

1719

cursor: -webkit-grabbing !important;

1720

cursor: grabbing !important; }

1721

1722

.components-draggable__invisible-drag-image {

1723

position: fixed;

1724

left: -1000px;

1725

height: 50px;

1726

width: 50px; }

1727

1728

.components-draggable__clone {

1729

position: fixed;

1730

padding: 20px;

1731

background: transparent;

1732

pointer-events: none;

1733

z-index: 1000000000;

1734

opacity: 0.8; }

1735

1736

.components-drop-zone {

1737

position: absolute;

1738

top: 0;

1739

right: 0;

1740

bottom: 0;

1741

left: 0;

1742

z-index: 100;

1743

visibility: hidden;

1744

opacity: 0;

1745

transition: 0.3s opacity, 0.3s background-color, 0s visibility 0.3s;

1746

border: 2px solid #0071a1;

1747

border-radius: 2px; }

1748

.components-drop-zone.is-active {

1749

opacity: 1;

1750

visibility: visible;

1751

transition: 0.3s opacity, 0.3s background-color; }

1752

.components-drop-zone.is-dragging-over-element {

1753

background-color: rgba(0, 113, 161, 0.8); }

1754

.components-drop-zone.is-dragging-over-element .components-drop-zone__content {

1755

display: block; }

1756

1757

.components-drop-zone__content {

1758

position: absolute;

1759

top: 50%;

1760

left: 0;

1761

right: 0;

1762

z-index: 110;

1763

transform: translateY(-50%);

1764

width: 100%;

1765

text-align: center;

1766

color: #fff;

1767

transition: transform 0.2s ease-in-out;

1768

display: none; }

1769

1770

.components-drop-zone.is-dragging-over-element .components-drop-zone__content {

1771

transform: translateY(-50%) scale(1.05); }

1772

1773

.components-drop-zone__content-icon,

1774

.components-drop-zone__content-text {

1775

display: block; }

1776

1777

.components-drop-zone__content-icon {

1778

margin: 0 auto;

1779

line-height: 0; }

1780

1781

.components-drop-zone__content-text {

1782

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; }

1783

1784

.components-drop-zone__provider {

1785

height: 100%; }

1786

1787

.components-dropdown-menu {

1788

padding: 3px;

1789

display: flex; }

1790

.components-dropdown-menu .components-dropdown-menu__toggle {

1791

width: auto;

1792

margin: 0;

1793

padding: 4px;

1794

border: 1px solid transparent;

1795

display: flex;

1796

flex-direction: row; }

1797

.components-dropdown-menu .components-dropdown-menu__toggle.is-active, .components-dropdown-menu .components-dropdown-menu__toggle.is-active:hover {

1798

box-shadow: none;

1799

background-color: #555d66;

1800

color: #fff; }

1801

.components-dropdown-menu .components-dropdown-menu__toggle:focus::before {

1802

top: -3px;

1803

right: -3px;

1804

bottom: -3px;

1805

left: -3px; }

1806

.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 {

1807

color: #555d66;

1808

box-shadow: inset 0 0 0 1px #555d66, inset 0 0 0 2px #fff; }

1809

.components-dropdown-menu .components-dropdown-menu__toggle .components-dropdown-menu__indicator::after {

1810

content: "";

1811

pointer-events: none;

1812

display: block;

1813

width: 0;

1814

height: 0;

1815

border-left: 3px solid transparent;

1816

border-right: 3px solid transparent;

1817

border-top: 5px solid currentColor;

1818

margin-left: 4px;

1819

margin-right: 2px; }

1820

1821

.components-dropdown-menu__popover .components-popover__content {

1822

width: 200px; }

1823

1824

.components-dropdown-menu__menu {

1825

width: 100%;

1826

padding: 9px;

1827

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

1828

font-size: 13px;

1829

line-height: 1.4; }

1830

.components-dropdown-menu__menu .components-dropdown-menu__menu-item {

1831

width: 100%;

1832

padding: 6px;

1833

outline: none;

1834

cursor: pointer;

1835

margin-bottom: 4px; }

1836

.components-dropdown-menu__menu .components-dropdown-menu__menu-item.has-separator {

1837

margin-top: 6px;

1838

position: relative;

1839

overflow: visible; }

1840

.components-dropdown-menu__menu .components-dropdown-menu__menu-item.has-separator::before {

1841

display: block;

1842

content: "";

1843

box-sizing: content-box;

1844

background-color: #e2e4e7;

1845

position: absolute;

1846

top: -3px;

1847

left: 0;

1848

right: 0;

1849

height: 1px; }

1850

.components-dropdown-menu__menu .components-dropdown-menu__menu-item:focus:not(:disabled):not([aria-disabled="true"]):not(.is-default) {

1851

color: #191e23;

1852

border: none;

1853

box-shadow: none;

1854

outline-offset: -2px;

1855

outline: 1px dotted #555d66; }

1856

.components-dropdown-menu__menu .components-dropdown-menu__menu-item > svg {

1857

border-radius: 4px;

1858

padding: 2px;

1859

width: 24px;

1860

height: 24px;

1861

margin: -1px 8px -1px 0; }

1862

.components-dropdown-menu__menu .components-dropdown-menu__menu-item:not(:disabled):not([aria-disabled="true"]):not(.is-default).is-active > svg {

1863

outline: none;

1864

color: #fff;

1865

box-shadow: none;

1866

background: #555d66; }

1867

1868

.components-external-link__icon {

1869

width: 1.4em;

1870

height: 1.4em;

1871

margin: -0.2em 0.1em 0;

1872

vertical-align: middle; }

1873

1874

.components-font-size-picker__buttons {

1875

display: flex;

1876

justify-content: space-between;

1877

align-items: center; }

1878

.components-font-size-picker__buttons .components-range-control__number {

1879

height: 24px;

1880

line-height: 22px; }

1881

.components-font-size-picker__buttons .components-range-control__number[value=""] + .components-button {

1882

cursor: default;

1883

opacity: 0.3;

1884

pointer-events: none; }

1885

1886

.components-font-size-picker__custom-input .components-range-control__slider + .dashicon {

1887

width: 30px;

1888

height: 30px; }

1889

1890

.components-font-size-picker__dropdown-content .components-button {

1891

display: block;

1892

position: relative;

1893

padding: 10px 20px 10px 40px;

1894

width: 100%;

1895

text-align: left; }

1896

.components-font-size-picker__dropdown-content .components-button .dashicon {

1897

position: absolute;

1898

top: calc(50% - 10px);

1899

left: 10px; }

1900

1901

.components-font-size-picker__buttons .components-font-size-picker__selector {

1902

border: 1px solid;

1903

background: none;

1904

position: relative;

1905

width: 110px;

1906

box-shadow: 0 0 0 transparent;

1907

transition: box-shadow 0.1s linear;

1908

border-radius: 4px;

1909

border: 1px solid #8d96a0; }

1910

.components-font-size-picker__buttons .components-font-size-picker__selector:focus {

1911

color: #191e23;

1912

border-color: #00a0d2;

1913

box-shadow: 0 0 0 1px #00a0d2;

1914

outline: 2px solid transparent;

1915

outline-offset: -2px; }

1916

.components-font-size-picker__buttons .components-font-size-picker__selector::after {

1917

content: "";

1918

pointer-events: none;

1919

display: block;

1920

width: 0;

1921

height: 0;

1922

border-left: 3px solid transparent;

1923

border-right: 3px solid transparent;

1924

border-top: 5px solid currentColor;

1925

margin-left: 4px;

1926

margin-right: 2px;

1927

right: 8px;

1928

top: 12px;

1929

position: absolute; }

1930

1931

.components-form-file-upload .components-button.is-large {

1932

padding-left: 6px; }

1933

1934

.components-form-toggle {

1935

position: relative; }

1936

.components-form-toggle .components-form-toggle__on,

1937

.components-form-toggle .components-form-toggle__off {

1938

position: absolute;

1939

top: 6px; }

1940

.components-form-toggle .components-form-toggle__off {

1941

color: #6c7781;

1942

fill: currentColor;

1943

right: 6px; }

1944

.components-form-toggle .components-form-toggle__on {

1945

left: 8px; }

1946

.components-form-toggle .components-form-toggle__track {

1947

content: "";

1948

display: inline-block;

1949

vertical-align: top;

1950

background-color: #fff;

1951

border: 2px solid #6c7781;

1952

width: 36px;

1953

height: 18px;

1954

border-radius: 9px;

1955

transition: 0.2s background ease; }

1956

.components-form-toggle .components-form-toggle__thumb {

1957

display: block;

1958

position: absolute;

1959

top: 4px;

1960

left: 4px;

1961

width: 10px;

1962

height: 10px;

1963

border-radius: 50%;

1964

transition: 0.1s transform ease;

1965

background-color: #6c7781;

1966

border: 5px solid #6c7781; }

1967

.components-form-toggle:hover .components-form-toggle__track {

1968

border: 2px solid #555d66; }

1969

.components-form-toggle:hover .components-form-toggle__thumb {

1970

background-color: #555d66;

1971

border: 5px solid #6c7781; }

1972

.components-form-toggle:hover .components-form-toggle__off {

1973

color: #555d66; }

1974

.components-form-toggle.is-checked .components-form-toggle__track {

1975

background-color: #11a0d2;

1976

border: 2px solid #11a0d2;

1977

border: 9px solid transparent; }

1978

body.admin-color-sunrise .components-form-toggle.is-checked .components-form-toggle__track {

1979

background-color: #c8b03c;

1980

border: 2px solid #c8b03c; }

1981

body.admin-color-ocean .components-form-toggle.is-checked .components-form-toggle__track {

1982

background-color: #a3b9a2;

1983

border: 2px solid #a3b9a2; }

1984

body.admin-color-midnight .components-form-toggle.is-checked .components-form-toggle__track {

1985

background-color: #77a6b9;

1986

border: 2px solid #77a6b9; }

1987

body.admin-color-ectoplasm .components-form-toggle.is-checked .components-form-toggle__track {

1988

background-color: #a7b656;

1989

border: 2px solid #a7b656; }

1990

body.admin-color-coffee .components-form-toggle.is-checked .components-form-toggle__track {

1991

background-color: #c2a68c;

1992

border: 2px solid #c2a68c; }

1993

body.admin-color-blue .components-form-toggle.is-checked .components-form-toggle__track {

1994

background-color: #82b4cb;

1995

border: 2px solid #82b4cb; }

1996

body.admin-color-light .components-form-toggle.is-checked .components-form-toggle__track {

1997

background-color: #11a0d2;

1998

border: 2px solid #11a0d2; }

1999

.components-form-toggle__input:focus + .components-form-toggle__track {

2000

box-shadow: 0 0 0 2px #fff, 0 0 0 3px #6c7781;

2001

outline: 2px solid transparent;

2002

outline-offset: 2px; }

2003

.components-form-toggle.is-checked .components-form-toggle__thumb {

2004

background-color: #fff;

2005

border-width: 0;

2006

transform: translateX(18px); }

2007

.components-form-toggle.is-checked::before {

2008

background-color: #11a0d2;

2009

border: 2px solid #11a0d2; }

2010

body.admin-color-sunrise .components-form-toggle.is-checked::before {

2011

background-color: #c8b03c;

2012

border: 2px solid #c8b03c; }

2013

body.admin-color-ocean .components-form-toggle.is-checked::before {

2014

background-color: #a3b9a2;

2015

border: 2px solid #a3b9a2; }

2016

body.admin-color-midnight .components-form-toggle.is-checked::before {

2017

background-color: #77a6b9;

2018

border: 2px solid #77a6b9; }

2019

body.admin-color-ectoplasm .components-form-toggle.is-checked::before {

2020

background-color: #a7b656;

2021

border: 2px solid #a7b656; }

2022

body.admin-color-coffee .components-form-toggle.is-checked::before {

2023

background-color: #c2a68c;

2024

border: 2px solid #c2a68c; }

2025

body.admin-color-blue .components-form-toggle.is-checked::before {

2026

background-color: #82b4cb;

2027

border: 2px solid #82b4cb; }

2028

body.admin-color-light .components-form-toggle.is-checked::before {

2029

background-color: #11a0d2;

2030

border: 2px solid #11a0d2; }

2031

.components-disabled .components-form-toggle {

2032

opacity: 0.3; }

2033

2034

.components-form-toggle input.components-form-toggle__input[type="checkbox"] {

2035

position: absolute;

2036

top: 0;

2037

left: 0;

2038

width: 100%;

2039

height: 100%;

2040

opacity: 0;

2041

margin: 0;

2042

padding: 0;

2043

z-index: 1;

2044

border: none; }

2045

.components-form-toggle input.components-form-toggle__input[type="checkbox"]:checked {

2046

background: none; }

2047

.components-form-toggle input.components-form-toggle__input[type="checkbox"]::before {

2048

content: ""; }

2049

2050

.components-form-toggle .components-form-toggle__on {

2051

outline: 1px solid transparent;

2052

outline-offset: -1px;

2053

border: 1px solid #000;

2054

-webkit-filter: invert(100%) contrast(500%);

2055

filter: invert(100%) contrast(500%); }

2056

2057

@supports (-ms-high-contrast-adjust: auto) {

2058

.components-form-toggle .components-form-toggle__on {

2059

-webkit-filter: none;

2060

filter: none;

2061

border: 1px solid #fff; } }

2062

2063

.components-form-token-field__input-container {

2064

display: flex;

2065

flex-wrap: wrap;

2066

align-items: flex-start;

2067

width: 100%;

2068

margin: 0;

2069

padding: 4px;

2070

background-color: #fff;

2071

border: 1px solid #ccd0d4;

2072

color: #32373c;

2073

cursor: text;

2074

box-shadow: 0 0 0 transparent;

2075

transition: box-shadow 0.1s linear;

2076

border-radius: 4px;

2077

border: 1px solid #8d96a0; }

2078

.components-form-token-field__input-container.is-disabled {

2079

background: #e2e4e7;

2080

border-color: #ccd0d4; }

2081

.components-form-token-field__input-container.is-active {

2082

color: #191e23;

2083

border-color: #00a0d2;

2084

box-shadow: 0 0 0 1px #00a0d2;

2085

outline: 2px solid transparent;

2086

outline-offset: -2px; }

2087

.components-form-token-field__input-container input[type="text"].components-form-token-field__input {

2088

display: inline-block;

2089

width: 100%;

2090

max-width: 100%;

2091

margin: 2px 0 2px 8px;

2092

padding: 0;

2093

min-height: 24px;

2094

background: inherit;

2095

border: 0;

2096

font-size: 13px;

2097

color: #23282d;

2098

box-shadow: none; }

2099

.components-form-token-field__input-container input[type="text"].components-form-token-field__input:focus,

2100

.components-form-token-field.is-active .components-form-token-field__input-container input[type="text"].components-form-token-field__input {

2101

outline: none;

2102

box-shadow: none; }

2103

.components-form-token-field__input-container .components-form-token-field__token + input[type="text"].components-form-token-field__input {

2104

width: auto; }

2105

2106

.components-form-token-field__label {

2107

display: inline-block;

2108

margin-bottom: 4px; }

2109

2110

.components-form-token-field__token {

2111

font-size: 13px;

2112

display: flex;

2113

margin: 2px 4px 2px 0;

2114

color: #32373c;

2115

overflow: hidden; }

2116

.components-form-token-field__token.is-success .components-form-token-field__token-text,

2117

.components-form-token-field__token.is-success .components-form-token-field__remove-token {

2118

background: #4ab866; }

2119

.components-form-token-field__token.is-error .components-form-token-field__token-text,

2120

.components-form-token-field__token.is-error .components-form-token-field__remove-token {

2121

background: #d94f4f; }

2122

.components-form-token-field__token.is-validating .components-form-token-field__token-text,

2123

.components-form-token-field__token.is-validating .components-form-token-field__remove-token {

2124

color: #555d66; }

2125

.components-form-token-field__token.is-borderless {

2126

position: relative;

2127

padding: 0 16px 0 0; }

2128

.components-form-token-field__token.is-borderless .components-form-token-field__token-text {

2129

background: transparent;

2130

color: #11a0d2; }

2131

body.admin-color-sunrise .components-form-token-field__token.is-borderless .components-form-token-field__token-text {

2132

color: #c8b03c; }

2133

body.admin-color-ocean .components-form-token-field__token.is-borderless .components-form-token-field__token-text {

2134

color: #a89d8a; }

2135

body.admin-color-midnight .components-form-token-field__token.is-borderless .components-form-token-field__token-text {

2136

color: #77a6b9; }

2137

body.admin-color-ectoplasm .components-form-token-field__token.is-borderless .components-form-token-field__token-text {

2138

color: #c77430; }

2139

body.admin-color-coffee .components-form-token-field__token.is-borderless .components-form-token-field__token-text {

2140

color: #9fa47b; }

2141

body.admin-color-blue .components-form-token-field__token.is-borderless .components-form-token-field__token-text {

2142

color: #d9ab59; }

2143

body.admin-color-light .components-form-token-field__token.is-borderless .components-form-token-field__token-text {

2144

color: #c75726; }

2145

.components-form-token-field__token.is-borderless .components-form-token-field__remove-token {

2146

background: transparent;

2147

color: #555d66;

2148

position: absolute;

2149

top: 1px;

2150

right: 0; }

2151

.components-form-token-field__token.is-borderless.is-success .components-form-token-field__token-text {

2152

color: #4ab866; }

2153

.components-form-token-field__token.is-borderless.is-error .components-form-token-field__token-text {

2154

color: #d94f4f;

2155

border-radius: 4px 0 0 4px;

2156

padding: 0 4px 0 6px; }

2157

.components-form-token-field__token.is-borderless.is-validating .components-form-token-field__token-text {

2158

color: #23282d; }

2159

.components-form-token-field__token.is-disabled .components-form-token-field__remove-token {

2160

cursor: default; }

2161

2162

.components-form-token-field__token-text,

2163

.components-form-token-field__remove-token.components-icon-button {

2164

display: inline-block;

2165

line-height: 24px;

2166

background: #e2e4e7;

2167

transition: all 0.2s cubic-bezier(0.4, 1, 0.4, 1); }

2168

2169

.components-form-token-field__token-text {

2170

border-radius: 12px 0 0 12px;

2171

padding: 0 4px 0 8px;

2172

white-space: nowrap;

2173

overflow: hidden;

2174

text-overflow: ellipsis; }

2175

2176

.components-form-token-field__remove-token.components-icon-button {

2177

cursor: pointer;

2178

border-radius: 0 12px 12px 0;

2179

padding: 0 2px;

2180

color: #555d66;

2181

line-height: 10px;

2182

overflow: initial; }

2183

.components-form-token-field__remove-token.components-icon-button:hover {

2184

color: #32373c; }

2185

2186

.components-form-token-field__suggestions-list {

2187

flex: 1 0 100%;

2188

min-width: 100%;

2189

max-height: 9em;

2190

overflow-y: scroll;

2191

transition: all 0.15s ease-in-out;

2192

list-style: none;

2193

border-top: 1px solid #6c7781;

2194

margin: 4px -4px -4px;

2195

padding-top: 3px; }

2196

2197

.components-form-token-field__suggestion {

2198

color: #555d66;

2199

display: block;

2200

font-size: 13px;

2201

padding: 4px 8px;

2202

cursor: pointer; }

2203

.components-form-token-field__suggestion.is-selected {

2204

background: #0071a1;

2205

color: #fff; }

2206

2207

.components-form-token-field__suggestion-match {

2208

text-decoration: underline; }

2209

2210

.components-navigate-regions.is-focusing-regions [role="region"]:focus::after {

2211

content: "";

2212

position: absolute;

2213

top: 0;

2214

bottom: 0;

2215

left: 0;

2216

right: 0;

2217

pointer-events: none;

2218

outline: 4px solid transparent;

2219

animation: editor-animation__region-focus 0.2s ease-out;

2220

animation-fill-mode: forwards; }

2221

2222

@keyframes editor-animation__region-focus {

2223

from {

2224

box-shadow: inset 0 0 0 0 #33b3db; }

2225

to {

2226

box-shadow: inset 0 0 0 4px #33b3db; } }

2227

2228

.components-icon-button {

2229

display: flex;

2230

align-items: center;

2231

padding: 8px;

2232

margin: 0;

2233

border: none;

2234

background: none;

2235

color: #555d66;

2236

position: relative;

2237

overflow: hidden;

2238

border-radius: 4px; }

2239

.components-icon-button .dashicon {

2240

display: inline-block;

2241

flex: 0 0 auto; }

2242

.components-icon-button svg {

2243

fill: currentColor;

2244

outline: none; }

2245

.components-icon-button svg:not:only-child {

2246

margin-right: 4px; }

2247

.components-icon-button:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover {

2248

background-color: #fff;

2249

color: #191e23;

2250

box-shadow: inset 0 0 0 1px #e2e4e7, inset 0 0 0 2px #fff, 0 1px 1px rgba(25, 30, 35, 0.2); }

2251

.components-icon-button:not(:disabled):not([aria-disabled="true"]):not(.is-default):active {

2252

outline: none;

2253

background-color: #fff;

2254

color: #191e23;

2255

box-shadow: inset 0 0 0 1px #ccd0d4, inset 0 0 0 2px #fff; }

2256

.components-icon-button[aria-disabled="true"]:focus, .components-icon-button:disabled:focus {

2257

box-shadow: none; }

2258

2259

.components-menu-group {

2260

width: 100%;

2261

padding: 7px; }

2262

2263

.components-menu-group__label {

2264

margin-bottom: 8px;

2265

color: #6c7781; }

2266

2267

.components-menu-item__button,

2268

.components-menu-item__button.components-icon-button {

2269

width: 100%;

2270

padding: 8px;

2271

text-align: left;

2272

color: #40464d; }

2273

.components-menu-item__button .dashicon,

2274

.components-menu-item__button .components-menu-items__item-icon,

2275

.components-menu-item__button > span > svg,

2276

.components-menu-item__button.components-icon-button .dashicon,

2277

.components-menu-item__button.components-icon-button .components-menu-items__item-icon,

2278

.components-menu-item__button.components-icon-button > span > svg {

2279

margin-right: 4px; }

2280

.components-menu-item__button .components-menu-items__item-icon,

2281

.components-menu-item__button.components-icon-button .components-menu-items__item-icon {

2282

display: inline-block;

2283

flex: 0 0 auto; }

2284

.components-menu-item__button:hover:not(:disabled):not([aria-disabled="true"]),

2285

.components-menu-item__button.components-icon-button:hover:not(:disabled):not([aria-disabled="true"]) {

2286

color: #555d66; }

2287

@media (min-width: 782px) {

2288

.components-menu-item__button:hover:not(:disabled):not([aria-disabled="true"]),

2289

.components-menu-item__button.components-icon-button:hover:not(:disabled):not([aria-disabled="true"]) {

2290

color: #191e23;

2291

border: none;

2292

box-shadow: none; } }

2293

.components-menu-item__button:focus:not(:disabled):not([aria-disabled="true"]),

2294

.components-menu-item__button.components-icon-button:focus:not(:disabled):not([aria-disabled="true"]) {

2295

color: #191e23;

2296

border: none;

2297

box-shadow: none;

2298

outline-offset: -2px;

2299

outline: 1px dotted #555d66; }

2300

2301

.components-menu-item__info-wrapper {

2302

display: flex;

2303

flex-direction: column; }

2304

2305

.components-menu-item__info {

2306

margin-top: 4px;

2307

font-size: 12px;

2308

opacity: 0.82; }

2309

2310

.components-menu-item__shortcut {

2311

align-self: center;

2312

opacity: 0.5;

2313

margin-right: 0;

2314

margin-left: auto;

2315

padding-left: 8px;

2316

display: none; }

2317

@media (min-width: 480px) {

2318

.components-menu-item__shortcut {

2319

display: inline; } }

2320

2321

.components-modal__screen-overlay {

2322

position: fixed;

2323

top: 0;

2324

right: 0;

2325

bottom: 0;

2326

left: 0;

2327

background-color: rgba(255, 255, 255, 0.4);

2328

z-index: 100000;

2329

animation: edit-post__fade-in-animation 0.2s ease-out 0s;

2330

animation-fill-mode: forwards; }

2331

2332

.components-modal__frame {

2333

position: absolute;

2334

top: 0;

2335

right: 0;

2336

bottom: 0;

2337

left: 0;

2338

box-sizing: border-box;

2339

margin: 0;

2340

border: 1px solid #e2e4e7;

2341

background: #fff;

2342

box-shadow: 0 3px 30px rgba(25, 30, 35, 0.2);

2343

overflow: auto; }

2344

@media (min-width: 600px) {

2345

.components-modal__frame {

2346

top: 50%;

2347

right: auto;

2348

bottom: auto;

2349

left: 50%;

2350

min-width: 360px;

2351

max-width: calc(100% - 16px - 16px);

2352

max-height: calc(100% - 56px - 56px);

2353

transform: translate(-50%, -50%);

2354

animation: components-modal__appear-animation 0.1s ease-out;

2355

animation-fill-mode: forwards; } }

2356

2357

@keyframes components-modal__appear-animation {

2358

from {

2359

margin-top: 32px; }

2360

to {

2361

margin-top: 0; } }

2362

2363

.components-modal__header {

2364

box-sizing: border-box;

2365

border-bottom: 1px solid #e2e4e7;

2366

padding: 0 16px;

2367

display: flex;

2368

flex-direction: row;

2369

justify-content: space-between;

2370

background: #fff;

2371

align-items: center;

2372

height: 56px;

2373

position: -webkit-sticky;

2374

position: sticky;

2375

top: 0;

2376

z-index: 10;

2377

margin: 0 -16px 16px; }

2378

@supports (-ms-ime-align: auto) {

2379

.components-modal__header {

2380

position: fixed;

2381

width: 100%; } }

2382

.components-modal__header .components-modal__header-heading {

2383

font-size: 1em;

2384

font-weight: 400; }

2385

.components-modal__header h1 {

2386

line-height: 1;

2387

margin: 0; }

2388

2389

.components-modal__header-heading-container {

2390

align-items: center;

2391

flex-grow: 1;

2392

display: flex;

2393

flex-direction: row;

2394

justify-content: left; }

2395

2396

.components-modal__header-icon-container {

2397

display: inline-block; }

2398

.components-modal__header-icon-container svg {

2399

max-width: 36px;

2400

max-height: 36px;

2401

padding: 8px; }

2402

2403

.components-modal__content {

2404

box-sizing: border-box;

2405

height: 100%;

2406

padding: 0 16px 16px; }

2407

@supports (-ms-ime-align: auto) {

2408

.components-modal__content {

2409

padding-top: 56px; } }

2410

2411

.components-notice {

2412

background-color: #e5f5fa;

2413

border-left: 4px solid #00a0d2;

2414

margin: 5px 15px 2px;

2415

padding: 8px 12px; }

2416

.components-notice.is-dismissible {

2417

padding-right: 36px;

2418

position: relative; }

2419

.components-notice.is-success {

2420

border-left-color: #4ab866;

2421

background-color: #eff9f1; }

2422

.components-notice.is-warning {

2423

border-left-color: #f0b849;

2424

background-color: #fef8ee; }

2425

.components-notice.is-error {

2426

border-left-color: #d94f4f;

2427

background-color: #f9e2e2; }

2428

2429

.components-notice__content {

2430

margin: 1em 0; }

2431

2432

.components-notice__action.components-button, .components-notice__action.components-button.is-link {

2433

margin-left: 4px; }

2434

2435

.components-notice__dismiss {

2436

position: absolute;

2437

top: 0;

2438

right: 0;

2439

color: #6c7781; }

2440

.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 {

2441

color: #d94f4f;

2442

background-color: transparent; }

2443

.components-notice__dismiss:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover {

2444

box-shadow: none; }

2445

2446

.components-notice-list {

2447

min-width: 300px;

2448

z-index: 9989; }

2449

2450

.components-panel {

2451

background: #fff;

2452

border: 1px solid #e2e4e7; }

2453

.components-panel > .components-panel__header:first-child,

2454

.components-panel > .components-panel__body:first-child {

2455

margin-top: -1px; }

2456

.components-panel > .components-panel__header:last-child,

2457

.components-panel > .components-panel__body:last-child {

2458

border-bottom-width: 0; }

2459

2460

.components-panel + .components-panel {

2461

margin-top: -1px; }

2462

2463

.components-panel__body {

2464

border-top: 1px solid #e2e4e7;

2465

border-bottom: 1px solid #e2e4e7; }

2466

.components-panel__body h3 {

2467

margin: 0 0 0.5em; }

2468

.components-panel__body.is-opened {

2469

padding: 16px; }

2470

.components-panel__body > .components-icon-button {

2471

color: #191e23; }

2472

2473

.components-panel__header {

2474

display: flex;

2475

justify-content: space-between;

2476

align-items: center;

2477

padding: 0 16px;

2478

height: 50px;

2479

border-top: 1px solid #e2e4e7;

2480

border-bottom: 1px solid #e2e4e7; }

2481

.components-panel__header h2 {

2482

margin: 0;

2483

font-size: inherit;

2484

color: inherit; }

2485

2486

.components-panel__body + .components-panel__body,

2487

.components-panel__body + .components-panel__header,

2488

.components-panel__header + .components-panel__body,

2489

.components-panel__header + .components-panel__header {

2490

margin-top: -1px; }

2491

2492

.components-panel__body > .components-panel__body-title {

2493

display: block;

2494

padding: 0;

2495

font-size: inherit;

2496

margin-top: 0;

2497

margin-bottom: 0;

2498

transition: 0.1s background ease-in-out; }

2499

2500

.components-panel__body.is-opened > .components-panel__body-title {

2501

margin: -16px;

2502

margin-bottom: 5px; }

2503

2504

.components-panel__body > .components-panel__body-title:hover,

2505

.edit-post-last-revision__panel > .components-icon-button:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover {

2506

background: #f8f9f9; }

2507

2508

.components-panel__body-toggle.components-button {

2509

position: relative;

2510

padding: 15px;

2511

outline: none;

2512

width: 100%;

2513

font-weight: 600;

2514

text-align: left;

2515

color: #191e23;

2516

border: none;

2517

box-shadow: none;

2518

transition: 0.1s background ease-in-out;

2519

/* rtl:begin:ignore */

2520

/* rtl:end:ignore */ }

2521

.components-panel__body-toggle.components-button:focus:not(:disabled):not([aria-disabled="true"]) {

2522

color: #191e23;

2523

border: none;

2524

box-shadow: none;

2525

outline-offset: -2px;

2526

outline: 1px dotted #555d66; }

2527

.components-panel__body-toggle.components-button .components-panel__arrow {

2528

position: absolute;

2529

right: 10px;

2530

top: 50%;

2531

transform: translateY(-50%);

2532

color: #191e23;

2533

fill: currentColor;

2534

transition: 0.1s color ease-in-out; }

2535

body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right {

2536

transform: scaleX(-1);

2537

-ms-filter: fliph;

2538

-webkit-filter: FlipH;

2539

filter: FlipH;

2540

margin-top: -10px; }

2541

2542

.components-panel__icon {

2543

color: #555d66;

2544

margin: -2px 0 -2px 6px; }

2545

2546

.components-panel__body-toggle-icon {

2547

margin-right: -5px; }

2548

2549

.components-panel__color-title {

2550

float: left;

2551

height: 19px; }

2552

2553

.components-panel__row {

2554

display: flex;

2555

justify-content: space-between;

2556

align-items: center;

2557

margin-top: 20px; }

2558

.components-panel__row select {

2559

min-width: 0; }

2560

.components-panel__row label {

2561

margin-right: 10px;

2562

flex-shrink: 0;

2563

max-width: 75%; }

2564

.components-panel__row:empty, .components-panel__row:first-of-type {

2565

margin-top: 0; }

2566

2567

.components-panel .circle-picker {

2568

padding-bottom: 20px; }

2569

2570

.components-placeholder {

2571

margin: 0;

2572

display: flex;

2573

flex-direction: column;

2574

align-items: center;

2575

justify-content: center;

2576

padding: 1em;

2577

min-height: 200px;

2578

width: 100%;

2579

text-align: center;

2580

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

2581

font-size: 13px;

2582

background: rgba(139, 139, 150, 0.1); }

2583

.is-dark-theme .components-placeholder {

2584

background: rgba(255, 255, 255, 0.15); }

2585

2586

.components-placeholder__label {

2587

display: flex;

2588

justify-content: center;

2589

font-weight: 600;

2590

margin-bottom: 1em; }

2591

.components-placeholder__label .dashicon,

2592

.components-placeholder__label .editor-block-icon {

2593

margin-right: 1ch; }

2594

2595

.components-placeholder__fieldset,

2596

.components-placeholder__fieldset form {

2597

display: flex;

2598

flex-direction: row;

2599

justify-content: center;

2600

width: 100%;

2601

max-width: 400px;

2602

flex-wrap: wrap;

2603

z-index: 1; }

2604

.components-placeholder__fieldset p,

2605

.components-placeholder__fieldset form p {

2606

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

2607

font-size: 13px; }

2608

2609

.components-placeholder__input {

2610

margin-right: 8px;

2611

flex: 1 1 auto; }

2612

2613

.components-placeholder__instructions {

2614

margin-bottom: 1em; }

2615

2616

/*!rtl:begin:ignore*/

2617

.components-popover {

2618

position: fixed;

2619

z-index: 1000000;

2620

left: 50%; }

2621

.components-popover.is-mobile {

2622

top: 0;

2623

left: 0;

2624

right: 0;

2625

bottom: 0; }

2626

.components-popover:not(.is-without-arrow):not(.is-mobile) {

2627

margin-left: 2px; }

2628

.components-popover:not(.is-without-arrow):not(.is-mobile)::before {

2629

border: 8px solid #e2e4e7; }

2630

.components-popover:not(.is-without-arrow):not(.is-mobile)::after {

2631

border: 8px solid #fff; }

2632

.components-popover:not(.is-without-arrow):not(.is-mobile)::before, .components-popover:not(.is-without-arrow):not(.is-mobile)::after {

2633

content: "";

2634

position: absolute;

2635

height: 0;

2636

width: 0;

2637

line-height: 0; }

2638

.components-popover:not(.is-without-arrow):not(.is-mobile).is-top {

2639

margin-top: -8px; }

2640

.components-popover:not(.is-without-arrow):not(.is-mobile).is-top::before {

2641

bottom: -8px; }

2642

.components-popover:not(.is-without-arrow):not(.is-mobile).is-top::after {

2643

bottom: -6px; }

2644

.components-popover:not(.is-without-arrow):not(.is-mobile).is-top::before, .components-popover:not(.is-without-arrow):not(.is-mobile).is-top::after {

2645

border-bottom: none;

2646

border-left-color: transparent;

2647

border-right-color: transparent;

2648

border-top-style: solid;

2649

margin-left: -10px; }

2650

.components-popover:not(.is-without-arrow):not(.is-mobile).is-bottom {

2651

margin-top: 8px; }

2652

.components-popover:not(.is-without-arrow):not(.is-mobile).is-bottom::before {

2653

top: -8px; }

2654

.components-popover:not(.is-without-arrow):not(.is-mobile).is-bottom::after {

2655

top: -6px; }

2656

.components-popover:not(.is-without-arrow):not(.is-mobile).is-bottom::before, .components-popover:not(.is-without-arrow):not(.is-mobile).is-bottom::after {

2657

border-bottom-style: solid;

2658

border-left-color: transparent;

2659

border-right-color: transparent;

2660

border-top: none;

2661

margin-left: -10px; }

2662

.components-popover:not(.is-without-arrow):not(.is-mobile).is-middle.is-left {

2663

margin-left: -8px; }

2664

.components-popover:not(.is-without-arrow):not(.is-mobile).is-middle.is-left::before {

2665

right: -8px; }

2666

.components-popover:not(.is-without-arrow):not(.is-mobile).is-middle.is-left::after {

2667

right: -6px; }

2668

.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 {

2669

border-bottom-color: transparent;

2670

border-left-style: solid;

2671

border-right: none;

2672

border-top-color: transparent; }

2673

.components-popover:not(.is-without-arrow):not(.is-mobile).is-middle.is-right {

2674

margin-left: 8px; }

2675

.components-popover:not(.is-without-arrow):not(.is-mobile).is-middle.is-right::before {

2676

left: -8px; }

2677

.components-popover:not(.is-without-arrow):not(.is-mobile).is-middle.is-right::after {

2678

left: -6px; }

2679

.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 {

2680

border-bottom-color: transparent;

2681

border-left: none;

2682

border-right-style: solid;

2683

border-top-color: transparent; }

2684

.components-popover:not(.is-mobile).is-top {

2685

bottom: 100%; }

2686

.components-popover:not(.is-mobile).is-bottom {

2687

top: 100%;

2688

z-index: 99990; }

2689

.components-popover:not(.is-mobile).is-middle {

2690

align-items: center;

2691

display: flex; }

2692

2693

.components-popover__content {

2694

box-shadow: 0 3px 30px rgba(25, 30, 35, 0.1);

2695

border: 1px solid #e2e4e7;

2696

background: #fff;

2697

height: 100%; }

2698

.components-popover.is-mobile .components-popover__content {

2699

height: calc(100% - 50px);

2700

border-top: 0; }

2701

.components-popover:not(.is-mobile) .components-popover__content {

2702

position: absolute;

2703

height: auto;

2704

overflow-y: auto;

2705

min-width: 260px; }

2706

.components-popover:not(.is-mobile).is-top .components-popover__content {

2707

bottom: 100%; }

2708

.components-popover:not(.is-mobile).is-center .components-popover__content {

2709

left: 50%;

2710

transform: translateX(-50%); }

2711

.components-popover:not(.is-mobile).is-right .components-popover__content {

2712

position: absolute;

2713

left: 100%; }

2714

.components-popover:not(.is-mobile):not(.is-middle).is-right .components-popover__content {

2715

margin-left: -24px; }

2716

.components-popover:not(.is-mobile).is-left .components-popover__content {

2717

position: absolute;

2718

right: 100%; }

2719

.components-popover:not(.is-mobile):not(.is-middle).is-left .components-popover__content {

2720

margin-right: -24px; }

2721

2722

.components-popover__content > div {

2723

height: 100%; }

2724

2725

.components-popover__header {

2726

align-items: center;

2727

background: #fff;

2728

border: 1px solid #e2e4e7;

2729

display: flex;

2730

height: 50px;

2731

justify-content: space-between;

2732

padding: 0 8px 0 16px; }

2733

2734

.components-popover__header-title {

2735

overflow: hidden;

2736

text-overflow: ellipsis;

2737

white-space: nowrap;

2738

width: 100%; }

2739

2740

.components-popover__close.components-icon-button {

2741

z-index: 5; }

2742

2743

/*!rtl:end:ignore*/

2744

.components-radio-control {

2745

display: flex;

2746

flex-direction: column; }

2747

2748

.components-radio-control__option:not(:last-child) {

2749

margin-bottom: 4px; }

2750

2751

.components-radio-control__input[type="radio"] {

2752

margin-top: 0;

2753

margin-right: 6px; }

2754

2755

.components-range-control .components-base-control__field {

2756

display: flex;

2757

justify-content: center;

2758

flex-wrap: wrap;

2759

align-items: center; }

2760

2761

.components-range-control .dashicon {

2762

flex-shrink: 0;

2763

margin-right: 10px; }

2764

2765

.components-range-control .components-base-control__label {

2766

width: 100%; }

2767

2768

.components-range-control .components-range-control__slider {

2769

margin-left: 0;

2770

flex: 1; }

2771

2772

.components-range-control__slider {

2773

width: 100%;

2774

margin-left: 8px;

2775

padding: 0;

2776

-webkit-appearance: none;

2777

background: transparent;

2778

/**

2779

* Thumb

2780

2781

/**

2782

* Track

2783

*/ }

2784

.components-range-control__slider::-webkit-slider-thumb {

2785

-webkit-appearance: none;

2786

height: 18px;

2787

width: 18px;

2788

border-radius: 50%;

2789

cursor: pointer;

2790

background: #555d66;

2791

border: 4px solid transparent;

2792

background-clip: padding-box;

2793

box-sizing: border-box;

2794

margin-top: -7px; }

2795

.components-range-control__slider::-moz-range-thumb {

2796

height: 18px;

2797

width: 18px;

2798

border-radius: 50%;

2799

cursor: pointer;

2800

background: #555d66;

2801

border: 4px solid transparent;

2802

background-clip: padding-box;

2803

box-sizing: border-box; }

2804

.components-range-control__slider::-ms-thumb {

2805

height: 18px;

2806

width: 18px;

2807

border-radius: 50%;

2808

cursor: pointer;

2809

background: #555d66;

2810

border: 4px solid transparent;

2811

background-clip: padding-box;

2812

box-sizing: border-box;

2813

margin-top: 0;

2814

height: 14px;

2815

width: 14px;

2816

border: 2px solid transparent; }

2817

.components-range-control__slider:focus {

2818

outline: none; }

2819

.components-range-control__slider:focus::-webkit-slider-thumb {

2820

background-color: #fff;

2821

color: #191e23;

2822

box-shadow: inset 0 0 0 1px #6c7781, inset 0 0 0 2px #fff;

2823

outline: 2px solid transparent;

2824

outline-offset: -2px; }

2825

.components-range-control__slider:focus::-moz-range-thumb {

2826

background-color: #fff;

2827

color: #191e23;

2828

box-shadow: inset 0 0 0 1px #6c7781, inset 0 0 0 2px #fff;

2829

outline: 2px solid transparent;

2830

outline-offset: -2px; }

2831

.components-range-control__slider:focus::-ms-thumb {

2832

background-color: #fff;

2833

color: #191e23;

2834

box-shadow: inset 0 0 0 1px #6c7781, inset 0 0 0 2px #fff;

2835

outline: 2px solid transparent;

2836

outline-offset: -2px; }

2837

.components-range-control__slider::-webkit-slider-runnable-track {

2838

height: 3px;

2839

cursor: pointer;

2840

background: #e2e4e7;

2841

border-radius: 1.5px;

2842

margin-top: -4px; }

2843

.components-range-control__slider::-moz-range-track {

2844

height: 3px;

2845

cursor: pointer;

2846

background: #e2e4e7;

2847

border-radius: 1.5px; }

2848

.components-range-control__slider::-ms-track {

2849

margin-top: -4px;

2850

background: transparent;

2851

border-color: transparent;

2852

color: transparent;

2853

height: 3px;

2854

cursor: pointer;

2855

background: #e2e4e7;

2856

border-radius: 1.5px; }

2857

2858

.components-range-control__number {

2859

display: inline-block;

2860

margin-left: 8px;

2861

font-weight: 500;

2862

width: 50px;

2863

padding: 3px 5px !important; }

2864

2865

.components-resizable-box__handle {

2866

display: none;

2867

width: 24px;

2868

height: 24px;

2869

padding: 4px; }

2870

.components-resizable-box__container.is-selected .components-resizable-box__handle {

2871

display: block; }

2872

2873

.components-resizable-box__handle::before {

2874

display: block;

2875

content: "";

2876

width: 16px;

2877

height: 16px;

2878

border: 2px solid #fff;

2879

border-radius: 50%;

2880

background: #0085ba;

2881

cursor: inherit; }

2882

2883

body.admin-color-sunrise .components-resizable-box__handle::before {

2884

background: #d1864a; }

2885

2886

body.admin-color-ocean .components-resizable-box__handle::before {

2887

background: #a3b9a2; }

2888

2889

body.admin-color-midnight .components-resizable-box__handle::before {

2890

background: #e14d43; }

2891

2892

body.admin-color-ectoplasm .components-resizable-box__handle::before {

2893

background: #a7b656; }

2894

2895

body.admin-color-coffee .components-resizable-box__handle::before {

2896

background: #c2a68c; }

2897

2898

body.admin-color-blue .components-resizable-box__handle::before {

2899

background: #82b4cb; }

2900

2901

body.admin-color-light .components-resizable-box__handle::before {

2902

background: #0085ba; }

2903

2904

/*!rtl:begin:ignore*/

2905

.components-resizable-box__handle-right {

2906

top: calc(50% - 12px);

2907

right: calc(12px * -1); }

2908

2909

.components-resizable-box__handle-bottom {

2910

bottom: calc(12px * -1);

2911

left: calc(50% - 12px); }

2912

2913

.components-resizable-box__handle-left {

2914

top: calc(50% - 12px);

2915

left: calc(12px * -1); }

2916

2917

/*!rtl:end:ignore*/

2918

.components-responsive-wrapper {

2919

position: relative;

2920

max-width: 100%; }

2921

2922

.components-responsive-wrapper__content {

2923

position: absolute;

2924

top: 0;

2925

right: 0;

2926

bottom: 0;

2927

left: 0;

2928

width: 100%;

2929

height: 100%; }

2930

2931

.components-sandbox {

2932

overflow: hidden; }

2933

2934

html.lockscroll,

2935

body.lockscroll {

2936

overflow: hidden; }

2937

2938

.components-select-control__input {

2939

background: #fff;

2940

height: 36px;

2941

line-height: 36px;

2942

margin: 1px;

2943

outline: 0;

2944

width: 100%;

2945

-webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important; }

2946

@media (min-width: 782px) {

2947

.components-select-control__input {

2948

height: 28px;

2949

line-height: 28px; } }

2950

2951

@media (max-width: 782px) {

2952

.components-base-control .components-base-control__field .components-select-control__input {

2953

font-size: 16px; } }

2954

2955

.components-spinner {

2956

display: inline-block;

2957

background-color: #7e8993;

2958

width: 18px;

2959

height: 18px;

2960

opacity: 0.7;

2961

float: right;

2962

margin: 5px 11px 0;

2963

border-radius: 100%;

2964

position: relative; }

2965

.components-spinner::before {

2966

content: "";

2967

position: absolute;

2968

background-color: #fff;

2969

top: 3px;

2970

left: 3px;

2971

width: 4px;

2972

height: 4px;

2973

border-radius: 100%;

2974

transform-origin: 6px 6px;

2975

animation: components-spinner__animation 1s infinite linear; }

2976

2977

@keyframes components-spinner__animation {

2978

from {

2979

transform: rotate(0deg); }

2980

to {

2981

transform: rotate(360deg); } }

2982

2983

.components-text-control__input {

2984

width: 100%;

2985

padding: 6px 8px; }

2986

2987

.components-textarea-control__input {

2988

width: 100%;

2989

padding: 6px 8px; }

2990

2991

.components-toggle-control .components-base-control__field {

2992

display: flex;

2993

margin-bottom: 12px; }

2994

.components-toggle-control .components-base-control__field .components-form-toggle {

2995

margin-right: 16px; }

2996

.components-toggle-control .components-base-control__field .components-toggle-control__label {

2997

display: block;

2998

margin-bottom: 4px; }

2999

3000

.components-toolbar {

3001

margin: 0;

3002

border: 1px solid #e2e4e7;

3003

background-color: #fff;

3004

display: flex;

3005

flex-shrink: 0; }

3006

3007

div.components-toolbar > div {

3008

display: block;

3009

margin: 0; }

3010

@supports ((position: -webkit-sticky) or (position: sticky)) {

3011

div.components-toolbar > div {

3012

display: flex; } }

3013

3014

div.components-toolbar > div + div {

3015

margin-left: -3px; }

3016

div.components-toolbar > div + div.has-left-divider {

3017

margin-left: 6px;

3018

position: relative;

3019

overflow: visible; }

3020

div.components-toolbar > div + div.has-left-divider::before {

3021

display: inline-block;

3022

content: "";

3023

box-sizing: content-box;

3024

background-color: #e2e4e7;

3025

position: absolute;

3026

top: 8px;

3027

left: -3px;

3028

width: 1px;

3029

height: 20px; }

3030

3031

.components-toolbar__control.components-button {

3032

display: inline-flex;

3033

align-items: flex-end;

3034

margin: 0;

3035

padding: 3px;

3036

outline: none;

3037

cursor: pointer;

3038

position: relative;

3039

width: 36px;

3040

height: 36px; }

3041

.components-toolbar__control.components-button:active, .components-toolbar__control.components-button:not([aria-disabled="true"]):hover, .components-toolbar__control.components-button:not([aria-disabled="true"]):focus {

3042

outline: none;

3043

box-shadow: none;

3044

background: none;

3045

border: none; }

3046

.components-toolbar__control.components-button:disabled {

3047

cursor: default; }

3048

.components-toolbar__control.components-button > svg {

3049

padding: 5px;

3050

border-radius: 4px;

3051

height: 30px;

3052

width: 30px; }

3053

.components-toolbar__control.components-button[data-subscript] svg {

3054

padding: 5px 10px 5px 0; }

3055

.components-toolbar__control.components-button[data-subscript]::after {

3056

content: attr(data-subscript);

3057

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

3058

font-size: 13px;

3059

font-weight: 600;

3060

line-height: 12px;

3061

position: absolute;

3062

right: 8px;

3063

bottom: 10px; }

3064

.components-toolbar__control.components-button:not(:disabled):not([aria-disabled="true"]):hover {

3065

box-shadow: none; }

3066

.components-toolbar__control.components-button:not(:disabled).is-active > svg,

3067

.components-toolbar__control.components-button:not(:disabled):hover > svg {

3068

color: #555d66;

3069

box-shadow: inset 0 0 0 1px #555d66, inset 0 0 0 2px #fff; }

3070

.components-toolbar__control.components-button:not(:disabled).is-active > svg {

3071

outline: none;

3072

color: #fff;

3073

box-shadow: none;

3074

background: #555d66; }

3075

.components-toolbar__control.components-button:not(:disabled).is-active[data-subscript]::after {

3076

color: #fff; }

3077

.components-toolbar__control.components-button:not(:disabled):focus > svg {

3078

box-shadow: inset 0 0 0 1px #555d66, inset 0 0 0 2px #fff;

3079

outline: 2px solid transparent;

3080

outline-offset: -2px; }

3081

3082

.components-toolbar__control .dashicon {

3083

display: block; }

3084

3085

.components-tooltip.components-popover {

3086

z-index: 1000002; }

3087

.components-tooltip.components-popover::before {

3088

border-color: transparent; }

3089

.components-tooltip.components-popover.is-top::after {

3090

border-top-color: #191e23; }

3091

.components-tooltip.components-popover.is-bottom::after {

3092

border-bottom-color: #191e23; }

3093

3094

.components-tooltip .components-popover__content {

3095

padding: 4px 12px;

3096

background: #191e23;

3097

border-width: 0;

3098

color: #fff;

3099

white-space: nowrap; }

3100

3101

.components-tooltip:not(.is-mobile) .components-popover__content {

3102

min-width: 0; }

3103

3104

.components-tooltip__shortcut {

3105

display: block;

3106

text-align: center;

3107

color: #7e8993; }

Older »