mirror of
https://github.com/WordPress/WordPress.git
synced 2024-12-22 17:18:32 +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
202 lines
4.5 KiB
CSS
202 lines
4.5 KiB
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;
|
|
}
|