diff --git a/public/colors.css b/public/colors.css index 281332e2b..7f4abdd24 100644 --- a/public/colors.css +++ b/public/colors.css @@ -31,7 +31,7 @@ --color-fill-secondary-hover: #8585ff; --color-fill-secondary-counter: #7a7aff; --color-fill-ghost: #ebebff; - --color-fill-ghost-hover: #f5f5ff; + --color-fill-ghost-hover: #dbdbff; --color-fill-separator: #dbdbff; --color-fill-primary: #ff70ff; --color-fill-primary-hover: #ff80ff; @@ -45,7 +45,7 @@ --color-fill-diff-green: #badeca; --color-fill-diff-green-light: #dcefe5; --color-fill-float: #fafaff; - --color-fill-float-hover: #ffffff; + --color-fill-float-hover: #dbdbff; --color-fill-merged: #ffeeff; --color-fill-selected: #ebebff; --color-fill-warning: #ffffe5; diff --git a/public/index.css b/public/index.css index 1210bb1a0..373699a16 100644 --- a/public/index.css +++ b/public/index.css @@ -91,6 +91,11 @@ pre { min-width: 1.25rem; text-align: center; } +.global-spacer { + width: 1px; + height: 100%; + background-color: var(--color-fill-ghost); +} @media (max-width: 720px) { body { diff --git a/src/App/Settings.svelte b/src/App/Settings.svelte index 2a9e71afc..b14ed5467 100644 --- a/src/App/Settings.svelte +++ b/src/App/Settings.svelte @@ -46,6 +46,7 @@ on:click={() => storeTheme("light")}> +
+
{/each}
diff --git a/src/components/Button.svelte b/src/components/Button.svelte index bfcfb7c31..04dff3dc9 100644 --- a/src/components/Button.svelte +++ b/src/components/Button.svelte @@ -89,21 +89,6 @@ background-color: var(--color-fill-ghost); } - .not-selected { - background-color: var(--color-fill-float-hover); - color: var(--color-foreground-contrast); - font-weight: var(--font-weight-normal); - } - .not-selected[disabled] { - background-color: var(--color-fill-float-hover); - color: var(--color-foreground-disabled); - font-weight: var(--font-weight-normal); - } - .not-selected:not([disabled]):hover { - background-color: var(--color-fill-ghost-hover); - color: var(--color-foreground-contrast); - } - .gray { background-color: var(--color-fill-ghost); color: var(--color-foreground-contrast); @@ -130,7 +115,7 @@ color: var(--color-foreground-contrast); } .selected { - background-color: var(--color-fill-ghost); + background-color: var(--color-fill-float-hover); color: var(--color-foreground-contrast); cursor: default; } @@ -139,6 +124,22 @@ color: var(--color-foreground-disabled); } + .not-selected { + background-color: var(--color-fill-ghost); + color: var(--color-foreground-contrast); + font-weight: var(--font-weight-normal); + letter-spacing: 0.02rem; + } + .not-selected[disabled] { + background-color: var(--color-fill-float-hover); + color: var(--color-foreground-disabled); + font-weight: var(--font-weight-normal); + } + .not-selected:not([disabled]):hover { + background-color: var(--color-fill-ghost-hover); + color: var(--color-foreground-contrast); + } + .none { background-color: transparent; color: var(--color-foreground-emphasized); diff --git a/src/components/ExtendedTextarea.svelte b/src/components/ExtendedTextarea.svelte index 1a2f433ba..205dfbaa8 100644 --- a/src/components/ExtendedTextarea.svelte +++ b/src/components/ExtendedTextarea.svelte @@ -179,6 +179,7 @@ Edit +