66 * This is a WP-admin agnostic reset |
72 * This is a WP-admin agnostic reset |
67 */ |
73 */ |
68 /** |
74 /** |
69 * Reset the WP Admin page styles for Gutenberg-like pages. |
75 * Reset the WP Admin page styles for Gutenberg-like pages. |
70 */ |
76 */ |
|
77 .wp-block-post-featured-image.wp-block-post-featured-image .components-placeholder, |
|
78 .wp-block-post-featured-image.wp-block-post-featured-image .components-resizable-box__container { |
|
79 border-radius: inherit; |
|
80 } |
|
81 .wp-block-post-featured-image.wp-block-post-featured-image .wp-block-post-featured-image__placeholder, |
|
82 .wp-block-post-featured-image.wp-block-post-featured-image .components-placeholder { |
|
83 justify-content: center; |
|
84 align-items: center; |
|
85 box-shadow: none; |
|
86 padding: 0; |
|
87 color: currentColor; |
|
88 background: transparent; |
|
89 min-height: 200px; |
|
90 } |
|
91 .wp-block-post-featured-image.wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-form-file-upload, |
|
92 .wp-block-post-featured-image.wp-block-post-featured-image .components-placeholder .components-form-file-upload { |
|
93 display: none; |
|
94 } |
|
95 .wp-block-post-featured-image.wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-placeholder__preview, |
|
96 .wp-block-post-featured-image.wp-block-post-featured-image .components-placeholder .components-placeholder__preview { |
|
97 position: absolute; |
|
98 top: 4px; |
|
99 right: 4px; |
|
100 bottom: 4px; |
|
101 left: 4px; |
|
102 background: rgba(255, 255, 255, 0.8); |
|
103 display: flex; |
|
104 align-items: center; |
|
105 justify-content: center; |
|
106 } |
|
107 .wp-block-post-featured-image.wp-block-post-featured-image .wp-block-post-featured-image__placeholder::before, |
|
108 .wp-block-post-featured-image.wp-block-post-featured-image .components-placeholder::before { |
|
109 content: ""; |
|
110 display: block; |
|
111 position: absolute; |
|
112 top: 0; |
|
113 right: 0; |
|
114 bottom: 0; |
|
115 left: 0; |
|
116 border: 1px dashed currentColor; |
|
117 opacity: 0.4; |
|
118 pointer-events: none; |
|
119 border-radius: inherit; |
|
120 } |
|
121 .wp-block-post-featured-image.wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-placeholder__fieldset, |
|
122 .wp-block-post-featured-image.wp-block-post-featured-image .components-placeholder .components-placeholder__fieldset { |
|
123 width: auto; |
|
124 } |
|
125 .wp-block-post-featured-image.wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-button.components-button, |
|
126 .wp-block-post-featured-image.wp-block-post-featured-image .components-placeholder .components-button.components-button { |
|
127 color: inherit; |
|
128 padding: 0; |
|
129 display: flex; |
|
130 justify-content: center; |
|
131 align-items: center; |
|
132 width: 48px; |
|
133 height: 48px; |
|
134 border-radius: 50%; |
|
135 position: relative; |
|
136 visibility: hidden; |
|
137 background: transparent; |
|
138 transition: all 0.1s linear; |
|
139 } |
|
140 @media (prefers-reduced-motion: reduce) { |
|
141 .wp-block-post-featured-image.wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-button.components-button, |
|
142 .wp-block-post-featured-image.wp-block-post-featured-image .components-placeholder .components-button.components-button { |
|
143 transition-duration: 0s; |
|
144 transition-delay: 0s; |
|
145 } |
|
146 } |
|
147 .wp-block-post-featured-image.wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-button.components-button > svg, |
|
148 .wp-block-post-featured-image.wp-block-post-featured-image .components-placeholder .components-button.components-button > svg { |
|
149 color: #fff; |
|
150 } |
|
151 .wp-block-post-featured-image.wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-placeholder__illustration, |
|
152 .wp-block-post-featured-image.wp-block-post-featured-image .components-placeholder .components-placeholder__illustration { |
|
153 position: absolute; |
|
154 top: 0; |
|
155 right: 0; |
|
156 bottom: 0; |
|
157 left: 0; |
|
158 width: 100%; |
|
159 height: 100%; |
|
160 stroke: currentColor; |
|
161 stroke-dasharray: 3; |
|
162 opacity: 0.4; |
|
163 } |
|
164 .wp-block-post-featured-image.wp-block-post-featured-image[style*=height] .components-placeholder { |
|
165 min-height: 48px; |
|
166 min-width: 48px; |
|
167 height: 100%; |
|
168 width: 100%; |
|
169 } |
|
170 .wp-block-post-featured-image.wp-block-post-featured-image.is-selected .components-button.components-button { |
|
171 background: var(--wp-admin-theme-color); |
|
172 border-color: var(--wp-admin-theme-color); |
|
173 border-style: solid; |
|
174 color: #fff; |
|
175 opacity: 1; |
|
176 visibility: visible; |
|
177 } |
|
178 |
71 div[data-type="core/post-featured-image"] img { |
179 div[data-type="core/post-featured-image"] img { |
72 max-width: 100%; |
180 max-width: 100%; |
73 height: auto; |
181 height: auto; |
74 display: block; |
182 display: block; |
75 } |
183 } |
76 |
|
77 .editor-styles-wrapper .post-featured-image_placeholder { |
|
78 display: flex; |
|
79 flex-direction: row; |
|
80 align-items: flex-start; |
|
81 border-radius: 2px; |
|
82 background-color: #fff; |
|
83 box-shadow: inset 0 0 0 1px #1e1e1e; |
|
84 padding: 12px; |
|
85 } |
|
86 .editor-styles-wrapper .post-featured-image_placeholder svg { |
|
87 margin-right: 12px; |
|
88 } |
|
89 .editor-styles-wrapper .post-featured-image_placeholder p { |
|
90 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; |
|
91 font-size: 13px; |
|
92 margin: 0; |
|
93 } |
|