diff options
Diffstat (limited to 'static/style.scss')
-rw-r--r-- | static/style.scss | 344 |
1 files changed, 196 insertions, 148 deletions
diff --git a/static/style.scss b/static/style.scss index a29bb24b..efe8291d 100644 --- a/static/style.scss +++ b/static/style.scss @@ -24,7 +24,10 @@ html, body { /* main the graphical portion of both the wide and the table view */ - main { + > 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 */ @@ -42,6 +45,19 @@ html, body { -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; + } } @@ -85,6 +101,10 @@ html, body { text-decoration: none; } +.hidden { + display: none; +} + /* Change View ---------------------------------------- @@ -128,8 +148,6 @@ html, body { */ .btn { - padding: 0; - /* if a */ text-decoration: none; @@ -137,29 +155,21 @@ html, body { border: none; background-color: inherit; - > div { - padding: 0.5em; - background-color: $blue; - color: white; + /* --- */ - box-sizing: border-box; - width: 100%; - height: 100%; - - display: flex; - justify-content: center; - align-items: center; + box-sizing: border-box; + padding: 0.5em; - /* 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; + background-color: $blue; + color: white; - box-shadow: $btn-height $btn-height gray; - } + display: flex; + justify-content: center; + align-items: center; - &:active > div { + /* 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; } @@ -329,12 +339,15 @@ along with their colors. .cal-cell { overflow-y: auto; - .event { + .event, vevent-block { font-size: 8pt; border-radius: 5px; padding: 2px; - margin: 2px; + margin-top: 2px; + margin-bottom: 2px; font-family: arial; + + box-sizing: border-box; } } @@ -501,7 +514,8 @@ along with their colors. * 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 { +.clock, .eventlike, +.days vevent-block { position: absolute; box-sizing: border-box; margin: 0; @@ -535,13 +549,21 @@ along with their colors. } /* graphical block in the calendar */ -.event { +vevent-block, .event { transition: 0.3s; font-size: var(--event-font-size); - overflow: visible; + 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; @@ -562,6 +584,8 @@ along with their colors. &.generated { opacity: 40%; + /* TODO only disable transitions for top/botom, and only + * when dragging (not when updating through other means) */ transition: none; } @@ -651,6 +675,18 @@ along with their colors. color: $gray; padding-right: 1em; } + + .categories > a::after { + content: "," + } + + .categories > a:last-child::after { + content: "" + } + + .categories > a { + margin-right: 1ch; + } } .attach { @@ -734,7 +770,7 @@ along with their colors. .error { border: 3px solid red; background-color: pink; - + pre { padding: 1em; } @@ -744,167 +780,153 @@ along with their colors. ---------------------------------------- */ +popup-element { + display: none; + position: absolute; + z-index: 1000; -.popup { - display: flex; - background-color: #dedede; - color: black; - font-size: 80%; - - /* overflow-y: auto; */ - max-width: 60ch; - max-height: 60ch; - min-width: 60ch; - min-height: 30ch; - - &-container { - display: none; - position: absolute; - z-index: 1000; + &[active] { + z-index: 1001; + } - /* ??? */ - left: 10px; - top: -50px; + /* ??? */ + left: 10px; + top: -50px; - box-shadow: gray 10px 10px 10px; + box-shadow: gray 10px 10px 10px; - &.visible { - display: block; - } + &[visible] { + display: block; } - input { - white-space: initial; - border: 1px solid gray; - max-width: 100%; - } + > * { + resize: both; + /* This overflow: auto gives us the correct resize handle */ + overflow: auto; - .eventtext { - /* makes the text in the popup scroll, but not the sidebar */ - overflow-y: auto; - padding: 1em; - word-break: break-word; + /* TODO this doesn't work, since tabcount is sepparate fronm + * popup... */ + min-height: calc(var(--tabcount) * #{$tablabel-margin + $tablabel-height}); - table { - word-break: initial; - font-size: 65%; - } + /* some form of sensible minimi and default size for the popup (s main area). */ + min-width: 150px; + width: 350px; + height: 250px; } +} - .location { - font-style: initial; - } +.popup-control { + cursor: grab; + background-color: var(--color); - .category { - display: inline-block; - margin-right: 1ex; - } + display: flex; - .popup-control { - display: flex; + @if $popup-style == "left" { flex-direction: column; + padding: 1.2ex; + } @else { + flex-direction: row-reverse; + padding: 1ex; + } - /* 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; + button { + display: block; + background: $blue; + color: white; + border: none; + box-shadow: $btn-height $btn-height gray; - font-size: 150%; + &: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; -#bar { - width: calc(100% + 2em); - height: 4px; - background: blue; - border-color: blue; - left: -1em; + @if $popup-style == "left" { + flex-direction: row; + } @else { + flex-direction: column; + } } -/* Tabs ----------------------------------------- -*/ +tab-group { + background-color: #dedede; + color: black; -.tabgroup { - position: relative; width: 100%; - resize: both; - --tab-size: 6ex; -} + height: 100%; + /* This overflow: auto gives us the correct rendering of the content */ + overflow: auto; -.tab { - > label { - position: absolute; + [role="tabpanel"] { + padding: 1em; + } + [role="tablist"] { + display: flex; + flex-direction: column; + position: absolute; left: 100%; - top: 0; - display: block; + margin: 0; + padding: 0; - max-height: 5ex; - min-height: 5ex; + [role="tab"] { + height: $tablabel-height; + margin-bottom: $tablabel-margin; - min-width: 5ex; - width: 5ex; + width: 5ex; + &:hover { + width: 10ex; + } - transition: width 0.1s ease-in-out; - &:hover { - width: 10ex; + transition: width 0.1s ease-in-out; + border: 1px solid #ccc; + border-radius: 0 5px 5px 0; + background-color: #aeaeae; } - 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: 100; - /* to align all tab */ - border-left: 3px solid transparent; + [aria-selected="true"] { + border-left: none; background-color: #dedede; - - ~ .content { - z-index: 100; - } } } +} - .content { - position: absolute; - top: 0; - left: 0; - background-color: #dedede; - right: 0; - bottom: 0; - overflow: auto; +vevent-edit { + + select { + max-width: 100%; + } - min-width: 100%; - min-height: 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 { @@ -924,10 +946,36 @@ along with their colors. .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; } |