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