blue-web 1.17.6 → 1.17.7

package/dist/merged.scss

@@ -1,5 +1,5 @@
 /*!
- * Blue Web v1.17.6 (https://bruegmann.github.io/blue-web)
+ * Blue Web v1.17.7 (https://bruegmann.github.io/blue-web)
  * Licensed under GNU General Public License v3.0 (https://github.com/bruegmann/blue-web/blob/master/LICENSE).
 */
 
@@ -3708,9 +3708,9 @@ $sidebar-deep-bg: darken($sidebar-bg, 4%) !default;
 $sidebar-color: color-contrast($sidebar-bg, $gray-900) !default;
 $sidebar-color-dark: color-contrast($sidebar-bg-dark, $gray-900) !default;
 
-// Color of indicator for active sidebar item.
-$sidebar-indicator-color: #{var(--bs-primary)} !default;
-$sidebar-indicator-color-dark: #{var(--bs-primary-text-emphasis)} !default;
+// Color of indicator for active menu item in sidebar.
+$sidebar-indicator-color: $primary !default;
+$sidebar-indicator-color-dark: $white !default;
 
 // Background of search control in sidebar.
 $sidebar-search-bg: $input-bg !default;
@@ -3796,124 +3796,142 @@ $sidebar-expanded-breakpoint: 1400px !default;
     backdrop-filter: blur(3px) saturate(125%);
 }
 
