1 /**

     2  * Colors

     3  */

     4 /**

     5  * Breakpoints & Media Queries

     6  */

     7 /**

     8  * Often re-used variables

     9  */

    10 /**

    11  * Breakpoint mixins

    12  */

    13 /**

    14  * Long content fade mixin

    15  *

    16  * Creates a fading overlay to signify that the content is longer

    17  * than the space allows.

    18  */

    19 /**

    20  * Button states and focus styles

    21  */

    22 /**

    23  * Applies editor left position to the selector passed as argument

    24  */

    25 /**

    26  * Applies editor right position to the selector passed as argument

    27  */

    28 /**

    29  * Styles that are reused verbatim in a few places

    30  */

    31 /**

    32  * Allows users to opt-out of animations via OS-level preferences.

    33  */

    34 @media (min-width: 782px) {

    35   body.js.is-fullscreen-mode {

    36     margin-top: -46px;

    37     height: calc(100% + 46px);

    38     animation: edit-post__fade-in-animation 0.3s ease-out 0s;

    39     animation-fill-mode: forwards; } }

    40   @media (min-width: 782px) and (min-width: 782px) {

    41     body.js.is-fullscreen-mode {

    42       margin-top: -32px;

    43       height: calc(100% + 32px); } }

    44 

    45 @media (min-width: 782px) {

    46     body.js.is-fullscreen-mode #adminmenumain,

    47     body.js.is-fullscreen-mode #wpadminbar {

    48       display: none; }

    49     body.js.is-fullscreen-mode #wpcontent,

    50     body.js.is-fullscreen-mode #wpfooter {

    51       margin-right: 0; } }

    52   @media (min-width: 782px) and (prefers-reduced-motion: reduce) {

    53     body.js.is-fullscreen-mode {

    54       animation-duration: 1ms !important; } }

    55 

    56 @media (min-width: 782px) {

    57     body.js.is-fullscreen-mode .edit-post-header {

    58       transform: translateY(-100%);

    59       animation: edit-post-fullscreen-mode__slide-in-animation 0.1s forwards; } }

    60     @media (min-width: 782px) and (prefers-reduced-motion: reduce) {

    61       body.js.is-fullscreen-mode .edit-post-header {

    62         animation-duration: 1ms !important; } }

    63 

    64 @keyframes edit-post-fullscreen-mode__slide-in-animation {

    65   100% {

    66     transform: translateY(0%); } }

    67 

    68 .edit-post-header {

    69   height: 56px;

    70   padding: 4px 2px;

    71   border-bottom: 1px solid #e2e4e7;

    72   background: #fff;

    73   display: flex;

    74   flex-direction: row;

    75   align-items: stretch;

    76   justify-content: space-between;

    77   z-index: 30;

    78   right: 0;

    79   left: 0;

    80   top: 0;

    81   position: -webkit-sticky;

    82   position: sticky; }

    83   @media (min-width: 600px) {

    84     .edit-post-header {

    85       position: fixed;

    86       padding: 8px;

    87       top: 46px; } }

    88   @media (min-width: 782px) {

    89     .edit-post-header {

    90       top: 32px; }

    91       body.is-fullscreen-mode .edit-post-header {

    92         top: 0; } }

    93   .edit-post-header .editor-post-switch-to-draft + .editor-post-preview {

    94     display: none; }

    95     @media (min-width: 600px) {

    96       .edit-post-header .editor-post-switch-to-draft + .editor-post-preview {

    97         display: inline-flex; } }

    98   .edit-post-header > .edit-post-header__settings {

    99     order: 1; }

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

   101       .edit-post-header > .edit-post-header__settings {

   102         order: initial; } }

   103 

   104 .edit-post-header {

   105   /* Set left position when auto-fold is not on the body element. */

   106   right: 0; }

   107   @media (min-width: 782px) {

   108     .edit-post-header {

   109       right: 160px; } }

   110 

   111 .auto-fold .edit-post-header {

   112   /* Auto fold is when on smaller breakpoints, nav menu auto collapses. */ }

   113   @media (min-width: 782px) {

   114     .auto-fold .edit-post-header {

   115       right: 36px; } }

   116   @media (min-width: 960px) {

   117     .auto-fold .edit-post-header {

   118       right: 160px; } }

   119 

   120 /* Sidebar manually collapsed. */

   121 .folded .edit-post-header {

   122   right: 0; }

   123   @media (min-width: 782px) {

   124     .folded .edit-post-header {

   125       right: 36px; } }

   126 

   127 /* Mobile menu opened. */

   128 @media (max-width: 782px) {

   129   .auto-fold .wp-responsive-open .edit-post-header {

   130     right: 190px; } }

   131 

   132 /* In small screens with responsive menu expanded there is small white space. */

   133 @media (max-width: 600px) {

   134   .auto-fold .wp-responsive-open .edit-post-header {

   135     margin-right: -18px; } }

   136 

   137 body.is-fullscreen-mode .edit-post-header {

   138   right: 0 !important; }

   139 

   140 .edit-post-header__settings {

   141   display: inline-flex;

   142   align-items: center; }

   143 

   144 .edit-post-header .components-button.is-toggled {

   145   color: #fff;

   146   background: #555d66;

   147   margin: 1px;

   148   padding: 7px; }

   149 

   150 .edit-post-header .components-button.is-toggled:hover, .edit-post-header .components-button.is-toggled:focus {

   151   box-shadow: 0 0 0 1px #555d66, inset 0 0 0 1px #fff !important;

   152   color: #fff !important;

   153   background: #555d66 !important; }

   154 

   155 .edit-post-header .components-button.editor-post-save-draft, .edit-post-header .components-button.editor-post-switch-to-draft, .edit-post-header .components-button.editor-post-preview, .edit-post-header .components-button.editor-post-publish-button, .edit-post-header .components-button.editor-post-publish-panel__toggle {

   156   margin: 2px;

   157   height: 33px;

   158   line-height: 32px;

   159   font-size: 13px; }

   160 

   161 .edit-post-header .components-button.editor-post-save-draft, .edit-post-header .components-button.editor-post-switch-to-draft {

   162   padding: 0 5px; }

   163   @media (min-width: 600px) {

   164     .edit-post-header .components-button.editor-post-save-draft, .edit-post-header .components-button.editor-post-switch-to-draft {

   165       padding: 0 12px; } }

   166 

   167 .edit-post-header .components-button.editor-post-preview, .edit-post-header .components-button.editor-post-publish-button, .edit-post-header .components-button.editor-post-publish-panel__toggle {

   168   padding: 0 5px 2px; }

   169   @media (min-width: 600px) {

   170     .edit-post-header .components-button.editor-post-preview, .edit-post-header .components-button.editor-post-publish-button, .edit-post-header .components-button.editor-post-publish-panel__toggle {

   171       padding: 0 12px 2px; } }

   172 

   173 @media (min-width: 782px) {

   174   .edit-post-header .components-button.editor-post-preview {

   175     margin: 0 12px 0 3px; }

   176   .edit-post-header .components-button.editor-post-publish-button, .edit-post-header .components-button.editor-post-publish-panel__toggle {

   177     margin: 0 3px 0 12px; } }

   178 

   179 .edit-post-fullscreen-mode-close__toolbar {

   180   display: none; }

   181   @media (min-width: 782px) {

   182     .edit-post-fullscreen-mode-close__toolbar {

   183       display: block;

   184       border-top: 0;

   185       border-bottom: 0;

   186       border-right: 0;

   187       margin: -9px -10px -9px 10px;

   188       padding: 9px 10px; } }

   189 

   190 .edit-post-header-toolbar {

   191   display: inline-flex;

   192   align-items: center; }

   193   .edit-post-header-toolbar > .components-button {

   194     display: none; }

   195     @media (min-width: 600px) {

   196       .edit-post-header-toolbar > .components-button {

   197         display: inline-flex; } }

   198   .edit-post-header-toolbar .block-editor-block-navigation,

   199   .edit-post-header-toolbar .table-of-contents {

   200     display: none; }

   201     @media (min-width: 600px) {

   202       .edit-post-header-toolbar .block-editor-block-navigation,

   203       .edit-post-header-toolbar .table-of-contents {

   204         display: flex; } }

   205 

   206 .edit-post-header-toolbar__block-toolbar {

   207   position: absolute;

   208   top: 56px;

   209   right: 0;

   210   left: 0;

   211   background: #fff;

   212   min-height: 37px;

   213   border-bottom: 1px solid #e2e4e7; }

   214   .edit-post-header-toolbar__block-toolbar .block-editor-block-toolbar .components-toolbar {

   215     border-top: none;

   216     border-bottom: none; }

   217   .is-sidebar-opened .edit-post-header-toolbar__block-toolbar {

   218     display: none; }

   219   @media (min-width: 782px) {

   220     .is-sidebar-opened .edit-post-header-toolbar__block-toolbar {

   221       display: block;

   222       left: 280px; } }

   223   @media (min-width: 1080px) {

   224     .edit-post-header-toolbar__block-toolbar {

   225       padding-right: 8px;

   226       position: static;

   227       right: auto;

   228       left: auto;

   229       background: none;

   230       border-bottom: none;

   231       min-height: auto; }

   232       .is-sidebar-opened .edit-post-header-toolbar__block-toolbar {

   233         left: auto; }

   234       .edit-post-header-toolbar__block-toolbar .block-editor-block-toolbar {

   235         margin: -9px 0; }

   236       .edit-post-header-toolbar__block-toolbar .block-editor-block-toolbar .components-toolbar {

   237         padding: 10px 4px 9px; } }

   238 

   239 .edit-post-more-menu {

   240   margin-right: -4px; }

   241   .edit-post-more-menu .components-icon-button {

   242     width: auto;

   243     padding: 8px 2px; }

   244   @media (min-width: 600px) {

   245     .edit-post-more-menu {

   246       margin-right: 4px; }

   247       .edit-post-more-menu .components-icon-button {

   248         padding: 8px 4px; } }

   249   .edit-post-more-menu .components-button svg {

   250     transform: rotate(-90deg); }

   251 

   252 .edit-post-more-menu__content .components-popover__content {

   253   min-width: 260px; }

   254   @media (min-width: 480px) {

   255     .edit-post-more-menu__content .components-popover__content {

   256       width: auto;

   257       max-width: 480px; } }

   258   .edit-post-more-menu__content .components-popover__content .components-menu-group:not(:last-child),

   259   .edit-post-more-menu__content .components-popover__content > div:not(:last-child) .components-menu-group {

   260     border-bottom: 1px solid #e2e4e7; }

   261   .edit-post-more-menu__content .components-popover__content .components-menu-item__button {

   262     padding-right: 2rem; }

   263     .edit-post-more-menu__content .components-popover__content .components-menu-item__button.has-icon {

   264       padding-right: 0.5rem; }

   265 

   266 .edit-post-pinned-plugins {

   267   display: none; }

   268   @media (min-width: 600px) {

   269     .edit-post-pinned-plugins {

   270       display: flex; } }

   271   .edit-post-pinned-plugins .components-icon-button {

   272     margin-right: 4px; }

   273   .edit-post-pinned-plugins .components-icon-button:not(.is-toggled) svg,

   274   .edit-post-pinned-plugins .components-icon-button:not(.is-toggled) svg * {

   275     stroke: #555d66;

   276     fill: #555d66;

   277     stroke-width: 0; }

   278   .edit-post-pinned-plugins .components-icon-button.is-toggled svg,

   279   .edit-post-pinned-plugins .components-icon-button.is-toggled svg * {

   280     stroke: #fff !important;

   281     fill: #fff !important;

   282     stroke-width: 0; }

   283   .edit-post-pinned-plugins .components-icon-button:hover svg,

   284   .edit-post-pinned-plugins .components-icon-button:hover svg * {

   285     stroke: #191e23 !important;

   286     fill: #191e23 !important;

   287     stroke-width: 0; }

   288 

   289 .edit-post-keyboard-shortcut-help__section {

   290   margin: 0 0 2rem 0; }

   291 

   292 .edit-post-keyboard-shortcut-help__section-title {

   293   font-size: 0.9rem;

   294   font-weight: 600; }

   295 

   296 .edit-post-keyboard-shortcut-help__shortcut {

   297   display: flex;

   298   align-items: center;

   299   padding: 0.6rem 0;

   300   border-top: 1px solid #e2e4e7; }

   301   .edit-post-keyboard-shortcut-help__shortcut:last-child {

   302     border-bottom: 1px solid #e2e4e7; }

   303 

   304 .edit-post-keyboard-shortcut-help__shortcut-term {

   305   order: 1;

   306   font-weight: 600;

   307   margin: 0 1rem 0 0; }

   308 

   309 .edit-post-keyboard-shortcut-help__shortcut-description {

   310   flex: 1;

   311   order: 0;

   312   margin: 0;

   313   flex-basis: auto; }

   314 

   315 .edit-post-keyboard-shortcut-help__shortcut-key-combination {

   316   background: none;

   317   margin: 0;

   318   padding: 0; }

   319 

   320 .edit-post-keyboard-shortcut-help__shortcut-key {

   321   padding: 0.25rem 0.5rem;

   322   border-radius: 8%;

   323   margin: 0 0.2rem 0 0.2rem; }

   324   .edit-post-keyboard-shortcut-help__shortcut-key:last-child {

   325     margin: 0 0.2rem 0 0; }

   326 

   327 .edit-post-layout,

   328 .edit-post-layout__content {

   329   height: 100%; }

   330 

   331 .edit-post-layout {

   332   position: relative; }

   333   .edit-post-layout .components-notice-list {

   334     position: -webkit-sticky;

   335     position: sticky;

   336     top: 56px;

   337     left: 0;

   338     color: #191e23; }

   339     @media (min-width: 600px) {

   340       .edit-post-layout .components-notice-list {

   341         top: 0; } }

   342     .edit-post-layout .components-notice-list.is-pinned {

   343       position: relative;

   344       right: 0;

   345       top: 0; }

   346   .edit-post-layout .components-notice {

   347     margin: 0 0 5px;

   348     padding: 6px 12px;

   349     min-height: 50px; }

   350     .edit-post-layout .components-notice .components-notice__dismiss {

   351       margin: 10px 5px; }

   352   @media (min-width: 600px) {

   353     .edit-post-layout {

   354       padding-top: 56px; } }

   355 

   356 .edit-post-layout__metaboxes:not(:empty) {

   357   border-top: 1px solid #e2e4e7;

   358   margin-top: 10px;

   359   padding: 10px 0 10px;

   360   clear: both; }

   361   .edit-post-layout__metaboxes:not(:empty) .edit-post-meta-boxes-area {

   362     margin: auto 20px; }

   363 

   364 .edit-post-layout__content {

   365   display: flex;

   366   flex-direction: column;

   367   min-height: 100%;

   368   position: relative;

   369   padding-bottom: 50vh;

   370   -webkit-overflow-scrolling: touch; }

   371   @media (min-width: 782px) {

   372     .edit-post-layout__content {

   373       position: fixed;

   374       bottom: 0;

   375       right: 0;

   376       left: 0;

   377       top: 88px;

   378       min-height: calc(100% - 88px);

   379       height: auto;

   380       margin-right: 160px; }

   381       body.auto-fold .edit-post-layout__content {

   382         margin-right: 36px; } }

   383     @media (min-width: 782px) and (min-width: 960px) {

   384       body.auto-fold .edit-post-layout__content {

   385         margin-right: 160px; } }

   386   @media (min-width: 782px) {

   387       body.folded .edit-post-layout__content {

   388         margin-right: 36px; }

   389       body.is-fullscreen-mode .edit-post-layout__content {

   390         margin-right: 0 !important;

   391         top: 56px; } }

   392   @media (min-width: 782px) {

   393     .has-fixed-toolbar .edit-post-layout__content {

   394       top: 124px; } }

   395   @media (min-width: 1080px) {

   396     .has-fixed-toolbar .edit-post-layout__content {

   397       top: 88px; } }

   398   @media (min-width: 600px) {

   399     .edit-post-layout__content {

   400       padding-bottom: 0; } }

   401   @media (min-width: 600px) {

   402     .edit-post-layout__content {

   403       overflow-y: auto; } }

   404   @media (min-width: 600px) {

   405     .edit-post-layout__content {

   406       overscroll-behavior-y: none; } }

   407   .edit-post-layout__content .edit-post-visual-editor {

   408     flex: 1 1 auto; }

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

   410       .edit-post-layout__content .edit-post-visual-editor {

   411         flex-basis: 100%; } }

   412   .edit-post-layout__content .edit-post-layout__metaboxes {

   413     flex-shrink: 0; }

   414 

   415 .edit-post-layout .editor-post-publish-panel {

   416   position: fixed;

   417   z-index: 100001;

   418   top: 46px;

   419   bottom: 0;

   420   left: 0;

   421   right: 0;

   422   overflow: auto; }

   423   @media (min-width: 782px) {

   424     .edit-post-layout .editor-post-publish-panel {

   425       top: 32px;

   426       right: auto;

   427       width: 280px;

   428       border-right: 1px solid #e2e4e7;

   429       transform: translateX(-100%);

   430       animation: edit-post-post-publish-panel__slide-in-animation 0.1s forwards; } }

   431   @media (min-width: 782px) and (prefers-reduced-motion: reduce) {

   432     .edit-post-layout .editor-post-publish-panel {

   433       animation-duration: 1ms !important; } }

   434   @media (min-width: 782px) {

   435       body.is-fullscreen-mode .edit-post-layout .editor-post-publish-panel {

   436         top: 0; }

   437       .is-focusing-regions .edit-post-layout .editor-post-publish-panel {

   438         transform: translateX(0%); } }

   439 

   440 @keyframes edit-post-post-publish-panel__slide-in-animation {

   441   100% {

   442     transform: translateX(0%); } }

   443 

   444 .edit-post-layout .editor-post-publish-panel__header-publish-button .components-button.is-large {

   445   height: 33px;

   446   line-height: 32px; }

   447 

   448 .edit-post-layout .editor-post-publish-panel__header-publish-button .editor-post-publish-panel__spacer {

   449   display: inline-flex;

   450   flex: 0 1 52px; }

   451 

   452 .edit-post-toggle-publish-panel {

   453   position: fixed;

   454   top: -9999em;

   455   bottom: auto;

   456   right: auto;

   457   left: 0;

   458   z-index: 100000;

   459   padding: 10px 0 10px 10px;

   460   width: 280px;

   461   background-color: #fff; }

   462   .edit-post-toggle-publish-panel:focus {

   463     top: auto;

   464     bottom: 0; }

   465   .edit-post-toggle-publish-panel .edit-post-toggle-publish-panel__button {

   466     width: auto;

   467     height: auto;

   468     display: block;

   469     font-size: 14px;

   470     font-weight: 600;

   471     margin: 0 auto 0 0;

   472     padding: 15px 23px 14px;

   473     line-height: normal;

   474     text-decoration: none;

   475     outline: none;

   476     background: #f1f1f1;

   477     color: #11a0d2; }

   478   body.admin-color-sunrise .edit-post-toggle-publish-panel .edit-post-toggle-publish-panel__button {

   479     color: #c8b03c; }

   480   body.admin-color-ocean .edit-post-toggle-publish-panel .edit-post-toggle-publish-panel__button {

   481     color: #a89d8a; }

   482   body.admin-color-midnight .edit-post-toggle-publish-panel .edit-post-toggle-publish-panel__button {

   483     color: #77a6b9; }

   484   body.admin-color-ectoplasm .edit-post-toggle-publish-panel .edit-post-toggle-publish-panel__button {

   485     color: #c77430; }

   486   body.admin-color-coffee .edit-post-toggle-publish-panel .edit-post-toggle-publish-panel__button {

   487     color: #9fa47b; }

   488   body.admin-color-blue .edit-post-toggle-publish-panel .edit-post-toggle-publish-panel__button {

   489     color: #d9ab59; }

   490   body.admin-color-light .edit-post-toggle-publish-panel .edit-post-toggle-publish-panel__button {

   491     color: #c75726; }

   492     .edit-post-toggle-publish-panel .edit-post-toggle-publish-panel__button:focus {

   493       position: fixed;

   494       top: auto;

   495       left: 10px;

   496       bottom: 10px;

   497       right: auto; }

   498 

   499 @media (min-width: 600px) {

   500   .edit-post-manage-blocks-modal {

   501     height: calc(100% - 56px - 56px); } }

   502 

   503 .edit-post-manage-blocks-modal .components-modal__content {

   504   padding-bottom: 0;

   505   display: flex;

   506   flex-direction: column; }

   507 

   508 .edit-post-manage-blocks-modal .components-modal__header {

   509   flex-shrink: 0;

   510   margin-bottom: 0; }

   511 

   512 .edit-post-manage-blocks-modal__content {

   513   display: flex;

   514   flex-direction: column;

   515   flex: 0 1 100%;

   516   min-height: 0; }

   517 

   518 .edit-post-manage-blocks-modal__no-results {

   519   font-style: italic;

   520   padding: 24px 0;

   521   text-align: center; }

   522 

   523 .edit-post-manage-blocks-modal__search {

   524   margin: 16px 0; }

   525   .edit-post-manage-blocks-modal__search .components-base-control__field {

   526     margin-bottom: 0; }

   527   .edit-post-manage-blocks-modal__search .components-base-control__label {

   528     margin-top: -4px; }

   529   .edit-post-manage-blocks-modal__search input[type="search"].components-text-control__input {

   530     padding: 12px;

   531     border-radius: 4px; }

   532 

   533 .edit-post-manage-blocks-modal__category {

   534   margin: 0 0 2rem 0; }

   535 

   536 .edit-post-manage-blocks-modal__category-title {

   537   position: -webkit-sticky;

   538   position: sticky;

   539   top: 0;

   540   padding: 16px 0;

   541   background-color: #fff; }

   542   .edit-post-manage-blocks-modal__category-title .components-base-control__field {

   543     margin-bottom: 0; }

   544   .edit-post-manage-blocks-modal__category-title .components-checkbox-control__label {

   545     font-size: 0.9rem;

   546     font-weight: 600; }

   547 

   548 .edit-post-manage-blocks-modal__show-all {

   549   margin-left: 8px; }

   550 

   551 .edit-post-manage-blocks-modal__checklist {

   552   margin-top: 0; }

   553 

   554 .edit-post-manage-blocks-modal__checklist-item {

   555   margin-bottom: 0;

   556   padding-right: 16px;

   557   border-top: 1px solid #e2e4e7; }

   558   .edit-post-manage-blocks-modal__checklist-item:last-child {

   559     border-bottom: 1px solid #e2e4e7; }

   560   .edit-post-manage-blocks-modal__checklist-item .components-base-control__field {

   561     align-items: center;

   562     display: flex;

   563     margin: 0; }

   564   .components-modal__content .edit-post-manage-blocks-modal__checklist-item input[type="checkbox"] {

   565     margin: 0 8px; }

   566   .edit-post-manage-blocks-modal__checklist-item .components-checkbox-control__label {

   567     display: flex;

   568     align-items: center;

   569     justify-content: space-between;

   570     flex-grow: 1;

   571     padding: 0.6rem 10px 0.6rem 0; }

   572   .edit-post-manage-blocks-modal__checklist-item .editor-block-icon {

   573     margin-left: 10px;

   574     fill: #555d66; }

   575 

   576 .edit-post-manage-blocks-modal__results {

   577   height: 100%;

   578   overflow: auto;

   579   margin-right: -16px;

   580   margin-left: -16px;

   581   padding-right: 16px;

   582   padding-left: 16px;

   583   border-top: 1px solid #e2e4e7; }

   584 

   585 .edit-post-meta-boxes-area {

   586   position: relative;

   587   /**

   588 	 * The wordpress default for most meta-box elements is content-box. Some

   589 	 * elements such as textarea and input are set to border-box in forms.css.

   590 	 * These elements therefore specifically set back to border-box here, while

   591 	 * other elements (such as .button) are unaffected by Gutenberg's style

   592 	 * because of their higher specificity.

   593 	 */

   594   /* Match width and positioning of the meta boxes. Override default styles. */

   595   /* Override Default meta box stylings */ }

   596   .edit-post-meta-boxes-area__container,

   597   .edit-post-meta-boxes-area .inside {

   598     box-sizing: content-box; }

   599   .edit-post-meta-boxes-area textarea,

   600   .edit-post-meta-boxes-area input {

   601     box-sizing: border-box; }

   602   .edit-post-meta-boxes-area #poststuff {

   603     margin: 0 auto;

   604     padding-top: 0;

   605     min-width: auto; }

   606   .edit-post-meta-boxes-area #poststuff h3.hndle,

   607   .edit-post-meta-boxes-area #poststuff .stuffbox > h3,

   608   .edit-post-meta-boxes-area #poststuff h2.hndle {

   609     /* WordPress selectors yolo */

   610     border-bottom: 1px solid #e2e4e7;

   611     box-sizing: border-box;

   612     color: inherit;

   613     font-weight: 600;

   614     outline: none;

   615     padding: 15px;

   616     position: relative;

   617     width: 100%; }

   618   .edit-post-meta-boxes-area .postbox {

   619     border: 0;

   620     color: inherit;

   621     margin-bottom: 0; }

   622   .edit-post-meta-boxes-area .postbox > .inside {

   623     border-bottom: 1px solid #e2e4e7;

   624     color: inherit;

   625     padding: 0 14px 14px;

   626     margin: 0; }

   627   .edit-post-meta-boxes-area .postbox .handlediv {

   628     height: 44px;

   629     width: 44px; }

   630   .edit-post-meta-boxes-area.is-loading::before {

   631     position: absolute;

   632     top: 0;

   633     right: 0;

   634     left: 0;

   635     bottom: 0;

   636     content: "";

   637     background: transparent;

   638     z-index: 1; }

   639   .edit-post-meta-boxes-area .components-spinner {

   640     position: absolute;

   641     top: 10px;

   642     left: 20px;

   643     z-index: 5; }

   644   .edit-post-meta-boxes-area .is-hidden {

   645     display: none; }

   646 

   647 .edit-post-meta-boxes-area__clear {

   648   clear: both; }

   649 

   650 .edit-post-sidebar {

   651   position: fixed;

   652   z-index: 100000;

   653   top: 0;

   654   left: 0;

   655   bottom: 0;

   656   width: 280px;

   657   border-right: 1px solid #e2e4e7;

   658   background: #fff;

   659   color: #555d66;

   660   height: 100vh;

   661   overflow: hidden; }

   662   @media (min-width: 600px) {

   663     .edit-post-sidebar {

   664       top: 102px;

   665       z-index: 90;

   666       height: auto;

   667       overflow: auto;

   668       -webkit-overflow-scrolling: touch; } }

   669   @media (min-width: 782px) {

   670     .edit-post-sidebar {

   671       top: 88px; }

   672       body.is-fullscreen-mode .edit-post-sidebar {

   673         top: 56px; } }

   674   .edit-post-sidebar > .components-panel {

   675     border-right: none;

   676     border-left: none;

   677     overflow: auto;

   678     -webkit-overflow-scrolling: touch;

   679     height: auto;

   680     max-height: calc(100vh - 96px);

   681     margin-top: -1px;

   682     margin-bottom: -1px;

   683     position: relative;

   684     z-index: -2; }

   685     @media (min-width: 600px) {

   686       .edit-post-sidebar > .components-panel {

   687         overflow: hidden;

   688         height: auto;

   689         max-height: none; } }

   690   .edit-post-sidebar > .components-panel .components-panel__header {

   691     position: fixed;

   692     z-index: 1;

   693     top: 0;

   694     right: 0;

   695     left: 0;

   696     height: 50px; }

   697     @media (min-width: 600px) {

   698       .edit-post-sidebar > .components-panel .components-panel__header {

   699         position: inherit;

   700         top: auto;

   701         right: auto;

   702         left: auto; } }

   703   .edit-post-sidebar p {

   704     margin-top: 0; }

   705   .edit-post-sidebar h2,

   706   .edit-post-sidebar h3 {

   707     font-size: 13px;

   708     color: #555d66;

   709     margin-bottom: 1.5em; }

   710   .edit-post-sidebar hr {

   711     border-top: none;

   712     border-bottom: 1px solid #e2e4e7;

   713     margin: 1.5em 0; }

   714   .edit-post-sidebar div.components-toolbar {

   715     box-shadow: none;

   716     margin-bottom: 1.5em; }

   717     .edit-post-sidebar div.components-toolbar:last-child {

   718       margin-bottom: 0; }

   719   .edit-post-sidebar p + div.components-toolbar {

   720     margin-top: -1em; }

   721   .edit-post-sidebar .block-editor-skip-to-selected-block:focus {

   722     top: auto;

   723     left: 10px;

   724     bottom: 10px;

   725     right: auto; }

   726 

   727 /* Visual and Text editor both */

   728 @media (min-width: 782px) {

   729   .edit-post-layout.is-sidebar-opened .edit-post-layout__content {

   730     margin-left: 280px; } }

   731 

   732 .edit-post-layout.is-sidebar-opened .edit-post-sidebar,

   733 .edit-post-layout.is-sidebar-opened .edit-post-plugin-sidebar__sidebar-layout {

   734   /* Sidebar covers screen on mobile */

   735   width: 100%;

   736   /* Sidebar sits on the side on larger breakpoints */ }

   737   @media (min-width: 782px) {

   738     .edit-post-layout.is-sidebar-opened .edit-post-sidebar,

   739     .edit-post-layout.is-sidebar-opened .edit-post-plugin-sidebar__sidebar-layout {

   740       width: 280px; } }

   741 

   742 /* Text Editor specific */

   743 .components-panel__header.edit-post-sidebar__header {

   744   background: #fff;

   745   padding-left: 8px; }

   746   .components-panel__header.edit-post-sidebar__header .edit-post-sidebar__title {

   747     overflow: hidden;

   748     text-overflow: ellipsis;

   749     white-space: nowrap;

   750     width: 100%; }

   751   @media (min-width: 782px) {

   752     .components-panel__header.edit-post-sidebar__header {

   753       display: none; } }

   754 

   755 .components-panel__header.edit-post-sidebar__panel-tabs {

   756   justify-content: flex-start;

   757   padding-right: 0;

   758   padding-left: 4px;

   759   border-top: 0;

   760   margin-top: 0; }

   761   .components-panel__header.edit-post-sidebar__panel-tabs .components-icon-button {

   762     display: none;

   763     margin-right: auto; }

   764     @media (min-width: 782px) {

   765       .components-panel__header.edit-post-sidebar__panel-tabs .components-icon-button {

   766         display: flex; } }

   767 

   768 .edit-post-sidebar__panel-tab {

   769   background: transparent;

   770   border: none;

   771   box-shadow: none;

   772   cursor: pointer;

   773   height: 50px;

   774   padding: 3px 15px;

   775   margin-right: 0;

   776   font-weight: 400;

   777   outline-offset: -1px;

   778   transition: box-shadow 0.1s linear; }

   779   .edit-post-sidebar__panel-tab.is-active {

   780     box-shadow: inset 0 -3px #007cba;

   781     font-weight: 600;

   782     position: relative; }

   783   body.admin-color-sunrise .edit-post-sidebar__panel-tab.is-active {

   784     box-shadow: inset 0 -3px #837425; }

   785   body.admin-color-ocean .edit-post-sidebar__panel-tab.is-active {

   786     box-shadow: inset 0 -3px #5e7d5e; }

   787   body.admin-color-midnight .edit-post-sidebar__panel-tab.is-active {

   788     box-shadow: inset 0 -3px #497b8d; }

   789   body.admin-color-ectoplasm .edit-post-sidebar__panel-tab.is-active {

   790     box-shadow: inset 0 -3px #523f6d; }

   791   body.admin-color-coffee .edit-post-sidebar__panel-tab.is-active {

   792     box-shadow: inset 0 -3px #59524c; }

   793   body.admin-color-blue .edit-post-sidebar__panel-tab.is-active {

   794     box-shadow: inset 0 -3px #417e9B; }

   795   body.admin-color-light .edit-post-sidebar__panel-tab.is-active {

   796     box-shadow: inset 0 -3px #007cba; }

   797     .edit-post-sidebar__panel-tab.is-active::before {

   798       content: "";

   799       position: absolute;

   800       top: 0;

   801       bottom: 1px;

   802       left: 0;

   803       right: 0;

   804       border-bottom: 3px solid transparent; }

   805   .edit-post-sidebar__panel-tab:focus {

   806     color: #191e23;

   807     outline-offset: -1px;

   808     outline: 1px dotted #555d66; }

   809 

   810 .components-panel__body.is-opened.edit-post-last-revision__panel {

   811   padding: 0; }

   812 

   813 .editor-post-last-revision__title {

   814   padding: 13px 16px; }

   815 

   816 .editor-post-author__select {

   817   margin: -5px 0;

   818   width: 100%; }

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

   820     .editor-post-author__select {

   821       width: auto; } }

   822 

   823 .edit-post-post-link__link-post-name {

   824   font-weight: 600; }

   825 

   826 .edit-post-post-link__preview-label {

   827   margin: 0; }

   828 

   829 .edit-post-post-link__link {

   830   word-wrap: break-word; }

   831 

   832 .edit-post-post-schedule {

   833   width: 100%;

   834   position: relative; }

   835 

   836 .edit-post-post-schedule__label {

   837   display: none; }

   838 

   839 .components-button.edit-post-post-schedule__toggle {

   840   text-align: left; }

   841 

   842 .edit-post-post-schedule__dialog .components-popover__content {

   843   padding: 10px; }

   844   @media (min-width: 782px) {

   845     .edit-post-post-schedule__dialog .components-popover__content {

   846       width: 270px; } }

   847 

   848 .edit-post-post-status .edit-post-post-publish-dropdown__switch-to-draft {

   849   margin-top: 15px;

   850   width: 100%;

   851   text-align: center; }

   852 

   853 .edit-post-post-visibility {

   854   width: 100%; }

   855 

   856 .edit-post-post-visibility__dialog .components-popover__content {

   857   padding: 10px; }

   858   @media (min-width: 782px) {

   859     .edit-post-post-visibility__dialog .components-popover__content {

   860       width: 257px; } }

   861 

   862 .edit-post-post-visibility__dialog-legend {

   863   font-weight: 600; }

   864 

   865 .edit-post-post-visibility__choice {

   866   margin: 10px 0; }

   867 

   868 .edit-post-post-visibility__dialog-radio,

   869 .edit-post-post-visibility__dialog-label {

   870   vertical-align: top; }

   871 

   872 .edit-post-post-visibility__dialog-password-input {

   873   width: calc(100% - 20px);

   874   margin-right: 20px; }

   875 

   876 .edit-post-post-visibility__dialog-info {

   877   color: #7e8993;

   878   padding-right: 20px;

   879   font-style: italic;

   880   margin: 4px 0 0;

   881   line-height: 1.4; }

   882 

   883 .components-panel__header.edit-post-sidebar__panel-tabs {

   884   justify-content: flex-start;

   885   padding-right: 0;

   886   padding-left: 4px;

   887   border-top: 0;

   888   position: -webkit-sticky;

   889   position: sticky;

   890   z-index: -1;

   891   top: 0; }

   892   .components-panel__header.edit-post-sidebar__panel-tabs ul {

   893     display: flex; }

   894   .components-panel__header.edit-post-sidebar__panel-tabs li {

   895     margin: 0; }

   896 

   897 .edit-post-sidebar__panel-tab {

   898   background: transparent;

   899   border: none;

   900   box-shadow: none;

   901   cursor: pointer;

   902   padding: 3px 15px;

   903   margin-right: 0;

   904   font-weight: 400;

   905   color: #191e23;

   906   outline-offset: -1px;

   907   transition: box-shadow 0.1s linear; }

   908   .edit-post-sidebar__panel-tab::after {

   909     content: attr(data-label);

   910     display: block;

   911     font-weight: 600;

   912     height: 0;

   913     overflow: hidden;

   914     speak: none;

   915     visibility: hidden; }

   916   .edit-post-sidebar__panel-tab.is-active {

   917     box-shadow: inset 0 -3px #007cba;

   918     font-weight: 600;

   919     position: relative; }

   920   body.admin-color-sunrise .edit-post-sidebar__panel-tab.is-active {

   921     box-shadow: inset 0 -3px #837425; }

   922   body.admin-color-ocean .edit-post-sidebar__panel-tab.is-active {

   923     box-shadow: inset 0 -3px #5e7d5e; }

   924   body.admin-color-midnight .edit-post-sidebar__panel-tab.is-active {

   925     box-shadow: inset 0 -3px #497b8d; }

   926   body.admin-color-ectoplasm .edit-post-sidebar__panel-tab.is-active {

   927     box-shadow: inset 0 -3px #523f6d; }

   928   body.admin-color-coffee .edit-post-sidebar__panel-tab.is-active {

   929     box-shadow: inset 0 -3px #59524c; }

   930   body.admin-color-blue .edit-post-sidebar__panel-tab.is-active {

   931     box-shadow: inset 0 -3px #417e9B; }

   932   body.admin-color-light .edit-post-sidebar__panel-tab.is-active {

   933     box-shadow: inset 0 -3px #007cba; }

   934     .edit-post-sidebar__panel-tab.is-active::before {

   935       content: "";

   936       position: absolute;

   937       top: 0;

   938       bottom: 1px;

   939       left: 0;

   940       right: 0;

   941       border-bottom: 3px solid transparent; }

   942   .edit-post-sidebar__panel-tab:focus {

   943     color: #191e23;

   944     outline-offset: -1px;

   945     outline: 1px dotted #555d66; }

   946 

   947 .edit-post-settings-sidebar__panel-block .components-panel__body {

   948   border: none;

   949   border-top: 1px solid #e2e4e7;

   950   margin: 0 -16px; }

   951   .edit-post-settings-sidebar__panel-block .components-panel__body .components-base-control {

   952     margin-bottom: 24px; }

   953     .edit-post-settings-sidebar__panel-block .components-panel__body .components-base-control:last-child {

   954       margin-bottom: 8px; }

   955   .edit-post-settings-sidebar__panel-block .components-panel__body .components-panel__body-toggle {

   956     color: #191e23; }

   957   .edit-post-settings-sidebar__panel-block .components-panel__body:first-child {

   958     margin-top: 16px; }

   959   .edit-post-settings-sidebar__panel-block .components-panel__body:last-child {

   960     margin-bottom: -16px; }

   961 

   962 /* Text Editor specific */

   963 .components-panel__header.edit-post-sidebar-header__small {

   964   background: #fff;

   965   padding-left: 4px; }

   966   .components-panel__header.edit-post-sidebar-header__small .edit-post-sidebar__title {

   967     overflow: hidden;

   968     text-overflow: ellipsis;

   969     white-space: nowrap;

   970     width: 100%; }

   971   @media (min-width: 782px) {

   972     .components-panel__header.edit-post-sidebar-header__small {

   973       display: none; } }

   974 

   975 .components-panel__header.edit-post-sidebar-header {

   976   padding-left: 4px;

   977   background: #f3f4f5; }

   978   .components-panel__header.edit-post-sidebar-header .components-icon-button {

   979     display: none;

   980     margin-right: auto; }

   981     .components-panel__header.edit-post-sidebar-header .components-icon-button ~ .components-icon-button {

   982       margin-right: 0; }

   983     @media (min-width: 782px) {

   984       .components-panel__header.edit-post-sidebar-header .components-icon-button {

   985         display: flex; } }

   986 

   987 .edit-post-text-editor__body {

   988   padding-top: 40px; }

   989   @media (min-width: 600px) {

   990     .edit-post-text-editor__body {

   991       padding-top: 86px; } }

   992   @media (min-width: 782px) {

   993     .edit-post-text-editor__body {

   994       padding-top: 40px; }

   995       body.is-fullscreen-mode .edit-post-text-editor__body {

   996         padding-top: 40px; } }

   997 

   998 .edit-post-text-editor {

   999   width: 100%;

  1000   max-width: calc(100% - 32px);

  1001   margin-right: 16px;

  1002   margin-left: 16px;

  1003   padding-top: 44px; }

  1004   @media (min-width: 600px) {

  1005     .edit-post-text-editor {

  1006       max-width: 610px;

  1007       margin-right: auto;

  1008       margin-left: auto; } }

  1009   .edit-post-text-editor .editor-post-title__block textarea {

  1010     border: 1px solid #e2e4e7;

  1011     margin-bottom: 4px;

  1012     padding: 14px; }

  1013   .edit-post-text-editor .editor-post-title__block:not(.is-focus-mode):not(.has-fixed-toolbar):not(.is-selected) .editor-post-title__input:hover,

  1014   .edit-post-text-editor .editor-post-title__block:not(.is-focus-mode):not(.has-fixed-toolbar).is-selected .editor-post-title__input {

  1015     box-shadow: none;

  1016     border-right-width: 1px; }

  1017   .edit-post-text-editor .editor-post-title__block textarea:hover,

  1018   .edit-post-text-editor .editor-post-title__block.is-selected textarea {

  1019     box-shadow: 0 0 0 1px #e2e4e7; }

  1020   .edit-post-text-editor .editor-post-permalink {

  1021     margin-top: -6px;

  1022     box-shadow: none;

  1023     border: none;

  1024     outline: 1px solid #b5bcc2; }

  1025   @media (min-width: 600px) {

  1026     .edit-post-text-editor .editor-post-title,

  1027     .edit-post-text-editor .editor-post-title__block {

  1028       padding: 0; } }

  1029   .edit-post-text-editor .editor-post-text-editor {

  1030     padding: 14px;

  1031     min-height: 200px;

  1032     line-height: 1.8; }

  1033   .edit-post-text-editor .edit-post-text-editor__toolbar {

  1034     position: absolute;

  1035     top: 8px;

  1036     right: 0;

  1037     left: 0;

  1038     height: 36px;

  1039     line-height: 36px;

  1040     padding: 0 16px 0 8px;

  1041     display: flex; }

  1042     .edit-post-text-editor .edit-post-text-editor__toolbar h2 {

  1043       margin: 0 0 0 auto;

  1044       font-size: 13px;

  1045       color: #555d66; }

  1046     .edit-post-text-editor .edit-post-text-editor__toolbar .components-icon-button svg {

  1047       order: 1; }

  1048 

  1049 .edit-post-visual-editor {

  1050   position: relative;

  1051   padding: 50px 0; }

  1052   .edit-post-visual-editor .components-button {

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

  1054 

  1055 .edit-post-visual-editor .block-editor-writing-flow__click-redirect {

  1056   height: 50px;

  1057   width: 100%;

  1058   margin: -4px auto -50px; }

  1059 

  1060 .edit-post-visual-editor .block-editor-block-list__block {

  1061   margin-right: auto;

  1062   margin-left: auto; }

  1063   @media (min-width: 600px) {

  1064     .edit-post-visual-editor .block-editor-block-list__block .block-editor-block-list__block-edit {

  1065       margin-right: -28px;

  1066       margin-left: -28px; }

  1067     .edit-post-visual-editor .block-editor-block-list__block[data-align="wide"] > .block-editor-block-list__block-edit > .block-editor-block-contextual-toolbar,

  1068     .edit-post-visual-editor .block-editor-block-list__block[data-align="full"] > .block-editor-block-list__block-edit > .block-editor-block-contextual-toolbar {

  1069       height: 0;

  1070       width: 100%;

  1071       margin-right: 0;

  1072       margin-left: 0;

  1073       text-align: center;

  1074       float: right; }

  1075       .edit-post-visual-editor .block-editor-block-list__block[data-align="wide"] > .block-editor-block-list__block-edit > .block-editor-block-contextual-toolbar .block-editor-block-toolbar,

  1076       .edit-post-visual-editor .block-editor-block-list__block[data-align="full"] > .block-editor-block-list__block-edit > .block-editor-block-contextual-toolbar .block-editor-block-toolbar {

  1077         max-width: 610px;

  1078         width: 100%;

  1079         position: relative; } }

  1080 

  1081 @media (min-width: 600px) {

  1082   .editor-post-title {

  1083     padding-right: 46px;

  1084     padding-left: 46px; } }

  1085 

  1086 .edit-post-visual-editor .editor-post-title__block {

  1087   margin-right: auto;

  1088   margin-left: auto;

  1089   margin-bottom: -20px; }

  1090   .edit-post-visual-editor .editor-post-title__block > div {

  1091     margin-right: 0;

  1092     margin-left: 0; }

  1093   @media (min-width: 600px) {

  1094     .edit-post-visual-editor .editor-post-title__block > div {

  1095       margin-right: -2px;

  1096       margin-left: -2px; } }

  1097 

  1098 .edit-post-visual-editor .block-editor-block-list__layout > .block-editor-block-list__block[data-align="left"]:first-child,

  1099 .edit-post-visual-editor .block-editor-block-list__layout > .block-editor-block-list__block[data-align="right"]:first-child {

  1100   margin-top: 34px; }

  1101 

  1102 .edit-post-visual-editor .block-editor-default-block-appender {

  1103   margin-right: auto;

  1104   margin-left: auto;

  1105   position: relative; }

  1106   .edit-post-visual-editor .block-editor-default-block-appender[data-root-client-id=""] .block-editor-default-block-appender__content:hover {

  1107     outline: 1px solid transparent; }

  1108 

  1109 .edit-post-visual-editor .block-editor-block-list__block[data-type="core/paragraph"] p[data-is-placeholder-visible="true"] + p,

  1110 .edit-post-visual-editor .block-editor-default-block-appender__content {

  1111   min-height: 28px;

  1112   line-height: 1.8; }

  1113 

  1114 .edit-post-options-modal__section {

  1115   margin: 0 0 2rem 0; }

  1116 

  1117 .edit-post-options-modal__section-title {

  1118   font-size: 0.9rem;

  1119   font-weight: 600; }

  1120 

  1121 .edit-post-options-modal__option {

  1122   border-top: 1px solid #e2e4e7; }

  1123   .edit-post-options-modal__option:last-child {

  1124     border-bottom: 1px solid #e2e4e7; }

  1125   .edit-post-options-modal__option .components-base-control__field {

  1126     align-items: center;

  1127     display: flex;

  1128     margin: 0; }

  1129   .edit-post-options-modal__option.components-base-control + .edit-post-options-modal__option.components-base-control {

  1130     margin-bottom: 0; }

  1131   .edit-post-options-modal__option .components-checkbox-control__label {

  1132     flex-grow: 1;

  1133     padding: 0.6rem 10px 0.6rem 0; }

  1134 

  1135 /**