18 lines
7.0 KiB
CSS
18 lines
7.0 KiB
CSS
:root{color-scheme:dark;font-family:Roboto,Arial,sans-serif;color:#e1e1e1;background:#111;--border:#383838;--muted:#aaa;--event-font:16px;--event-small:12px}
|
|
*{box-sizing:border-box}body{margin:0;padding:8px;overflow:hidden}.dashboard{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;height:calc(100dvh - 42px);min-height:0}
|
|
.card{background:#1c1c1c;border:1px solid var(--border);border-radius:12px;overflow:hidden}aside{min-width:0;min-height:0;display:flex;flex-direction:column;gap:8px}h2{font-size:20px;font-weight:400;margin:16px}
|
|
.clock-card{display:flex;align-items:center;justify-content:center;padding:16px;min-height:144px;gap:16px;flex:none}#clock{font-size:128px;line-height:.85;font-weight:500;font-variant-numeric:tabular-nums}#period{font-size:48px;opacity:.6;align-self:flex-end;margin-bottom:8px}
|
|
.weather{flex:none}.weather h2{margin-bottom:14px}.forecast{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:3px;padding:0 12px 16px;text-align:center}.forecast-slot{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:14px}.weather-icon{width:36px;height:36px;flex-shrink:0}.temperature{font-size:18px}.rain{color:var(--muted);font-size:12px;min-height:14px}
|
|
.tasks{display:flex;flex-direction:column;flex:1;min-height:0}.tasks>h2{margin:12px 0}.task-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:8px;flex:1;min-height:0}.task-list{display:flex;flex-direction:column;min-height:0}.task-list h2{margin:16px;flex:none}.task-window{flex:1;min-height:0;overflow:hidden}.task-list ul{list-style:none;padding:0 16px;margin:0}.task-list li{display:flex;gap:12px;align-items:flex-start;padding:10px 0;line-height:1.35;border-bottom:1px solid #ffffff08;font-size:16px}.task-text{min-width:0;overflow-wrap:anywhere}.task-title{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.task-dot{width:18px;height:18px;flex:0 0 18px;border:2px solid #9b9b9b;border-radius:3px;margin-top:1px}.task-description{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12px;color:var(--muted);margin-top:4px}.task-count{flex:none;min-height:24px;padding:4px 16px 8px;color:var(--muted);font-size:12px}
|
|
.empty,.loading{color:var(--muted);font-size:14px;margin:20px 16px}.calendar{padding:16px 12px 12px;background:#30363f;min-height:0}#calendar{display:flex;flex-direction:column;height:100%;min-height:0}.schedule-head,.all-day,.schedule-body{display:grid;grid-template-columns:48px repeat(7,minmax(0,1fr))}.schedule-head{flex:none}.day-heading{text-align:center;padding:4px 0 8px;font-size:13px;color:var(--muted);background:#353c45;border-left:1px solid #46505c}.day-summary{display:flex;align-items:center;justify-content:center;gap:12px;min-height:44px}.day-heading strong{display:block;font-size:24px;font-weight:500;color:#e1e1e1}.day-heading.today strong{background:#3385ff;color:white;border-radius:50%;width:38px;height:38px;display:flex;align-items:center;justify-content:center}.day-weather{display:flex;gap:7px;align-items:center;white-space:pre-line;font-size:13px;color:#e1e1e1}.day-weather .weather-icon{width:20px;height:20px}
|
|
.all-day{flex:none;border-bottom:1px solid var(--border);min-height:30px;max-height:20%}.all-day-label{font-size:11px;color:var(--muted);padding-top:8px}.all-day-cell{background:#353c45;border-left:1px solid #46505c;padding:3px;overflow:hidden}.all-day-event{border-radius:4px;padding:4px;font-size:12px;margin-bottom:3px;color:var(--event-text,#151515);overflow-wrap:anywhere}.all-day-more{font-size:10px;color:#ccc;min-height:12px}.schedule-body{flex:1;min-height:0}.hours{position:relative}.hour-label{position:absolute;left:0;right:5px;color:var(--muted);font-size:11px;text-align:right;transform:translateY(-50%)}.day-column{position:relative;min-height:0;border-left:1px solid #46505c;background-color:#353c45;background-image:repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--hour-height) - 1px),#ffffff15 calc(var(--hour-height) - 1px),#ffffff15 var(--hour-height))}
|
|
.event{position:absolute;border-radius:5px;padding:4px 5px;color:var(--event-text,#151515);overflow:hidden;font-size:var(--event-font);line-height:1.2;overflow-wrap:anywhere}.event-title{font-weight:500;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.event-time,.event-location{font-size:var(--event-small);margin-top:3px}.event.compact{padding:3px 4px}.event.compact .event-title{-webkit-line-clamp:1;white-space:nowrap;text-overflow:ellipsis;display:block;overflow:hidden}.event.compact .event-time,.event.compact .event-location{display:none}.event.past{opacity:.55}.now-line{position:absolute;height:2px;background:#f44336;left:0;right:0;z-index:3}.now-line:before{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:#f44336;left:-4px;top:-3px}.calendar-detail{flex:none;min-height:22px;font-size:12px;color:#d4d8df;padding:6px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
|
#status{position:fixed;bottom:5px;left:16px;right:16px;color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#status.warning{color:#ffd180}.card.source-stale{border-color:#8d7139}
|
|
@media(min-width:2400px){:root{--event-font:20px;--event-small:15px}h2{font-size:32px}.forecast-slot{font-size:22px}.temperature{font-size:28px}.task-list li{font-size:20px}.task-list h2{margin:24px}.weather-icon{width:44px;height:44px}.all-day-event{font-size:20px}.day-heading{font-size:18px}.day-heading strong{font-size:32px}.day-weather{font-size:18px}.day-weather .weather-icon{width:24px;height:24px}.task-count,#status,.calendar-detail{font-size:16px}.all-day-more{font-size:14px}}
|
|
@media(max-height:800px) and (min-width:901px){.clock-card{min-height:104px;padding:10px}#clock{font-size:96px}#period{font-size:32px}.weather h2{font-size:16px;margin:10px}.forecast-slot{gap:4px;font-size:12px}.weather-icon{width:26px;height:26px}.task-list h2{margin:10px 16px;font-size:18px}.tasks>h2{margin:8px 0}.task-list li{padding:6px 0;font-size:14px}}
|
|
@media(max-width:900px){body{overflow:auto;padding-bottom:30px}.dashboard{grid-template-columns:1fr;height:auto}.calendar{height:75dvh;min-height:480px}aside{height:90dvh;min-height:650px}.forecast{gap:2px;padding-left:4px;padding-right:4px}.forecast-slot{font-size:11px}.weather-icon{width:23px;height:23px}.temperature{font-size:14px}:root{--event-font:12px;--event-small:10px}.schedule-head,.all-day,.schedule-body{grid-template-columns:36px repeat(7,minmax(0,1fr))}.day-summary{gap:3px;flex-direction:column}.day-weather{font-size:10px}.day-weather .weather-icon{width:12px;height:12px}.day-heading strong{font-size:18px}.day-heading.today strong{height:28px;width:28px}#clock{font-size:clamp(72px,18vw,128px)}#period{font-size:32px}#status{background:#111e;padding:4px;left:4px;right:4px}}
|
|
.all-day-event{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
|
|
|
|
.theme-header,.theme-rail{display:none}
|
|
.task-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
|