UNPKG

6.14 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: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
92/**
93 * Element styles.
94 */
95.wp-element-button {
96 cursor: pointer;
97}
98
99:root {
100 /*
101 * Our classes uses the same values we set for gradient value attributes,
102 * and we can not use spacing because of WP multi site kses rule.
103 */
104 /* stylelint-disable function-comma-space-after */
105 /* stylelint-enable function-comma-space-after */
106 --wp--preset--font-size--normal: 16px;
107 --wp--preset--font-size--huge: 42px;
108}
109:root .has-very-light-gray-background-color {
110 background-color: #eee;
111}
112:root .has-very-dark-gray-background-color {
113 background-color: #313131;
114}
115:root .has-very-light-gray-color {
116 color: #eee;
117}
118:root .has-very-dark-gray-color {
119 color: #313131;
120}
121:root .has-vivid-green-cyan-to-vivid-cyan-blue-gradient-background {
122 background: linear-gradient(135deg, #00d084 0%, #0693e3 100%);
123}
124:root .has-purple-crush-gradient-background {
125 background: linear-gradient(135deg, #34e2e4 0%, #4721fb 50%, #ab1dfe 100%);
126}
127:root .has-hazy-dawn-gradient-background {
128 background: linear-gradient(135deg, #faaca8 0%, #dad0ec 100%);
129}
130:root .has-subdued-olive-gradient-background {
131 background: linear-gradient(135deg, #fafae1 0%, #67a671 100%);
132}
133:root .has-atomic-cream-gradient-background {
134 background: linear-gradient(135deg, #fdd79a 0%, #004a59 100%);
135}
136:root .has-nightshade-gradient-background {
137 background: linear-gradient(135deg, #330968 0%, #31cdcf 100%);
138}
139:root .has-midnight-gradient-background {
140 background: linear-gradient(135deg, #020381 0%, #2874fc 100%);
141}
142
143.has-regular-font-size {
144 font-size: 1em;
145}
146
147.has-larger-font-size {
148 font-size: 2.625em;
149}
150
151.has-normal-font-size {
152 font-size: var(--wp--preset--font-size--normal);
153}
154
155.has-huge-font-size {
156 font-size: var(--wp--preset--font-size--huge);
157}
158
159.has-text-align-center {
160 text-align: center;
161}
162
163.has-text-align-left {
164 /*rtl:ignore*/
165 text-align: left;
166}
167
168.has-text-align-right {
169 /*rtl:ignore*/
170 text-align: right;
171}
172
173#end-resizable-editor-section {
174 display: none;
175}
176
177.aligncenter {
178 clear: both;
179}
180
181.items-justified-left {
182 justify-content: flex-start;
183}
184
185.items-justified-center {
186 justify-content: center;
187}
188
189.items-justified-right {
190 justify-content: flex-end;
191}
192
193.items-justified-space-between {
194 justify-content: space-between;
195}
196
197.screen-reader-text {
198 border: 0;
199 clip: rect(1px, 1px, 1px, 1px);
200 clip-path: inset(50%);
201 height: 1px;
202 margin: -1px;
203 overflow: hidden;
204 padding: 0;
205 position: absolute;
206 width: 1px;
207 word-wrap: normal !important;
208}
209
210.screen-reader-text:focus {
211 background-color: #ddd;
212 clip: auto !important;
213 clip-path: none;
214 color: #444;
215 display: block;
216 font-size: 1em;
217 height: auto;
218 left: 5px;
219 line-height: normal;
220 padding: 15px 23px 14px;
221 text-decoration: none;
222 top: 5px;
223 width: auto;
224 z-index: 100000;
225}
226
227/**
228 * The following provide a simple means of applying a default border style when
229 * a user first makes a selection in the border block support panel.
230 * This prevents issues such as where the user could set a border width
231 * and see no border due there being no border style set.
232 *
233 * This is intended to be removed once intelligent defaults can be set while
234 * making border selections via the block support.
235 *
236 * See: https://github.com/WordPress/gutenberg/pull/33743
237 */
238html :where(.has-border-color) {
239 border-style: solid;
240}
241
242html :where([style*="border-top-color"]) {
243 border-top-style: solid;
244}
245
246html :where([style*="border-right-color"]) {
247 border-right-style: solid;
248}
249
250html :where([style*="border-bottom-color"]) {
251 border-bottom-style: solid;
252}
253
254html :where([style*="border-left-color"]) {
255 border-left-style: solid;
256}
257
258html :where([style*="border-width"]) {
259 border-style: solid;
260}
261
262html :where([style*="border-top-width"]) {
263 border-top-style: solid;
264}
265
266html :where([style*="border-right-width"]) {
267 border-right-style: solid;
268}
269
270html :where([style*="border-bottom-width"]) {
271 border-bottom-style: solid;
272}
273
274html :where([style*="border-left-width"]) {
275 border-left-style: solid;
276}
277
278/**
279 * Provide baseline responsiveness for images.
280 */
281html :where(img[class*="wp-image-"]) {
282 height: auto;
283 max-width: 100%;
284}
285
286/**
287 * Reset user agent styles for figure element margins.
288 */
289figure {
290 margin: 0 0 1em 0;
291}
\No newline at end of file