JezK
Edit File: site-icon.css
/*------------------------------------------------------------------------------ 28.0 - Site Icon ------------------------------------------------------------------------------*/ .site-icon-section { --site-icon-removal: #b32d2e; } .site-icon-preview { --site-icon-input-border: #8c8f94; --site-icon-preview-background: #fff; --site-icon-preview-browser-top: #dcdcde; --site-icon-preview-browser-bottom: #a7aaad; --site-icon-preview-browser-border: rgba(255, 255, 255, 0.2); --site-icon-address-bar-background: #f0f0f1; --site-icon-address-bar-close: #646970; --site-icon-address-bar-text: #3c434a; --site-icon-shadow-1: rgba(0, 0, 0, 0.1); --site-icon-shadow-2: rgba(0, 0, 0, 0.2); --site-icon-shadow-3: rgba(0, 0, 0, 0.5); direction: initial; display: flex; height: 60px; padding: 8px 0 0 8px; align-items: flex-start; position: relative; overflow: hidden; box-sizing: border-box; border: 1px solid var(--site-icon-input-border); border-radius: 4px; background-color: var(--site-icon-preview-background); width: 275px; } @media (prefers-color-scheme: dark) { .site-icon-preview { --site-icon-preview-browser-top: #2c3338; --site-icon-preview-browser-bottom: #111; --site-icon-address-bar-background: #3c434a; --site-icon-address-bar-close: #f0f0f1; --site-icon-address-bar-text: #f0f0f1; } } .site-icon-preview.settings { height: 88px; padding: 16px 0 0 16px; width: 350px; margin: 0 0 16px 0; } .site-icon-preview.crop { width: 258px; height: 100%; display: grid; grid-template-columns: 8px 1fr; grid-template-rows: 64px 1fr; padding-left: 0; row-gap: 16px; direction: inherit; } .site-icon-preview.hidden { display: none; } .site-icon-preview .direction-wrap { grid-template-columns: 44px 1fr; gap: 8px; display: grid; direction: ltr; height: 100%; width: 100%; } .site-icon-preview.settings .direction-wrap { grid-template-columns: 58px 1fr; gap: 16px; } .site-icon-preview:after { --after-size: 150%; aspect-ratio: 1/1; content: ""; display: block; position: absolute; top: 0; left: 0; width: var(--after-size);; transform: translate(calc(var(--after-size) * -0.125), calc(var(--after-size) * -0.125)); filter: blur(5px); opacity: 0.5; background: var(--site-icon-url); } .site-icon-preview .app-icon-preview { aspect-ratio: 1/1; border-radius: 10px; box-shadow: 0 1px 5px 0 var(--site-icon-shadow-3); flex-shrink: 0; width: 100%; z-index: 1; } .site-icon-preview-browser { display: flex; padding: 4px 4px 0 12px; align-items: flex-start; gap: 16px; flex: 1 0 0; z-index: 1; border-top-left-radius: 10px; border-top: 1px solid var(--site-icon-preview-browser-border); border-left: 1px solid var(--site-icon-preview-browser-border); background: linear-gradient(180deg, var(--site-icon-preview-browser-top) 0%, var(--site-icon-preview-browser-bottom) 100%); box-shadow: 0 10px 22px 0 var(--site-icon-shadow-2); } .site-icon-preview .browser-buttons { width: 48px; height: 40px; fill: var(--site-icon-input-border); } .site-icon-preview-tab { padding: 8px; align-items: center; gap: 8px; flex: 1 0 0; border-radius: 4px; background-color: var(--site-icon-address-bar-background); box-shadow: 0 1px 3px 0 var(--site-icon-shadow-1); display: grid; grid-template-columns: 24px auto 24px; } .site-icon-preview-browser .browser-icon-preview { box-shadow: 0 0 20px 0 var(--site-icon-shadow-1); } .site-icon-preview-tab > img, .site-icon-preview-tab > svg { width: 24px; height: 24px; } .site-icon-preview-tab > svg { fill: var(--site-icon-address-bar-close); } .site-icon-preview-site-title { color: var(--site-icon-address-bar-text); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; font-weight: 500; } .site-icon-preview-crop-modal .image-preview-wrap.app-icon-preview { width: 64px; height: 64px; margin: 0; grid-column: 2; } .site-icon-preview-crop-modal .site-icon-preview-browser { grid-column: 2; } .site-icon-preview-crop-modal .image-preview-wrap { overflow: hidden; aspect-ratio: 1/1; } .site-icon-preview-crop-modal .image-preview-wrap.browser { width: 24px; height: 24px; } button.reset.remove-site-icon { color: var(--site-icon-removal); text-decoration: none; border-color: transparent; box-shadow: none; background: transparent; } button.reset.remove-site-icon:focus, button.reset.remove-site-icon:hover { background: var(--site-icon-removal); color: #fff; border-color: var(--site-icon-removal); box-shadow: 0 0 0 1px var(--site-icon-removal); } .site-icon-action-buttons { display: flex; flex-wrap: wrap; gap: 10px; }