69 /** |
75 /** |
70 * Reset the WP Admin page styles for Gutenberg-like pages. |
76 * Reset the WP Admin page styles for Gutenberg-like pages. |
71 */ |
77 */ |
72 :root { |
78 :root { |
73 --wp-admin-theme-color: #007cba; |
79 --wp-admin-theme-color: #007cba; |
|
80 --wp-admin-theme-color--rgb: 0, 124, 186; |
74 --wp-admin-theme-color-darker-10: #006ba1; |
81 --wp-admin-theme-color-darker-10: #006ba1; |
|
82 --wp-admin-theme-color-darker-10--rgb: 0, 107, 161; |
75 --wp-admin-theme-color-darker-20: #005a87; |
83 --wp-admin-theme-color-darker-20: #005a87; |
|
84 --wp-admin-theme-color-darker-20--rgb: 0, 90, 135; |
76 --wp-admin-border-width-focus: 2px; |
85 --wp-admin-border-width-focus: 2px; |
77 } |
86 } |
78 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { |
87 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { |
79 :root { |
88 :root { |
80 --wp-admin-border-width-focus: 1.5px; |
89 --wp-admin-border-width-focus: 1.5px; |
393 .components-button.editor-post-last-revision__title:focus { |
393 .components-button.editor-post-last-revision__title:focus { |
394 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); |
394 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); |
395 border-radius: 0; |
395 border-radius: 0; |
396 } |
396 } |
397 |
397 |
398 .editor-post-locked-modal { |
398 @media (min-width: 600px) { |
399 height: auto; |
399 .editor-post-locked-modal { |
400 padding-left: 10px; |
400 max-width: 480px; |
401 padding-right: 10px; |
401 } |
402 padding-top: 10px; |
|
403 max-width: 480px; |
|
404 } |
|
405 .editor-post-locked-modal .components-modal__header { |
|
406 height: 36px; |
|
407 } |
402 } |
408 .editor-post-locked-modal .components-modal__content { |
403 .editor-post-locked-modal .components-modal__content { |
409 height: auto; |
404 display: flex; |
410 } |
405 } |
411 |
406 |
412 .editor-post-locked-modal__buttons { |
407 .editor-post-locked-modal__buttons { |
413 margin-top: 10px; |
408 margin-top: 24px; |
414 } |
|
415 .editor-post-locked-modal__buttons .components-button { |
|
416 margin-left: 5px; |
|
417 } |
409 } |
418 |
410 |
419 .editor-post-locked-modal__avatar { |
411 .editor-post-locked-modal__avatar { |
420 float: right; |
412 border-radius: 2px; |
421 margin: 5px; |
413 margin-top: 16px; |
422 margin-left: 15px; |
414 margin-left: 24px; |
423 } |
415 } |
424 |
416 |
425 .editor-post-publish-button__button.has-changes-dot::before { |
417 .editor-post-publish-button__button.has-changes-dot::before { |
426 background: currentcolor; |
418 background: currentcolor; |
427 border-radius: 4px; |
419 border-radius: 4px; |
562 } |
554 } |
563 .post-publish-panel__postpublish-buttons .components-button { |
555 .post-publish-panel__postpublish-buttons .components-button { |
564 height: auto; |
556 height: auto; |
565 justify-content: center; |
557 justify-content: center; |
566 padding: 3px 10px 4px; |
558 padding: 3px 10px 4px; |
|
559 flex: 1; |
567 line-height: 1.6; |
560 line-height: 1.6; |
568 text-align: center; |
561 text-align: center; |
569 white-space: normal; |
562 white-space: normal; |
570 } |
563 } |
571 .post-publish-panel__postpublish-buttons .components-clipboard-button { |
564 .post-publish-panel__postpublish-buttons .components-clipboard-button { |
572 width: 100%; |
565 width: 100%; |
573 } |
566 } |
574 |
567 |
575 .post-publish-panel__postpublish-post-address { |
568 .post-publish-panel__postpublish-post-address-container { |
|
569 display: flex; |
|
570 align-items: flex-end; |
576 margin-bottom: 16px; |
571 margin-bottom: 16px; |
577 } |
572 } |
578 .post-publish-panel__postpublish-post-address input[readonly] { |
573 .post-publish-panel__postpublish-post-address-container .components-base-control__field { |
|
574 margin-bottom: 0; |
|
575 } |
|
576 .post-publish-panel__postpublish-post-address-container .post-publish-panel__postpublish-post-address { |
|
577 flex: 1; |
|
578 } |
|
579 .post-publish-panel__postpublish-post-address-container input[readonly] { |
579 padding: 10px; |
580 padding: 10px; |
580 background: #ddd; |
581 background: #ddd; |
581 overflow: hidden; |
582 overflow: hidden; |
582 text-overflow: ellipsis; |
583 text-overflow: ellipsis; |
583 } |
584 } |
584 |
585 |
|
586 .post-publish-panel__postpublish-post-address__copy-button-wrap { |
|
587 flex-shrink: 0; |
|
588 margin-right: 8px; |
|
589 } |
|
590 .post-publish-panel__postpublish-post-address__copy-button-wrap .components-button { |
|
591 height: 38px; |
|
592 } |
|
593 |
585 .post-publish-panel__postpublish-header { |
594 .post-publish-panel__postpublish-header { |
586 font-weight: 500; |
595 font-weight: 500; |
587 } |
596 } |
588 |
597 |
589 .post-publish-panel__postpublish-subheader { |
598 .post-publish-panel__postpublish-subheader { |
592 |
601 |
593 .post-publish-panel__tip { |
602 .post-publish-panel__tip { |
594 color: #f0b849; |
603 color: #f0b849; |
595 } |
604 } |
596 |
605 |
|
606 @media screen and (max-width: 782px) { |
|
607 .post-publish-panel__postpublish-post-address__button-wrap .components-button { |
|
608 height: 40px; |
|
609 } |
|
610 } |
597 .editor-post-saved-state { |
611 .editor-post-saved-state { |
598 display: flex; |
612 display: flex; |
599 align-items: center; |
613 align-items: center; |
600 width: 28px; |
614 width: 28px; |
601 padding: 12px 4px; |
615 padding: 12px 4px; |
602 color: #757575; |
616 color: #757575; |
603 overflow: hidden; |
617 overflow: hidden; |
604 white-space: nowrap; |
618 white-space: nowrap; |
605 } |
619 } |
|
620 .editor-post-saved-state.is-saving[aria-disabled=true], .editor-post-saved-state.is-saving[aria-disabled=true]:hover, .editor-post-saved-state.is-saved[aria-disabled=true], .editor-post-saved-state.is-saved[aria-disabled=true]:hover { |
|
621 background: transparent; |
|
622 color: #757575; |
|
623 } |
606 .editor-post-saved-state svg { |
624 .editor-post-saved-state svg { |
607 display: inline-block; |
625 display: inline-block; |
608 flex: 0 0 auto; |
626 flex: 0 0 auto; |
609 fill: currentColor; |
627 fill: currentColor; |
610 margin-left: 8px; |
628 margin-left: 8px; |
880 } |
897 } |
881 |
898 |
882 .editor-post-title { |
899 .editor-post-title { |
883 position: relative; |
900 position: relative; |
884 } |
901 } |
885 .editor-post-title .editor-post-title__input { |
902 .editor-post-title.is-focus-mode { |
886 display: block; |
903 opacity: 0.5; |
887 width: 100%; |
904 transition: opacity 0.1s linear; |
888 margin: 0; |
|
889 box-shadow: none; |
|
890 background: transparent; |
|
891 transition: border 0.1s ease-out, box-shadow 0.1s linear; |
|
892 padding: 19px 0; |
|
893 word-break: keep-all; |
|
894 font-family: inherit; |
|
895 color: inherit; |
|
896 border: 1px solid transparent; |
|
897 border-right-width: 0; |
|
898 border-left-width: 0; |
|
899 border-radius: 0; |
|
900 outline: 1px solid transparent; |
|
901 font-size: 2.44em; |
|
902 font-weight: 800; |
|
903 line-height: 1.4; |
|
904 } |
905 } |
905 @media (prefers-reduced-motion: reduce) { |
906 @media (prefers-reduced-motion: reduce) { |
906 .editor-post-title .editor-post-title__input { |
907 .editor-post-title.is-focus-mode { |
907 transition-duration: 0s; |
908 transition-duration: 0s; |
908 transition-delay: 0s; |
909 transition-delay: 0s; |
909 } |
910 } |
910 } |
911 } |
911 @media (min-width: 600px) { |
912 .editor-post-title.is-focus-mode:focus { |
912 .editor-post-title .editor-post-title__input { |
|
913 border-width: 1px; |
|
914 } |
|
915 } |
|
916 .editor-post-title .editor-post-title__input::-webkit-input-placeholder { |
|
917 color: rgba(30, 30, 30, 0.62); |
|
918 } |
|
919 .editor-post-title .editor-post-title__input::-moz-placeholder { |
|
920 color: rgba(30, 30, 30, 0.62); |
|
921 opacity: 1; |
|
922 } |
|
923 .editor-post-title .editor-post-title__input:-ms-input-placeholder { |
|
924 color: rgba(30, 30, 30, 0.62); |
|
925 } |
|
926 .is-dark-theme .editor-post-title .editor-post-title__input::-webkit-input-placeholder { |
|
927 color: rgba(255, 255, 255, 0.65); |
|
928 } |
|
929 .is-dark-theme .editor-post-title .editor-post-title__input::-moz-placeholder { |
|
930 opacity: 1; |
|
931 color: rgba(255, 255, 255, 0.65); |
|
932 } |
|
933 .is-dark-theme .editor-post-title .editor-post-title__input:-ms-input-placeholder { |
|
934 color: rgba(255, 255, 255, 0.65); |
|
935 } |
|
936 .editor-post-title .editor-post-title__input:focus { |
|
937 border: 1px solid transparent; |
|
938 outline: 1px solid transparent; |
|
939 box-shadow: none; |
|
940 } |
|
941 .editor-post-title.is-focus-mode .editor-post-title__input { |
|
942 opacity: 0.5; |
|
943 transition: opacity 0.1s linear; |
|
944 } |
|
945 @media (prefers-reduced-motion: reduce) { |
|
946 .editor-post-title.is-focus-mode .editor-post-title__input { |
|
947 transition-duration: 0s; |
|
948 transition-delay: 0s; |
|
949 } |
|
950 } |
|
951 .editor-post-title.is-focus-mode .editor-post-title__input:focus { |
|
952 opacity: 1; |
913 opacity: 1; |
953 } |
914 } |
954 |
915 |
955 .editor-post-trash.components-button { |
916 .editor-post-trash.components-button { |
956 margin-top: 4px; |
917 margin-top: 4px; |