mobile ui rework: iOS-style home screen
Rename Android UI to Mobile; add notch, signal/wifi/battery status icons, glossy monochrome glass app icons, 2x2 clock widget, frosted floating dock, and dot page indicators. Remove lock-screen clock, theme chip, navbar, and search bar.
This commit is contained in:
dvorakmortonxd
parent
7446f6a0dc
commit
784334d4be
4 changed files with 334 additions and 207 deletions
|
|
@ -1,90 +0,0 @@
|
||||||
"use client";
|
|
||||||
|
|
||||||
import { useState } from "react";
|
|
||||||
import { APPS, APP_BY_ID } from "./apps";
|
|
||||||
import Clock from "./Clock";
|
|
||||||
import { useTheme } from "./useTheme";
|
|
||||||
import { WALLPAPER } from "../data";
|
|
||||||
|
|
||||||
const DOCK_IDS = ["projects", "services", "socials", "contributions"];
|
|
||||||
|
|
||||||
export default function AndroidHome() {
|
|
||||||
const { theme, toggle } = useTheme();
|
|
||||||
const [openId, setOpenId] = useState<string | null>(null);
|
|
||||||
const openApp = openId ? APP_BY_ID[openId] : null;
|
|
||||||
|
|
||||||
const renderIcon = (appId: string, inDock = false) => {
|
|
||||||
const app = APP_BY_ID[appId];
|
|
||||||
if (!app) return null;
|
|
||||||
return (
|
|
||||||
<button
|
|
||||||
key={app.id}
|
|
||||||
type="button"
|
|
||||||
className={"android-app" + (inDock ? " in-dock" : "")}
|
|
||||||
onClick={() => setOpenId(app.id)}
|
|
||||||
>
|
|
||||||
<span className="android-app-icon" style={{ background: app.color }}>
|
|
||||||
{app.icon}
|
|
||||||
</span>
|
|
||||||
{!inDock && <span className="android-app-label">{app.title}</span>}
|
|
||||||
</button>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="android-root">
|
|
||||||
{openApp ? (
|
|
||||||
<div className="android-app-view">
|
|
||||||
<header className="android-appbar">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="android-back"
|
|
||||||
onClick={() => setOpenId(null)}
|
|
||||||
aria-label="Back"
|
|
||||||
>
|
|
||||||
←
|
|
||||||
</button>
|
|
||||||
<span className="android-appbar-title">{openApp.title}</span>
|
|
||||||
</header>
|
|
||||||
<div className="android-app-body app-surface">{openApp.content}</div>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="android-home" style={{ backgroundImage: `url('${WALLPAPER}')` }}>
|
|
||||||
<div className="android-statusbar">
|
|
||||||
<span className="android-status-time">
|
|
||||||
<Clock />
|
|
||||||
</span>
|
|
||||||
<span className="android-status-icons" aria-hidden="true">
|
|
||||||
ᯤ ▮
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="android-theme-chip"
|
|
||||||
onClick={toggle}
|
|
||||||
aria-label={`Switch to ${theme === "skeuo" ? "gruvbox" : "Desktop"} theme`}
|
|
||||||
>
|
|
||||||
<span aria-hidden="true">🎨</span>
|
|
||||||
<span>{theme === "skeuo" ? "Gruvbox" : "Desktop"}</span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div className="android-glance">
|
|
||||||
<div className="android-glance-time">
|
|
||||||
<Clock />
|
|
||||||
</div>
|
|
||||||
<div className="android-glance-sub">dvorakmortonxd.dev</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="android-grid">{APPS.map((app) => renderIcon(app.id))}</div>
|
|
||||||
|
|
||||||
<div className="android-dock">{DOCK_IDS.map((id) => renderIcon(id, true))}</div>
|
|
||||||
|
|
||||||
<div className="android-navbar">
|
|
||||||
<span className="android-navbar-pill" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
132
src/app/components/MobileHome.tsx
Normal file
132
src/app/components/MobileHome.tsx
Normal file
|
|
@ -0,0 +1,132 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState, useSyncExternalStore } from "react";
|
||||||
|
import { APPS, APP_BY_ID } from "./apps";
|
||||||
|
import Clock from "./Clock";
|
||||||
|
import { WALLPAPER } from "../data";
|
||||||
|
|
||||||
|
const DOCK_IDS = ["projects", "services", "socials", "contributions"];
|
||||||
|
|
||||||
|
function subscribe(callback: () => void) {
|
||||||
|
const id = window.setInterval(callback, 1000);
|
||||||
|
return () => window.clearInterval(id);
|
||||||
|
}
|
||||||
|
|
||||||
|
function HomeWidget() {
|
||||||
|
const date = useSyncExternalStore(
|
||||||
|
subscribe,
|
||||||
|
() =>
|
||||||
|
new Date().toLocaleDateString([], {
|
||||||
|
weekday: "long",
|
||||||
|
month: "short",
|
||||||
|
day: "numeric",
|
||||||
|
}),
|
||||||
|
() => ""
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="mobile-widget">
|
||||||
|
<div className="mobile-widget-time">
|
||||||
|
<Clock />
|
||||||
|
</div>
|
||||||
|
<div className="mobile-widget-date" suppressHydrationWarning>
|
||||||
|
{date}
|
||||||
|
</div>
|
||||||
|
<div className="mobile-widget-foot">dvorakmortonxd.dev</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function MobileHome() {
|
||||||
|
const [openId, setOpenId] = useState<string | null>(null);
|
||||||
|
const openApp = openId ? APP_BY_ID[openId] : null;
|
||||||
|
|
||||||
|
const renderIcon = (appId: string, inDock = false) => {
|
||||||
|
const app = APP_BY_ID[appId];
|
||||||
|
if (!app) return null;
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={app.id}
|
||||||
|
type="button"
|
||||||
|
className={"mobile-app" + (inDock ? " in-dock" : "")}
|
||||||
|
onClick={() => setOpenId(app.id)}
|
||||||
|
>
|
||||||
|
<span className="mobile-app-icon">
|
||||||
|
<span className="mobile-app-glyph">{app.icon}</span>
|
||||||
|
</span>
|
||||||
|
{!inDock && <span className="mobile-app-label">{app.title}</span>}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="mobile-root">
|
||||||
|
{openApp ? (
|
||||||
|
<div className="mobile-app-view">
|
||||||
|
<header className="mobile-appbar">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="mobile-back"
|
||||||
|
onClick={() => setOpenId(null)}
|
||||||
|
aria-label="Back"
|
||||||
|
>
|
||||||
|
←
|
||||||
|
</button>
|
||||||
|
<span className="mobile-appbar-title">{openApp.title}</span>
|
||||||
|
</header>
|
||||||
|
<div className="mobile-app-body app-surface">{openApp.content}</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="mobile-home" style={{ backgroundImage: `url('${WALLPAPER}')` }}>
|
||||||
|
<div className="mobile-notch" aria-hidden="true" />
|
||||||
|
|
||||||
|
<div className="mobile-statusbar">
|
||||||
|
<span className="mobile-status-time">
|
||||||
|
<Clock />
|
||||||
|
</span>
|
||||||
|
<span className="mobile-status-icons" aria-hidden="true">
|
||||||
|
<svg width="17" height="11" viewBox="0 0 17 11" fill="currentColor">
|
||||||
|
<rect x="0" y="7" width="3" height="4" rx="1" />
|
||||||
|
<rect x="4.5" y="5" width="3" height="6" rx="1" />
|
||||||
|
<rect x="9" y="2.5" width="3" height="8.5" rx="1" />
|
||||||
|
<rect x="13.5" y="0" width="3" height="11" rx="1" />
|
||||||
|
</svg>
|
||||||
|
<svg width="16" height="11" viewBox="0 0 16 11" fill="currentColor">
|
||||||
|
<path d="M8 2.2c2.3 0 4.4.9 6 2.4l-1.2 1.3A6.9 6.9 0 0 0 8 4.2a6.9 6.9 0 0 0-4.8 1.7L2 4.6A8.5 8.5 0 0 1 8 2.2Z" />
|
||||||
|
<path d="M8 5.6c1.5 0 2.8.6 3.8 1.6l-1.2 1.3A3.7 3.7 0 0 0 8 7.6c-1 0-1.9.4-2.6 1l-1.2-1.4A5.7 5.7 0 0 1 8 5.6Z" />
|
||||||
|
<path d="M8 9a1.4 1.4 0 1 1 0 2.8A1.4 1.4 0 0 1 8 9Z" />
|
||||||
|
</svg>
|
||||||
|
<svg width="25" height="12" viewBox="0 0 25 12" aria-hidden="true">
|
||||||
|
<rect
|
||||||
|
x="0.5"
|
||||||
|
y="0.5"
|
||||||
|
width="21"
|
||||||
|
height="11"
|
||||||
|
rx="3.5"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
opacity="0.5"
|
||||||
|
/>
|
||||||
|
<rect x="2" y="2" width="14" height="8" rx="2" fill="currentColor" />
|
||||||
|
<path d="M23 4v4a2 2 0 0 0 0-4Z" fill="currentColor" opacity="0.5" />
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mobile-grid">
|
||||||
|
<HomeWidget />
|
||||||
|
{APPS.map((app) => renderIcon(app.id))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mobile-dock">{DOCK_IDS.map((id) => renderIcon(id, true))}</div>
|
||||||
|
|
||||||
|
<div className="mobile-pagedots" aria-hidden="true">
|
||||||
|
<span className="active" />
|
||||||
|
<span />
|
||||||
|
<span />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
import { useTheme } from "./useTheme";
|
import { useTheme } from "./useTheme";
|
||||||
import TerminalLayout from "./TerminalLayout";
|
import TerminalLayout from "./TerminalLayout";
|
||||||
import WindowsDesktop from "./WindowsDesktop";
|
import WindowsDesktop from "./WindowsDesktop";
|
||||||
import AndroidHome from "./AndroidHome";
|
import MobileHome from "./MobileHome";
|
||||||
|
|
||||||
export default function ThemeRoot() {
|
export default function ThemeRoot() {
|
||||||
const { theme } = useTheme();
|
const { theme } = useTheme();
|
||||||
|
|
@ -18,7 +18,7 @@ export default function ThemeRoot() {
|
||||||
<WindowsDesktop />
|
<WindowsDesktop />
|
||||||
</div>
|
</div>
|
||||||
<div className="skeuo-mobile-root">
|
<div className="skeuo-mobile-root">
|
||||||
<AndroidHome />
|
<MobileHome />
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -2,9 +2,9 @@
|
||||||
SKEUOMORPHIC THEME
|
SKEUOMORPHIC THEME
|
||||||
------------------------------------------------------------
|
------------------------------------------------------------
|
||||||
Desktop -> KDE Plasma (Breeze)
|
Desktop -> KDE Plasma (Breeze)
|
||||||
Mobile -> modern Android (Material You / Material 3)
|
Mobile -> iOS-style home screen
|
||||||
Active when <html data-theme="skeuo">. The terminal theme is
|
Active when <html data-theme="skeuo">. The terminal theme is
|
||||||
the alternate, reachable from the tray / launcher / Android chip.
|
the alternate, reachable from the tray / launcher / app.
|
||||||
============================================================ */
|
============================================================ */
|
||||||
|
|
||||||
html[data-theme="skeuo"] {
|
html[data-theme="skeuo"] {
|
||||||
|
|
@ -35,7 +35,7 @@ html[data-theme="skeuo"] body {
|
||||||
.skeuo-mobile-root { display: block; }
|
.skeuo-mobile-root { display: block; }
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Real phones always get the Android UI, even in landscape. */
|
/* Real phones always get the mobile UI, even in landscape. */
|
||||||
html[data-device="phone"] .skeuo-desktop-root { display: none; }
|
html[data-device="phone"] .skeuo-desktop-root { display: none; }
|
||||||
html[data-device="phone"] .skeuo-mobile-root { display: block; }
|
html[data-device="phone"] .skeuo-mobile-root { display: block; }
|
||||||
|
|
||||||
|
|
@ -285,7 +285,7 @@ a.win-icon {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ============================================================
|
/* ============================================================
|
||||||
APP CONTENT SURFACE (shared by desktop windows + Android apps)
|
APP CONTENT SURFACE (shared by desktop windows + mobile apps)
|
||||||
============================================================ */
|
============================================================ */
|
||||||
.app-surface {
|
.app-surface {
|
||||||
--white: #0e3355;
|
--white: #0e3355;
|
||||||
|
|
@ -1035,13 +1035,13 @@ a.win-icon {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ============================================================
|
/* ============================================================
|
||||||
MOBILE -> modern Android (Material You)
|
MOBILE -> iOS-style home screen
|
||||||
============================================================ */
|
============================================================ */
|
||||||
.android-root {
|
.mobile-root {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.android-home {
|
.mobile-home {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
@ -1050,9 +1050,10 @@ a.win-icon {
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
|
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Roboto,
|
||||||
|
"Helvetica Neue", Arial, sans-serif;
|
||||||
}
|
}
|
||||||
.android-home::before {
|
.mobile-home::before {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
|
|
@ -1066,158 +1067,239 @@ a.win-icon {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
.android-statusbar {
|
.mobile-notch {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 132px;
|
||||||
|
height: 27px;
|
||||||
|
z-index: 60;
|
||||||
|
background: #000;
|
||||||
|
border-radius: 0 0 18px 18px;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.mobile-notch::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
right: 22px;
|
||||||
|
top: 9px;
|
||||||
|
width: 7px;
|
||||||
|
height: 7px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: radial-gradient(circle at 35% 30%, #2b3a55, #05070b 70%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-statusbar {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
height: 28px;
|
height: 30px;
|
||||||
z-index: 20;
|
z-index: 55;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: 0 18px;
|
padding: 0 16px;
|
||||||
font-size: 0.75rem;
|
font-size: 0.72rem;
|
||||||
font-weight: 500;
|
font-weight: 600;
|
||||||
letter-spacing: 0.02em;
|
letter-spacing: 0.01em;
|
||||||
}
|
}
|
||||||
.android-status-icons {
|
.mobile-status-time {
|
||||||
letter-spacing: 2px;
|
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
|
||||||
}
|
}
|
||||||
|
.mobile-status-icons {
|
||||||
.android-theme-chip {
|
|
||||||
position: absolute;
|
|
||||||
top: 36px;
|
|
||||||
right: 14px;
|
|
||||||
z-index: 20;
|
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 6px;
|
gap: 6px;
|
||||||
height: 34px;
|
|
||||||
padding: 0 14px;
|
|
||||||
border-radius: 17px;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.25);
|
|
||||||
background: rgba(255, 255, 255, 0.16);
|
|
||||||
color: #ffffff;
|
|
||||||
font-size: 0.75rem;
|
|
||||||
font-weight: 500;
|
|
||||||
-webkit-backdrop-filter: blur(10px);
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
}
|
||||||
.android-theme-chip:active {
|
.mobile-status-icons svg {
|
||||||
background: rgba(255, 255, 255, 0.28);
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.android-glance {
|
.mobile-widget {
|
||||||
position: absolute;
|
grid-column: span 2;
|
||||||
top: 58px;
|
grid-row: span 2;
|
||||||
left: 20px;
|
border-radius: 26px;
|
||||||
z-index: 10;
|
padding: 14px 16px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 2px;
|
||||||
|
overflow: hidden;
|
||||||
|
color: #ffffff;
|
||||||
|
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.28);
|
||||||
|
background-color: rgba(24, 26, 32, 0.62);
|
||||||
|
background-image: linear-gradient(
|
||||||
|
155deg,
|
||||||
|
rgba(255, 255, 255, 0.24),
|
||||||
|
rgba(255, 255, 255, 0.05) 46%,
|
||||||
|
rgba(0, 0, 0, 0.3)
|
||||||
|
);
|
||||||
|
box-shadow:
|
||||||
|
inset 0 1px 0 rgba(255, 255, 255, 0.45),
|
||||||
|
0 10px 26px rgba(0, 0, 0, 0.4);
|
||||||
|
-webkit-backdrop-filter: blur(18px) saturate(150%);
|
||||||
|
backdrop-filter: blur(18px) saturate(150%);
|
||||||
}
|
}
|
||||||
.android-glance-time {
|
.mobile-widget-time {
|
||||||
font-size: 3.4rem;
|
font-size: 2.5rem;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
letter-spacing: -0.02em;
|
letter-spacing: -0.02em;
|
||||||
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
|
|
||||||
}
|
}
|
||||||
.android-glance-sub {
|
.mobile-widget-date {
|
||||||
margin-top: 3px;
|
|
||||||
font-size: 0.78rem;
|
font-size: 0.78rem;
|
||||||
opacity: 0.92;
|
font-weight: 500;
|
||||||
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
|
opacity: 0.95;
|
||||||
|
}
|
||||||
|
.mobile-widget-foot {
|
||||||
|
margin-top: 4px;
|
||||||
|
font-size: 0.62rem;
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: 0.02em;
|
||||||
|
opacity: 0.72;
|
||||||
}
|
}
|
||||||
|
|
||||||
.android-grid {
|
.mobile-grid {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 182px;
|
top: 46px;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 112px;
|
bottom: 112px;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
padding: 8px 16px;
|
padding: 6px 14px;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(4, 1fr);
|
grid-template-columns: repeat(4, 1fr);
|
||||||
gap: 18px 8px;
|
grid-auto-rows: 86px;
|
||||||
|
gap: 14px 6px;
|
||||||
align-content: start;
|
align-content: start;
|
||||||
}
|
}
|
||||||
.android-app {
|
.mobile-app {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 6px;
|
gap: 5px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border: none;
|
border: none;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
color: inherit;
|
||||||
}
|
}
|
||||||
.android-app-icon {
|
.mobile-app-icon {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 58px;
|
width: 58px;
|
||||||
height: 58px;
|
height: 58px;
|
||||||
border-radius: 18px;
|
border-radius: 21px;
|
||||||
display: grid;
|
display: grid;
|
||||||
place-items: center;
|
place-items: center;
|
||||||
font-size: 27px;
|
font-size: 27px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border: 1px solid rgba(255, 255, 255, 0.25);
|
border: 1px solid rgba(255, 255, 255, 0.24);
|
||||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 3px 10px rgba(0, 0, 0, 0.45);
|
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%);
|
||||||
}
|
}
|
||||||
.android-app-icon::after {
|
.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: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0) 55%);
|
background: linear-gradient(
|
||||||
|
to bottom,
|
||||||
|
rgba(255, 255, 255, 0.3),
|
||||||
|
rgba(255, 255, 255, 0) 48%
|
||||||
|
);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
.android-app-label {
|
.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%;
|
max-width: 100%;
|
||||||
font-size: 0.68rem;
|
font-size: 0.66rem;
|
||||||
|
font-weight: 400;
|
||||||
line-height: 1.15;
|
line-height: 1.15;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
overflow-wrap: anywhere;
|
overflow-wrap: anywhere;
|
||||||
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
|
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
|
||||||
}
|
}
|
||||||
|
|
||||||
.android-dock {
|
.mobile-dock {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 12px;
|
||||||
right: 0;
|
right: 12px;
|
||||||
bottom: 42px;
|
bottom: 30px;
|
||||||
z-index: 10;
|
z-index: 15;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
align-items: center;
|
||||||
gap: 20px;
|
justify-content: space-evenly;
|
||||||
padding: 0 16px;
|
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%);
|
||||||
}
|
}
|
||||||
.android-app.in-dock .android-app-icon {
|
.mobile-app.in-dock .mobile-app-icon {
|
||||||
width: 52px;
|
width: 54px;
|
||||||
height: 52px;
|
height: 54px;
|
||||||
border-radius: 16px;
|
border-radius: 19px;
|
||||||
font-size: 24px;
|
font-size: 25px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.android-navbar {
|
.mobile-pagedots {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 14px;
|
||||||
height: 22px;
|
z-index: 15;
|
||||||
z-index: 30;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
gap: 7px;
|
||||||
}
|
}
|
||||||
.android-navbar-pill {
|
.mobile-pagedots span {
|
||||||
width: 130px;
|
width: 6px;
|
||||||
height: 5px;
|
height: 6px;
|
||||||
border-radius: 3px;
|
border-radius: 50%;
|
||||||
background: rgba(255, 255, 255, 0.85);
|
background: rgba(255, 255, 255, 0.35);
|
||||||
|
}
|
||||||
|
.mobile-pagedots span.active {
|
||||||
|
background: rgba(255, 255, 255, 0.9);
|
||||||
}
|
}
|
||||||
|
|
||||||
.android-app-view {
|
.mobile-app-view {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
z-index: 40;
|
z-index: 40;
|
||||||
|
|
@ -1227,7 +1309,7 @@ a.win-icon {
|
||||||
color: #1d1b20;
|
color: #1d1b20;
|
||||||
font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
|
font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||||
}
|
}
|
||||||
.android-appbar {
|
.mobile-appbar {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -1236,7 +1318,7 @@ a.win-icon {
|
||||||
background: #fef7ff;
|
background: #fef7ff;
|
||||||
border-bottom: 1px solid #e7e0ec;
|
border-bottom: 1px solid #e7e0ec;
|
||||||
}
|
}
|
||||||
.android-back {
|
.mobile-back {
|
||||||
width: 40px;
|
width: 40px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
border: none;
|
border: none;
|
||||||
|
|
@ -1246,19 +1328,19 @@ a.win-icon {
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.android-back:hover {
|
.mobile-back:hover {
|
||||||
background: #eadcff;
|
background: #eadcff;
|
||||||
}
|
}
|
||||||
.android-appbar-title {
|
.mobile-appbar-title {
|
||||||
font-size: 1.1rem;
|
font-size: 1.1rem;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
.android-app-body {
|
.mobile-app-body {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
background: #fef7ff;
|
background: #fef7ff;
|
||||||
}
|
}
|
||||||
.android-app-body.app-surface {
|
.mobile-app-body.app-surface {
|
||||||
--accent: #6750a4;
|
--accent: #6750a4;
|
||||||
--accent2: #7d5260;
|
--accent2: #7d5260;
|
||||||
--accent3: #6750a4;
|
--accent3: #6750a4;
|
||||||
|
|
@ -1268,10 +1350,10 @@ a.win-icon {
|
||||||
--fg: #1d1b20;
|
--fg: #1d1b20;
|
||||||
color: #1d1b20;
|
color: #1d1b20;
|
||||||
}
|
}
|
||||||
.android-app-body .project-card,
|
.mobile-app-body .project-card,
|
||||||
.android-app-body .service-button,
|
.mobile-app-body .service-button,
|
||||||
.android-app-body .social-button,
|
.mobile-app-body .social-button,
|
||||||
.android-app-body .gym-item {
|
.mobile-app-body .gym-item {
|
||||||
border-radius: 14px;
|
border-radius: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1298,28 +1380,31 @@ a.win-icon {
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 380px) {
|
@media (max-width: 380px) {
|
||||||
.android-grid {
|
.mobile-grid {
|
||||||
grid-template-columns: repeat(3, 1fr);
|
grid-template-columns: repeat(3, 1fr);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Phones in landscape: compact the home so the app grid (and its labels) fit. */
|
/* Phones in landscape: compact the home so the app grid (and its labels) fit. */
|
||||||
@media (orientation: landscape) and (max-height: 620px) {
|
@media (orientation: landscape) and (max-height: 620px) {
|
||||||
.android-glance { top: 32px; left: 16px; }
|
.mobile-notch { width: 108px; height: 22px; }
|
||||||
.android-glance-time { font-size: 1.9rem; }
|
.mobile-statusbar { height: 24px; font-size: 0.66rem; padding: 0 14px; }
|
||||||
.android-glance-sub { margin-top: 1px; font-size: 0.66rem; }
|
.mobile-grid {
|
||||||
.android-theme-chip { top: 28px; right: 12px; height: 30px; padding: 0 12px; font-size: 0.7rem; }
|
top: 30px;
|
||||||
.android-grid {
|
bottom: 76px;
|
||||||
top: 92px;
|
grid-template-columns: repeat(7, 1fr);
|
||||||
bottom: 80px;
|
grid-auto-rows: 62px;
|
||||||
grid-template-columns: repeat(6, 1fr);
|
gap: 8px 6px;
|
||||||
gap: 10px 8px;
|
padding: 4px 22px;
|
||||||
padding: 4px 24px;
|
|
||||||
}
|
}
|
||||||
.android-app { gap: 4px; }
|
.mobile-app { gap: 3px; }
|
||||||
.android-app-icon { width: 44px; height: 44px; border-radius: 14px; font-size: 21px; }
|
.mobile-app-icon { width: 42px; height: 42px; border-radius: 15px; font-size: 20px; }
|
||||||
.android-app-label { font-size: 0.6rem; }
|
.mobile-app-label { font-size: 0.58rem; }
|
||||||
.android-dock { bottom: 26px; gap: 18px; }
|
.mobile-widget { border-radius: 20px; padding: 10px 12px; }
|
||||||
.android-app.in-dock .android-app-icon { width: 42px; height: 42px; border-radius: 13px; font-size: 20px; }
|
.mobile-widget-time { font-size: 1.6rem; }
|
||||||
.android-navbar { height: 16px; }
|
.mobile-widget-date { font-size: 0.66rem; }
|
||||||
|
.mobile-widget-foot { display: none; }
|
||||||
|
.mobile-dock { bottom: 14px; padding: 7px 12px; border-radius: 24px; }
|
||||||
|
.mobile-app.in-dock .mobile-app-icon { width: 40px; height: 40px; border-radius: 14px; font-size: 19px; }
|
||||||
|
.mobile-pagedots { display: none; }
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue