--- a/wp/wp-admin/css/site-icon.css Fri Sep 05 18:40:08 2025 +0200
+++ b/wp/wp-admin/css/site-icon.css Fri Sep 05 18:52:52 2025 +0200
@@ -2,74 +2,199 @@
28.0 - Site Icon
------------------------------------------------------------------------------*/
-.site-icon-preview .favicon-preview {
- margin: 5px 0 20px;
+.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;
- position: relative;
- max-width: 180px;
+ 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 .favicon,
-.site-icon-preview .browser-title {
- height: 16px;
- left: 88px;
- overflow: hidden;
- position: absolute;
- top: 16px;
+.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 .favicon {
- width: 16px;
+.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 .browser-title {
- left: 109px;
- width: 72px;
- white-space: nowrap;
+.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 {
- background-color: #000;
- border-radius: 16px;
- height: 64px;
- overflow: hidden;
- width: 64px;
- margin-top: 5px;
+ 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;
}
-/* rtl:ignore */
-.site-icon-preview .favicon,
-.site-icon-preview .app-icon-preview {
- direction: ltr;
+.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;
}
-.customize-control-site_icon .favicon-preview {
- float: left;
- margin-right: 12px;
- margin-bottom: 0;
+.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;
}
-.customize-control-site_icon .app-icon-preview {
- margin-top: 9px;
+.site-icon-preview-crop-modal .image-preview-wrap {
+ overflow: hidden;
+ aspect-ratio: 1/1;
}
-.site-icon-section button.reset {
- color: #b32d2e;
+.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;
}
-.site-icon-section button.reset:focus,
-.site-icon-section button.reset:hover {
- background: #b32d2e;
+button.reset.remove-site-icon:focus,
+button.reset.remove-site-icon:hover {
+ background: var(--site-icon-removal);
color: #fff;
- border-color: #b32d2e;
- box-shadow: 0 0 0 1px #b32d2e;
+ border-color: var(--site-icon-removal);
+ box-shadow: 0 0 0 1px var(--site-icon-removal);
}
-.site-icon-section .action-buttons {
+.site-icon-action-buttons {
display: flex;
flex-wrap: wrap;
gap: 10px;