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 |
92 .list-reusable-blocks-import-dropdown__content .components-popover__content > div { |
19 .list-reusable-blocks-import-dropdown__content .components-popover__content{ |
93 padding: 10px; |
20 padding:10px; |
94 } |
21 } |
95 |
22 |
96 .list-reusable-blocks-import-form__label { |
23 .list-reusable-blocks-import-form__label{ |
97 display: block; |
24 display:block; |
98 margin-bottom: 10px; |
25 margin-bottom:10px; |
99 } |
26 } |
100 |
27 |
101 .list-reusable-blocks-import-form__button { |
28 .list-reusable-blocks-import-form__button{ |
102 margin-top: 10px; |
29 float:right; |
103 margin-bottom: 10px; |
30 margin-bottom:10px; |
104 float: right; |
31 margin-top:10px; |
105 } |
32 } |
106 |
33 |
107 .list-reusable-blocks-import-form .components-notice__content { |
34 .list-reusable-blocks-import-form .components-notice__content{ |
108 margin: 0; |
35 margin:0; |
109 } |
36 } |
110 .list-reusable-blocks-import-form .components-notice.is-dismissible { |
37 .list-reusable-blocks-import-form .components-notice.is-dismissible{ |
111 padding-right: 0; |
38 margin:5px 0; |
112 margin: 5px 0; |
39 padding-right:0; |
113 } |
40 } |
114 |
41 |
115 .list-reusable-blocks__container { |
42 .list-reusable-blocks__container{ |
116 display: inline-flex; |
43 align-items:center; |
117 align-items: center; |
44 display:inline-flex; |
118 position: relative; |
45 position:relative; |
119 top: -3px; |
46 top:-3px; |
120 } |
47 } |
121 .list-reusable-blocks__container .components-button { |
48 .list-reusable-blocks__container .components-button{ |
122 height: 26px; |
49 height:26px; |
123 } |
50 } |
124 |
51 |
125 body.admin-color-light { |
52 body.admin-color-light{ |
126 --wp-admin-theme-color: #0085ba; |
53 --wp-admin-theme-color:#0085ba; |
127 --wp-admin-theme-color--rgb: 0, 133, 186; |
54 --wp-admin-theme-color--rgb:0, 133, 186; |
128 --wp-admin-theme-color-darker-10: #0073a1; |
55 --wp-admin-theme-color-darker-10:#0073a1; |
129 --wp-admin-theme-color-darker-10--rgb: 0, 115, 161; |
56 --wp-admin-theme-color-darker-10--rgb:0, 115, 161; |
130 --wp-admin-theme-color-darker-20: #006187; |
57 --wp-admin-theme-color-darker-20:#006187; |
131 --wp-admin-theme-color-darker-20--rgb: 0, 97, 135; |
58 --wp-admin-theme-color-darker-20--rgb:0, 97, 135; |
132 --wp-admin-border-width-focus: 2px; |
59 --wp-admin-border-width-focus:2px; |
133 } |
60 } |
134 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { |
61 @media (min-resolution:192dpi){ |
135 body.admin-color-light { |
62 body.admin-color-light{ |
136 --wp-admin-border-width-focus: 1.5px; |
63 --wp-admin-border-width-focus:1.5px; |
137 } |
64 } |
138 } |
65 } |
139 |
66 |
140 body.admin-color-modern { |
67 body.admin-color-modern{ |
141 --wp-admin-theme-color: #3858e9; |
68 --wp-admin-theme-color:#3858e9; |
142 --wp-admin-theme-color--rgb: 56, 88, 233; |
69 --wp-admin-theme-color--rgb:56, 88, 233; |
143 --wp-admin-theme-color-darker-10: #2145e6; |
70 --wp-admin-theme-color-darker-10:#2145e6; |
144 --wp-admin-theme-color-darker-10--rgb: 33, 69, 230; |
71 --wp-admin-theme-color-darker-10--rgb:33, 69, 230; |
145 --wp-admin-theme-color-darker-20: #183ad6; |
72 --wp-admin-theme-color-darker-20:#183ad6; |
146 --wp-admin-theme-color-darker-20--rgb: 24, 58, 214; |
73 --wp-admin-theme-color-darker-20--rgb:24, 58, 214; |
147 --wp-admin-border-width-focus: 2px; |
74 --wp-admin-border-width-focus:2px; |
148 } |
75 } |
149 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { |
76 @media (min-resolution:192dpi){ |
150 body.admin-color-modern { |
77 body.admin-color-modern{ |
151 --wp-admin-border-width-focus: 1.5px; |
78 --wp-admin-border-width-focus:1.5px; |
152 } |
79 } |
153 } |
80 } |
154 |
81 |
155 body.admin-color-blue { |
82 body.admin-color-blue{ |
156 --wp-admin-theme-color: #096484; |
83 --wp-admin-theme-color:#096484; |
157 --wp-admin-theme-color--rgb: 9, 100, 132; |
84 --wp-admin-theme-color--rgb:9, 100, 132; |
158 --wp-admin-theme-color-darker-10: #07526c; |
85 --wp-admin-theme-color-darker-10:#07526c; |
159 --wp-admin-theme-color-darker-10--rgb: 7, 82, 108; |
86 --wp-admin-theme-color-darker-10--rgb:7, 82, 108; |
160 --wp-admin-theme-color-darker-20: #064054; |
87 --wp-admin-theme-color-darker-20:#064054; |
161 --wp-admin-theme-color-darker-20--rgb: 6, 64, 84; |
88 --wp-admin-theme-color-darker-20--rgb:6, 64, 84; |
162 --wp-admin-border-width-focus: 2px; |
89 --wp-admin-border-width-focus:2px; |
163 } |
90 } |
164 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { |
91 @media (min-resolution:192dpi){ |
165 body.admin-color-blue { |
92 body.admin-color-blue{ |
166 --wp-admin-border-width-focus: 1.5px; |
93 --wp-admin-border-width-focus:1.5px; |
167 } |
94 } |
168 } |
95 } |
169 |
96 |
170 body.admin-color-coffee { |
97 body.admin-color-coffee{ |
171 --wp-admin-theme-color: #46403c; |
98 --wp-admin-theme-color:#46403c; |
172 --wp-admin-theme-color--rgb: 70, 64, 60; |
99 --wp-admin-theme-color--rgb:70, 64, 60; |
173 --wp-admin-theme-color-darker-10: #383330; |
100 --wp-admin-theme-color-darker-10:#383330; |
174 --wp-admin-theme-color-darker-10--rgb: 56, 51, 48; |
101 --wp-admin-theme-color-darker-10--rgb:56, 51, 48; |
175 --wp-admin-theme-color-darker-20: #2b2724; |
102 --wp-admin-theme-color-darker-20:#2b2724; |
176 --wp-admin-theme-color-darker-20--rgb: 43, 39, 36; |
103 --wp-admin-theme-color-darker-20--rgb:43, 39, 36; |
177 --wp-admin-border-width-focus: 2px; |
104 --wp-admin-border-width-focus:2px; |
178 } |
105 } |
179 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { |
106 @media (min-resolution:192dpi){ |
180 body.admin-color-coffee { |
107 body.admin-color-coffee{ |
181 --wp-admin-border-width-focus: 1.5px; |
108 --wp-admin-border-width-focus:1.5px; |
182 } |
109 } |
183 } |
110 } |
184 |
111 |
185 body.admin-color-ectoplasm { |
112 body.admin-color-ectoplasm{ |
186 --wp-admin-theme-color: #523f6d; |
113 --wp-admin-theme-color:#523f6d; |
187 --wp-admin-theme-color--rgb: 82, 63, 109; |
114 --wp-admin-theme-color--rgb:82, 63, 109; |
188 --wp-admin-theme-color-darker-10: #46365d; |
115 --wp-admin-theme-color-darker-10:#46365d; |
189 --wp-admin-theme-color-darker-10--rgb: 70, 54, 93; |
116 --wp-admin-theme-color-darker-10--rgb:70, 54, 93; |
190 --wp-admin-theme-color-darker-20: #3a2c4d; |
117 --wp-admin-theme-color-darker-20:#3a2c4d; |
191 --wp-admin-theme-color-darker-20--rgb: 58, 44, 77; |
118 --wp-admin-theme-color-darker-20--rgb:58, 44, 77; |
192 --wp-admin-border-width-focus: 2px; |
119 --wp-admin-border-width-focus:2px; |
193 } |
120 } |
194 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { |
121 @media (min-resolution:192dpi){ |
195 body.admin-color-ectoplasm { |
122 body.admin-color-ectoplasm{ |
196 --wp-admin-border-width-focus: 1.5px; |
123 --wp-admin-border-width-focus:1.5px; |
197 } |
124 } |
198 } |
125 } |
199 |
126 |
200 body.admin-color-midnight { |
127 body.admin-color-midnight{ |
201 --wp-admin-theme-color: #e14d43; |
128 --wp-admin-theme-color:#e14d43; |
202 --wp-admin-theme-color--rgb: 225, 77, 67; |
129 --wp-admin-theme-color--rgb:225, 77, 67; |
203 --wp-admin-theme-color-darker-10: #dd382d; |
130 --wp-admin-theme-color-darker-10:#dd382d; |
204 --wp-admin-theme-color-darker-10--rgb: 221, 56, 45; |
131 --wp-admin-theme-color-darker-10--rgb:221, 56, 45; |
205 --wp-admin-theme-color-darker-20: #d02c21; |
132 --wp-admin-theme-color-darker-20:#d02c21; |
206 --wp-admin-theme-color-darker-20--rgb: 208, 44, 33; |
133 --wp-admin-theme-color-darker-20--rgb:208, 44, 33; |
207 --wp-admin-border-width-focus: 2px; |
134 --wp-admin-border-width-focus:2px; |
208 } |
135 } |
209 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { |
136 @media (min-resolution:192dpi){ |
210 body.admin-color-midnight { |
137 body.admin-color-midnight{ |
211 --wp-admin-border-width-focus: 1.5px; |
138 --wp-admin-border-width-focus:1.5px; |
212 } |
139 } |
213 } |
140 } |
214 |
141 |
215 body.admin-color-ocean { |
142 body.admin-color-ocean{ |
216 --wp-admin-theme-color: #627c83; |
143 --wp-admin-theme-color:#627c83; |
217 --wp-admin-theme-color--rgb: 98, 124, 131; |
144 --wp-admin-theme-color--rgb:98, 124, 131; |
218 --wp-admin-theme-color-darker-10: #576e74; |
145 --wp-admin-theme-color-darker-10:#576e74; |
219 --wp-admin-theme-color-darker-10--rgb: 87, 110, 116; |
146 --wp-admin-theme-color-darker-10--rgb:87, 110, 116; |
220 --wp-admin-theme-color-darker-20: #4c6066; |
147 --wp-admin-theme-color-darker-20:#4c6066; |
221 --wp-admin-theme-color-darker-20--rgb: 76, 96, 102; |
148 --wp-admin-theme-color-darker-20--rgb:76, 96, 102; |
222 --wp-admin-border-width-focus: 2px; |
149 --wp-admin-border-width-focus:2px; |
223 } |
150 } |
224 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { |
151 @media (min-resolution:192dpi){ |
225 body.admin-color-ocean { |
152 body.admin-color-ocean{ |
226 --wp-admin-border-width-focus: 1.5px; |
153 --wp-admin-border-width-focus:1.5px; |
227 } |
154 } |
228 } |
155 } |
229 |
156 |
230 body.admin-color-sunrise { |
157 body.admin-color-sunrise{ |
231 --wp-admin-theme-color: #dd823b; |
158 --wp-admin-theme-color:#dd823b; |
232 --wp-admin-theme-color--rgb: 221, 130, 59; |
159 --wp-admin-theme-color--rgb:221, 130, 59; |
233 --wp-admin-theme-color-darker-10: #d97426; |
160 --wp-admin-theme-color-darker-10:#d97426; |
234 --wp-admin-theme-color-darker-10--rgb: 217, 116, 38; |
161 --wp-admin-theme-color-darker-10--rgb:217, 116, 38; |
235 --wp-admin-theme-color-darker-20: #c36922; |
162 --wp-admin-theme-color-darker-20:#c36922; |
236 --wp-admin-theme-color-darker-20--rgb: 195, 105, 34; |
163 --wp-admin-theme-color-darker-20--rgb:195, 105, 34; |
237 --wp-admin-border-width-focus: 2px; |
164 --wp-admin-border-width-focus:2px; |
238 } |
165 } |
239 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { |
166 @media (min-resolution:192dpi){ |
240 body.admin-color-sunrise { |
167 body.admin-color-sunrise{ |
241 --wp-admin-border-width-focus: 1.5px; |
168 --wp-admin-border-width-focus:1.5px; |
242 } |
169 } |
243 } |
170 } |