initial v0.8 pre-release

ui/src/scss/_docs_panel.scss

@@ -0,0 +1,99 @@
+.docs-sidebar {
+    --itemsSpacing: 10px;
+    --itemsHeight: 40px;
+
+    position: relative;
+    min-width: 180px;
+    max-width: 300px;
+    height: 100%;
+    flex-shrink: 0;
+    overflow-x: hidden;
+    overflow-y: auto; // fallback
+    overflow-y: overlay;
+    background: var(--bodyColor);
+    padding: var(--smSpacing) var(--xsSpacing);
+    border-right: 1px solid var(--baseAlt1Color);
+
+    .sidebar-content {
+        display: block;
+        width: 100%;
+    }
+    .sidebar-item {
+        position: relative;
+        outline: 0;
+        cursor: pointer;
+        text-decoration: none;
+        display: flex;
+        width: 100%;
+        gap: 10px;
+        align-items: center;
+        text-align: right;
+        justify-content: start;
+        padding: 5px 15px;
+        margin: 0 0 var(--itemsSpacing) 0;
+        font-size: var(--lgFontSize);
+        min-height: var(--itemsHeight);
+        border-radius: var(--baseRadius);
+        user-select: none;
+        color: var(--txtHintColor);
+        transition: background var(--baseAnimationSpeed),
+                    color var(--baseAnimationSpeed);
+        &:last-child {
+            margin-bottom: 0;
+        }
+
+        // states
+        &:focus-visible,
+        &:hover,
+        &:active,
+        &.active {
+            color: var(--txtPrimaryColor);
+            background: var(--baseAlt1Color);
+        }
+        &:active {
+            background: var(--baseAlt2Color);
+            transition-duration: var(--activeAnimationSpeed);
+        }
+    }
+
+    &.compact {
+        .sidebar-item {
+            --itemsSpacing: 7px;
+        }
+    }
+}
+
+.docs-content {
+    width: 100%;
+    display: block;
+    padding: calc(var(--baseSpacing) - 3px) var(--baseSpacing);
+    overflow: auto;
+}
+
+.docs-content-wrapper {
+    display: flex;
+    width: 100%;
+    height: 100%;
+}
+
+.docs-panel {
+    width: 960px;
+    height: 100%;
+    .overlay-panel-section.panel-header {
+        padding: 0;
+        border: 0;
+        box-shadow: none;
+    }
+    .overlay-panel-section.panel-content {
+        padding: 0 !important;
+    }
+    .overlay-panel-section.panel-footer {
+        display: none;
+    }
+
+    @media screen and (max-width: 1000px) {
+        .overlay-panel-section.panel-footer {
+            display: flex;
+        }
+    }
+}