1/*------------------------------------------------------------------------------
  2  28.0 - Site Icon
  3------------------------------------------------------------------------------*/
  4
  5.site-icon-section {
  6	--site-icon-removal: #b32d2e;
  7}
  8
  9.site-icon-preview {
 10	--site-icon-input-border: #8c8f94;
 11	--site-icon-preview-background: #fff;
 12	--site-icon-preview-browser-top: #dcdcde;
 13	--site-icon-preview-browser-bottom: #a7aaad;
 14	--site-icon-preview-browser-border: rgba(255, 255, 255, 0.2);
 15	--site-icon-address-bar-background: #f0f0f1;
 16	--site-icon-address-bar-close: #646970;
 17	--site-icon-address-bar-text: #3c434a;
 18	--site-icon-shadow-1: rgba(0, 0, 0, 0.1);
 19	--site-icon-shadow-2: rgba(0, 0, 0, 0.2);
 20	--site-icon-shadow-3: rgba(0, 0, 0, 0.5);
 21
 22	direction: initial;
 23	display: flex;
 24	height: 60px;
 25	padding: 8px 0 0 8px;
 26	align-items: flex-start;
 27	position: relative;
 28	overflow: hidden;
 29	box-sizing: border-box;
 30	border: 1px solid var(--site-icon-input-border);
 31	border-radius: 4px;
 32	background-color: var(--site-icon-preview-background);
 33	width: 275px;
 34}
 35
 36@media (prefers-color-scheme: dark) {
 37	.site-icon-preview {
 38		--site-icon-preview-browser-top: #2c3338;
 39		--site-icon-preview-browser-bottom: #111;
 40		--site-icon-address-bar-background: #3c434a;
 41		--site-icon-address-bar-close: #f0f0f1;
 42		--site-icon-address-bar-text: #f0f0f1;
 43	}
 44}
 45
 46.site-icon-preview.settings {
 47	height: 88px;
 48	padding: 16px 0 0 16px;
 49	width: 350px;
 50	margin: 0 0 16px 0;
 51}
 52
 53.site-icon-preview.crop {
 54	width: 258px;
 55	height: 100%;
 56	display: grid;
 57	grid-template-columns: 8px 1fr;
 58	grid-template-rows: 64px 1fr;
 59	padding-left: 0;
 60	row-gap: 16px;
 61	direction: inherit;
 62}
 63
 64.site-icon-preview.hidden {
 65	display: none;
 66}
 67
 68.site-icon-preview .direction-wrap {
 69	grid-template-columns: 44px 1fr;
 70	gap: 8px;
 71	display: grid;
 72	direction: ltr;
 73	height: 100%;
 74	width: 100%;
 75}
 76
 77.site-icon-preview.settings .direction-wrap {
 78	grid-template-columns: 58px 1fr;
 79	gap: 16px;
 80}
 81
 82.site-icon-preview:after {
 83	--after-size: 150%;
 84	aspect-ratio: 1/1;
 85	content: "";
 86	display: block;
 87	position: absolute;
 88	top: 0;
 89	left: 0;
 90	width: var(--after-size);;
 91	transform: translate(calc(var(--after-size) * -0.125), calc(var(--after-size) * -0.125));
 92	filter: blur(5px);
 93	opacity: 0.5;
 94	background: var(--site-icon-url);
 95}
 96
 97.site-icon-preview .app-icon-preview {
 98	aspect-ratio: 1/1;
 99	border-radius: 10px;
100	box-shadow: 0 1px 5px 0 var(--site-icon-shadow-3);
101	flex-shrink: 0;
102	width: 100%;
103	z-index: 1;
104}
105
106.site-icon-preview-browser {
107	display: flex;
108	padding: 4px 4px 0 12px;
109	align-items: flex-start;
110	gap: 16px;
111	flex: 1 0 0;
112	z-index: 1;
113	border-top-left-radius: 10px;
114	border-top: 1px solid var(--site-icon-preview-browser-border);
115	border-left: 1px solid var(--site-icon-preview-browser-border);
116	background: linear-gradient(180deg, var(--site-icon-preview-browser-top) 0%, var(--site-icon-preview-browser-bottom) 100%);
117	box-shadow: 0 10px 22px 0 var(--site-icon-shadow-2);
118}
119
120.site-icon-preview .browser-buttons {
121	width: 48px;
122	height: 40px;
123	fill: var(--site-icon-input-border);
124}
125
126.site-icon-preview-tab {
127	padding: 8px;
128	align-items: center;
129	gap: 8px;
130	flex: 1 0 0;
131	border-radius: 4px;
132	background-color: var(--site-icon-address-bar-background);
133	box-shadow: 0 1px 3px 0 var(--site-icon-shadow-1);
134	display: grid;
135	grid-template-columns: 24px auto 24px;
136}
137
138.site-icon-preview-browser .browser-icon-preview {
139	box-shadow: 0 0 20px 0 var(--site-icon-shadow-1);
140}
141
142.site-icon-preview-tab > img,
143.site-icon-preview-tab > svg {
144	width: 24px;
145	height: 24px;
146}
147
148.site-icon-preview-tab > svg {
149	fill: var(--site-icon-address-bar-close);
150}
151
152.site-icon-preview-site-title {
153	color: var(--site-icon-address-bar-text);
154	text-overflow: ellipsis;
155	white-space: nowrap;
156	overflow: hidden;
157	font-weight: 500;
158}
159
160.site-icon-preview-crop-modal .image-preview-wrap.app-icon-preview {
161	width: 64px;
162	height: 64px;
163	margin: 0;
164	grid-column: 2;
165}
166
167.site-icon-preview-crop-modal .site-icon-preview-browser {
168	grid-column: 2;
169}
170
171.site-icon-preview-crop-modal .image-preview-wrap {
172	overflow: hidden;
173	aspect-ratio: 1/1;
174}
175
176.site-icon-preview-crop-modal .image-preview-wrap.browser {
177	width: 24px;
178	height: 24px;
179}
180
181button.reset.remove-site-icon {
182	color: var(--site-icon-removal);
183	text-decoration: none;
184	border-color: transparent;
185	box-shadow: none;
186	background: transparent;
187}
188
189button.reset.remove-site-icon:focus,
190button.reset.remove-site-icon:hover {
191	background: var(--site-icon-removal);
192	color: #fff;
193	border-color: var(--site-icon-removal);
194	box-shadow: 0 0 0 1px var(--site-icon-removal);
195}
196
197.site-icon-action-buttons {
198	display: flex;
199	flex-wrap: wrap;
200	gap: 10px;
201}
202