html {
height: 100%;
}
body {
height: 100%;
margin: 0;
}
.root {
display: flex;
margin: 0;
max-width: 100%;
height: 100%;
}
.small-calendar {
text-align: right;
border-collapse: collapse;
}
.small-calendar thead {
border-bottom: 1px solid black;
}
.small-calendar .prev,
.small-calendar .next {
color: grey;
}
.small-calendar td {
padding: 5px;
}
.small-calendar td:nth-child(7).cur {
color: red;
}
.small-calendar .today {
border: 1px solid black;
}
.text-day {
border-left: 2px solid black;
border-top: 2px solid black;
padding-left: 2px;
margin-top: 1em;
}
.text-day header h2 {
width: 100%;
text-align: center;
font-size: 14pt;
}
.sideinfo {
width: 20em;
height: 100%;
display: flex;
flex-direction: column;
}
.sideinfo .nav {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
font-size: 150%;
}
.sideinfo .about {
display: flex;
justify-content: center;
}
.sideinfo .small-calendar {
margin-left: 1em;
margin-right: 1em;
}
.sideinfo .eventlist {
overflow: scroll;
}
.sideinfo .eventlist article {
border-bottom: 1px solid black;
margin-top: 1em;
border-left-style: solid;
border-left-width: 6px;
padding-left: 2px;
}
.sideinfo .eventlist {
white-space: pre-line;
font-size: 10pt;
}
.sideinfo .eventlist h3 {
font-size: 12pt;
border-bottom: 1px solid gray;
margin-bottom: 0;
font-weight: 300;
}
.hidelink {
color: inherit;
text-decoration: none;
}
.root main {
max-width: calc(100% - 20em);
display: flex;
flex-direction: column;
}
.calendar {
width: 100%;
height: 100%;
display: flex;
flex-grow: 2;
}
.sideclock {
/* border-right: 2px solid gray; */
z-index: 1;
height: 100%;
padding: 0;
}
.sideclock .meta {
border-bottom: 2px solid transparent;
}
.sideclock .day {
border: 1px transparent;
min-width: 0;
}
.days .meta {
border-bottom: 2px solid gray;
}
.days {
display: flex;
width: 100%;
height: 100%;
padding: 0;
overflow-x: scroll;
scroll-snap-type: x mandatory;
}
.events {
position: relative;
width: 100%;
/* height: calc(100% - 50px); */
flex-grow: 1;
}
/* Clockbar is also .events */
.clockbar {
/* Removing this draws timestamps on top of calendar instead of
* besides it */
width: 2.5em;
}
.wholeday {
position: relative;
width: 100%;
height: calc(3 * 1.5em);
padding-bottom: 2px;
border-bottom: 2px solid black;
}
.wholeday .event {
/* max-height: 1.5em; */
max-height: 33%;
}
/*
* This makes the borders of the object be part of the size.
* Making placing it on the correct line much simpler.
*/
.clock, .event {
position: absolute;
box-sizing: border-box;
margin: 0;
display: block;
}
.clock {
color: gray;
border-top: 1px dotted gray;
}
.sideclock .clock {
border: none;
}
.clocktext {
z-index: 1;
text-align: right;
}
.day {
position: relative;
height: 99%;
width: 100%;
min-width: 200px;
margin-left: 0.5em;
border: 1px solid black;
display: flex;
flex-direction: column;
scroll-snap-align: start;
}
.day .clock {
width: calc(100% + 0.5em);
}
.meta {
height: 50px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.meta .dayname {
position: absolute;
left: 5px;
top: 2px;
color: grey;
}
.meta .daydate {
font-size: 200%;
}
.event {
width: 100%;
border: 2px solid black;
font-size: 8pt;
overflow: hidden;
z-index: 0;
}
.root footer {
font-family: monospace;
margin: 0.5em;
}
.root footer span {
margin: 0 1em;
}
/* */
.events .event.continuing {
border-bottom: none;
background-image: linear-gradient(to top, #0007 0%,#FFF0 2em);
}
.events .event.continued {
border-top: none;
background-image: linear-gradient(to bottom, #FFF7 0%,#FFF0 3em);
}
.events .event.continued.continuing {
border-top: none;
border-bottom: none;
background-image:
linear-gradient(to bottom,
#FFF7 0%, #FFF0 10%,
#FFF0 90%, #0007 100%);
}
/* */
.wholeday .event.continuing {
border-right: none;
background-image: linear-gradient(to left, #0007 0%,#FFF0 4em);
}
.wholeday .event.continued {
border-left: none;
background-image: linear-gradient(to right, #FFF7 0%,#FFF0 6em);
}
.wholeday .event.continued.continuing {
border-left: none;
border-right: none;
background-image:
linear-gradient(to right,
#FFF7 0%, #FFF0 10%,
#FFF0 90%, #0007 100%);
}
.event.generated {
background-color: #55FF5550;
}
.selected {
width: 100% !important;
left: 0 !important;
z-index: 1 !important;
margin-top: 3mm;
margin-left: 3mm;
}
.clock-0 { top: calc(100%/24 * 0); }
.clock-2 { top: calc(100%/24 * 2); }
.clock-4 { top: calc(100%/24 * 4); }
.clock-6 { top: calc(100%/24 * 6); }
.clock-8 { top: calc(100%/24 * 8); border-width: 2px; }
.clock-10 { top: calc(100%/24 * 10); }
.clock-12 { top: calc(100%/24 * 12); }
.clock-14 { top: calc(100%/24 * 14); }
.clock-16 { top: calc(100%/24 * 16); border-width: 2px; }
.clock-18 { top: calc(100%/24 * 18); }
.clock-20 { top: calc(100%/24 * 20); }
.clock-22 { top: calc(100%/24 * 22); }
.clock-24 { top: calc(100%/24 * 24); }
.current-time {
width: calc(100% + 2em);
height: 4px;
background: blue;
left: -1em;
}