split scss into multiple files

scss/content.scss

@@ -0,0 +1,15 @@
+/* content */
+#content {
+    height: calc(100% - 40px);
+}
+#main-area {
+    width: 0!important; /* prevent 'jumping' between 1400 and 1440px */
+}
+
+/* copysupport */
+tr.selectable td {
+    user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+}

scss/form.scss

@@ -0,0 +1,4 @@
+// contentform
+#input-contentform-save:has(+ input.btn) {
+    margin-right: 1rem;
+}

scss/header.scss

@@ -0,0 +1,157 @@
+
+/* header */
+#header-logo {
+    z-index: 4;
+}
+#header-logo, #header-logo-placeholder {
+    > span {
+        font-size: 1.5rem!important;
+    }
+}
+#header-logo-placeholder {
+    visibility: hidden;
+}
+#header-main {
+    height: var(--navbar-height);
+
+    &.navbar-expand {
+        #header-content {
+            flex-direction: row-reverse;
+        }
+        #navbar-content-wrapper {
+            box-shadow: none!important;
+            background: none;
+        }
+    }
+    &:not(.navbar-expand) {
+        #header-content {
+            flex-direction: row;
+        }
+
+        #navbar-content {
+            flex-direction: column;
+        }
+        #livesearch {
+            order: 0;
+            width: 100%;
+            padding-left: 55px !important;
+            padding-right: 15px !important;
+        }
+        #mainmenu {
+            order: 1;
+            margin-left: 10px!important;
+            margin-top: 20px;
+            margin-bottom: 20px;
+
+            ul > li {
+                // XXX
+                display: block!important;
+            }
+        }
+    }
+
+    &.compact:has(.show) {
+        height: 100%;
+    }
+    &.compact:has(.show), &.compact:has(.collapsing) {
+        #header-logo-placeholder {
+            display: none;
+        }
+
+        #navbar-content-wrapper {
+            position: relative;
+            overflow: hidden;
+            height: 100%;
+            padding: 0 !important;
+
+            @media screen and (max-width: 768px) {
+                z-index: 1200;
+            }
+        }
+        #header-content {
+            align-items: flex-start;
+        }
+        .navbar-toggler {
+            height: 50px!important; // XXX variable
+        }
+
+        #mainmenu {
+            .scrollable-content {
+                right: 0!important;
+            }
+
+            .dropdown-menu {
+                border: none;
+
+                > li {
+                    .dropdown-item {
+                        padding: 8px 20px;
+                    }
+                    &:first-child {
+                        .dropdown-item {
+                            padding-top: 0;
+                        }
+                    }
+                }
+            }
+        }
+        #personaltools {
+            height: 50px;
+            justify-content: space-between;
+            margin: auto 20px;
+
+            #colortoggler {
+                padding-left: 0;
+            }
+        }
+    }
+
+    &.full {
+        #mainmenu {
+            .dropdown-menu {
+                position: fixed;
+            }
+        }
+        #personaltools {
+            height: 100%;
+        }
+    }
+
+    #navbar-content-wrapper {
+        min-width: 0;
+        z-index: 1;
+
+        #navbar-content {
+            min-width: 0;
+        }
+    }
+    #mainmenu {
+        > ul {
+            padding-left: 8px;
+            white-space: nowrap;
+        }
+        .nav-item.active .nav-link {
+            color: $primary;
+        }
+    }
+
+    #personaltools {
+        #language-dropdown > div.dropdown-toggle > a {
+            height: 20px;
+
+            img {
+                vertical-align: baseline;
+            }
+        }
+        #colortoggler #colortoggle-switch {
+            width: 2rem;
+            height: 1rem;
+        }
+    }
+}
+#personaltools-dropdown {
+    .dropdown-item a {
+        text-decoration: none;
+        color: $form-text-color;
+    }
+}

scss/login.scss

@@ -0,0 +1,20 @@
+// login view
+#form-loginform {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+
+    #field-loginform-user, #field-loginform-password {
+        display: grid;
+        grid-template-columns: 1fr 2fr;
+        margin-bottom: 0.5rem;
+    }
+
+    #input-loginform-login {
+        margin-top: 1.5rem;
+        width: 200px;
+    }
+}

scss/logo.scss

