UNPKG

4.33 kBCSSView Raw
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/**
78* Editor Normalization Styles
79*
80* These are only output in the editor, but styles here are prefixed .editor-styles-wrapper and affect the theming
81* of the editor by themes.
82*/
83html :where(.editor-styles-wrapper) {
84 /**
85 * The following styles revert to the browser defaults overriding the WPAdmin styles.
86 * This is only needed while the block editor is not being loaded in an iframe.
87 */
88 font-family: serif;
89 font-size: initial;
90 line-height: initial;
91 color: initial;
92 background: #fff;
93}
94html :where(.editor-styles-wrapper) .wp-align-wrapper {
95 max-width: 840px;
96}
97html :where(.editor-styles-wrapper) .wp-align-wrapper > .wp-block, html :where(.editor-styles-wrapper) .wp-align-wrapper.wp-align-full {
98 max-width: none;
99}
100html :where(.editor-styles-wrapper) .wp-align-wrapper.wp-align-wide {
101 max-width: 840px;
102}
103html :where(.editor-styles-wrapper) a {
104 transition: none;
105}
106html :where(.editor-styles-wrapper) code,
107html :where(.editor-styles-wrapper) kbd {
108 padding: 0;
109 margin: 0;
110 background: inherit;
111 font-size: inherit;
112 font-family: monospace;
113}
114html :where(.editor-styles-wrapper) p {
115 font-size: revert;
116 line-height: revert;
117 margin: revert;
118}
119html :where(.editor-styles-wrapper) ul,
120html :where(.editor-styles-wrapper) ol {
121 margin: revert;
122 padding: revert;
123 list-style-type: revert;
124 box-sizing: border-box;
125}
126html :where(.editor-styles-wrapper) ul ul,
127html :where(.editor-styles-wrapper) ul ol,
128html :where(.editor-styles-wrapper) ol ul,
129html :where(.editor-styles-wrapper) ol ol {
130 margin: revert;
131}
132html :where(.editor-styles-wrapper) ul li,
133html :where(.editor-styles-wrapper) ol li {
134 margin: revert;
135}
136html :where(.editor-styles-wrapper) ul ul,
137html :where(.editor-styles-wrapper) ol ul {
138 list-style-type: revert;
139}
140html :where(.editor-styles-wrapper) h1,
141html :where(.editor-styles-wrapper) h2,
142html :where(.editor-styles-wrapper) h3,
143html :where(.editor-styles-wrapper) h4,
144html :where(.editor-styles-wrapper) h5,
145html :where(.editor-styles-wrapper) h6 {
146 font-size: revert;
147 margin: revert;
148 color: revert;
149 line-height: revert;
150 font-weight: revert;
151}
152html :where(.editor-styles-wrapper) select {
153 font-family: system-ui;
154 -webkit-appearance: revert;
155 color: revert;
156 border: revert;
157 border-radius: revert;
158 background: revert;
159 box-shadow: revert;
160 text-shadow: revert;
161 outline: revert;
162 cursor: revert;
163 transform: revert;
164 font-size: revert;
165 line-height: revert;
166 padding: revert;
167 margin: revert;
168 min-height: revert;
169 max-width: revert;
170 vertical-align: revert;
171 font-weight: revert;
172}
173html :where(.editor-styles-wrapper) select:disabled,
174html :where(.editor-styles-wrapper) select:focus {
175 color: revert;
176 border-color: revert;
177 background-color: revert;
178 background-image: revert;
179 box-shadow: revert;
180 text-shadow: revert;
181 cursor: revert;
182 transform: revert;
183}
\No newline at end of file