|
|
@ -28,35 +28,34 @@ html {
|
|
|
|
--accent-500: #6cc16c;
|
|
|
|
--accent-500: #6cc16c;
|
|
|
|
--accent-900: #244624;
|
|
|
|
--accent-900: #244624;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
--bubble-red: hsl(359, 100%, 92%);
|
|
|
|
--bubble-red: hsl(359, 100%, 92%);
|
|
|
|
--bubble-purple: hsl(274, 100%, 92%);
|
|
|
|
--bubble-purple: hsl(274, 100%, 92%);
|
|
|
|
--bubble-blue: hsl(241, 100%, 92%);
|
|
|
|
--bubble-blue: hsl(241, 100%, 92%);
|
|
|
|
--bubble-yellow: hsl(50, 100%, 92%);
|
|
|
|
--bubble-yellow: hsl(50, 100%, 92%);
|
|
|
|
--bubble-green: hsl(125, 100%, 92%);
|
|
|
|
--bubble-green: hsl(125, 100%, 92%);
|
|
|
|
--bubble-orange: hsl(25, 100%, 92%);
|
|
|
|
--bubble-orange: hsl(25, 100%, 92%);
|
|
|
|
--bubble-lightlightblue: hsl(176, 100%, 92%);
|
|
|
|
--bubble-lightlightblue: hsl(176, 100%, 92%);
|
|
|
|
--bubble-lightblue: hsl(198, 100%, 92%);
|
|
|
|
--bubble-lightblue: hsl(198, 100%, 92%);
|
|
|
|
|
|
|
|
|
|
|
|
--bubble-highlight-red: hsl(359, 100%, 85%);
|
|
|
|
--bubble-highlight-red: hsl(359, 100%, 85%);
|
|
|
|
--bubble-highlight-purple: hsl(274, 100%, 85%);
|
|
|
|
--bubble-highlight-purple: hsl(274, 100%, 85%);
|
|
|
|
--bubble-highlight-blue: hsl(241, 100%, 85%);
|
|
|
|
--bubble-highlight-blue: hsl(241, 100%, 85%);
|
|
|
|
--bubble-highlight-yellow: hsl(50, 100%, 85%);
|
|
|
|
--bubble-highlight-yellow: hsl(50, 100%, 85%);
|
|
|
|
--bubble-highlight-green: hsl(125, 100%, 85%);
|
|
|
|
--bubble-highlight-green: hsl(125, 100%, 85%);
|
|
|
|
--bubble-highlight-orange: hsl(25, 100%, 85%);
|
|
|
|
--bubble-highlight-orange: hsl(25, 100%, 85%);
|
|
|
|
--bubble-highlight-lightlightblue: hsl(176, 100%, 85%);
|
|
|
|
--bubble-highlight-lightlightblue: hsl(176, 100%, 85%);
|
|
|
|
--bubble-highlight-lightblue: hsl(198, 100%, 85%);
|
|
|
|
--bubble-highlight-lightblue: hsl(198, 100%, 85%);
|
|
|
|
|
|
|
|
|
|
|
|
--bubble-border-red: hsl(359, 75%, 51%);
|
|
|
|
--bubble-border-red: hsl(359, 75%, 51%);
|
|
|
|
--bubble-border-purple: hsl(274, 75%, 51%);
|
|
|
|
--bubble-border-purple: hsl(274, 75%, 51%);
|
|
|
|
--bubble-border-blue: hsl(241, 75%, 51%);
|
|
|
|
--bubble-border-blue: hsl(241, 75%, 51%);
|
|
|
|
--bubble-border-yellow: hsl(50, 75%, 51%);
|
|
|
|
--bubble-border-yellow: hsl(50, 75%, 51%);
|
|
|
|
--bubble-border-green: hsl(125, 75%, 51%);
|
|
|
|
--bubble-border-green: hsl(125, 75%, 51%);
|
|
|
|
--bubble-border-orange: hsl(25, 75%, 51%);
|
|
|
|
--bubble-border-orange: hsl(25, 75%, 51%);
|
|
|
|
--bubble-border-lightlightblue: hsl(176, 75%, 51%);
|
|
|
|
--bubble-border-lightlightblue: hsl(176, 75%, 51%);
|
|
|
|
--bubble-border-lightblue: hsl(198, 75%, 51%);
|
|
|
|
--bubble-border-lightblue: hsl(198, 75%, 51%);
|
|
|
|
|
|
|
|
|
|
|
|
--bold-on-dark: 300;
|
|
|
|
--bold-on-dark: 300;
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
body.dark-mode {
|
|
|
|
body.dark-mode {
|
|
|
@ -74,32 +73,31 @@ body.dark-mode {
|
|
|
|
--accent-500: hsl(269, 40%, 70%);
|
|
|
|
--accent-500: hsl(269, 40%, 70%);
|
|
|
|
--accent-900: hsl(269, 30%, 90%);
|
|
|
|
--accent-900: hsl(269, 30%, 90%);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
--bubble-red: hsl(359, 40%, 25%);
|
|
|
|
--bubble-red: hsl(359, 40%, 25%);
|
|
|
|
--bubble-purple: hsl(274, 40%, 25%);
|
|
|
|
--bubble-purple: hsl(274, 40%, 25%);
|
|
|
|
--bubble-blue: hsl(241, 40%, 25%);
|
|
|
|
--bubble-blue: hsl(241, 40%, 25%);
|
|
|
|
--bubble-yellow: hsl(50, 40%, 25%);
|
|
|
|
--bubble-yellow: hsl(50, 40%, 25%);
|
|
|
|
--bubble-green: hsl(125, 40%, 25%);
|
|
|
|
--bubble-green: hsl(125, 40%, 25%);
|
|
|
|
--bubble-orange: hsl(25, 40%, 25%);
|
|
|
|
--bubble-orange: hsl(25, 40%, 25%);
|
|
|
|
--bubble-lightblue: hsl(176, 40%, 25%);
|
|
|
|
--bubble-lightblue: hsl(176, 40%, 25%);
|
|
|
|
|
|
|
|
|
|
|
|
--bubble-border-red: hsl(359, 75%, 51%);
|
|
|
|
--bubble-border-red: hsl(359, 75%, 51%);
|
|
|
|
--bubble-border-purple: hsl(274, 75%, 51%);
|
|
|
|
--bubble-border-purple: hsl(274, 75%, 51%);
|
|
|
|
--bubble-border-blue: hsl(241, 75%, 51%);
|
|
|
|
--bubble-border-blue: hsl(241, 75%, 51%);
|
|
|
|
--bubble-border-yellow: hsl(50, 75%, 51%);
|
|
|
|
--bubble-border-yellow: hsl(50, 75%, 51%);
|
|
|
|
--bubble-border-green: hsl(125, 75%, 51%);
|
|
|
|
--bubble-border-green: hsl(125, 75%, 51%);
|
|
|
|
--bubble-border-orange: hsl(25, 75%, 51%);
|
|
|
|
--bubble-border-orange: hsl(25, 75%, 51%);
|
|
|
|
--bubble-border-lightblue: hsl(176, 75%, 51%);
|
|
|
|
--bubble-border-lightblue: hsl(176, 75%, 51%);
|
|
|
|
|
|
|
|
|
|
|
|
--bubble-highlight-red: hsl(359, 40%, 31%);
|
|
|
|
--bubble-highlight-red: hsl(359, 40%, 31%);
|
|
|
|
--bubble-highlight-purple: hsl(274, 40%, 31%);
|
|
|
|
--bubble-highlight-purple: hsl(274, 40%, 31%);
|
|
|
|
--bubble-highlight-blue: hsl(241, 40%, 31%);
|
|
|
|
--bubble-highlight-blue: hsl(241, 40%, 31%);
|
|
|
|
--bubble-highlight-yellow: hsl(50, 40%, 31%);
|
|
|
|
--bubble-highlight-yellow: hsl(50, 40%, 31%);
|
|
|
|
--bubble-highlight-green: hsl(125, 40%, 31%);
|
|
|
|
--bubble-highlight-green: hsl(125, 40%, 31%);
|
|
|
|
--bubble-highlight-orange: hsl(25, 40%, 31%);
|
|
|
|
--bubble-highlight-orange: hsl(25, 40%, 31%);
|
|
|
|
--bubble-highlight-lightblue: hsl(176, 40%, 31%);
|
|
|
|
--bubble-highlight-lightblue: hsl(176, 40%, 31%);
|
|
|
|
|
|
|
|
|
|
|
|
--bold-on-dark: 500;
|
|
|
|
--bold-on-dark: 500;
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
$device-s-width: 600px;
|
|
|
|
$device-s-width: 600px;
|
|
|
@ -880,109 +878,108 @@ body {
|
|
|
|
height: 100%;
|
|
|
|
height: 100%;
|
|
|
|
overflow: scroll;
|
|
|
|
overflow: scroll;
|
|
|
|
|
|
|
|
|
|
|
|
.grid {
|
|
|
|
.grid {
|
|
|
|
width: 100%;
|
|
|
|
width: 100%;
|
|
|
|
max-width: 55rem;
|
|
|
|
max-width: 55rem;
|
|
|
|
display: grid;
|
|
|
|
display: grid;
|
|
|
|
grid-template-columns: 3rem repeat(var(--time-length), 1fr);
|
|
|
|
grid-template-columns: 3rem repeat(var(--time-length), 1fr);
|
|
|
|
grid-template-rows: 2rem repeat(var(--days-length), 1fr);
|
|
|
|
grid-template-rows: 2rem repeat(var(--days-length), 1fr);
|
|
|
|
border: 2px solid var(--border-500);
|
|
|
|
border: 2px solid var(--border-500);
|
|
|
|
border-radius: 10px 10px 0 0;
|
|
|
|
border-radius: 10px 10px 0 0;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@media screen and (max-width: $device-s-width), (pointer: coarse) {
|
|
|
|
@media screen and (max-width: $device-s-width), (pointer: coarse) {
|
|
|
|
font-size: 12px;
|
|
|
|
font-size: 12px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.time {
|
|
|
|
.time {
|
|
|
|
display: flex;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
|
|
|
justify-content: center;
|
|
|
|
padding: 0.5rem;
|
|
|
|
padding: 0.5rem;
|
|
|
|
grid-row: 1;
|
|
|
|
grid-row: 1;
|
|
|
|
grid-column: var(--offset) / span 2;
|
|
|
|
grid-column: var(--offset) / span 2;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.day-name {
|
|
|
|
.day-name {
|
|
|
|
display: flex;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
|
|
|
justify-content: center;
|
|
|
|
padding: 0.5rem;
|
|
|
|
padding: 0.5rem;
|
|
|
|
grid-column: 1;
|
|
|
|
grid-column: 1;
|
|
|
|
grid-row: var(--line);
|
|
|
|
grid-row: var(--line);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.event {
|
|
|
|
.event {
|
|
|
|
display: flex;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: row;
|
|
|
|
flex-direction: row;
|
|
|
|
@media screen and (max-width: $device-s-width), (pointer: coarse) {
|
|
|
|
@media screen and (max-width: $device-s-width), (pointer: coarse) {
|
|
|
|
flex-direction: column;
|
|
|
|
flex-direction: column;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
gap: 0.25rem;
|
|
|
|
gap: 0.25rem;
|
|
|
|
align-items: center;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
|
|
|
justify-content: center;
|
|
|
|
margin: 0.25rem;
|
|
|
|
margin: 0.25rem;
|
|
|
|
padding: 0.5rem;
|
|
|
|
padding: 0.5rem;
|
|
|
|
grid-row: var(--line);
|
|
|
|
grid-row: var(--line);
|
|
|
|
grid-column: var(--offset) / span var(--length);
|
|
|
|
grid-column: var(--offset) / span var(--length);
|
|
|
|
background-color: var(--color);
|
|
|
|
background-color: var(--color);
|
|
|
|
border: 3px solid var(--color);
|
|
|
|
border: 3px solid var(--color);
|
|
|
|
border-radius: 10px;
|
|
|
|
border-radius: 10px;
|
|
|
|
font-weight: var(--bold-on-dark);
|
|
|
|
font-weight: var(--bold-on-dark);
|
|
|
|
text-align: center;
|
|
|
|
text-align: center;
|
|
|
|
|
|
|
|
|
|
|
|
&.highlight {
|
|
|
|
&.highlight {
|
|
|
|
background-color: var(--highlight-color);
|
|
|
|
background-color: var(--highlight-color);
|
|
|
|
border: 3px solid var(--highlight-color);
|
|
|
|
border: 3px solid var(--highlight-color);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
&.selected {
|
|
|
|
&.selected {
|
|
|
|
border: 3px solid var(--border-color);
|
|
|
|
border: 3px solid var(--border-color);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.hline {
|
|
|
|
.hline {
|
|
|
|
grid-column: 1 / 13;
|
|
|
|
grid-column: 1 / 13;
|
|
|
|
grid-row: var(--line);
|
|
|
|
grid-row: var(--line);
|
|
|
|
height: 0px;
|
|
|
|
height: 0px;
|
|
|
|
border-bottom: 1px solid var(--border-500);
|
|
|
|
border-bottom: 1px solid var(--border-500);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.vline {
|
|
|
|
.vline {
|
|
|
|
grid-column: var(--offset);
|
|
|
|
grid-column: var(--offset);
|
|
|
|
grid-row: 1 / calc(2 + var(--days-length));
|
|
|
|
grid-row: 1 / calc(2 + var(--days-length));
|
|
|
|
width: 0px;
|
|
|
|
width: 0px;
|
|
|
|
border-right: 1px dashed var(--border-500);
|
|
|
|
border-right: 1px dashed var(--border-500);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.legend {
|
|
|
|
.legend {
|
|
|
|
max-width: 55rem;
|
|
|
|
max-width: 55rem;
|
|
|
|
display: grid;
|
|
|
|
display: grid;
|
|
|
|
grid-template-columns: min-content 1fr;
|
|
|
|
grid-template-columns: min-content 1fr;
|
|
|
|
border: 2px solid var(--border-500);
|
|
|
|
border: 2px solid var(--border-500);
|
|
|
|
border-radius: 0 0 10px 10px;
|
|
|
|
border-radius: 0 0 10px 10px;
|
|
|
|
border-top: none;
|
|
|
|
border-top: none;
|
|
|
|
padding: 1rem;
|
|
|
|
padding: 1rem;
|
|
|
|
gap: 0.5rem 1rem;
|
|
|
|
gap: 0.5rem 1rem;
|
|
|
|
align-items: center;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
|
|
|
justify-content: center;
|
|
|
|
width: 100%;
|
|
|
|
width: 100%;
|
|
|
|
|
|
|
|
|
|
|
|
.name {
|
|
|
|
.name {
|
|
|
|
width: 100%;
|
|
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.color {
|
|
|
|
.color {
|
|
|
|
display: flex;
|
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
|
|
|
justify-content: center;
|
|
|
|
align-items: center;
|
|
|
|
align-items: center;
|
|
|
|
font-weight: 500;
|
|
|
|
font-weight: 500;
|
|
|
|
width: 2rem;
|
|
|
|
width: 2rem;
|
|
|
|
height: 1.5rem;
|
|
|
|
height: 1.5rem;
|
|
|
|
background-color: var(--color);
|
|
|
|
background-color: var(--color);
|
|
|
|
border: 2px solid var(--border-color);
|
|
|
|
border: 2px solid var(--border-color);
|
|
|
|
border-radius: 10px;
|
|
|
|
border-radius: 10px;
|
|
|
|
font-weight: var(--bold-on-dark);
|
|
|
|
font-weight: var(--bold-on-dark);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.schedule-view {
|
|
|
|
.schedule-view {
|
|
|
|