html {
height: 100%;
}
html, 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;
}
.calendarlist li {
list-style-type: none;
border-left-width: 1em;
border-left-style: solid;
padding-left: 1ex;
}
.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 {
display: flex;
flex-direction: column;
flex-grow: 1;
min-width: 0;
}
/* ---------------------------------------- */
.caltable {
flex-grow: 10;
display: grid;
grid-template-columns: repeat(7, 1fr);
/* This is for the first name, the week days.
NOTE that I'm not sure this is actually the
correct way to do it. */
grid-template-rows: 2em;
grid-auto-rows: 1fr;
max-height: 100%;
/* Apparently needed to ensure that parent can contain all its children */
min-height: 0;
}
.caltable .thead {
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
}
.caltable .thead,
.caltable .cal-cell {
border: 1px solid gray;
}
.caltable .cal-cell {
overflow-y: auto;
}
.inline-event {
font-size: 8pt;
border-radius: 5px;
padding: 2px;
margin: 2px;
font-family: arial;
}
.date-info.non-current {
color: lightgray !important;
}
.date-info .day-number {
font-size: 150%;
padding: 2pt;
}
.date-info .month-name {
color: gray;
}
.date-info .year-number {
color: gray;
}
/* ---------------------------------------- */
.calendar {
width: 100%;
height: 100%;
display: flex;
flex-grow: 2;
}
.sideclock {
/* border-right: 2px solid gray; */
/* height: 100%; */
padding: 0;
grid-row: 3;
position: relative;
}
.sideclock .day {
border: 1px transparent;
min-width: 0;
}
.days .meta {
border-bottom: 2px solid gray;
grid-row: 1;
}
.days .events {
grid-row: 3;
}
.days .longevents {
grid-row: 2;
grid-column-start: 2;
position: relative;
}
.days {
display: grid;
grid-template-rows: 4em 4em auto;
grid-template-columns: 5em auto;
width: 100%;
height: 100%;
padding: 0;
overflow-x: scroll;
}
.events {
position: relative;
border: 1px solid gray;
}
/*
* 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;
width: 100%;
}
.sideclock .clock {
border-top: 1px dotted gray;
grid-row: 3;
}
.clocktext {
z-index: 1;
text-align: right;
}
.meta {
display: flex;
justify-content: center;
align-items: center;
position: relative;
padding-left: 1em;
padding-right: 1em;
}
.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;
}
.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%);
}
.event.tentative {
border: 3px dashed black;
}
.eventlist article.tentative {
border-left-style: dashed;
}
/* */
.longevents .event {
border-radius: 1em;
padding-left: 1em;
}
.longevents .event.continuing {
border-right: none;
border-radius: 1em 0 0 1em;
}
.longevents .event.continued {
border-left: none;
border-radius: 0 1em 1em 0;
}
.longevents .event.continued.continuing {
border-radius: 0;
}
.event.generated {
background-color: #55FF5550;
}
.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;
border-color: blue;
left: -1em;
}
.event-inner {
position: relative;
width: 100%;
height: 100%;
}
.event-inner .popup {
visibility: hidden;
position: absolute;
left: 10%;
bottom: 125%;
z-index: 100;
background-color: #dedede;
color: black;
border: 2px solid black;
font-size: 8pt;
font-family: monospace;
white-space: pre;
overflow-y: scroll;
max-width: 100ch;
max-height: 60ch;
}
.event-inner .popup td {
white-space: pre-line;
}
/* Arrow pointing at origin of popup
Currently broken due to an overflow: scroll
*/
/* .event-inner .popup:after { */
/* content: ""; */
/* position: absolute; */
/* top: 100%; */
/* /\* left: 5%; *\/ */
/* border-style: solid; */
/* border-width: 1.5em; */
/* /\* margin-left: -2em; *\/ */
/* border-color: transparent; */
/* border-top-color: #555; */
/* } */
.popup th {
text-align: right;
vertical-align: top;
}
.popup th::after {
content: ": ";
}
.popup.show {
visibility: visible;
}
.event-inner .body {
overflow: hidden;
width: 100%;
height: 100%;
}
/* vim:expandtab:softtabstop=4:shiftwidth=4:
*/