rework the site: gruvbox editorial default with a desktop-mode toggle; drop the terminal layout and phone desktop
This commit is contained in:
parent
976fc362ff
commit
86692637de
19 changed files with 1350 additions and 1664 deletions
|
|
@ -2,9 +2,9 @@
|
|||
SKEUOMORPHIC THEME
|
||||
------------------------------------------------------------
|
||||
Desktop -> KDE Plasma (Breeze)
|
||||
Mobile -> iOS-style home screen
|
||||
Active when <html data-theme="skeuo">. The terminal theme is
|
||||
the alternate, reachable from the tray / launcher / app.
|
||||
Active when <html data-theme="skeuo">. The gruvbox editorial
|
||||
site is the default; this is the alternate, reachable from
|
||||
the editorial page's Desktop-mode button or the tray.
|
||||
============================================================ */
|
||||
|
||||
html[data-theme="skeuo"] {
|
||||
|
|
@ -27,17 +27,8 @@ html[data-theme="skeuo"] body {
|
|||
font-family: var(--font-custom-mono);
|
||||
}
|
||||
|
||||
.skeuo-desktop-root { display: block; }
|
||||
.skeuo-mobile-root { display: none; }
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.skeuo-desktop-root { display: none; }
|
||||
.skeuo-mobile-root { display: block; }
|
||||
}
|
||||
|
||||
/* Real phones always get the mobile UI, even in landscape. */
|
||||
html[data-device="phone"] .skeuo-desktop-root { display: none; }
|
||||
html[data-device="phone"] .skeuo-mobile-root { display: block; }
|
||||
/* The desktop root and its visibility are decided in JS (ThemeRoot); phones
|
||||
never mount it, and the CSS `.desktop-toggle` rule hides the entry button. */
|
||||
|
||||
/* ============================================================
|
||||
DESKTOP (Plasma)
|
||||
|
|
@ -1630,598 +1621,12 @@ a.win-icon {
|
|||
background: rgba(61, 174, 233, 0.3);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
MOBILE -> iOS-style home screen
|
||||
============================================================ */
|
||||
.mobile-root {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.mobile-home {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
height: 100dvh;
|
||||
overflow: hidden;
|
||||
background-color: #101319;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
color: #ffffff;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Roboto,
|
||||
"Helvetica Neue", Arial, sans-serif;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-touch-callout: none;
|
||||
}
|
||||
.mobile-home::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(0, 0, 0, 0.4),
|
||||
rgba(0, 0, 0, 0.12) 28%,
|
||||
rgba(0, 0, 0, 0.25) 62%,
|
||||
rgba(0, 0, 0, 0.6)
|
||||
);
|
||||
}
|
||||
|
||||
.mobile-statusbar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 34px;
|
||||
z-index: 55;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 18px;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
.mobile-status-time {
|
||||
font-size: 0.94rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0;
|
||||
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.mobile-status-icons {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.mobile-status-icons svg {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 2x1 iOS-style clock widget */
|
||||
.mobile-widget {
|
||||
grid-column: span 2;
|
||||
grid-row: span 1;
|
||||
border-radius: 22px;
|
||||
padding: 10px 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
gap: 1px;
|
||||
overflow: hidden;
|
||||
color: #ffffff;
|
||||
border: 1px solid rgba(255, 255, 255, 0.22);
|
||||
background-color: rgba(28, 30, 38, 0.42);
|
||||
background-image: linear-gradient(
|
||||
160deg,
|
||||
rgba(255, 255, 255, 0.22),
|
||||
rgba(255, 255, 255, 0.06) 52%,
|
||||
rgba(0, 0, 0, 0.18)
|
||||
);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.35),
|
||||
0 6px 18px rgba(0, 0, 0, 0.32);
|
||||
-webkit-backdrop-filter: blur(20px) saturate(150%);
|
||||
backdrop-filter: blur(20px) saturate(150%);
|
||||
}
|
||||
.mobile-widget-time {
|
||||
font-size: 1.65rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.05;
|
||||
letter-spacing: -0.02em;
|
||||
font-variant-numeric: tabular-nums;
|
||||
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
.mobile-widget-date {
|
||||
font-size: 0.66rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.1;
|
||||
letter-spacing: 0.03em;
|
||||
text-transform: uppercase;
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.mobile-grid {
|
||||
position: absolute;
|
||||
top: 46px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 112px;
|
||||
z-index: 10;
|
||||
overflow-y: auto;
|
||||
padding: 6px 14px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-auto-rows: 86px;
|
||||
gap: 14px 6px;
|
||||
align-content: start;
|
||||
}
|
||||
.mobile-app {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
color: inherit;
|
||||
min-width: 0;
|
||||
touch-action: none;
|
||||
}
|
||||
.mobile-app.dragging {
|
||||
opacity: 0.55;
|
||||
}
|
||||
.mobile-app-icon {
|
||||
position: relative;
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
border-radius: 21px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: 27px;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(255, 255, 255, 0.24);
|
||||
background-color: rgba(22, 24, 30, 0.42);
|
||||
background-image: linear-gradient(
|
||||
160deg,
|
||||
rgba(255, 255, 255, 0.38),
|
||||
rgba(255, 255, 255, 0.08) 44%,
|
||||
rgba(0, 0, 0, 0.08) 72%,
|
||||
rgba(0, 0, 0, 0.3)
|
||||
);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.5),
|
||||
inset 0 -9px 16px rgba(0, 0, 0, 0.2),
|
||||
0 4px 12px rgba(0, 0, 0, 0.42);
|
||||
-webkit-backdrop-filter: blur(16px) saturate(140%);
|
||||
backdrop-filter: blur(16px) saturate(140%);
|
||||
}
|
||||
.mobile-app-glyph {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
filter: saturate(0.35) contrast(1.02);
|
||||
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
.mobile-app-icon::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(255, 255, 255, 0.3),
|
||||
rgba(255, 255, 255, 0) 48%
|
||||
);
|
||||
pointer-events: none;
|
||||
}
|
||||
.mobile-app-icon::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(255, 255, 255, 0.3),
|
||||
rgba(255, 255, 255, 0) 48%
|
||||
);
|
||||
pointer-events: none;
|
||||
}
|
||||
.mobile-app-label {
|
||||
max-width: 100%;
|
||||
font-size: 0.66rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.15;
|
||||
text-align: center;
|
||||
overflow-wrap: anywhere;
|
||||
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
|
||||
}
|
||||
|
||||
.mobile-dock {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
right: 12px;
|
||||
bottom: 30px;
|
||||
z-index: 15;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
gap: 8px;
|
||||
padding: 11px 12px;
|
||||
border-radius: 30px;
|
||||
background: rgba(255, 255, 255, 0.16);
|
||||
border: 1px solid rgba(255, 255, 255, 0.22);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.28),
|
||||
0 10px 30px rgba(0, 0, 0, 0.35);
|
||||
-webkit-backdrop-filter: blur(22px) saturate(150%);
|
||||
backdrop-filter: blur(22px) saturate(150%);
|
||||
}
|
||||
.mobile-app.in-dock .mobile-app-icon {
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
border-radius: 19px;
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.mobile-pagedots {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 14px;
|
||||
z-index: 15;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 7px;
|
||||
}
|
||||
.mobile-pagedots span {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.35);
|
||||
}
|
||||
.mobile-pagedots span.active {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.mobile-app-view {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
height: 100dvh;
|
||||
z-index: 40;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: rgba(10, 13, 19, 0.66);
|
||||
color: #eef1f6;
|
||||
font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
-webkit-backdrop-filter: blur(30px) saturate(160%);
|
||||
backdrop-filter: blur(30px) saturate(160%);
|
||||
will-change: transform, opacity, border-radius;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
.mobile-app-view.opening {
|
||||
animation: mobileAppOpen 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
|
||||
/* Grow out of the tapped icon. */
|
||||
transform-origin: var(--app-origin, 50% 50%);
|
||||
}
|
||||
.mobile-app-view.closing {
|
||||
animation: mobileAppClose 0.36s cubic-bezier(0.4, 0, 0.7, 0.2) forwards;
|
||||
pointer-events: none;
|
||||
/* Always shrink straight down from the centre, never toward the icon. */
|
||||
transform-origin: 50% 50%;
|
||||
}
|
||||
.mobile-app-view .mobile-appbar,
|
||||
.mobile-app-view .mobile-app-body {
|
||||
animation: mobileAppContentIn 0.3s ease-out both;
|
||||
}
|
||||
|
||||
@keyframes mobileAppOpen {
|
||||
from {
|
||||
transform: scale(var(--app-scale, 0.2));
|
||||
border-radius: 27px;
|
||||
}
|
||||
to {
|
||||
transform: scale(1);
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
@keyframes mobileAppClose {
|
||||
from {
|
||||
translate: 0 0;
|
||||
scale: 1;
|
||||
border-radius: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
/* One full viewport height guarantees it clears the bottom edge entirely. */
|
||||
translate: 0 100vh;
|
||||
scale: var(--app-scale, 0.2);
|
||||
border-radius: 27px;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes mobileAppContentIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.mobile-appbar {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 12px 12px 10px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
-webkit-backdrop-filter: blur(20px) saturate(150%);
|
||||
backdrop-filter: blur(20px) saturate(150%);
|
||||
}
|
||||
.mobile-back {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
background: transparent;
|
||||
color: #eef1f6;
|
||||
font-size: 1.2rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.mobile-back:hover {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
.mobile-appbar-title {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
}
|
||||
.mobile-app-body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
background: transparent;
|
||||
}
|
||||
.mobile-app-body.app-surface {
|
||||
--white: #eef1f6;
|
||||
--gray: #a7b0bd;
|
||||
--accent: #7cc4ff;
|
||||
--accent2: #a99bff;
|
||||
--accent3: #7cc4ff;
|
||||
--green: #5bd67a;
|
||||
--aqua: #4fd6c9;
|
||||
--blue: #68b9ff;
|
||||
--purple: #b79bff;
|
||||
--red: #ff7a7a;
|
||||
--darkpink: #ff86c8;
|
||||
--fg: #eef1f6;
|
||||
color: #eef1f6;
|
||||
}
|
||||
.mobile-app-body .project-card,
|
||||
.mobile-app-body .service-button,
|
||||
.mobile-app-body .social-button,
|
||||
.mobile-app-body .gym-item {
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
/* ---- Dark glassmorphism content (mobile apps only) ---- */
|
||||
.mobile-app-body .app-cmd {
|
||||
color: #aeb7c4;
|
||||
}
|
||||
.mobile-app-body .app-user {
|
||||
color: #5bd67a;
|
||||
}
|
||||
.mobile-app-body .app-path {
|
||||
color: #7cc4ff;
|
||||
}
|
||||
.mobile-app-body .app-text,
|
||||
.mobile-app-body .app-list {
|
||||
color: #c7cfda;
|
||||
}
|
||||
.mobile-app-body .about-content,
|
||||
.mobile-app-body .about-content > div {
|
||||
color: #c7cfda !important;
|
||||
}
|
||||
.mobile-app-body a {
|
||||
color: #7cc4ff;
|
||||
}
|
||||
.mobile-app-body .mail-contact {
|
||||
color: #c7cfda;
|
||||
}
|
||||
.mobile-app-body .mail-contact a {
|
||||
color: #7cc4ff;
|
||||
}
|
||||
.mobile-app-body .app-h1,
|
||||
.mobile-app-body .app-h2,
|
||||
.mobile-app-body .app-welcome-head h2 {
|
||||
color: #ffffff;
|
||||
}
|
||||
.mobile-app-body .app-muted {
|
||||
color: #98a2b0;
|
||||
}
|
||||
.mobile-app-body .app-welcome-head img {
|
||||
border-color: rgba(255, 255, 255, 0.18);
|
||||
}
|
||||
.mobile-app-body .app-shot {
|
||||
border-color: rgba(255, 255, 255, 0.16);
|
||||
}
|
||||
.mobile-app-body .app-linkrow a {
|
||||
color: #eef1f6;
|
||||
}
|
||||
|
||||
/* Glass cards */
|
||||
.mobile-app-body .social-button,
|
||||
.mobile-app-body .service-button,
|
||||
.mobile-app-body .project-card,
|
||||
.mobile-app-body .gym-item,
|
||||
.mobile-app-body .app-linkrow a {
|
||||
border: 1px solid rgba(255, 255, 255, 0.14);
|
||||
background: rgba(255, 255, 255, 0.07);
|
||||
color: #eef1f6;
|
||||
border-radius: 16px;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.16),
|
||||
0 10px 24px rgba(0, 0, 0, 0.35);
|
||||
-webkit-backdrop-filter: blur(16px) saturate(150%);
|
||||
backdrop-filter: blur(16px) saturate(150%);
|
||||
}
|
||||
.mobile-app-body .social-button:hover,
|
||||
.mobile-app-body .service-button:hover,
|
||||
.mobile-app-body .project-card:hover,
|
||||
.mobile-app-body .gym-item:hover,
|
||||
.mobile-app-body .app-linkrow a:hover {
|
||||
background: rgba(255, 255, 255, 0.13);
|
||||
border-color: rgba(124, 196, 255, 0.6);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.22),
|
||||
0 0 0 1px rgba(124, 196, 255, 0.35),
|
||||
0 12px 28px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.mobile-app-body .social-icon {
|
||||
opacity: 0.95;
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
.mobile-app-body .service-name {
|
||||
color: #ffffff;
|
||||
}
|
||||
.mobile-app-body .service-desc {
|
||||
color: #a7b0bd;
|
||||
}
|
||||
.mobile-app-body .service-button:hover .service-desc {
|
||||
color: #dfe6ef;
|
||||
}
|
||||
.mobile-app-body .friend-icon {
|
||||
filter: invert(1) brightness(1.5);
|
||||
}
|
||||
.mobile-app-body .project-image {
|
||||
border-color: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
.mobile-app-body .project-title {
|
||||
color: #ffffff;
|
||||
}
|
||||
.mobile-app-body .project-card:hover .project-title {
|
||||
color: #7cc4ff;
|
||||
}
|
||||
.mobile-app-body .project-desc {
|
||||
color: #a7b0bd;
|
||||
}
|
||||
.mobile-app-body .project-card:hover .project-desc {
|
||||
color: #dfe6ef;
|
||||
}
|
||||
.mobile-app-body .gym-label {
|
||||
color: #a7b0bd;
|
||||
}
|
||||
.mobile-app-body .gym-weight {
|
||||
color: #ffffff;
|
||||
}
|
||||
.mobile-app-body .gym-date {
|
||||
color: #8b95a3;
|
||||
}
|
||||
|
||||
/* Glass heatmap */
|
||||
.mobile-app-body .heatmap-container {
|
||||
border-color: rgba(124, 196, 255, 0.5);
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border-radius: 12px;
|
||||
}
|
||||
.mobile-app-body .heatmap-cell,
|
||||
.mobile-app-body .heatmap-legend-cell {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
.mobile-app-body .heatmap-cell[data-level="1"],
|
||||
.mobile-app-body .heatmap-legend-cell[data-level="1"] {
|
||||
background-color: rgba(124, 196, 255, 0.3);
|
||||
}
|
||||
.mobile-app-body .heatmap-cell[data-level="2"],
|
||||
.mobile-app-body .heatmap-legend-cell[data-level="2"] {
|
||||
background-color: rgba(124, 196, 255, 0.55);
|
||||
}
|
||||
.mobile-app-body .heatmap-cell[data-level="3"],
|
||||
.mobile-app-body .heatmap-legend-cell[data-level="3"] {
|
||||
background-color: rgba(124, 196, 255, 0.8);
|
||||
}
|
||||
.mobile-app-body .heatmap-cell[data-level="4"],
|
||||
.mobile-app-body .heatmap-legend-cell[data-level="4"] {
|
||||
background-color: #7cc4ff;
|
||||
}
|
||||
.mobile-app-body .heatmap-cell:hover {
|
||||
box-shadow: 0 0 8px rgba(124, 196, 255, 0.9);
|
||||
}
|
||||
.mobile-app-body .contribution-command,
|
||||
.mobile-app-body .contribution-entry,
|
||||
.mobile-app-body .contribution-total-title,
|
||||
.mobile-app-body .contribution-message {
|
||||
color: #eef1f6;
|
||||
}
|
||||
.mobile-app-body .contribution-repo {
|
||||
color: #a7b0bd;
|
||||
}
|
||||
.mobile-app-body .contribution-date {
|
||||
color: #5bd67a;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.app-pad {
|
||||
padding: 14px;
|
||||
}
|
||||
.app-surface .project-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.app-surface .social-buttons {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.app-surface .services-buttons {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.app-surface .gym-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 6px;
|
||||
}
|
||||
.app-surface .project-image {
|
||||
height: 140px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 380px) {
|
||||
.mobile-grid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
/* Phones in landscape: compact the home so the app grid (and its labels) fit. */
|
||||
@media (orientation: landscape) and (max-height: 620px) {
|
||||
.mobile-statusbar { height: 28px; font-size: 0.72rem; padding: 0 16px; }
|
||||
.mobile-status-time { font-size: 0.84rem; }
|
||||
.mobile-grid {
|
||||
top: 30px;
|
||||
bottom: 76px;
|
||||
grid-template-columns: repeat(7, minmax(0, 1fr));
|
||||
grid-auto-rows: 60px;
|
||||
gap: 8px 4px;
|
||||
padding: 4px 16px;
|
||||
}
|
||||
.mobile-app { gap: 2px; }
|
||||
.mobile-app-icon { width: 40px; height: 40px; border-radius: 14px; font-size: 19px; }
|
||||
.mobile-app-label { font-size: 0.55rem; }
|
||||
.mobile-widget { border-radius: 14px; padding: 5px 8px; }
|
||||
.mobile-widget-time { font-size: 1rem; }
|
||||
.mobile-widget-date { font-size: 0.5rem; }
|
||||
.mobile-dock { bottom: 10px; padding: 6px 10px; border-radius: 22px; }
|
||||
.mobile-app.in-dock .mobile-app-icon { width: 38px; height: 38px; border-radius: 13px; font-size: 18px; }
|
||||
.mobile-pagedots { display: none; }
|
||||
}
|
||||
|
||||
/* Respect reduced-motion preferences without breaking animationend callbacks
|
||||
(a near-zero duration still fires them so closing windows/apps unmount). */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.win-window,
|
||||
.win-window.closing,
|
||||
.kickoff,
|
||||
.mobile-app-view.opening,
|
||||
.mobile-app-view.closing,
|
||||
.mobile-app-view .mobile-appbar,
|
||||
.mobile-app-view .mobile-app-body {
|
||||
.kickoff {
|
||||
animation-duration: 0.01ms !important;
|
||||
}
|
||||
.win-icon {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue