-
+
{nameStats.hits}
{nameStats.name}
diff --git a/ui/src/Components/OverviewModal/__snapshots__/OverviewModalContent.test.tsx.snap b/ui/src/Components/OverviewModal/__snapshots__/OverviewModalContent.test.tsx.snap
index 2724a942c..bea59bd9e 100644
--- a/ui/src/Components/OverviewModal/__snapshots__/OverviewModalContent.test.tsx.snap
+++ b/ui/src/Components/OverviewModal/__snapshots__/OverviewModalContent.test.tsx.snap
@@ -35,7 +35,7 @@ exports[` matches snapshot with labels to show 1`] = `
class="badge bg-light components-label mx-0 mt-0 mb-auto ps-0 text-start"
>
16
@@ -53,7 +53,7 @@ exports[` matches snapshot with labels to show 1`] = `
class="components-label badge bg-default components-label-dark components-label-with-hover mb-0 ps-0 text-start"
>
8
@@ -66,7 +66,7 @@ exports[` matches snapshot with labels to show 1`] = `
matches snapshot with labels to show 1`] = `
class="components-label badge bg-default components-label-dark components-label-with-hover mb-0 ps-0 text-start"
>
4
@@ -98,7 +98,7 @@ exports[` matches snapshot with labels to show 1`] = `
matches snapshot with labels to show 1`] = `
class="components-label badge bg-default components-label-dark components-label-with-hover mb-0 ps-0 text-start"
>
4
@@ -138,7 +138,7 @@ exports[` matches snapshot with labels to show 1`] = `
matches snapshot with labels to show 1`] = `
class="badge bg-light components-label mx-0 mt-0 mb-auto ps-0 text-start"
>
20
@@ -187,7 +187,7 @@ exports[` matches snapshot with labels to show 1`] = `
class="components-label badge bg-default components-label-dark components-label-with-hover mb-0 ps-0 text-start"
>
1
@@ -200,7 +200,7 @@ exports[` matches snapshot with labels to show 1`] = `
matches snapshot with labels to show 1`] = `
class="components-label badge bg-default components-label-dark components-label-with-hover mb-0 ps-0 text-start"
>
1
@@ -232,7 +232,7 @@ exports[` matches snapshot with labels to show 1`] = `
matches snapshot with labels to show 1`] = `
class="components-label badge bg-default components-label-dark components-label-with-hover mb-0 ps-0 text-start"
>
1
@@ -272,7 +272,7 @@ exports[` matches snapshot with labels to show 1`] = `
matches snapshot with labels to show 1`] = `
class="components-label badge bg-default components-label-dark components-label-with-hover mb-0 ps-0 text-start"
>
1
@@ -312,7 +312,7 @@ exports[` matches snapshot with labels to show 1`] = `
matches snapshot with labels to show 1`] = `
class="components-label badge bg-default components-label-dark components-label-with-hover mb-0 ps-0 text-start"
>
1
@@ -352,7 +352,7 @@ exports[` matches snapshot with labels to show 1`] = `
matches snapshot with labels to show 1`] = `
class="components-label badge bg-default components-label-dark components-label-with-hover mb-0 ps-0 text-start"
>
1
@@ -392,7 +392,7 @@ exports[` matches snapshot with labels to show 1`] = `
matches snapshot with labels to show 1`] = `
class="components-label badge bg-default components-label-dark components-label-with-hover mb-0 ps-0 text-start"
>
1
@@ -432,7 +432,7 @@ exports[` matches snapshot with labels to show 1`] = `
matches snapshot with labels to show 1`] = `
class="components-label badge bg-default components-label-dark components-label-with-hover mb-0 ps-0 text-start"
>
1
@@ -472,7 +472,7 @@ exports[` matches snapshot with labels to show 1`] = `
matches snapshot with labels to show 1`] = `
class="components-label badge bg-default components-label-dark components-label-with-hover mb-0 ps-0 text-start"
>
1
@@ -512,7 +512,7 @@ exports[` matches snapshot with labels to show 1`] = `
matches snapshot with labels to show 1`] = `
class="badge bg-light components-label mx-0 mt-0 mb-auto ps-0 text-start"
>
5
@@ -566,7 +566,7 @@ exports[` matches snapshot with labels to show 1`] = `
class="components-label badge bg-dark components-label-dark components-label-with-hover mb-0 ps-0 text-start"
>
5
@@ -579,7 +579,7 @@ exports[` matches snapshot with labels to show 1`] = `
= 768px) {
.mw-md-25 {
max-width: 25%;
}
diff --git a/ui/src/Styles/Components/_AlertGrid.scss b/ui/src/Styles/Components/_AlertGrid.scss
index 99a7999af..9bb1bd87a 100644
--- a/ui/src/Styles/Components/_AlertGrid.scss
+++ b/ui/src/Styles/Components/_AlertGrid.scss
@@ -2,10 +2,11 @@
font-size: 1.4rem;
background-color: var(--karma-grid-swimlane-bg);
color: $white;
+
--bs-secondary-color: #{rgba($white, .75)};
+
margin-left: 0.3rem;
margin-right: 0.3rem;
-
position: sticky;
z-index: 101;
}
diff --git a/ui/src/Styles/Components/_AlertHistory.scss b/ui/src/Styles/Components/_AlertHistory.scss
index cb8ae016a..5331e8ffb 100644
--- a/ui/src/Styles/Components/_AlertHistory.scss
+++ b/ui/src/Styles/Components/_AlertHistory.scss
@@ -5,6 +5,7 @@
height: 4px;
line-height: 4px;
}
+
svg.alert-history {
height: 4px;
line-height: 4px;
@@ -15,6 +16,7 @@ svg.alert-history {
&:not(:first-child) {
margin-left: 1px;
}
+
&:not(:last-child) {
margin-right: 1px;
}
@@ -28,7 +30,6 @@ svg.alert-history {
rect {
width: 100%;
height: 100%;
-
transition-property: fill;
transition-duration: 0.3s;
@@ -36,31 +37,39 @@ svg.alert-history {
&.firing-0 {
fill: #fadbd8;
}
+
&.firing-1 {
fill: #f3a69e;
}
+
&.firing-2 {
fill: #ee8277;
}
+
&.firing-3 {
fill: #e95e50;
}
+
&.firing-4 {
fill: #d04436;
}
+
&.firing-5 {
fill: #a2352a;
}
}
+
&.inactive {
fill: var(--karma-alert-history-inactive);
}
+
&.fetching {
fill: var(--karma-alert-history-inactive);
animation-timing-function: ease-out;
animation-duration: 12s;
animation-iteration-count: infinite;
}
+
&.error {
fill: $warning;
}
@@ -73,6 +82,7 @@ svg.alert-history {
$start: ($step * $i) - $step;
$middle: ($step * $i);
$stop: ($step * $i) + $step;
+
0% {
opacity: 1;
}
@@ -85,6 +95,7 @@ svg.alert-history {
#{$stop * 1%} {
opacity: 1;
}
+
100% {
opacity: 1;
}
diff --git a/ui/src/Styles/Components/_Annotation.scss b/ui/src/Styles/Components/_Annotation.scss
index 23c54bfd9..6c25d9fcc 100644
--- a/ui/src/Styles/Components/_Annotation.scss
+++ b/ui/src/Styles/Components/_Annotation.scss
@@ -6,10 +6,12 @@
.components-grid-annotation-link {
text-decoration: none;
color: var(--karma-link-color);
+
&.border {
border-color: var(--karma-annotation-link-border) !important;
}
}
+
.components-grid-annotation-link:hover {
text-decoration: none;
}
diff --git a/ui/src/Styles/Components/_BaseLabel.scss b/ui/src/Styles/Components/_BaseLabel.scss
index 8c16f4dcb..dfcd0c939 100644
--- a/ui/src/Styles/Components/_BaseLabel.scss
+++ b/ui/src/Styles/Components/_BaseLabel.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
.components-label-with-hover:hover {
filter: brightness(0.85);
cursor: pointer;
@@ -9,6 +11,7 @@
.components-label {
border: 1px solid transparent;
+
&:hover {
border: 1px solid transparent;
}
@@ -17,9 +20,9 @@
max-width: 100%;
text-overflow: ellipsis;
white-space: nowrap;
+
/* https://stackoverflow.com/a/20566810 */
vertical-align: bottom !important;
-
margin-top: 2px;
margin-bottom: 2px;
}
@@ -28,6 +31,7 @@
.bg-default {
background-color: var(--karma-color-default);
}
+
.border-default {
border: 1px solid var(--karma-color-default);
}
@@ -42,27 +46,33 @@
&.btn-primary {
border: 1px solid var(--karma-label-primary-border);
}
+
&.bg-secondary,
&.btn-secondary {
border: 1px solid var(--karma-label-secondary-border);
background-color: var(--karma-label-secondary-bg) !important;
}
+
&.bg-success,
&.btn-success {
border: 1px solid var(--karma-label-success-border);
}
+
&.bg-danger,
&.btn-danger {
border: 1px solid var(--karma-label-danger-border);
}
+
&.bg-warning,
&.btn-warning {
border: 1px solid var(--karma-label-warning-border);
}
+
&.bg-info,
&.btn-info {
border: 1px solid var(--karma-label-info-border);
}
+
&.bg-dark,
&.btn-dark {
border: 1px solid var(--karma-label-dark-border);
@@ -74,10 +84,12 @@ span.badge.components-label:not(.rounded-pill) {
padding-left: 0.4rem;
padding-right: 0.4rem;
}
+
span.badge.components-label.rounded-pill {
padding-right: 0.6rem;
padding-left: 0.6rem;
}
+
span.badge.components-label {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
@@ -87,20 +99,24 @@ button.components-label-bright,
span.components-label-bright,
.components-label-bright {
color: $black;
+
&:hover {
color: $black;
}
&.components-label-name,
.components-label-name {
- color: lighten($black, 20%);
+ color: color.adjust($black, $lightness: 20%);
+
&:hover {
- color: lighten($black, 20%);
+ color: color.adjust($black, $lightness: 20%);
}
}
+
&.components-label-value,
.components-label-value {
color: $black;
+
&:hover {
color: $black;
}
@@ -108,7 +124,7 @@ span.components-label-bright,
@for $i from 10 through 11 {
&.components-label-brightness-#{$i} {
- border: 1px solid darken(#fff, $i * 1.1%);
+ border: 1px solid color.adjust(#fff, $lightness: (-$i * 1.1%));
}
}
}
@@ -117,21 +133,24 @@ button.components-label-dark,
span.components-label-dark,
.components-label-dark {
color: $white;
+
&:hover {
color: $white;
}
&.components-label-name,
.components-label-name {
- color: darken($white, 10%);
+ color: color.adjust($white, $lightness: -10%);
+
&:hover {
- color: darken($white, 10%);
+ color: color.adjust($white, $lightness: -10%);
}
}
&.components-label-value,
.components-label-value {
color: $white;
+
&:hover {
color: $white;
}
diff --git a/ui/src/Styles/Components/_DateTimeSelect.scss b/ui/src/Styles/Components/_DateTimeSelect.scss
index bf17f0746..7e26e0243 100644
--- a/ui/src/Styles/Components/_DateTimeSelect.scss
+++ b/ui/src/Styles/Components/_DateTimeSelect.scss
@@ -1,3 +1,4 @@
+/* stylelint-disable selector-class-pattern, custom-property-pattern -- react-day-picker uses underscore class names */
.components-date-range {
&.rdp-root {
--rdp-cell-size: 40px;
@@ -61,7 +62,7 @@
border-radius: 0.5rem;
}
- &:not(.rdp-disabled):not(.rdp-range_middle):not(.rdp-selected):hover {
+ &:not(.rdp-disabled, .rdp-range_middle, .rdp-selected):hover {
background-color: var(--bs-light);
}
}
@@ -107,7 +108,7 @@
color: var(--bs-white);
}
- .rdp-day.rdp-selected.rdp-range_middle:not(.rdp-range_start):not(.rdp-range_end) .rdp-day_button {
+ .rdp-day.rdp-selected.rdp-range_middle:not(.rdp-range_start, .rdp-range_end) .rdp-day_button {
background-color: var(--bs-light);
color: var(--karma-components-date-range-sub-color);
}
diff --git a/ui/src/Styles/Components/_DropdownSlide.scss b/ui/src/Styles/Components/_DropdownSlide.scss
index cb1fa76e1..a2d0987e3 100644
--- a/ui/src/Styles/Components/_DropdownSlide.scss
+++ b/ui/src/Styles/Components/_DropdownSlide.scss
@@ -5,6 +5,7 @@ $duration: 0.15s;
opacity: 0;
transform: scale(0.95) translateY(-0.25em);
}
+
.components-animation-slide-enter-active,
.components-animation-slide-appear-active {
opacity: 1;
@@ -18,6 +19,7 @@ $duration: 0.15s;
opacity: 1;
transform: scale(1) translateY(0);
}
+
.components-animation-slide-exit-active {
opacity: 0;
transform: scale(0.95) translateY(-0.25em);
diff --git a/ui/src/Styles/Components/_Fade.scss b/ui/src/Styles/Components/_Fade.scss
index 55c2b1dd4..171931104 100644
--- a/ui/src/Styles/Components/_Fade.scss
+++ b/ui/src/Styles/Components/_Fade.scss
@@ -4,6 +4,7 @@ $duration: 0.5s;
.components-animation-fade-enter {
opacity: 0;
}
+
.components-animation-fade-appear-active,
.components-animation-fade-enter-active {
opacity: 1;
@@ -13,6 +14,7 @@ $duration: 0.5s;
.components-animation-fade-exit {
opacity: 1;
}
+
.components-animation-fade-exit-active {
opacity: 0;
transition: opacity $duration ease-out;
@@ -22,6 +24,7 @@ $duration: 0.5s;
from {
opacity: 0;
}
+
to {
opacity: 1;
}
diff --git a/ui/src/Styles/Components/_FadeAlertGroup.scss b/ui/src/Styles/Components/_FadeAlertGroup.scss
index dcf8580d0..63b50bda2 100644
--- a/ui/src/Styles/Components/_FadeAlertGroup.scss
+++ b/ui/src/Styles/Components/_FadeAlertGroup.scss
@@ -6,6 +6,7 @@ $duration: 0.5s;
.components-animation-alergroup-enter {
opacity: 0;
}
+
.components-animation-alergroup-appear-active,
.components-animation-alergroup-enter-active {
opacity: 1;
@@ -15,6 +16,7 @@ $duration: 0.5s;
.components-animation-alergroup-exit {
opacity: 1;
}
+
.components-animation-alergroup-exit-active {
opacity: 0;
transition: opacity $duration ease-out;
diff --git a/ui/src/Styles/Components/_Fetcher.scss b/ui/src/Styles/Components/_Fetcher.scss
index b54f227ac..b772abe9c 100644
--- a/ui/src/Styles/Components/_Fetcher.scss
+++ b/ui/src/Styles/Components/_Fetcher.scss
@@ -1,17 +1,17 @@
@use "sass:math";
-$totalWidth: 2.6rem;
-$fetcherWidth: 2rem;
-$pixSize: math.div($fetcherWidth, 5);
+$total-width: 2.6rem;
+$fetcher-width: 2rem;
+$pix-size: math.div($fetcher-width, 5);
.invisible .components-fetcher {
display: none;
}
.components-fetcher {
- padding: math.div($totalWidth - $fetcherWidth, 2);
- width: ($pixSize * 5);
- height: ($pixSize * 5);
+ padding: math.div($total-width - $fetcher-width, 2);
+ width: ($pix-size * 5);
+ height: ($pix-size * 5);
&.fetching,
&.processing,
@@ -19,6 +19,7 @@ $pixSize: math.div($fetcherWidth, 5);
& > .dot.dot-middle {
opacity: 0;
}
+
& > .dot:not(.dot-middle) {
animation-name: dots;
}
@@ -27,9 +28,11 @@ $pixSize: math.div($fetcherWidth, 5);
&.fetching > .dot {
background-color: var(--bs-warning);
}
+
&.processing > .dot {
background-color: var(--bs-success);
}
+
&.retrying > .dot {
background-color: var(--bs-danger);
}
@@ -37,32 +40,30 @@ $pixSize: math.div($fetcherWidth, 5);
.dot {
position: absolute;
margin: 0.1rem;
- width: ($pixSize - 0.1rem);
- height: ($pixSize - 0.1rem);
+ width: ($pix-size - 0.1rem);
+ height: ($pix-size - 0.1rem);
border-radius: 100%;
-
transition-property: opacity, background-color;
transition-duration: 0.2s;
transition-timing-function: ease-in-out;
-
background-color: var(--bs-white);
-
animation-duration: 0.9s;
animation-iteration-count: infinite;
-
opacity: 0;
+
&.visible {
opacity: 1;
}
$num: 0;
+
@for $i from 1 through 9 {
- @if $i%3 == 1 {
+ @if $i % 3 == 1 {
$num: 0;
}
- $tx: (($pixSize * 2) * $num);
- $ty: (($pixSize * 2) * (floor(math.div(($i - 1), 3))));
+ $tx: (($pix-size * 2) * $num);
+ $ty: (($pix-size * 2) * (math.floor(math.div(($i - 1), 3))));
&:nth-of-type(#{$i}) {
transform: translate($tx, $ty);
@@ -74,24 +75,31 @@ $pixSize: math.div($fetcherWidth, 5);
&:nth-of-type(1) {
animation-delay: (0.1s);
}
+
&:nth-of-type(2) {
animation-delay: (0.2s);
}
+
&:nth-of-type(3) {
animation-delay: (0.3s);
}
+
&:nth-of-type(6) {
animation-delay: (0.4s);
}
+
&:nth-of-type(9) {
animation-delay: (0.5s);
}
+
&:nth-of-type(8) {
animation-delay: (0.6s);
}
+
&:nth-of-type(7) {
animation-delay: (0.7s);
}
+
&:nth-of-type(4) {
animation-delay: (0.8s);
}
@@ -104,6 +112,7 @@ $pixSize: math.div($fetcherWidth, 5);
100% {
opacity: 0;
}
+
70% {
opacity: 1;
}
diff --git a/ui/src/Styles/Components/_FilterInput.scss b/ui/src/Styles/Components/_FilterInput.scss
index e52e46a52..db6f43f8d 100644
--- a/ui/src/Styles/Components/_FilterInput.scss
+++ b/ui/src/Styles/Components/_FilterInput.scss
@@ -12,14 +12,9 @@
.form-control.components-filterinput {
cursor: text;
height: auto;
-
box-shadow: none;
background-clip: unset;
-
- padding-top: 1px;
- padding-bottom: 1px;
- padding-left: 0.25rem;
- padding-right: 0.25rem;
+ padding: 1px 0.25rem;
}
input.components-filterinput-wrapper {
@@ -40,8 +35,9 @@ input.components-filterinput-wrapper {
.bg-focused {
@supports (backdrop-filter: blur(12px)) {
// TODO: why is this hardcoding colors?
- background-color: rgba(var(--karma-bg-focused-rgb, 81, 113, 132), 0.5);
+ background-color: rgb(var(--karma-bg-focused-rgb, 81, 113, 132), 0.5);
}
+
@supports not (backdrop-filter: blur(12px)) {
background-color: var(--karma-bg-focused);
}
diff --git a/ui/src/Styles/Components/_FilterInputLabel.scss b/ui/src/Styles/Components/_FilterInputLabel.scss
index 51deb401d..77d4c4c5e 100644
--- a/ui/src/Styles/Components/_FilterInputLabel.scss
+++ b/ui/src/Styles/Components/_FilterInputLabel.scss
@@ -55,24 +55,31 @@ button.components-label.btn {
&.btn-primary:hover {
background-color: var(--bs-primary);
}
+
&.btn-secondary:hover {
background-color: var(--bs-secondary);
}
+
&.btn-success:hover {
background-color: var(--bs-success);
}
+
&.btn-info:hover {
background-color: var(--bs-info);
}
+
&.btn-warning:hover {
background-color: var(--bs-warning);
}
+
&.btn-danger:hover {
background-color: var(--bs-danger);
}
+
&.btn-light:hover {
background-color: var(--bs-light);
}
+
&.btn-dark:hover {
background-color: var(--bs-dark);
}
diff --git a/ui/src/Styles/Components/_Flash.scss b/ui/src/Styles/Components/_Flash.scss
index 0ab874ec4..60929a6a0 100644
--- a/ui/src/Styles/Components/_Flash.scss
+++ b/ui/src/Styles/Components/_Flash.scss
@@ -11,15 +11,19 @@ $duration: 800ms;
0% {
opacity: 1;
}
+
25% {
opacity: 0;
}
+
50% {
opacity: 1;
}
+
75% {
opacity: 0;
}
+
100% {
opacity: 1;
}
diff --git a/ui/src/Styles/Components/_History.scss b/ui/src/Styles/Components/_History.scss
index e49b44b95..f13351c0b 100644
--- a/ui/src/Styles/Components/_History.scss
+++ b/ui/src/Styles/Components/_History.scss
@@ -1,6 +1,6 @@
.dropdown-menu.components-navbar-historymenu {
white-space: nowrap;
- overflow: overlay;
+ overflow: auto;
width: 100%;
}
@@ -16,17 +16,19 @@
border-left: 3px solid;
}
-@media screen and (min-width: 1px) and (max-width: 599px) {
+@media screen and (width >= 1px) and (width <= 599px) {
.dropdown-menu.components-navbar-historymenu {
max-width: 100%;
}
}
-@media screen and (min-width: 600px) and (max-width: 999px) {
+
+@media screen and (width >= 600px) and (width <= 999px) {
.dropdown-menu.components-navbar-historymenu {
max-width: 500px;
}
}
-@media screen and (min-width: 1000px) {
+
+@media screen and (width >= 1000px) {
.dropdown-menu.components-navbar-historymenu {
max-width: 600px;
}
@@ -36,6 +38,7 @@ button.btn.component-history-button {
margin-right: 0.5rem;
margin-bottom: 0.5rem;
}
+
button.btn.component-history-button:last-child {
margin-right: 0;
}
diff --git a/ui/src/Styles/Components/_LabelWithPercent.scss b/ui/src/Styles/Components/_LabelWithPercent.scss
index 2fcebfd0d..46d576390 100644
--- a/ui/src/Styles/Components/_LabelWithPercent.scss
+++ b/ui/src/Styles/Components/_LabelWithPercent.scss
@@ -1,14 +1,14 @@
-.components-labelWithPercent-percent {
+.components-label-with-percent-percent {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
-.components-labelWithPercent-progress.progress {
+.components-label-with-percent-progress.progress {
height: 2px;
margin-top: 2px;
background-color: var(--karma-progress-bg);
}
-.components-labelWithPercent-progress.progress > .progress-bar {
+.components-label-with-percent-progress.progress > .progress-bar {
height: 2px;
}
diff --git a/ui/src/Styles/Components/_ManagedSilence.scss b/ui/src/Styles/Components/_ManagedSilence.scss
index ace1928d4..ec919a918 100644
--- a/ui/src/Styles/Components/_ManagedSilence.scss
+++ b/ui/src/Styles/Components/_ManagedSilence.scss
@@ -16,6 +16,7 @@
.silence-matcher-equal {
background-color: #28c45c;
}
+
.silence-matcher-negative {
background-color: #e4372e;
}
diff --git a/ui/src/Styles/Components/_MountModal.scss b/ui/src/Styles/Components/_MountModal.scss
index afdfc50e5..f1a4e0b47 100644
--- a/ui/src/Styles/Components/_MountModal.scss
+++ b/ui/src/Styles/Components/_MountModal.scss
@@ -1,9 +1,7 @@
$duration-modal: 0.2s;
$move: -50px;
$opacity-modal: 0;
-
$duration-bg: 0.2s;
-
$easing-enter: ease-out;
$easing-exit: ease-in;
@@ -11,20 +9,24 @@ $easing-exit: ease-in;
will-change: opacity, transform;
transform: translateZ(0) scale(1);
}
+
.components-animation-modal-enter .modal-dialog {
opacity: $opacity-modal;
transform: translate(0, $move) scale(0.95);
}
+
.components-animation-modal-enter-active .modal-dialog {
opacity: 1;
transition: transform $duration-modal $easing-enter,
opacity $duration-modal $easing-enter;
transform: translate(0, 0) scale(1);
}
+
.components-animation-modal-exit .modal-dialog {
opacity: 1;
transform: translate(0, 0) scale(1);
}
+
.components-animation-modal-exit-active .modal-dialog {
opacity: $opacity-modal;
transform: translate(0, $move) scale(0.95);
@@ -36,23 +38,28 @@ $easing-exit: ease-in;
will-change: background-color;
transform: translateZ(0);
}
+
.components-animation-backdrop-enter {
- background-color: rgba(30, 30, 30, 0.01);
+ background-color: rgb(30 30 30 / 1%);
}
+
.components-animation-backdrop-enter-active {
- background-color: rgba(30, 30, 30, 0.8);
+ background-color: rgb(30 30 30 / 80%);
transition: opacity $duration-bg $easing-exit;
backdrop-filter: saturate(50%) blur(12px);
}
+
.components-animation-backdrop-enter-done {
- background-color: rgba(30, 30, 30, 0.8);
+ background-color: rgb(30 30 30 / 80%);
transition: opacity $duration-bg $easing-exit;
backdrop-filter: saturate(50%) blur(12px);
}
+
.components-animation-backdrop-exit {
- background-color: rgba(30, 30, 30, 0.8);
+ background-color: rgb(30 30 30 / 80%);
}
+
.components-animation-backdrop-exit-active {
- background-color: rgba(30, 30, 30, 0.01);
+ background-color: rgb(30 30 30 / 1%);
transition: opacity $duration-bg $easing-exit;
}
diff --git a/ui/src/Styles/Components/_NavBar.scss b/ui/src/Styles/Components/_NavBar.scss
index 246b4fe17..8d0ac2c3e 100644
--- a/ui/src/Styles/Components/_NavBar.scss
+++ b/ui/src/Styles/Components/_NavBar.scss
@@ -13,6 +13,7 @@
background-color: rgba($primary, 0.85);
backdrop-filter: saturate(50%) blur(12px);
}
+
@supports not (backdrop-filter: blur(12px)) {
background-color: rgba($primary, 0.95);
}
@@ -29,18 +30,17 @@
& .components-navbar-button {
&.navbar-brand {
- padding-top: 0.4rem;
- padding-bottom: 0.4rem;
- padding-left: 0.3rem;
- padding-right: 0.3rem;
+ padding: 0.4rem 0.3rem;
line-height: 1.8rem;
}
&:hover {
border-radius: 0.4rem;
+
@supports (backdrop-filter: blur(12px)) {
- background-color: rgba(var(--karma-bg-focused-rgb, 81, 113, 132), 0.5);
+ background-color: rgb(var(--karma-bg-focused-rgb, 81, 113, 132), 0.5);
}
+
@supports not (backdrop-filter: blur(12px)) {
background-color: var(--karma-bg-focused);
}
diff --git a/ui/src/Styles/Components/_NavBarSlide.scss b/ui/src/Styles/Components/_NavBarSlide.scss
index c9971c5be..91eaebb85 100644
--- a/ui/src/Styles/Components/_NavBarSlide.scss
+++ b/ui/src/Styles/Components/_NavBarSlide.scss
@@ -5,6 +5,7 @@ $duration: 0.5s;
opacity: 0.01;
transform: translateY(-100%);
}
+
.components-animation-navbar-appear-active,
.components-animation-navbar-enter-active {
opacity: 1;
@@ -16,6 +17,7 @@ $duration: 0.5s;
opacity: 1;
transform: translateY(0);
}
+
.components-animation-navbar-exit-active {
opacity: 0.01;
transform: translateY(-100%);
diff --git a/ui/src/Styles/Components/_Toast.scss b/ui/src/Styles/Components/_Toast.scss
index 565b5cdeb..43ef60edd 100644
--- a/ui/src/Styles/Components/_Toast.scss
+++ b/ui/src/Styles/Components/_Toast.scss
@@ -2,9 +2,7 @@
position: fixed;
bottom: 0.5rem;
right: 0.6rem;
-
z-index: 2500;
-
max-width: 500px;
code {
@@ -12,7 +10,7 @@
}
}
-@media screen and (max-width: 600px) {
+@media screen and (width <= 600px) {
.components-toast-container {
max-width: 100%;
bottom: 0;
@@ -22,9 +20,10 @@
.bg-toast {
@supports (backdrop-filter: blur(12px)) {
- background-color: rgba(var(--karma-toast-bg-rgb, 21, 21, 21), 0.85);
+ background-color: rgb(var(--karma-toast-bg-rgb, 21, 21, 21), 0.85);
backdrop-filter: saturate(50%) blur(12px);
}
+
@supports not (backdrop-filter: blur(12px)) {
background-color: var(--karma-toast-bg);
}
@@ -32,14 +31,15 @@
.toast-upgrade-progressbar {
animation-duration: 20s;
- animation-name: upgradeProgress;
+ animation-name: upgrade-progress;
animation-timing-function: linear;
}
-@keyframes upgradeProgress {
+@keyframes upgrade-progress {
0% {
width: 100%;
}
+
100% {
width: 0%;
}
diff --git a/ui/src/Styles/Components/_Tooltip.scss b/ui/src/Styles/Components/_Tooltip.scss
index f06838f44..64d51bef5 100644
--- a/ui/src/Styles/Components/_Tooltip.scss
+++ b/ui/src/Styles/Components/_Tooltip.scss
@@ -4,15 +4,18 @@
}
$duration: 0.2s;
+
.components-animation-tooltip-appear,
.components-animation-tooltip-enter {
opacity: 0;
}
+
.components-animation-tooltip-appear-active,
.components-animation-tooltip-enter-active {
opacity: 1;
transition: opacity $duration ease-in;
}
+
.components-animation-tooltip-appear-done,
.components-animation-tooltip-enter-done {
opacity: 1;
diff --git a/ui/src/Styles/Components/_WithClick.scss b/ui/src/Styles/Components/_WithClick.scss
index a9f61adb0..9a355ff74 100644
--- a/ui/src/Styles/Components/_WithClick.scss
+++ b/ui/src/Styles/Components/_WithClick.scss
@@ -4,7 +4,7 @@
overflow: hidden;
transform: translate3d(0, 0, 0);
- &:after {
+ &::after {
content: "";
display: block;
position: absolute;
@@ -25,7 +25,7 @@
transition: transform 0.4s, opacity 0.4s;
}
- &.with-click-dark:after {
+ &.with-click-dark::after {
background-image: radial-gradient(
circle,
var(--karma-with-click-dark) 10%,
@@ -33,7 +33,7 @@
);
}
- &.with-click-light:after {
+ &.with-click-light::after {
background-image: radial-gradient(
circle,
var(--karma-with-click-light) 10%,
@@ -41,7 +41,7 @@
);
}
- &:active:after {
+ &:active::after {
transform: scale(0, 0);
opacity: 0.2;
transition: 0s;
diff --git a/ui/src/Styles/Fonts.scss b/ui/src/Styles/Fonts.scss
index e48c4439c..71cfc94bd 100644
--- a/ui/src/Styles/Fonts.scss
+++ b/ui/src/Styles/Fonts.scss
@@ -5,13 +5,13 @@ $web-font-path: false;
// Default for Bootstrap is 700 and it's a bit too thick for Open Sans
$font-weight-bold: 600;
+
// Use normal font weight for badges
$badge-font-weight: 400;
// this is vaniall flatly but Lato was replaced by Open Sans
// the rest was kept for fallback used by "font-display: swap;"
-$font-family-sans-serif: "Open Sans", -apple-system, BlinkMacSystemFont,
- "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
+$font-family-sans-serif: "Open Sans", -apple-system, blinkmacsystemfont,
+ "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif, "Apple Color Emoji",
"Segoe UI Emoji", "Segoe UI Symbol";
-
$font-family-base: $font-family-sans-serif;
diff --git a/ui/src/Styles/Theme.scss b/ui/src/Styles/Theme.scss
index e2b69e5a1..5369d82d6 100644
--- a/ui/src/Styles/Theme.scss
+++ b/ui/src/Styles/Theme.scss
@@ -1,3 +1,4 @@
+@use "sass:color";
@use "bootswatch/dist/flatly/variables" as flatly;
@use "bootswatch/dist/darkly/variables" as darkly;
@@ -5,25 +6,21 @@ $lead-font-weight: 400;
// custom "dark" color, little less dark than flatly
$blue: #455a64;
+
// default is ~0.97rem
$font-size-base: 1rem;
// make dark darker, default it's $gray-700
$dark: #3b4247;
-
$enable-shadows: true;
$enable-dark-mode: false;
-
$btn-box-shadow: 0;
$btn-focus-box-shadow: 0;
$btn-active-box-shadow: 0;
-
$tooltip-max-width: 400px;
-
$body-bg: #455a64;
@import "./Fonts";
-
@import "bootstrap/scss/functions";
// Import flatly (light) variables as base
@@ -31,7 +28,6 @@ $body-bg: #455a64;
// make links light gray by default instead of green
$link-color: $gray-700;
-
$navbar-dark-brand-color: $navbar-dark-color;
$navbar-dark-brand-hover-color: $gray-200;
$navbar-dark-hover-color: $gray-200;
@@ -49,21 +45,15 @@ $pagination-hover-bg: $gray-700;
$pagination-active-bg: $pagination-hover-bg;
$pagination-disabled-color: $white;
$pagination-disabled-bg: $gray-300;
-
-$progress-bg: darken($light, 10%);
-
+$progress-bg: color.adjust($light, $lightness: -10%);
$accordion-active-bg: $gray-100;
$accordion-button-bg: $gray-100;
$accordion-button-active-bg: $gray-100;
$accordion-border-color: $gray-300;
-
$modal-header-border-color: $gray-300;
-
$table-bg: transparent;
$table-accent-bg: transparent;
-
$card-cap-bg: inherit;
-
$kbd-color: $white;
$kbd-bg: $dark;
@@ -96,6 +86,7 @@ $body-secondary-color: $gray-600;
@import "bootstrap/scss/navbar";
@import "bootstrap/scss/card";
@import "bootstrap/scss/accordion";
+
// @import "bootstrap/scss/breadcrumb"; // unused
@import "bootstrap/scss/pagination";
@import "bootstrap/scss/badge";
@@ -107,8 +98,10 @@ $body-secondary-color: $gray-600;
@import "bootstrap/scss/modal";
@import "bootstrap/scss/tooltip";
@import "bootstrap/scss/popover";
+
// @import "bootstrap/scss/carousel"; // unused
@import "bootstrap/scss/spinners";
+
// @import "bootstrap/scss/offcanvas"; // unused
// @import "bootstrap/scss/placeholders"; // unused
@@ -122,25 +115,25 @@ $body-secondary-color: $gray-600;
// Light color mode — flatly colors
[data-bs-theme="light"] {
background-color: #455a64;
+
--bs-body-bg: #455a64;
--bs-body-bg-rgb: 69, 90, 100;
-
--karma-alert-bg: #{$white};
- --karma-alert-history-inactive: #{lighten($light, 1%)};
+ --karma-alert-history-inactive: #{color.adjust($light, $lightness: 1%)};
--karma-alertgroup-body-bg: #{$white};
--karma-alertgroup-footer-bg: #{$gray-100};
--karma-silence-id: #{$dark};
--karma-silence-color: #{$dark};
- --karma-silence-bg: #{lighten($gray-200, 4%)};
+ --karma-silence-bg: #{color.adjust($gray-200, $lightness: 4%)};
--karma-silence-border: #{$gray-700};
--karma-silence-comment-color: #{$gray-800};
--karma-filter-input-hoover-bg: #{$white};
--karma-filter-input-hoover-color: #{$black};
--karma-placeholder-color: #{$secondary};
--karma-filterinput-border: #{$navbar-dark-color};
- --karma-grid-swimlane-bg: #{lighten($dark, 2%)};
- --karma-bg-focused: #{lighten($blue, 5%)};
- --karma-bg-focused-rgb: #{red(lighten($blue, 5%))}, #{green(lighten($blue, 5%))}, #{blue(lighten($blue, 5%))};
+ --karma-grid-swimlane-bg: #{color.adjust($dark, $lightness: 2%)};
+ --karma-bg-focused: #{color.adjust($blue, $lightness: 5%)};
+ --karma-bg-focused-rgb: #{color.red(color.adjust($blue, $lightness: 5%))}, #{color.green(color.adjust($blue, $lightness: 5%))}, #{color.blue(color.adjust($blue, $lightness: 5%))};
--karma-annotation-link-border: #{$light};
--karma-components-date-range-sub-color: #{$black};
--karma-input-range-track-background: #{$gray-400};
@@ -151,17 +144,17 @@ $body-secondary-color: $gray-600;
--karma-with-click-light: #{$black};
--karma-accordion-border-color: #{$gray-300};
--karma-link-color: #{$gray-700};
- --karma-toast-bg: #{darken($dark, 5%)};
- --karma-toast-bg-rgb: #{red(darken($dark, 5%))}, #{green(darken($dark, 5%))}, #{blue(darken($dark, 5%))};
- --karma-progress-bg: #{darken($light, 10%)};
- --karma-label-primary-border: #{lighten($primary, 2%)};
- --karma-label-secondary-border: #{darken($secondary, 1%)};
- --karma-label-secondary-bg: #{darken($secondary, 2%)};
- --karma-label-success-border: #{darken($success, 2%)};
- --karma-label-danger-border: #{lighten($danger, 2%)};
- --karma-label-warning-border: #{lighten($warning, 3%)};
- --karma-label-info-border: #{darken($info, 2%)};
- --karma-label-dark-border: #{darken($dark, 2%)};
+ --karma-toast-bg: #{color.adjust($dark, $lightness: -5%)};
+ --karma-toast-bg-rgb: #{color.red(color.adjust($dark, $lightness: -5%))}, #{color.green(color.adjust($dark, $lightness: -5%))}, #{color.blue(color.adjust($dark, $lightness: -5%))};
+ --karma-progress-bg: #{color.adjust($light, $lightness: -10%)};
+ --karma-label-primary-border: #{color.adjust($primary, $lightness: 2%)};
+ --karma-label-secondary-border: #{color.adjust($secondary, $lightness: -1%)};
+ --karma-label-secondary-bg: #{color.adjust($secondary, $lightness: -2%)};
+ --karma-label-success-border: #{color.adjust($success, $lightness: -2%)};
+ --karma-label-danger-border: #{color.adjust($danger, $lightness: 2%)};
+ --karma-label-warning-border: #{color.adjust($warning, $lightness: 3%)};
+ --karma-label-info-border: #{color.adjust($info, $lightness: -2%)};
+ --karma-label-dark-border: #{color.adjust($dark, $lightness: -2%)};
.modal {
--bs-modal-bg: #{$white};
@@ -221,51 +214,50 @@ $body-secondary-color: $gray-600;
[data-bs-theme="dark"] {
background-color: #455a64;
color: #{darkly.$body-color};
+
--bs-body-bg: #455a64;
--bs-body-bg-rgb: 69, 90, 100;
-
--bs-body-color: #{darkly.$body-color};
--bs-emphasis-color: #{darkly.$white};
--bs-secondary-color: #{rgba(darkly.$gray-300, 0.75)};
--bs-secondary-bg: #{darkly.$secondary};
--bs-tertiary-color: #{rgba(darkly.$gray-300, 0.5)};
- --bs-tertiary-bg: #{darken(darkly.$gray-800, 2%)};
+ --bs-tertiary-bg: #{color.adjust(darkly.$gray-800, $lightness: -2%)};
--bs-primary: #455a64;
--bs-secondary: #{darkly.$secondary};
--bs-success: #{darkly.$success};
--bs-info: #{darkly.$info};
--bs-warning: #{darkly.$warning};
--bs-danger: #{darkly.$danger};
- --bs-light: #{lighten(darkly.$gray-800, 5%)};
- --bs-dark: #{darken(darkly.$dark, 4%)};
+ --bs-light: #{color.adjust(darkly.$gray-800, $lightness: 5%)};
+ --bs-dark: #{color.adjust(darkly.$dark, $lightness: -4%)};
--bs-primary-rgb: 69, 90, 100;
- --bs-secondary-rgb: #{red(darkly.$secondary)}, #{green(darkly.$secondary)}, #{blue(darkly.$secondary)};
- --bs-success-rgb: #{red(darkly.$success)}, #{green(darkly.$success)}, #{blue(darkly.$success)};
- --bs-info-rgb: #{red(darkly.$info)}, #{green(darkly.$info)}, #{blue(darkly.$info)};
- --bs-warning-rgb: #{red(darkly.$warning)}, #{green(darkly.$warning)}, #{blue(darkly.$warning)};
- --bs-danger-rgb: #{red(darkly.$danger)}, #{green(darkly.$danger)}, #{blue(darkly.$danger)};
- --bs-light-rgb: #{red(lighten(darkly.$gray-800, 5%))}, #{green(lighten(darkly.$gray-800, 5%))}, #{blue(lighten(darkly.$gray-800, 5%))};
- --bs-dark-rgb: #{red(darken(darkly.$dark, 4%))}, #{green(darken(darkly.$dark, 4%))}, #{blue(darken(darkly.$dark, 4%))};
+ --bs-secondary-rgb: #{color.red(darkly.$secondary)}, #{color.green(darkly.$secondary)}, #{color.blue(darkly.$secondary)};
+ --bs-success-rgb: #{color.red(darkly.$success)}, #{color.green(darkly.$success)}, #{color.blue(darkly.$success)};
+ --bs-info-rgb: #{color.red(darkly.$info)}, #{color.green(darkly.$info)}, #{color.blue(darkly.$info)};
+ --bs-warning-rgb: #{color.red(darkly.$warning)}, #{color.green(darkly.$warning)}, #{color.blue(darkly.$warning)};
+ --bs-danger-rgb: #{color.red(darkly.$danger)}, #{color.green(darkly.$danger)}, #{color.blue(darkly.$danger)};
+ --bs-light-rgb: #{color.red(color.adjust(darkly.$gray-800, $lightness: 5%))}, #{color.green(color.adjust(darkly.$gray-800, $lightness: 5%))}, #{color.blue(color.adjust(darkly.$gray-800, $lightness: 5%))};
+ --bs-dark-rgb: #{color.red(color.adjust(darkly.$dark, $lightness: -4%))}, #{color.green(color.adjust(darkly.$dark, $lightness: -4%))}, #{color.blue(color.adjust(darkly.$dark, $lightness: -4%))};
--bs-link-color: #{darkly.$gray-400};
- --bs-link-hover-color: #{lighten(darkly.$gray-400, 10%)};
+ --bs-link-hover-color: #{color.adjust(darkly.$gray-400, $lightness: 10%)};
--bs-border-color: #{darkly.$secondary};
-
--karma-alert-bg: #{darkly.$gray-800};
- --karma-alert-history-inactive: #{lighten(darkly.$gray-700, 2%)};
- --karma-alertgroup-body-bg: #{lighten(darkly.$gray-700, 5%)};
- --karma-alertgroup-footer-bg: #{lighten(darkly.$gray-700, 2%)};
+ --karma-alert-history-inactive: #{color.adjust(darkly.$gray-700, $lightness: 2%)};
+ --karma-alertgroup-body-bg: #{color.adjust(darkly.$gray-700, $lightness: 5%)};
+ --karma-alertgroup-footer-bg: #{color.adjust(darkly.$gray-700, $lightness: 2%)};
--karma-silence-id: #{darkly.$white};
--karma-silence-color: #{darkly.$white};
- --karma-silence-bg: #{lighten(darkly.$gray-900, 4%)};
+ --karma-silence-bg: #{color.adjust(darkly.$gray-900, $lightness: 4%)};
--karma-silence-border: #{darkly.$black};
--karma-silence-comment-color: #{darkly.$gray-500};
--karma-filter-input-hoover-bg: #{darkly.$gray-700};
--karma-filter-input-hoover-color: #{darkly.$white};
--karma-placeholder-color: #{darkly.$gray-600};
--karma-filterinput-border: #{darkly.$navbar-dark-color};
- --karma-grid-swimlane-bg: #{lighten(darken(darkly.$dark, 4%), 2%)};
- --karma-bg-focused: #{darken(#455a64, 5%)};
- --karma-bg-focused-rgb: #{red(darken(#455a64, 5%))}, #{green(darken(#455a64, 5%))}, #{blue(darken(#455a64, 5%))};
+ --karma-grid-swimlane-bg: #{color.adjust(color.adjust(darkly.$dark, $lightness: -4%), $lightness: 2%)};
+ --karma-bg-focused: #{color.adjust(#455a64, $lightness: -5%)};
+ --karma-bg-focused-rgb: #{color.red(color.adjust(#455a64, $lightness: -5%))}, #{color.green(color.adjust(#455a64, $lightness: -5%))}, #{color.blue(color.adjust(#455a64, $lightness: -5%))};
--karma-annotation-link-border: #{darkly.$secondary};
--karma-components-date-range-sub-color: #{darkly.$white};
--karma-input-range-track-background: #{darkly.$secondary};
@@ -274,19 +266,19 @@ $body-secondary-color: $gray-600;
--karma-with-click-default: #{darkly.$white};
--karma-with-click-dark: #{darkly.$white};
--karma-with-click-light: #{darkly.$dark};
- --karma-accordion-border-color: #{lighten(darkly.$gray-700, 5%)};
+ --karma-accordion-border-color: #{color.adjust(darkly.$gray-700, $lightness: 5%)};
--karma-link-color: #{darkly.$gray-400};
- --karma-toast-bg: #{darken(darken(darkly.$dark, 4%), 5%)};
- --karma-toast-bg-rgb: #{red(darken(darken(darkly.$dark, 4%), 5%))}, #{green(darken(darken(darkly.$dark, 4%), 5%))}, #{blue(darken(darken(darkly.$dark, 4%), 5%))};
+ --karma-toast-bg: #{color.adjust(color.adjust(darkly.$dark, $lightness: -4%), $lightness: -5%)};
+ --karma-toast-bg-rgb: #{color.red(color.adjust(color.adjust(darkly.$dark, $lightness: -4%), $lightness: -5%))}, #{color.green(color.adjust(color.adjust(darkly.$dark, $lightness: -4%), $lightness: -5%))}, #{color.blue(color.adjust(color.adjust(darkly.$dark, $lightness: -4%), $lightness: -5%))};
--karma-progress-bg: #{darkly.$black};
- --karma-label-primary-border: #{lighten(darkly.$primary, 2%)};
- --karma-label-secondary-border: #{darken(darkly.$secondary, 1%)};
- --karma-label-secondary-bg: #{darken(darkly.$secondary, 2%)};
- --karma-label-success-border: #{darken(darkly.$success, 2%)};
- --karma-label-danger-border: #{lighten(darkly.$danger, 2%)};
- --karma-label-warning-border: #{lighten(darkly.$warning, 3%)};
- --karma-label-info-border: #{darken(darkly.$info, 2%)};
- --karma-label-dark-border: #{darken(darkly.$dark, 2%)};
+ --karma-label-primary-border: #{color.adjust(darkly.$primary, $lightness: 2%)};
+ --karma-label-secondary-border: #{color.adjust(darkly.$secondary, $lightness: -1%)};
+ --karma-label-secondary-bg: #{color.adjust(darkly.$secondary, $lightness: -2%)};
+ --karma-label-success-border: #{color.adjust(darkly.$success, $lightness: -2%)};
+ --karma-label-danger-border: #{color.adjust(darkly.$danger, $lightness: 2%)};
+ --karma-label-warning-border: #{color.adjust(darkly.$warning, $lightness: 3%)};
+ --karma-label-info-border: #{color.adjust(darkly.$info, $lightness: -2%)};
+ --karma-label-dark-border: #{color.adjust(darkly.$dark, $lightness: -2%)};
// Component overrides for dark theme
.badge,
@@ -298,6 +290,7 @@ $body-secondary-color: $gray-600;
@supports (backdrop-filter: blur(12px)) {
background-color: rgba(#455a64, 0.85);
}
+
@supports not (backdrop-filter: blur(12px)) {
background-color: rgba(#455a64, 0.95);
}
@@ -353,7 +346,7 @@ $body-secondary-color: $gray-600;
}
.dropdown-menu {
- --bs-dropdown-bg: #{darken(darkly.$gray-800, 2%)};
+ --bs-dropdown-bg: #{color.adjust(darkly.$gray-800, $lightness: -2%)};
--bs-dropdown-border-color: #{darkly.$gray-700};
--bs-dropdown-divider-bg: #{darkly.$gray-700};
--bs-dropdown-link-color: #{darkly.$white};
@@ -369,10 +362,10 @@ $body-secondary-color: $gray-600;
.btn-secondary {
--bs-btn-bg: #{darkly.$secondary};
--bs-btn-border-color: #{darkly.$secondary};
- --bs-btn-hover-bg: #{lighten(darkly.$secondary, 5%)};
- --bs-btn-hover-border-color: #{lighten(darkly.$secondary, 5%)};
- --bs-btn-active-bg: #{lighten(darkly.$secondary, 8%)};
- --bs-btn-active-border-color: #{lighten(darkly.$secondary, 8%)};
+ --bs-btn-hover-bg: #{color.adjust(darkly.$secondary, $lightness: 5%)};
+ --bs-btn-hover-border-color: #{color.adjust(darkly.$secondary, $lightness: 5%)};
+ --bs-btn-active-bg: #{color.adjust(darkly.$secondary, $lightness: 8%)};
+ --bs-btn-active-border-color: #{color.adjust(darkly.$secondary, $lightness: 8%)};
--bs-btn-disabled-bg: #{darkly.$secondary};
--bs-btn-disabled-border-color: #{darkly.$secondary};
}
@@ -409,7 +402,7 @@ $body-secondary-color: $gray-600;
--bs-accordion-bg: #{darkly.$gray-800};
--bs-accordion-btn-bg: #{darkly.$gray-700};
--bs-accordion-active-bg: #{darkly.$gray-700};
- --bs-accordion-border-color: #{lighten(darkly.$gray-700, 5%)};
+ --bs-accordion-border-color: #{color.adjust(darkly.$gray-700, $lightness: 5%)};
--bs-accordion-btn-color: #{darkly.$white};
}
@@ -451,7 +444,7 @@ $body-secondary-color: $gray-600;
--bs-pagination-hover-color: #{darkly.$white};
--bs-pagination-hover-bg: #455a64;
--bs-pagination-active-bg: #455a64;
- --bs-pagination-border-color: #{darken(darkly.$dark, 4%)};
+ --bs-pagination-border-color: #{color.adjust(darkly.$dark, $lightness: -4%)};
--bs-pagination-disabled-color: #{darkly.$gray-600};
--bs-pagination-disabled-bg: #{darkly.$gray-700};
}
@@ -504,6 +497,7 @@ $body-secondary-color: $gray-600;
// }
}
+/* stylelint-disable-next-line no-invalid-position-at-import-rule */
@import "./Components";
a {
diff --git a/ui/stylelint.config.mjs b/ui/stylelint.config.mjs
new file mode 100644
index 000000000..7b625c9db
--- /dev/null
+++ b/ui/stylelint.config.mjs
@@ -0,0 +1,4 @@
+/** @type {import("stylelint").Config} */
+export default {
+ "extends": ["stylelint-config-standard-scss"]
+};
|