first commit
This commit is contained in:
202
wp-admin/css/site-icon-rtl.css
Normal file
202
wp-admin/css/site-icon-rtl.css
Normal file
@@ -0,0 +1,202 @@
|
||||
/*! This file is auto-generated */
|
||||
/*------------------------------------------------------------------------------
|
||||
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 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) * -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 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: 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;
|
||||
}
|
||||
Reference in New Issue
Block a user