ywana-core8 0.1.28 → 0.1.29

package/dist/index.css

@@ -1420,1086 +1420,1103 @@ textarea:read-only ~ label,
         border: solid 1px red;
     }
 }
-.image-viewer   {
-    display: flex;
-    justify-content: center;
-    align-items: center;
+.page6 {
+    height: 100%;
+    color: var(--text-color);
 }
-.viewer {
-    width: 100vw;
-    height: 100vh;
-    background-color: rgba(0, 0, 0, .75);
-    display: grid;
-    grid-template-columns: 1fr auto;
-    grid-template-rows: 4rem 1fr;
-    grid-template-areas: "header aside" "main aside";
-    color: #FFF;
+
+.page6>menu {
+    padding: 0px;
+    margin: 0px;
+    grid-area: menu;
+    width: var(--page-menu-width);
+    color: var(--page-menu-color);
+    background-color: var(--page-menu-bgcolor);
+    border-right: solid 1px var(--divider-color);
+    resize: horizontal;
 }
 
-.viewer>header {
+.page6>header {
     grid-area: header;
-    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65) 0%, transparent 100%);
-    background-image: linear-gradient(rgba(0, 0, 0, 0.65) 0%, transparent 100%);
-    background-position-x: initial;
-    background-position-y: initial;
-    background-size: initial;
-    background-repeat-x: initial;
-    background-repeat-y: initial;
-    background-attachment: initial;
-    background-origin: initial;
-    background-clip: initial;
-    background-color: initial;
+    height: var(--page-header-height);
+    color: var(--page-header-color);
+    background-color: var(--page-header-bgcolor);
+    border-bottom: solid 1px var(--divider-color);
 }
 
-.viewer>main {
+.page6>nav {
+    grid-area: nav;
+    height: var(--page-nav-height);
+}
+
+.page6>main {
     grid-area: main;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
     overflow: hidden;
 }
 
-.viewer>main>.resizer {
-    width: 100%;
-    overflow: hidden;
-    position: relative;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 1rem;
+.page6>aside {
+    grid-area: aside;
+    width: var(--page-aside-width);
+    color: var(--page-aside-color);
+    background-color: var(--page-aside-bgcolor);
 }
 
-.viewer>main>.resizer img {
-    width: 100%;
-    -o-object-fit: fill;
-       object-fit: fill;
+.page6>footer {
+    grid-area: footer;
+    min-height: var(--page-footer-height);
 }
 
-@media (min-width: 800px) {
-    .viewer>main>.resizer {
-        width: 800px;
-        padding: 0;
-    }
+:root {
+    --timeout: 800ms;
 }
 
-.viewer>aside {
-    min-width: 22rem;
-    grid-area: aside;
-    display: none;
-    background-color: rgb(50, 50, 50);
+.workspace { 
+    display: grid;
+    grid-template-areas: "header header header" 
+                         "menu   nav    nav"
+                         "menu   main   aside"
+                         "menu   detail aside" 
+                         "footer footer footer";
+    grid-template-columns: auto 1fr auto;
+    grid-template-rows: auto auto 1fr auto auto;
 }
 
-.viewer>aside.open {
-    grid-area: aside;
-    display: flex;
-    flex-direction: column;
+.workspace>nav {
+    min-height: 3rem;
 }
 
-.viewer>aside .property>label {
-    color: #AAA;
+.workspace>main {
+    resize: horizontal;
 }
 
-.viewer>footer {
-    width: 15rem;
-    position: absolute;
-    bottom: 1rem;
-    left: calc(50vw - 4rem);
-    border-radius: 3px;
-    z-index: 100;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: .5rem;
-    background-color: rgba(0, 0, 0, .75);
+.workspace>aside {
+    width: 100%;
 }
-.kanban {
+
+.overall {
+    position: absolute;
+    top:0;
+    bottom: 0;
+    left:0;
+    right: 0;
     background-color: var(--background-color);
-    overflow-x: auto;
-    max-height: 90vh;
-    border-top: solid 1px var(--divider-color);
-    border-left: solid 1px var(--divider-color);
-    border-bottom: solid 1px var(--divider-color);
-    display: flex;
+}
 
-    &.with-swimlanes {
-        flex-wrap: wrap;
-    }
+.site6 {
+    width: 100vw;
+    height: 100vh;
+    display: grid;
+    grid-template-columns: auto 1fr 1fr auto;
+    grid-template-rows: var(--site-header-height) 1fr auto auto;
+    grid-template-areas: "header header nav nav" "menu main main aside" "footer footer footer footer" "console console console console";
+    background-color: var(--background-color);
 }
 
-.kanban-header {
-    flex: 1;
-    height: 5rem;
+.site6>header {
+    grid-area: header;
+    color: var(--site-header-color);
+    background-color: var(--site-header-bgcolor);
     display: flex;
     align-items: center;
+}
 
-    position: sticky;
-    top: 0;
-    background-color: var(--paper-color);
-    z-index: 10;
+.site6>nav {
+    grid-area: nav;
+    color: var(--site-nav-color);
+    background-color: var(--site-nav-bgcolor);
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    padding-right: 1rem;
 }
 
-.kanban-swimlane {
+.site6>nav>header {
     flex: 1;
+}
+
+.site6>menu {
+    grid-area: menu;
+    margin: 0;
+    border-right: solid 1px var(--divider-color);
+    padding: 0;
+    color: var(--site-menu-color);
+    background-color: var(--site-menu-bgcolor);
     display: flex;
     flex-direction: column;
-    background-color: var(--background-color);
-    border-bottom: solid 1px var(--divider-color);
-
-    &>header {
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-        padding: 0 .5rem;
-        border-right: solid 1px var(--divider-color);
-        border-left: solid 1px var(--divider-color);
-
-        position: sticky;
-        top: 5rem;
-        z-index: 9;
-        background-color: var(--paper-color);
+    overflow: hidden;
+    width: var(--site-menu-width);
+    transition: width 0.3s ease-in-out;
+}
 
-        &>.title {
-            flex: 1;
-            padding: 0 1rem;
-            display: flex;
+.site6>menu>header {
+    border-bottom: solid 1px var(--divider-color);
+}
 
-            &>.secondary-text {
-                padding-left: .5rem;
-                color: rgba(100, 100, 100, .8);
-            }
-        }
-    }
+.site6>menu.max {
+    width: 20rem;
+}
 
-    &>main {
-        flex: 1;
-        display: flex;
-        overflow: auto;
-        transition: all .5s ease-in-out;
-        border-top: solid 1px var(--divider-color);
+.site6>menu.min {
+    width: var(--site-menu-width);
+    overflow: visible;
+}
 
-        &.fold {
-            max-height: 0;
-            overflow: hidden;
-        }
+.site6>menu>main {
+    padding: .4rem;
+}
 
-        &.unfold {
-            max-height: -moz-fit-content;
-            max-height: fit-content;
-            overflow: auto;
-        }
-    }
+.site6>menu>main>.section-title {
+    width: 100%;
+    font-size: .7rem;
+    font-weight: 400;
+    padding: .5rem .7rem;
+}
 
+.site6>menu>main>.section-title.min {
+    border-bottom: solid 1px var(--divider-color);
+    max-height: 1px
 }
 
-.kanban-column {
-    flex: 1;
-    min-width: 20rem;
+.site6>menu>main>.site-menu-item {
+    width: 100%;
     display: flex;
-    flex-direction: column;
-    border-right: solid 1px var(--divider-color);
+    align-items: center;
 }
 
-.kanban-column.disabled {
-    pointer-events: none;
-    opacity: 0.7;
+.site6>menu.min .site-menu-item {
+    justify-content: center;
 }
 
-.kanban-column.dragOver {
-    background-color: rgba(100, 100, 100, .1);
+.site6>menu.min .site-menu-item i {
+    width: 4.2rem !important;
 }
 
-.kanban-column.min {
-    flex: 0;
-    min-width: 4rem;
+.site6>menu.max>main>.site-menu-item:not(.selected):hover {
+    color: var(--text-color);
+    background-color: rgba(200,200,200,.2);
+    cursor: pointer;
 }
 
-.kanban-column>header {
-    height: 5rem;
-    border-bottom: solid 1px var(--divider-color);
-    display: flex;
-    align-items: flex-start;
-    padding: 1rem;
-    background-color: var(--paper-color);
+.site6>menu>main>.site-menu-item.selected {
+    color: var(--accent-color-text);
+    background-color: var(--accent-color);
+    border-radius: .5rem;
 }
 
-.kanban-column>header>.title {
-    padding: 0 1rem;
+.site6>menu>main {
     flex: 1;
+    overflow-x: hidden;
+    overflow-y: auto;
     display: flex;
     flex-direction: column;
+    align-items: center;
 }
 
-.kanban-column>header>i,
-.kanban-column>footer>button {
-    color: rgba(100, 100, 100, .6);
-}
-
-.kanban-column>main {
+.site6>menu.min>main {
     flex: 1;
-    overflow: auto;
+    overflow-x: visible;
+    overflow-y: visible;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 }
 
-.kanban-column.min>main {
-    min-height: 10rem;
-    padding: 1rem;
-    writing-mode: vertical-rl;
-    color: var(--primary-color-light);
+.site6>main {
+    grid-area: main;
+    overflow: hidden;
+    resize: horizontal;
 }
 
-.kanban-column>footer {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
+.site6>aside {
+    grid-area: aside;
+    color: var(--site-aside-color);
+    background-color: var(--site-aside-bgcolor);
 }
 
-.kanban-card {
-    margin: 2rem;
-    box-shadow: var(--shadow1);
-    background-color: var(--paper-color);
-    border-radius: 5px;
-    min-height: 10rem;
+.site6>footer {
+    grid-area: footer;
 }
 
-.kanban-card.red {
-    border-left: solid 5px red;
+.site6>.site-console {
+    grid-area: console;
+    min-height: 20rem;
+    background-color: rgb(222, 222, 222);
+    color: #000;
 }
 
-.secondary-text {
-    color: rgba(100, 100, 100, .8);
+.site6>.site-console>nav {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
 }
-.avatar {
-    background-color: rgba(200,200,200,.1);
-    border: solid 3px transparent;
-    border-radius: 100%;
-    overflow: hidden;
+
+.site6>.site-console>main {
+    overflow: scroll;
+    max-height: 40vh;
+    display: flex;
+    flex-direction: column-reverse;
 }
 
-.avatar.small {
-    width: 3rem;
-    height: 3rem;
+.site6>.site-console>main>div {
+    padding: 1rem;
+    border-bottom: dotted 1px var(--divider-color);
 }
-.wait-screen {
-    position:absolute;
-    top:0px;
-    left:0px;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(200,200,200,.5);
+
+.site6>.site-preview {
+    position: absolute;
+    z-index: 10;
+    width: 100vw;
+    height: 100vh;
+    background-color: var(--site-preview-background, rgba(0, 0, 0, 0.32));
     display: flex;
-    justify-content: center;
+    flex-direction: column;
     align-items: center;
+    justify-content: center;
 }
-.calendar {
+
+.site-error-fallback {
     display: flex;
     flex-direction: column;
-    flex: 1;
-    overflow: hidden;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    width: 100vw;
+    background-color: var(--background-color);
 }
 
-.calendar-range-control {
-    margin: .3rem;
-    border: solid 1px var(--divider-color);
-    background-color: var(--background-color);
-    border-radius: 3px;
-    padding: .2rem;
+.site-error-fallback > dialog {
     display: flex;
-    justify-content: space-between;
+    flex-direction: column;
     align-items: center;
+    justify-content: center;
+    width: 50%;
+    height: 50%;
+    background-color: var(--paper-color);
+    box-shadow: var(--shadow1);
 
-    &>.btn {
-        flex: 1;
-        margin-left: 1rem;
-        border-radius: 2px;
-        background-color: var(--background-color);
-        &.outlined {
-            border: solid 1px var(--divider-color);
-            background-color: var(--paper-color);
-        }
-    }
+    border: solid 1px black;
+}
+.overlay {
+  opacity: 0.5;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(77, 77, 77, 0.7);
+  z-index: 100;
 }
 
-.year-calendar {
-    margin: 1rem;
-    overflow: hidden;
+.overlay.prompt {
+  z-index: 1000;
+}
+
+.dialog-panel.prompt {
+  z-index: 1010;
+}
+
+.dialog-panel {
+  z-index: 110;
+  min-width: 500px;
+  max-width: 90%;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: var(--paper-color, #fff);
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  border-radius: 5px;
+  box-shadow: var(--shadow1);
+  overflow: auto;
+  border: solid 1px var(--divider-color);
+}
+
+.dialog-panel > header {
+  font-size: 1rem;
+  font-weight: 600;
+  padding: 1rem;
+  display: flex;
+}
+
+.dialog-panel > main {
+  flex: 1;
+  padding: 1rem;
+}
+
+.dialog-panel > footer {
+  padding: 1rem;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.dialog-panel > footer button {
+  min-width: 5rem;
+}
+.view {
+    flex: 1;
+    border: solid 1px rgb(200,200,200);;
     display: flex;
     flex-direction: column;
-    padding: 0rem;
 }
 
-.year-calendar>nav {
+.view>header {
+    width: 100%;
     display: flex;
-    padding: .5rem;
+    align-items: flex-end;
+    background-color: rgb(200,200,200);
+    min-height: 2rem;
+    height: 2.5rem;
+    max-height: 2.5rem;
+}
+
+.view>header>.icon {
+    height: 2.4rem;
+    width: 3rem
+}
+
+.view>header>label {
+    flex: 1;
+    height: 100%;
     display: flex;
     align-items: center;
 }
 
-.year-calendar>nav>label {
-    flex: 1;
-    font-size: 1.3rem;
-    font-weight: 500;
+.view>nav {
+    min-height: 2rem;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    background-color: rgb(230,230,230);
 }
 
-.year-calendar>nav>button {
-    margin-left: 1px;
-    border-radius: 3px;
+.view>nav>* {
+    border-radius: 0px !important;
 }
 
-.year-calendar>main {
+.view>main {
     flex: 1;
-    border: solid 1px var(--divider-color);
-    border-width: 1px 1px 0 0;
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-gap: 1rem;
-    grid-auto-rows: minmax(12rem, auto);
-    overflow: hidden;
-    font-size: .8rem;
-}
-
-.year-calendar .month-cell {
-    border-width: 0 0 1px 1px;
-    overflow: hidden;
-    padding: .5rem;
-    text-align: right;
-    font-weight: 400;
-    
-    &>nav {
-        display: flex;
-        padding: .5rem;
-        display: flex;
-        align-items: center;
-    }
-    
-    &>header {
-        display:flex;
-
-        &>.week-day-cell {
-            flex: 1;
-            border: solid 0px var(--divider-color);
-            padding: 2px;
-            text-align: right;
-            min-width: 2rem !important;
-        }
-    }
-    
-    &>main {
-        flex: 1;
-        border: solid 0px var(--divider-color);
-        display: grid;
-        grid-template-columns: repeat(7, 1fr);
-        grid-gap: 0px;
-        grid-auto-rows: minmax(2rem, auto);
-        overflow: hidden;
-        font-size: .8rem;
-
-        &>.day-cell {
-            border: solid 0px;
-            padding: .5rem;
-            text-align: right;
-            min-height: 1rem;
-            width: 1rem;
-            min-width: 1rem !important;
-            font-weight: 400;
-            color: var(--text-color);
-        }
-
-
-        &>.day-cell.other-month {
-            color: var(--text-color-lighter);
-        }
-
-    }
+    height: 100%;
 }
 
-
-
-.month-calendar { 
-    margin: 1rem;
-    overflow: hidden;
+.view>footer {
+    width: 100%;
     display: flex;
-    flex-direction: column;
-    padding: 0rem;
-
+    align-items: center;
+    background-color: rgb(230,230,230);
 }
-
-.month-calendar>nav {
-    display: flex;
-    padding: .5rem;
+.change-password-dialog div.dialog-error-message {
     display: flex;
     align-items: center;
-}
-
-.month-calendar>nav>label {
-    flex: 1;
-    font-size: 1.3rem;
+    background-color: red;
+    color: white;
     font-weight: 500;
+    padding: 0.1rem 0.5rem;
+    border-radius: .5rem;
+    margin: 0 .5rem;
 }
 
-.month-calendar>nav>button {
-    margin-left: 1px;
-    border-radius: 3px;
-}
-
-.month-calendar>header {
-    display: grid;
-    grid-template-columns: repeat(7, 1fr);
-    font-size: .8rem;
-}
-
-.month-calendar>main {
-    flex: 1;
-    border: solid 1px var(--divider-color);
-    border-width: 1px 1px 0 0;
-    display: grid;
-    grid-template-columns: repeat(7, 1fr);
-    grid-gap: 0px;
-    grid-auto-rows: minmax(5rem, auto);
-    overflow: hidden;
-    font-size: .8rem;
-}
-
-.week-day-cell {
-    border: solid 0px var(--divider-color);
-    padding: 2px;
-    text-align: right;
-    min-width: 5rem;
-}
-
-.day-cell {
-    border: solid 1px var(--divider-color);
-    border-width: 0 0 1px 1px;
-    padding: .5rem;
-    text-align: right;
-    min-height: 6rem;
-    min-width: 5rem;
-    font-weight: 400;
-}
 
-.day-cell.today>header {
-    border-bottom: solid 2px var(--primary-color);
-    padding: .3rem;
-    font-weight: 600;
-}
-
-.day-cell.other-month {
-    color: var(--text-color-lighter);
+.change-password-dialog>footer {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 20px;
+    display: none !important;
 }
-
-.day-cell:hover {
-    background-color: rgba(200,200,200,.1);
-    cursor: pointer;
+.image-viewer   {
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
-
-.day-cell.today:hover {
-    background-color: var(--primary-color-lighter);
+.viewer {
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, .75);
+    display: grid;
+    grid-template-columns: 1fr auto;
+    grid-template-rows: 4rem 1fr;
+    grid-template-areas: "header aside" "main aside";
+    color: #FFF;
 }
 
-.day-cell .event {
-    background-color: var(--primary-color);
-    color: var(--primary-color-text);
-    padding: .3rem;
-    border-radius: 3px;
-    margin: 3px 1px;
-}
-.planner-box {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
+.viewer>header {
+    grid-area: header;
+    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65) 0%, transparent 100%);
+    background-image: linear-gradient(rgba(0, 0, 0, 0.65) 0%, transparent 100%);
+    background-position-x: initial;
+    background-position-y: initial;
+    background-size: initial;
+    background-repeat: initial;
+    background-attachment: initial;
+    background-origin: initial;
+    background-clip: initial;
+    background-color: initial;
 }
 
-.planner-box > header {
-  height: 5rem;
-  border: solid 1px var(--divider-color);
-  border-bottom: 0px;
+.viewer>main {
+    grid-area: main;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
 }
 
-.planner {
-  flex: 1;
-  border: solid 1px var(--divider-color);
-  display: flex;
-  overflow: auto;
-
-  --row-height: 6rem;
-  --column-width: 8rem;
+.viewer>main>.resizer {
+    width: 100%;
+    overflow: hidden;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 1rem;
 }
 
-.planner > .column0 {
-  width: var(--column-width);
-  position: sticky;
-  left: 0px;
-  z-index: 11;
+.viewer>main>.resizer img {
+    width: 100%;
+    -o-object-fit: fill;
+       object-fit: fill;
 }
 
-.planner > .column0 > .column-header {
-  width: var(--column-width);
-  height: var(--row-height);
-  position: sticky;
-  top: 0px;
-  background-color: var(--paper-color);
-  border-right: solid 1px var(--divider-color);
-  border-bottom: solid 1px var(--divider-color);
+@media (min-width: 800px) {
+    .viewer>main>.resizer {
+        width: 800px;
+        padding: 0;
+    }
 }
 
-.planner .date-header.thisWeek {
-  background-color: rgb(10, 176, 35);
-  border-radius: 3px;
-  padding: .2rem;
-  color: var(--paper-color);
+.viewer>aside {
+    min-width: 22rem;
+    grid-area: aside;
+    display: none;
+    background-color: rgb(50, 50, 50);
 }
 
-.planner .row-header {
-  width: var(--column-width);
-  background-color: var(--paper-color);
-  height: var(--row-height);
-  border-bottom: solid 1px var(--divider-color);
-  border-right: solid 1px var(--divider-color);
-  display: flex;
-  justify-content: center;
-  align-items: center;
+.viewer>aside.open {
+    grid-area: aside;
+    display: flex;
+    flex-direction: column;
 }
 
-.planner > .rows {
-  overflow: visible;
+.viewer>aside .property>label {
+    color: #AAA;
 }
 
-.planner > .rows .column-header {
-  width: var(--column-width);
-  background-color: var(--paper-color);
-  height: 2.6rem;
-  padding: .5rem;
+.viewer>footer {
+    width: 15rem;
+    position: absolute;
+    bottom: 1rem;
+    left: calc(50vw - 4rem);
+    border-radius: 3px;
+    z-index: 100;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: .5rem;
+    background-color: rgba(0, 0, 0, .75);
 }
+.kanban {
+    background-color: var(--background-color);
+    overflow-x: auto;
+    max-height: 90vh;
+    border-top: solid 1px var(--divider-color);
+    border-left: solid 1px var(--divider-color);
+    border-bottom: solid 1px var(--divider-color);
+    display: flex;
 
-.planner > .rows > .row {
-  height: var(--row-height);
-  border-bottom: solid 1px var(--divider-color);
+    &.with-swimlanes {
+        flex-wrap: wrap;
+    }
 }
 
-.planner > .rows > .row0 {
-  position: sticky;
-  top: 0px;
-  z-index: 10;
-  height: 3rem;
-  background-color: var(--paper-color);
-  border-bottom: solid 1px var(--divider-color);
-}
+.kanban-header {
+    flex: 1;
+    height: 5rem;
+    display: flex;
+    align-items: center;
 
-.planner > .rows > .row1 {
-  position: sticky;
-  top: 3rem;
-  z-index: 10;
-  height: 3rem;
-  background-color: var(--paper-color);
-  border-bottom: solid 1px var(--divider-color);
+    position: sticky;
+    top: 0;
+    background-color: var(--paper-color);
+    z-index: 10;
 }
 
-.planner .cell {
-  width: var(--column-width);
-  height: 100%;
-  padding: 0.5rem;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
-  border-right: dotted 1px var(--divider-color);
-}
+.kanban-swimlane {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--background-color);
+    border-bottom: solid 1px var(--divider-color);
 
-.planner .cell:hover {
-  background-color: rgba(220,220,220,.3);
-}
+    &>header {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        padding: 0 .5rem;
+        border-right: solid 1px var(--divider-color);
+        border-left: solid 1px var(--divider-color);
 
-.planner .cell.weekend {
-  background-color: rgba(200,200,200,.2);
-}
+        position: sticky;
+        top: 5rem;
+        z-index: 9;
+        background-color: var(--paper-color);
 
-.planner .cell.drag-over {
-  border: dashed 2px var(--divider-color);
-}
+        &>.title {
+            flex: 1;
+            padding: 0 1rem;
+            display: flex;
 
-.event-card {
-  width: 100%;
-  border: solid 1px var(--divider-color);
-  border-radius: 3px;
-  padding: .1rem .5rem;
-  font-size: .8rem;
-  font-weight: 500;
-  color: var(--text-color-light);
-}
+            &>.secondary-text {
+                padding-left: .5rem;
+                color: rgba(100, 100, 100, .8);
+            }
+        }
+    }
 
-.event-card:hover {
-  cursor: pointer;
-  border: solid 2px var(--divider-color);
-}
-.uploader {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-}
+    &>main {
+        flex: 1;
+        display: flex;
+        overflow: auto;
+        transition: all .5s ease-in-out;
+        border-top: solid 1px var(--divider-color);
 
-.demo-uploader {
-  width: 40rem;
-  height: 30rem;
-  margin: 5rem auto;
-  flex-direction: column;
-}
+        &.fold {
+            max-height: 0;
+            overflow: hidden;
+        }
 
-/***************** Upload Area ***********************/
+        &.unfold {
+            max-height: -moz-fit-content;
+            max-height: fit-content;
+            overflow: auto;
+        }
+    }
 
-.upload-area6 {
-  flex: 1;
-  margin: 0 0 1rem 0;
-  border: dashed 2px var(--divider-color);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  border-radius: 1rem;
-  min-height: 10rem;
 }
 
-.upload-area6 > label {
-  font-size: 1.1rem;
-  font-weight: 500;
+.kanban-column {
+    flex: 1;
+    min-width: 20rem;
+    display: flex;
+    flex-direction: column;
+    border-right: solid 1px var(--divider-color);
 }
 
-.upload-area6.drag-over {
-  background-color: rgba(200, 200, 200, 0.1);
+.kanban-column.disabled {
+    pointer-events: none;
+    opacity: 0.7;
 }
 
-/***************** Upload File ***********************/
-
-.upload-file {
-  display: flex;
-  align-items: center;
+.kanban-column.dragOver {
+    background-color: rgba(100, 100, 100, .1);
 }
 
-.upload-file > label {
-  min-width: 30%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  margin-right: 1rem;
+.kanban-column.min {
+    flex: 0;
+    min-width: 4rem;
 }
 
-.upload-file > main {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
+.kanban-column>header {
+    height: 5rem;
+    border-bottom: solid 1px var(--divider-color);
+    display: flex;
+    align-items: flex-start;
+    padding: 1rem;
+    background-color: var(--paper-color);
 }
 
-.upload-file .error {
-  color: red;
-  text-align: center;
+.kanban-column>header>.title {
+    padding: 0 1rem;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
 }
 
-.upload-file progress {
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  border: solid 1px var(--divider-color);
+.kanban-column>header>i,
+.kanban-column>footer>button {
+    color: rgba(100, 100, 100, .6);
 }
 
-.upload-file ::-webkit-progress-bar {
-  border: solid 1px rgb(235, 235, 235);
-  background-color: rgb(241, 241, 241);
+.kanban-column>main {
+    flex: 1;
+    overflow: auto;
 }
 
-.upload-file ::-webkit-progress-value {
-  background-color: rgb(182, 182, 182);
-  opacity: 1;
+.kanban-column.min>main {
+    min-height: 10rem;
+    padding: 1rem;
+    writing-mode: vertical-rl;
+    color: var(--primary-color-light);
 }
 
-.page6 {
-    height: 100%;
-    color: var(--text-color);
+.kanban-column>footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
 }
 
-.page6>menu {
-    padding: 0px;
-    margin: 0px;
-    grid-area: menu;
-    width: var(--page-menu-width);
-    color: var(--page-menu-color);
-    background-color: var(--page-menu-bgcolor);
-    border-right: solid 1px var(--divider-color);
-    resize: horizontal;
+.kanban-card {
+    margin: 2rem;
+    box-shadow: var(--shadow1);
+    background-color: var(--paper-color);
+    border-radius: 5px;
+    min-height: 10rem;
 }
 
-.page6>header {
-    grid-area: header;
-    height: var(--page-header-height);
-    color: var(--page-header-color);
-    background-color: var(--page-header-bgcolor);
-    border-bottom: solid 1px var(--divider-color);
+.kanban-card.red {
+    border-left: solid 5px red;
 }
 
-.page6>nav {
-    grid-area: nav;
-    height: var(--page-nav-height);
+.secondary-text {
+    color: rgba(100, 100, 100, .8);
 }
-
-.page6>main {
-    grid-area: main;
+.avatar {
+    background-color: rgba(200,200,200,.1);
+    border: solid 3px transparent;
+    border-radius: 100%;
     overflow: hidden;
 }
 
-.page6>aside {
-    grid-area: aside;
-    width: var(--page-aside-width);
-    color: var(--page-aside-color);
-    background-color: var(--page-aside-bgcolor);
+.avatar.small {
+    width: 3rem;
+    height: 3rem;
 }
-
-.page6>footer {
-    grid-area: footer;
-    min-height: var(--page-footer-height);
+.wait-screen {
+    position:absolute;
+    top:0px;
+    left:0px;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(200,200,200,.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
-
-:root {
-    --timeout: 800ms;
+.calendar {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    overflow: hidden;
 }
 
-.workspace { 
-    display: grid;
-    grid-template-areas: "header header header" 
-                         "menu   nav    nav"
-                         "menu   main   aside"
-                         "menu   detail aside" 
-                         "footer footer footer";
-    grid-template-columns: auto 1fr auto;
-    grid-template-rows: auto auto 1fr auto auto;
+.calendar-range-control {
+    margin: .3rem;
+    border: solid 1px var(--divider-color);
+    background-color: var(--background-color);
+    border-radius: 3px;
+    padding: .2rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    &>.btn {
+        flex: 1;
+        margin-left: 1rem;
+        border-radius: 2px;
+        background-color: var(--background-color);
+        &.outlined {
+            border: solid 1px var(--divider-color);
+            background-color: var(--paper-color);
+        }
+    }
 }
 
-.workspace>nav {
-    min-height: 3rem;
+.year-calendar {
+    margin: 1rem;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    padding: 0rem;
 }
 
-.workspace>main {
-    resize: horizontal;
+.year-calendar>nav {
+    display: flex;
+    padding: .5rem;
+    display: flex;
+    align-items: center;
 }
 
-.workspace>aside {
-    width: 100%;
+.year-calendar>nav>label {
+    flex: 1;
+    font-size: 1.3rem;
+    font-weight: 500;
 }
 
-.overall {
-    position: absolute;
-    top:0;
-    bottom: 0;
-    left:0;
-    right: 0;
-    background-color: var(--background-color);
+.year-calendar>nav>button {
+    margin-left: 1px;
+    border-radius: 3px;
 }
 
-.site6 {
-    width: 100vw;
-    height: 100vh;
+.year-calendar>main {
+    flex: 1;
+    border: solid 1px var(--divider-color);
+    border-width: 1px 1px 0 0;
     display: grid;
-    grid-template-columns: auto 1fr 1fr auto;
-    grid-template-rows: var(--site-header-height) 1fr auto auto;
-    grid-template-areas: "header header nav nav" "menu main main aside" "footer footer footer footer" "console console console console";
-    background-color: var(--background-color);
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 1rem;
+    grid-auto-rows: minmax(12rem, auto);
+    overflow: hidden;
+    font-size: .8rem;
 }
 
-.site6>header {
-    grid-area: header;
-    color: var(--site-header-color);
-    background-color: var(--site-header-bgcolor);
-    display: flex;
-    align-items: center;
-}
+.year-calendar .month-cell {
+    border-width: 0 0 1px 1px;
+    overflow: hidden;
+    padding: .5rem;
+    text-align: right;
+    font-weight: 400;
+    
+    &>nav {
+        display: flex;
+        padding: .5rem;
+        display: flex;
+        align-items: center;
+    }
+    
+    &>header {
+        display:flex;
 
-.site6>nav {
-    grid-area: nav;
-    color: var(--site-nav-color);
-    background-color: var(--site-nav-bgcolor);
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    padding-right: 1rem;
-}
+        &>.week-day-cell {
+            flex: 1;
+            border: solid 0px var(--divider-color);
+            padding: 2px;
+            text-align: right;
+            min-width: 2rem !important;
+        }
+    }
+    
+    &>main {
+        flex: 1;
+        border: solid 0px var(--divider-color);
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+        grid-gap: 0px;
+        grid-auto-rows: minmax(2rem, auto);
+        overflow: hidden;
+        font-size: .8rem;
 
-.site6>nav>header {
-    flex: 1;
+        &>.day-cell {
+            border: solid 0px;
+            padding: .5rem;
+            text-align: right;
+            min-height: 1rem;
+            width: 1rem;
+            min-width: 1rem !important;
+            font-weight: 400;
+            color: var(--text-color);
+        }
+
+
+        &>.day-cell.other-month {
+            color: var(--text-color-lighter);
+        }
+
+    }
 }
 
-.site6>menu {
-    grid-area: menu;
-    margin: 0;
-    border-right: solid 1px var(--divider-color);
-    padding: 0;
-    color: var(--site-menu-color);
-    background-color: var(--site-menu-bgcolor);
+
+
+.month-calendar { 
+    margin: 1rem;
+    overflow: hidden;
     display: flex;
     flex-direction: column;
-    overflow: hidden;
-    width: var(--site-menu-width);
-    transition: width 0.3s ease-in-out;
+    padding: 0rem;
+
 }
 
-.site6>menu>header {
-    border-bottom: solid 1px var(--divider-color);
+.month-calendar>nav {
+    display: flex;
+    padding: .5rem;
+    display: flex;
+    align-items: center;
 }
 
-.site6>menu.max {
-    width: 20rem;
+.month-calendar>nav>label {
+    flex: 1;
+    font-size: 1.3rem;
+    font-weight: 500;
 }
 
-.site6>menu.min {
-    width: var(--site-menu-width);
-    overflow: visible;
+.month-calendar>nav>button {
+    margin-left: 1px;
+    border-radius: 3px;
 }
 
-.site6>menu>main {
-    padding: .4rem;
+.month-calendar>header {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    font-size: .8rem;
 }
 
-.site6>menu>main>.section-title {
-    width: 100%;
-    font-size: .7rem;
-    font-weight: 400;
-    padding: .5rem .7rem;
+.month-calendar>main {
+    flex: 1;
+    border: solid 1px var(--divider-color);
+    border-width: 1px 1px 0 0;
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    grid-gap: 0px;
+    grid-auto-rows: minmax(5rem, auto);
+    overflow: hidden;
+    font-size: .8rem;
 }
 
-.site6>menu>main>.section-title.min {
-    border-bottom: solid 1px var(--divider-color);
-    max-height: 1px
+.week-day-cell {
+    border: solid 0px var(--divider-color);
+    padding: 2px;
+    text-align: right;
+    min-width: 5rem;
 }
 
-.site6>menu>main>.site-menu-item {
-    width: 100%;
-    display: flex;
-    align-items: center;
+.day-cell {
+    border: solid 1px var(--divider-color);
+    border-width: 0 0 1px 1px;
+    padding: .5rem;
+    text-align: right;
+    min-height: 6rem;
+    min-width: 5rem;
+    font-weight: 400;
 }
 
-.site6>menu.min .site-menu-item {
-    justify-content: center;
+.day-cell.today>header {
+    border-bottom: solid 2px var(--primary-color);
+    padding: .3rem;
+    font-weight: 600;
 }
 
-.site6>menu.min .site-menu-item i {
-    width: 4.2rem !important;
+.day-cell.other-month {
+    color: var(--text-color-lighter);
 }
 
-.site6>menu.max>main>.site-menu-item:not(.selected):hover {
-    color: var(--text-color);
-    background-color: rgba(200,200,200,.2);
+.day-cell:hover {
+    background-color: rgba(200,200,200,.1);
     cursor: pointer;
 }
 
-.site6>menu>main>.site-menu-item.selected {
-    color: var(--accent-color-text);
-    background-color: var(--accent-color);
-    border-radius: .5rem;
+.day-cell.today:hover {
+    background-color: var(--primary-color-lighter);
 }
 
-.site6>menu>main {
-    flex: 1;
-    overflow-x: hidden;
-    overflow-y: auto;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+.day-cell .event {
+    background-color: var(--primary-color);
+    color: var(--primary-color-text);
+    padding: .3rem;
+    border-radius: 3px;
+    margin: 3px 1px;
+}
+.planner-box {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
 }
 
-.site6>menu.min>main {
-    flex: 1;
-    overflow-x: visible;
-    overflow-y: visible;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+.planner-box > header {
+  height: 5rem;
+  border: solid 1px var(--divider-color);
+  border-bottom: 0px;
 }
 
-.site6>main {
-    grid-area: main;
-    overflow: hidden;
-    resize: horizontal;
+.planner {
+  flex: 1;
+  border: solid 1px var(--divider-color);
+  display: flex;
+  overflow: auto;
+
+  --row-height: 6rem;
+  --column-width: 8rem;
 }
 
-.site6>aside {
-    grid-area: aside;
-    color: var(--site-aside-color);
-    background-color: var(--site-aside-bgcolor);
+.planner > .column0 {
+  width: var(--column-width);
+  position: sticky;
+  left: 0px;
+  z-index: 11;
 }
 
-.site6>footer {
-    grid-area: footer;
+.planner > .column0 > .column-header {
+  width: var(--column-width);
+  height: var(--row-height);
+  position: sticky;
+  top: 0px;
+  background-color: var(--paper-color);
+  border-right: solid 1px var(--divider-color);
+  border-bottom: solid 1px var(--divider-color);
 }
 
-.site6>.site-console {
-    grid-area: console;
-    min-height: 20rem;
-    background-color: rgb(222, 222, 222);
-    color: #000;
+.planner .date-header.thisWeek {
+  background-color: rgb(10, 176, 35);
+  border-radius: 3px;
+  padding: .2rem;
+  color: var(--paper-color);
 }
 
-.site6>.site-console>nav {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
+.planner .row-header {
+  width: var(--column-width);
+  background-color: var(--paper-color);
+  height: var(--row-height);
+  border-bottom: solid 1px var(--divider-color);
+  border-right: solid 1px var(--divider-color);
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
-.site6>.site-console>main {
-    overflow: scroll;
-    max-height: 40vh;
-    display: flex;
-    flex-direction: column-reverse;
+.planner > .rows {
+  overflow: visible;
 }
 
-.site6>.site-console>main>div {
-    padding: 1rem;
-    border-bottom: dotted 1px var(--divider-color);
+.planner > .rows .column-header {
+  width: var(--column-width);
+  background-color: var(--paper-color);
+  height: 2.6rem;
+  padding: .5rem;
 }
 
-.site6>.site-preview {
-    position: absolute;
-    z-index: 10;
-    width: 100vw;
-    height: 100vh;
-    background-color: var(--site-preview-background, rgba(0, 0, 0, 0.32));
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
+.planner > .rows > .row {
+  height: var(--row-height);
+  border-bottom: solid 1px var(--divider-color);
 }
 
-.site-error-fallback {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 100vh;
-    width: 100vw;
-    background-color: var(--background-color);
+.planner > .rows > .row0 {
+  position: sticky;
+  top: 0px;
+  z-index: 10;
+  height: 3rem;
+  background-color: var(--paper-color);
+  border-bottom: solid 1px var(--divider-color);
 }
 
-.site-error-fallback > dialog {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    width: 50%;
-    height: 50%;
-    background-color: var(--paper-color);
-    box-shadow: var(--shadow1);
-
-    border: solid 1px black;
+.planner > .rows > .row1 {
+  position: sticky;
+  top: 3rem;
+  z-index: 10;
+  height: 3rem;
+  background-color: var(--paper-color);
+  border-bottom: solid 1px var(--divider-color);
 }
-.overlay {
-  opacity: 0.5;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+
+.planner .cell {
+  width: var(--column-width);
+  height: 100%;
+  padding: 0.5rem;
   display: flex;
-  align-items: center;
+  flex-direction: column;
   justify-content: center;
-  background: rgba(77, 77, 77, 0.7);
-  z-index: 100;
+  align-items: flex-start;
+  border-right: dotted 1px var(--divider-color);
 }
 
-.overlay.prompt {
-  z-index: 1000;
+.planner .cell:hover {
+  background-color: rgba(220,220,220,.3);
 }
 
-.dialog-panel.prompt {
-  z-index: 1010;
+.planner .cell.weekend {
+  background-color: rgba(200,200,200,.2);
 }
 
-.dialog-panel {
-  z-index: 110;
-  min-width: 500px;
-  max-width: 90%;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  background: var(--paper-color, #fff);
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  border-radius: 5px;
-  box-shadow: var(--shadow1);
-  overflow: auto;
+.planner .cell.drag-over {
+  border: dashed 2px var(--divider-color);
+}
+
+.event-card {
+  width: 100%;
   border: solid 1px var(--divider-color);
+  border-radius: 3px;
+  padding: .1rem .5rem;
+  font-size: .8rem;
+  font-weight: 500;
+  color: var(--text-color-light);
 }
 
-.dialog-panel > header {
-  font-size: 1rem;
-  font-weight: 600;
-  padding: 1rem;
+.event-card:hover {
+  cursor: pointer;
+  border: solid 2px var(--divider-color);
+}
+.uploader {
   display: flex;
+  flex-direction: column;
+  flex: 1;
 }
 
-.dialog-panel > main {
-  flex: 1;
-  padding: 1rem;
+.demo-uploader {
+  width: 40rem;
+  height: 30rem;
+  margin: 5rem auto;
+  flex-direction: column;
 }
 
-.dialog-panel > footer {
-  padding: 1rem;
+/***************** Upload Area ***********************/
+
+.upload-area6 {
+  flex: 1;
+  margin: 0 0 1rem 0;
+  border: dashed 2px var(--divider-color);
   display: flex;
-  justify-content: flex-end;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border-radius: 1rem;
+  min-height: 10rem;
 }
 
-.dialog-panel > footer button {
-  min-width: 5rem;
+.upload-area6 > label {
+  font-size: 1.1rem;
+  font-weight: 500;
 }
-.view {
-    flex: 1;
-    border: solid 1px rgb(200,200,200);;
-    display: flex;
-    flex-direction: column;
+
+.upload-area6.drag-over {
+  background-color: rgba(200, 200, 200, 0.1);
 }
 
-.view>header {
-    width: 100%;
-    display: flex;
-    align-items: flex-end;
-    background-color: rgb(200,200,200);
-    min-height: 2rem;
-    height: 2.5rem;
-    max-height: 2.5rem;
+/***************** Upload File ***********************/
+
+.upload-file {
+  display: flex;
+  align-items: center;
 }
 
-.view>header>.icon {
-    height: 2.4rem;
-    width: 3rem
+.upload-file > label {
+  min-width: 30%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-right: 1rem;
 }
 
-.view>header>label {
-    flex: 1;
-    height: 100%;
-    display: flex;
-    align-items: center;
+.upload-file > main {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
 }
 
-.view>nav {
-    min-height: 2rem;
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    background-color: rgb(230,230,230);
+.upload-file .error {
+  color: red;
+  text-align: center;
 }
 
-.view>nav>* {
-    border-radius: 0px !important;
+.upload-file progress {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  border: solid 1px var(--divider-color);
 }
 
-.view>main {
-    flex: 1;
-    height: 100%;
+.upload-file ::-webkit-progress-bar {
+  border: solid 1px rgb(235, 235, 235);
+  background-color: rgb(241, 241, 241);
 }
 
-.view>footer {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    background-color: rgb(230,230,230);
+.upload-file ::-webkit-progress-value {
+  background-color: rgb(182, 182, 182);
+  opacity: 1;
 }
+
 .file-explorer {
     width: 100%;
     height: 100%;