From 7949fcdc683d07689bad5da5d20bfa3eeb5a6a46 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= Date: Tue, 5 Sep 2023 01:25:00 +0200 Subject: Move frontend code to subdirectories, to simplify command line flags. --- static/style.scss | 1161 ----------------------------------------------------- 1 file changed, 1161 deletions(-) delete mode 100644 static/style.scss (limited to 'static/style.scss') diff --git a/static/style.scss b/static/style.scss deleted file mode 100644 index d5920f79..00000000 --- a/static/style.scss +++ /dev/null @@ -1,1161 +0,0 @@ -@import 'global'; - -html, body { - height: 100%; - margin: 0; -} - -body { - background-color: var(--background-color); - /* TODO --foreground-color or similar */ -} - -.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 the graphical portion - of both the wide and the table - view */ - > main { - /* these allow the main area to shrink, so that all areas will fit the - screen. It will however not shrink the elements, leading to our - (desired) scrollbar */ - 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; - - .event:target { - box-shadow: - 1em 1em 0.5em gold, - -1em -1em 0.5em gold, - 1em -1em 0.5em gold, - -1em 1em 0.5em gold; - z-index: 1; - } - - /* For new event button */ - position: relative; - - /* add new event button */ - > button { - position: absolute; - right: 2mm; - bottom: 5mm; - - height: 1cm; - width: 1cm; - } - } - - - 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; -} - -.hidden { - display: 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; -} - -date-jump { - > 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 { - /* if a */ - text-decoration: none; - - /* if button */ - border: none; - background-color: inherit; - - /* --- */ - - box-sizing: border-box; - padding: 0.5em; - - background-color: $blue; - color: white; - - display: flex; - justify-content: center; - align-items: center; - - /* move button slightly, to give illusion of 3D */ - box-shadow: $btn-height $btn-height gray; - &:active { - transform: translate($btn-height, $btn-height); - box-shadow: none; - } -} - -.simplesearch { - display: flex; - - input[type=text] { - flex-grow: 1; - } -} - -li > button { - width: 100%; -} - -/* Eventlist ----------------------------------------- -The sidebar with all the events -*/ - -.eventlist { - min-height: 0; - overflow: auto; - border-top: 3px solid $gray; - /* mostly for long links */ - word-break: break-word; - - scroll-behavior: smooth; - - .eventtext { - 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 { - position: sticky; - top: 0; - background-color: var(--background-color); - - 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; -} - -/* Sass greatly discourages @import in favour of @use. @use however doesn't work - for me. -*/ -@import 'small-calendar'; - - -/* Sliders ----------------------------------------- - */ - -.sliders { - label { - padding-left: 1em; - } - - input[type="range"] { - width: 100%; - margin: 0; - } - -} - -@import 'slider_input'; - -/* 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 $gray; - } - - .cal-cell { - overflow-y: auto; - - .event, vevent-block { - font-size: 8pt; - border-radius: 5px; - padding: 2px; - margin-top: 2px; - margin-bottom: 2px; - font-family: arial; - - box-sizing: border-box; - } - } - - .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: $gray; - .day-number { - padding: 2pt; - } - - &.current .day-number { - color: black; - } -} - - -/* Weekly calendar ----------------------------------------- -*/ - -.calendar { - width: 100%; - height: 100%; - display: flex; - flex-grow: 2; -} - -.clock { - color: $gray; - border-top: 1px dotted $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 $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 $gray; - grid-row: 1; - } - - .events { - grid-row: 3; - } - - .event { - border: 1px solid black; - } - - .longevents { - grid-row: 2; - grid-column-start: 2; - position: relative; - } - - .week-indicator { - grid-row: 1 / span 2; - } - - .sideclock { - grid-row: 3; - } -} - -.week-indicator { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: 200%; - color: $gray; -} - -.events { - position: relative; - border: 1px solid $gray; - - .event { - width: 100%; - - &.generated { - width: calc(100% * var(--editmode)); - } - - &.zero-length { - border-radius: 0 1cm 1cm 0; - height: calc(100% * 1/24) !important; - } - - &.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, .eventlike, -.days vevent-block { - 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: $gray; - } - - .daydate { - white-space: nowrap; - font-size: 150%; - } -} - -/* graphical block in the calendar */ -vevent-block, .event { - transition: 0.3s; - font-size: var(--event-font-size); - overflow: hidden; - background-color: var(--color); - color: var(--complement); - - // position: absolute; - display: block; - - width: 100%; - min-height: 1em; - border: 1px solid black; - /* backgroudn: blue; */ - - /* Event is not confirmed to happen */ - &.tentative { - border: 3px dashed black; - } - - /* Event duration is not "busy" time */ - &.transparent { - background-image: linear-gradient(45deg, - #EE617DFF 25%, - #00000000 25%, - #00000000 50%, - #EE617DFF 50%, - #EE617DFF 75%, - #00000000 75%, - #00000000 100%); - background-size: 56px 56px; - } - - &.generated { - opacity: 40%; - /* TODO only disable transitions for top/botom, and only - * when dragging (not when updating through other means) */ - 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; - - /* TODO - This gets to large for really short events, placing the marker halfway - outside the event body. - */ - .description { - position: absolute; - right: 1ex; - bottom: 0; - font-size: 200%; - } -} - -/* -.zero-width-events .event { - width: initial; - padding: 0.5em; - margin: 0.2em; - border-radius: 1ex; - position: relative; - float: left; -} -*/ - - -.repeating { - color: red; -} - -.clear-input { - font-family: arial; - font-size: 200%; - color: grey; - - padding: 0; - background: none; - border: none; - - cursor: pointer; -} - -.eventtext { - white-space: pre-line; - font-size: 10pt; - - h3 { - font-size: 12pt; - border-bottom: 1px solid $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: $gray; - padding-right: 1em; - } - - .categories > a::after { - content: "," - } - - .categories > a:last-child::after { - content: "" - } - - .categories > a { - margin-right: 1ch; - } -} - -.attach { - max-width: 100%; - max-height: 3cm; -} - -/* */ - -.longevents { - .event { - border-radius: 1em; - padding-left: 1em; - - height: 90%; - - &.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; - padding-left: 1ch; - padding-right: 1ch; - } - - time { - font-family: monospace; - min-width: 18ch; - } -} - -.error { - border: 3px solid red; - background-color: pink; - - pre { - padding: 1em; - } -} - -/* Popups ----------------------------------------- -*/ - -popup-element { - display: none; - position: absolute; - z-index: 1000; - - &[active] { - z-index: 1001; - } - - /* ??? */ - left: 10px; - top: -50px; - - box-shadow: gray 10px 10px 10px; - - &[visible] { - display: block; - } - - > * { - resize: both; - /* This overflow: auto gives us the correct resize handle */ - overflow: auto; - - /* TODO this doesn't work, since tabcount is sepparate fronm - * popup... */ - min-height: calc(var(--tabcount) * #{$tablabel-margin + $tablabel-height}); - - /* some form of sensible minimi and default size for the popup (s main area). */ - min-width: 150px; - width: 350px; - height: 300px; - } -} - -.popup-control { - cursor: grab; - background-color: var(--color); - - display: flex; - - @if $popup-style == "left" { - flex-direction: column; - padding: 1.2ex; - } @else { - flex-direction: row-reverse; - padding: 1ex; - } - - - button { - display: block; - background: $blue; - color: white; - border: none; - box-shadow: $btn-height $btn-height gray; - - &:active { - transform: translate($btn-height, $btn-height); - box-shadow: none; - } - - @if $popup-style == "left" { - width: 9mm; - height: 9mm; - margin-bottom: 2mm; - } @else { - width: 7mm; - height: 7mm; - margin-left: 1mm; - } - } -} - -.popup-root { - display: flex; - - @if $popup-style == "left" { - flex-direction: row; - } @else { - flex-direction: column; - } -} - -tab-group { - background-color: #dedede; - color: black; - - width: 100%; - height: 100%; - /* This overflow: auto gives us the correct rendering of the content */ - overflow: auto; - - [role="tabpanel"] { - padding: 1em; - } - - [role="tablist"] { - display: flex; - flex-direction: column; - position: absolute; - left: 100%; - margin: 0; - padding: 0; - - [role="tab"] { - height: $tablabel-height; - margin-bottom: $tablabel-margin; - - width: 5ex; - &:hover { - width: 10ex; - } - - transition: width 0.1s ease-in-out; - border: 1px solid #ccc; - border-radius: 0 5px 5px 0; - background-color: #aeaeae; - } - - [aria-selected="true"] { - border-left: none; - background-color: #dedede; - } - } -} - -vevent-edit { - - select { - max-width: 100%; - } - - input { - white-space: initial; - border: 1px solid gray; - max-width: 100%; - } - - .eventtext { - word-break: break-word; - - table { - word-break: initial; - font-size: 65%; - } - } - - .edit-form { - label { - display: block; - } - - /* REG */ - input[type='text'], textarea { - width: 100%; - } - - .newfield { - width: 100%; - display: flex; - } - - .timeinput { - } - } -} - -.checkboxes { - display: grid; - grid-template-rows: 1fr 1fr; - justify-items: baseline; - - label {grid-row: 1;} - input {grid-row: 2;} -} - -vevent-dl { - font-size: 80%; - - dl { - display: grid; - grid-template-columns: 1fr 1fr; - } -} - - -#bar { - width: calc(100% + 2em); - height: 4px; - background: blue; - border-color: blue; - left: -1em; -} - - -.plusminuschecked label { - color: black; -} - -.plusminuscheck:checked ~ label .plus { - color: green; -} - -.plusminuscheck:not(:checked) ~ label .minus { - color: red; -} - -.inline-edit { - input { - /* important since regular spec is much stronger...*/ - /* [REG] */ - width: initial !important; - } -} - -/* Other ----------------------------------------- -*/ - -.template { - display: none; -} - - -.summary-line .square { - margin-right: 1em; -} - -.square { - width: 1em; - height: 1em; - background-color: var(--color); -} - -.side-by-side { - display: flex; -} - -/* 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: - */ -- cgit v1.2.3