From 623b3b590e0bcf0460c6cd9376996cb6fe221747 Mon Sep 17 00:00:00 2001 From: silverwind Date: Fri, 9 Jun 2023 10:37:47 +0200 Subject: [PATCH] Button and color enhancements (#24989) - Various corrections to button styles, especially secondary - Remove focus highlight, it's annoying when it stays on button after press - Clearly define ghost and link buttons with demos in devtest - Remove black, grey and tertiary buttons, they should not be used - Make `arc-green` slightly darker image image --------- Co-authored-by: wxiaoguang Co-authored-by: Giteabot --- templates/base/modal_actions_confirm.tmpl | 2 +- templates/devtest/gitea-ui.tmpl | 85 +++- templates/devtest/list.tmpl | 7 + templates/org/settings/labels.tmpl | 2 +- templates/repo/blame.tmpl | 2 +- templates/repo/branch/list.tmpl | 24 +- templates/repo/cite/cite_modal.tmpl | 2 +- templates/repo/commit_statuses.tmpl | 2 +- templates/repo/diff/blob_excerpt.tmpl | 6 +- templates/repo/diff/box.tmpl | 4 +- templates/repo/diff/section_split.tmpl | 10 +- templates/repo/diff/section_unified.tmpl | 2 +- templates/repo/home.tmpl | 4 +- templates/repo/issue/labels.tmpl | 2 +- .../repo/issue/labels/edit_delete_label.tmpl | 2 +- templates/repo/issue/list.tmpl | 2 +- templates/repo/issue/view_content.tmpl | 2 +- templates/repo/issue/view_title.tmpl | 6 +- templates/repo/release/new.tmpl | 2 +- templates/repo/view_file.tmpl | 2 +- templates/shared/issuelist.tmpl | 6 +- .../user/notification/notification_div.tmpl | 6 +- .../applications_oauth2_edit_form.tmpl | 2 +- web_src/css/base.css | 43 +- web_src/css/helpers.css | 11 +- web_src/css/modules/button.css | 433 ++++++++---------- web_src/css/repo.css | 9 +- web_src/css/repo/list-header.css | 10 + web_src/css/shared/issuelist.css | 2 +- web_src/css/themes/theme-arc-green.css | 35 +- web_src/js/components/RepoActionView.vue | 4 +- 31 files changed, 359 insertions(+), 372 deletions(-) diff --git a/templates/base/modal_actions_confirm.tmpl b/templates/base/modal_actions_confirm.tmpl index a39a855b63..6cf3ecbe3e 100644 --- a/templates/base/modal_actions_confirm.tmpl +++ b/templates/base/modal_actions_confirm.tmpl @@ -32,7 +32,7 @@ The ".ok.button" and ".cancel.button" selectors are also used by Fomantic Modal {{else if eq .ModalButtonColors "yellow"}} {{$stylePositive = "yellow"}} {{end}} - + {{end}} diff --git a/templates/devtest/gitea-ui.tmpl b/templates/devtest/gitea-ui.tmpl index c00d12217d..824b7d0db6 100644 --- a/templates/devtest/gitea-ui.tmpl +++ b/templates/devtest/gitea-ui.tmpl @@ -14,24 +14,73 @@
-
- - - - - -
-
This is a button
+ +
    +
  • +

    General purpose:

    + + + + + + + + +
    • +
  • +

    Recommended colors:

    + + + + + + + + + + +
    • +
  • +

    Supported but not recommended:

    +

    Do not use if there is no strong requirement. Do not use grey/black buttons, they don't work well with dark theme.

    + + + + + + + + + + + + + + +
    • +
  • +

    Inline / Plain:

    +
    + + + +
    +
    • +
+
-
@@ -75,7 +124,7 @@
    {{range .SubNames}}
  • {{.}}
    • diff --git a/templates/org/settings/labels.tmpl b/templates/org/settings/labels.tmpl index c3917861f6..be408617ce 100644 --- a/templates/org/settings/labels.tmpl +++ b/templates/org/settings/labels.tmpl @@ -6,7 +6,7 @@
    - +
    diff --git a/templates/repo/blame.tmpl b/templates/repo/blame.tmpl index e6bf1cc96f..c7116a5f59 100644 --- a/templates/repo/blame.tmpl +++ b/templates/repo/blame.tmpl @@ -52,7 +52,7 @@ {{if $.EscapeStatus.Escaped}} {{if $row.EscapeStatus.Escaped}} - + {{end}} {{end}} diff --git a/templates/repo/branch/list.tmpl b/templates/repo/branch/list.tmpl index e0acd4f20e..8617bcafaf 100644 --- a/templates/repo/branch/list.tmpl +++ b/templates/repo/branch/list.tmpl @@ -27,7 +27,7 @@ {{if and $.IsWriter (not $.Repository.IsArchived) (not .IsDeleted)}} - {{else}} - {{end}} diff --git a/templates/repo/cite/cite_modal.tmpl b/templates/repo/cite/cite_modal.tmpl index c515874a06..e296a1d6d3 100644 --- a/templates/repo/cite/cite_modal.tmpl +++ b/templates/repo/cite/cite_modal.tmpl @@ -15,7 +15,7 @@
    -
    diff --git a/templates/repo/commit_statuses.tmpl b/templates/repo/commit_statuses.tmpl index 8858fb8402..20a59bf0d7 100644 --- a/templates/repo/commit_statuses.tmpl +++ b/templates/repo/commit_statuses.tmpl @@ -1,6 +1,6 @@ {{if .Statuses}} {{if and (eq (len .Statuses) 1) .Status.TargetURL}} - + {{template "repo/commit_status" .Status}} {{else}} diff --git a/templates/repo/diff/blob_excerpt.tmpl b/templates/repo/diff/blob_excerpt.tmpl index ab7abdbd7b..23149f611a 100644 --- a/templates/repo/diff/blob_excerpt.tmpl +++ b/templates/repo/diff/blob_excerpt.tmpl @@ -26,7 +26,7 @@ {{else}} {{$inlineDiff := $.section.GetComputedInlineDiffFor $line $.locale}} - {{if and $line.LeftIdx $inlineDiff.EscapeStatus.Escaped}}{{end}} + {{if and $line.LeftIdx $inlineDiff.EscapeStatus.Escaped}}{{end}} {{if $line.LeftIdx}}{{end}} {{/* */}}{{if $line.LeftIdx}}{{template "repo/diff/section_code" dict "diff" $inlineDiff "locale" $.locale}}{{else}}{{/* @@ -34,7 +34,7 @@ */}}{{end}}{{/* */}} - {{if and $line.RightIdx $inlineDiff.EscapeStatus.Escaped}}{{end}} + {{if and $line.RightIdx $inlineDiff.EscapeStatus.Escaped}}{{end}} {{if $line.RightIdx}}{{end}} {{/* */}}{{if $line.RightIdx}}{{template "repo/diff/section_code" dict "diff" $inlineDiff "locale" $.locale}}{{else}}{{/* @@ -72,7 +72,7 @@ {{end}} {{$inlineDiff := $.section.GetComputedInlineDiffFor $line $.locale}} - {{if $inlineDiff.EscapeStatus.Escaped}}{{end}} + {{if $inlineDiff.EscapeStatus.Escaped}}{{end}} {{$inlineDiff.Content}} diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl index 64d9d82128..36fb98fa66 100644 --- a/templates/repo/diff/box.tmpl +++ b/templates/repo/diff/box.tmpl @@ -90,7 +90,7 @@

    -
    {{if $file.IsRenamed}}{{$file.OldName}} → {{end}}{{$file.Name}}{{if .IsLFSFile}} ({{$.locale.Tr "repo.stored_lfs"}}){{end}} - + {{if $file.IsGenerated}} {{$.locale.Tr "repo.diff.generated"}} {{end}} diff --git a/templates/repo/diff/section_split.tmpl b/templates/repo/diff/section_split.tmpl index cb96d64056..1c9bfed04e 100644 --- a/templates/repo/diff/section_split.tmpl +++ b/templates/repo/diff/section_split.tmpl @@ -34,7 +34,7 @@ {{end}}

    {{$inlineDiff := $section.GetComputedInlineDiffFor $line $.root.locale}} - {{if $inlineDiff.EscapeStatus.Escaped}}{{end}} + {{if $inlineDiff.EscapeStatus.Escaped}}{{end}} {{/* */}}{{template "repo/diff/section_code" dict "diff" $inlineDiff "locale" $.root.locale}}{{/* */}} @@ -43,7 +43,7 @@ {{- $leftDiff := ""}}{{if $line.LeftIdx}}{{$leftDiff = $section.GetComputedInlineDiffFor $line $.root.locale}}{{end}} {{- $rightDiff := ""}}{{if $match.RightIdx}}{{$rightDiff = $section.GetComputedInlineDiffFor $match $.root.locale}}{{end}} - {{if $line.LeftIdx}}{{if $leftDiff.EscapeStatus.Escaped}}{{end}}{{end}} + {{if $match.RightIdx}}{{if $rightDiff.EscapeStatus.Escaped}}{{end}}{{end}} {{if $match.RightIdx}}{{end}} {{/* */}}{{if and $.root.SignedUserID $.root.PageIsPullFiles}}{{/* @@ -75,7 +75,7 @@ {{else}} {{$inlineDiff := $section.GetComputedInlineDiffFor $line $.root.locale}} - {{if $line.LeftIdx}}{{if $inlineDiff.EscapeStatus.Escaped}}{{end}}{{end}} + {{if $line.LeftIdx}}{{if $inlineDiff.EscapeStatus.Escaped}}{{end}}{{end}} {{if $line.LeftIdx}}{{end}} {{/* */}}{{if and $.root.SignedUserID $.root.PageIsPullFiles (not (eq .GetType 2))}}{{/* @@ -90,7 +90,7 @@ */}}{{end}}{{/* */}} - {{if $line.RightIdx}}{{if $inlineDiff.EscapeStatus.Escaped}}{{end}}{{end}} + {{if $line.RightIdx}}{{if $inlineDiff.EscapeStatus.Escaped}}{{end}}{{end}} {{if $line.RightIdx}}{{end}} {{/* */}}{{if and $.root.SignedUserID $.root.PageIsPullFiles (not (eq .GetType 3))}}{{/* diff --git a/templates/repo/diff/section_unified.tmpl b/templates/repo/diff/section_unified.tmpl index d970853159..8f9c122f05 100644 --- a/templates/repo/diff/section_unified.tmpl +++ b/templates/repo/diff/section_unified.tmpl @@ -41,7 +41,7 @@ {{$inlineDiff := $section.GetComputedInlineDiffFor $line $.root.locale -}} {{- if $inlineDiff.EscapeStatus.Escaped -}} - + {{- end -}} diff --git a/templates/repo/home.tmpl b/templates/repo/home.tmpl index 5e9c285eb0..a679de5027 100644 --- a/templates/repo/home.tmpl +++ b/templates/repo/home.tmpl @@ -30,7 +30,7 @@
    {{range .Topics}}{{.Name}}{{end}} - {{if and .Permission.IsAdmin (not .Repository.IsArchived)}}{{end}} + {{if and .Permission.IsAdmin (not .Repository.IsArchived)}}{{end}}
    {{end}} {{if and .Permission.IsAdmin (not .Repository.IsArchived)}} @@ -46,7 +46,7 @@
    - +
    diff --git a/templates/repo/issue/labels.tmpl b/templates/repo/issue/labels.tmpl index 93e264e4cd..a122333c89 100644 --- a/templates/repo/issue/labels.tmpl +++ b/templates/repo/issue/labels.tmpl @@ -6,7 +6,7 @@ {{template "repo/issue/navbar" .}} {{if and (or .CanWriteIssues .CanWritePulls) (not .Repository.IsArchived)}}
    - +
    {{end}} diff --git a/templates/repo/issue/labels/edit_delete_label.tmpl b/templates/repo/issue/labels/edit_delete_label.tmpl index b09e9173de..b4eb6be7fc 100644 --- a/templates/repo/issue/labels/edit_delete_label.tmpl +++ b/templates/repo/issue/labels/edit_delete_label.tmpl @@ -52,7 +52,7 @@
    - diff --git a/templates/repo/issue/list.tmpl b/templates/repo/issue/list.tmpl index 77a5d87f26..3323bf893e 100644 --- a/templates/repo/issue/list.tmpl +++ b/templates/repo/issue/list.tmpl @@ -27,7 +27,7 @@ {{end}}
    - + #{{.Index}} {{$timeStr := TimeSinceUnix .GetLastEventTimestamp $.locale}} {{if .OriginalAuthor}} diff --git a/templates/repo/issue/view_content.tmpl b/templates/repo/issue/view_content.tmpl index 3669e00d5e..e451db16f0 100644 --- a/templates/repo/issue/view_content.tmpl +++ b/templates/repo/issue/view_content.tmpl @@ -175,7 +175,7 @@
    - +
    diff --git a/templates/repo/issue/view_title.tmpl b/templates/repo/issue/view_title.tmpl index 0857025495..6a302d7401 100644 --- a/templates/repo/issue/view_title.tmpl +++ b/templates/repo/issue/view_title.tmpl @@ -14,7 +14,7 @@
    {{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .Repository.IsArchived)}} - + {{end}} {{if not .Issue.IsPull}} {{.locale.Tr "repo.issues.new"}} @@ -22,7 +22,7 @@
    {{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .Repository.IsArchived)}}
    - +
    {{end}} @@ -47,7 +47,7 @@ {{if .HeadBranchLink}} {{$headHref = printf `%s` (.HeadBranchLink | Escape) $headHref}} {{end}} - {{$headHref = printf `%s ` $headHref (.locale.Tr "copy_branch") (.HeadTarget | Escape) (svg "octicon-copy" 14)}} + {{$headHref = printf `%s ` $headHref (.locale.Tr "copy_branch") (.HeadTarget | Escape) (svg "octicon-copy" 14)}} {{$baseHref := .BaseTarget|Escape}} {{if .BaseBranchLink}} {{$baseHref = printf `%s` (.BaseBranchLink | Escape) $baseHref}} diff --git a/templates/repo/release/new.tmpl b/templates/repo/release/new.tmpl index 2d34613dde..c7de00422d 100644 --- a/templates/repo/release/new.tmpl +++ b/templates/repo/release/new.tmpl @@ -123,7 +123,7 @@ {{end}} {{else}} {{if not .tag_name}} - + {{end}} {{end}} + {{if (index $.LineEscapeStatus $idx).Escaped}}{{end}} {{end}} {{$code | Safe}} diff --git a/templates/shared/issuelist.tmpl b/templates/shared/issuelist.tmpl index 394b4a6918..8ae00a2ba9 100644 --- a/templates/shared/issuelist.tmpl +++ b/templates/shared/issuelist.tmpl @@ -12,7 +12,7 @@
    - {{RenderEmoji $.Context .Title | RenderCodeBlock}} + {{RenderEmoji $.Context .Title | RenderCodeBlock}} {{if .IsPull}} {{if (index $.CommitStatuses .PullRequest.ID)}} {{template "repo/commit_statuses" dict "Status" (index $.CommitLastStatus .PullRequest.ID) "Statuses" (index $.CommitStatuses .PullRequest.ID) "root" $}} @@ -132,7 +132,7 @@ {{if .Assignees}}
    {{range .Assignees}} - + {{avatar $.Context . 20}} {{end}} @@ -140,7 +140,7 @@ {{end}} {{if .NumComments}}
    - + {{svg "octicon-comment" 16 "gt-mr-2"}}{{.NumComments}}
    diff --git a/templates/user/notification/notification_div.tmpl b/templates/user/notification/notification_div.tmpl index 7d50ce6071..0b46e43b4f 100644 --- a/templates/user/notification/notification_div.tmpl +++ b/templates/user/notification/notification_div.tmpl @@ -74,7 +74,7 @@ {{$.CsrfTokenHtml}} - +
    diff --git a/web_src/css/base.css b/web_src/css/base.css index 1c7a239188..d245d0ecb4 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -73,8 +73,9 @@ --color-secondary-alpha-70: #dededeb3; --color-secondary-alpha-80: #dededecc; --color-secondary-alpha-90: #dededee1; - --color-secondary-hover: var(--color-secondary-dark-1); - --color-secondary-active: var(--color-secondary-dark-2); + --color-secondary-button: var(--color-secondary-dark-4); + --color-secondary-hover: var(--color-secondary-dark-5); + --color-secondary-active: var(--color-secondary-dark-6); /* console colors - used for actions console and console files */ --color-console-fg: #eeeff2; --color-console-fg-subtle: #959cab; @@ -191,22 +192,20 @@ --color-footer: #ffffff; --color-timeline: #ececec; --color-input-text: #212121; - --color-input-background: #ffffff; + --color-input-background: #fafafa; --color-input-toggle-background: #dedede; - --color-input-border: #dedede; - --color-input-border-hover: #cecece; - --color-header-wrapper: #f8f8f8; - --color-header-wrapper-transparent: #f8f8f800; + --color-input-border: var(--color-secondary); + --color-input-border-hover: var(--color-secondary-dark-1); --color-light: #00000006; --color-light-mimic-enabled: rgba(0, 0, 0, calc(6 / 255 * 222 / 255 / var(--opacity-disabled))); --color-light-border: #0000001d; --color-hover: #00000014; - --color-active: #0000001e; - --color-menu: #ffffff; - --color-card: #ffffff; + --color-active: #0000001b; + --color-menu: #fafafa; + --color-card: #fafafa; --color-markup-table-row: #00000008; --color-markup-code-block: #00000010; - --color-button: #ffffff; + --color-button: #fafafa; --color-code-bg: #ffffff; --color-code-sidebar-bg: #f5f5f5; --color-shadow: #00000030; @@ -415,11 +414,6 @@ a.silenced:hover { text-decoration: none; } -.delete-button, -.delete-button:hover { - color: var(--color-red); -} - a.label, .repository-menu a, .ui.search .results a, @@ -462,12 +456,6 @@ a.label, background-color: var(--color-markup-code-block); } -/* try to match button with no icons in height */ -.icon-button { - padding-top: 7.42px !important; - padding-bottom: 7.42px !important; -} - .ui.divider { color: var(--color-text); } @@ -509,8 +497,9 @@ a.label, border-right-color: transparent; } +.ui.action.input:not([class*="left action"]) > input, .ui.action.input:not([class*="left action"]) > input:hover { - border-right-color: transparent; + border-right: 1px solid transparent; } .ui.action.input:not([class*="left action"]) > input:focus { @@ -682,7 +671,7 @@ a.label, } .ui.menu .dropdown.item .menu { - background: var(--color-menu); + background: var(--color-body); } .ui.menu .ui.dropdown .menu > .item { @@ -1733,6 +1722,10 @@ i.icon.centerlock { color: var(--color-label-text); } +.ui.label > a { + opacity: .75; /* increase contrast over default fomantic .5 */ +} + .ui.active.label { background: var(--color-label-active-bg); border-color: var(--color-label-active-bg); @@ -2037,7 +2030,7 @@ a.ui.ui.ui.basic.primary.label:hover { .ui.basic.labels .label, .ui.basic.label { - background: var(--color-light); + background: var(--color-button); border-color: var(--color-light-border); color: var(--color-text-light); } diff --git a/web_src/css/helpers.css b/web_src/css/helpers.css index 14ef64b252..0496a4c9b3 100644 --- a/web_src/css/helpers.css +++ b/web_src/css/helpers.css @@ -11,7 +11,6 @@ Gitea's private styles use `g-` prefix. .gt-ab { align-items: baseline !important; } .gt-tc { text-align: center !important; } .gt-tl { text-align: left !important; } -.gt-tdn { text-decoration: none !important; } .gt-jc { justify-content: center !important; } .gt-js { justify-content: flex-start !important; } .gt-je { justify-content: flex-end !important; } @@ -76,6 +75,7 @@ Gitea's private styles use `g-` prefix. .gt-self-center { align-self: center !important; } .gt-self-start { align-self: flex-start !important; } .gt-self-end { align-self: flex-end !important; } +.gt-no-underline { text-decoration-line: none !important; } .gt-overflow-x-auto { overflow-x: auto !important; } .gt-overflow-x-scroll { overflow-x: scroll !important; } @@ -124,6 +124,14 @@ Gitea's private styles use `g-` prefix. .gt-text-white { color: var(--color-white) !important; } +.interact-fg { color: inherit !important; } +.interact-fg:hover { color: var(--color-primary) !important; } +.interact-fg:active { color: var(--color-primary-active) !important; } + +.interact-bg { background: transparent !important; } +.interact-bg:hover { background: var(--color-hover) !important; } +.interact-bg:active { background: var(--color-active) !important; } + .gt-m-0 { margin: 0 !important; } .gt-m-1 { margin: .125rem !important; } .gt-m-2 { margin: .25rem !important; } @@ -253,6 +261,7 @@ Gitea's private styles use `g-` prefix. .gt-shrink-0 { flex-shrink: 0 !important; } +.gt-font-12 { font-size: 12px !important } .gt-font-13 { font-size: 13px !important } .gt-font-14 { font-size: 14px !important } .gt-font-15 { font-size: 15px !important } diff --git a/web_src/css/modules/button.css b/web_src/css/modules/button.css index d9bc69043d..72eb1f3989 100644 --- a/web_src/css/modules/button.css +++ b/web_src/css/modules/button.css @@ -1,44 +1,21 @@ /* this contains override styles for buttons and related elements */ -.ui.button { +.ui.button, +.ui.button:focus { background: var(--color-button); border: 1px solid var(--color-light-border); color: var(--color-text); } -/* a ghost button is a button without border */ -.button.button-ghost { - background: transparent; - border: none; - color: inherit; - margin: 0; - padding: 0; -} - -.button.button-ghost:hover { +.ui.button:hover { background: var(--color-hover); -} - -.button.button-ghost:active { - background: var(--color-active); -} - -.ui.button.button-link { - background: transparent; - border: none; - color: inherit; + color: var(--color-text); } .page-content .ui.button { box-shadow: none !important; } -.ui.button:focus, -.ui.button:hover { - background: var(--color-hover); - color: var(--color-text); -} - .ui.active.button, .ui.button:active, .ui.active.button:active, @@ -51,6 +28,42 @@ margin: 0 !important; } +.delete-button, +.delete-button:hover { + color: var(--color-red); +} + +/* try to match button with no icons in height */ +.icon-button { + padding-top: 7.42px !important; + padding-bottom: 7.42px !important; +} + +/* btn is a plain button without any opinionated styling */ + +.btn { + background: transparent; + border-radius: var(--border-radius); + border: none; + color: inherit; + margin: 0; + padding: 0; +} + +.btn:hover, +.btn:active, +.btn:focus { + background: none; + border: none; +} + +a.btn, +a.btn:hover { + color: inherit; +} + +/* other button styles */ + .ui.buttons .button:first-child { border-left: 1px solid var(--color-light-border); } @@ -63,10 +76,6 @@ border-left: none; } -.ui.button.button-link:hover { - color: var(--color-primary); -} - .two-toggle-buttons .button:not(.active):first-of-type { border-right: none; } @@ -77,9 +86,11 @@ .ui.labeled.button.disabled > .button, .ui.basic.buttons .button, -.ui.basic.button { +.ui.basic.button, +.ui.basic.buttons .button:focus, +.ui.basic.button:focus { color: var(--color-text-light); - background: var(--color-light); + background: var(--color-button); } .ui.basic.buttons .button:hover, @@ -88,8 +99,7 @@ background: var(--color-hover); } -.ui.basic.buttons .button:focus, -.ui.basic.button:focus, + .ui.basic.buttons .button:active, .ui.basic.button:active, .ui.basic.buttons .active.button, @@ -114,14 +124,14 @@ .ui.primary.labels .label, .ui.ui.ui.primary.label, .ui.primary.button, -.ui.primary.buttons .button { +.ui.primary.buttons .button, +.ui.primary.button:focus, +.ui.primary.buttons .button:focus { background: var(--color-primary); } .ui.primary.button:hover, -.ui.primary.buttons .button:hover, -.ui.primary.button:focus, -.ui.primary.buttons .button:focus { +.ui.primary.buttons .button:hover { background: var(--color-primary-hover); } @@ -131,15 +141,15 @@ } .ui.basic.primary.buttons .button, -.ui.basic.primary.button { +.ui.basic.primary.button, +.ui.basic.primary.buttons .button:focus, +.ui.basic.primary.button:focus { color: var(--color-primary); border-color: var(--color-primary); } .ui.basic.primary.buttons .button:hover, -.ui.basic.primary.button:hover, -.ui.basic.primary.buttons .button:focus, -.ui.basic.primary.button:focus { +.ui.basic.primary.button:hover { color: var(--color-primary-hover); border-color: var(--color-primary-hover); } @@ -155,47 +165,46 @@ .ui.secondary.labels .label, .ui.ui.ui.secondary.label, .ui.secondary.button, -.ui.secondary.buttons .button { - background: var(--color-secondary); - color: var(--color-text); +.ui.secondary.buttons .button, +.ui.secondary.button:focus, +.ui.secondary.buttons .button:focus { + background: var(--color-secondary-button); } .ui.secondary.button:hover, -.ui.secondary.buttons .button:hover, -.ui.secondary.button:focus, -.ui.secondary.buttons .button:focus { - background: var(--color-secondary-dark-1); - color: var(--color-text); +.ui.secondary.buttons .button:hover { + background: var(--color-secondary-hover); } .ui.secondary.button:active, .ui.secondary.buttons .button:active { - background: var(--color-secondary-dark-2); - color: var(--color-text); + background: var(--color-secondary-active); } .ui.basic.secondary.buttons .button, -.ui.basic.secondary.button { - color: var(--color-secondary-dark-6) !important; +.ui.basic.secondary.button, +.ui.basic.secondary.button:focus, +.ui.basic.secondary.buttons .button:focus { + color: var(--color-secondary-button); + border-color: var(--color-secondary-button); } .ui.basic.secondary.buttons .button:hover, -.ui.basic.secondary.button:hover, -.ui.basic.secondary.buttons .button:active, -.ui.basic.secondary.button:active { - color: var(--color-secondary-dark-8) !important; - border-color: var(--color-secondary-dark-1) !important; +.ui.basic.secondary.button:hover { + color: var(--color-secondary-hover); + border-color: var(--color-secondary-hover); } -.ui.basic.secondary.button:focus, -.ui.basic.secondary.buttons .button:focus { - color: var(--color-secondary-dark-8) !important; - border-color: var(--color-secondary-dark-3) !important; +.ui.basic.secondary.buttons .button:active, +.ui.basic.secondary.button:active { + color: var(--color-secondary-active); + border-color: var(--color-secondary-active); } /* tertiary */ -.ui.tertiary.button { +.ui.tertiary.button, +.ui.tertiary.button:focus { color: var(--color-text-light); border: none; } @@ -204,7 +213,7 @@ color: var(--color-text); } -.ui.tertiary.button:focus { +.ui.tertiary.button:active { color: var(--color-text-dark); } @@ -213,14 +222,14 @@ .ui.red.labels .label, .ui.ui.ui.red.label, .ui.red.button, -.ui.red.buttons .button { +.ui.red.buttons .button, +.ui.red.button:focus, +.ui.red.buttons .button:focus { background: var(--color-red); } .ui.red.button:hover, -.ui.red.buttons .button:hover, -.ui.red.button:focus, -.ui.red.buttons .button:focus { +.ui.red.buttons .button:hover { background: var(--color-red-dark-1); } @@ -230,15 +239,15 @@ } .ui.basic.red.buttons .button, -.ui.basic.red.button { +.ui.basic.red.button, +.ui.basic.red.buttons .button:focus, +.ui.basic.red.button:focus { color: var(--color-red); border-color: var(--color-red); } .ui.basic.red.buttons .button:hover, -.ui.basic.red.button:hover, -.ui.basic.red.buttons .button:focus, -.ui.basic.red.button:focus { +.ui.basic.red.button:hover { color: var(--color-red-dark-1); border-color: var(--color-red-dark-1); } @@ -254,14 +263,14 @@ .ui.orange.labels .label, .ui.ui.ui.orange.label, .ui.orange.button, -.ui.orange.buttons .button { +.ui.orange.buttons .button, +.ui.orange.button:focus, +.ui.orange.buttons .button:focus { background: var(--color-orange); } .ui.orange.button:hover, -.ui.orange.buttons .button:hover, -.ui.orange.button:focus, -.ui.orange.buttons .button:focus { +.ui.orange.buttons .button:hover { background: var(--color-orange-dark-1); } @@ -271,15 +280,15 @@ } .ui.basic.orange.buttons .button, -.ui.basic.orange.button { +.ui.basic.orange.button, +.ui.basic.orange.buttons .button:focus, +.ui.basic.orange.button:focus { color: var(--color-orange); border-color: var(--color-orange); } .ui.basic.orange.buttons .button:hover, -.ui.basic.orange.button:hover, -.ui.basic.orange.buttons .button:focus, -.ui.basic.orange.button:focus { +.ui.basic.orange.button:hover { color: var(--color-orange-dark-1); border-color: var(--color-orange-dark-1); } @@ -295,14 +304,14 @@ .ui.yellow.labels .label, .ui.ui.ui.yellow.label, .ui.yellow.button, -.ui.yellow.buttons .button { +.ui.yellow.buttons .button, +.ui.yellow.button:focus, +.ui.yellow.buttons .button:focus { background: var(--color-yellow); } .ui.yellow.button:hover, -.ui.yellow.buttons .button:hover, -.ui.yellow.button:focus, -.ui.yellow.buttons .button:focus { +.ui.yellow.buttons .button:hover { background: var(--color-yellow-dark-1); } @@ -312,15 +321,15 @@ } .ui.basic.yellow.buttons .button, -.ui.basic.yellow.button { +.ui.basic.yellow.button, +.ui.basic.yellow.buttons .button:focus, +.ui.basic.yellow.button:focus { color: var(--color-yellow); border-color: var(--color-yellow); } .ui.basic.yellow.buttons .button:hover, -.ui.basic.yellow.button:hover, -.ui.basic.yellow.buttons .button:focus, -.ui.basic.yellow.button:focus { +.ui.basic.yellow.button:hover { color: var(--color-yellow-dark-1); border-color: var(--color-yellow-dark-1); } @@ -336,14 +345,14 @@ .ui.olive.labels .label, .ui.ui.ui.olive.label, .ui.olive.button, -.ui.olive.buttons .button { +.ui.olive.buttons .button, +.ui.olive.button:focus, +.ui.olive.buttons .button:focus { background: var(--color-olive); } .ui.olive.button:hover, -.ui.olive.buttons .button:hover, -.ui.olive.button:focus, -.ui.olive.buttons .button:focus { +.ui.olive.buttons .button:hover { background: var(--color-olive-dark-1); } @@ -353,15 +362,15 @@ } .ui.basic.olive.buttons .button, -.ui.basic.olive.button { +.ui.basic.olive.button, +.ui.basic.olive.buttons .button:focus, +.ui.basic.olive.button:focus { color: var(--color-olive); border-color: var(--color-olive); } .ui.basic.olive.buttons .button:hover, -.ui.basic.olive.button:hover, -.ui.basic.olive.buttons .button:focus, -.ui.basic.olive.button:focus { +.ui.basic.olive.button:hover { color: var(--color-olive-dark-1); border-color: var(--color-olive-dark-1); } @@ -377,14 +386,14 @@ .ui.green.labels .label, .ui.ui.ui.green.label, .ui.green.button, -.ui.green.buttons .button { +.ui.green.buttons .button, +.ui.green.button:focus, +.ui.green.buttons .button:focus { background: var(--color-green); } .ui.green.button:hover, -.ui.green.buttons .button:hover, -.ui.green.button:focus, -.ui.green.buttons .button:focus { +.ui.green.buttons .button:hover { background: var(--color-green-dark-1); } @@ -394,15 +403,15 @@ } .ui.basic.green.buttons .button, -.ui.basic.green.button { +.ui.basic.green.button, +.ui.basic.green.buttons .button:focus, +.ui.basic.green.button:focus { color: var(--color-green); border-color: var(--color-green); } .ui.basic.green.buttons .button:hover, -.ui.basic.green.button:hover, -.ui.basic.green.buttons .button:focus, -.ui.basic.green.button:focus { +.ui.basic.green.button:hover { color: var(--color-green-dark-1); border-color: var(--color-green-dark-1); } @@ -418,14 +427,14 @@ .ui.teal.labels .label, .ui.ui.ui.teal.label, .ui.teal.button, -.ui.teal.buttons .button { +.ui.teal.buttons .button, +.ui.teal.button:focus, +.ui.teal.buttons .button:focus { background: var(--color-teal); } .ui.teal.button:hover, -.ui.teal.buttons .button:hover, -.ui.teal.button:focus, -.ui.teal.buttons .button:focus { +.ui.teal.buttons .button:hover { background: var(--color-teal-dark-1); } @@ -435,15 +444,15 @@ } .ui.basic.teal.buttons .button, -.ui.basic.teal.button { +.ui.basic.teal.button, +.ui.basic.teal.buttons .button:focus, +.ui.basic.teal.button:focus { color: var(--color-teal); border-color: var(--color-teal); } .ui.basic.teal.buttons .button:hover, -.ui.basic.teal.button:hover, -.ui.basic.teal.buttons .button:focus, -.ui.basic.teal.button:focus { +.ui.basic.teal.button:hover { color: var(--color-teal-dark-1); border-color: var(--color-teal-dark-1); } @@ -459,14 +468,14 @@ .ui.blue.labels .label, .ui.ui.ui.blue.label, .ui.blue.button, -.ui.blue.buttons .button { +.ui.blue.buttons .button, +.ui.blue.button:focus, +.ui.blue.buttons .button:focus { background: var(--color-blue); } .ui.blue.button:hover, -.ui.blue.buttons .button:hover, -.ui.blue.button:focus, -.ui.blue.buttons .button:focus { +.ui.blue.buttons .button:hover { background: var(--color-blue-dark-1); } @@ -476,15 +485,15 @@ } .ui.basic.blue.buttons .button, -.ui.basic.blue.button { +.ui.basic.blue.button, +.ui.basic.blue.buttons .button:focus, +.ui.basic.blue.button:focus { color: var(--color-blue); border-color: var(--color-blue); } .ui.basic.blue.buttons .button:hover, -.ui.basic.blue.button:hover, -.ui.basic.blue.buttons .button:focus, -.ui.basic.blue.button:focus { +.ui.basic.blue.button:hover { color: var(--color-blue-dark-1); border-color: var(--color-blue-dark-1); } @@ -500,14 +509,14 @@ .ui.violet.labels .label, .ui.ui.ui.violet.label, .ui.violet.button, -.ui.violet.buttons .button { +.ui.violet.buttons .button, +.ui.violet.button:focus, +.ui.violet.buttons .button:focus { background: var(--color-violet); } .ui.violet.button:hover, -.ui.violet.buttons .button:hover, -.ui.violet.button:focus, -.ui.violet.buttons .button:focus { +.ui.violet.buttons .button:hover { background: var(--color-violet-dark-1); } @@ -517,15 +526,15 @@ } .ui.basic.violet.buttons .button, -.ui.basic.violet.button { +.ui.basic.violet.button, +.ui.basic.violet.buttons .button:focus, +.ui.basic.violet.button:focus { color: var(--color-violet); border-color: var(--color-violet); } .ui.basic.violet.buttons .button:hover, -.ui.basic.violet.button:hover, -.ui.basic.violet.buttons .button:focus, -.ui.basic.violet.button:focus { +.ui.basic.violet.button:hover { color: var(--color-violet-dark-1); border-color: var(--color-violet-dark-1); } @@ -541,14 +550,14 @@ .ui.purple.labels .label, .ui.ui.ui.purple.label, .ui.purple.button, -.ui.purple.buttons .button { +.ui.purple.buttons .button, +.ui.purple.button:focus, +.ui.purple.buttons .button:focus { background: var(--color-purple); } .ui.purple.button:hover, -.ui.purple.buttons .button:hover, -.ui.purple.button:focus, -.ui.purple.buttons .button:focus { +.ui.purple.buttons .button:hover { background: var(--color-purple-dark-1); } @@ -558,15 +567,15 @@ } .ui.basic.purple.buttons .button, -.ui.basic.purple.button { +.ui.basic.purple.button, +.ui.basic.purple.buttons .button:focus, +.ui.basic.purple.button:focus { color: var(--color-purple); border-color: var(--color-purple); } .ui.basic.purple.buttons .button:hover, -.ui.basic.purple.button:hover, -.ui.basic.purple.buttons .button:focus, -.ui.basic.purple.button:focus { +.ui.basic.purple.button:hover { color: var(--color-purple-dark-1); border-color: var(--color-purple-dark-1); } @@ -582,14 +591,14 @@ .ui.pink.labels .label, .ui.ui.ui.pink.label, .ui.pink.button, -.ui.pink.buttons .button { +.ui.pink.buttons .button, +.ui.pink.button:focus, +.ui.pink.buttons .button:focus { background: var(--color-pink); } .ui.pink.button:hover, -.ui.pink.buttons .button:hover, -.ui.pink.button:focus, -.ui.pink.buttons .button:focus { +.ui.pink.buttons .button:hover { background: var(--color-pink-dark-1); } @@ -599,15 +608,15 @@ } .ui.basic.pink.buttons .button, -.ui.basic.pink.button { +.ui.basic.pink.button, +.ui.basic.pink.buttons .button:focus, +.ui.basic.pink.button:focus { color: var(--color-pink); border-color: var(--color-pink); } .ui.basic.pink.buttons .button:hover, -.ui.basic.pink.button:hover, -.ui.basic.pink.buttons .button:focus, -.ui.basic.pink.button:focus { +.ui.basic.pink.button:hover { color: var(--color-pink-dark-1); border-color: var(--color-pink-dark-1); } @@ -623,14 +632,14 @@ .ui.brown.labels .label, .ui.ui.ui.brown.label, .ui.brown.button, -.ui.brown.buttons .button { +.ui.brown.buttons .button, +.ui.brown.button:focus, +.ui.brown.buttons .button:focus { background: var(--color-brown); } .ui.brown.button:hover, -.ui.brown.buttons .button:hover, -.ui.brown.button:focus, -.ui.brown.buttons .button:focus { +.ui.brown.buttons .button:hover { background: var(--color-brown-dark-1); } @@ -640,15 +649,15 @@ } .ui.basic.brown.buttons .button, -.ui.basic.brown.button { +.ui.basic.brown.button, +.ui.basic.brown.buttons .button:focus, +.ui.basic.brown.button:focus { color: var(--color-brown); border-color: var(--color-brown); } .ui.basic.brown.buttons .button:hover, -.ui.basic.brown.button:hover, -.ui.basic.brown.buttons .button:focus, -.ui.basic.brown.button:focus { +.ui.basic.brown.button:hover { color: var(--color-brown-dark-1); border-color: var(--color-brown-dark-1); } @@ -659,97 +668,17 @@ border-color: var(--color-brown-dark-2); } -/* grey */ - -.ui.grey.labels .label, -.ui.ui.ui.grey.label, -.ui.grey.button, -.ui.grey.buttons .button { - background: var(--color-grey); -} - -.ui.grey.button:hover, -.ui.grey.buttons .button:hover, -.ui.grey.button:focus, -.ui.grey.buttons .button:focus { - background: var(--color-grey-dark-1); -} - -.ui.grey.button:active, -.ui.grey.buttons .button:active { - background: var(--color-grey-dark-2); -} - -.ui.basic.grey.buttons .button, -.ui.basic.grey.button { - color: var(--color-grey); - border-color: var(--color-grey); -} - -.ui.basic.grey.buttons .button:hover, -.ui.basic.grey.button:hover, -.ui.basic.grey.buttons .button:focus, -.ui.basic.grey.button:focus { - color: var(--color-grey-dark-1); - border-color: var(--color-grey-dark-1); -} - -.ui.basic.grey.buttons .button:active, -.ui.basic.grey.button:active { - color: var(--color-grey-dark-2); - border-color: var(--color-grey-dark-2); -} - -/* black */ - -.ui.black.labels .label, -.ui.ui.ui.black.label, -.ui.black.button, -.ui.black.buttons .button { - background: var(--color-black); -} - -.ui.black.button:hover, -.ui.black.buttons .button:hover, -.ui.black.button:focus, -.ui.black.buttons .button:focus { - background: var(--color-black-dark-1); -} - -.ui.black.button:active, -.ui.black.buttons .button:active { - background: var(--color-black-dark-2); -} - -.ui.basic.black.buttons .button, -.ui.basic.black.button { - color: var(--color-black); - border-color: var(--color-black); -} - -.ui.basic.black.buttons .button:hover, -.ui.basic.black.button:hover, -.ui.basic.black.buttons .button:focus, -.ui.basic.black.button:focus { - color: var(--color-black-dark-1); - border-color: var(--color-black-dark-1); -} - -.ui.basic.black.buttons .button:active, -.ui.basic.black.button:active { - color: var(--color-black-dark-2); - border-color: var(--color-black-dark-2); -} +/* negative */ .ui.negative.buttons .button, -.ui.negative.button { +.ui.negative.button, +.ui.negative.buttons .button:focus, +.ui.negative.button:focus { background: var(--color-red); } .ui.negative.buttons .button:hover, -.ui.negative.button:hover, -.ui.negative.buttons .button:focus, -.ui.negative.button:focus { +.ui.negative.button:hover { background: var(--color-red-dark-1); } @@ -758,18 +687,16 @@ background: var(--color-red-dark-2); } -/* negative */ - .ui.basic.negative.buttons .button, -.ui.basic.negative.button { +.ui.basic.negative.button, +.ui.basic.negative.buttons .button:focus, +.ui.basic.negative.button:focus { color: var(--color-red); border-color: var(--color-red); } .ui.basic.negative.buttons .button:hover, -.ui.basic.negative.button:hover, -.ui.basic.negative.buttons .button:focus, -.ui.basic.negative.button:focus { +.ui.basic.negative.button:hover { color: var(--color-red-dark-1); border-color: var(--color-red-dark-1); } @@ -783,14 +710,14 @@ /* positive */ .ui.positive.buttons .button, -.ui.positive.button { +.ui.positive.button, +.ui.positive.buttons .button:focus, +.ui.positive.button:focus { background: var(--color-green); } .ui.positive.buttons .button:hover, -.ui.positive.button:hover, -.ui.positive.buttons .button:focus, -.ui.positive.button:focus { +.ui.positive.button:hover { background: var(--color-green-dark-1); } @@ -800,15 +727,15 @@ } .ui.basic.positive.buttons .button, -.ui.basic.positive.button { +.ui.basic.positive.button, +.ui.basic.positive.buttons .button:focus, +.ui.basic.positive.button:focus { color: var(--color-green); border-color: var(--color-green); } .ui.basic.positive.buttons .button:hover, -.ui.basic.positive.button:hover, -.ui.basic.positive.buttons .button:focus, -.ui.basic.positive.button:focus { +.ui.basic.positive.button:hover { color: var(--color-green-dark-1); border-color: var(--color-green-dark-1); } diff --git a/web_src/css/repo.css b/web_src/css/repo.css index c6655a8fc9..81374d8972 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -1823,16 +1823,12 @@ clear: right; } -.repository .diff-file-box.file-content img { +.repository .diff-file-box.file-content .image-diff img { max-width: 100%; padding: 0; border-radius: 0; } -.repository .diff-file-box.file-content img.emoji { - padding: 0; -} - .repository .diff-file-box .ui.bottom.attached.table.segment { padding-top: 5px; padding-bottom: 5px; @@ -3085,8 +3081,7 @@ tbody.commit-list { } .diff-file-header { - padding-top: 5px !important; - padding-bottom: 5px !important; + padding: 5px 8px !important; } .diff-file-box[data-folded="true"] .diff-file-body { diff --git a/web_src/css/repo/list-header.css b/web_src/css/repo/list-header.css index 24aa36dd89..69539b035b 100644 --- a/web_src/css/repo/list-header.css +++ b/web_src/css/repo/list-header.css @@ -28,9 +28,19 @@ .small-menu-items { min-height: 35.4px !important; /* match .small.button in height */ + background: none !important; /* fomantic sets a color here which does not play well with active transparent color on the item, so unset and set the colors on the item */ } .small-menu-items .item { + background: var(--color-menu) !important; padding-top: 6px !important; padding-bottom: 6px !important; } + +.small-menu-items .item:hover { + background: var(--color-hover) !important; +} + +.small-menu-items .item.active { + background: var(--color-active) !important; +} diff --git a/web_src/css/shared/issuelist.css b/web_src/css/shared/issuelist.css index 89e1135ce9..ecbeaf1dfd 100644 --- a/web_src/css/shared/issuelist.css +++ b/web_src/css/shared/issuelist.css @@ -145,7 +145,7 @@ } .issue.list .branches .branch { - background-color: var(--color-secondary); + background-color: var(--color-secondary-alpha-40); border-radius: 3px; } diff --git a/web_src/css/themes/theme-arc-green.css b/web_src/css/themes/theme-arc-green.css index b07a171b52..a34f81d999 100644 --- a/web_src/css/themes/theme-arc-green.css +++ b/web_src/css/themes/theme-arc-green.css @@ -58,8 +58,9 @@ --color-secondary-alpha-70: #525767b3; --color-secondary-alpha-80: #525767cc; --color-secondary-alpha-90: #525767e1; - --color-secondary-hover: var(--color-secondary-light-1); - --color-secondary-active: var(--color-secondary-light-2); + --color-secondary-button: var(--color-secondary-dark-4); + --color-secondary-hover: var(--color-secondary-dark-3); + --color-secondary-active: var(--color-secondary-dark-2); /* console colors - used for actions console and console files */ --color-console-fg: #eeeff2; --color-console-fg-subtle: #959cab; @@ -163,37 +164,37 @@ --color-orange-badge-hover-bg: #f2711c4d; --color-git: #f05133; /* target-based colors */ - --color-body: #373b47; - --color-box-header: #404652; - --color-box-body: #2a2e3a; - --color-box-body-highlight: #353945; + --color-body: #2e323e; + --color-box-header: #333743; + --color-box-body: #252a36; + --color-box-body-highlight: #303440; --color-text-dark: #dbe0ea; --color-text: #cbd0da; --color-text-light: #bbbfca; --color-text-light-1: #aaafb9; --color-text-light-2: #9a9ea9; --color-text-light-3: #8a8e99; - --color-footer: #2e323e; + --color-footer: #262b36; --color-timeline: #4c525e; --color-input-text: #dfe3ec; - --color-input-background: #232933; + --color-input-background: #262b36; --color-input-toggle-background: #454a57; - --color-input-border: #454a57; - --color-input-border-hover: #505667; - --color-header-wrapper: #2a2e3a; - --color-header-wrapper-transparent: #2a2e3a00; + --color-input-border: var(--color-secondary); + --color-input-border-hover: var(--color-secondary-dark-1); + --color-header-wrapper: #212531; + --color-header-wrapper-transparent: #21253100; --color-light: #00000028; --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled))); --color-light-border: #ffffff28; --color-hover: #ffffff19; --color-active: #ffffff24; - --color-menu: #2e323e; - --color-card: #2e323e; + --color-menu: #262b36; + --color-card: #262b36; --color-markup-table-row: #ffffff06; --color-markup-code-block: #ffffff16; - --color-button: #353846; - --color-code-bg: #2a2e3a; - --color-code-sidebar-bg: #2e323e; + --color-button: #262b36; + --color-code-bg: #222733; + --color-code-sidebar-bg: #252a36; --color-shadow: #00000060; --color-secondary-bg: #2a2e3a; --color-text-focus: #fff; diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue index 704ffa0706..ca6319355c 100644 --- a/web_src/js/components/RepoActionView.vue +++ b/web_src/js/components/RepoActionView.vue @@ -14,7 +14,7 @@ -
    @@ -70,7 +70,7 @@
    -