mirror of
https://github.com/WordPress/WordPress.git
synced 2024-11-14 22:56:19 +01:00
d1386fb88c
Updates the UI for previewing a site icon in general settings and the customizer to account for changes to browser designs over the past years. Props joedolson, joen, kebbet, nhrrob, swissspidy, mukesh27, afercia, jorbin. Fixes #60625. Built from https://develop.svn.wordpress.org/trunk@58927 git-svn-id: http://core.svn.wordpress.org/trunk@58323 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2 lines
3.9 KiB
CSS
2 lines
3.9 KiB
CSS
/*! This file is auto-generated */
|
|
.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 8px 0 0;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 16px 0 0;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-right: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:rtl;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;right:0;width:var(--after-size);transform:translate(calc(-1*(var(--after-size) * -.125)),calc(var(--after-size) * -.125));filter:blur(5px);opacity:.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 12px 0 4px;align-items:flex-start;gap:16px;flex:1 0 0;z-index:1;border-top-right-radius:10px;border-top:1px solid var(--site-icon-preview-browser-border);border-right: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:0 0}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} |