Add widget launcher preview
This commit is contained in:
rajchales-monito
@@ -231,6 +231,190 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
|
||||
width: auto;
|
||||
margin: 0;
|
||||
}
|
||||
.launcher-preview-settings {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.launcher-preview-stage {
|
||||
min-height: 112px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
background:
|
||||
linear-gradient(90deg, rgb(15 143 111 / 5%) 1px, transparent 1px),
|
||||
linear-gradient(rgb(15 143 111 / 5%) 1px, transparent 1px),
|
||||
#ffffff;
|
||||
background-size: 18px 18px;
|
||||
}
|
||||
.launcher-preview {
|
||||
--preview-brand: var(--brand);
|
||||
--preview-text: #ffffff;
|
||||
position: relative;
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
background: var(--preview-brand);
|
||||
color: var(--preview-text);
|
||||
box-shadow: 0 12px 30px rgb(0 0 0 / 22%);
|
||||
cursor: default;
|
||||
overflow: visible;
|
||||
}
|
||||
.launcher-preview.effect-breathe {
|
||||
animation: launcherPreviewBreathe 2.8s ease-in-out infinite;
|
||||
}
|
||||
.launcher-preview.effect-ring::before {
|
||||
position: absolute;
|
||||
inset: -5px;
|
||||
border: 2px solid var(--preview-brand);
|
||||
border-radius: 50%;
|
||||
opacity: .62;
|
||||
content: "";
|
||||
animation: launcherPreviewRing 2.2s ease-out infinite;
|
||||
}
|
||||
.launcher-preview-label {
|
||||
position: absolute;
|
||||
right: 68px;
|
||||
top: 50%;
|
||||
max-width: 150px;
|
||||
padding: 7px 10px;
|
||||
border-radius: 999px;
|
||||
background: var(--ink);
|
||||
color: #ffffff;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
box-shadow: 0 10px 24px rgb(0 0 0 / 18%);
|
||||
opacity: 0;
|
||||
transform: translateY(-50%) translateX(8px);
|
||||
transition: opacity .18s ease, transform .18s ease;
|
||||
}
|
||||
.launcher-preview.show-label .launcher-preview-label {
|
||||
opacity: 1;
|
||||
transform: translateY(-50%) translateX(0);
|
||||
}
|
||||
.launcher-preview-icon,
|
||||
.launcher-preview-icon::before,
|
||||
.launcher-preview-icon::after {
|
||||
display: block;
|
||||
content: "";
|
||||
}
|
||||
.launcher-preview-icon {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
color: var(--preview-text);
|
||||
}
|
||||
.preview-shape-circle .launcher-preview-icon,
|
||||
.preview-shape-circle .launcher-preview-icon::before,
|
||||
.preview-shape-circle .launcher-preview-icon::after {
|
||||
height: 3px;
|
||||
border-radius: 4px;
|
||||
background: var(--preview-text);
|
||||
}
|
||||
.preview-shape-circle .launcher-preview-icon {
|
||||
width: 26px;
|
||||
}
|
||||
.preview-shape-circle .launcher-preview-icon::before {
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
.preview-shape-circle .launcher-preview-icon::after {
|
||||
width: 18px;
|
||||
transform: translateY(5px);
|
||||
}
|
||||
.preview-shape-bubble .launcher-preview-icon {
|
||||
width: 30px;
|
||||
height: 23px;
|
||||
border: 3px solid var(--preview-text);
|
||||
border-radius: 13px;
|
||||
background: transparent;
|
||||
}
|
||||
.preview-shape-bubble .launcher-preview-icon::before {
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
top: 7px;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 50%;
|
||||
background: var(--preview-text);
|
||||
box-shadow: 8px 0 0 var(--preview-text), 16px 0 0 var(--preview-text);
|
||||
}
|
||||
.preview-shape-bubble .launcher-preview-icon::after {
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
bottom: -8px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-left: 3px solid var(--preview-text);
|
||||
border-bottom: 3px solid var(--preview-text);
|
||||
border-bottom-left-radius: 8px;
|
||||
background: transparent;
|
||||
transform: rotate(-18deg);
|
||||
}
|
||||
.preview-shape-messenger .launcher-preview-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: var(--preview-text);
|
||||
}
|
||||
.preview-shape-messenger .launcher-preview-icon::before {
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
top: 8px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: var(--preview-brand);
|
||||
clip-path: polygon(0 56%, 42% 56%, 58% 22%, 100% 22%, 58% 78%, 42% 78%);
|
||||
}
|
||||
.preview-shape-messenger .launcher-preview-icon::after {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
bottom: 1px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 0 0 8px 0;
|
||||
background: var(--preview-text);
|
||||
transform: rotate(25deg);
|
||||
}
|
||||
.preview-shape-whatsapp .launcher-preview-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 3px solid var(--preview-text);
|
||||
border-radius: 50%;
|
||||
background: transparent;
|
||||
}
|
||||
.preview-shape-whatsapp .launcher-preview-icon::before {
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
top: 7px;
|
||||
width: 12px;
|
||||
height: 15px;
|
||||
border: 3px solid var(--preview-text);
|
||||
border-left-color: transparent;
|
||||
border-top-color: transparent;
|
||||
border-radius: 0 0 12px 0;
|
||||
transform: rotate(-35deg);
|
||||
}
|
||||
.preview-shape-whatsapp .launcher-preview-icon::after {
|
||||
position: absolute;
|
||||
left: 1px;
|
||||
bottom: -4px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-left: 3px solid var(--preview-text);
|
||||
border-bottom: 3px solid var(--preview-text);
|
||||
background: transparent;
|
||||
transform: rotate(12deg);
|
||||
}
|
||||
@keyframes launcherPreviewBreathe {
|
||||
0%, 100% { transform: scale(1); box-shadow: 0 12px 30px rgb(0 0 0 / 22%); }
|
||||
50% { transform: scale(1.035); box-shadow: 0 16px 36px rgb(0 0 0 / 20%), 0 0 0 8px rgb(15 143 111 / 10%); }
|
||||
}
|
||||
@keyframes launcherPreviewRing {
|
||||
0% { transform: scale(.92); opacity: .58; }
|
||||
70% { transform: scale(1.22); opacity: 0; }
|
||||
100% { transform: scale(.92); opacity: 0; }
|
||||
}
|
||||
.widget-language-settings {
|
||||
grid-template-columns: 112px minmax(230px, 1fr);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user