aboutsummaryrefslogtreecommitdiff
path: root/static/style.scss
diff options
context:
space:
mode:
Diffstat (limited to 'static/style.scss')
-rw-r--r--static/style.scss344
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;
}
generated by cgit v1.2.3 (git 2.25.1) at 2024-07-01 08:17:20 +0200