wp/wp-includes/css/dist/customize-widgets/style-rtl.css
changeset 18 be944660c56a
child 19 3d72ae0968f4
equal deleted inserted replaced
17:34716fd837a4 18:be944660c56a
       
     1 /**
       
     2  * Colors
       
     3  */
       
     4 /**
       
     5  * Breakpoints & Media Queries
       
     6  */
       
     7 /**
       
     8  * SCSS Variables.
       
     9  *
       
    10  * Please use variables from this sheet to ensure consistency across the UI.
       
    11  * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
       
    12  * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
       
    13  */
       
    14 /**
       
    15  * Colors
       
    16  */
       
    17 /**
       
    18  * Fonts & basic variables.
       
    19  */
       
    20 /**
       
    21  * Grid System.
       
    22  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
       
    23  */
       
    24 /**
       
    25  * Dimensions.
       
    26  */
       
    27 /**
       
    28  * Shadows.
       
    29  */
       
    30 /**
       
    31  * Editor widths.
       
    32  */
       
    33 /**
       
    34  * Block & Editor UI.
       
    35  */
       
    36 /**
       
    37  * Block paddings.
       
    38  */
       
    39 /**
       
    40  * React Native specific.
       
    41  * These variables do not appear to be used anywhere else.
       
    42  */
       
    43 /**
       
    44  * Breakpoint mixins
       
    45  */
       
    46 /**
       
    47  * Long content fade mixin
       
    48  *
       
    49  * Creates a fading overlay to signify that the content is longer
       
    50  * than the space allows.
       
    51  */
       
    52 /**
       
    53  * Focus styles.
       
    54  */
       
    55 /**
       
    56  * Applies editor left position to the selector passed as argument
       
    57  */
       
    58 /**
       
    59  * Styles that are reused verbatim in a few places
       
    60  */
       
    61 /**
       
    62  * Allows users to opt-out of animations via OS-level preferences.
       
    63  */
       
    64 /**
       
    65  * Reset default styles for JavaScript UI based pages.
       
    66  * This is a WP-admin agnostic reset
       
    67  */
       
    68 /**
       
    69  * Reset the WP Admin page styles for Gutenberg-like pages.
       
    70  */
       
    71 :root {
       
    72   --wp-admin-theme-color: #007cba;
       
    73   --wp-admin-theme-color-darker-10: #006ba1;
       
    74   --wp-admin-theme-color-darker-20: #005a87;
       
    75   --wp-admin-border-width-focus: 2px;
       
    76 }
       
    77 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
       
    78   :root {
       
    79     --wp-admin-border-width-focus: 1.5px;
       
    80   }
       
    81 }
       
    82 
       
    83 #customize-theme-controls .customize-pane-child.accordion-section-content.customize-widgets-layout__inspector {
       
    84   background: #fff;
       
    85   box-sizing: border-box;
       
    86 }
       
    87 #customize-theme-controls .customize-pane-child.accordion-section-content.customize-widgets-layout__inspector * {
       
    88   box-sizing: inherit;
       
    89 }
       
    90 #customize-theme-controls .customize-pane-child.accordion-section-content.customize-widgets-layout__inspector .block-editor-block-inspector {
       
    91   margin: -12px;
       
    92 }
       
    93 #customize-theme-controls .customize-pane-child.accordion-section-content.customize-widgets-layout__inspector .block-editor-block-inspector h3 {
       
    94   margin-bottom: 0;
       
    95 }
       
    96 
       
    97 #customize-theme-controls .customize-pane-child.control-section-sidebar.is-sub-section-open {
       
    98   transform: translateX(100%);
       
    99 }
       
   100 
       
   101 .customize-widgets-header {
       
   102   display: flex;
       
   103   justify-content: flex-end;
       
   104   margin: -15px -12px 0 -12px;
       
   105   background: #f0f0f1;
       
   106   border-bottom: 1px solid #e0e0e0;
       
   107   z-index: 8;
       
   108 }
       
   109 @media (min-width: 782px) {
       
   110   .customize-widgets-header {
       
   111     margin-bottom: 76px;
       
   112   }
       
   113 }
       
   114 .customize-widgets-header.is-fixed-toolbar-active {
       
   115   margin-bottom: 0;
       
   116 }
       
   117 
       
   118 .customize-widgets-header-toolbar {
       
   119   display: flex;
       
   120   border: none;
       
   121   width: 100%;
       
   122   align-items: center;
       
   123 }
       
   124 .customize-widgets-header-toolbar .customize-widgets-header-toolbar__inserter-toggle.components-button.has-icon {
       
   125   border-radius: 2px;
       
   126   color: #fff;
       
   127   padding: 0;
       
   128   min-width: 24px;
       
   129   height: 24px;
       
   130   margin: 12px auto 12px 0;
       
   131 }
       
   132 .customize-widgets-header-toolbar .customize-widgets-header-toolbar__inserter-toggle.components-button.has-icon::before {
       
   133   content: none;
       
   134 }
       
   135 .customize-widgets-header-toolbar .customize-widgets-header-toolbar__inserter-toggle.components-button.has-icon.is-pressed {
       
   136   background: #1e1e1e;
       
   137 }
       
   138 .customize-widgets-header-toolbar .components-button.has-icon.customize-widgets-editor-history-button.redo-button {
       
   139   margin-right: -12px;
       
   140 }
       
   141 
       
   142 #customize-sidebar-outer-content {
       
   143   width: auto;
       
   144   min-width: 100%;
       
   145 }
       
   146 
       
   147 #customize-outer-theme-controls .widgets-inserter {
       
   148   padding: 0;
       
   149 }
       
   150 #customize-outer-theme-controls .widgets-inserter .customize-section-description-container {
       
   151   display: none;
       
   152 }
       
   153 
       
   154 .customize-widgets-layout__inserter-panel {
       
   155   background: #fff;
       
   156 }
       
   157 
       
   158 .customize-widgets-layout__inserter-panel-header {
       
   159   display: flex;
       
   160   justify-content: space-between;
       
   161   align-items: center;
       
   162   padding: 16px;
       
   163   height: 46px;
       
   164   box-sizing: border-box;
       
   165   border-bottom: 1px solid #ddd;
       
   166 }
       
   167 .customize-widgets-layout__inserter-panel-header .customize-widgets-layout__inserter-panel-header-title {
       
   168   margin: 0;
       
   169 }
       
   170 
       
   171 .block-editor-inserter__quick-inserter .block-editor-inserter__panel-content {
       
   172   background: #fff;
       
   173 }
       
   174 
       
   175 .customize-widgets-keyboard-shortcut-help-modal__section {
       
   176   margin: 0 0 2rem 0;
       
   177 }
       
   178 .customize-widgets-keyboard-shortcut-help-modal__main-shortcuts .customize-widgets-keyboard-shortcut-help-modal__shortcut-list {
       
   179   margin-top: -25px;
       
   180 }
       
   181 .customize-widgets-keyboard-shortcut-help-modal__section-title {
       
   182   font-size: 0.9rem;
       
   183   font-weight: 600;
       
   184 }
       
   185 .customize-widgets-keyboard-shortcut-help-modal__shortcut {
       
   186   display: flex;
       
   187   align-items: baseline;
       
   188   padding: 0.6rem 0;
       
   189   border-top: 1px solid #ddd;
       
   190   margin-bottom: 0;
       
   191 }
       
   192 .customize-widgets-keyboard-shortcut-help-modal__shortcut:last-child {
       
   193   border-bottom: 1px solid #ddd;
       
   194 }
       
   195 .customize-widgets-keyboard-shortcut-help-modal__shortcut:empty {
       
   196   display: none;
       
   197 }
       
   198 .customize-widgets-keyboard-shortcut-help-modal__shortcut-term {
       
   199   font-weight: 600;
       
   200   margin: 0 1rem 0 0;
       
   201   text-align: left;
       
   202 }
       
   203 .customize-widgets-keyboard-shortcut-help-modal__shortcut-description {
       
   204   flex: 1;
       
   205   margin: 0;
       
   206   flex-basis: auto;
       
   207 }
       
   208 .customize-widgets-keyboard-shortcut-help-modal__shortcut-key-combination {
       
   209   display: block;
       
   210   background: none;
       
   211   margin: 0;
       
   212   padding: 0;
       
   213 }
       
   214 .customize-widgets-keyboard-shortcut-help-modal__shortcut-key-combination + .customize-widgets-keyboard-shortcut-help-modal__shortcut-key-combination {
       
   215   margin-top: 10px;
       
   216 }
       
   217 .customize-widgets-keyboard-shortcut-help-modal__shortcut-key {
       
   218   padding: 0.25rem 0.5rem;
       
   219   border-radius: 8%;
       
   220   margin: 0 0.2rem 0 0.2rem;
       
   221 }
       
   222 .customize-widgets-keyboard-shortcut-help-modal__shortcut-key:last-child {
       
   223   margin: 0 0.2rem 0 0;
       
   224 }
       
   225 
       
   226 .customize-widgets-more-menu {
       
   227   margin-right: -4px;
       
   228 }
       
   229 .customize-widgets-more-menu .components-button {
       
   230   width: auto;
       
   231   padding: 0 2px;
       
   232 }
       
   233 @media (min-width: 600px) {
       
   234   .customize-widgets-more-menu {
       
   235     margin-right: 0;
       
   236   }
       
   237   .customize-widgets-more-menu .components-button {
       
   238     padding: 0 4px;
       
   239   }
       
   240 }
       
   241 
       
   242 .customize-widgets-more-menu__content .components-popover__content {
       
   243   min-width: 280px;
       
   244 }
       
   245 @media (min-width: 480px) {
       
   246   .customize-widgets-more-menu__content .components-popover__content {
       
   247     width: auto;
       
   248     max-width: 480px;
       
   249   }
       
   250 }
       
   251 .customize-widgets-more-menu__content .components-popover__content .components-dropdown-menu__menu {
       
   252   padding: 0;
       
   253 }
       
   254 
       
   255 .components-popover.customize-widgets-more-menu__content {
       
   256   z-index: 99998;
       
   257 }
       
   258 
       
   259 .block-editor-block-contextual-toolbar.is-fixed {
       
   260   top: 0;
       
   261   margin-right: -12px;
       
   262   margin-left: -12px;
       
   263   width: calc(100% + 24px);
       
   264   overflow-y: auto;
       
   265   z-index: 7;
       
   266 }
       
   267 
       
   268 .customize-control-sidebar_block_editor .block-editor-block-list__block-popover {
       
   269   position: fixed;
       
   270   z-index: 7;
       
   271 }
       
   272 
       
   273 .customize-widgets-welcome-guide__image__wrapper {
       
   274   background: #00a0d2;
       
   275   text-align: center;
       
   276   margin-bottom: 8px;
       
   277 }
       
   278 .customize-widgets-welcome-guide__image {
       
   279   height: auto;
       
   280 }
       
   281 .wrap .customize-widgets-welcome-guide__heading {
       
   282   font-size: 18px;
       
   283   font-weight: 600;
       
   284 }
       
   285 .customize-widgets-welcome-guide__text {
       
   286   line-height: 1.7;
       
   287 }
       
   288 .customize-widgets-welcome-guide__button {
       
   289   justify-content: center;
       
   290   margin: 1em 0;
       
   291   width: 100%;
       
   292 }
       
   293 .customize-widgets-welcome-guide__separator {
       
   294   margin: 1em 0;
       
   295 }
       
   296 .customize-widgets-welcome-guide__more-info {
       
   297   line-height: 1.4;
       
   298 }
       
   299 
       
   300 #customize-theme-controls .customize-pane-child.customize-widgets__sidebar-section {
       
   301   min-height: 100%;
       
   302   background-color: #fff;
       
   303   padding-top: 12px !important;
       
   304 }
       
   305 #customize-theme-controls .customize-pane-child.customize-widgets__sidebar-section.open {
       
   306   overflow: unset;
       
   307 }
       
   308 #customize-theme-controls .customize-pane-child.customize-widgets__sidebar-section .customize-section-title {
       
   309   position: static !important;
       
   310   margin-top: -12px !important;
       
   311   width: unset !important;
       
   312 }
       
   313 
       
   314 .components-modal__screen-overlay {
       
   315   z-index: 999999;
       
   316 }
       
   317 
       
   318 .customize-control-sidebar_block_editor,
       
   319 .customize-widgets-layout__inspector,
       
   320 .customize-widgets-popover {
       
   321   box-sizing: border-box;
       
   322 }
       
   323 .customize-control-sidebar_block_editor *,
       
   324 .customize-control-sidebar_block_editor *::before,
       
   325 .customize-control-sidebar_block_editor *::after,
       
   326 .customize-widgets-layout__inspector *,
       
   327 .customize-widgets-layout__inspector *::before,
       
   328 .customize-widgets-layout__inspector *::after,
       
   329 .customize-widgets-popover *,
       
   330 .customize-widgets-popover *::before,
       
   331 .customize-widgets-popover *::after {
       
   332   box-sizing: inherit;
       
   333 }