48 lines
6.1 KiB
CSS
48 lines
6.1 KiB
CSS
/* Skylight Home / Schedule reference. All overrides are isolated to this theme. */
|
|
html[data-theme=skylight]{color-scheme:light;color:#292929;background:#fff;font-family:"Avenir Next",Avenir,"Trebuchet MS",Arial,sans-serif;--border:#e5e7e8;--muted:#757b80;--event-font:16px;--event-small:12px}
|
|
[data-theme=skylight] body{padding:104px 24px 30px 116px}
|
|
[data-theme=skylight] .theme-header{display:flex;position:absolute;top:0;left:124px;right:24px;height:88px;align-items:center;gap:24px}
|
|
[data-theme=skylight] #today-date{font-family:Georgia,serif;font-size:44px;white-space:nowrap}
|
|
[data-theme=skylight] .theme-title{margin-left:auto;color:#757b80;font-size:18px}
|
|
[data-theme=skylight] .theme-rail{display:flex;position:absolute;top:0;bottom:0;left:0;width:92px;background:#e8f1f6;flex-direction:column;align-items:center;gap:44px;color:#747e83;font-size:30px;text-align:center;padding:20px 0}
|
|
[data-theme=skylight] .theme-rail small{display:block;font-size:15px;margin-top:4px}
|
|
[data-theme=skylight] .rail-home{color:#292929;background:white;width:92px;margin-top:-20px;padding:20px 0 18px}
|
|
[data-theme=skylight] .dashboard{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);height:calc(100dvh - 134px);gap:24px}
|
|
[data-theme=skylight] .card{background:white;border-color:#e5e7e8;border-radius:20px}
|
|
[data-theme=skylight] aside{gap:20px}
|
|
[data-theme=skylight] .clock-card{position:absolute;top:0;left:440px;height:88px;min-height:0;border:0;border-radius:0;background:transparent;padding:0;gap:10px}
|
|
[data-theme=skylight] #clock{font-family:Georgia,serif;font-size:42px;line-height:1;font-weight:400}
|
|
[data-theme=skylight] #period{font-family:Georgia,serif;font-size:36px;opacity:1;align-self:center;margin:0}
|
|
[data-theme=skylight] h2{font-weight:600;font-size:22px}
|
|
[data-theme=skylight] .tasks>h2{display:none}
|
|
[data-theme=skylight] .task-grid{grid-template-columns:1fr;grid-template-rows:1fr}
|
|
[data-theme=skylight] .task-list h2{margin:24px}
|
|
[data-theme=skylight] .task-list li{margin:8px 0;padding:18px 16px;border:0;border-radius:12px;background:#f0f4fa;gap:14px;font-size:18px}
|
|
[data-theme=skylight] .task-list ul{padding:0 24px}
|
|
[data-theme=skylight] .task-dot{border-radius:50%;border-color:#9faabd;width:22px;height:22px;flex-basis:22px}
|
|
[data-theme=skylight] .calendar{padding:20px 16px 12px}
|
|
[data-theme=skylight] .day-heading,[data-theme=skylight] .all-day-cell,[data-theme=skylight] .day-column{background-color:white;border-left-color:#eaedef}
|
|
[data-theme=skylight] .day-heading{color:#65696e;font-size:14px}
|
|
[data-theme=skylight] .day-heading strong,[data-theme=skylight] .day-weather{color:#292929}
|
|
[data-theme=skylight] .day-heading.today strong{background:#ec8b36;color:white}
|
|
[data-theme=skylight] .day-heading strong{font-size:26px}
|
|
[data-theme=skylight] .day-column{background-image:repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--hour-height) - 1px),#eceeef calc(var(--hour-height) - 1px),#eceeef var(--hour-height))}
|
|
[data-theme=skylight] .event{border-radius:9px;padding:6px 8px}
|
|
[data-theme=skylight] .all-day-event{border-radius:6px}
|
|
[data-theme=skylight] .event-title{font-weight:600}
|
|
[data-theme=skylight] .now-line,[data-theme=skylight] .now-line:before{background:#ec8b36}
|
|
[data-theme=skylight] .calendar-detail,[data-theme=skylight] .all-day-more{color:#747b80}
|
|
[data-theme=skylight] #status{left:116px;color:#747b80}
|
|
[data-theme=skylight] #status.warning{color:#966100}
|
|
[data-theme=skylight] .source-stale{border-color:#bd933b}
|
|
@media(min-width:2400px){[data-theme=skylight] body{padding:156px 36px 38px 164px}[data-theme=skylight] .dashboard{height:calc(100dvh - 194px);gap:32px}[data-theme=skylight] .theme-rail{width:128px;font-size:44px;gap:60px}[data-theme=skylight] .rail-home{width:128px}[data-theme=skylight] .theme-rail small{font-size:22px}[data-theme=skylight] .theme-header{left:164px;height:136px}[data-theme=skylight] #today-date{font-size:64px}[data-theme=skylight] .clock-card{left:640px;height:136px}[data-theme=skylight] #clock{font-size:64px}[data-theme=skylight] #period{font-size:54px}[data-theme=skylight] h2{font-size:32px}[data-theme=skylight] .task-list li{font-size:26px;padding:24px}[data-theme=skylight] .day-heading{font-size:22px}[data-theme=skylight] .day-heading strong{font-size:36px}[data-theme=skylight]{--event-font:22px;--event-small:16px}}
|
|
@media(max-width:900px){[data-theme=skylight] body{padding:88px 12px 32px}[data-theme=skylight] .theme-rail{display:none}[data-theme=skylight] .theme-header{left:12px;height:76px}[data-theme=skylight] #today-date{font-size:24px}[data-theme=skylight] .theme-title{display:none}[data-theme=skylight] .clock-card{left:auto;right:12px;height:76px}[data-theme=skylight] #clock{font-size:28px}[data-theme=skylight] #period{font-size:22px}[data-theme=skylight] .dashboard{grid-template-columns:1fr;height:auto;gap:16px}[data-theme=skylight] .calendar{padding:12px 6px}[data-theme=skylight] .day-heading{font-size:11px}[data-theme=skylight] .day-heading strong{font-size:18px}[data-theme=skylight] #status{left:8px;background:#fffffff0}[data-theme=skylight]{--event-font:12px;--event-small:10px}}
|
|
|
|
[data-theme=skylight] .day-heading{position:relative;display:flex;align-items:flex-start;gap:6px;padding:10px 8px 34px;font-family:Georgia,serif;font-size:clamp(16px,1.35vw,38px);min-height:82px;white-space:nowrap}
|
|
[data-theme=skylight] .day-heading strong{font-family:Georgia,serif;font-size:inherit;font-weight:400;line-height:1.15}
|
|
[data-theme=skylight] .day-summary{min-height:0}
|
|
[data-theme=skylight] .day-weather{position:absolute;bottom:6px;left:8px;font-family:"Trebuchet MS",Arial,sans-serif;font-size:12px;gap:4px}
|
|
[data-theme=skylight] .day-heading.today strong{width:32px;height:32px;margin-top:-3px}
|
|
@media(min-width:2400px){[data-theme=skylight] .day-heading{min-height:114px;padding-bottom:46px}[data-theme=skylight] .day-weather{font-size:18px}[data-theme=skylight] .day-heading.today strong{width:46px;height:46px}}
|
|
@media(max-width:900px){[data-theme=skylight] .day-heading{font-size:14px;gap:2px;padding:6px 3px 34px;min-height:70px;flex-wrap:wrap}[data-theme=skylight] .day-weather{left:3px;font-size:10px}[data-theme=skylight] .day-heading.today strong{width:24px;height:24px}[data-theme=skylight] .day-summary{flex-direction:row}}
|