github/karma
1
0
Fork 0
mirror of https://github.com/prymitive/karma synced 2026-05-21 04:33:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(ci): add stylelint

Browse Source
This commit is contained in:
Lukasz Mierzwa
2026-03-23 10:20:37 +00:00
committed by Łukasz Mierzwa
parent b5d590bcfc
commit 6444cd05ec
35 changed files with 1665 additions and 202 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
ui/src/Components/Labels/LabelWithPercent/__snapshots__/index.test.tsx.snap
View File

@@ -9,7 +9,7 @@ exports[`<LabelWithPercent /> matches snapshot with isActive=true 1`] = `
class="components-label badge bg-default components-label-dark components-label-with-hover mb-0 ps-0 text-start"
>
<span
class="me-1 px-1 bg-primary text-white components-labelWithPercent-percent"
class="me-1 px-1 bg-primary text-white components-label-with-percent-percent"
>
25
</span>
@@ -36,7 +36,7 @@ exports[`<LabelWithPercent /> matches snapshot with isActive=true 1`] = `
</svg>
</span>
<div
class="progress components-labelWithPercent-progress me-1"
class="progress components-label-with-percent-progress me-1"
>
<div
aria-valuemax="100"
@@ -60,7 +60,7 @@ exports[`<LabelWithPercent /> matches snapshot with offset=0 1`] = `
class="components-label badge bg-default components-label-dark components-label-with-hover mb-0 ps-0 text-start"
>
<span
class="me-1 px-1 bg-primary text-white components-labelWithPercent-percent"
class="me-1 px-1 bg-primary text-white components-label-with-percent-percent"
>
25
</span>
@@ -73,7 +73,7 @@ exports[`<LabelWithPercent /> matches snapshot with offset=0 1`] = `
</span>
</span>
<div
class="progress components-labelWithPercent-progress me-1"
class="progress components-label-with-percent-progress me-1"
>
<div
aria-valuemax="100"
@@ -97,7 +97,7 @@ exports[`<LabelWithPercent /> matches snapshot with offset=25 1`] = `
class="components-label badge bg-default components-label-dark components-label-with-hover mb-0 ps-0 text-start"
>
<span
class="me-1 px-1 bg-primary text-white components-labelWithPercent-percent"
class="me-1 px-1 bg-primary text-white components-label-with-percent-percent"
>
25
</span>
@@ -110,7 +110,7 @@ exports[`<LabelWithPercent /> matches snapshot with offset=25 1`] = `
</span>
</span>
<div
class="progress components-labelWithPercent-progress me-1"
class="progress components-label-with-percent-progress me-1"
>
<div
aria-valuemax="100"

4
ui/src/Components/Labels/LabelWithPercent/index.tsx
View File

