Brak opisu

style-rtl.css 6.4KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243
  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. * Converts a hex value into the rgb equivalent.
  45. *
  46. * @param {string} hex - the hexadecimal value to convert
  47. * @return {string} comma separated rgb values
  48. */
  49. /**
  50. * Breakpoint mixins
  51. */
  52. /**
  53. * Long content fade mixin
  54. *
  55. * Creates a fading overlay to signify that the content is longer
  56. * than the space allows.
  57. */
  58. /**
  59. * Focus styles.
  60. */
  61. /**
  62. * Applies editor left position to the selector passed as argument
  63. */
  64. /**
  65. * Styles that are reused verbatim in a few places
  66. */
  67. /**
  68. * Allows users to opt-out of animations via OS-level preferences.
  69. */
  70. /**
  71. * Reset default styles for JavaScript UI based pages.
  72. * This is a WP-admin agnostic reset
  73. */
  74. /**
  75. * Reset the WP Admin page styles for Gutenberg-like pages.
  76. */
  77. :root {
  78. --wp-admin-theme-color: #007cba;
  79. --wp-admin-theme-color--rgb: 0, 124, 186;
  80. --wp-admin-theme-color-darker-10: #006ba1;
  81. --wp-admin-theme-color-darker-10--rgb: 0, 107, 161;
  82. --wp-admin-theme-color-darker-20: #005a87;
  83. --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
  84. --wp-admin-border-width-focus: 2px;
  85. }
  86. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  87. :root {
  88. --wp-admin-border-width-focus: 1.5px;
  89. }
  90. }
  91. .list-reusable-blocks-import-dropdown__content .components-popover__content > div {
  92. padding: 10px;
  93. }
  94. .list-reusable-blocks-import-form__label {
  95. display: block;
  96. margin-bottom: 10px;
  97. }
  98. .list-reusable-blocks-import-form__button {
  99. margin-top: 10px;
  100. margin-bottom: 10px;
  101. float: left;
  102. }
  103. .list-reusable-blocks-import-form .components-notice__content {
  104. margin: 0;
  105. }
  106. .list-reusable-blocks-import-form .components-notice.is-dismissible {
  107. padding-left: 0;
  108. margin: 5px 0;
  109. }
  110. .list-reusable-blocks__container {
  111. display: inline-flex;
  112. align-items: center;
  113. position: relative;
  114. top: -3px;
  115. }
  116. .list-reusable-blocks__container .components-button {
  117. height: 26px;
  118. }
  119. body.admin-color-light {
  120. --wp-admin-theme-color: #0085ba;
  121. --wp-admin-theme-color--rgb: 0, 133, 186;
  122. --wp-admin-theme-color-darker-10: #0073a1;
  123. --wp-admin-theme-color-darker-10--rgb: 0, 115, 161;
  124. --wp-admin-theme-color-darker-20: #006187;
  125. --wp-admin-theme-color-darker-20--rgb: 0, 97, 135;
  126. --wp-admin-border-width-focus: 2px;
  127. }
  128. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  129. body.admin-color-light {
  130. --wp-admin-border-width-focus: 1.5px;
  131. }
  132. }
  133. body.admin-color-modern {
  134. --wp-admin-theme-color: #3858e9;
  135. --wp-admin-theme-color--rgb: 56, 88, 233;
  136. --wp-admin-theme-color-darker-10: #2145e6;
  137. --wp-admin-theme-color-darker-10--rgb: 33, 69, 230;
  138. --wp-admin-theme-color-darker-20: #183ad6;
  139. --wp-admin-theme-color-darker-20--rgb: 24, 58, 214;
  140. --wp-admin-border-width-focus: 2px;
  141. }
  142. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  143. body.admin-color-modern {
  144. --wp-admin-border-width-focus: 1.5px;
  145. }
  146. }
  147. body.admin-color-blue {
  148. --wp-admin-theme-color: #096484;
  149. --wp-admin-theme-color--rgb: 9, 100, 132;
  150. --wp-admin-theme-color-darker-10: #07526c;
  151. --wp-admin-theme-color-darker-10--rgb: 7, 82, 108;
  152. --wp-admin-theme-color-darker-20: #064054;
  153. --wp-admin-theme-color-darker-20--rgb: 6, 64, 84;
  154. --wp-admin-border-width-focus: 2px;
  155. }
  156. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  157. body.admin-color-blue {
  158. --wp-admin-border-width-focus: 1.5px;
  159. }
  160. }
  161. body.admin-color-coffee {
  162. --wp-admin-theme-color: #46403c;
  163. --wp-admin-theme-color--rgb: 70, 64, 60;
  164. --wp-admin-theme-color-darker-10: #383330;
  165. --wp-admin-theme-color-darker-10--rgb: 56, 51, 48;
  166. --wp-admin-theme-color-darker-20: #2b2724;
  167. --wp-admin-theme-color-darker-20--rgb: 43, 39, 36;
  168. --wp-admin-border-width-focus: 2px;
  169. }
  170. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  171. body.admin-color-coffee {
  172. --wp-admin-border-width-focus: 1.5px;
  173. }
  174. }
  175. body.admin-color-ectoplasm {
  176. --wp-admin-theme-color: #523f6d;
  177. --wp-admin-theme-color--rgb: 82, 63, 109;
  178. --wp-admin-theme-color-darker-10: #46365d;
  179. --wp-admin-theme-color-darker-10--rgb: 70, 54, 93;
  180. --wp-admin-theme-color-darker-20: #3a2c4d;
  181. --wp-admin-theme-color-darker-20--rgb: 58, 44, 77;
  182. --wp-admin-border-width-focus: 2px;
  183. }
  184. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  185. body.admin-color-ectoplasm {
  186. --wp-admin-border-width-focus: 1.5px;
  187. }
  188. }
  189. body.admin-color-midnight {
  190. --wp-admin-theme-color: #e14d43;
  191. --wp-admin-theme-color--rgb: 225, 77, 67;
  192. --wp-admin-theme-color-darker-10: #dd382d;
  193. --wp-admin-theme-color-darker-10--rgb: 221, 56, 45;
  194. --wp-admin-theme-color-darker-20: #d02c21;
  195. --wp-admin-theme-color-darker-20--rgb: 208, 44, 33;
  196. --wp-admin-border-width-focus: 2px;
  197. }
  198. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  199. body.admin-color-midnight {
  200. --wp-admin-border-width-focus: 1.5px;
  201. }
  202. }
  203. body.admin-color-ocean {
  204. --wp-admin-theme-color: #627c83;
  205. --wp-admin-theme-color--rgb: 98, 124, 131;
  206. --wp-admin-theme-color-darker-10: #576e74;
  207. --wp-admin-theme-color-darker-10--rgb: 87, 110, 116;
  208. --wp-admin-theme-color-darker-20: #4c6066;
  209. --wp-admin-theme-color-darker-20--rgb: 76, 96, 102;
  210. --wp-admin-border-width-focus: 2px;
  211. }
  212. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  213. body.admin-color-ocean {
  214. --wp-admin-border-width-focus: 1.5px;
  215. }
  216. }
  217. body.admin-color-sunrise {
  218. --wp-admin-theme-color: #dd823b;
  219. --wp-admin-theme-color--rgb: 221, 130, 59;
  220. --wp-admin-theme-color-darker-10: #d97426;
  221. --wp-admin-theme-color-darker-10--rgb: 217, 116, 38;
  222. --wp-admin-theme-color-darker-20: #c36922;
  223. --wp-admin-theme-color-darker-20--rgb: 195, 105, 34;
  224. --wp-admin-border-width-focus: 2px;
  225. }
  226. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  227. body.admin-color-sunrise {
  228. --wp-admin-border-width-focus: 1.5px;
  229. }
  230. }