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