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 text-align: left; |
77 text-align:center; |
158 } |
78 } |
159 |
79 |
160 .has-text-align-right { |
80 .has-text-align-left{ |
161 text-align: right; |
81 text-align:left; |
162 } |
82 } |
163 |
83 |
164 #end-resizable-editor-section { |
84 .has-text-align-right{ |
165 display: none; |
85 text-align:right; |
166 } |
86 } |
167 |
87 |
168 .aligncenter { |
88 #end-resizable-editor-section{ |
169 clear: both; |
89 display:none; |
170 } |
90 } |
171 |
91 |
172 .items-justified-left { |
92 .aligncenter{ |
173 justify-content: flex-start; |
93 clear:both; |
174 } |
94 } |
175 |
95 |
176 .items-justified-center { |
96 .items-justified-left{ |
177 justify-content: center; |
97 justify-content:flex-start; |
178 } |
98 } |
179 |
99 |
180 .items-justified-right { |
100 .items-justified-center{ |
181 justify-content: flex-end; |
101 justify-content:center; |
182 } |
102 } |
183 |
103 |
184 .items-justified-space-between { |
104 .items-justified-right{ |
185 justify-content: space-between; |
105 justify-content:flex-end; |
186 } |
106 } |
187 |
107 |
188 .screen-reader-text { |
108 .items-justified-space-between{ |
189 border: 0; |
109 justify-content:space-between; |
190 clip: rect(1px, 1px, 1px, 1px); |
|
191 -webkit-clip-path: inset(50%); |
|
192 clip-path: inset(50%); |
|
193 height: 1px; |
|
194 margin: -1px; |
|
195 overflow: hidden; |
|
196 padding: 0; |
|
197 position: absolute; |
|
198 width: 1px; |
|
199 word-wrap: normal !important; |
|
200 } |
110 } |
201 |
111 |
202 .screen-reader-text:focus { |
112 .screen-reader-text{ |
203 background-color: #ddd; |
113 border:0; |
204 clip: auto !important; |
114 clip:rect(1px, 1px, 1px, 1px); |
205 -webkit-clip-path: none; |
115 clip-path:inset(50%); |
206 clip-path: none; |
116 height:1px; |
207 color: #444; |
117 margin:-1px; |
208 display: block; |
118 overflow:hidden; |
209 font-size: 1em; |
119 padding:0; |
210 height: auto; |
120 position:absolute; |
211 right: 5px; |
121 width:1px; |
212 line-height: normal; |
122 word-wrap:normal !important; |
213 padding: 15px 23px 14px; |
|
214 text-decoration: none; |
|
215 top: 5px; |
|
216 width: auto; |
|
217 z-index: 100000; |
|
218 } |
123 } |
219 |
124 |
220 /** |
125 .screen-reader-text:focus{ |
221 * The following provide a simple means of applying a default border style when |
126 background-color:#ddd; |
222 * a user first makes a selection in the border block support panel. |
127 clip:auto !important; |
223 * This prevents issues such as where the user could set a border width |
128 clip-path:none; |
224 * and see no border due there being no border style set. |
129 color:#444; |
225 * |
130 display:block; |
226 * This is intended to be removed once intelligent defaults can be set while |
131 font-size:1em; |
227 * making border selections via the block support. |
132 height:auto; |
228 * |
133 line-height:normal; |
229 * See: https://github.com/WordPress/gutenberg/pull/33743 |
134 padding:15px 23px 14px; |
230 */ |
135 right:5px; |
231 html :where(.has-border-color) { |
136 text-decoration:none; |
232 border-style: solid; |
137 top:5px; |
|
138 width:auto; |
|
139 z-index:100000; |
|
140 } |
|
141 html :where(.has-border-color){ |
|
142 border-style:solid; |
233 } |
143 } |
234 |
144 |
235 html :where([style*="border-width"]) { |
145 html :where([style*=border-top-color]){ |
236 border-style: solid; |
146 border-top-style:solid; |
237 } |
147 } |
238 |
148 |
239 /** |
149 html :where([style*=border-right-color]){ |
240 * Provide baseline responsiveness for images. |
150 border-left-style:solid; |
241 */ |
|
242 html :where(img[class*="wp-image-"]) { |
|
243 height: auto; |
|
244 max-width: 100%; |
|
245 } |
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-right-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-left-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-right-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 } |