1 /** |
1 .wp-block-site-logo.aligncenter>div,.wp-block[data-align=center]>.wp-block-site-logo{ |
2 * Colors |
2 display:table; |
3 */ |
3 margin-left:auto; |
4 /** |
4 margin-right:auto; |
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 .wp-block[data-align=center] > .wp-block-site-logo, |
|
78 .wp-block-site-logo.aligncenter > div { |
|
79 display: table; |
|
80 margin-right: auto; |
|
81 margin-left: auto; |
|
82 } |
5 } |
83 |
6 |
84 .wp-block-site-logo a { |
7 .wp-block-site-logo a{ |
85 pointer-events: none; |
8 pointer-events:none; |
86 } |
9 } |
87 .wp-block-site-logo .custom-logo-link { |
10 .wp-block-site-logo .custom-logo-link{ |
88 cursor: inherit; |
11 cursor:inherit; |
89 } |
12 } |
90 .wp-block-site-logo .custom-logo-link:focus { |
13 .wp-block-site-logo .custom-logo-link:focus{ |
91 box-shadow: none; |
14 box-shadow:none; |
92 } |
15 } |
93 .wp-block-site-logo .custom-logo-link.is-transient img { |
16 .wp-block-site-logo img{ |
94 opacity: 0.3; |
17 display:block; |
|
18 height:auto; |
|
19 max-width:100%; |
95 } |
20 } |
96 .wp-block-site-logo img { |
21 .wp-block-site-logo.is-transient{ |
97 display: block; |
22 position:relative; |
98 height: auto; |
23 } |
99 max-width: 100%; |
24 .wp-block-site-logo.is-transient img{ |
|
25 opacity:.3; |
|
26 } |
|
27 .wp-block-site-logo.is-transient .components-spinner{ |
|
28 margin:0; |
|
29 position:absolute; |
|
30 right:50%; |
|
31 top:50%; |
|
32 transform:translate(50%, -50%); |
100 } |
33 } |
101 |
34 |
102 .wp-block-site-logo.wp-block-site-logo .components-placeholder, |
35 .wp-block-site-logo.wp-block-site-logo.is-default-size .components-placeholder{ |
103 .wp-block-site-logo.wp-block-site-logo .components-resizable-box__container { |
36 height:60px; |
104 border-radius: inherit; |
37 width:60px; |
105 } |
38 } |
106 .wp-block-site-logo.wp-block-site-logo.is-default-size .components-placeholder { |
39 .wp-block-site-logo.wp-block-site-logo .components-resizable-box__container,.wp-block-site-logo.wp-block-site-logo>div{ |
107 height: 120px; |
40 border-radius:inherit; |
108 width: 120px; |
|
109 } |
41 } |
110 .wp-block-site-logo.wp-block-site-logo .components-placeholder { |
42 .wp-block-site-logo.wp-block-site-logo .components-placeholder{ |
111 display: flex; |
43 align-items:center; |
112 justify-content: center; |
44 border-radius:inherit; |
113 align-items: center; |
45 display:flex; |
114 box-shadow: none; |
46 height:100%; |
115 padding: 0; |
47 justify-content:center; |
116 min-height: 48px; |
48 min-height:48px; |
117 min-width: 48px; |
49 min-width:48px; |
118 height: 100%; |
50 padding:0; |
119 width: 100%; |
51 width:100%; |
120 color: currentColor; |
|
121 background: transparent; |
|
122 } |
52 } |
123 .wp-block-site-logo.wp-block-site-logo .components-placeholder .components-form-file-upload { |
53 .wp-block-site-logo.wp-block-site-logo .components-placeholder .components-drop-zone__content-text,.wp-block-site-logo.wp-block-site-logo .components-placeholder .components-form-file-upload{ |
124 display: none; |
54 display:none; |
125 } |
55 } |
126 .wp-block-site-logo.wp-block-site-logo .components-placeholder .components-placeholder__preview { |
56 .wp-block-site-logo.wp-block-site-logo .components-placeholder .components-button.components-button{ |
127 position: absolute; |
57 align-items:center; |
128 top: 4px; |
58 background:var(--wp-admin-theme-color); |
129 left: 4px; |
59 border-color:var(--wp-admin-theme-color); |
130 bottom: 4px; |
60 border-radius:50%; |
131 right: 4px; |
61 border-style:solid; |
132 background: rgba(255, 255, 255, 0.8); |
62 color:#fff; |
133 display: flex; |
63 display:flex; |
134 align-items: center; |
64 height:48px; |
135 justify-content: center; |
65 justify-content:center; |
|
66 margin:auto; |
|
67 padding:0; |
|
68 position:relative; |
|
69 width:48px; |
136 } |
70 } |
137 .wp-block-site-logo.wp-block-site-logo .components-placeholder .components-drop-zone__content-text { |
71 .wp-block-site-logo.wp-block-site-logo .components-placeholder .components-button.components-button>svg{ |
138 display: none; |
72 color:inherit; |
139 } |
73 } |
140 .wp-block-site-logo.wp-block-site-logo .components-placeholder::before { |
74 |
141 content: ""; |
75 .block-library-site-logo__inspector-upload-container{ |
142 display: block; |
76 position:relative; |
143 position: absolute; |
|
144 top: 0; |
|
145 left: 0; |
|
146 bottom: 0; |
|
147 right: 0; |
|
148 border: 1px dashed currentColor; |
|
149 opacity: 0.4; |
|
150 pointer-events: none; |
|
151 border-radius: inherit; |
|
152 } |
77 } |
153 .wp-block-site-logo.wp-block-site-logo .components-placeholder .components-placeholder__fieldset { |
78 .block-library-site-logo__inspector-upload-container .components-drop-zone__content-icon{ |
154 width: auto; |
79 display:none; |
155 } |
80 } |
156 .wp-block-site-logo.wp-block-site-logo .components-placeholder .components-button.components-button { |
81 |
157 color: inherit; |
82 .block-library-site-logo__inspector-media-replace-container button.components-button,.block-library-site-logo__inspector-upload-container button.components-button{ |
158 padding: 0; |
83 box-shadow:inset 0 0 0 1px #ccc; |
159 display: flex; |
84 color:#1e1e1e; |
160 justify-content: center; |
85 display:block; |
161 align-items: center; |
86 height:40px; |
162 width: 48px; |
87 width:100%; |
163 height: 48px; |
|
164 border-radius: 50%; |
|
165 position: relative; |
|
166 visibility: hidden; |
|
167 background: transparent; |
|
168 transition: all 0.1s linear; |
|
169 } |
88 } |
170 @media (prefers-reduced-motion: reduce) { |
89 .block-library-site-logo__inspector-media-replace-container button.components-button:hover,.block-library-site-logo__inspector-upload-container button.components-button:hover{ |
171 .wp-block-site-logo.wp-block-site-logo .components-placeholder .components-button.components-button { |
90 color:var(--wp-admin-theme-color); |
172 transition-duration: 0s; |
|
173 transition-delay: 0s; |
|
174 } |
|
175 } |
91 } |
176 .wp-block-site-logo.wp-block-site-logo .components-placeholder .components-button.components-button > svg { |
92 .block-library-site-logo__inspector-media-replace-container button.components-button:focus,.block-library-site-logo__inspector-upload-container button.components-button:focus{ |
177 color: #fff; |
93 box-shadow:inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); |
178 } |
94 } |
179 .wp-block-site-logo.wp-block-site-logo .components-placeholder .components-placeholder__illustration { |
95 .block-library-site-logo__inspector-media-replace-container .block-library-site-logo__inspector-media-replace-title,.block-library-site-logo__inspector-upload-container .block-library-site-logo__inspector-media-replace-title{ |
180 position: absolute; |
96 text-align:start; |
181 top: 0; |
97 text-align-last:center; |
182 left: 0; |
98 white-space:normal; |
183 bottom: 0; |
99 word-break:break-all; |
184 right: 0; |
|
185 width: 100%; |
|
186 height: 100%; |
|
187 stroke: currentColor; |
|
188 stroke-dasharray: 3; |
|
189 opacity: 0.4; |
|
190 } |
100 } |
191 .wp-block-site-logo.wp-block-site-logo.is-selected .components-button.components-button { |
101 |
192 background: var(--wp-admin-theme-color); |
102 .block-library-site-logo__inspector-media-replace-container .components-dropdown{ |
193 border-color: var(--wp-admin-theme-color); |
103 display:block; |
194 border-style: solid; |
|
195 color: #fff; |
|
196 opacity: 1; |
|
197 visibility: visible; |
|
198 } |
104 } |
|
105 .block-library-site-logo__inspector-media-replace-container img{ |
|
106 aspect-ratio:1; |
|
107 border-radius:50% !important; |
|
108 box-shadow:inset 0 0 0 1px #0003; |
|
109 min-width:20px; |
|
110 width:20px; |
|
111 } |
|
112 .block-library-site-logo__inspector-media-replace-container .block-library-site-logo__inspector-readonly-logo-preview{ |
|
113 display:flex; |
|
114 height:40px; |
|
115 padding:6px 12px; |
|
116 } |