gitbutlerapp/gitbutler
1
1
Fork 0
mirror of https://github.com/gitbutlerapp/gitbutler.git synced 2025-01-02 06:25:02 +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); transition: background-color var(--transition-fast);
} }
.base-branch-card:hover, .base-branch-card:not(.selected):hover,
.base-branch-card:focus, .base-branch-card:not(.selected):focus,
.selected { .selected {
background-color: color-mix(in srgb, transparent, var(--darken-tint-light)); 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); color: var(--clr-theme-scale-ntrl-50);
} }
.branch:hover, .branch:not(.selected):hover,
.branch:focus, .branch:not(.selected):focus,
.selected { .selected {
background-color: color-mix(in srgb, transparent, var(--darken-tint-light)); background-color: color-mix(in srgb, transparent, var(--darken-tint-light));
transition: none; transition: none;

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

@ -119,7 +119,7 @@
&:focus { &:focus {
background: color-mix(in srgb, transparent, var(--darken-tint-extralight)); background: color-mix(in srgb, transparent, var(--darken-tint-extralight));
border: 1px solid 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; overflow: hidden;
transition: background-color var(--transition-fast); transition: background-color var(--transition-fast);
&:hover { &:not(.is-commit-open):hover {
border: 1px solid 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( background-color: color-mix(
in srgb, in srgb,
var(--clr-theme-container-light), var(--clr-theme-container-light),
@ -153,7 +153,7 @@
background-color: color-mix( background-color: color-mix(
in srgb, in srgb,
var(--clr-theme-container-light), var(--clr-theme-container-light),
var(--darken-tint-extralight) var(--darken-tint-light)
); );
& .commit__header { & .commit__header {
@ -163,7 +163,7 @@
background-color: color-mix( background-color: color-mix(
in srgb, in srgb,
var(--clr-theme-container-light), 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); transition: background-color var(--transition-fast);
} }
.domain-button:hover, .domain-button:not(.selected):hover,
.domain-button:focus, .domain-button:not(.selected):focus,
.selected { .selected {
background-color: color-mix(in srgb, transparent, var(--darken-tint-light)); 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; z-index: 40;
&:hover, &:hover,
&:focus,
&.dragging { &.dragging {
background-color: var(--clr-theme-container-outline-light); background-color: var(--clr-theme-container-outline-light);
outline: none;
} }
} }
.horizontal { .horizontal {

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

@ -18,26 +18,35 @@
--transition-fast: 0.06s ease-in-out; --transition-fast: 0.06s ease-in-out;
--transition-medium: 0.1s ease-in-out; --transition-medium: 0.1s ease-in-out;
--transition-slow: 0.2s 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-extralight: var(--clr-theme-scale-ntrl-50) 5%;
--darken-tint-light: var(--clr-theme-scale-ntrl-50) 9%; --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-dark: var(--clr-theme-scale-ntrl-50) 20%;
--darken-tint-extradark: var(--clr-theme-scale-ntrl-50) 35%; --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-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-mid: var(--clr-theme-scale-ntrl-0) 9%;
--darken-dark: var(--clr-theme-scale-ntrl-0) 15%; --darken-dark: var(--clr-theme-scale-ntrl-0) 12%;
--darken-extradark: var(--clr-theme-scale-ntrl-0) 25%; --darken-extradark: var(--clr-theme-scale-ntrl-0) 15%;
/* TODO: add focus color */ /* 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 */ /* BOILERPLATE CSS */
body { body {