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