gutenberg / build / styles / block-library / theme.css

theme.css in Gutenberg 23.3.0, at build/styles/block-library/theme.css

255 lines 5.0 KB

Raw Download Zip

1	/**
2	* Typography
3	*/
4	/**
5	* SCSS Variables.
6	*
7	* Please use variables from this sheet to ensure consistency across the UI.
8	* Don't add to this sheet unless you're pretty sure the value will be reused in many places.
9	* For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
10	*/
11	/**
12	* Colors
13	*/
14	/**
15	* Fonts & basic variables.
16	*/
17	/**
18	* Typography
19	*/
20	/**
21	* Grid System.
22	* https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
23	*/
24	/**
25	* Radius scale.
26	*/
27	/**
28	* Elevation scale.
29	*/
30	/**
31	* Dimensions.
32	*/
33	/**
34	* Mobile specific styles
35	*/
36	/**
37	* Editor styles.
38	*/
39	/**
40	* Block & Editor UI.
41	*/
42	/**
43	* Block paddings.
44	*/
45	/**
46	* React Native specific.
47	* These variables do not appear to be used anywhere else.
48	*/
49	/**
50	* Breakpoints & Media Queries
51	*/
52	/**
53	* Converts a hex value into the rgb equivalent.
54	*
55	* @param {string} hex - the hexadecimal value to convert
56	* @return {string} comma separated rgb values
57	*/
58	/**
59	* Long content fade mixin
60	*
61	* Creates a fading overlay to signify that the content is longer
62	* than the space allows.
63	*/
64	/**
65	* Breakpoint mixins
66	*/
67	/**
68	* Focus styles.
69	*/
70	/**
71	* Applies editor left position to the selector passed as argument
72	*/
73	/**
74	* Styles that are reused verbatim in a few places
75	*/
76	/**
77	* Allows users to opt-out of animations via OS-level preferences.
78	*/
79	/**
80	* Reset default styles for JavaScript UI based pages.
81	* This is a WP-admin agnostic reset
82	*/
83	/**
84	* Reset the WP Admin page styles for Gutenberg-like pages.
85	*/
86	/**
87	* Creates a checkerboard pattern background to indicate transparency.
88	* @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
89	*/
90	.wp-block-audio :where(figcaption) {
91	color: #555;
92	font-size: 13px;
93	text-align: center;
94	}
95	.is-dark-theme .wp-block-audio :where(figcaption) {
96	color: rgba(255, 255, 255, 0.65);
97	}
98
99	.wp-block-audio {
100	margin: 0 0 1em 0;
101	}
102
103	.wp-block-code {
104	border: 1px solid #ccc;
105	border-radius: 4px;
106	font-family: Menlo, Consolas, monaco, monospace;
107	padding: 0.8em 1em;
108	}
109
110	.wp-block-embed :where(figcaption) {
111	color: #555;
112	font-size: 13px;
113	text-align: center;
114	}
115	.is-dark-theme .wp-block-embed :where(figcaption) {
116	color: rgba(255, 255, 255, 0.65);
117	}
118
119	.wp-block-embed {
120	margin: 0 0 1em 0;
121	}
122
123	.blocks-gallery-caption {
124	color: #555;
125	font-size: 13px;
126	text-align: center;
127	}
128	.is-dark-theme .blocks-gallery-caption {
129	color: rgba(255, 255, 255, 0.65);
130	}
131
132	:root :where(.wp-block-image figcaption) {
133	color: #555;
134	font-size: 13px;
135	text-align: center;
136	}
137	.is-dark-theme :root :where(.wp-block-image figcaption) {
138	color: rgba(255, 255, 255, 0.65);
139	}
140
141	.wp-block-image {
142	margin: 0 0 1em 0;
143	}
144
145	.wp-block-pullquote {
146	border-top: 4px solid currentColor;
147	border-bottom: 4px solid currentColor;
148	margin-bottom: 1.75em;
149	color: currentColor;
150	}
151	.wp-block-pullquote :where(cite),
152	.wp-block-pullquote :where(footer), .wp-block-pullquote__citation {
153	color: currentColor;
154	text-transform: uppercase;
155	font-size: 0.8125em;
156	font-style: normal;
157	}
158
159	.wp-block-quote {
160	border-left: 0.25em solid currentColor;
161	margin: 0 0 1.75em 0;
162	padding-left: 1em;
163	}
164	.wp-block-quote cite,
165	.wp-block-quote footer {
166	color: currentColor;
167	font-size: 0.8125em;
168	position: relative;
169	font-style: normal;
170	}
171	.wp-block-quote:where(.has-text-align-right) {
172	border-left: none;
173	border-right: 0.25em solid currentColor;
174	padding-left: 0;
175	padding-right: 1em;
176	}
177	.wp-block-quote:where(.has-text-align-center) {
178	border: none;
179	padding-left: 0;
180	}
181	.wp-block-quote:where(.is-style-plain), .wp-block-quote.is-style-large, .wp-block-quote.is-large {
182	border: none;
183	}
184
185	.wp-block-search .wp-block-search__label {
186	font-weight: bold;
187	}
188
189	.wp-block-search__button {
190	border: 1px solid #ccc;
191	padding: 0.375em 0.625em;
192	}
193
194	:where(.wp-block-group.has-background) {
195	padding: 1.25em 2.375em;
196	}
197
198	.wp-block-separator.has-css-opacity {
199	opacity: 0.4;
200	}
201
202	.wp-block-separator {
203	border: none;
204	border-bottom: 2px solid currentColor;
205	margin-left: auto;
206	margin-right: auto;
207	}
208	.wp-block-separator.has-alpha-channel-opacity {
209	opacity: initial;
210	}
211	.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
212	width: 100px;
213	}
214	.wp-block-separator.has-background:not(.is-style-dots) {
215	border-bottom: none;
216	height: 1px;
217	}
218	.wp-block-separator.has-background:not(.is-style-wide):not(.is-style-dots) {
219	height: 2px;
220	}
221
222	.wp-block-table {
223	margin: 0 0 1em 0;
224	}
225	.wp-block-table td,
226	.wp-block-table th {
227	word-break: normal;
228	}
229	.wp-block-table :where(figcaption) {
230	color: #555;
231	font-size: 13px;
232	text-align: center;
233	}
234	.is-dark-theme .wp-block-table :where(figcaption) {
235	color: rgba(255, 255, 255, 0.65);
236	}
237
238	.wp-block-video :where(figcaption) {
239	color: #555;
240	font-size: 13px;
241	text-align: center;
242	}
243	.is-dark-theme .wp-block-video :where(figcaption) {
244	color: rgba(255, 255, 255, 0.65);
245	}
246
247	.wp-block-video {
248	margin: 0 0 1em 0;
249	}
250
251	:root :where(.wp-block-template-part.has-background) {
252	padding: 1.25em 2.375em;
253	margin-top: 0;
254	margin-bottom: 0;
255	}