UNPKG

6.11 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 text-align: left;
165}
166
167.has-text-align-right {
168 text-align: right;
169}
170
171#end-resizable-editor-section {
172 display: none;
173}
174
175.aligncenter {
176 clear: both;
177}
178
179.items-justified-left {
180 justify-content: flex-start;
181}
182
183.items-justified-center {
184 justify-content: center;
185}
186
187.items-justified-right {
188 justify-content: flex-end;
189}
190
191.items-justified-space-between {
192 justify-content: space-between;
193}
194
195.screen-reader-text {
196 border: 0;
197 clip: rect(1px, 1px, 1px, 1px);
198 clip-path: inset(50%);
199 height: 1px;
200 margin: -1px;
201 overflow: hidden;
202 padding: 0;
203 position: absolute;
204 width: 1px;
205 word-wrap: normal !important;
206}
207
208.screen-reader-text:focus {
209 background-color: #ddd;
210 clip: auto !important;
211 clip-path: none;
212 color: #444;
213 display: block;
214 font-size: 1em;
215 height: auto;
216 right: 5px;
217 line-height: normal;
218 padding: 15px 23px 14px;
219 text-decoration: none;
220 top: 5px;
221 width: auto;
222 z-index: 100000;
223}
224
225/**
226 * The following provide a simple means of applying a default border style when
227 * a user first makes a selection in the border block support panel.
228 * This prevents issues such as where the user could set a border width
229 * and see no border due there being no border style set.
230 *
231 * This is intended to be removed once intelligent defaults can be set while
232 * making border selections via the block support.
233 *
234 * See: https://github.com/WordPress/gutenberg/pull/33743
235 */
236html :where(.has-border-color) {
237 border-style: solid;
238}
239
240html :where([style*="border-top-color"]) {
241 border-top-style: solid;
242}
243
244html :where([style*="border-right-color"]) {
245 border-left-style: solid;
246}
247
248html :where([style*="border-bottom-color"]) {
249 border-bottom-style: solid;
250}
251
252html :where([style*="border-left-color"]) {
253 border-right-style: solid;
254}
255
256html :where([style*="border-width"]) {
257 border-style: solid;
258}
259
260html :where([style*="border-top-width"]) {
261 border-top-style: solid;
262}
263
264html :where([style*="border-right-width"]) {
265 border-left-style: solid;
266}
267
268html :where([style*="border-bottom-width"]) {
269 border-bottom-style: solid;
270}
271
272html :where([style*="border-left-width"]) {
273 border-right-style: solid;
274}
275
276/**
277 * Provide baseline responsiveness for images.
278 */
279html :where(img[class*="wp-image-"]) {
280 height: auto;
281 max-width: 100%;
282}
283
284/**
285 * Reset user agent styles for figure element margins.
286 */
287figure {
288 margin: 0 0 1em 0;
289}
\No newline at end of file