|
|
|
@ -14,31 +14,38 @@ html {
|
|
|
|
|
// Theme
|
|
|
|
|
|
|
|
|
|
:root {
|
|
|
|
|
--gray-000: #ffffff;
|
|
|
|
|
--gray-100: #f8f8f8;
|
|
|
|
|
--gray-300: #f0f0f0;
|
|
|
|
|
--gray-350: #e8e8e8;
|
|
|
|
|
--gray-500: #d8d8d8;
|
|
|
|
|
--gray-600: #c0c0c0;
|
|
|
|
|
--gray-700: #b0b0b0;
|
|
|
|
|
--gray-800: #909090;
|
|
|
|
|
--gray-900: #282828;
|
|
|
|
|
|
|
|
|
|
// --accent-100: #e6ceff;
|
|
|
|
|
// --accent-400: #d0b8ef;
|
|
|
|
|
// --accent-500: #aa82db;
|
|
|
|
|
|
|
|
|
|
// --accent-100: hsl(221, 100%, 88%);
|
|
|
|
|
// --accent-400: hsl(221, 75%, 78%);
|
|
|
|
|
// --accent-500: hsl(221, 70%, 75%);
|
|
|
|
|
|
|
|
|
|
--accent-100: #d6ffc2;
|
|
|
|
|
--accent-400: #6cc16c;
|
|
|
|
|
--accent-500: #5aa05a;
|
|
|
|
|
--bg-500: #ffffff;
|
|
|
|
|
--bg-selected-500: #f8f8f8;
|
|
|
|
|
--bg-highlight-500: #f0f0f0;
|
|
|
|
|
--border-400: #e8e8e8;
|
|
|
|
|
--border-500: #d8d8d8;
|
|
|
|
|
--border-600: #c0c0c0;
|
|
|
|
|
--border-highlight-500: #b0b0b0;
|
|
|
|
|
--border-selected-500: #909090;
|
|
|
|
|
--text-500: #282828;
|
|
|
|
|
|
|
|
|
|
--accent-500: #d6ffc2;
|
|
|
|
|
--accent-100: #6cc16c;
|
|
|
|
|
--accent-900: #244624;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
$device-s-width: 500px;
|
|
|
|
|
body.dark-mode {
|
|
|
|
|
--bg-500: hsl(269, 24%, 18%);
|
|
|
|
|
--bg-selected-500: #722da0;
|
|
|
|
|
--bg-highlight-500: #a64edb;
|
|
|
|
|
--border-400: hsl(269, 40%, 30%);
|
|
|
|
|
--border-500: hsl(269, 40%, 40%);
|
|
|
|
|
--border-600: #a66af6;
|
|
|
|
|
--border-highlight-500: hsl(269, 80%, 78%);
|
|
|
|
|
--border-selected-500: #b66af6;
|
|
|
|
|
--text-500: #e6bdf6;
|
|
|
|
|
|
|
|
|
|
--accent-100: hsl(269, 44%, 24%);
|
|
|
|
|
--accent-500: hsl(269, 50%, 60%);
|
|
|
|
|
--accent-900: hsl(269, 20%, 80%);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
$device-s-width: 600px;
|
|
|
|
|
|
|
|
|
|
// Elements
|
|
|
|
|
|
|
|
|
@ -97,10 +104,10 @@ button,
|
|
|
|
|
|
|
|
|
|
gap: 0.25rem;
|
|
|
|
|
|
|
|
|
|
color: var(--gray-900);
|
|
|
|
|
color: var(--text-500);
|
|
|
|
|
|
|
|
|
|
background: var(--gray-000);
|
|
|
|
|
border: 2px solid var(--gray-350);
|
|
|
|
|
background: var(--bg-500);
|
|
|
|
|
border: 2px solid var(--border-400);
|
|
|
|
|
border-radius: 0.5rem;
|
|
|
|
|
|
|
|
|
|
font: inherit;
|
|
|
|
@ -125,8 +132,8 @@ button,
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&.primary {
|
|
|
|
|
background: var(--accent-100);
|
|
|
|
|
border-color: var(--accent-400);
|
|
|
|
|
background: var(--accent-500);
|
|
|
|
|
border-color: var(--accent-100);
|
|
|
|
|
|
|
|
|
|
&:hover::after {
|
|
|
|
|
background: #00000020;
|
|
|
|
@ -152,8 +159,8 @@ button,
|
|
|
|
|
|
|
|
|
|
height: 3rem;
|
|
|
|
|
|
|
|
|
|
background: var(--gray-000);
|
|
|
|
|
border: 2px solid var(--gray-350);
|
|
|
|
|
background: var(--bg-500);
|
|
|
|
|
border: 2px solid var(--border-400);
|
|
|
|
|
border-radius: 0.5rem;
|
|
|
|
|
|
|
|
|
|
font-weight: 400;
|
|
|
|
@ -282,16 +289,16 @@ button,
|
|
|
|
|
|
|
|
|
|
border-top-right-radius: 0.5rem;
|
|
|
|
|
border-bottom-right-radius: 0.5rem;
|
|
|
|
|
border: 2px solid var(--gray-350);
|
|
|
|
|
border: 2px solid var(--border-400);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&.radio {
|
|
|
|
|
&.selected {
|
|
|
|
|
background: var(--accent-100);
|
|
|
|
|
border-color: var(--accent-400);
|
|
|
|
|
background: var(--accent-500);
|
|
|
|
|
border-color: var(--accent-100);
|
|
|
|
|
|
|
|
|
|
& + .radio {
|
|
|
|
|
border-left-color: var(--accent-400);
|
|
|
|
|
border-left-color: var(--accent-100);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&:hover::after {
|
|
|
|
@ -305,8 +312,8 @@ button,
|
|
|
|
|
// Extension Classes
|
|
|
|
|
|
|
|
|
|
.panel {
|
|
|
|
|
background: var(--gray-000);
|
|
|
|
|
border: 1px solid var(--gray-500);
|
|
|
|
|
background: var(--bg-500);
|
|
|
|
|
border: 1px solid var(--border-500);
|
|
|
|
|
border-radius: 1rem;
|
|
|
|
|
padding: 1rem;
|
|
|
|
|
}
|
|
|
|
@ -329,8 +336,8 @@ button,
|
|
|
|
|
// Structure
|
|
|
|
|
|
|
|
|
|
body {
|
|
|
|
|
background: var(--gray-000);
|
|
|
|
|
color: var(--gray-900);
|
|
|
|
|
background: var(--bg-500);
|
|
|
|
|
color: var(--text-500);
|
|
|
|
|
|
|
|
|
|
font-weight: 300;
|
|
|
|
|
font-family: 'Inter', sans-serif;
|
|
|
|
@ -345,7 +352,7 @@ body {
|
|
|
|
|
|
|
|
|
|
border-radius: 0;
|
|
|
|
|
border: none;
|
|
|
|
|
border-bottom: 1px solid var(--gray-500);
|
|
|
|
|
border-bottom: 1px solid var(--border-500);
|
|
|
|
|
|
|
|
|
|
height: 4rem;
|
|
|
|
|
|
|
|
|
@ -415,7 +422,7 @@ body {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
|
|
|
|
&.selected {
|
|
|
|
|
background: var(--gray-100);
|
|
|
|
|
background: var(--bg-selected-500);
|
|
|
|
|
|
|
|
|
|
&::after {
|
|
|
|
|
content: '';
|
|
|
|
@ -423,13 +430,13 @@ body {
|
|
|
|
|
inset: -1px;
|
|
|
|
|
border-radius: 1rem;
|
|
|
|
|
|
|
|
|
|
border: 3px solid var(--gray-800);
|
|
|
|
|
border: 3px solid var(--border-selected-500);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&.highlight {
|
|
|
|
|
background: var(--gray-300);
|
|
|
|
|
border-color: var(--gray-700);
|
|
|
|
|
background: var(--bg-highlight-500);
|
|
|
|
|
border-color: var(--border-highlight-500);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.title {
|
|
|
|
@ -474,15 +481,15 @@ body {
|
|
|
|
|
|
|
|
|
|
height: calc(var(--size) * var(--event-height) + (var(--size) - 1) * 0.25rem);
|
|
|
|
|
|
|
|
|
|
border-top: 1px solid var(--gray-500);
|
|
|
|
|
border-right: 1px solid var(--gray-500);
|
|
|
|
|
border-top: 1px solid var(--border-500);
|
|
|
|
|
border-right: 1px solid var(--border-500);
|
|
|
|
|
padding: 0.5rem 1rem 0 0.5rem;
|
|
|
|
|
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
|
|
|
|
|
&:last-child {
|
|
|
|
|
border-bottom: 1px solid var(--gray-500);
|
|
|
|
|
border-bottom: 1px solid var(--border-500);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
@ -515,11 +522,11 @@ body {
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
|
|
|
|
|
border-left: 1px solid var(--gray-500);
|
|
|
|
|
border-left: 1px solid var(--border-500);
|
|
|
|
|
|
|
|
|
|
&:nth-child(2),
|
|
|
|
|
&:nth-child(4) {
|
|
|
|
|
border-right: 1px solid var(--gray-500);
|
|
|
|
|
border-right: 1px solid var(--border-500);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
@ -547,15 +554,14 @@ body {
|
|
|
|
|
grid-row: var(--row) / span 1;
|
|
|
|
|
grid-column: var(--start) / span var(--size);
|
|
|
|
|
|
|
|
|
|
// $color: hsl(var(--hue), 80%, 60%);
|
|
|
|
|
$color: var(--gray-000);
|
|
|
|
|
$color: var(--bg-500);
|
|
|
|
|
|
|
|
|
|
background: $color;
|
|
|
|
|
color: var(--gray-900);
|
|
|
|
|
color: var(--text-500);
|
|
|
|
|
|
|
|
|
|
border-radius: 0.25rem;
|
|
|
|
|
|
|
|
|
|
border: 1px solid var(--gray-600);
|
|
|
|
|
border: 1px solid var(--border-600);
|
|
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
padding: 0.4rem;
|
|
|
|
@ -595,11 +601,11 @@ body {
|
|
|
|
|
z-index: 2;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
border-top: 1px solid var(--gray-500);
|
|
|
|
|
border-top: 1px solid var(--border-500);
|
|
|
|
|
padding: 0.25rem 0;
|
|
|
|
|
|
|
|
|
|
&:last-child {
|
|
|
|
|
border-bottom: 1px solid var(--gray-500);
|
|
|
|
|
border-bottom: 1px solid var(--border-500);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
@ -630,10 +636,10 @@ body {
|
|
|
|
|
|
|
|
|
|
z-index: 2;
|
|
|
|
|
|
|
|
|
|
background: var(--gray-000);
|
|
|
|
|
background: var(--bg-500);
|
|
|
|
|
|
|
|
|
|
border-bottom: 1px solid var(--gray-500);
|
|
|
|
|
border-right: 1px solid var(--gray-500);
|
|
|
|
|
border-bottom: 1px solid var(--border-500);
|
|
|
|
|
border-right: 1px solid var(--border-500);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.left-header {
|
|
|
|
@ -645,9 +651,9 @@ body {
|
|
|
|
|
position: sticky;
|
|
|
|
|
left: 0;
|
|
|
|
|
|
|
|
|
|
border-right: 1px solid var(--gray-500);
|
|
|
|
|
border-right: 1px solid var(--border-500);
|
|
|
|
|
|
|
|
|
|
background: var(--gray-000);
|
|
|
|
|
background: var(--bg-500);
|
|
|
|
|
|
|
|
|
|
z-index: 1;
|
|
|
|
|
|
|
|
|
@ -669,7 +675,7 @@ body {
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
|
|
|
|
|
border-top: 1px solid var(--gray-500);
|
|
|
|
|
border-top: 1px solid var(--border-500);
|
|
|
|
|
|
|
|
|
|
@media screen and (max-width: $device-s-width) and (orientation: portrait),
|
|
|
|
|
screen and (max-height: $device-s-width) and (orientation: landscape) {
|
|
|
|
@ -678,7 +684,7 @@ body {
|
|
|
|
|
|
|
|
|
|
&:not(.skip-border) {
|
|
|
|
|
height: calc(2 * (var(--event-height) + 1rem) + 1px);
|
|
|
|
|
border-bottom: 1px solid var(--gray-500);
|
|
|
|
|
border-bottom: 1px solid var(--border-500);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
@ -708,12 +714,12 @@ body {
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
|
|
|
|
|
background: var(--gray-000);
|
|
|
|
|
border-bottom: 1px solid var(--gray-500);
|
|
|
|
|
background: var(--bg-500);
|
|
|
|
|
border-bottom: 1px solid var(--border-500);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&:not(:last-child) {
|
|
|
|
|
border-right: 1px solid var(--gray-500);
|
|
|
|
|
border-right: 1px solid var(--border-500);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.events {
|
|
|
|
@ -733,9 +739,9 @@ body {
|
|
|
|
|
grid-row: var(--start) / span var(--size);
|
|
|
|
|
grid-column: var(--stack) / span 1;
|
|
|
|
|
|
|
|
|
|
background: var(--gray-000);
|
|
|
|
|
background: var(--bg-500);
|
|
|
|
|
|
|
|
|
|
border: 1px solid var(--gray-600);
|
|
|
|
|
border: 1px solid var(--border-600);
|
|
|
|
|
// border: 4px solid hsl(var(--hue), 80%, 80%);
|
|
|
|
|
|
|
|
|
|
border-radius: 0.5rem;
|
|
|
|
@ -748,7 +754,7 @@ body {
|
|
|
|
|
padding: 0.5rem 1rem 0.5rem 0.5rem;
|
|
|
|
|
|
|
|
|
|
&.selected {
|
|
|
|
|
background: var(--gray-100);
|
|
|
|
|
background: var(--bg-selected-500);
|
|
|
|
|
|
|
|
|
|
&::after {
|
|
|
|
|
content: '';
|
|
|
|
@ -756,13 +762,13 @@ body {
|
|
|
|
|
inset: -1px;
|
|
|
|
|
border-radius: 0.5rem;
|
|
|
|
|
|
|
|
|
|
border: 3px solid var(--gray-800);
|
|
|
|
|
border: 3px solid var(--border-selected-500);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&.highlight {
|
|
|
|
|
background: var(--gray-300);
|
|
|
|
|
border-color: var(--gray-700);
|
|
|
|
|
background: var(--bg-highlight-500);
|
|
|
|
|
border-color: var(--border-highlight-500);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.title {
|
|
|
|
@ -781,7 +787,7 @@ body {
|
|
|
|
|
grid-row: var(--track) / span 2;
|
|
|
|
|
|
|
|
|
|
height: 0px;
|
|
|
|
|
border-bottom: 1px dashed var(--gray-500);
|
|
|
|
|
border-bottom: 1px dashed var(--border-500);
|
|
|
|
|
|
|
|
|
|
align-self: center;
|
|
|
|
|
|
|
|
|
@ -830,7 +836,7 @@ body {
|
|
|
|
|
width: 100vw;
|
|
|
|
|
height: 100vh;
|
|
|
|
|
|
|
|
|
|
background: var(--gray-000);
|
|
|
|
|
background: var(--bg-500);
|
|
|
|
|
|
|
|
|
|
z-index: 10;
|
|
|
|
|
|
|
|
|
@ -843,7 +849,7 @@ body {
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
|
|
|
|
border-bottom: 1px solid var(--gray-500);
|
|
|
|
|
border-bottom: 1px solid var(--border-500);
|
|
|
|
|
.logo {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
@ -878,7 +884,7 @@ body {
|
|
|
|
|
height: 1px;
|
|
|
|
|
left: 1rem;
|
|
|
|
|
|
|
|
|
|
background: var(--gray-500);
|
|
|
|
|
background: var(--border-500);
|
|
|
|
|
border: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|