github/karma
1
0
Fork 0
mirror of https://github.com/prymitive/karma synced 2026-05-05 03:16:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore(ui): tweak ui css

Browse Source
This commit is contained in:
Łukasz Mierzwa
2021-04-29 16:40:14 +01:00
committed by Łukasz Mierzwa
parent 8cb4503b93
commit df18e23da4
6 changed files with 23 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -38,7 +38,12 @@ input.components-filterinput-wrapper {
}
.bg-focused {
background-color: $bg-focused;
@supports (backdrop-filter: blur(1px)) {
background-color: rgba($bg-focused, 0.5);
}
@supports not (backdrop-filter: blur(1px)) {
background-color: $bg-focused;
}
}
.input-group.components-filterinput-outer {

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

@@ -12,7 +12,7 @@
}
.modal-content-blur {
filter: blur(2px);
filter: saturate(50%) blur(6px);
}
@include media-breakpoint-up(lg) {
@@ -26,7 +26,3 @@
max-width: $modal-xl + 10;
}
}
.modal-backdrop {
backdrop-filter: blur(2px);
}

15
ui/src/Styles/Components/MountModal.scss
View File

@@ -3,7 +3,6 @@ $move: -50px;
$opacity-modal: 0;
$duration-bg: 0.2s;
$opacity-bg: 0.8;
$easing-enter: ease-out;
$easing-exit: ease-in;
@@ -34,24 +33,26 @@ $easing-exit: ease-in;
}
.components-animation-backdrop {
will-change: opacity;
will-change: background-color;
transform: translateZ(0);
}
.components-animation-backdrop-enter {
opacity: 0.01;
background-color: rgba(30, 30, 30, 0.01);
}
.components-animation-backdrop-enter-active {
opacity: $opacity-bg;
background-color: rgba(30, 30, 30, 0.8);
transition: opacity $duration-bg $easing-exit;
backdrop-filter: saturate(50%) blur(6px);
}
.components-animation-backdrop-enter-done {
opacity: $opacity-bg;
background-color: rgba(30, 30, 30, 0.8);
transition: opacity $duration-bg $easing-exit;
backdrop-filter: saturate(50%) blur(6px);
}
.components-animation-backdrop-exit {
opacity: $opacity-bg;
background-color: rgba(30, 30, 30, 0.8);
}
.components-animation-backdrop-exit-active {
opacity: 0.01;
background-color: rgba(30, 30, 30, 0.01);
transition: opacity $duration-bg $easing-exit;
}

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

@@ -1,4 +1,12 @@
.navbar {
@supports (backdrop-filter: blur(1px)) {
background-color: rgba($primary, 0.85);
backdrop-filter: saturate(50%) blur(6px);
}
@supports not (backdrop-filter: blur(1px)) {
background-color: rgba($primary, 0.95);
}
& .navbar-brand,
& .nav-link,
& .form-control.components-filterinput {

9
ui/src/Styles/DarkTheme.scss
View File

@@ -66,15 +66,6 @@ $with-click-light: $dark;
@import "Styles/RebootlessBootstrap";
@import "~bootswatch/dist/darkly/bootswatch";
// this is used for navbar, to make it transparent
.bg-primary-transparent {
background-color: rgba($primary, 0.95);
}
// version for modals
.bg-primary-transparent-80 {
background-color: rgba($dark, 0.8);
}
$alert-bg: $list-group-bg;
$alertgroup-body-bg: lighten($gray-700, 5%);
$alertgroup-footer-bg: lighten($gray-700, 2%);

9
ui/src/Styles/LightTheme.scss
View File

@@ -48,15 +48,6 @@ $with-click-light: $black;
@import "Styles/RebootlessBootstrap";
@import "~bootswatch/dist/flatly/bootswatch";
// this is used for navbar, to make it transparent
.bg-primary-transparent {
background-color: rgba($primary, 0.95);
}
// version for modals
.bg-primary-transparent-80 {
background-color: rgba($dark, 0.8);
}
$alert-bg: $white;
$alertgroup-body-bg: $white;
$alertgroup-footer-bg: $gray-100;