/* * himmel.css — Design-System "Himmel". * * Der Hintergrund folgt dem Tag: fuenf Himmel von Fajr bis Isha, gesetzt ueber * `data-himmel` am . Darauf liegt Glas (halbdurchsichtige, weichgezeichnete * Karten) mit weisser Schrift. Farbe gehoert den Aktivitaetsgruppen und steht * immer zusammen mit Symbol und Name — nie allein. * * Schriften: Jost (Zahlen, Ueberschriften), Manrope (Text). Beide selbst * gehostet, damit kein Aufruf an Dritte geht. */ @font-face { font-family: 'Jost'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('../fonts/jost-latin-wght-normal.woff2') format('woff2-variations'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Jost'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('../fonts/jost-latin-ext-wght-normal.woff2') format('woff2-variations'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 200 800; src: url('../fonts/manrope-latin-wght-normal.woff2') format('woff2-variations'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 200 800; src: url('../fonts/manrope-latin-ext-wght-normal.woff2') format('woff2-variations'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { color-scheme: dark; --text: #FFFFFF; --text-2: rgba(255, 255, 255, 0.86); --text-3: rgba(255, 255, 255, 0.7); --line: rgba(255, 255, 255, 0.16); --line-2: rgba(255, 255, 255, 0.28); --glass: rgba(6, 10, 28, 0.4); --glass-2: rgba(6, 10, 28, 0.55); --glass-hell: rgba(255, 255, 255, 0.08); --blur: blur(16px); --knopf: #FFFFFF; --knopf-text: #10162C; --sonne: #FFE3A3; --gut: #7EE0B0; --warn: #FFB27A; --fehler: #FF8A8A; --r-karte: 24px; --r-klein: 14px; --gutter: 18px; --nav-h: 76px; --sicher-unten: env(safe-area-inset-bottom, 0px); --sicher-oben: env(safe-area-inset-top, 0px); --f-text: 'Manrope', 'Helvetica Neue', system-ui, sans-serif; --f-zahl: 'Jost', 'Manrope', system-ui, sans-serif; --himmel: linear-gradient(180deg, #1F4870 0%, #6F6049 52%, #B9803F 100%); --himmel-fest: #1F4870; } /* Die fuenf Himmel. Fest gesetzte Farbe fuer Leisten, die ueber dem Verlauf liegen. */ :root[data-himmel="fajr"] { --himmel: linear-gradient(180deg, #141A3A 0%, #2E2D5E 52%, #8E5A7A 100%); --himmel-fest: #141A3A; } :root[data-himmel="dhuhr"] { --himmel: linear-gradient(180deg, #17467F 0%, #2C68AE 50%, #5A94CF 100%); --himmel-fest: #17467F; } :root[data-himmel="asr"] { --himmel: linear-gradient(180deg, #1F4870 0%, #6F6049 52%, #B9803F 100%); --himmel-fest: #1F4870; } :root[data-himmel="maghrib"] { --himmel: linear-gradient(180deg, #1D1A42 0%, #66305A 50%, #B85A3A 100%); --himmel-fest: #1D1A42; } :root[data-himmel="isha"] { --himmel: linear-gradient(180deg, #050817 0%, #0A1330 55%, #13214A 100%); --himmel-fest: #050817; } @media (prefers-reduced-transparency: reduce) { :root { --glass: rgba(6, 10, 28, 0.78); --glass-2: rgba(6, 10, 28, 0.88); --blur: none; } } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; min-height: 100%; } body { font-family: var(--f-text); font-size: 15px; line-height: 1.45; color: var(--text); background: var(--himmel-fest); background-image: var(--himmel); background-attachment: fixed; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } a { color: inherit; } :focus-visible { outline: 2px solid var(--sonne); outline-offset: 2px; border-radius: 8px; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } [hidden] { display: none !important; } /* Sterne: nur nachts sichtbar, rein dekorativ. */ .sterne { position: fixed; inset: 0 0 auto 0; height: 60vh; pointer-events: none; z-index: 0; opacity: 0; transition: opacity 1.2s; } :root[data-himmel="isha"] .sterne { opacity: 1; } :root[data-himmel="fajr"] .sterne { opacity: 0.5; } :root[data-himmel="maghrib"] .sterne { opacity: 0.3; } .sterne span { position: absolute; border-radius: 999px; background: #fff; } /* ------------------------------------------------------------ Grundgeruest */ .app { position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; } .inhalt { flex: 1; width: 100%; max-width: 560px; margin: 0 auto; padding: calc(20px + var(--sicher-oben)) var(--gutter) calc(var(--nav-h) + var(--sicher-unten) + 24px); display: flex; flex-direction: column; gap: 16px; } .kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 0 6px; } .kopf h1 { margin: 0; font-size: 15px; font-weight: 600; } .kopf .unter { font-size: 13px; color: var(--text-2); } .titel { font-family: var(--f-zahl); font-weight: 300; font-size: 30px; line-height: 1.15; margin: 4px 6px 0; } .label { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); } /* ------------------------------------------------------------ Glas */ .karte { padding: 18px; border-radius: var(--r-karte); background: var(--glass); border: 1px solid var(--line); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); display: flex; flex-direction: column; gap: 10px; } .karte h2 { margin: 0; font-size: 15px; font-weight: 600; } .karte .zeile-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .trenner { height: 1px; background: var(--line); border: 0; margin: 2px 0; } .leise { color: var(--text-2); font-size: 13px; } .hinweis { font-size: 13px; line-height: 1.5; color: var(--text-2); } /* ------------------------------------------------------------ Knoepfe */ .knopf { min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--text); font-size: 15px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; white-space: nowrap; } .knopf.voll { background: var(--knopf); color: var(--knopf-text); border-color: transparent; } .knopf.klein { min-height: 36px; padding: 0 14px; font-size: 14px; } .knopf.breit { width: 100%; } .knopf:disabled { opacity: 0.45; cursor: default; } .knopf.gefahr { border-color: rgba(255, 138, 138, 0.6); color: var(--fehler); } .textknopf { min-height: 44px; padding: 0 2px; border: 0; background: none; color: var(--text); font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; } .rund { width: 44px; height: 44px; flex-shrink: 0; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(6, 10, 28, 0.3); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); display: inline-flex; align-items: center; justify-content: center; color: var(--text); text-decoration: none; } .reihe { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } /* ------------------------------------------------------------ Symbole */ .ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } .ic.gross { width: 22px; height: 22px; stroke-width: 1.7; } .ic.klein { width: 14px; height: 14px; stroke-width: 2.1; } /* Farbiger Kreis der Gruppe mit weissem Symbol oder Monogramm. */ .plakette { width: 32px; height: 32px; flex-shrink: 0; border-radius: 999px; background: var(--farbe, #4A5270); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; } .plakette.gross { width: 44px; height: 44px; font-size: 15px; } .plakette.gross .ic { width: 22px; height: 22px; } .plakette.riesig { width: 64px; height: 64px; font-size: 20px; } .plakette.riesig .ic { width: 30px; height: 30px; stroke-width: 1.6; } /* ------------------------------------------------------------ Chips */ .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chips.wisch { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter); scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); } .chips.wisch::-webkit-scrollbar { display: none; } .chip { min-height: 44px; padding: 0 16px 0 6px; display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(6, 10, 28, 0.34); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--text); font-size: 15px; font-weight: 500; white-space: nowrap; scroll-snap-align: start; } .chip.nur-text { padding: 0 16px; } .chip[aria-pressed="true"] { background: rgba(255, 255, 255, 0.92); color: var(--knopf-text); border-color: transparent; } .chip[aria-pressed="true"] .plakette { box-shadow: 0 0 0 2px #fff; } .chip .haken { width: 18px; height: 18px; } /* ------------------------------------------------------------ Listen */ .liste { display: flex; flex-direction: column; } .zeile { min-height: 52px; display: flex; align-items: center; gap: 12px; padding: 6px 0; border: 0; border-top: 1px solid var(--line); background: none; color: var(--text); text-align: left; width: 100%; text-decoration: none; } .zeile:first-child { border-top: 0; } .zeile .haupt { flex: 1; min-width: 0; display: flex; flex-direction: column; } .zeile .name { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .zeile .neben { font-size: 13px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .zeile .rechts { flex-shrink: 0; font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; } .zeile .zeit { width: 44px; flex-shrink: 0; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; } .zeile .streifen { width: 4px; height: 22px; border-radius: 2px; background: var(--farbe, #fff); flex-shrink: 0; } .abzeichen { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); color: var(--text); } /* ------------------------------------------------------------ Eingaben */ .feld { display: flex; flex-direction: column; gap: 6px; } .feld > span { font-size: 13px; color: var(--text-2); } .eingabe, select.eingabe, textarea.eingabe { min-height: 48px; padding: 10px 16px; border-radius: var(--r-klein); border: 1px solid var(--line-2); background: rgba(6, 10, 28, 0.35); color: var(--text); font-size: 16px; /* unter 16px zoomt iOS beim Tippen ins Feld */ width: 100%; } textarea.eingabe { min-height: 96px; resize: vertical; line-height: 1.5; } select.eingabe option { color: #10162C; } .eingabe::placeholder { color: var(--text-3); } .suche { position: relative; } .suche .ic { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); pointer-events: none; } .suche .eingabe { padding-left: 46px; border-radius: 999px; } .schalter { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; } .schalter input { appearance: none; -webkit-appearance: none; width: 52px; height: 32px; border-radius: 999px; background: rgba(255, 255, 255, 0.22); position: relative; flex-shrink: 0; cursor: pointer; transition: background 0.2s; margin: 0; } .schalter input::after { content: ''; position: absolute; left: 3px; top: 3px; width: 26px; height: 26px; border-radius: 999px; background: #fff; transition: transform 0.2s; } .schalter input:checked { background: #34C77B; } .schalter input:checked::after { transform: translateX(20px); } .segment { display: flex; padding: 3px; border-radius: 999px; background: rgba(6, 10, 28, 0.35); border: 1px solid var(--line); } .segment button { flex: 1; min-height: 38px; border: 0; border-radius: 999px; background: none; font-size: 14px; font-weight: 600; color: var(--text-2); } .segment button[aria-pressed="true"], .segment button[aria-selected="true"] { background: #fff; color: var(--knopf-text); } /* ------------------------------------------------------------ Navigation */ .nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; height: calc(var(--nav-h) + var(--sicher-unten)); padding: 6px 6px calc(10px + var(--sicher-unten)); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--line); background: rgba(6, 10, 28, 0.55); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); } .nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-decoration: none; color: var(--text-3); font-size: 11px; font-weight: 600; } .nav a[aria-current="page"] { color: var(--text); font-weight: 700; } .nav .ic { width: 22px; height: 22px; stroke-width: 1.7; } .nav .marke { display: none; } /* ------------------------------------------------------------ Blaetter (Bottom Sheets) */ .blatt-grund { position: fixed; inset: 0; z-index: 40; background: rgba(3, 5, 15, 0.55); display: flex; align-items: flex-end; justify-content: center; animation: einblenden 0.18s ease-out; } .blatt { width: 100%; max-width: 560px; max-height: 92vh; max-height: 92dvh; overflow-y: auto; padding: 10px var(--gutter) calc(24px + var(--sicher-unten)); border-radius: 28px 28px 0 0; background: var(--himmel-fest); background-image: var(--himmel); border: 1px solid var(--line); border-bottom: 0; box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.35); display: flex; flex-direction: column; gap: 14px; animation: hoch 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); } .blatt .griff { width: 40px; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.35); align-self: center; margin-bottom: 4px; } .blatt-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .blatt-kopf h2 { margin: 0; font-size: 18px; font-weight: 600; } @keyframes hoch { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes einblenden { from { opacity: 0; } to { opacity: 1; } } /* Kurze Rueckmeldung mit Rueckgaengig. */ .toast { position: fixed; left: 50%; transform: translateX(-50%); z-index: 50; bottom: calc(var(--nav-h) + var(--sicher-unten) + 14px); width: min(520px, calc(100% - 2 * var(--gutter))); min-height: 52px; padding: 8px 8px 8px 18px; border-radius: 18px; background: rgba(12, 16, 36, 0.92); border: 1px solid var(--line); display: flex; align-items: center; gap: 12px; font-size: 14px; animation: hoch 0.2s ease-out; } .toast span { flex: 1; } /* ------------------------------------------------------------ Jetzt */ .bogen { position: relative; height: 160px; } .bogen svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .bogen .mitte { position: absolute; left: 50px; right: 50px; top: 70px; display: flex; flex-direction: column; align-items: center; } .bogen .wert { font-family: var(--f-zahl); font-weight: 300; font-size: 36px; line-height: 1.1; } .uhr { font-family: var(--f-zahl); font-weight: 200; font-size: 66px; line-height: 1.05; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .laufend-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .laufend-kopf .name { font-size: 17px; font-weight: 600; } .tagesbalken { display: flex; gap: 2px; height: 26px; } .tagesbalken button, .tagesbalken span { min-width: 3px; height: 26px; padding: 0; border: 0; border-radius: 6px; background: var(--farbe, rgba(255, 255, 255, 0.14)); color: #fff; display: flex; align-items: center; justify-content: center; gap: 4px; overflow: hidden; font-size: 11px; font-weight: 700; white-space: nowrap; } .tagesbalken .luecke { background: repeating-linear-gradient(135deg, rgba(255,255,255,0.12) 0 4px, transparent 4px 8px); } .tagesbalken [aria-pressed="true"] { box-shadow: 0 0 0 2px #fff; } /* ------------------------------------------------------------ Tag (Zeitleiste) */ .zeitleiste { position: relative; display: grid; grid-template-columns: 44px 1fr 1fr; column-gap: 8px; } .zeitleiste .stunde { position: absolute; left: 0; font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; transform: translateY(-50%); } .zeitleiste .spur { position: relative; overflow: hidden; } .zeitleiste .spur-kopf { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); padding-bottom: 6px; } .zeitleiste .raster { position: absolute; left: 52px; right: 0; height: 1px; background: rgba(255, 255, 255, 0.08); } .block { position: absolute; left: 0; right: 0; border-radius: 10px; overflow: hidden; background: var(--farbe, #4A5270); color: #fff; border: 0; text-align: left; padding: 4px 8px; display: flex; flex-direction: column; justify-content: flex-start; gap: 0; font-size: 12px; line-height: 1.3; } .block .b-name { display: flex; align-items: center; gap: 5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .block .b-zeit { opacity: 0.9; white-space: nowrap; } .block.plan { background: color-mix(in srgb, var(--farbe, #4A5270) 35%, transparent); border: 1.5px solid var(--farbe, #fff); } .block.plan.verpasst { border-style: dashed; opacity: 0.8; } .block.luecke { background: repeating-linear-gradient(135deg, rgba(255,255,255,0.1) 0 5px, transparent 5px 10px); border: 1px dashed rgba(255,255,255,0.35); color: var(--text-2); align-items: center; justify-content: center; } .gebetspille { position: absolute; left: 52px; right: 0; display: flex; align-items: center; gap: 6px; pointer-events: none; z-index: 2; transform: translateY(-50%); } .gebetspille::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(255, 227, 163, 0.55); } .gebetspille span { position: relative; margin-left: auto; padding: 2px 8px; border-radius: 999px; background: rgba(255, 227, 163, 0.9); color: #3B2A06; font-size: 11px; font-weight: 700; } .jetzt-linie { position: absolute; left: 52px; right: 0; height: 2px; background: #fff; z-index: 3; box-shadow: 0 0 8px rgba(255,255,255,0.8); } /* ------------------------------------------------------------ Diagramme */ .balken-h { height: 10px; border-radius: 999px; background: rgba(255,255,255,0.12); overflow: hidden; } .balken-h i { display: block; height: 100%; border-radius: 999px; background: var(--farbe, #fff); } .kennzahlen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .kennzahl { padding: 14px; border-radius: 18px; background: var(--glass-hell); border: 1px solid var(--line); } .kennzahl .wert { font-family: var(--f-zahl); font-size: 28px; font-weight: 300; line-height: 1.1; } .kennzahl .was { font-size: 12px; color: var(--text-2); } svg.diagramm { width: 100%; height: auto; display: block; overflow: visible; } svg.diagramm text { fill: var(--text-2); font-family: var(--f-text); font-size: 11px; } /* ------------------------------------------------------------ Einrichtung */ .schritte { display: flex; gap: 6px; } .schritte i { flex: 1; height: 4px; border-radius: 999px; background: rgba(255,255,255,0.2); } .schritte i.an { background: #fff; } /* ------------------------------------------------------------ Computer */ @media (min-width: 1024px) { :root { --gutter: 28px; } .app { flex-direction: row; } .nav { position: sticky; top: 0; left: auto; right: auto; bottom: auto; width: 232px; height: 100vh; flex-shrink: 0; padding: 28px 14px; border-top: 0; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; } .nav .marke { display: block; font-family: var(--f-zahl); font-size: 22px; font-weight: 400; padding: 0 12px 20px; color: var(--text); } .nav a { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 0 12px; min-height: 44px; border-radius: 12px; font-size: 15px; } .nav a[aria-current="page"] { background: rgba(255,255,255,0.12); } .inhalt { max-width: 1180px; padding: 32px var(--gutter) 48px; } .inhalt.breit { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; gap: 18px; } .inhalt.breit > * { grid-column: span 12; } .inhalt.breit > .halb { grid-column: span 6; } .inhalt.breit > .drittel { grid-column: span 4; } .inhalt.breit > .zwei-drittel { grid-column: span 8; } .toast { bottom: 24px; } .blatt-grund { align-items: center; } .blatt { border-radius: 28px; border-bottom: 1px solid var(--line); max-height: 86vh; } .kennzahlen { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* Diagramme skalieren mit der Breite; auf grossen Karten nicht ueberdimensional. */ .karte svg.diagramm { max-width: 520px; margin: 0 auto; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* Wisch-Hinweis zum Blaettern zwischen Tagen */ .day-swipe-hint { position: fixed; z-index: 30; top: var(--swipe-y, 50%); right: 16px; transform: translate(calc((1 - var(--swipe-pull, 0)) * 40px), -50%); opacity: var(--swipe-alpha, 0); pointer-events: none; padding: 10px 14px; border-radius: 16px; background: rgba(12, 16, 36, 0.9); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; font-size: 13px; max-width: 220px; } .day-swipe-hint.previous { right: auto; left: 16px; transform: translate(calc((var(--swipe-pull, 0) - 1) * 40px), -50%); } .day-swipe-hint.settling { transition: opacity 0.2s, transform 0.2s; } .day-swipe-hint strong { font-size: 0; } .day-swipe-hint span { font-weight: 600; } .day-swipe-hint .day-swipe-track { height: 3px; border-radius: 3px; background: rgba(255,255,255,0.2); overflow: hidden; } .day-swipe-hint .day-swipe-track i { display: block; height: 100%; width: calc(var(--swipe-pull, 0) * 100%); background: #fff; } .day-swipe-hint .day-swipe-arrow { display: none; }