@@ -0,0 +1,7 @@
+/* responsive changes */
+#layout:has(#sidebar_left.expanded),
+#layout:has(#sidebar_left.responsive-expanded:not(.collapsed)) {
+    #header-logo {
+        color: #fff;
+    }
+}

scss/scrollbar.scss

@@ -0,0 +1,41 @@
+/* scrollbar */
+.scrollable-x, .scrollable-y {
+    position: relative;
+    overflow: hidden;
+}
+.scrollable-content {
+    position: relative;
+}
+.scrollbar {
+    display: none;
+    position: absolute;
+    background: $gray-300;
+    border-radius: 3px;
+    z-index: 1000;
+
+    .scroll-handle {
+        position: relative;
+        border-radius: 3px;
+        background: $primary;
+    }
+}
+.scrollbar-top {
+    .scrollbar {
+        top: 0;
+    }
+}
+.scrollbar-bottom {
+    .scrollbar {
+        bottom: 0;
+    }
+}
+.scrollbar-left {
+    .scrollbar {
+        left: 0;
+    }
+}
+.scrollbar-right {
+    .scrollbar {
+        right: 0;
+    }
+}

scss/sidebar.scss

@@ -0,0 +1,132 @@
+@import 'colors';
+@import "bootstrap/mixins/_breakpoints";
+
+/* sidebar */
+#sidebar_left {
+    height: 100%;
+    max-height: 100%;
+    user-select: none;
+
+    > .scrollable-y {
+        margin-top: 34px;
+    }
+
+    ul.list-group, ul.list-group li {
+        background-color: inherit;
+    }
+
+    #navtree {
+        max-width: 100%;
+
+        .nav-link {
+            z-index: 2000;
+            white-space: nowrap;
+
+            &.active {
+                background-color: transparent;
+                font-weight: bold;
+            }
+
+            i.bi-chevron-right {
+                vertical-align: text-bottom;
+            }
+
+            span {
+                display: inline-block;
+                width: calc(100% - 40px);
+                text-overflow: ellipsis;
+                overflow-x: hidden;
+                vertical-align: text-bottom;
+            }
+        }
+    }
+
+    #sidebar_resize {
+        position: relative;
+        left: 100%;
+        width: 0;
+        height: 0;
+
+        #sidebar_resizer {
+            position: absolute;
+            z-index: 3;
+            height: 100vh;
+            width: 20px;
+            transform: translateX(-50%);
+            cursor: col-resize;
+        }
+    }
+
+    #sidebar_collapse {
+        position: relative;
+        left: 100%;
+        top: 100%;
+        width: 0;
+        height: 0;
+
+        .collapse_btn {
+            position: absolute;
+            bottom: 0px;
+            border-radius: 100%;
+            z-index: 20001;
+        }
+    }
+
+    &.collapsed {
+        width: 0px!important;
+        min-width: 0!important;
+
+        #sidebar_resize {
+            display: none;
+        }
+        #sidebar_collapse .collapse_btn .bi-chevron-left {
+            display: none;
+        }
+    }
+    &.expanded {
+        #sidebar_collapse .collapse_btn .bi-chevron-right {
+            display: none;
+        }
+    }
+
+    @include media-breakpoint-up(xxl) {
+        &:not(.collapsed) #sidebar_collapse .collapse_btn {
+            transform: translateX(-20px);
+
+            .bi-chevron-right {
+                display: none;
+            }
+        }
+    }
+    @include media-breakpoint-down(xxl) {
+        &:not(.expanded) {
+            width: 0!important;
+            min-width: 0!important;
+
+            #sidebar_resize {
+                display: none;
+            }
+            #sidebar_collapse .collapse_btn .bi-chevron-left {
+                display: none;
+            }
+        }
+    }
+    @include media-breakpoint-between(md, xxl) {
+        &.expanded #sidebar_collapse .collapse_btn {
+            transform: translateX(-20px);
+        }
+    }
+    @include media-breakpoint-down(md) {
+        #sidebar_resize {
+            display: none;
+        }
+        &.expanded {
+            width: 100%!important;
+            z-index: 3;
+
+            #sidebar_collapse {
+                left: calc(100% - 50px);
+            }
+        }
+    }
+}