-@mixin blue-menu-item-indicator() {
-    content: "";
-    position: absolute;
-    top: 0.625rem;
-    bottom: 0.625rem;
-    left: 0.125rem;
-    right: initial;
-    width: 0.25rem;
-    height: auto;
-    background-color: var(--blue-menu-item-indicator-bg);
-    border-radius: 1rem;
-    animation: blue-menu-item-indicator-in-from-side 0.2s ease-in-out;
-
-    @media (prefers-reduced-motion) {
-        animation-duration: 0s;
-    }
-}
-
-@mixin blue-menu-item-indicator-horizontal() {
-    top: initial;
-    bottom: 0.125rem;
-    left: 0.625rem;
-    right: 0.625rem;
-    width: auto;
-    height: 0.25rem;
-    animation: blue-menu-item-indicator-in-from-below 0.2s ease-in-out;
-
-    @media (prefers-reduced-motion) {
-        animation-duration: 0s;
-    }
-}
-
-@mixin blue-menu-item-dropdown-for-shrunk-sidebar() {
-    & > .blue-menu-item-wrapper {
-        display: block;
-        position: relative;
-
-        &:not(:has(.blue-menu-item-dropdown)) > .blue-menu-item:hover {
-            .blue-menu-item-label {
-                &::before,
-                & {
-                    animation: tips-horz 150ms cubic-bezier(0.5, 0, 0.6, 1.3) 1ms forwards;
-
-                    @media (prefers-reduced-motion) {
-                        animation-duration: 0s;
-                    }
-                }
-
-                &::before {
-                    content: "";
-                    display: block;
-                    position: absolute;
-                    border: 5px solid transparent;
-                    z-index: 1001;
-
-                    top: 50%;
-                    border-left-width: 0;
-                    border-right-color: var(--bs-tooltip-bg, #353539);
-                    left: calc(0em - 5px);
-                    transform: translate(0.5em, -50%);
-                    opacity: 0;
-                }
-
-                display: block;
-                text-transform: none;
-                line-height: 1;
-                font-size: 0.9em;
-                -webkit-user-select: none;
-                user-select: none;
-                pointer-events: none;
-                position: absolute;
-                font-family: var(--bs-font-sans-serif);
-                text-align: center;
-                min-width: 3em;
-                max-width: var(--bs-tooltip-max-width, 21em);
-                padding: var(--bs-tooltip-padding-y, 1ch) var(--bs-tooltip-padding-x, 1.5ch);
-                border-radius: var(--bs-tooltip-border-radius, 0.3em);
-                box-shadow: 0 1em 2em -0.5em rgba(0, 0, 0, 0.35);
-                background: var(--bs-tooltip-bg, #353539);
-                color: var(--bs-tooltip-color, #fff);
-                z-index: 1000;
-                width: auto;
-                top: 50%;
-                left: calc(100% + 5px);
-                transform: translate(-0.5em, -50%);
-                overflow: visible;
-                opacity: 0;
-            }
-        }
-
-        & > .blue-menu-item-dropdown,
-        & > .blue-outside > .blue-menu-item-dropdown {
-            @extend .ms-1;
-            @extend .rounded;
-            @extend .shadow;
-            @extend .blue-menu-item-dropdown-from-start;
-
-            position: absolute;
-            top: 0;
-            width: $bla-sidebar-width;
-            left: $normal-size;
-            max-height: calc(100vh - (var(--offset-top, 0px) + 1rem));
-            overflow-y: auto;
-            overflow-x: hidden;
-            background-color: var(--blue-sidebar-bg);
-
-            &::before {
-                content: none;
-            }
-        }
-
-        &:has(.blue-menu-item-dropdown) {
-            & > .blue-menu-item {
-                @extend .highlighted;
-            }
-        }
-    }
-}
+@mixin blue-menu-item-background() {
+    content: "";
+    position: absolute;
+    top: 0.125rem;
+    right: 0.125rem;
+    bottom: 0.125rem;
+    left: 0.125rem;
+    background-color: currentColor;
+    border-radius: $border-radius;
+    transform: scale(0.9);
+    opacity: 0;
+    transition: all 0.2s;
+
+    @media (prefers-reduced-motion) {
+        transition: none;
+    }
+}
+
+@mixin blue-menu-item-indicator() {
+    content: "";
+    position: absolute;
+    top: 0.625rem;
+    bottom: 0.625rem;
+    left: 0.125rem;
+    right: initial;
+    width: 0.25rem;
+    height: auto;
+    background-color: var(--blue-menu-item-indicator-bg);
+    border-radius: 1rem;
+    animation: blue-menu-item-indicator-in-from-side 0.2s ease-in-out;
+
+    @media (prefers-reduced-motion) {
+        animation-duration: 0s;
+    }
+}
+
+@mixin blue-menu-item-indicator-horizontal() {
+    top: initial;
+    bottom: 0.125rem;
+    left: 0.625rem;
+    right: 0.625rem;
+    width: auto;
+    height: 0.25rem;
+    animation: blue-menu-item-indicator-in-from-below 0.2s ease-in-out;
+
+    @media (prefers-reduced-motion) {
+        animation-duration: 0s;
+    }
+}
+
+@mixin blue-menu-item-dropdown-for-shrunk-sidebar() {
+    & > .blue-menu-item-wrapper {
+        display: block;
+        position: relative;
+
+        &:not(:has(.blue-menu-item-dropdown)) > .blue-menu-item:hover {
+            .blue-menu-item-label {
+                &::before,
+                & {
+                    animation: tips-horz 150ms cubic-bezier(0.5, 0, 0.6, 1.3) 1ms forwards;
+
+                    @media (prefers-reduced-motion) {
+                        animation-duration: 0s;
+                    }
+                }
+
+                &::before {
+                    content: "";
+                    display: block;
+                    position: absolute;
+                    border: 5px solid transparent;
+                    z-index: 1001;
+
+                    top: 50%;
+                    border-left-width: 0;
+                    border-right-color: var(--bs-tooltip-bg, #353539);
+                    left: calc(0em - 5px);
+                    transform: translate(0.5em, -50%);
+                    opacity: 0;
+                }
+
+                display: block;
+                text-transform: none;
+                line-height: 1;
+                font-size: 0.9em;
+                -webkit-user-select: none;
+                user-select: none;
+                pointer-events: none;
+                position: absolute;
+                font-family: var(--bs-font-sans-serif);
+                text-align: center;
+                min-width: 3em;
+                max-width: var(--bs-tooltip-max-width, 21em);
+                padding: var(--bs-tooltip-padding-y, 1ch) var(--bs-tooltip-padding-x, 1.5ch);
+                border-radius: var(--bs-tooltip-border-radius, 0.3em);
+                box-shadow: 0 1em 2em -0.5em rgba(0, 0, 0, 0.35);
+                background: var(--bs-tooltip-bg, #353539);
+                color: var(--bs-tooltip-color, #fff);
+                z-index: 1000;
+                width: auto;
+                top: 50%;
+                left: calc(100% + 5px);
+                transform: translate(-0.5em, -50%);
+                overflow: visible;
+                opacity: 0;
+            }
+        }
+
+        & > .blue-menu-item-dropdown,
+        & > .blue-outside > .blue-menu-item-dropdown {
+            @extend .ms-1;
+            @extend .rounded;
+            @extend .shadow;
+            @extend .blue-menu-item-dropdown-from-start;
+
+            position: absolute;
+            top: 0;
+            width: $bla-sidebar-width;
+            left: $normal-size;
+            max-height: calc(100vh - (var(--offset-top, 0px) + 1rem));
+            overflow-y: auto;
+            overflow-x: hidden;
+            background-color: var(--blue-sidebar-bg);
+
+            &::before {
+                content: none;
+            }
+        }
+
+        &:has(.blue-menu-item-dropdown) {
+            & > .blue-menu-item {
+                @extend .highlighted;
+            }
+        }
+    }
+}
 
 @mixin show-action-menu-again() {
     max-height: initial;
@@ -11068,199 +11086,185 @@ body {
     animation-delay: -1s;
 }
 
-@keyframes blue-menu-item-indicator-in-from-side {
-    from {
-        transform: translateX(-100%);
-    }
-    to {
-        transform: translateX(1);
-    }
-}
-
-@keyframes blue-menu-item-indicator-in-from-below {
-    from {
-        transform: translateY(100%);
-    }
-    to {
-        transform: translateY(1);
-    }
-}
-
-.blue-menu-item {
-    transition:
-        width 0.5s,
-        background-color 0.3s,
-        color 0.15s,
-        box-shadow 0.3s,
-        opacity 0.3s !important;
-
-    @media (prefers-reduced-motion) {
-        transition: none !important;
-    }
-
-    border: none;
-    box-shadow: none;
-    background-image: none;
-
-    &:focus {
-        box-shadow: none;
-    }
-
-    &:focus-visible {
-        &,
-        &.active {
-            box-shadow: inset 0 0 0 0.25rem color-mix(in srgb, currentColor 15%, transparent);
-        }
-    }
-}
-
-.blue-menu-item-icon {
-    display: inline-block;
-
-    & > * {
-        display: block;
-        width: 1.5rem;
-    }
-}
-
-.blue-menu-item-icon.iconForActive {
-    display: none;
-}
-
-.blue-menu-item.active {
-    .blue-menu-item-icon.hasIconForActive {
-        display: none;
-    }
-    .blue-menu-item-icon.iconForActive {
-        display: inline-block;
-    }
-}
-
-.blue-menu-item-dropdown {
-    margin-left: 1rem;
-    animation: blue-menu-item-dropdown 0.15s;
-
-    @media (prefers-reduced-motion) {
-        animation-duration: 0s;
-    }
-
-    position: relative;
-
-    &::before {
-        content: "";
-        position: absolute;
-        top: 0.125rem;
-        right: 0.125rem;
-        bottom: 0.125rem;
-        left: 0.125rem;
-        border-radius: $border-radius;
-        box-shadow: $box-shadow;
-        border: 1px solid color-mix(in srgb, currentColor 15%, transparent);
-        background-color: var(--blue-menu-item-dropdown-bg);
-    }
-
-    &[popover] {
-        position: fixed;
-        margin: 0;
-        padding: 0;
-        z-index: 1000;
-        border: none;
-        background: transparent;
-        border-radius: calc(#{$border-radius} + 0.1rem);
-        box-shadow: $box-shadow;
-    }
-}
-
-.blue-menu-item-dropdown-caret.blue-caret {
-    display: none;
-    position: absolute;
-    right: 1.5rem;
-    top: 50%;
-    transform: translateY(-50%);
-    align-items: center;
-}
-
-.blue-menu-item {
-    color: inherit;
-    width: auto;
-    height: $normal-size;
-    font-size: $bla-btn-font-size;
-    display: flex;
-    align-items: center;
-    border-color: transparent;
-    --bs-btn-padding-x: 0.437rem;
-    @include slide-transition();
-
-    &::before {
-        content: "";
-        position: absolute;
-        top: 0.125rem;
-        right: 0.125rem;
-        bottom: 0.125rem;
-        left: 0.125rem;
-        background-color: currentColor;
-        border-radius: $border-radius;
-        transform: scale(0.9);
-        opacity: 0;
-        transition: all 0.2s;
-
-        @media (prefers-reduced-motion) {
-            transition: none;
-        }
-    }
-
-    &[draggable] {
-        cursor: grab;
-
-        &:active {
-            box-shadow: inset 0 0 0.25rem;
-        }
-    }
-
-    &:hover,
-    &:active,
-    &.highlighted,
-    &:has(+ :popover-open) {
-        color: inherit;
-        border-color: transparent;
-
-        &::before {
-            transform: scale(1);
-            opacity: 0.25;
-        }
-    }
-
-    &.highlighted,
-    &:has(+ :popover-open) {
-        &::before {
-            opacity: 0.16;
-        }
-    }
-
-    &:hover,
-    &:active {
-        &::before {
-            opacity: 0.25;
-        }
-    }
-
-    &.active::after {
-        @include blue-menu-item-indicator();
-    }
-
-    & > * + .blue-menu-item-label {
-        margin-left: 0.5rem;
-    }
-}
-
-.blue-menu-item-wrapper {
-    display: contents;
-}
-
-.blue-menu-item-dropdown > .blue-menu-item-wrapper > .blue-menu-item,
-.blue-menu-item-dropdown > .blue-menu-item {
-    width: 100%;
-}
+@keyframes blue-menu-item-indicator-in-from-side {
+    from {
+        transform: translateX(-100%);
+    }
+    to {
+        transform: translateX(1);
+    }
+}
+
+@keyframes blue-menu-item-indicator-in-from-below {
+    from {
+        transform: translateY(100%);
+    }
+    to {
+        transform: translateY(1);
+    }
+}
+
+.blue-menu-item {
+    transition:
+        width 0.5s,
+        background-color 0.3s,
+        color 0.15s,
+        box-shadow 0.3s,
+        opacity 0.3s !important;
+
+    @media (prefers-reduced-motion) {
+        transition: none !important;
+    }
+
+    border: none;
+    box-shadow: none;
+    background-image: none;
+
+    &:focus {
+        box-shadow: none;
+    }
+
+    &:focus-visible {
+        &,
+        &.active {
+            box-shadow: inset 0 0 0 0.25rem color-mix(in srgb, currentColor 15%, transparent);
+        }
+    }
+}
+
+.blue-menu-item-icon {
+    display: inline-block;
+
+    & > * {
+        display: block;
+        width: 1.5rem;
+    }
+}
+
+.blue-menu-item-icon.iconForActive {
+    display: none;
+}
+
+.blue-menu-item.active {
+    .blue-menu-item-icon.hasIconForActive {
+        display: none;
+    }
+    .blue-menu-item-icon.iconForActive {
+        display: inline-block;
+    }
+}
+
+.blue-menu-item-dropdown {
+    margin-left: 1rem;
+    animation: blue-menu-item-dropdown 0.15s;
+
+    @media (prefers-reduced-motion) {
+        animation-duration: 0s;
+    }
+
+    position: relative;
+
+    &::before {
+        content: "";
+        position: absolute;
+        top: 0.125rem;
+        right: 0.125rem;
+        bottom: 0.125rem;
+        left: 0.125rem;
+        border-radius: $border-radius;
+        box-shadow: $box-shadow;
+        border: 1px solid color-mix(in srgb, currentColor 15%, transparent);
+        background-color: var(--blue-menu-item-dropdown-bg);
+    }
+
+    &[popover] {
+        position: fixed;
+        margin: 0;
+        padding: 0;
+        z-index: 1000;
+        border: none;
+        background: transparent;
+        border-radius: calc(#{$border-radius} + 0.1rem);
+        box-shadow: $box-shadow;
+    }
+}
+
+.blue-menu-item-dropdown-caret.blue-caret {
+    display: none;
+    position: absolute;
+    right: 1.5rem;
+    top: 50%;
+    transform: translateY(-50%);
+    align-items: center;
+}
+
+.blue-menu-item {
+    color: inherit;
+    width: auto;
+    height: $normal-size;
+    font-size: $bla-btn-font-size;
+    display: flex;
+    align-items: center;
+    border-color: transparent;
+    --bs-btn-padding-x: 0.437rem;
+    @include slide-transition();
+
+    &::before {
+        @include blue-menu-item-background();
+    }
+
+    &[draggable] {
+        cursor: grab;
+
+        &:active {
+            box-shadow: inset 0 0 0.25rem;
+        }
+    }
+
+    &:hover,
+    &:active,
+    &.highlighted,
+    &:has(+ :popover-open) {
+        color: inherit;
+        border-color: transparent;
+
+        &::before {
+            transform: scale(1);
+            opacity: 0.25;
+        }
+    }
+
+    &.highlighted,
+    &:has(+ :popover-open) {
+        &::before {
+            opacity: 0.16;
+        }
+    }
+
+    &:hover,
+    &:active {
+        &::before {
+            opacity: 0.25;
+        }
+    }
+
+    &.active::after {
+        @include blue-menu-item-indicator();
+    }
+
+    & > * + .blue-menu-item-label {
+        margin-left: 0.5rem;
+    }
+}
+
+.blue-menu-item-wrapper {
+    display: contents;
+}
+
+.blue-menu-item-dropdown > .blue-menu-item-wrapper > .blue-menu-item,
+.blue-menu-item-dropdown > .blue-menu-item {
+    width: 100%;
+}
 
 .blue-header {
     @include header-bg();
@@ -11844,86 +11848,94 @@ body {
     @include make-grid-columns-cq();
 }
 
-// Customize style of Bootstrap's nav-underline
-.nav-underline {
-    .nav-link {
-        --#{$prefix}nav-link-color: var(--#{$prefix}list-group-action-color);
-    }
-
-    .nav-link:hover,
-    .nav-link:focus {
-        border-bottom-color: transparent;
-    }
-
-    .nav-link.active,
-    .show > .nav-link,
-    .blue-tab:checked {
-        &::after {
-            @include blue-menu-item-indicator();
-            @include blue-menu-item-indicator-horizontal();
-        }
-
-        position: relative;
-        font-weight: var(--blue-tabs-underline-active-font-weight, $font-weight-base);
-        border-bottom-color: transparent;
-        color: var(--bs-nav-underline-link-active-color);
-    }
-}
-
-.nav-underline .blue-tabs {
-    display: flex;
-    flex-wrap: wrap;
-    flex-direction: row;
-}
-
-.blue-tab {
-    // Unsetting to solve issues in Safari
-    width: unset;
-    height: unset;
-    border-radius: unset;
-
-    position: relative;
-    order: 0;
-    user-select: none;
-    -webkit-appearance: none;
-    appearance: none;
-
-    @if ($enable-button-pointers) {
-        cursor: pointer;
-    }
-}
-
-.blue-tab::before {
-    content: attr(aria-label);
-}
-
-.blue-tab-content {
-    display: none;
-    order: 1;
-    width: 100%;
-}
-
-input.blue-tab:checked + .blue-tab-content {
-    display: block;
-}
-
-.blue-tabs.nav-tabs {
-    border-bottom: none;
-
-    .blue-tab-content {
-        border-top: var(--#{$prefix}nav-tabs-border-width) solid var(--#{$prefix}nav-tabs-border-color);
-    }
-
-    .blue-tab:checked {
-        color: var(--bs-nav-tabs-link-active-color);
-        background-color: var(--bs-nav-tabs-link-active-bg);
-        border-color: var(--bs-nav-tabs-link-active-border-color);
-    }
-}
-
-.blue-tabs.nav-underline {
-    row-gap: 0;
-}
+// Customize style of Bootstrap's nav-underline
+.nav-underline {
+    .nav-link {
+        --#{$prefix}nav-link-color: var(--#{$prefix}list-group-action-color);
+    }
+
+    .nav-link:hover,
+    .nav-link:focus {
+        &::after {
+            @include blue-menu-item-indicator();
+            @include blue-menu-item-indicator-horizontal();
+            opacity: 0.25;
+        }
+
+        position: relative;
+        border-bottom-color: transparent;
+    }
+
+    .nav-link.active,
+    .show > .nav-link,
+    .blue-tab:checked {
+        &::after {
+            @include blue-menu-item-indicator();
+            @include blue-menu-item-indicator-horizontal();
+            opacity: 1;
+        }
+
+        position: relative;
+        font-weight: var(--blue-tabs-underline-active-font-weight, $font-weight-base);
+        border-bottom-color: transparent;
+        color: currentColor;
+    }
+}
+
+.nav-underline .blue-tabs {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+}
+
+.blue-tab {
+    // Unsetting to solve issues in Safari
+    width: unset;
+    height: unset;
+    border-radius: unset;
+
+    position: relative;
+    order: 0;
+    user-select: none;
+    -webkit-appearance: none;
+    appearance: none;
+
+    @if ($enable-button-pointers) {
+        cursor: pointer;
+    }
+}
+
+.blue-tab::before {
+    content: attr(aria-label);
+}
+
+.blue-tab-content {
+    display: none;
+    order: 1;
+    width: 100%;
+}
+
+input.blue-tab:checked + .blue-tab-content {
+    display: block;
+}
+
+.blue-tabs.nav-tabs {
+    border-bottom: none;
+
+    .blue-tab-content {
+        border-top: var(--#{$prefix}nav-tabs-border-width) solid var(--#{$prefix}nav-tabs-border-color);
+    }
+
+    .blue-tab:checked {
+        color: var(--bs-nav-tabs-link-active-color);
+        background-color: var(--bs-nav-tabs-link-active-bg);
+        border-color: var(--bs-nav-tabs-link-active-border-color);
+    }
+}
+
+.blue-tabs.nav-underline {
+    row-gap: 0;
+}
 
 /**
  * Allows to use Bootstrap Modals but with the native dialog element 
@@ -12066,6 +12078,9 @@ dialog.blue-modal:has(.offcanvas-start) {
     --side-width: var(--blue-sidebar-width);
     --toggler-size: var(--blue-menu-item-height);
 
+    --blue-menu-item-indicator-bg: #{color-contrast($sidebar-bg, $sidebar-indicator-color)};
+    --bs-link-hover-color: #{color-contrast($sidebar-bg, $link-hover-color)};
+
     height: 100dvh;
     position: relative;
     display: grid;
@@ -12085,6 +12100,13 @@ dialog.blue-modal:has(.offcanvas-start) {
     }
 }
 
+@include color-mode(dark, false) {
+    .blue-layout {
+        --blue-menu-item-indicator-bg: #{$sidebar-indicator-color-dark};
+        --bs-link-hover-color: #{color-contrast($sidebar-bg, $link-hover-color-dark)};
+    }
+}
+
 @media (width >= 64rem) {
     .blue-layout {
         &:has(> .blue-layout-state-expand:checked) {
@@ -12144,7 +12166,6 @@ dialog.blue-modal:has(.offcanvas-start) {
     grid-area: side;
     overflow: auto;
     background: inherit;
-    overflow-y: auto;
 }
 
 @media (width < 64rem) {
@@ -12172,6 +12193,9 @@ dialog.blue-modal:has(.offcanvas-start) {
 
 .blue-layout-body {
     --spacing: 0.25rem;
+    --blue-menu-item-indicator-bg: #{$sidebar-indicator-color};
+    --bs-link-hover-color: #{$link-hover-color};
+
     width: calc(100% - var(--spacing) * 2);
     height: calc(100% - var(--spacing));
     margin-left: auto;
@@ -12184,6 +12208,13 @@ dialog.blue-modal:has(.offcanvas-start) {
     border-radius: var(--bs-border-radius-lg);
 }
 
+@include color-mode(dark, false) {
+    .blue-layout-body {
+        --blue-menu-item-indicator-bg: #{$sidebar-indicator-color-dark};
+        --bs-link-hover-color: #{$link-hover-color-dark};
+    }
+}
+
 .blue-layout-overlay {
     position: fixed;
     z-index: var(--base-z-index);