1 /*------------------------------------------------------------------------------ |
1 /*------------------------------------------------------------------------------ |
2 28.0 - Site Icon |
2 28.0 - Site Icon |
3 ------------------------------------------------------------------------------*/ |
3 ------------------------------------------------------------------------------*/ |
4 |
4 |
5 .site-icon-preview .favicon-preview { |
5 .site-icon-section { |
6 margin: 5px 0 20px; |
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; |
7 overflow: hidden; |
28 overflow: hidden; |
8 position: relative; |
29 box-sizing: border-box; |
9 max-width: 180px; |
30 border: 1px solid var(--site-icon-input-border); |
10 } |
31 border-radius: 4px; |
11 |
32 background-color: var(--site-icon-preview-background); |
12 .site-icon-preview .favicon, |
33 width: 275px; |
13 .site-icon-preview .browser-title { |
34 } |
14 height: 16px; |
35 |
15 left: 88px; |
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; |
16 overflow: hidden; |
156 overflow: hidden; |
17 position: absolute; |
157 font-weight: 500; |
18 top: 16px; |
158 } |
19 } |
159 |
20 |
160 .site-icon-preview-crop-modal .image-preview-wrap.app-icon-preview { |
21 .site-icon-preview .favicon { |
161 width: 64px; |
22 width: 16px; |
|
23 } |
|
24 |
|
25 .site-icon-preview .browser-title { |
|
26 left: 109px; |
|
27 width: 72px; |
|
28 white-space: nowrap; |
|
29 } |
|
30 |
|
31 .site-icon-preview .app-icon-preview { |
|
32 background-color: #000; |
|
33 border-radius: 16px; |
|
34 height: 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 { |
35 overflow: hidden; |
172 overflow: hidden; |
36 width: 64px; |
173 aspect-ratio: 1/1; |
37 margin-top: 5px; |
174 } |
38 } |
175 |
39 |
176 .site-icon-preview-crop-modal .image-preview-wrap.browser { |
40 /* rtl:ignore */ |
177 width: 24px; |
41 .site-icon-preview .favicon, |
178 height: 24px; |
42 .site-icon-preview .app-icon-preview { |
179 } |
43 direction: ltr; |
180 |
44 } |
181 button.reset.remove-site-icon { |
45 |
182 color: var(--site-icon-removal); |
46 .customize-control-site_icon .favicon-preview { |
|
47 float: left; |
|
48 margin-right: 12px; |
|
49 margin-bottom: 0; |
|
50 } |
|
51 |
|
52 .customize-control-site_icon .app-icon-preview { |
|
53 margin-top: 9px; |
|
54 } |
|
55 |
|
56 .site-icon-section button.reset { |
|
57 color: #b32d2e; |
|
58 text-decoration: none; |
183 text-decoration: none; |
59 border-color: transparent; |
184 border-color: transparent; |
60 box-shadow: none; |
185 box-shadow: none; |
61 background: transparent; |
186 background: transparent; |
62 } |
187 } |
63 |
188 |
64 .site-icon-section button.reset:focus, |
189 button.reset.remove-site-icon:focus, |
65 .site-icon-section button.reset:hover { |
190 button.reset.remove-site-icon:hover { |
66 background: #b32d2e; |
191 background: var(--site-icon-removal); |
67 color: #fff; |
192 color: #fff; |
68 border-color: #b32d2e; |
193 border-color: var(--site-icon-removal); |
69 box-shadow: 0 0 0 1px #b32d2e; |
194 box-shadow: 0 0 0 1px var(--site-icon-removal); |
70 } |
195 } |
71 |
196 |
72 .site-icon-section .action-buttons { |
197 .site-icon-action-buttons { |
73 display: flex; |
198 display: flex; |
74 flex-wrap: wrap; |
199 flex-wrap: wrap; |
75 gap: 10px; |
200 gap: 10px; |
76 } |
201 } |