html {
height: 100%;
/* TODO
* get the default values from the code.
*/
--editmode: 1.0;
--event-font-size: 8pt;
}
html, body {
height: 100%;
margin: 0;
}
.root {
display: grid;
margin: 0;
max-width: 100%;
height: 100%;
grid-template-columns: auto auto 20em;
grid-template-rows: auto;
grid-template-areas:
"main main nav"
"main main cal"
"main main details"
"main main events"
"footer footer events";
}
@media (max-aspect-ratio: 3/4) {
.root {
grid-template-areas:
"main main"
"nav events"
"cal events"
"details events"
". events"
"footer events";
grid-template-rows: 70% auto;
grid-template-columns: 50% auto;
}
}
.hidelink {
color: inherit;
text-decoration: none;
}
.root main {
min-width: 0; /* for wide */
min-height: 0; /* for tall */
/* apparently required if one wants to have multiple
items within main, without it overflowing
*/
display: flex;
flex-direction: column;
}
/* Page footer
----------------------------------------
*/
.root footer {
margin: 0.5em;
color: ray;
font-size: 8pt;
display: flex;
justify-content: space-between;
flex-direction: row;
}
@media (max-aspect-ratio: 3/4) {
.root footer {
flex-direction: column;
}
}
.root footer span {
margin: 0 1em;
white-space: nowrap;
}
/* Change View
----------------------------------------
"Buttons" for changing between weekly and monthly layout
*/
.change-view {
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
.change-view a {
padding: 0.5em;
border: 1px solid black;
border-radius: 0.5em;
background-color: #ECECEC;
text-decoration: none;
color: black;
}
/* Eventlist
----------------------------------------
The sidebar with all the events
*/
.eventlist {
min-height: 0;
overflow: scroll;
}
.eventlist {
overflow: scroll;
border-top: 3px solid gray;
}
.eventlist article {
border-bottom: 1px solid black;
margin-top: 1em;
border-left-style: solid;
border-left-width: 6px;
padding-left: 2px;
}
.eventlist {
white-space: pre-line;
font-size: 10pt;
}
.eventlist h3 {
font-size: 12pt;
border-bottom: 1px solid gray;
margin-bottom: 0;
font-weight: 300;
}
.eventlist article.tentative {
border-left-style: dashed;
}
/* Text day
----------------------------------------
Each event within the eventlist
*/
.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;
}
/* Small calendar
----------------------------------------
*/
.smallcal {
display: flex;
justify-content: center;
}
.smallcall-head {
text-align: center;
font-weight: bold;
}
.smallcal .nav {
/* height: 100%; */
display: flex;
flex-direction: column;
justify-content: center;
font-size: 150%;
}
.smallcal .small-calendar {
margin-left: 1em;
margin-right: 1em;
}
.small-calendar {
text-align: right;
border-collapse: collapse;
}
.small-calendar thead {
border-bottom: 1px solid black;
}
.small-calendar td:nth-child(1) {
border-right: 1px solid black;
}
.small-calendar .prev,
.small-calendar .next {
color: grey;
}
.small-calendar td {
padding: 5px;
box-sizing: border-box;
}
.small-calendar td a {
/* Makes link fill box */
display: block;
}
/* Sliders
----------------------------------------
*/
.sliders label {
padding-left: 1em;
}
.sliders input[type="range"] {
width: 100%;
margin: 0;
}
.sliders .input-group {
display: flex;
}
.sliders .input-group input {
min-width: 0;
}
/* Calendar List
----------------------------------------
The list of all the loaded calendars,
along with their colors.
*/
/* .calendarlist {} */
.calendarlist li {
font-size: 8pt;
list-style-type: none;
border-left-width: 1em;
border-left-style: solid;
padding-left: 1ex;
/* force to single line */
overflow: hidden;
white-space: nowrap;
}
.small-calendar .today {
border: 1px solid black;
}
/* Caltable
----------------------------------------
*/
.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 {
/* TODO
Find color between gray and lightgray
*/
color: lightgray !important;
}
.date-info .day-number {
font-size: 150%;
padding: 2pt;
}
.date-info .month-name {
color: gray;
}
.date-info .year-number {
color: gray;
}
.table-head {
font-size: 200%;
text-align: center;
}
/* Weekly calendar
----------------------------------------
*/
.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: 5ch 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 {
white-space: nowrap;
font-size: 150%;
}
.event {
width: 100%;
border: 2px solid black;
font-size: var(--event-font-size);
transition: 0.3s;
}
.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;
}
.event .location {
display: block;
font-size: 80%;
font-style: italic;
white-space: pre;
}
.event .repeating {
float: left;
color: red;
font-size: 150%;
}
.eventtext .location {
display: inline-block;
vertical-align: text-top;
}
.eventtext .last-modified,
.eventtext .rrule {
display: flex;
justify-content: right;
text-align: right;
font-size: 80%;
color: grey;
padding-right: 1em;
}
/* */
.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%;
}
/* Popups
----------------------------------------
*/
.event-inner .popup {
/* visibility: hidden; */
position: absolute;
display: block;
/* A scale(0%) is chosen for hiding the element for the following reasons:
- visibility: hidden still reserves space, which causes unwanted scroll-
bars since the final position of the popup is calculated at runtime
- Easier animation
*/
transform: scale(0%);
transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1);
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; */
transform: scale(100%);
}
.event-inner .body {
overflow: hidden;
width: 100%;
height: 100%;
}
/* vim:expandtab:softtabstop=4:shiftwidth=4:
*/