@qtoggle/qui 0.0.0

package/less/structured-view.less

@@ -0,0 +1,245 @@
+
+@import (reference) "theme";
+
+
+/* View itself */
+
+.qui-structured-view {
+    position: relative;
+    margin: auto;
+    box-sizing: border-box;
+    overflow: hidden;
+}
+
+
+/* Top */
+
+div.qui-structured-view-top {
+    height: 2em;
+    background: @background-color;
+    text-align: left;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    border-style: solid;
+    border-color: @border-color;
+    border-bottom-width: 0.0625em;
+    position: relative;
+    box-sizing: content-box;
+}
+
+.qui-structured-view.topless > div.qui-structured-view-top {
+    display: none;
+}
+
+body:NOT(.small-screen) .qui-structured-view.no-large-screen-top:NOT(.minimizable) >  div.qui-structured-view-top {
+    display: none;
+}
+
+.qui-structured-view.iconless > div.qui-structured-view-top {
+    padding-left: 0.3em;
+    line-height: 2em;
+}
+
+.qui-structured-view.large-top > div.qui-structured-view-top {
+    height: 3em;
+}
+
+.qui-structured-view.iconless.large-top > div.qui-structured-view-top {
+    padding-left: 0.5em;
+    line-height: 3em;
+}
+
+.qui-structured-view.minimizable > div.qui-structured-view-top {
+    color: @interactive-color;
+}
+
+.qui-structured-view.minimizable > div.qui-structured-view-top.active {
+    background: @background-color;
+    color: @interactive-active-color;
+}
+
+.qui-structured-view.minimizable > div.qui-structured-view-top.selected,
+.qui-structured-view.minimizable > div.qui-structured-view-top.active {
+    background-color: @interactive-color;
+    color: @foreground-interactive-color;
+}
+
+body.small-screen > div.qui-main-container > div.qui-pages-container > div.qui-page > .qui-structured-view > div.qui-structured-view-top {
+    display: none;  /* replaced by top bar title */
+}
+
+
+/* Title, icon & other top bar stuff */
+
+span.qui-structured-view-title {
+    vertical-align: middle;
+}
+
+.qui-structured-view.large-top > div.qui-structured-view-top > span.qui-structured-view-title {
+    font-weight: bold;
+}
+
+div.qui-structured-view-icon {
+    display: inline-block;
+    vertical-align: middle;
+    width: 2em;
+    height: 2em;
+}
+
+.qui-structured-view.large-top > div.qui-structured-view-top > div.qui-structured-view-icon {
+    margin: 0.5em;
+}
+
+.qui-structured-view.iconless > div.qui-structured-view-top > div.qui-structured-view-icon {
+    display: none;
+}
+
+div.qui-structured-view-icon > div {
+    transform: scale(0.75);
+}
+
+.qui-structured-view.large-top > div.qui-structured-view-top > div.qui-structured-view-icon > div {
+    transform: none;
+}
+
+div.qui-structured-view-minimize-button {
+    width: 2em;
+    height: 2em;
+    position: absolute;
+    top: 0;
+    right: 0;
+    cursor: pointer;
+    background: @background-color;
+    box-sizing: content-box;
+}
+
+div.qui-structured-view-minimize-button.active {
+    background: @background-color;
+}
+
+.qui-structured-view.large-top > div.qui-structured-view-top > div.qui-structured-view-minimize-button {
+    width: 3em;
+    height: 3em;
+}
+
+div.qui-structured-view-top > div.qui-structured-view-minimize-button > div {
+    margin: 0.25em;
+    transition: all @transition-duration ease;
+    transform: rotate(180deg);
+}
+
+.qui-structured-view.large-top > div.qui-structured-view-top > div.qui-structured-view-minimize-button > div {
+    margin: 0.5em;
+}
+
+.qui-structured-view.minimizable > div.qui-structured-view-top > div.qui-structured-view-minimize-button {
+    background: transparent;
+}
+
+.qui-structured-view.minimized > div.qui-structured-view-top > div.qui-structured-view-minimize-button > div {
+    transform: rotate(0deg);
+}
+
+
+/* Close button */
+
+div.qui-structured-view-close-button {
+    display: inline-block;
+    width: 2em;
+    height: 2em;
+    position: absolute;
+    top: 0;
+    right: 0;
+    cursor: pointer;
+    background: @background-color;
+    box-sizing: content-box;
+}
+
+div.qui-structured-view-close-button.active {
+    background: @background-color;
+}
+
+div.qui-structured-view-top > div.qui-structured-view-close-button > div {
+    margin: 0.25em;
+}
+
+.qui-structured-view.large-top > div.qui-structured-view-top > div.qui-structured-view-close-button {
+    width: 3em;
+    height: 3em;
+}
+
+.qui-structured-view.large-top > div.qui-structured-view-top > div.qui-structured-view-close-button > div {
+    margin: 0.5em;
+}
+
+
+/* Don't cover top with progress glass */
+
+body:NOT(.small-screen) .qui-progress-view:NOT(.topless) {
+
+    & > div.qui-progress-view-glass {
+        top: 2em;
+    }
+
+    &.large-top > div.qui-progress-view-glass {
+        top: 3em;
+    }
+
+}
+
+
+/* Body */
+
+div.qui-structured-view-body {
+    transition: height @transition-duration ease, opacity @transition-duration ease;
+    overflow: hidden;
+}
+
+
+/* Bottom */
+
+.qui-structured-view.minimized > div.qui-structured-view-bottom {
+    display: none !important;
+}
+
+
+/* Unexpanded */
+
+div.qui-page {
+
+    & > .qui-structured-view.unexpanded {
+        margin-top: 1em;
+        margin-bottom: 1em;
+        box-shadow: 0 0 0.35em 0 @floating-shadow-color;
+        transition: margin-top @transition-duration ease;
+        border-radius: 0.2em;
+    }
+
+    &.column-layout > .qui-structured-view.unexpanded {
+        box-shadow: none;
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+
+    body.small-screen div.qui-pages-container > & > .qui-structured-view.unexpanded {
+        width: 100% !important;
+        margin-top: 0;
+        margin-bottom: 0;
+        border-radius: 0;
+        border-width: 0;
+        box-shadow: none;
+    }
+
+}
+
+
+/* Layout inside popup page */
+
+body.small-screen > div.qui-global-glass > div.qui-global-glass-container > div.qui-page.popup > .qui-structured-view {
+    width: 90% !important;
+}
+
+body:NOT(.small-screen) > div.qui-global-glass > div.qui-global-glass-container > div.qui-page.popup > .qui-structured-view {
+    margin-top: 5em;
+}

package/less/tables.less

@@ -0,0 +1,84 @@
+
+@import (reference) "theme";
+
+div.qui-table {
+}
+
+div.qui-table-row {
+    display: grid;
+    grid-auto-flow: column;
+    transition: height @transition-duration ease,
+                background @transition-duration ease,
+                color @transition-duration ease,
+                opacity @transition-duration ease;
+
+    &.qui-base-button {
+        background: @background-color;
+        color: @interactive-color;
+
+        &.active {
+            background: @background-active-color;
+        }
+
+        &.selected {
+            background: @interactive-color;
+            color: @background-color;
+        }
+
+        &.active.selected {
+            background: @interactive-active-color;
+            color: @background-color;
+        }
+
+    }
+
+}
+
+div.qui-table-cell {
+    display: inline-grid;
+    overflow: hidden;
+    min-width: 0;
+
+    &.horizontal-align-left {
+        justify-content: left;
+    }
+
+    &.horizontal-align-center {
+        justify-content: center;
+    }
+
+    &.horizontal-align-right {
+        justify-content: right;
+    }
+
+    &.vertical-align-top {
+        align-content: start;
+    }
+
+    &.vertical-align-center {
+        align-content: center;
+    }
+
+    &.vertical-align-bottom {
+        align-content: end;
+    }
+
+}
+
+span.qui-simple-table-cell-element {
+    padding: 0.5em;
+
+    div.qui-table-header > div.qui-table-cell > & {
+        font-weight: bold;
+        font-size: 85%;
+    }
+
+}
+
+div.qui-table-row.qui-base-button > div.qui-table-cell > div.qui-icon-label-view {
+    transition: none; /* Fixes strange transition delays due to inherited fading color, on Chrome */
+}
+
+div.qui-push-button-table-cell {
+    margin: 0.5em;
+}

package/less/theme-dark.less

@@ -0,0 +1,133 @@
+
+@import (reference) "stock-icons";
+
+
+@theme-name: dark;
+
+
+/* fonts */
+
+@base-font-family: DejaVuSans;
+
+
+/* base colors */
+
+@darkgray-color: #444444;
+@gray-color: #777777;
+@lightgray-color: #dedede;
+@white-color: #ffffff;
+@blue-color: #62abea;
+@magenta-color: #cb90de;
+@red-color: #ff7c7c;
+@orange-color: #ffab7a;
+@yellow-color: #f7e66d;
+@green-color: #1ecd97;
+@cyan-color: #70cbd4;
+
+@darkgray-active-color: hsv(hsvhue(@darkgray-color),
+                            hsvsaturation(@darkgray-color),
+                            hsvvalue(@darkgray-color) * 0.8);
+
+@gray-active-color: hsv(hsvhue(@gray-color),
+                        hsvsaturation(@gray-color),
+                        hsvvalue(@gray-color) * 0.8);
+
+@lightgray-active-color: hsv(hsvhue(@lightgray-color),
+                             hsvsaturation(@lightgray-color),
+                             hsvvalue(@lightgray-color) * 0.8);
+
+@white-active-color: hsv(hsvhue(@white-color),
+                         hsvsaturation(@white-color),
+                         hsvvalue(@white-color) * 0.8);
+
+@blue-active-color: hsv(hsvhue(@blue-color),
+                        hsvsaturation(@blue-color),
+                        hsvvalue(@blue-color) * 0.8);
+
+@magenta-active-color: hsv(hsvhue(@magenta-color),
+                           hsvsaturation(@magenta-color),
+                           hsvvalue(@magenta-color) * 0.8);
+
+@red-active-color: hsv(hsvhue(@red-color),
+                       hsvsaturation(@red-color),
+                       hsvvalue(@red-color) * 0.8);
+
+@orange-active-color: hsv(hsvhue(@orange-color),
+                          hsvsaturation(@orange-color),
+                          hsvvalue(@orange-color) * 0.8);
+
+@yellow-active-color: hsv(hsvhue(@yellow-color),
+                          hsvsaturation(@yellow-color),
+                          hsvvalue(@yellow-color) * 0.8);
+
+@green-active-color: hsv(hsvhue(@green-color),
+                         hsvsaturation(@green-color),
+                         hsvvalue(@green-color) * 0.8);
+
+@cyan-active-color: hsv(hsvhue(@cyan-color),
+                        hsvsaturation(@cyan-color),
+                        hsvvalue(@cyan-color) * 0.8);
+
+
+/* common UI elements colors */
+
+@background-root-color: #363636;
+@background-color: @darkgray-color;
+@foreground-color: @white-color;
+@foreground-active-color: @white-active-color;
+@foreground-interactive-color: @white-color;
+@border-color: #555555;
+@readonly-color: @gray-color;
+@disabled-color: @gray-color;
+@disabled-alt-color: @lightgray-color;
+
+@background-active-color: @background-root-color;
+
+@interactive-color: @blue-color;
+@interactive-active-color: @blue-active-color;
+
+@highlight-color: @orange-color;
+@highlight-active-color: @orange-active-color;
+
+@danger-color: @red-color;
+@danger-active-color: @red-active-color;
+
+@selection-color: @interactive-color;
+@odd-color: mix(@background-color, @interactive-color, 90%);
+
+@floating-background-color: @background-color;
+@floating-shadow-color: rgba(0, 0, 0, 0.2);
+@bar-shadow-color: rgba(0, 0, 0, 0.3);
+@thick-shadow-color: rgba(0, 0, 0, 0.8);
+
+
+/* message colors */
+
+@info-color: @lightgray-color;
+@warning-color: @highlight-color;
+@error-color: @danger-color;
+@warning-active-color: @highlight-active-color;
+@error-active-color: @danger-active-color;
+
+
+/* icon colors */
+
+@background-icon-y-offset: @darkgray-icon-y-offset;
+@foreground-icon-y-offset: @white-icon-y-offset;
+@foreground-interactive-icon-y-offset: @white-icon-y-offset;
+@disabled-icon-y-offset: @gray-icon-y-offset;
+@interactive-icon-y-offset: @blue-icon-y-offset;
+@highlight-icon-y-offset: @orange-icon-y-offset;
+@danger-icon-y-offset: @red-icon-y-offset;
+@info-icon-y-offset: @lightgray-icon-y-offset;
+@warning-icon-y-offset: @orange-icon-y-offset;
+@error-icon-y-offset: @red-icon-y-offset;
+
+
+/* misc */
+
+@transition-duration: 0.2s;
+@glass-opacity: 75%;
+@modal-background-filter: brightness(50%) /*blur(0.1em)*/;
+@modal-background-filter-no-effects: brightness(50%);
+

package/less/theme-light.less

@@ -0,0 +1,132 @@
+
+@import (reference) "stock-icons";
+
+
+@theme-name: light;
+
+
+/* fonts */
+
+@base-font-family: DejaVuSans;
+
+
+/* base colors */
+
+@darkgray-color: #444444;
+@gray-color: #888888;
+@lightgray-color: #dedede;
+@white-color: #ffffff;
+@blue-color: #62abea;
+@magenta-color: #cb90de;
+@red-color: #ff7c7c;
+@orange-color: #ffab7a;
+@yellow-color: #f7e66d;
+@green-color: #1ecd97;
+@cyan-color: #70cbd4;
+
+@darkgray-active-color: hsv(hsvhue(@darkgray-color),
+                            hsvsaturation(@darkgray-color),
+                            hsvvalue(@darkgray-color) * 0.8);
+
+@gray-active-color: hsv(hsvhue(@gray-color),
+                        hsvsaturation(@gray-color),
+                        hsvvalue(@gray-color) * 0.8);
+
+@lightgray-active-color: hsv(hsvhue(@lightgray-color),
+                             hsvsaturation(@lightgray-color),
+                             hsvvalue(@lightgray-color) * 0.8);
+
+@white-active-color: hsv(hsvhue(@white-color),
+                         hsvsaturation(@white-color),
+                         hsvvalue(@white-color) * 0.8);
+
+@blue-active-color: hsv(hsvhue(@blue-color),
+                        hsvsaturation(@blue-color),
+                        hsvvalue(@blue-color) * 0.8);
+
+@magenta-active-color: hsv(hsvhue(@magenta-color),
+                           hsvsaturation(@magenta-color),
+                           hsvvalue(@magenta-color) * 0.8);
+
+@red-active-color: hsv(hsvhue(@red-color),
+                       hsvsaturation(@red-color),
+                       hsvvalue(@red-color) * 0.8);
+
+@orange-active-color: hsv(hsvhue(@orange-color),
+                          hsvsaturation(@orange-color),
+                          hsvvalue(@orange-color) * 0.8);
+
+@yellow-active-color: hsv(hsvhue(@yellow-color),
+                          hsvsaturation(@yellow-color),
+                          hsvvalue(@yellow-color) * 0.8);
+
+@green-active-color: hsv(hsvhue(@green-color),
+                         hsvsaturation(@green-color),
+                         hsvvalue(@green-color) * 0.8);
+
+@cyan-active-color: hsv(hsvhue(@cyan-color),
+                        hsvsaturation(@cyan-color),
+                        hsvvalue(@cyan-color) * 0.8);
+
+
+/* common UI elements colors */
+
+@background-root-color: #ececec;
+@background-color: @white-color;
+@foreground-color: @gray-color;
+@foreground-active-color: @gray-active-color;
+@foreground-interactive-color: @white-color;
+@border-color: #e6e6e6;
+@readonly-color: @lightgray-color;
+@disabled-color: @lightgray-color;
+@disabled-alt-color: @white-color;
+
+@background-active-color: @background-root-color;
+
+@interactive-color: @blue-color;
+@interactive-active-color: @blue-active-color;
+
+@highlight-color: @orange-color;
+@highlight-active-color: @orange-active-color;
+
+@danger-color: @red-color;
+@danger-active-color: @red-active-color;
+
+@selection-color: @interactive-color;
+@odd-color: mix(@background-color, @interactive-color, 90%);
+
+@floating-background-color: @background-color;
+@floating-shadow-color: rgba(0, 0, 0, 0.1);
+@bar-shadow-color: rgba(0, 0, 0, 0.2);
+@thick-shadow-color: rgba(0, 0, 0, 0.3);
+
+
+/* message colors */
+
+@info-color: @foreground-color;
+@warning-color: @highlight-color;
+@error-color: @danger-color;
+@warning-active-color: @highlight-active-color;
+@error-active-color: @danger-active-color;
+
+
+/* icon colors */
+
+@background-icon-y-offset: @white-icon-y-offset;
+@foreground-icon-y-offset: @gray-icon-y-offset;
+@foreground-interactive-icon-y-offset: @white-icon-y-offset;
+@disabled-icon-y-offset: @lightgray-icon-y-offset;
+@interactive-icon-y-offset: @blue-icon-y-offset;
+@highlight-icon-y-offset: @orange-icon-y-offset;
+@danger-icon-y-offset: @red-icon-y-offset;
+@info-icon-y-offset: @gray-icon-y-offset;
+@warning-icon-y-offset: @orange-icon-y-offset;
+@error-icon-y-offset: @red-icon-y-offset;
+
+
+/* misc */
+
+@transition-duration: 0.2s;
+@glass-opacity: 75%;
+@modal-background-filter: brightness(50%) /* blur(0.1em) */;
+@modal-background-filter-no-effects: brightness(50%);