1 /** |
1 :root{ |
2 * Colors |
2 --wp-admin-theme-color:#007cba; |
3 */ |
3 --wp-admin-theme-color--rgb:0, 124, 186; |
4 /** |
4 --wp-admin-theme-color-darker-10:#006ba1; |
5 * Breakpoints & Media Queries |
5 --wp-admin-theme-color-darker-10--rgb:0, 107, 161; |
6 */ |
6 --wp-admin-theme-color-darker-20:#005a87; |
7 /** |
7 --wp-admin-theme-color-darker-20--rgb:0, 90, 135; |
8 * SCSS Variables. |
8 --wp-admin-border-width-focus:2px; |
9 * |
9 --wp-block-synced-color:#7a00df; |
10 * Please use variables from this sheet to ensure consistency across the UI. |
10 --wp-block-synced-color--rgb:122, 0, 223; |
11 * Don't add to this sheet unless you're pretty sure the value will be reused in many places. |
11 --wp-bound-block-color:var(--wp-block-synced-color); |
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 } |
12 } |
86 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { |
13 @media (min-resolution:192dpi){ |
87 :root { |
14 :root{ |
88 --wp-admin-border-width-focus: 1.5px; |
15 --wp-admin-border-width-focus:1.5px; |
89 } |
16 } |
90 } |
17 } |
91 |
18 .wp-element-button{ |
92 :root { |
19 cursor:pointer; |
93 /* |
|
94 * Our classes uses the same values we set for gradient value attributes, |
|
95 * and we can not use spacing because of WP multi site kses rule. |
|
96 */ |
|
97 /* stylelint-disable function-comma-space-after */ |
|
98 /* stylelint-enable function-comma-space-after */ |
|
99 --wp--preset--font-size--normal: 16px; |
|
100 --wp--preset--font-size--huge: 42px; |
|
101 } |
|
102 :root .has-very-light-gray-background-color { |
|
103 background-color: #eee; |
|
104 } |
|
105 :root .has-very-dark-gray-background-color { |
|
106 background-color: #313131; |
|
107 } |
|
108 :root .has-very-light-gray-color { |
|
109 color: #eee; |
|
110 } |
|
111 :root .has-very-dark-gray-color { |
|
112 color: #313131; |
|
113 } |
|
114 :root .has-vivid-green-cyan-to-vivid-cyan-blue-gradient-background { |
|
115 background: linear-gradient(135deg, #00d084 0%, #0693e3 100%); |
|
116 } |
|
117 :root .has-purple-crush-gradient-background { |
|
118 background: linear-gradient(135deg, #34e2e4 0%, #4721fb 50%, #ab1dfe 100%); |
|
119 } |
|
120 :root .has-hazy-dawn-gradient-background { |
|
121 background: linear-gradient(135deg, #faaca8 0%, #dad0ec 100%); |
|
122 } |
|
123 :root .has-subdued-olive-gradient-background { |
|
124 background: linear-gradient(135deg, #fafae1 0%, #67a671 100%); |
|
125 } |
|
126 :root .has-atomic-cream-gradient-background { |
|
127 background: linear-gradient(135deg, #fdd79a 0%, #004a59 100%); |
|
128 } |
|
129 :root .has-nightshade-gradient-background { |
|
130 background: linear-gradient(135deg, #330968 0%, #31cdcf 100%); |
|
131 } |
|
132 :root .has-midnight-gradient-background { |
|
133 background: linear-gradient(135deg, #020381 0%, #2874fc 100%); |
|
134 } |
20 } |
135 |
21 |
136 .has-regular-font-size { |
22 :root{ |
137 font-size: 1em; |
23 --wp--preset--font-size--normal:16px; |
|
24 --wp--preset--font-size--huge:42px; |
|
25 } |
|
26 :root .has-very-light-gray-background-color{ |
|
27 background-color:#eee; |
|
28 } |
|
29 :root .has-very-dark-gray-background-color{ |
|
30 background-color:#313131; |
|
31 } |
|
32 :root .has-very-light-gray-color{ |
|
33 color:#eee; |
|
34 } |
|
35 :root .has-very-dark-gray-color{ |
|
36 color:#313131; |
|
37 } |
|
38 :root .has-vivid-green-cyan-to-vivid-cyan-blue-gradient-background{ |
|
39 background:linear-gradient(135deg, #00d084, #0693e3); |
|
40 } |
|
41 :root .has-purple-crush-gradient-background{ |
|
42 background:linear-gradient(135deg, #34e2e4, #4721fb 50%, #ab1dfe); |
|
43 } |
|
44 :root .has-hazy-dawn-gradient-background{ |
|
45 background:linear-gradient(135deg, #faaca8, #dad0ec); |
|
46 } |
|
47 :root .has-subdued-olive-gradient-background{ |
|
48 background:linear-gradient(135deg, #fafae1, #67a671); |
|
49 } |
|
50 :root .has-atomic-cream-gradient-background{ |
|
51 background:linear-gradient(135deg, #fdd79a, #004a59); |
|
52 } |
|
53 :root .has-nightshade-gradient-background{ |
|
54 background:linear-gradient(135deg, #330968, #31cdcf); |
|
55 } |
|
56 :root .has-midnight-gradient-background{ |
|
57 background:linear-gradient(135deg, #020381, #2874fc); |
138 } |
58 } |
139 |
59 |
140 .has-larger-font-size { |
60 .has-regular-font-size{ |
141 font-size: 2.625em; |
61 font-size:1em; |
142 } |
62 } |
143 |
63 |
144 .has-normal-font-size { |
64 .has-larger-font-size{ |
145 font-size: var(--wp--preset--font-size--normal); |
65 font-size:2.625em; |
146 } |
66 } |
147 |
67 |
148 .has-huge-font-size { |
68 .has-normal-font-size{ |
149 font-size: var(--wp--preset--font-size--huge); |
69 font-size:var(--wp--preset--font-size--normal); |
150 } |
70 } |
151 |
71 |
152 .has-text-align-center { |
72 .has-huge-font-size{ |
153 text-align: center; |
73 font-size:var(--wp--preset--font-size--huge); |
154 } |
74 } |
155 |
75 |
156 .has-text-align-left { |
76 .has-text-align-center{ |
157 /*rtl:ignore*/ |
77 text-align:center; |
158 text-align: left; |
|
159 } |
78 } |
160 |
79 |
161 .has-text-align-right { |
80 .has-text-align-left{ |
162 /*rtl:ignore*/ |
81 text-align:left; |
163 text-align: right; |
|
164 } |
82 } |
165 |
83 |
166 #end-resizable-editor-section { |
84 .has-text-align-right{ |
167 display: none; |
85 text-align:right; |
168 } |
86 } |
169 |
87 |
170 .aligncenter { |
88 #end-resizable-editor-section{ |
171 clear: both; |
89 display:none; |
172 } |
90 } |
173 |
91 |
174 .items-justified-left { |
92 .aligncenter{ |
175 justify-content: flex-start; |
93 clear:both; |
176 } |
94 } |
177 |
95 |
178 .items-justified-center { |
96 .items-justified-left{ |
179 justify-content: center; |
97 justify-content:flex-start; |
180 } |
98 } |
181 |
99 |
182 .items-justified-right { |
100 .items-justified-center{ |
183 justify-content: flex-end; |
101 justify-content:center; |
184 } |
102 } |
185 |
103 |
186 .items-justified-space-between { |
104 .items-justified-right{ |
187 justify-content: space-between; |
105 justify-content:flex-end; |
188 } |
106 } |
189 |
107 |
190 .screen-reader-text { |
108 .items-justified-space-between{ |
191 border: 0; |
109 justify-content:space-between; |
192 clip: rect(1px, 1px, 1px, 1px); |
|
193 -webkit-clip-path: inset(50%); |
|
194 clip-path: inset(50%); |
|
195 height: 1px; |
|
196 margin: -1px; |
|
197 overflow: hidden; |
|
198 padding: 0; |
|
199 position: absolute; |
|
200 width: 1px; |
|
201 word-wrap: normal !important; |
|
202 } |
110 } |
203 |
111 |
204 .screen-reader-text:focus { |
112 .screen-reader-text{ |
205 background-color: #ddd; |
113 border:0; |
206 clip: auto !important; |
114 clip:rect(1px, 1px, 1px, 1px); |
207 -webkit-clip-path: none; |
115 clip-path:inset(50%); |
208 clip-path: none; |
116 height:1px; |
209 color: #444; |
117 margin:-1px; |
210 display: block; |
118 overflow:hidden; |
211 font-size: 1em; |
119 padding:0; |
212 height: auto; |
120 position:absolute; |
213 left: 5px; |
121 width:1px; |
214 line-height: normal; |
122 word-wrap:normal !important; |
215 padding: 15px 23px 14px; |
|
216 text-decoration: none; |
|
217 top: 5px; |
|
218 width: auto; |
|
219 z-index: 100000; |
|
220 } |
123 } |
221 |
124 |
222 /** |
125 .screen-reader-text:focus{ |
223 * The following provide a simple means of applying a default border style when |
126 background-color:#ddd; |
224 * a user first makes a selection in the border block support panel. |
127 clip:auto !important; |
225 * This prevents issues such as where the user could set a border width |
128 clip-path:none; |
226 * and see no border due there being no border style set. |
129 color:#444; |
227 * |
130 display:block; |
228 * This is intended to be removed once intelligent defaults can be set while |
131 font-size:1em; |
229 * making border selections via the block support. |
132 height:auto; |
230 * |
133 left:5px; |
231 * See: https://github.com/WordPress/gutenberg/pull/33743 |
134 line-height:normal; |
232 */ |
135 padding:15px 23px 14px; |
233 html :where(.has-border-color) { |
136 text-decoration:none; |
234 border-style: solid; |
137 top:5px; |
|
138 width:auto; |
|
139 z-index:100000; |
|
140 } |
|
141 html :where(.has-border-color){ |
|
142 border-style:solid; |
235 } |
143 } |
236 |
144 |
237 html :where([style*="border-width"]) { |
145 html :where([style*=border-top-color]){ |
238 border-style: solid; |
146 border-top-style:solid; |
239 } |
147 } |
240 |
148 |
241 /** |
149 html :where([style*=border-right-color]){ |
242 * Provide baseline responsiveness for images. |
150 border-right-style:solid; |
243 */ |
|
244 html :where(img[class*="wp-image-"]) { |
|
245 height: auto; |
|
246 max-width: 100%; |
|
247 } |
151 } |
|
152 |
|
153 html :where([style*=border-bottom-color]){ |
|
154 border-bottom-style:solid; |
|
155 } |
|
156 |
|
157 html :where([style*=border-left-color]){ |
|
158 border-left-style:solid; |
|
159 } |
|
160 |
|
161 html :where([style*=border-width]){ |
|
162 border-style:solid; |
|
163 } |
|
164 |
|
165 html :where([style*=border-top-width]){ |
|
166 border-top-style:solid; |
|
167 } |
|
168 |
|
169 html :where([style*=border-right-width]){ |
|
170 border-right-style:solid; |
|
171 } |
|
172 |
|
173 html :where([style*=border-bottom-width]){ |
|
174 border-bottom-style:solid; |
|
175 } |
|
176 |
|
177 html :where([style*=border-left-width]){ |
|
178 border-left-style:solid; |
|
179 } |
|
180 html :where(img[class*=wp-image-]){ |
|
181 height:auto; |
|
182 max-width:100%; |
|
183 } |
|
184 :where(figure){ |
|
185 margin:0 0 1em; |
|
186 } |
|
187 |
|
188 html :where(.is-position-sticky){ |
|
189 --wp-admin--admin-bar--position-offset:var(--wp-admin--admin-bar--height, 0px); |
|
190 } |
|
191 |
|
192 @media screen and (max-width:600px){ |
|
193 html :where(.is-position-sticky){ |
|
194 --wp-admin--admin-bar--position-offset:0px; |
|
195 } |
|
196 } |