gitbutlerapp/gitbutler
1
1
Fork 0
mirror of https://github.com/gitbutlerapp/gitbutler.git synced 2024-12-21 00:21:35 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2796 from gitbutlerapp/UI-fixes

Browse Source 
Small CSS fixes
This commit is contained in:
Pavel Laptev 2024-02-18 15:31:48 +01:00 committed by GitHub
commit d5b39f0494
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 30 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
gitbutler-ui/src/lib/components/BaseBranchCard.svelte
View File

@ -71,8 +71,8 @@
transition: background-color var(--transition-fast);
}
.base-branch-card:hover,
.base-branch-card:focus,
.base-branch-card:not(.selected):hover,
.base-branch-card:not(.selected):focus,
.selected {
background-color: color-mix(in srgb, transparent, var(--darken-tint-light));
}

4
gitbutler-ui/src/lib/components/BranchItem.svelte
View File

@ -82,8 +82,8 @@
color: var(--clr-theme-scale-ntrl-50);
}
.branch:hover,
.branch:focus,
.branch:not(.selected):hover,
.branch:not(.selected):focus,
.selected {
background-color: color-mix(in srgb, transparent, var(--darken-tint-light));
transition: none;

2
gitbutler-ui/src/lib/components/Button.svelte
View File

@ -119,7 +119,7 @@
&:focus {
background: color-mix(in srgb, transparent, var(--darken-tint-extralight));
border: 1px solid
color-mix(in srgb, var(--clr-theme-container-outline-light), var(--darken-mid));
color-mix(in srgb, var(--clr-theme-container-outline-light), var(--darken-tint-mid));
}
}

8
gitbutler-ui/src/lib/components/CommitCard.svelte
View File

@ -131,9 +131,9 @@
overflow: hidden;
transition: background-color var(--transition-fast);
&:hover {
&:not(.is-commit-open):hover {
border: 1px solid
color-mix(in srgb, var(--clr-theme-container-outline-light), var(--darken-mid));
color-mix(in srgb, var(--clr-theme-container-outline-light), var(--darken-tint-mid));
background-color: color-mix(
in srgb,
var(--clr-theme-container-light),
@ -153,7 +153,7 @@
background-color: color-mix(
in srgb,
var(--clr-theme-container-light),
var(--darken-tint-extralight)
var(--darken-tint-light)
);
& .commit__header {
@ -163,7 +163,7 @@
background-color: color-mix(
in srgb,
var(--clr-theme-container-light),
var(--darken-tint-light)
var(--darken-tint-mid)
);
}
}

4
gitbutler-ui/src/lib/components/DomainButton.svelte
View File

@ -21,8 +21,8 @@
transition: background-color var(--transition-fast);
}
.domain-button:hover,
.domain-button:focus,
.domain-button:not(.selected):hover,
.domain-button:not(.selected):focus,
.selected {
background-color: color-mix(in srgb, transparent, var(--darken-tint-light));
}

2
gitbutler-ui/src/lib/components/Resizer.svelte
View File

@ -96,8 +96,10 @@
}
z-index: 40;
&:hover,
&:focus,
&.dragging {
background-color: var(--clr-theme-container-outline-light);
outline: none;
}
}
.horizontal {

25
gitbutler-ui/src/styles/main.postcss
View File

@ -18,26 +18,35 @@
--transition-fast: 0.06s ease-in-out;
--transition-medium: 0.1s ease-in-out;
--transition-slow: 0.2s ease-in-out;
--helpers-invert-0: 0;
--helpers-invert-1: 1;
/* For very light neutral states — ghost buttons, light background */
/* For all light neutral elements — ghost buttons, light background
use tint palatte it will tint the pallate properly if it's nut gray */
--darken-tint-extralight: var(--clr-theme-scale-ntrl-50) 5%;
--darken-tint-light: var(--clr-theme-scale-ntrl-50) 9%;
--darken-tint-mid: var(--clr-theme-scale-ntrl-50) 15%;
--darken-tint-mid: var(--clr-theme-scale-ntrl-50) 14%;
--darken-tint-dark: var(--clr-theme-scale-ntrl-50) 20%;
--darken-tint-extradark: var(--clr-theme-scale-ntrl-50) 35%;
/* For all other elements */
/* For all color and dark eleemnts */
--darken-extralight: var(--clr-theme-scale-ntrl-0) 3%;
--darken-light: var(--clr-theme-scale-ntrl-0) 5%;
--darken-light: var(--clr-theme-scale-ntrl-0) 6%;
--darken-mid: var(--clr-theme-scale-ntrl-0) 9%;
--darken-dark: var(--clr-theme-scale-ntrl-0) 15%;
--darken-extradark: var(--clr-theme-scale-ntrl-0) 25%;
--darken-dark: var(--clr-theme-scale-ntrl-0) 12%;
--darken-extradark: var(--clr-theme-scale-ntrl-0) 15%;
/* TODO: add focus color */
}
:root.dark {
/* Additional correction here for dark mode, due tue
tint colors look less contrast */
--darken-tint-extralight: var(--clr-theme-scale-ntrl-50) 7%;
--darken-tint-light: var(--clr-theme-scale-ntrl-50) 14%;
--darken-tint-mid: var(--clr-theme-scale-ntrl-50) 21%;
--darken-tint-dark: var(--clr-theme-scale-ntrl-50) 28%;
--darken-tint-extradark: var(--clr-theme-scale-ntrl-50) 35%;
}
/* BOILERPLATE CSS */
body {