diff options
author | Hugo Hörnquist <hugo@lysator.liu.se> | 2020-08-13 22:26:05 +0200 |
---|---|---|
committer | Hugo Hörnquist <hugo@lysator.liu.se> | 2020-08-13 22:26:05 +0200 |
commit | 1bfa0fdbcb74da43730ed93249e16b77a9f85385 (patch) | |
tree | 28d50017750e4b5d2ea240c8813967389687de48 | |
parent | Merge branch 'calchooser' into master (diff) | |
download | calp-1bfa0fdbcb74da43730ed93249e16b77a9f85385.tar.gz calp-1bfa0fdbcb74da43730ed93249e16b77a9f85385.tar.xz |
Change static.css to scss.
-rw-r--r-- | Makefile | 9 | ||||
-rw-r--r-- | static/.gitignore | 5 | ||||
-rw-r--r-- | static/Makefile | 11 | ||||
-rw-r--r-- | static/style.css | 980 | ||||
-rw-r--r-- | static/style.scss | 977 |
5 files changed, 998 insertions, 984 deletions
@@ -1,4 +1,5 @@ -.PHONY: all clean test +.PHONY: all clean test \ + static GUILE_SITE_DIR=$(shell guile -c "(display (%site-dir))") GUILE_CCACHE_DIR=$(shell guile -c "(display (%site-ccache-dir))") @@ -12,13 +13,17 @@ GUILE_C_FLAGS = -Lmodule \ -Wmacro-use-before-definition -Warity-mismatch \ -Wduplicate-case-datum -Wbad-case-datum -all: $(GO_FILES) README +all: $(GO_FILES) README static + +static: + $(MAKE) -C static obj/%.scm.go: %.scm @mkdir -p obj guild compile $(GUILE_C_FLAGS) -o $@ $< clean: + $(MAKE) -C static clean -rm -r obj install: diff --git a/static/.gitignore b/static/.gitignore index b99de213..c90a6b1b 100644 --- a/static/.gitignore +++ b/static/.gitignore @@ -1,2 +1,3 @@ -tipped-4.7.0 -jquery-3.* +style.css +.*-cache +*.map diff --git a/static/Makefile b/static/Makefile new file mode 100644 index 00000000..f848b784 --- /dev/null +++ b/static/Makefile @@ -0,0 +1,11 @@ +.PHONY: all clean + +TARGETS := style.css + +all: $(TARGETS) + +clean: + rm $(TARGETS) + +%.css: %.scss + scss $< $@ diff --git a/static/style.css b/static/style.css deleted file mode 100644 index 79fd06ab..00000000 --- a/static/style.css +++ /dev/null @@ -1,980 +0,0 @@ -html { - height: 100%; -} - -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 -*/ - -.calnav { - display: flex; - flex-direction: column; - padding-left: 2em; - padding-right: 2em; -} - -.change-view { - display: flex; - flex-direction: row; - justify-content: space-between; - - padding-top: 1ex; - padding-bottom: 1ex; -} - -#jump-to > form { - display: flex; -} - -#jump-to input { - flex-grow: 2; - margin-right: 1em; -} - -#jump-to button, #jump-to a { - /* Same as height, figure out way to force this */ - width: 2.5em; -} - -/* button --------------------------------------------------- -*/ - -.btn { - padding: 0; - - /* if a */ - text-decoration: none; - - /* if button */ - border: none; - background-color: inherit; -} - -.btn > div { - padding: 0.5em; - background-color: #3399ff; - color: white; - - box-sizing: border-box; - width: 100%; - height: 100%; - - display: flex; - justify-content: center; - align-items: center; - - /* shouldn't be needed, but otherwise wont align with a text input - inside a shared flex-container. - It however seems to make <a> and <button> tag refuse to be the same height? - */ - height: 2.5em; - - box-shadow: var(--btn-height) var(--btn-height) gray; -} - -.btn:active > div { - transform: translate(var(--btn-height), var(--btn-height)); - box-shadow: none; -} - -/* Eventlist ----------------------------------------- -The sidebar with all the events -*/ - -.eventlist { - min-height: 0; - overflow: auto; - border-top: 3px solid var(--gray); - /* mostly for long links */ - word-break: break-word; -} - -.eventlist article { - border-bottom: 1px solid black; - margin-top: 1em; - border-left-style: solid; - border-left-width: 6px; - padding-left: 2px; -} - -/* 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 { - display: flex; - flex-direction: column; - justify-content: center; - font-size: 150%; -} - -.small-calendar { - display: grid; - grid-template-rows: auto; - grid-template-columns: auto; - - grid-auto-flow: dense; -} - -.small-calendar > * { - text-align: center; -} - -.small-calendar > *:not(.column-head) { - display: flex; - align-items: center; /* vertically center */ - text-align: right; -} - -.small-calendar > * > time { - width: 100%; - text-align: right; - /* padding place in <time> instead on parent block element - to allow a border radius without making the link area - smaller - */ - padding: 5px; -} - -.small-calendar a { - color: initial; - text-decoration: none; -} - -.small-calendar .row-head { - grid-column: 1; - border-right: 1px solid black; - - /* Sort of hack to get week numbers looking ok */ - justify-content: right; - padding-right: 5px; -} - -.small-calendar .column-head { - grid-row: 1; - border-bottom: 1px solid black; -} - -.small-calendar .next, -.small-calendar .prev { - color: var(--gray); -} - -/* 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 li { - font-size: 8pt; - list-style-type: none; - border-left-width: 1em; - border-left-style: solid; - border-color: var(--color); - 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); - /* grid template rows is generated - inline in the HTML */ - - 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 var(--gray); -} - -.caltable .cal-cell-time { - border-bottom: none; -} - -.caltable .cal-cell-short { - border-top: none -} - -.caltable .longevents .event { - margin: 0; - /* TODO use other border rules */ - border: 1px solid black; -} - -.caltable .longevents { - border-bottom: none; - border-top: none; - position: relative; -} - -.caltable .longevents .event { - position: absolute; - box-sizing: border-box; - padding: 0; -} - -.caltable .cal-cell { - overflow-y: auto; -} - - -.cal-cell .event { - font-size: 8pt; - border-radius: 5px; - padding: 2px; - margin: 2px; - font-family: arial; -} - - -.date-info .day-number { - padding: 2pt; -} - -.date-info.current .day-number { - color: black; -} - -.date-info { - color: var(--gray); -} - -.table-head { - font-size: 200%; - text-align: center; -} - - -/* Weekly calendar ----------------------------------------- -*/ - -.calendar { - width: 100%; - height: 100%; - display: flex; - flex-grow: 2; -} - -.sideclock { - padding: 0; - grid-row: 3; - position: relative; -} -.sideclock .day { - border: 1px transparent; - min-width: 0; -} - -.days .meta { - border-bottom: 2px solid var(--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; - - /* allow for popup placement */ - position: relative; -} - -.events { - position: relative; - border: 1px solid var(--gray); -} - -/* - * This makes the borders of the object be part of the size. - * Making placing it on the correct line much simpler. - */ -.clock, .days .event, .eventlike { - position: absolute; - box-sizing: border-box; - margin: 0; - display: block; -} - -.clock { - color: var(--gray); - border-top: 1px dotted var(--gray); - width: 100%; - pointer-events: none; -} - -.sideclock .clock { - border-top: 1px dotted var(--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: var(--gray); -} - -.meta .daydate { - white-space: nowrap; - font-size: 150%; -} - -.event { - transition: 0.3s; - font-size: var(--event-font-size); - overflow: visible; - background-color: var(--color); - color: var(--complement); -} - -.popup input { - white-space: initial; - border: 1px solid gray; - max-width: 100%; -} - -.event-body { - padding: 0; - margin: 0; - width: 100%; - height: 100%; - overflow: hidden; -} - -.days .event { - border: 1px solid black; -} - -.events .event { - width: 100%; -} - -.zero-width-events .event { - width: initial; - padding: 0.5em; - margin: 0.2em; - border-radius: 1ex; - position: relative; - float: left; -} - -.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; -} - -.repeating { - color: red; -} - -.event .repeating { - float: left; - font-size: 150%; -} - -.eventtext { - white-space: pre-line; - font-size: 10pt; -} - -.eventtext h3 { - font-size: 12pt; - border-bottom: 1px solid var(--gray); - margin-bottom: 0; - font-weight: 300; - margin-top: 0; -} - -.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: var(--gray); - padding-right: 1em; -} - -.eventlist .eventtext { - border-color: var(--color); -} - -.eventlist .eventtext.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; -} - - -/* - * All other CAL_ classes are generated by the backend. - * NOTE Possibly move this there. - */ -.CAL_Generated { - background-color: #55FF55; -} - -.event.generated { - opacity: 40%; - transition: none; -} - -.longevents .event.generated { - bottom: 0; - height: calc(100% * var(--editmode)); -} -.events .event.generated { - width: calc(100% * var(--editmode)); -} - -.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); } - - -/* Search page ----------------------------------------- - */ - -.paginator > * { - padding-left: 1em; - display: inline-block; -} - -.summary-line { - display: inline-flex; -} - -.summary-line > * { - display: inline-block; -} - -.summary-line time { - font-family: monospace; - min-width: 18ch; -} - -/* Popups ----------------------------------------- -*/ - -.popup-container { - display: none; - position: absolute; - z-index: 10; - - left: 10px; - top: -50px; -} - -.popup-container.visible { - display: block; -} - -.popup { - display: flex; - background-color: #dedede; - color: black; - font-size: 80%; - - /* overflow-y: auto; */ - max-width: 60ch; - max-height: 60ch; - min-width: 40ch; - min-height: 20ch; -} - -.popup article { - /* makes the text in the popup scroll, but not the sidebar */ - overflow-y: auto; - padding: 1em; - word-break: break-word; -} - -.popup .location { - font-style: initial; -} - -.popup .popup-control { - display: flex; - flex-direction: column; - - /* not needed, but the icons aren't text - and should therefor not be copied */ - user-select: none; - - cursor: grab; - background-color: var(--color); - /* Transition for background color - * Matches that of '.event'. - * TODO break out to common place */ - transition: 0.3s; -} - -.popup-control .btn { - max-width: 2em; - max-height: 2em; - margin: 1em; - - display: flex; - align-items: center; - justify-content: center; - - font-size: 150%; -} - -#bar { - width: calc(100% + 2em); - height: 4px; - background: blue; - border-color: blue; - left: -1em; -} - -/* Tabs ----------------------------------------- -*/ - -.tabgroup { - position: relative; - width: 100%; - resize: both; -} - -.tab label { - position: absolute; - - left: 100%; - top: 0; - display: block; - - max-height: 5ex; - min-height: 5ex; - min-width: 5ex; - max-width: 5ex; - - border: 1px solid #ccc; - border-radius: 0 5px 5px 0; - background-color: #aeaeae; - - display: flex; - justify-content: center; - align-items: center; -} - -.tab [type=radio] { display: none; } - -.tab .content { - position: absolute; - top: 0; - left: 0; - background-color: #dedede; - right: 0; - bottom: 0; - overflow: auto; - - min-width: 100%; - min-height: 100%; -} - -.tab [type=radio]:checked ~ label { - z-index: 1; - /* to align all tab */ - border-left: 3px solid transparent; - background-color: #dedede; -} - -.tab [type=radio]:checked ~ label ~ .content { - z-index: 1; -} - -/* Other ----------------------------------------- -*/ - -.template { - display: none; -} - - -.summary-line .square { - margin-right: 1em; -} - -.square { - width: 1em; - height: 1em; - background-color: var(--color); -} - -/* Icalendar ----------------------------------------- -*/ - -/* Below is for styling embedded xcalendar components in the xhtml - document. I can't find anything about if this is allowed - according to any standard, but it seems to work. - Firefox doesn't want to admit it, and shows nothing in the - inspector, but the document renders fine. - Vivaldi works fine in the inspector. - */ - -icalendar { - display: inline-block; - padding-left: 1ch; - font-family: monospace; - font-size: xx-small; - padding-left: 1ch; -} - -icalendar properties > * { - display: block; -} - -icalendar properties * { - padding-right: 1ch; -} - -icalendar parameters { - color: gray; -} - -/* All icalendar properties */ -icalendar calscale::before { content: "calscale: "; } -icalendar method::before { content: "method: "; } -icalendar prodid::before { content: "prodid: "; } -icalendar version::before { content: "version: "; } -icalendar attach::before { content: "attach: "; } -icalendar categories::before { content: "categories: "; } -icalendar class::before { content: "class: "; } -icalendar comment::before { content: "comment: "; } -icalendar description::before { content: "description: "; } -icalendar geo::before { content: "geo: "; } -icalendar location::before { content: "location: "; } -icalendar percent-complete::before { content: "percent-complete: "; } -icalendar priority::before { content: "priority: "; } -icalendar resources::before { content: "resources: "; } -icalendar status::before { content: "status: "; } -icalendar summary::before { content: "summary: "; } -icalendar completed::before { content: "completed: "; } -icalendar dtend::before { content: "dtend: "; } -icalendar due::before { content: "due: "; } -icalendar dtstart::before { content: "dtstart: "; } -icalendar duration::before { content: "duration: "; } -icalendar freebusy::before { content: "freebusy: "; } -icalendar transp::before { content: "transp: "; } -icalendar tzid::before { content: "tzid: "; } -icalendar tzname::before { content: "tzname: "; } -icalendar tzoffsetfrom::before { content: "tzoffsetfrom: "; } -icalendar tzoffsetto::before { content: "tzoffsetto: "; } -icalendar tzurl::before { content: "tzurl: "; } -icalendar attendee::before { content: "attendee: "; } -icalendar contact::before { content: "contact: "; } -icalendar organizer::before { content: "organizer: "; } -icalendar recurrence-id::before { content: "recurrence-id: "; } -icalendar related-to::before { content: "related-to: "; } -icalendar url::before { content: "url: "; } -icalendar uid::before { content: "uid: "; } -icalendar exdate::before { content: "exdate: "; } -icalendar rdate::before { content: "rdate: "; } -icalendar rrule::before { content: "rrule: "; } -icalendar action::before { content: "action: "; } -icalendar repeat::before { content: "repeat: "; } -icalendar trigger::before { content: "trigger: "; } -icalendar created::before { content: "created: "; } -icalendar dtstamp::before { content: "dtstamp: "; } -icalendar last-modified::before { content: "last-modified: "; } -icalendar sequence::before { content: "sequence: "; } -icalendar request-status::before { content: "request-status: "; } - -/* icalendar parameters */ -icalendar parameters altrep::before { content: "altrep:"; } -icalendar parameters cn::before { content: "cn:"; } -icalendar parameters cutype::before { content: "cutype:"; } -icalendar parameters delegated-from::before { content: "delegated-from:"; } -icalendar parameters delegated-to::before { content: "delegated-to:"; } -icalendar parameters dir::before { content: "dir:"; } -icalendar parameters encoding::before { content: "encoding:"; } -icalendar parameters fmttype::before { content: "fmttype:"; } -icalendar parameters fbtype::before { content: "fbtype:"; } -icalendar parameters language::before { content: "language:"; } -icalendar parameters member::before { content: "member:"; } -icalendar parameters partstat::before { content: "partstat:"; } -icalendar parameters range::before { content: "range:"; } -icalendar parameters related::before { content: "related:"; } -icalendar parameters reltype::before { content: "reltype:"; } -icalendar parameters role::before { content: "role:"; } -icalendar parameters rsvp::before { content: "rsvp:"; } -icalendar parameters sent-by::before { content: "sent-by:"; } -icalendar parameters tzid::before { content: "tzid:"; } - -/* special fields inside some properties */ -icalendar period start { content: "start:"; } -icalendar period end { content: "end:"; } -icalendar period duration { content: "duration:" } -icalendar recur freq { content: "freq:"; } -icalendar recur until { content: "until:"; } -icalendar recur count { content: "count:"; } -icalendar recur bymonth { content: "bymonth"; } -icalendar recur byweekno { content: "byweekno"; } -icalendar recur byyearday { content: "byyearday"; } -icalendar recur bymonthday { content: "bymonthday"; } -icalendar recur byday { content: "byday"; } -icalendar recur byhour { content: "byhour"; } -icalendar recur byminute { content: "byminute"; } -icalendar recur bysecond { content: "bysecond"; } -icalendar recur bysetpos { content: "bysetpos"; } - -/* types */ -icalendar date-time, icalendar date, icalendar until {color: purple;} -icalendar text { color: green; } -icalendar integer { color: blue; } -icalendar unknown { color: red; } - -/* vim:expandtab:softtabstop=4:shiftwidth=4: - */ diff --git a/static/style.scss b/static/style.scss new file mode 100644 index 00000000..fafea660 --- /dev/null +++ b/static/style.scss @@ -0,0 +1,977 @@ +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"; + + 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; + } + + + footer { + margin: 0.5em; + color: ray; + font-size: 8pt; + + display: flex; + justify-content: space-between; + + flex-direction: row; + + span { + margin: 0 1em; + white-space: nowrap; + } + } +} + +@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; + + footer { + flex-direction: column; + } + } +} + +.hidelink { + color: inherit; + text-decoration: none; +} + + +/* Change View +---------------------------------------- +"Buttons" for changing between weekly and monthly layout +*/ + +.calnav { + display: flex; + flex-direction: column; + padding-left: 2em; + padding-right: 2em; +} + +.change-view { + display: flex; + flex-direction: row; + justify-content: space-between; + + padding-top: 1ex; + padding-bottom: 1ex; +} + +#jump-to { + > form { + display: flex; + } + + input { + flex-grow: 2; + margin-right: 1em; + } + + button, a { + /* Same as height, figure out way to force this */ + width: 2.5em; + } +} + +/* button +-------------------------------------------------- +*/ + +.btn { + padding: 0; + + /* if a */ + text-decoration: none; + + /* if button */ + border: none; + background-color: inherit; + + > div { + padding: 0.5em; + background-color: #3399ff; + color: white; + + box-sizing: border-box; + width: 100%; + height: 100%; + + display: flex; + justify-content: center; + align-items: center; + + /* shouldn't be needed, but otherwise wont align with a text input + inside a shared flex-container. + It however seems to make <a> and <button> tag refuse to be the same height? + */ + height: 2.5em; + + box-shadow: var(--btn-height) var(--btn-height) gray; + } + + &:active > div { + transform: translate(var(--btn-height), var(--btn-height)); + box-shadow: none; + } +} + +/* Eventlist +---------------------------------------- +The sidebar with all the events +*/ + +.eventlist { + min-height: 0; + overflow: auto; + border-top: 3px solid var(--gray); + /* mostly for long links */ + word-break: break-word; + + article { + border-bottom: 1px solid black; + margin-top: 1em; + border-left-style: solid; + border-left-width: 6px; + padding-left: 2px; + } + + .eventtext { + border-color: var(--color); + + &.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; + + header h2 { + width: 100%; + text-align: center; + font-size: 14pt; + } +} + +/* Small calendar +---------------------------------------- +*/ + +.smallcal { + display: flex; + justify-content: center; + + .nav { + display: flex; + flex-direction: column; + justify-content: center; + font-size: 150%; + } +} + +.smallcall-head { + text-align: center; + font-weight: bold; +} + + +.small-calendar { + display: grid; + grid-template-rows: auto; + grid-template-columns: auto; + + grid-auto-flow: dense; + + > * { + text-align: center; + > time { + width: 100%; + text-align: right; + /* padding place in <time> instead on parent block element + to allow a border radius without making the link area + smaller + */ + padding: 5px; + } + } + > *:not(.column-head) { + display: flex; + align-items: center; /* vertically center */ + text-align: right; + } + a { + color: initial; + text-decoration: none; + } + + .row-head { + grid-column: 1; + border-right: 1px solid black; + + /* Sort of hack to get week numbers looking ok */ + justify-content: right; + padding-right: 5px; + } + + .column-head { + grid-row: 1; + border-bottom: 1px solid black; + } + + .next, .prev { + color: var(--gray); + } + + .today { + border: 1px solid black; + } +} + +/* Sliders +---------------------------------------- + */ + +.sliders { + label { + padding-left: 1em; + } + + input[type="range"] { + width: 100%; + margin: 0; + } + + .input-group { + display: flex; + + input { + min-width: 0; + } + } +} + +/* Calendar List +---------------------------------------- +The list of all the loaded calendars, +along with their colors. +*/ + +.calendarlist li { + font-size: 8pt; + list-style-type: none; + border-left-width: 1em; + border-left-style: solid; + border-color: var(--color); + padding-left: 1ex; + + /* force to single line */ + overflow: hidden; + white-space: nowrap; +} + +/* Caltable +---------------------------------------- +*/ + +.table-head { + font-size: 200%; + text-align: center; +} + +.caltable { + flex-grow: 10; + + display: grid; + grid-template-columns: repeat(7, 1fr); + /* grid template rows is generated + inline in the HTML */ + + max-height: 100%; + /* Apparently needed to ensure that parent + can contain all its children */ + min-height: 0; + + .thead { + font-weight: bold; + display: flex; + align-items: center; + justify-content: center; + } + + .thead, .cal-cell { + border: 1px solid var(--gray); + } + + .cal-cell { + overflow-y: auto; + + .event { + font-size: 8pt; + border-radius: 5px; + padding: 2px; + margin: 2px; + font-family: arial; + } + } + + .cal-cell-time { + border-bottom: none; + } + + .cal-cell-short { + border-top: none + } + + + .longevents { + border-bottom: none; + border-top: none; + position: relative; + + .event { + margin: 0; + /* TODO use other border rules */ + border: 1px solid black; + + position: absolute; + box-sizing: border-box; + padding: 0; + } + } +} + + +.date-info { + color: var(--gray); + .day-number { + padding: 2pt; + } + + &.current .day-number { + color: black; + } +} + + +/* Weekly calendar +---------------------------------------- +*/ + +.calendar { + width: 100%; + height: 100%; + display: flex; + flex-grow: 2; +} + +.clock { + color: var(--gray); + border-top: 1px dotted var(--gray); + width: 100%; + pointer-events: none; +} + +.sideclock { + padding: 0; + grid-row: 3; + position: relative; + .day { + border: 1px transparent; + min-width: 0; + } + .clock { + border-top: 1px dotted var(--gray); + grid-row: 3; + } +} + +.days { + display: grid; + grid-template-rows: 4em 4em auto; + grid-template-columns: 5ch auto; + width: 100%; + height: 100%; + padding: 0; + overflow-x: scroll; + + /* allow for popup placement */ + position: relative; + + .meta { + border-bottom: 2px solid var(--gray); + grid-row: 1; + } + + .events { + grid-row: 3; + } + + .event { + border: 1px solid black; + } + + .longevents { + grid-row: 2; + grid-column-start: 2; + position: relative; + } +} + +.events { + position: relative; + border: 1px solid var(--gray); + + .event { + width: 100%; + + &.generated { + width: calc(100% * var(--editmode)); + } + + &.continuing { + border-bottom: none; + background-image: linear-gradient(to top, #0007 0%,#FFF0 2em); + } + + &.continued { + border-top: none; + background-image: linear-gradient(to bottom, #FFF7 0%,#FFF0 3em); + } + + &.continued.continuing { + border-top: none; + border-bottom: none; + background-image: + linear-gradient(to bottom, + #FFF7 0%, #FFF0 10%, + #FFF0 90%, #0007 100%); + } + + } + +} + +/* + * This makes the borders of the object be part of the size. + * Making placing it on the correct line much simpler. + */ +.clock, .days .event, .eventlike { + position: absolute; + box-sizing: border-box; + margin: 0; + display: block; +} + +.clocktext { + z-index: 1; + text-align: right; +} + +.meta { + display: flex; + justify-content: center; + align-items: center; + position: relative; + + padding-left: 1em; + padding-right: 1em; + .dayname { + position: absolute; + left: 5px; + top: 2px; + color: var(--gray); + } + + .daydate { + white-space: nowrap; + font-size: 150%; + } +} + +.event { + transition: 0.3s; + font-size: var(--event-font-size); + overflow: visible; + background-color: var(--color); + color: var(--complement); + + &.tentative { + border: 3px dashed black; + } + + &.generated { + opacity: 40%; + transition: none; + } + + &.repeating { + float: left; + font-size: 150%; + } + + .location { + display: block; + font-size: 80%; + font-style: italic; + white-space: pre; + } +} + +.event-body { + padding: 0; + margin: 0; + width: 100%; + height: 100%; + overflow: hidden; +} + +.zero-width-events .event { + width: initial; + padding: 0.5em; + margin: 0.2em; + border-radius: 1ex; + position: relative; + float: left; +} + + +.repeating { + color: red; +} + +.eventtext { + white-space: pre-line; + font-size: 10pt; + + h3 { + font-size: 12pt; + border-bottom: 1px solid var(--gray); + margin-bottom: 0; + font-weight: 300; + margin-top: 0; + } + + .location { + display: inline-block; + vertical-align: text-top; + } + + .last-modified, .rrule { + display: flex; + justify-content: right; + text-align: right; + font-size: 80%; + color: var(--gray); + padding-right: 1em; + } +} + +/* */ + +.longevents { + .event { + border-radius: 1em; + padding-left: 1em; + &.continuing { + border-right: none; + border-radius: 1em 0 0 1em; + } + + &.continued { + border-left: none; + border-radius: 0 1em 1em 0; + } + + &.continued.continuing { + border-radius: 0; + } + + } +} + +/* + * All other CAL_ classes are generated by the backend. + * NOTE Possibly move this there. + */ +.CAL_Generated { + background-color: #55FF55; +} + +.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); } + + +/* Search page +---------------------------------------- + */ + +.paginator > * { + padding-left: 1em; + display: inline-block; +} + +.summary-line { + display: inline-flex; + + > * { + display: inline-block; + } + + time { + font-family: monospace; + min-width: 18ch; + } +} + +/* Popups +---------------------------------------- +*/ + +.popup-container { + display: none; + position: absolute; + z-index: 10; + + left: 10px; + top: -50px; + + &.visible { + display: block; + } +} + +.popup { + display: flex; + background-color: #dedede; + color: black; + font-size: 80%; + + /* overflow-y: auto; */ + max-width: 60ch; + max-height: 60ch; + min-width: 40ch; + min-height: 20ch; + + input { + white-space: initial; + border: 1px solid gray; + max-width: 100%; + } + + article { + /* makes the text in the popup scroll, but not the sidebar */ + overflow-y: auto; + padding: 1em; + word-break: break-word; + } + + .location { + font-style: initial; + } + + .popup-control { + display: flex; + flex-direction: column; + + /* not needed, but the icons aren't text + and should therefor not be copied */ + user-select: none; + + cursor: grab; + background-color: var(--color); + /* Transition for background color + * Matches that of '.event'. + * TODO break out to common place */ + transition: 0.3s; + + .btn { + max-width: 2em; + max-height: 2em; + margin: 1em; + + display: flex; + align-items: center; + justify-content: center; + + font-size: 150%; + } + + } +} + + +#bar { + width: calc(100% + 2em); + height: 4px; + background: blue; + border-color: blue; + left: -1em; +} + +/* Tabs +---------------------------------------- +*/ + +.tabgroup { + position: relative; + width: 100%; + resize: both; +} + +.tab { + label { + position: absolute; + + left: 100%; + top: 0; + display: block; + + max-height: 5ex; + min-height: 5ex; + min-width: 5ex; + max-width: 5ex; + + border: 1px solid #ccc; + border-radius: 0 5px 5px 0; + background-color: #aeaeae; + + display: flex; + justify-content: center; + align-items: center; + } + + [type=radio] { + display: none; + &:checked ~ label { + z-index: 1; + /* to align all tab */ + border-left: 3px solid transparent; + background-color: #dedede; + + ~ .content { + z-index: 1; + } + } + } + + .content { + position: absolute; + top: 0; + left: 0; + background-color: #dedede; + right: 0; + bottom: 0; + overflow: auto; + + min-width: 100%; + min-height: 100%; + } +} + +/* Other +---------------------------------------- +*/ + +.template { + display: none; +} + + +.summary-line .square { + margin-right: 1em; +} + +.square { + width: 1em; + height: 1em; + background-color: var(--color); +} + +/* Icalendar +---------------------------------------- +*/ + +/* Below is for styling embedded xcalendar components in the xhtml + document. I can't find anything about if this is allowed + according to any standard, but it seems to work. + Firefox doesn't want to admit it, and shows nothing in the + inspector, but the document renders fine. + Vivaldi works fine in the inspector. + */ + +icalendar { + display: inline-block; + padding-left: 1ch; + font-family: monospace; + font-size: xx-small; + padding-left: 1ch; + + properties > * { + display: block; + } + + properties * { + padding-right: 1ch; + } + + + /* All icalendar properties */ + calscale::before { content: "calscale: "; } + method::before { content: "method: "; } + prodid::before { content: "prodid: "; } + version::before { content: "version: "; } + attach::before { content: "attach: "; } + categories::before { content: "categories: "; } + class::before { content: "class: "; } + comment::before { content: "comment: "; } + description::before { content: "description: "; } + geo::before { content: "geo: "; } + location::before { content: "location: "; } + percent-complete::before { content: "percent-complete: "; } + priority::before { content: "priority: "; } + resources::before { content: "resources: "; } + status::before { content: "status: "; } + summary::before { content: "summary: "; } + completed::before { content: "completed: "; } + dtend::before { content: "dtend: "; } + due::before { content: "due: "; } + dtstart::before { content: "dtstart: "; } + duration::before { content: "duration: "; } + freebusy::before { content: "freebusy: "; } + transp::before { content: "transp: "; } + tzid::before { content: "tzid: "; } + tzname::before { content: "tzname: "; } + tzoffsetfrom::before { content: "tzoffsetfrom: "; } + tzoffsetto::before { content: "tzoffsetto: "; } + tzurl::before { content: "tzurl: "; } + attendee::before { content: "attendee: "; } + contact::before { content: "contact: "; } + organizer::before { content: "organizer: "; } + recurrence-id::before { content: "recurrence-id: "; } + related-to::before { content: "related-to: "; } + url::before { content: "url: "; } + uid::before { content: "uid: "; } + exdate::before { content: "exdate: "; } + rdate::before { content: "rdate: "; } + rrule::before { content: "rrule: "; } + action::before { content: "action: "; } + repeat::before { content: "repeat: "; } + trigger::before { content: "trigger: "; } + created::before { content: "created: "; } + dtstamp::before { content: "dtstamp: "; } + last-modified::before { content: "last-modified: "; } + sequence::before { content: "sequence: "; } + request-status::before { content: "request-status: "; } + + parameters { + color: gray; + + /* icalendar parameters */ + altrep::before { content: "altrep:"; } + cn::before { content: "cn:"; } + cutype::before { content: "cutype:"; } + delegated-from::before { content: "delegated-from:"; } + delegated-to::before { content: "delegated-to:"; } + dir::before { content: "dir:"; } + encoding::before { content: "encoding:"; } + fmttype::before { content: "fmttype:"; } + fbtype::before { content: "fbtype:"; } + language::before { content: "language:"; } + member::before { content: "member:"; } + partstat::before { content: "partstat:"; } + range::before { content: "range:"; } + related::before { content: "related:"; } + reltype::before { content: "reltype:"; } + role::before { content: "role:"; } + rsvp::before { content: "rsvp:"; } + sent-by::before { content: "sent-by:"; } + tzid::before { content: "tzid:"; } + } + + /* special fields inside some properties */ + period { + start { content: "start:"; } + end { content: "end:"; } + duration { content: "duration:" } + } + + recur { + freq { content: "freq:"; } + until { content: "until:"; } + count { content: "count:"; } + bymonth { content: "bymonth"; } + byweekno { content: "byweekno"; } + byyearday { content: "byyearday"; } + bymonthday { content: "bymonthday"; } + byday { content: "byday"; } + byhour { content: "byhour"; } + byminute { content: "byminute"; } + bysecond { content: "bysecond"; } + bysetpos { content: "bysetpos"; } + } + + /* types */ + date-time, date, until {color: purple;} + text { color: green; } + integer { color: blue; } + unknown { color: red; } +} + +/* vim:expandtab:softtabstop=4:shiftwidth=4: + */ |