gutenberg / build / styles / block-library / site-logo / editor.css

editor.css in Gutenberg 23.2.2, at build/styles/block-library/site-logo/editor.css

145 lines 3.3 KB

Raw Download Zip

1	/**
2	* Colors
3	*/
4	/**
5	* SCSS Variables.
6	*
7	* Please use variables from this sheet to ensure consistency across the UI.
8	* Don't add to this sheet unless you're pretty sure the value will be reused in many places.
9	* For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
10	*/
11	/**
12	* Fonts & basic variables.
13	*/
14	/**
15	* Typography
16	*/
17	/**
18	* Grid System.
19	* https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
20	*/
21	/**
22	* Radius scale.
23	*/
24	/**
25	* Elevation scale.
26	*/
27	/**
28	* Dimensions.
29	*/
30	/**
31	* Mobile specific styles
32	*/
33	/**
34	* Editor styles.
35	*/
36	/**
37	* Block & Editor UI.
38	*/
39	/**
40	* Block paddings.
41	*/
42	/**
43	* React Native specific.
44	* These variables do not appear to be used anywhere else.
45	*/
46	.wp-block[data-align=center] > .wp-block-site-logo,
47	.wp-block-site-logo.aligncenter > div {
48	display: table;
49	margin-left: auto;
50	margin-right: auto;
51	}
52
53	.wp-block-site-logo a {
54	pointer-events: none;
55	}
56	.wp-block-site-logo .custom-logo-link {
57	cursor: inherit;
58	}
59	.wp-block-site-logo .custom-logo-link:focus {
60	box-shadow: none;
61	}
62	.wp-block-site-logo img {
63	display: block;
64	height: auto;
65	max-width: 100%;
66	}
67	.wp-block-site-logo.is-transient {
68	position: relative;
69	}
70	.wp-block-site-logo.is-transient img {
71	opacity: 0.3;
72	}
73	.wp-block-site-logo.is-transient .components-spinner {
74	position: absolute;
75	top: 50%;
76	left: 50%;
77	transform: translate(-50%, -50%);
78	margin: 0;
79	}
80
81	.wp-block-site-logo.wp-block-site-logo.is-default-size .components-placeholder {
82	height: 60px;
83	width: 60px;
84	}
85	.wp-block-site-logo.wp-block-site-logo > div,
86	.wp-block-site-logo.wp-block-site-logo .components-resizable-box__container {
87	border-radius: inherit;
88	}
89	.wp-block-site-logo.wp-block-site-logo .components-placeholder {
90	display: flex;
91	justify-content: center;
92	align-items: center;
93	padding: 0;
94	border-radius: inherit;
95	min-height: 48px;
96	min-width: 48px;
97	height: 100%;
98	width: 100%;
99	}
100	.wp-block-site-logo.wp-block-site-logo .components-placeholder .components-form-file-upload {
101	display: none;
102	}
103	.wp-block-site-logo.wp-block-site-logo .components-placeholder .components-drop-zone__content-text {
104	display: none;
105	}
106	.wp-block-site-logo.wp-block-site-logo .components-placeholder .components-button.components-button {
107	padding: 0;
108	margin: auto;
109	display: flex;
110	justify-content: center;
111	align-items: center;
112	width: 48px;
113	height: 48px;
114	border-radius: 50%;
115	position: relative;
116	background: var(--wp-admin-theme-color);
117	border-color: var(--wp-admin-theme-color);
118	border-style: solid;
119	color: #fff;
120	}
121	.wp-block-site-logo.wp-block-site-logo .components-placeholder .components-button.components-button > svg {
122	color: inherit;
123	}
124
125	.block-library-site-logo__inspector-media-replace-container {
126	position: relative;
127	}
128	.block-library-site-logo__inspector-media-replace-container .block-library-site-logo__inspector-media-replace-title {
129	word-break: break-all;
130	white-space: normal;
131	text-align: start;
132	text-align-last: center;
133	}
134	.block-library-site-logo__inspector-media-replace-container img {
135	width: 20px;
136	min-width: 20px;
137	aspect-ratio: 1;
138	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
139	border-radius: 2px;
140	}
141	.block-library-site-logo__inspector-media-replace-container .block-library-site-logo__inspector-readonly-logo-preview {
142	padding: 6px 12px;
143	display: flex;
144	height: 40px;
145	}