@@ -56,7 +56,7 @@ const LabelWithPercent: FC<{
return (
<div className="d-inline-block mw-100">
<span className={cs.className} style={cs.style}>
<span className="me-1 px-1 bg-primary text-white components-labelWithPercent-percent">
<span className="me-1 px-1 bg-primary text-white components-label-with-percent-percent">
{hits}
</span>
<span onClick={handleClick}>
@@ -71,7 +71,7 @@ const LabelWithPercent: FC<{
/>
) : null}
</span>
<div className="progress components-labelWithPercent-progress me-1">
<div className="progress components-label-with-percent-progress me-1">
{offset === 0 ? null : (
<div
className="progress-bar bg-transparent"

2
ui/src/Components/OverviewModal/OverviewModalContent.tsx
View File

@@ -25,7 +25,7 @@ const TableRows: FC<{
<tr key={nameStats.name}>
<td width="25%" className="text-nowrap mw-100 p-1">
<span className="badge bg-light components-label mx-0 mt-0 mb-auto ps-0 text-start">
<span className="bg-primary text-white me-1 px-1 components-labelWithPercent-percent">
<span className="bg-primary text-white me-1 px-1 components-label-with-percent-percent">
{nameStats.hits}
</span>
{nameStats.name}

58
ui/src/Components/OverviewModal/__snapshots__/OverviewModalContent.test.tsx.snap
View File

@@ -35,7 +35,7 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
class="badge bg-light components-label mx-0 mt-0 mb-auto ps-0 text-start"
>
<span
class="bg-primary text-white me-1 px-1 components-labelWithPercent-percent"
class="bg-primary text-white me-1 px-1 components-label-with-percent-percent"
>
16
</span>
@@ -53,7 +53,7 @@ exports[`<OverviewModalContent /> 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"
>
<span
class="me-1 px-1 bg-primary text-white components-labelWithPercent-percent"
class="me-1 px-1 bg-primary text-white components-label-with-percent-percent"
>
8
</span>
@@ -66,7 +66,7 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
</span>
</span>
<div
class="progress components-labelWithPercent-progress me-1"
class="progress components-label-with-percent-progress me-1"
>
<div
aria-valuemax="100"
@@ -85,7 +85,7 @@ exports[`<OverviewModalContent /> 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"
>
<span
class="me-1 px-1 bg-primary text-white components-labelWithPercent-percent"
class="me-1 px-1 bg-primary text-white components-label-with-percent-percent"
>
4
</span>
@@ -98,7 +98,7 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
</span>
</span>
<div
class="progress components-labelWithPercent-progress me-1"
class="progress components-label-with-percent-progress me-1"
>
<div
aria-valuemax="100"
@@ -125,7 +125,7 @@ exports[`<OverviewModalContent /> 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"
>
<span
class="me-1 px-1 bg-primary text-white components-labelWithPercent-percent"
class="me-1 px-1 bg-primary text-white components-label-with-percent-percent"
>
4
</span>
@@ -138,7 +138,7 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
</span>
</span>
<div
class="progress components-labelWithPercent-progress me-1"
class="progress components-label-with-percent-progress me-1"
>
<div
aria-valuemax="100"
@@ -169,7 +169,7 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
class="badge bg-light components-label mx-0 mt-0 mb-auto ps-0 text-start"
>
<span
class="bg-primary text-white me-1 px-1 components-labelWithPercent-percent"
class="bg-primary text-white me-1 px-1 components-label-with-percent-percent"
>
20
</span>
@@ -187,7 +187,7 @@ exports[`<OverviewModalContent /> 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"
>
<span
class="me-1 px-1 bg-primary text-white components-labelWithPercent-percent"
class="me-1 px-1 bg-primary text-white components-label-with-percent-percent"
>
1
</span>
@@ -200,7 +200,7 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
</span>
</span>
<div
class="progress components-labelWithPercent-progress me-1"
class="progress components-label-with-percent-progress me-1"
>
<div
aria-valuemax="100"
@@ -219,7 +219,7 @@ exports[`<OverviewModalContent /> 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"
>
<span
class="me-1 px-1 bg-primary text-white components-labelWithPercent-percent"
class="me-1 px-1 bg-primary text-white components-label-with-percent-percent"
>
1
</span>
@@ -232,7 +232,7 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
</span>
</span>
<div
class="progress components-labelWithPercent-progress me-1"
class="progress components-label-with-percent-progress me-1"
>
<div
aria-valuemax="100"
@@ -259,7 +259,7 @@ exports[`<OverviewModalContent /> 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"
>
<span
class="me-1 px-1 bg-primary text-white components-labelWithPercent-percent"
class="me-1 px-1 bg-primary text-white components-label-with-percent-percent"
>
1
</span>
@@ -272,7 +272,7 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
</span>
</span>
<div
class="progress components-labelWithPercent-progress me-1"
class="progress components-label-with-percent-progress me-1"
>
<div
aria-valuemax="100"
@@ -299,7 +299,7 @@ exports[`<OverviewModalContent /> 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"
>
<span
class="me-1 px-1 bg-primary text-white components-labelWithPercent-percent"
class="me-1 px-1 bg-primary text-white components-label-with-percent-percent"
>
1
</span>
@@ -312,7 +312,7 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
</span>
</span>
<div
class="progress components-labelWithPercent-progress me-1"
class="progress components-label-with-percent-progress me-1"
>
<div
aria-valuemax="100"
@@ -339,7 +339,7 @@ exports[`<OverviewModalContent /> 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"
>
<span
class="me-1 px-1 bg-primary text-white components-labelWithPercent-percent"
class="me-1 px-1 bg-primary text-white components-label-with-percent-percent"
>
1
</span>
@@ -352,7 +352,7 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
</span>
</span>
<div
class="progress components-labelWithPercent-progress me-1"
class="progress components-label-with-percent-progress me-1"
>
<div
aria-valuemax="100"
@@ -379,7 +379,7 @@ exports[`<OverviewModalContent /> 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"
>
<span
class="me-1 px-1 bg-primary text-white components-labelWithPercent-percent"
class="me-1 px-1 bg-primary text-white components-label-with-percent-percent"
>
1
</span>
@@ -392,7 +392,7 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
</span>
</span>
<div
class="progress components-labelWithPercent-progress me-1"
class="progress components-label-with-percent-progress me-1"
>
<div
aria-valuemax="100"
@@ -419,7 +419,7 @@ exports[`<OverviewModalContent /> 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"
>
<span
class="me-1 px-1 bg-primary text-white components-labelWithPercent-percent"
class="me-1 px-1 bg-primary text-white components-label-with-percent-percent"
>
1
</span>
@@ -432,7 +432,7 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
</span>
</span>
<div
class="progress components-labelWithPercent-progress me-1"
class="progress components-label-with-percent-progress me-1"
>
<div
aria-valuemax="100"
@@ -459,7 +459,7 @@ exports[`<OverviewModalContent /> 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"
>
<span
class="me-1 px-1 bg-primary text-white components-labelWithPercent-percent"
class="me-1 px-1 bg-primary text-white components-label-with-percent-percent"
>
1
</span>
@@ -472,7 +472,7 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
</span>
</span>
<div
class="progress components-labelWithPercent-progress me-1"
class="progress components-label-with-percent-progress me-1"
>
<div
aria-valuemax="100"
@@ -499,7 +499,7 @@ exports[`<OverviewModalContent /> 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"
>
<span
class="me-1 px-1 bg-primary text-white components-labelWithPercent-percent"
class="me-1 px-1 bg-primary text-white components-label-with-percent-percent"
>
1
</span>
@@ -512,7 +512,7 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
</span>
</span>
<div
class="progress components-labelWithPercent-progress me-1"
class="progress components-label-with-percent-progress me-1"
>
<div
aria-valuemax="100"
@@ -548,7 +548,7 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
class="badge bg-light components-label mx-0 mt-0 mb-auto ps-0 text-start"
>
<span
class="bg-primary text-white me-1 px-1 components-labelWithPercent-percent"
class="bg-primary text-white me-1 px-1 components-label-with-percent-percent"
>
5
</span>
@@ -566,7 +566,7 @@ exports[`<OverviewModalContent /> 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"
>
<span
class="me-1 px-1 bg-primary text-white components-labelWithPercent-percent"
class="me-1 px-1 bg-primary text-white components-label-with-percent-percent"
>
5
</span>
@@ -579,7 +579,7 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
</span>
</span>
<div
class="progress components-labelWithPercent-progress me-1"
class="progress components-label-with-percent-progress me-1"
>
<div
aria-valuemax="100"

3
ui/src/Styles/App.scss
View File

@@ -1,6 +1,7 @@
.cursor-pointer {
cursor: pointer;
}
.cursor-text {
cursor: text;
}
@@ -19,7 +20,7 @@
font-size: 2.5rem;
}
@media (min-width: 768px) {
@media (width >= 768px) {
.mw-md-25 {
max-width: 25%;
}

3
ui/src/Styles/Components/_AlertGrid.scss
View File

@@ -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;
}

13
ui/src/Styles/Components/_AlertHistory.scss
View File

@@ -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;
}

2
ui/src/Styles/Components/_Annotation.scss
View File

@@ -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;
}

31
ui/src/Styles/Components/_BaseLabel.scss
View File

@@ -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;
}

5
ui/src/Styles/Components/_DateTimeSelect.scss
View File

@@ -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);
}

2
ui/src/Styles/Components/_DropdownSlide.scss
View File

@@ -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);

3
ui/src/Styles/Components/_Fade.scss
View File

@@ -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;
}

2
ui/src/Styles/Components/_FadeAlertGroup.scss
View File

@@ -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;

39
ui/src/Styles/Components/_Fetcher.scss
View File

@@ -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;
}

10
ui/src/Styles/Components/_FilterInput.scss
View File

@@ -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);
}

7
ui/src/Styles/Components/_FilterInputLabel.scss
View File

@@ -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);
}

4
ui/src/Styles/Components/_Flash.scss
View File

@@ -11,15 +11,19 @@ $duration: 800ms;
0% {
opacity: 1;
}
25% {
opacity: 0;
}
50% {
opacity: 1;
}
75% {
opacity: 0;
}
100% {
opacity: 1;
}

11
ui/src/Styles/Components/_History.scss
View File

@@ -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;
}

6
ui/src/Styles/Components/_LabelWithPercent.scss
View File

@@ -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;
}

1
ui/src/Styles/Components/_ManagedSilence.scss
View File

@@ -16,6 +16,7 @@
.silence-matcher-equal {
background-color: #28c45c;
}
.silence-matcher-negative {
background-color: #e4372e;
}

21
ui/src/Styles/Components/_MountModal.scss
View File

@@ -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;
}

10
ui/src/Styles/Components/_NavBar.scss
View File

@@ -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);
}

2
ui/src/Styles/Components/_NavBarSlide.scss
View File

@@ -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%);

12
ui/src/Styles/Components/_Toast.scss
View File

@@ -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%;
}

3
ui/src/Styles/Components/_Tooltip.scss
View File

@@ -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;

8
ui/src/Styles/Components/_WithClick.scss
View File

@@ -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;

6
ui/src/Styles/Fonts.scss
View File

@@ -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;

130
ui/src/Styles/Theme.scss
View File

@@ -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 {