From 99463532820d7a88cdea88e66e0606b996cc9fc7 Mon Sep 17 00:00:00 2001 From: silverwind Date: Sun, 14 Apr 2024 19:53:52 +0200 Subject: [PATCH] Remove fomantic button module (#30475) CSS-only module. Button colors are reduced to this: Screenshot 2024-04-14 at 15 36 07 --------- Co-authored-by: wxiaoguang --- templates/admin/notice.tmpl | 2 +- templates/admin/repo/unadopted.tmpl | 2 +- templates/base/modal_actions_confirm.tmpl | 10 +- templates/devtest/fomantic-modal.tmpl | 31 +- templates/devtest/gitea-ui.tmpl | 42 +- templates/org/team/sidebar.tmpl | 2 +- .../code/recently_pushed_new_branches.tmpl | 2 +- templates/repo/diff/compare.tmpl | 24 +- .../repo/issue/view_content/sidebar.tmpl | 2 +- templates/repo/settings/lfs.tmpl | 2 +- templates/repo/settings/lfs_pointers.tmpl | 2 +- templates/repo/settings/webhook/history.tmpl | 2 +- templates/user/settings/applications.tmpl | 2 +- web_src/css/base.css | 8 - web_src/css/helpers.css | 3 + web_src/css/modules/button.css | 769 ++---- web_src/css/modules/modal.css | 4 + web_src/css/repo.css | 14 +- web_src/fomantic/build/semantic.css | 2318 ----------------- web_src/fomantic/semantic.json | 1 - .../js/components/PullRequestMergeForm.vue | 2 +- 21 files changed, 253 insertions(+), 2991 deletions(-) diff --git a/templates/admin/notice.tmpl b/templates/admin/notice.tmpl index 33d8a2f9632df..68703cc884424 100644 --- a/templates/admin/notice.tmpl +++ b/templates/admin/notice.tmpl @@ -49,7 +49,7 @@ - diff --git a/templates/admin/repo/unadopted.tmpl b/templates/admin/repo/unadopted.tmpl index 6a8e203694ab4..a95f6b5120e2e 100644 --- a/templates/admin/repo/unadopted.tmpl +++ b/templates/admin/repo/unadopted.tmpl @@ -54,7 +54,7 @@ - {{template "base/modal_actions_confirm" (dict "ModalButtonColors" "yellow")}} + {{template "base/modal_actions_confirm"}} diff --git a/templates/base/modal_actions_confirm.tmpl b/templates/base/modal_actions_confirm.tmpl index c44320deffbb8..9f7eb4adf2d97 100644 --- a/templates/base/modal_actions_confirm.tmpl +++ b/templates/base/modal_actions_confirm.tmpl @@ -1,7 +1,6 @@ {{/* Two buttons (negative, positive): * ModalButtonTypes: "yes" (default) or "confirm" -* ModalButtonColors: "primary" (default) / "blue" / "yellow" * ModalButtonCancelText * ModalButtonOkText @@ -22,14 +21,7 @@ The ".ok.button" and ".cancel.button" selectors are also used by Fomantic Modal {{end}} {{if .ModalButtonCancelText}}{{$textNegitive = .ModalButtonCancelText}}{{end}} {{if .ModalButtonOkText}}{{$textPositive = .ModalButtonOkText}}{{end}} - - {{$stylePositive := "primary"}} - {{if eq .ModalButtonColors "blue"}} - {{$stylePositive = "blue"}} - {{else if eq .ModalButtonColors "yellow"}} - {{$stylePositive = "yellow"}} - {{end}} - + {{end}} diff --git a/templates/devtest/fomantic-modal.tmpl b/templates/devtest/fomantic-modal.tmpl index 5cd36721a717f..f31cdc1983e62 100644 --- a/templates/devtest/fomantic-modal.tmpl +++ b/templates/devtest/fomantic-modal.tmpl @@ -1,6 +1,15 @@ {{template "base/head" .}}
{{template "base/alert" .}} +
+ - - - - - -
-
{{template "base/footer" .}} diff --git a/templates/devtest/gitea-ui.tmpl b/templates/devtest/gitea-ui.tmpl index bb4fc77a74a81..3b13c13be8405 100644 --- a/templates/devtest/gitea-ui.tmpl +++ b/templates/devtest/gitea-ui.tmpl @@ -29,41 +29,13 @@ - - - -

  • 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:

    @@ -198,7 +170,7 @@ 123 - +

    Input with SVG

    @@ -271,10 +243,6 @@ button dropdown {{svg "octicon-triangle-down" 14 "dropdown icon"}} -
    - large dropdown - {{svg "octicon-triangle-down" 14 "dropdown icon"}} -
    @@ -290,10 +258,6 @@ button compact {{svg "octicon-triangle-down" 14 "dropdown icon"}}
    -
    - large compact - {{svg "octicon-triangle-down" 14 "dropdown icon"}} -
    diff --git a/templates/org/team/sidebar.tmpl b/templates/org/team/sidebar.tmpl index 9311a46e38f75..b9e55dd587d14 100644 --- a/templates/org/team/sidebar.tmpl +++ b/templates/org/team/sidebar.tmpl @@ -79,7 +79,7 @@
    {{if .IsOrganizationOwner}}
    - {{svg "octicon-gear"}} {{ctx.Locale.Tr "org.teams.settings"}} + {{svg "octicon-gear"}} {{ctx.Locale.Tr "org.teams.settings"}}
    {{end}} diff --git a/templates/repo/code/recently_pushed_new_branches.tmpl b/templates/repo/code/recently_pushed_new_branches.tmpl index 17ae7d119d187..b808f413d352f 100644 --- a/templates/repo/code/recently_pushed_new_branches.tmpl +++ b/templates/repo/code/recently_pushed_new_branches.tmpl @@ -5,7 +5,7 @@ {{$branchLink := HTMLFormat `%s` $.RepoLink (PathEscapeSegments .Name) .Name}} {{ctx.Locale.Tr "repo.pulls.recently_pushed_new_branches" $branchLink $timeSince}} - + {{ctx.Locale.Tr "repo.pulls.compare_changes"}} diff --git a/templates/repo/diff/compare.tmpl b/templates/repo/diff/compare.tmpl index d0472577d0abf..f92750119719a 100644 --- a/templates/repo/diff/compare.tmpl +++ b/templates/repo/diff/compare.tmpl @@ -184,23 +184,15 @@ {{end}} {{else if and .PageIsComparePull (gt .CommitCount 0)}} {{if .HasPullRequest}} -
    -
    - {{ctx.Locale.Tr "repo.pulls.has_pull_request" (print $.RepoLink "/pulls/" .PullRequest.Issue.Index) $.RepoRelPath .PullRequest.Index}} -

    - {{RenderIssueTitle $.Context .PullRequest.Issue.Title ($.Repository.ComposeMetas ctx)}} - #{{.PullRequest.Issue.Index}} -

    -
    -
    - {{- if .PullRequest.HasMerged -}} - {{svg "octicon-git-merge" 16}} {{ctx.Locale.Tr "repo.pulls.view"}} - {{else if .Issue.IsClosed}} - {{svg "octicon-issue-closed" 16}} {{ctx.Locale.Tr "repo.pulls.view"}} - {{else}} - {{svg "octicon-git-pull-request" 16}} {{ctx.Locale.Tr "repo.pulls.view"}} - {{end}} +
    + {{template "shared/issueicon" .}} +
    + {{RenderIssueTitle $.Context .PullRequest.Issue.Title ($.Repository.ComposeMetas ctx) | RenderCodeBlock}} + #{{.PullRequest.Issue.Index}}
    + + {{ctx.Locale.Tr "repo.pulls.view"}} +
    {{else}} {{if and $.IsSigned (not .Repository.IsArchived)}} diff --git a/templates/repo/issue/view_content/sidebar.tmpl b/templates/repo/issue/view_content/sidebar.tmpl index 7040c2849a2b0..bb0bb2cff3602 100644 --- a/templates/repo/issue/view_content/sidebar.tmpl +++ b/templates/repo/issue/view_content/sidebar.tmpl @@ -572,7 +572,7 @@ {{end}} -
    diff --git a/templates/repo/settings/lfs_pointers.tmpl b/templates/repo/settings/lfs_pointers.tmpl index a0bb8c46f0d96..758aec6bb031a 100644 --- a/templates/repo/settings/lfs_pointers.tmpl +++ b/templates/repo/settings/lfs_pointers.tmpl @@ -37,7 +37,7 @@ - + {{ShortSha .Oid}} diff --git a/templates/repo/settings/webhook/history.tmpl b/templates/repo/settings/webhook/history.tmpl index 8ee1446a16f83..149840b0deac0 100644 --- a/templates/repo/settings/webhook/history.tmpl +++ b/templates/repo/settings/webhook/history.tmpl @@ -6,7 +6,7 @@
    - diff --git a/templates/user/settings/applications.tmpl b/templates/user/settings/applications.tmpl index 5e2ffc3bb3efb..8baa07c90b0ed 100644 --- a/templates/user/settings/applications.tmpl +++ b/templates/user/settings/applications.tmpl @@ -109,7 +109,7 @@

    {{ctx.Locale.Tr "settings.access_token_deletion_desc"}}

    - {{template "base/modal_actions_confirm" (dict "ModalButtonColors" "yellow")}} + {{template "base/modal_actions_confirm"}}
    {{template "user/settings/layout_footer" .}} diff --git a/web_src/css/base.css b/web_src/css/base.css index 20f3616177497..b3f87044e06d1 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -663,10 +663,6 @@ input:-webkit-autofill:active, font-size: 0.75em; } -.ui.form .ui.button { - font-weight: var(--font-weight-normal); -} - /* popover box shadows */ .ui.dropdown .menu, .ui.upward.dropdown > .menu, @@ -1347,10 +1343,6 @@ table th[data-sortt-desc] .svg { vertical-align: middle; } -.ui.ui.button { - justify-content: center; -} - .ui.dropdown .ui.label .svg { vertical-align: middle; } diff --git a/web_src/css/helpers.css b/web_src/css/helpers.css index 118c058b19a80..cf2e73572c316 100644 --- a/web_src/css/helpers.css +++ b/web_src/css/helpers.css @@ -52,6 +52,9 @@ only use: */ .tw-hidden.tw-hidden { display: none !important; } +/* proposed class from https://github.com/tailwindlabs/tailwindcss/pull/12128 */ +.tw-break-anywhere { overflow-wrap: anywhere !important; } + @media (max-width: 767.98px) { /* double selector so it wins over .tw-flex (old .gt-df) etc */ .not-mobile.not-mobile { diff --git a/web_src/css/modules/button.css b/web_src/css/modules/button.css index faeed8c9a1b5b..47f55df7fa1db 100644 --- a/web_src/css/modules/button.css +++ b/web_src/css/modules/button.css @@ -1,11 +1,33 @@ -/* this contains override styles for buttons and related elements */ - -/* these styles changed the Fomantic UI's rules, Fomantic UI expects only "basic" buttons have borders */ -.ui.button, -.ui.button:focus { +/* based on Fomantic UI checkbox module, with just the parts extracted that we use. If you find any + unused rules here after refactoring, please remove them. */ + +.ui.button { + cursor: pointer; + display: inline-block; + min-height: 1em; + outline: none; + vertical-align: baseline; + font-family: var(--fonts-regular); + margin: 0 0.25em 0 0; + padding: 0.78571429em 1.5em; + font-weight: var(--font-weight-normal); + text-align: center; + text-decoration: none; + line-height: 1; + border-radius: 0.28571429rem; + user-select: none; + -webkit-tap-highlight-color: transparent; + justify-content: center; background: var(--color-button); border: 1px solid var(--color-light-border); color: var(--color-text); + white-space: nowrap; +} + +@media (max-width: 767.98px) { + .ui.button { + white-space: normal; + } } .ui.button:hover { @@ -13,10 +35,6 @@ color: var(--color-text); } -.page-content .ui.button { - box-shadow: none !important; -} - .ui.active.button, .ui.button:active, .ui.active.button:active, @@ -25,89 +43,116 @@ color: var(--color-text); } -.delete-button, -.delete-button:hover { - color: var(--color-red); +.ui.buttons .disabled.button:not(.basic), +.ui.disabled.button, +.ui.button:disabled, +.ui.disabled.button:hover, +.ui.disabled.active.button { + cursor: default; + opacity: var(--opacity-disabled) !important; + background-image: none; + pointer-events: none !important; } -/* btn is a plain button without any opinionated styling, it only uses flex for vertical alignment like ".ui.button" in base.css */ - -.btn { - background: transparent; - border-radius: var(--border-radius); +.ui.labeled.button:not(.icon) { + display: inline-flex; + flex-direction: row; + background: none; + padding: 0 !important; border: none; - color: inherit; +} +.ui.labeled.button > .button { margin: 0; - padding: 0; } - -.btn:hover, -.btn:active, -.btn:focus { - background: none; - border: none; +.ui.labeled.button > .label { + display: flex; + align-items: center; + margin: 0 0 0 -1px !important; + font-size: 1em; + border-color: var(--color-light-border); } -a.btn, -a.btn:hover { - color: inherit; +.ui.button > .icon:not(.button) { + height: auto; + opacity: 0.8; } - -/* By default, Fomantic UI doesn't support "bordered" buttons group, but Gitea would like to use it. -And the default buttons always have borders now (not the same as Fomantic UI's default buttons, see above). -It needs some tricks to tweak the left/right borders with active state */ - -.ui.buttons .button { - border-right: none; +.ui.button:not(.icon) > .icon:not(.button):not(.dropdown), +.ui.button:not(.icon) > .icons:not(.button):not(.dropdown) { + margin: 0 0.42857143em 0 -0.21428571em; + vertical-align: baseline; } - -.ui.buttons .button:hover { - border-color: var(--color-secondary-dark-2); +.ui.button:not(.icon) > .icons:not(.button):not(.dropdown) > .icon { + vertical-align: baseline; } - -.ui.buttons .button:hover + .button { - border-left: 1px solid var(--color-secondary-dark-2); +.ui.button:not(.icon) > .right.icon:not(.button):not(.dropdown) { + margin: 0 -0.21428571em 0 0.42857143em; } -/* TODO: these "tw-hidden" selectors are only used by "blame.tmpl" buttons: Raw/Normal View/History/Unescape, need to be refactored to a clear solution later */ -.ui.buttons .button:first-child, -.ui.buttons .button.tw-hidden:first-child + .button { - border-left: 1px solid var(--color-light-border); +.ui.compact.buttons .button, +.ui.compact.button { + padding: 0.58928571em 1.125em; } - -.ui.buttons .button:last-child, -.ui.buttons .button:nth-last-child(2):has(+ .button.tw-hidden) { - border-right: 1px solid var(--color-light-border); +.ui.compact.icon.buttons .button, +.ui.compact.icon.button { + padding: 0.58928571em; +} +.ui.compact.labeled.icon.button { + padding: 0.58928571em 3.69642857em; +} +.ui.compact.labeled.icon.button > .icon { + padding: 0.58928571em 0; } -.ui.buttons .button.active { - border-left: 1px solid var(--color-light-border); - border-right: 1px solid var(--color-light-border); +.ui.buttons .button, +.ui.button { + font-size: 1rem; +} +.ui.mini.buttons .dropdown, +.ui.mini.buttons .dropdown .menu > .item, +.ui.mini.buttons .button, +.ui.ui.ui.ui.mini.button { + font-size: 0.78571429rem; +} +.ui.tiny.buttons .dropdown, +.ui.tiny.buttons .dropdown .menu > .item, +.ui.tiny.buttons .button, +.ui.ui.ui.ui.tiny.button { + font-size: 0.85714286rem; +} +.ui.small.buttons .dropdown, +.ui.small.buttons .dropdown .menu > .item, +.ui.small.buttons .button, +.ui.ui.ui.ui.small.button { + font-size: 0.92857143rem; } -.ui.buttons .button.active + .button { - border-left: none; +.ui.icon.buttons .button, +.ui.icon.button:not(.compact) { + padding: 0.78571429em; +} +.ui.icon.buttons .button > .icon, +.ui.icon.button > .icon { + margin: 0 !important; + vertical-align: top; } .ui.basic.buttons .button, -.ui.basic.button, -.ui.basic.buttons .button:hover, -.ui.basic.button:hover { - box-shadow: none; +.ui.basic.button { + border-radius: 0.28571429rem; + background: none; } - -/* apply the vertical padding of .compact to non-compact buttons when they contain a svg as they - would otherwise appear too large. Seen on "RSS Feed" button on repo releases tab. */ -.ui.small.button:not(.compact):has(.svg) { - padding-top: 0.58928571em; - padding-bottom: 0.58928571em; +.ui.basic.buttons { + border: 1px solid var(--color-secondary); + border-radius: 0.28571429rem; +} +.ui.basic.buttons .button { + border-radius: 0; + border-left: 1px solid var(--color-secondary); } .ui.labeled.button.disabled > .button, .ui.basic.buttons .button, -.ui.basic.button, -.ui.basic.buttons .button:focus, -.ui.basic.button:focus { +.ui.basic.button { color: var(--color-text-light); background: var(--color-button); } @@ -129,23 +174,45 @@ It needs some tricks to tweak the left/right borders with active state */ background: var(--color-active); } -.ui.labeled.button > .label { - border-color: var(--color-light-border); +.ui.labeled.icon.button { + position: relative; + padding-left: 4.07142857em !important; + padding-right: 1.5em !important; } -.ui.labeled.icon.buttons > .button > .icon, .ui.labeled.icon.button > .icon { + position: absolute; + top: 0; + left: 0; + height: 100%; + line-height: 1; + border-radius: 0; + border-top-left-radius: inherit; + border-bottom-left-radius: inherit; + text-align: center; + animation: none; + padding: 0.78571429em 0; + margin: 0; + width: 2.57142857em; background: var(--color-hover); } -/* primary */ +.ui.button.toggle.active { + background-color: var(--color-green); + color: var(--color-white); +} +.ui.button.toggle.active:hover { + background-color: var(--color-green-dark-1); + color: var(--color-white); +} + +.ui.fluid.button { + width: 100%; + display: block; +} -.ui.primary.labels .label, -.ui.ui.ui.primary.label, .ui.primary.button, -.ui.primary.buttons .button, -.ui.primary.button:focus, -.ui.primary.buttons .button:focus { +.ui.primary.buttons .button { background: var(--color-primary); color: var(--color-primary-contrast); } @@ -162,11 +229,10 @@ It needs some tricks to tweak the left/right borders with active state */ } .ui.basic.primary.buttons .button, -.ui.basic.primary.button, -.ui.basic.primary.buttons .button:focus, -.ui.basic.primary.button:focus { +.ui.basic.primary.button { color: var(--color-primary); border-color: var(--color-primary); + background: none; } .ui.basic.primary.buttons .button:hover, @@ -181,55 +247,8 @@ It needs some tricks to tweak the left/right borders with active state */ border-color: var(--color-primary-active); } -/* secondary */ - -.ui.secondary.labels .label, -.ui.ui.ui.secondary.label, -.ui.secondary.button, -.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 { - background: var(--color-secondary-hover); -} - -.ui.secondary.button:active, -.ui.secondary.buttons .button:active { - background: var(--color-secondary-active); -} - -.ui.basic.secondary.buttons .button, -.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 { - color: var(--color-secondary-hover); - border-color: var(--color-secondary-hover); -} - -.ui.basic.secondary.buttons .button:active, -.ui.basic.secondary.button:active { - color: var(--color-secondary-active); - border-color: var(--color-secondary-active); -} - -/* red */ - -.ui.red.labels .label, -.ui.ui.ui.red.label, .ui.red.button, -.ui.red.buttons .button, -.ui.red.button:focus, -.ui.red.buttons .button:focus { +.ui.red.buttons .button { background: var(--color-red); } @@ -244,11 +263,10 @@ It needs some tricks to tweak the left/right borders with active state */ } .ui.basic.red.buttons .button, -.ui.basic.red.button, -.ui.basic.red.buttons .button:focus, -.ui.basic.red.button:focus { +.ui.basic.red.button { color: var(--color-red); border-color: var(--color-red); + background: none; } .ui.basic.red.buttons .button:hover, @@ -263,137 +281,8 @@ It needs some tricks to tweak the left/right borders with active state */ border-color: var(--color-red-dark-2); } -/* orange */ - -.ui.orange.labels .label, -.ui.ui.ui.orange.label, -.ui.orange.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 { - background: var(--color-orange-dark-1); -} - -.ui.orange.button:active, -.ui.orange.buttons .button:active { - background: var(--color-orange-dark-2); -} - -.ui.basic.orange.buttons .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 { - color: var(--color-orange-dark-1); - border-color: var(--color-orange-dark-1); -} - -.ui.basic.orange.buttons .button:active, -.ui.basic.orange.button:active { - color: var(--color-orange-dark-2); - border-color: var(--color-orange-dark-2); -} - -/* yellow */ - -.ui.yellow.labels .label, -.ui.ui.ui.yellow.label, -.ui.yellow.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 { - background: var(--color-yellow-dark-1); -} - -.ui.yellow.button:active, -.ui.yellow.buttons .button:active { - background: var(--color-yellow-dark-2); -} - -.ui.basic.yellow.buttons .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 { - color: var(--color-yellow-dark-1); - border-color: var(--color-yellow-dark-1); -} - -.ui.basic.yellow.buttons .button:active, -.ui.basic.yellow.button:active { - color: var(--color-yellow-dark-2); - border-color: var(--color-yellow-dark-2); -} - -/* olive */ - -.ui.olive.labels .label, -.ui.ui.ui.olive.label, -.ui.olive.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 { - background: var(--color-olive-dark-1); -} - -.ui.olive.button:active, -.ui.olive.buttons .button:active { - background: var(--color-olive-dark-2); -} - -.ui.basic.olive.buttons .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 { - color: var(--color-olive-dark-1); - border-color: var(--color-olive-dark-1); -} - -.ui.basic.olive.buttons .button:active, -.ui.basic.olive.button:active { - color: var(--color-olive-dark-2); - border-color: var(--color-olive-dark-2); -} - -/* green */ - -.ui.green.labels .label, -.ui.ui.ui.green.label, .ui.green.button, -.ui.green.buttons .button, -.ui.green.button:focus, -.ui.green.buttons .button:focus { +.ui.green.buttons .button { background: var(--color-green); } @@ -408,11 +297,10 @@ It needs some tricks to tweak the left/right borders with active state */ } .ui.basic.green.buttons .button, -.ui.basic.green.button, -.ui.basic.green.buttons .button:focus, -.ui.basic.green.button:focus { +.ui.basic.green.button { color: var(--color-green); border-color: var(--color-green); + background: none; } .ui.basic.green.buttons .button:hover, @@ -427,326 +315,93 @@ It needs some tricks to tweak the left/right borders with active state */ border-color: var(--color-green-dark-2); } -/* teal */ - -.ui.teal.labels .label, -.ui.ui.ui.teal.label, -.ui.teal.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 { - background: var(--color-teal-dark-1); +.ui.buttons { + display: inline-flex; + flex-direction: row; + font-size: 0; + vertical-align: baseline; + margin: 0 0.25em 0 0; } -.ui.teal.button:active, -.ui.teal.buttons .button:active { - background: var(--color-teal-dark-2); -} - -.ui.basic.teal.buttons .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 { - color: var(--color-teal-dark-1); - border-color: var(--color-teal-dark-1); -} - -.ui.basic.teal.buttons .button:active, -.ui.basic.teal.button:active { - color: var(--color-teal-dark-2); - border-color: var(--color-teal-dark-2); -} - -/* blue */ - -.ui.blue.labels .label, -.ui.ui.ui.blue.label, -.ui.blue.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 { - background: var(--color-blue-dark-1); -} - -.ui.blue.button:active, -.ui.blue.buttons .button:active { - background: var(--color-blue-dark-2); -} - -.ui.basic.blue.buttons .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 { - color: var(--color-blue-dark-1); - border-color: var(--color-blue-dark-1); -} - -.ui.basic.blue.buttons .button:active, -.ui.basic.blue.button:active { - color: var(--color-blue-dark-2); - border-color: var(--color-blue-dark-2); -} - -/* violet */ - -.ui.violet.labels .label, -.ui.ui.ui.violet.label, -.ui.violet.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 { - background: var(--color-violet-dark-1); -} - -.ui.violet.button:active, -.ui.violet.buttons .button:active { - background: var(--color-violet-dark-2); -} - -.ui.basic.violet.buttons .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 { - color: var(--color-violet-dark-1); - border-color: var(--color-violet-dark-1); -} - -.ui.basic.violet.buttons .button:active, -.ui.basic.violet.button:active { - color: var(--color-violet-dark-2); - border-color: var(--color-violet-dark-2); -} - -/* purple */ - -.ui.purple.labels .label, -.ui.ui.ui.purple.label, -.ui.purple.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 { - background: var(--color-purple-dark-1); -} - -.ui.purple.button:active, -.ui.purple.buttons .button:active { - background: var(--color-purple-dark-2); -} - -.ui.basic.purple.buttons .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 { - color: var(--color-purple-dark-1); - border-color: var(--color-purple-dark-1); -} - -.ui.basic.purple.buttons .button:active, -.ui.basic.purple.button:active { - color: var(--color-purple-dark-2); - border-color: var(--color-purple-dark-2); -} - -/* pink */ - -.ui.pink.labels .label, -.ui.ui.ui.pink.label, -.ui.pink.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 { - background: var(--color-pink-dark-1); -} - -.ui.pink.button:active, -.ui.pink.buttons .button:active { - background: var(--color-pink-dark-2); -} - -.ui.basic.pink.buttons .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 { - color: var(--color-pink-dark-1); - border-color: var(--color-pink-dark-1); -} - -.ui.basic.pink.buttons .button:active, -.ui.basic.pink.button:active { - color: var(--color-pink-dark-2); - border-color: var(--color-pink-dark-2); -} - -/* brown */ - -.ui.brown.labels .label, -.ui.ui.ui.brown.label, -.ui.brown.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 { - background: var(--color-brown-dark-1); -} - -.ui.brown.button:active, -.ui.brown.buttons .button:active { - background: var(--color-brown-dark-2); +.delete-button, +.delete-button:hover { + color: var(--color-red); } -.ui.basic.brown.buttons .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); -} +/* btn is a plain button without any opinionated styling, it only uses flex for vertical alignment like ".ui.button" in base.css */ -.ui.basic.brown.buttons .button:hover, -.ui.basic.brown.button:hover { - color: var(--color-brown-dark-1); - border-color: var(--color-brown-dark-1); +.btn { + background: transparent; + border-radius: var(--border-radius); + border: none; + color: inherit; + margin: 0; + padding: 0; } -.ui.basic.brown.buttons .button:active, -.ui.basic.brown.button:active { - color: var(--color-brown-dark-2); - border-color: var(--color-brown-dark-2); +.btn:hover, +.btn:active { + background: none; + border: none; } -/* negative */ - -.ui.negative.buttons .button, -.ui.negative.button, -.ui.negative.buttons .button:focus, -.ui.negative.button:focus { - background: var(--color-red); +a.btn, +a.btn:hover { + color: inherit; } -.ui.negative.buttons .button:hover, -.ui.negative.button:hover { - background: var(--color-red-dark-1); -} +/* By default, Fomantic UI doesn't support "bordered" buttons group, but Gitea would like to use it. +And the default buttons always have borders now (not the same as Fomantic UI's default buttons, see above). +It needs some tricks to tweak the left/right borders with active state */ -.ui.negative.buttons .button:active, -.ui.negative.button:active { - background: var(--color-red-dark-2); +.ui.buttons .button { + border-right: none; + flex: 1 0 auto; + border-radius: 0; + margin: 0; } - -.ui.basic.negative.buttons .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.buttons .button:first-child { + border-left: none; + margin-left: 0; + border-top-left-radius: 0.28571429rem; + border-bottom-left-radius: 0.28571429rem; } - -.ui.basic.negative.buttons .button:hover, -.ui.basic.negative.button:hover { - color: var(--color-red-dark-1); - border-color: var(--color-red-dark-1); +.ui.buttons .button:last-child { + border-top-right-radius: 0.28571429rem; + border-bottom-right-radius: 0.28571429rem; } -.ui.basic.negative.buttons .button:active, -.ui.basic.negative.button:active { - color: var(--color-red-dark-2); - border-color: var(--color-red-dark-2); +.ui.buttons .button:hover { + border-color: var(--color-secondary-dark-2); } -/* positive */ - -.ui.positive.buttons .button, -.ui.positive.button, -.ui.positive.buttons .button:focus, -.ui.positive.button:focus { - background: var(--color-green); +.ui.buttons .button:hover + .button { + border-left: 1px solid var(--color-secondary-dark-2); } -.ui.positive.buttons .button:hover, -.ui.positive.button:hover { - background: var(--color-green-dark-1); +/* TODO: these "tw-hidden" selectors are only used by "blame.tmpl" buttons: Raw/Normal View/History/Unescape, need to be refactored to a clear solution later */ +.ui.buttons .button:first-child, +.ui.buttons .button.tw-hidden:first-child + .button { + border-left: 1px solid var(--color-light-border); } -.ui.positive.buttons .button:active, -.ui.positive.button:active { - background: var(--color-green-dark-2); +.ui.buttons .button:last-child, +.ui.buttons .button:nth-last-child(2):has(+ .button.tw-hidden) { + border-right: 1px solid var(--color-light-border); } -.ui.basic.positive.buttons .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.buttons .button.active { + border-left: 1px solid var(--color-light-border); + border-right: 1px solid var(--color-light-border); } -.ui.basic.positive.buttons .button:hover, -.ui.basic.positive.button:hover { - color: var(--color-green-dark-1); - border-color: var(--color-green-dark-1); +.ui.buttons .button.active + .button { + border-left: none; } -.ui.basic.positive.buttons .button:active, -.ui.basic.positive.button:active { - color: var(--color-green-dark-2); - border-color: var(--color-green-dark-2); +/* apply the vertical padding of .compact to non-compact buttons when they contain a svg as they + would otherwise appear too large. Seen on "RSS Feed" button on repo releases tab. */ +.ui.small.button:not(.compact):has(.svg) { + padding-top: 0.58928571em; + padding-bottom: 0.58928571em; } diff --git a/web_src/css/modules/modal.css b/web_src/css/modules/modal.css index 54a4ef81ca19d..a2acfeaa150e6 100644 --- a/web_src/css/modules/modal.css +++ b/web_src/css/modules/modal.css @@ -10,6 +10,10 @@ top: 1.2em; } +.ui.modal > .close.inside { + color: inherit; +} + .ui.modal > .close.icon[height="16"] { top: 0.7em; /* fomantic uses absolute layout, so if we have special icon size, it needs this trick to align vertically */ color: var(--color-text-dark); diff --git a/web_src/css/repo.css b/web_src/css/repo.css index 52f9d5a6ca83d..887789115ebbd 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -654,15 +654,15 @@ td .commit-summary { padding: 2px .5rem; } -.repository.view.issue .issue-title .index { +.issue-title .index { color: var(--color-text-light-2); } -.repository.view.issue .issue-title .label { +.issue-title .label { margin-right: 10px; } -.repository.view.issue .issue-title .edit-zone { +.issue-title .edit-zone { margin-top: 10px; } @@ -1164,14 +1164,6 @@ td .commit-summary { font-size: 14px; } -.repository.compare.pull .title .issue-title { - margin-bottom: 0.5rem; -} - -.repository.compare.pull .title .issue-title .index { - color: var(--color-text-light-2); -} - .repository .ui.dropdown.filter > .menu { margin-top: 1px; } diff --git a/web_src/fomantic/build/semantic.css b/web_src/fomantic/build/semantic.css index 8ce9ee24ea8f0..7c404bdb30a0f 100644 --- a/web_src/fomantic/build/semantic.css +++ b/web_src/fomantic/build/semantic.css @@ -8,2324 +8,6 @@ * http://opensource.org/licenses/MIT * */ -/*! - * # Fomantic-UI - Button - * http://github.com/fomantic/Fomantic-UI/ - * - * - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ - -/******************************* - Button -*******************************/ - -.ui.button { - cursor: pointer; - display: inline-block; - min-height: 1em; - outline: none; - border: none; - vertical-align: baseline; - background: #E0E1E2 none; - color: rgba(0, 0, 0, 0.6); - font-family: var(--fonts-regular); - margin: 0 0.25em 0 0; - padding: 0.78571429em 1.5em 0.78571429em; - text-transform: none; - text-shadow: none; - font-weight: 500; - line-height: 1em; - font-style: normal; - text-align: center; - text-decoration: none; - border-radius: 0.28571429rem; - box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset; - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; - transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, background 0.1s ease; - will-change: auto; - -webkit-tap-highlight-color: transparent; -} - -/******************************* - States -*******************************/ - -/*-------------- - Hover ----------------*/ - -.ui.button:hover { - background-color: #CACBCD; - background-image: none; - box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset; - color: rgba(0, 0, 0, 0.8); -} - -.ui.button:hover .icon { - opacity: 0.85; -} - -/*-------------- - Focus ----------------*/ - -.ui.button:focus { - background-color: #CACBCD; - color: rgba(0, 0, 0, 0.8); - background-image: none; - box-shadow: ''; -} - -.ui.button:focus .icon { - opacity: 0.85; -} - -/*-------------- - Down ----------------*/ - -.ui.button:active, -.ui.active.button:active { - background-color: #BABBBC; - background-image: ''; - color: rgba(0, 0, 0, 0.9); - box-shadow: 0 0 0 1px transparent inset, none; -} - -/*-------------- - Active ----------------*/ - -.ui.active.button { - background-color: #C0C1C2; - background-image: none; - box-shadow: 0 0 0 1px transparent inset; - color: rgba(0, 0, 0, 0.95); -} - -.ui.active.button:hover { - background-color: #C0C1C2; - background-image: none; - color: rgba(0, 0, 0, 0.95); -} - -.ui.active.button:active { - background-color: #C0C1C2; - background-image: none; -} - -/*-------------- - Loading ----------------*/ - -/* Specificity hack */ - -.ui.loading.loading.loading.loading.loading.loading.button { - position: relative; - cursor: default; - text-shadow: none !important; - color: transparent; - opacity: 1; - pointer-events: auto; - transition: all 0s linear, opacity 0.1s ease; -} - -.ui.loading.button:before { - position: absolute; - content: ''; - top: 50%; - left: 50%; - margin: -0.64285714em 0 0 -0.64285714em; - width: 1.28571429em; - height: 1.28571429em; - border-radius: 500rem; - border: 0.2em solid rgba(0, 0, 0, 0.15); -} - -.ui.loading.button:after { - position: absolute; - content: ''; - top: 50%; - left: 50%; - margin: -0.64285714em 0 0 -0.64285714em; - width: 1.28571429em; - height: 1.28571429em; - border-radius: 500rem; - animation: loader 0.6s infinite linear; - border: 0.2em solid currentColor; - color: #FFFFFF; - box-shadow: 0 0 0 1px transparent; -} - -.ui.labeled.icon.loading.button .icon { - background-color: transparent; - box-shadow: none; -} - -.ui.basic.loading.button:not(.inverted):before { - border-color: rgba(0, 0, 0, 0.1); -} - -.ui.basic.loading.button:not(.inverted):after { - border-color: #767676; -} - -/*------------------- - Disabled - --------------------*/ - -.ui.buttons .disabled.button:not(.basic), -.ui.disabled.button, -.ui.button:disabled, -.ui.disabled.button:hover, -.ui.disabled.active.button { - cursor: default; - opacity: var(--opacity-disabled) !important; - background-image: none; - box-shadow: none; - pointer-events: none !important; -} - -/* Basic Group With Disabled */ - -.ui.basic.buttons .ui.disabled.button { - border-color: rgba(34, 36, 38, 0.5); -} - -/******************************* - Types -*******************************/ - -/*------------------- - Labeled Button - --------------------*/ - -.ui.labeled.button:not(.icon) { - display: inline-flex; - flex-direction: row; - background: none; - padding: 0 !important; - border: none; - box-shadow: none; -} - -.ui.labeled.button > .button { - margin: 0; -} - -.ui.labeled.button > .label { - display: flex; - align-items: center; - margin: 0 0 0 -1px !important; - font-size: 1em; - padding: ''; - border-color: rgba(34, 36, 38, 0.15); -} - -/* Tag */ - -.ui.labeled.button > .tag.label:before { - width: 1.85em; - height: 1.85em; -} - -/* Right */ - -.ui.labeled.button:not([class*="left labeled"]) > .button { - border-top-right-radius: 0; - border-bottom-right-radius: 0; -} - -.ui.labeled.button:not([class*="left labeled"]) > .label { - border-top-left-radius: 0; - border-bottom-left-radius: 0; -} - -/* Left Side */ - -.ui[class*="left labeled"].button > .button { - border-top-left-radius: 0; - border-bottom-left-radius: 0; -} - -.ui[class*="left labeled"].button > .label { - border-top-right-radius: 0; - border-bottom-right-radius: 0; -} - -/*-------------- - Icon ----------------*/ - -.ui.button > .icon:not(.button) { - height: auto; - opacity: 0.8; - transition: opacity 0.1s ease; - color: ''; -} - -.ui.button:not(.icon) > .icon:not(.button):not(.dropdown), -.ui.button:not(.icon) > .icons:not(.button):not(.dropdown) { - margin: 0 0.42857143em 0 -0.21428571em; - vertical-align: baseline; -} - -.ui.button:not(.icon) > .icons:not(.button):not(.dropdown) > .icon { - vertical-align: baseline; -} - -.ui.button:not(.icon) > .right.icon:not(.button):not(.dropdown) { - margin: 0 -0.21428571em 0 0.42857143em; -} - -/******************************* - Variations -*******************************/ - -/*------------------- - Floated - --------------------*/ - -.ui[class*="left floated"].buttons, -.ui[class*="left floated"].button { - float: left; - margin-left: 0; - margin-right: 0.25em; -} - -.ui[class*="right floated"].buttons, -.ui[class*="right floated"].button { - float: right; - margin-right: 0; - margin-left: 0.25em; -} - -/*------------------- - Compact - --------------------*/ - -.ui.compact.buttons .button, -.ui.compact.button { - padding: 0.58928571em 1.125em 0.58928571em; -} - -.ui.compact.icon.buttons .button, -.ui.compact.icon.button { - padding: 0.58928571em 0.58928571em 0.58928571em; -} - -.ui.compact.labeled.icon.buttons .button, -.ui.compact.labeled.icon.button { - padding: 0.58928571em 3.69642857em 0.58928571em; -} - -.ui.compact.labeled.icon.buttons .button > .icon, -.ui.compact.labeled.icon.button > .icon { - padding: 0.58928571em 0 0.58928571em 0; -} - -/*------------------- - Sizes ---------------------*/ - -.ui.buttons .button, -.ui.buttons .or, -.ui.button { - font-size: 1rem; -} - -.ui.mini.buttons .dropdown, -.ui.mini.buttons .dropdown .menu > .item, -.ui.mini.buttons .button, -.ui.mini.buttons .or, -.ui.ui.ui.ui.mini.button { - font-size: 0.78571429rem; -} - -.ui.tiny.buttons .dropdown, -.ui.tiny.buttons .dropdown .menu > .item, -.ui.tiny.buttons .button, -.ui.tiny.buttons .or, -.ui.ui.ui.ui.tiny.button { - font-size: 0.85714286rem; -} - -.ui.small.buttons .dropdown, -.ui.small.buttons .dropdown .menu > .item, -.ui.small.buttons .button, -.ui.small.buttons .or, -.ui.ui.ui.ui.small.button { - font-size: 0.92857143rem; -} - -.ui.large.buttons .dropdown, -.ui.large.buttons .dropdown .menu > .item, -.ui.large.buttons .button, -.ui.large.buttons .or, -.ui.ui.ui.ui.large.button { - font-size: 1.14285714rem; -} - -.ui.big.buttons .dropdown, -.ui.big.buttons .dropdown .menu > .item, -.ui.big.buttons .button, -.ui.big.buttons .or, -.ui.ui.ui.ui.big.button { - font-size: 1.28571429rem; -} - -.ui.huge.buttons .dropdown, -.ui.huge.buttons .dropdown .menu > .item, -.ui.huge.buttons .button, -.ui.huge.buttons .or, -.ui.ui.ui.ui.huge.button { - font-size: 1.42857143rem; -} - -.ui.massive.buttons .dropdown, -.ui.massive.buttons .dropdown .menu > .item, -.ui.massive.buttons .button, -.ui.massive.buttons .or, -.ui.ui.ui.ui.massive.button { - font-size: 1.71428571rem; -} - -/*-------------- - Icon Only ----------------*/ - -.ui.icon.buttons .button, -.ui.icon.button:not(.animated):not(.compact) { - padding: 0.78571429em 0.78571429em 0.78571429em; -} - -.ui.animated.icon.button > .content > .icon, -.ui.icon.buttons .button > .icon, -.ui.icon.button > .icon { - opacity: 0.9; - margin: 0 !important; - vertical-align: top; -} - -.ui.animated.button > .content > .icon { - vertical-align: top; -} - -/*------------------- - Basic - --------------------*/ - -.ui.basic.buttons .button, -.ui.basic.button { - background: transparent none; - color: rgba(0, 0, 0, 0.6); - font-weight: normal; - border-radius: 0.28571429rem; - text-transform: none; - text-shadow: none !important; - box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.15) inset; -} - -.ui.basic.buttons { - box-shadow: none; - border: 1px solid rgba(34, 36, 38, 0.15); - border-radius: 0.28571429rem; -} - -.ui.basic.buttons .button { - border-radius: 0; -} - -.ui.basic.buttons .button:hover, -.ui.basic.button:hover { - background: #FFFFFF; - color: rgba(0, 0, 0, 0.8); - box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.35) inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset; -} - -.ui.basic.buttons .button:focus, -.ui.basic.button:focus { - background: #FFFFFF; - color: rgba(0, 0, 0, 0.8); - box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.35) inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset; -} - -.ui.basic.buttons .button:active, -.ui.basic.button:active { - background: #F8F8F8; - color: rgba(0, 0, 0, 0.9); - box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset, 0 1px 4px 0 rgba(34, 36, 38, 0.15) inset; -} - -.ui.basic.buttons .active.button, -.ui.basic.active.button { - background: rgba(0, 0, 0, 0.05); - box-shadow: ''; - color: rgba(0, 0, 0, 0.95); -} - -.ui.basic.buttons .active.button:hover, -.ui.basic.active.button:hover { - background-color: rgba(0, 0, 0, 0.05); -} - -/* Vertical */ - -.ui.basic.buttons .button:hover { - box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.35) inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset inset; -} - -.ui.basic.buttons .button:active { - box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset, 0 1px 4px 0 rgba(34, 36, 38, 0.15) inset inset; -} - -.ui.basic.buttons .active.button { - box-shadow: ''; -} - -/* Basic Group */ - -.ui.basic.buttons .button { - border-left: 1px solid rgba(34, 36, 38, 0.15); - box-shadow: none; -} - -.ui.basic.vertical.buttons .button { - border-left: none; - border-left-width: 0; - border-top: 1px solid rgba(34, 36, 38, 0.15); -} - -.ui.basic.vertical.buttons .button:first-child { - border-top-width: 0; -} - -/*-------------- - Labeled Icon - ---------------*/ - -.ui.labeled.icon.buttons .button, -.ui.labeled.icon.button { - position: relative; - padding-left: 4.07142857em !important; - padding-right: 1.5em !important; -} - -/* Left Labeled */ - -.ui.labeled.icon.buttons > .button > .icon, -.ui.labeled.icon.button > .icon { - position: absolute; - top: 0; - left: 0; - height: 100%; - line-height: 1; - border-radius: 0; - border-top-left-radius: inherit; - border-bottom-left-radius: inherit; - text-align: center; - animation: none; - padding: 0.78571429em 0 0.78571429em 0; - margin: 0; - width: 2.57142857em; - background-color: rgba(0, 0, 0, 0.05); - color: ''; - box-shadow: -1px 0 0 0 transparent inset; -} - -/* Right Labeled */ - -.ui[class*="right labeled"].icon.button { - padding-right: 4.07142857em !important; - padding-left: 1.5em !important; -} - -.ui[class*="right labeled"].icon.button > .icon { - left: auto; - right: 0; - border-radius: 0; - border-top-right-radius: inherit; - border-bottom-right-radius: inherit; - box-shadow: 1px 0 0 0 transparent inset; -} - -.ui.labeled.icon.buttons > .button > .icon:before, -.ui.labeled.icon.button > .icon:before, -.ui.labeled.icon.buttons > .button > .icon:after, -.ui.labeled.icon.button > .icon:after { - display: block; - position: relative; - width: 100%; - top: 0; - text-align: center; -} - -.ui.labeled.icon.buttons .button > .icon { - border-radius: 0; -} - -.ui.labeled.icon.buttons .button:first-child > .icon { - border-top-left-radius: 0.28571429rem; - border-bottom-left-radius: 0.28571429rem; -} - -.ui.labeled.icon.buttons .button:last-child > .icon { - border-top-right-radius: 0.28571429rem; - border-bottom-right-radius: 0.28571429rem; -} - -.ui.vertical.labeled.icon.buttons .button:first-child > .icon { - border-radius: 0; - border-top-left-radius: 0.28571429rem; -} - -.ui.vertical.labeled.icon.buttons .button:last-child > .icon { - border-radius: 0; - border-bottom-left-radius: 0.28571429rem; -} - -/* Loading Icon in Labeled Button */ - -.ui.labeled.icon.button > .loading.icon:before { - animation: loader 2s linear infinite; -} - -/*-------------- - Toggle - ---------------*/ - -/* Toggle (Modifies active state to give affordances) */ - -.ui.toggle.buttons .active.button, -.ui.buttons .button.toggle.active, -.ui.button.toggle.active { - background-color: #21BA45; - box-shadow: none; - text-shadow: none; - color: #FFFFFF; -} - -.ui.button.toggle.active:hover { - background-color: #16ab39; - text-shadow: none; - color: #FFFFFF; -} - -/*-------------- - Circular - ---------------*/ - -.ui.circular.button { - border-radius: 10em; -} - -.ui.circular.button > .icon { - width: 1em; - vertical-align: baseline; -} - -/*------------------- - Or Buttons - --------------------*/ - -.ui.buttons .or { - position: relative; - width: 0.3em; - height: 2.57142857em; - z-index: 3; -} - -.ui.buttons .or:before { - position: absolute; - text-align: center; - border-radius: 500rem; - content: 'or'; - top: 50%; - left: 50%; - background-color: #FFFFFF; - text-shadow: none; - margin-top: -0.89285714em; - margin-left: -0.89285714em; - width: 1.78571429em; - height: 1.78571429em; - line-height: 1.78571429em; - color: rgba(0, 0, 0, 0.4); - font-style: normal; - font-weight: 500; - box-shadow: 0 0 0 1px transparent inset; -} - -.ui.buttons .or[data-text]:before { - content: attr(data-text); -} - -/* Fluid Or */ - -.ui.fluid.buttons .or { - width: 0 !important; -} - -.ui.fluid.buttons .or:after { - display: none; -} - -/*------------------- - Fluid - --------------------*/ - -.ui.fluid.buttons, -.ui.fluid.button { - width: 100%; -} - -.ui.fluid.button { - display: block; -} - -.ui.two.buttons { - width: 100%; -} - -.ui.two.buttons > .button { - width: 50%; -} - -.ui.three.buttons { - width: 100%; -} - -.ui.three.buttons > .button { - width: 33.333%; -} - -.ui.four.buttons { - width: 100%; -} - -.ui.four.buttons > .button { - width: 25%; -} - -.ui.five.buttons { - width: 100%; -} - -.ui.five.buttons > .button { - width: 20%; -} - -.ui.six.buttons { - width: 100%; -} - -.ui.six.buttons > .button { - width: 16.666%; -} - -.ui.seven.buttons { - width: 100%; -} - -.ui.seven.buttons > .button { - width: 14.285%; -} - -.ui.eight.buttons { - width: 100%; -} - -.ui.eight.buttons > .button { - width: 12.5%; -} - -.ui.nine.buttons { - width: 100%; -} - -.ui.nine.buttons > .button { - width: 11.11%; -} - -.ui.ten.buttons { - width: 100%; -} - -.ui.ten.buttons > .button { - width: 10%; -} - -.ui.eleven.buttons { - width: 100%; -} - -.ui.eleven.buttons > .button { - width: 9.09%; -} - -.ui.twelve.buttons { - width: 100%; -} - -.ui.twelve.buttons > .button { - width: 8.3333%; -} - -/* Fluid Vertical Buttons */ - -.ui.fluid.vertical.buttons, -.ui.fluid.vertical.buttons > .button { - display: flex; - width: auto; - justify-content: center; -} - -.ui.two.vertical.buttons > .button { - height: 50%; -} - -.ui.three.vertical.buttons > .button { - height: 33.333%; -} - -.ui.four.vertical.buttons > .button { - height: 25%; -} - -.ui.five.vertical.buttons > .button { - height: 20%; -} - -.ui.six.vertical.buttons > .button { - height: 16.666%; -} - -.ui.seven.vertical.buttons > .button { - height: 14.285%; -} - -.ui.eight.vertical.buttons > .button { - height: 12.5%; -} - -.ui.nine.vertical.buttons > .button { - height: 11.11%; -} - -.ui.ten.vertical.buttons > .button { - height: 10%; -} - -.ui.eleven.vertical.buttons > .button { - height: 9.09%; -} - -.ui.twelve.vertical.buttons > .button { - height: 8.3333%; -} - -/*------------------- - Colors ---------------------*/ - -.ui.primary.buttons .button, -.ui.primary.button { - background-color: #2185D0; - color: #FFFFFF; - text-shadow: none; - background-image: none; -} - -.ui.primary.button { - box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; -} - -.ui.primary.buttons .button:hover, -.ui.primary.button:hover { - background-color: #1678c2; - color: #FFFFFF; - text-shadow: none; -} - -.ui.primary.buttons .button:focus, -.ui.primary.button:focus { - background-color: #0d71bb; - color: #FFFFFF; - text-shadow: none; -} - -.ui.primary.buttons .button:active, -.ui.primary.button:active { - background-color: #1a69a4; - color: #FFFFFF; - text-shadow: none; -} - -.ui.primary.buttons .active.button, -.ui.primary.buttons .active.button:active, -.ui.primary.active.button, -.ui.primary.button .active.button:active { - background-color: #1279c6; - color: #FFFFFF; - text-shadow: none; -} - -/* Basic */ - -.ui.basic.primary.buttons .button, -.ui.basic.primary.button { - background: transparent; - box-shadow: 0 0 0 1px #2185D0 inset; - color: #2185D0; -} - -.ui.basic.primary.buttons .button:hover, -.ui.basic.primary.button:hover { - background: transparent; - box-shadow: 0 0 0 1px #1678c2 inset; - color: #1678c2; -} - -.ui.basic.primary.buttons .button:focus, -.ui.basic.primary.button:focus { - background: transparent; - box-shadow: 0 0 0 1px #0d71bb inset; - color: #1678c2; -} - -.ui.basic.primary.buttons .active.button, -.ui.basic.primary.active.button { - background: transparent; - box-shadow: 0 0 0 1px #1279c6 inset; - color: #1a69a4; -} - -.ui.basic.primary.buttons .button:active, -.ui.basic.primary.button:active { - box-shadow: 0 0 0 1px #1a69a4 inset; - color: #1a69a4; -} - -.ui.buttons:not(.vertical) > .basic.primary.button:not(:first-child) { - margin-left: -1px; -} - -.ui.secondary.buttons .button, -.ui.secondary.button { - background-color: #1B1C1D; - color: #FFFFFF; - text-shadow: none; - background-image: none; -} - -.ui.secondary.button { - box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; -} - -.ui.secondary.buttons .button:hover, -.ui.secondary.button:hover { - background-color: #27292a; - color: #FFFFFF; - text-shadow: none; -} - -.ui.secondary.buttons .button:focus, -.ui.secondary.button:focus { - background-color: #2e3032; - color: #FFFFFF; - text-shadow: none; -} - -.ui.secondary.buttons .button:active, -.ui.secondary.button:active { - background-color: #343637; - color: #FFFFFF; - text-shadow: none; -} - -.ui.secondary.buttons .active.button, -.ui.secondary.buttons .active.button:active, -.ui.secondary.active.button, -.ui.secondary.button .active.button:active { - background-color: #27292a; - color: #FFFFFF; - text-shadow: none; -} - -/* Basic */ - -.ui.basic.secondary.buttons .button, -.ui.basic.secondary.button { - background: transparent; - box-shadow: 0 0 0 1px #1B1C1D inset; - color: #1B1C1D; -} - -.ui.basic.secondary.buttons .button:hover, -.ui.basic.secondary.button:hover { - background: transparent; - box-shadow: 0 0 0 1px #27292a inset; - color: #27292a; -} - -.ui.basic.secondary.buttons .button:focus, -.ui.basic.secondary.button:focus { - background: transparent; - box-shadow: 0 0 0 1px #2e3032 inset; - color: #27292a; -} - -.ui.basic.secondary.buttons .active.button, -.ui.basic.secondary.active.button { - background: transparent; - box-shadow: 0 0 0 1px #27292a inset; - color: #343637; -} - -.ui.basic.secondary.buttons .button:active, -.ui.basic.secondary.button:active { - box-shadow: 0 0 0 1px #343637 inset; - color: #343637; -} - -.ui.buttons:not(.vertical) > .basic.secondary.button:not(:first-child) { - margin-left: -1px; -} - -.ui.red.buttons .button, -.ui.red.button { - background-color: #DB2828; - color: #FFFFFF; - text-shadow: none; - background-image: none; -} - -.ui.red.button { - box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; -} - -.ui.red.buttons .button:hover, -.ui.red.button:hover { - background-color: #d01919; - color: #FFFFFF; - text-shadow: none; -} - -.ui.red.buttons .button:focus, -.ui.red.button:focus { - background-color: #ca1010; - color: #FFFFFF; - text-shadow: none; -} - -.ui.red.buttons .button:active, -.ui.red.button:active { - background-color: #b21e1e; - color: #FFFFFF; - text-shadow: none; -} - -.ui.red.buttons .active.button, -.ui.red.buttons .active.button:active, -.ui.red.active.button, -.ui.red.button .active.button:active { - background-color: #d41515; - color: #FFFFFF; - text-shadow: none; -} - -/* Basic */ - -.ui.basic.red.buttons .button, -.ui.basic.red.button { - background: transparent; - box-shadow: 0 0 0 1px #DB2828 inset; - color: #DB2828; -} - -.ui.basic.red.buttons .button:hover, -.ui.basic.red.button:hover { - background: transparent; - box-shadow: 0 0 0 1px #d01919 inset; - color: #d01919; -} - -.ui.basic.red.buttons .button:focus, -.ui.basic.red.button:focus { - background: transparent; - box-shadow: 0 0 0 1px #ca1010 inset; - color: #d01919; -} - -.ui.basic.red.buttons .active.button, -.ui.basic.red.active.button { - background: transparent; - box-shadow: 0 0 0 1px #d41515 inset; - color: #b21e1e; -} - -.ui.basic.red.buttons .button:active, -.ui.basic.red.button:active { - box-shadow: 0 0 0 1px #b21e1e inset; - color: #b21e1e; -} - -.ui.buttons:not(.vertical) > .basic.red.button:not(:first-child) { - margin-left: -1px; -} - -.ui.orange.buttons .button, -.ui.orange.button { - background-color: #F2711C; - color: #FFFFFF; - text-shadow: none; - background-image: none; -} - -.ui.orange.button { - box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; -} - -.ui.orange.buttons .button:hover, -.ui.orange.button:hover { - background-color: #f26202; - color: #FFFFFF; - text-shadow: none; -} - -.ui.orange.buttons .button:focus, -.ui.orange.button:focus { - background-color: #e55b00; - color: #FFFFFF; - text-shadow: none; -} - -.ui.orange.buttons .button:active, -.ui.orange.button:active { - background-color: #cf590c; - color: #FFFFFF; - text-shadow: none; -} - -.ui.orange.buttons .active.button, -.ui.orange.buttons .active.button:active, -.ui.orange.active.button, -.ui.orange.button .active.button:active { - background-color: #f56100; - color: #FFFFFF; - text-shadow: none; -} - -/* Basic */ - -.ui.basic.orange.buttons .button, -.ui.basic.orange.button { - background: transparent; - box-shadow: 0 0 0 1px #F2711C inset; - color: #F2711C; -} - -.ui.basic.orange.buttons .button:hover, -.ui.basic.orange.button:hover { - background: transparent; - box-shadow: 0 0 0 1px #f26202 inset; - color: #f26202; -} - -.ui.basic.orange.buttons .button:focus, -.ui.basic.orange.button:focus { - background: transparent; - box-shadow: 0 0 0 1px #e55b00 inset; - color: #f26202; -} - -.ui.basic.orange.buttons .active.button, -.ui.basic.orange.active.button { - background: transparent; - box-shadow: 0 0 0 1px #f56100 inset; - color: #cf590c; -} - -.ui.basic.orange.buttons .button:active, -.ui.basic.orange.button:active { - box-shadow: 0 0 0 1px #cf590c inset; - color: #cf590c; -} - -.ui.buttons:not(.vertical) > .basic.orange.button:not(:first-child) { - margin-left: -1px; -} - -.ui.yellow.buttons .button, -.ui.yellow.button { - background-color: #FBBD08; - color: #FFFFFF; - text-shadow: none; - background-image: none; -} - -.ui.yellow.button { - box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; -} - -.ui.yellow.buttons .button:hover, -.ui.yellow.button:hover { - background-color: #eaae00; - color: #FFFFFF; - text-shadow: none; -} - -.ui.yellow.buttons .button:focus, -.ui.yellow.button:focus { - background-color: #daa300; - color: #FFFFFF; - text-shadow: none; -} - -.ui.yellow.buttons .button:active, -.ui.yellow.button:active { - background-color: #cd9903; - color: #FFFFFF; - text-shadow: none; -} - -.ui.yellow.buttons .active.button, -.ui.yellow.buttons .active.button:active, -.ui.yellow.active.button, -.ui.yellow.button .active.button:active { - background-color: #eaae00; - color: #FFFFFF; - text-shadow: none; -} - -/* Basic */ - -.ui.basic.yellow.buttons .button, -.ui.basic.yellow.button { - background: transparent; - box-shadow: 0 0 0 1px #FBBD08 inset; - color: #FBBD08; -} - -.ui.basic.yellow.buttons .button:hover, -.ui.basic.yellow.button:hover { - background: transparent; - box-shadow: 0 0 0 1px #eaae00 inset; - color: #eaae00; -} - -.ui.basic.yellow.buttons .button:focus, -.ui.basic.yellow.button:focus { - background: transparent; - box-shadow: 0 0 0 1px #daa300 inset; - color: #eaae00; -} - -.ui.basic.yellow.buttons .active.button, -.ui.basic.yellow.active.button { - background: transparent; - box-shadow: 0 0 0 1px #eaae00 inset; - color: #cd9903; -} - -.ui.basic.yellow.buttons .button:active, -.ui.basic.yellow.button:active { - box-shadow: 0 0 0 1px #cd9903 inset; - color: #cd9903; -} - -.ui.buttons:not(.vertical) > .basic.yellow.button:not(:first-child) { - margin-left: -1px; -} - -.ui.olive.buttons .button, -.ui.olive.button { - background-color: #B5CC18; - color: #FFFFFF; - text-shadow: none; - background-image: none; -} - -.ui.olive.button { - box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; -} - -.ui.olive.buttons .button:hover, -.ui.olive.button:hover { - background-color: #a7bd0d; - color: #FFFFFF; - text-shadow: none; -} - -.ui.olive.buttons .button:focus, -.ui.olive.button:focus { - background-color: #a0b605; - color: #FFFFFF; - text-shadow: none; -} - -.ui.olive.buttons .button:active, -.ui.olive.button:active { - background-color: #8d9e13; - color: #FFFFFF; - text-shadow: none; -} - -.ui.olive.buttons .active.button, -.ui.olive.buttons .active.button:active, -.ui.olive.active.button, -.ui.olive.button .active.button:active { - background-color: #aac109; - color: #FFFFFF; - text-shadow: none; -} - -/* Basic */ - -.ui.basic.olive.buttons .button, -.ui.basic.olive.button { - background: transparent; - box-shadow: 0 0 0 1px #B5CC18 inset; - color: #B5CC18; -} - -.ui.basic.olive.buttons .button:hover, -.ui.basic.olive.button:hover { - background: transparent; - box-shadow: 0 0 0 1px #a7bd0d inset; - color: #a7bd0d; -} - -.ui.basic.olive.buttons .button:focus, -.ui.basic.olive.button:focus { - background: transparent; - box-shadow: 0 0 0 1px #a0b605 inset; - color: #a7bd0d; -} - -.ui.basic.olive.buttons .active.button, -.ui.basic.olive.active.button { - background: transparent; - box-shadow: 0 0 0 1px #aac109 inset; - color: #8d9e13; -} - -.ui.basic.olive.buttons .button:active, -.ui.basic.olive.button:active { - box-shadow: 0 0 0 1px #8d9e13 inset; - color: #8d9e13; -} - -.ui.buttons:not(.vertical) > .basic.olive.button:not(:first-child) { - margin-left: -1px; -} - -.ui.green.buttons .button, -.ui.green.button { - background-color: #21BA45; - color: #FFFFFF; - text-shadow: none; - background-image: none; -} - -.ui.green.button { - box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; -} - -.ui.green.buttons .button:hover, -.ui.green.button:hover { - background-color: #16ab39; - color: #FFFFFF; - text-shadow: none; -} - -.ui.green.buttons .button:focus, -.ui.green.button:focus { - background-color: #0ea432; - color: #FFFFFF; - text-shadow: none; -} - -.ui.green.buttons .button:active, -.ui.green.button:active { - background-color: #198f35; - color: #FFFFFF; - text-shadow: none; -} - -.ui.green.buttons .active.button, -.ui.green.buttons .active.button:active, -.ui.green.active.button, -.ui.green.button .active.button:active { - background-color: #13ae38; - color: #FFFFFF; - text-shadow: none; -} - -/* Basic */ - -.ui.basic.green.buttons .button, -.ui.basic.green.button { - background: transparent; - box-shadow: 0 0 0 1px #21BA45 inset; - color: #21BA45; -} - -.ui.basic.green.buttons .button:hover, -.ui.basic.green.button:hover { - background: transparent; - box-shadow: 0 0 0 1px #16ab39 inset; - color: #16ab39; -} - -.ui.basic.green.buttons .button:focus, -.ui.basic.green.button:focus { - background: transparent; - box-shadow: 0 0 0 1px #0ea432 inset; - color: #16ab39; -} - -.ui.basic.green.buttons .active.button, -.ui.basic.green.active.button { - background: transparent; - box-shadow: 0 0 0 1px #13ae38 inset; - color: #198f35; -} - -.ui.basic.green.buttons .button:active, -.ui.basic.green.button:active { - box-shadow: 0 0 0 1px #198f35 inset; - color: #198f35; -} - -.ui.buttons:not(.vertical) > .basic.green.button:not(:first-child) { - margin-left: -1px; -} - -.ui.teal.buttons .button, -.ui.teal.button { - background-color: #00B5AD; - color: #FFFFFF; - text-shadow: none; - background-image: none; -} - -.ui.teal.button { - box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; -} - -.ui.teal.buttons .button:hover, -.ui.teal.button:hover { - background-color: #009c95; - color: #FFFFFF; - text-shadow: none; -} - -.ui.teal.buttons .button:focus, -.ui.teal.button:focus { - background-color: #008c86; - color: #FFFFFF; - text-shadow: none; -} - -.ui.teal.buttons .button:active, -.ui.teal.button:active { - background-color: #00827c; - color: #FFFFFF; - text-shadow: none; -} - -.ui.teal.buttons .active.button, -.ui.teal.buttons .active.button:active, -.ui.teal.active.button, -.ui.teal.button .active.button:active { - background-color: #009c95; - color: #FFFFFF; - text-shadow: none; -} - -/* Basic */ - -.ui.basic.teal.buttons .button, -.ui.basic.teal.button { - background: transparent; - box-shadow: 0 0 0 1px #00B5AD inset; - color: #00B5AD; -} - -.ui.basic.teal.buttons .button:hover, -.ui.basic.teal.button:hover { - background: transparent; - box-shadow: 0 0 0 1px #009c95 inset; - color: #009c95; -} - -.ui.basic.teal.buttons .button:focus, -.ui.basic.teal.button:focus { - background: transparent; - box-shadow: 0 0 0 1px #008c86 inset; - color: #009c95; -} - -.ui.basic.teal.buttons .active.button, -.ui.basic.teal.active.button { - background: transparent; - box-shadow: 0 0 0 1px #009c95 inset; - color: #00827c; -} - -.ui.basic.teal.buttons .button:active, -.ui.basic.teal.button:active { - box-shadow: 0 0 0 1px #00827c inset; - color: #00827c; -} - -.ui.buttons:not(.vertical) > .basic.teal.button:not(:first-child) { - margin-left: -1px; -} - -.ui.blue.buttons .button, -.ui.blue.button { - background-color: #2185D0; - color: #FFFFFF; - text-shadow: none; - background-image: none; -} - -.ui.blue.button { - box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; -} - -.ui.blue.buttons .button:hover, -.ui.blue.button:hover { - background-color: #1678c2; - color: #FFFFFF; - text-shadow: none; -} - -.ui.blue.buttons .button:focus, -.ui.blue.button:focus { - background-color: #0d71bb; - color: #FFFFFF; - text-shadow: none; -} - -.ui.blue.buttons .button:active, -.ui.blue.button:active { - background-color: #1a69a4; - color: #FFFFFF; - text-shadow: none; -} - -.ui.blue.buttons .active.button, -.ui.blue.buttons .active.button:active, -.ui.blue.active.button, -.ui.blue.button .active.button:active { - background-color: #1279c6; - color: #FFFFFF; - text-shadow: none; -} - -/* Basic */ - -.ui.basic.blue.buttons .button, -.ui.basic.blue.button { - background: transparent; - box-shadow: 0 0 0 1px #2185D0 inset; - color: #2185D0; -} - -.ui.basic.blue.buttons .button:hover, -.ui.basic.blue.button:hover { - background: transparent; - box-shadow: 0 0 0 1px #1678c2 inset; - color: #1678c2; -} - -.ui.basic.blue.buttons .button:focus, -.ui.basic.blue.button:focus { - background: transparent; - box-shadow: 0 0 0 1px #0d71bb inset; - color: #1678c2; -} - -.ui.basic.blue.buttons .active.button, -.ui.basic.blue.active.button { - background: transparent; - box-shadow: 0 0 0 1px #1279c6 inset; - color: #1a69a4; -} - -.ui.basic.blue.buttons .button:active, -.ui.basic.blue.button:active { - box-shadow: 0 0 0 1px #1a69a4 inset; - color: #1a69a4; -} - -.ui.buttons:not(.vertical) > .basic.blue.button:not(:first-child) { - margin-left: -1px; -} - -.ui.violet.buttons .button, -.ui.violet.button { - background-color: #6435C9; - color: #FFFFFF; - text-shadow: none; - background-image: none; -} - -.ui.violet.button { - box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; -} - -.ui.violet.buttons .button:hover, -.ui.violet.button:hover { - background-color: #5829bb; - color: #FFFFFF; - text-shadow: none; -} - -.ui.violet.buttons .button:focus, -.ui.violet.button:focus { - background-color: #4f20b5; - color: #FFFFFF; - text-shadow: none; -} - -.ui.violet.buttons .button:active, -.ui.violet.button:active { - background-color: #502aa1; - color: #FFFFFF; - text-shadow: none; -} - -.ui.violet.buttons .active.button, -.ui.violet.buttons .active.button:active, -.ui.violet.active.button, -.ui.violet.button .active.button:active { - background-color: #5626bf; - color: #FFFFFF; - text-shadow: none; -} - -/* Basic */ - -.ui.basic.violet.buttons .button, -.ui.basic.violet.button { - background: transparent; - box-shadow: 0 0 0 1px #6435C9 inset; - color: #6435C9; -} - -.ui.basic.violet.buttons .button:hover, -.ui.basic.violet.button:hover { - background: transparent; - box-shadow: 0 0 0 1px #5829bb inset; - color: #5829bb; -} - -.ui.basic.violet.buttons .button:focus, -.ui.basic.violet.button:focus { - background: transparent; - box-shadow: 0 0 0 1px #4f20b5 inset; - color: #5829bb; -} - -.ui.basic.violet.buttons .active.button, -.ui.basic.violet.active.button { - background: transparent; - box-shadow: 0 0 0 1px #5626bf inset; - color: #502aa1; -} - -.ui.basic.violet.buttons .button:active, -.ui.basic.violet.button:active { - box-shadow: 0 0 0 1px #502aa1 inset; - color: #502aa1; -} - -.ui.buttons:not(.vertical) > .basic.violet.button:not(:first-child) { - margin-left: -1px; -} - -.ui.purple.buttons .button, -.ui.purple.button { - background-color: #A333C8; - color: #FFFFFF; - text-shadow: none; - background-image: none; -} - -.ui.purple.button { - box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; -} - -.ui.purple.buttons .button:hover, -.ui.purple.button:hover { - background-color: #9627ba; - color: #FFFFFF; - text-shadow: none; -} - -.ui.purple.buttons .button:focus, -.ui.purple.button:focus { - background-color: #8f1eb4; - color: #FFFFFF; - text-shadow: none; -} - -.ui.purple.buttons .button:active, -.ui.purple.button:active { - background-color: #82299f; - color: #FFFFFF; - text-shadow: none; -} - -.ui.purple.buttons .active.button, -.ui.purple.buttons .active.button:active, -.ui.purple.active.button, -.ui.purple.button .active.button:active { - background-color: #9724be; - color: #FFFFFF; - text-shadow: none; -} - -/* Basic */ - -.ui.basic.purple.buttons .button, -.ui.basic.purple.button { - background: transparent; - box-shadow: 0 0 0 1px #A333C8 inset; - color: #A333C8; -} - -.ui.basic.purple.buttons .button:hover, -.ui.basic.purple.button:hover { - background: transparent; - box-shadow: 0 0 0 1px #9627ba inset; - color: #9627ba; -} - -.ui.basic.purple.buttons .button:focus, -.ui.basic.purple.button:focus { - background: transparent; - box-shadow: 0 0 0 1px #8f1eb4 inset; - color: #9627ba; -} - -.ui.basic.purple.buttons .active.button, -.ui.basic.purple.active.button { - background: transparent; - box-shadow: 0 0 0 1px #9724be inset; - color: #82299f; -} - -.ui.basic.purple.buttons .button:active, -.ui.basic.purple.button:active { - box-shadow: 0 0 0 1px #82299f inset; - color: #82299f; -} - -.ui.buttons:not(.vertical) > .basic.purple.button:not(:first-child) { - margin-left: -1px; -} - -.ui.pink.buttons .button, -.ui.pink.button { - background-color: #E03997; - color: #FFFFFF; - text-shadow: none; - background-image: none; -} - -.ui.pink.button { - box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; -} - -.ui.pink.buttons .button:hover, -.ui.pink.button:hover { - background-color: #e61a8d; - color: #FFFFFF; - text-shadow: none; -} - -.ui.pink.buttons .button:focus, -.ui.pink.button:focus { - background-color: #e10f85; - color: #FFFFFF; - text-shadow: none; -} - -.ui.pink.buttons .button:active, -.ui.pink.button:active { - background-color: #c71f7e; - color: #FFFFFF; - text-shadow: none; -} - -.ui.pink.buttons .active.button, -.ui.pink.buttons .active.button:active, -.ui.pink.active.button, -.ui.pink.button .active.button:active { - background-color: #ea158d; - color: #FFFFFF; - text-shadow: none; -} - -/* Basic */ - -.ui.basic.pink.buttons .button, -.ui.basic.pink.button { - background: transparent; - box-shadow: 0 0 0 1px #E03997 inset; - color: #E03997; -} - -.ui.basic.pink.buttons .button:hover, -.ui.basic.pink.button:hover { - background: transparent; - box-shadow: 0 0 0 1px #e61a8d inset; - color: #e61a8d; -} - -.ui.basic.pink.buttons .button:focus, -.ui.basic.pink.button:focus { - background: transparent; - box-shadow: 0 0 0 1px #e10f85 inset; - color: #e61a8d; -} - -.ui.basic.pink.buttons .active.button, -.ui.basic.pink.active.button { - background: transparent; - box-shadow: 0 0 0 1px #ea158d inset; - color: #c71f7e; -} - -.ui.basic.pink.buttons .button:active, -.ui.basic.pink.button:active { - box-shadow: 0 0 0 1px #c71f7e inset; - color: #c71f7e; -} - -.ui.buttons:not(.vertical) > .basic.pink.button:not(:first-child) { - margin-left: -1px; -} - -.ui.brown.buttons .button, -.ui.brown.button { - background-color: #A5673F; - color: #FFFFFF; - text-shadow: none; - background-image: none; -} - -.ui.brown.button { - box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; -} - -.ui.brown.buttons .button:hover, -.ui.brown.button:hover { - background-color: #975b33; - color: #FFFFFF; - text-shadow: none; -} - -.ui.brown.buttons .button:focus, -.ui.brown.button:focus { - background-color: #90532b; - color: #FFFFFF; - text-shadow: none; -} - -.ui.brown.buttons .button:active, -.ui.brown.button:active { - background-color: #805031; - color: #FFFFFF; - text-shadow: none; -} - -.ui.brown.buttons .active.button, -.ui.brown.buttons .active.button:active, -.ui.brown.active.button, -.ui.brown.button .active.button:active { - background-color: #995a31; - color: #FFFFFF; - text-shadow: none; -} - -/* Basic */ - -.ui.basic.brown.buttons .button, -.ui.basic.brown.button { - background: transparent; - box-shadow: 0 0 0 1px #A5673F inset; - color: #A5673F; -} - -.ui.basic.brown.buttons .button:hover, -.ui.basic.brown.button:hover { - background: transparent; - box-shadow: 0 0 0 1px #975b33 inset; - color: #975b33; -} - -.ui.basic.brown.buttons .button:focus, -.ui.basic.brown.button:focus { - background: transparent; - box-shadow: 0 0 0 1px #90532b inset; - color: #975b33; -} - -.ui.basic.brown.buttons .active.button, -.ui.basic.brown.active.button { - background: transparent; - box-shadow: 0 0 0 1px #995a31 inset; - color: #805031; -} - -.ui.basic.brown.buttons .button:active, -.ui.basic.brown.button:active { - box-shadow: 0 0 0 1px #805031 inset; - color: #805031; -} - -.ui.buttons:not(.vertical) > .basic.brown.button:not(:first-child) { - margin-left: -1px; -} - -.ui.grey.buttons .button, -.ui.grey.button { - background-color: #767676; - color: #FFFFFF; - text-shadow: none; - background-image: none; -} - -.ui.grey.button { - box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; -} - -.ui.grey.buttons .button:hover, -.ui.grey.button:hover { - background-color: #838383; - color: #FFFFFF; - text-shadow: none; -} - -.ui.grey.buttons .button:focus, -.ui.grey.button:focus { - background-color: #8a8a8a; - color: #FFFFFF; - text-shadow: none; -} - -.ui.grey.buttons .button:active, -.ui.grey.button:active { - background-color: #909090; - color: #FFFFFF; - text-shadow: none; -} - -.ui.grey.buttons .active.button, -.ui.grey.buttons .active.button:active, -.ui.grey.active.button, -.ui.grey.button .active.button:active { - background-color: #696969; - color: #FFFFFF; - text-shadow: none; -} - -/* Basic */ - -.ui.basic.grey.buttons .button, -.ui.basic.grey.button { - background: transparent; - box-shadow: 0 0 0 1px #767676 inset; - color: #767676; -} - -.ui.basic.grey.buttons .button:hover, -.ui.basic.grey.button:hover { - background: transparent; - box-shadow: 0 0 0 1px #838383 inset; - color: #838383; -} - -.ui.basic.grey.buttons .button:focus, -.ui.basic.grey.button:focus { - background: transparent; - box-shadow: 0 0 0 1px #8a8a8a inset; - color: #838383; -} - -.ui.basic.grey.buttons .active.button, -.ui.basic.grey.active.button { - background: transparent; - box-shadow: 0 0 0 1px #696969 inset; - color: #909090; -} - -.ui.basic.grey.buttons .button:active, -.ui.basic.grey.button:active { - box-shadow: 0 0 0 1px #909090 inset; - color: #909090; -} - -.ui.buttons:not(.vertical) > .basic.grey.button:not(:first-child) { - margin-left: -1px; -} - -.ui.black.buttons .button, -.ui.black.button { - background-color: #1B1C1D; - color: #FFFFFF; - text-shadow: none; - background-image: none; -} - -.ui.black.button { - box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; -} - -.ui.black.buttons .button:hover, -.ui.black.button:hover { - background-color: #27292a; - color: #FFFFFF; - text-shadow: none; -} - -.ui.black.buttons .button:focus, -.ui.black.button:focus { - background-color: #2f3032; - color: #FFFFFF; - text-shadow: none; -} - -.ui.black.buttons .button:active, -.ui.black.button:active { - background-color: #343637; - color: #FFFFFF; - text-shadow: none; -} - -.ui.black.buttons .active.button, -.ui.black.buttons .active.button:active, -.ui.black.active.button, -.ui.black.button .active.button:active { - background-color: #0f0f10; - color: #FFFFFF; - text-shadow: none; -} - -/* Basic */ - -.ui.basic.black.buttons .button, -.ui.basic.black.button { - background: transparent; - box-shadow: 0 0 0 1px #1B1C1D inset; - color: #1B1C1D; -} - -.ui.basic.black.buttons .button:hover, -.ui.basic.black.button:hover { - background: transparent; - box-shadow: 0 0 0 1px #27292a inset; - color: #27292a; -} - -.ui.basic.black.buttons .button:focus, -.ui.basic.black.button:focus { - background: transparent; - box-shadow: 0 0 0 1px #2f3032 inset; - color: #27292a; -} - -.ui.basic.black.buttons .active.button, -.ui.basic.black.active.button { - background: transparent; - box-shadow: 0 0 0 1px #0f0f10 inset; - color: #343637; -} - -.ui.basic.black.buttons .button:active, -.ui.basic.black.button:active { - box-shadow: 0 0 0 1px #343637 inset; - color: #343637; -} - -.ui.buttons:not(.vertical) > .basic.black.button:not(:first-child) { - margin-left: -1px; -} - -/*--------------- - Positive -----------------*/ - -/* Standard */ - -.ui.positive.buttons .button, -.ui.positive.button { - background-color: #21BA45; - color: #FFFFFF; - text-shadow: none; - background-image: none; -} - -.ui.positive.button { - box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; -} - -.ui.positive.buttons .button:hover, -.ui.positive.button:hover { - background-color: #16ab39; - color: #FFFFFF; - text-shadow: none; -} - -.ui.positive.buttons .button:focus, -.ui.positive.button:focus { - background-color: #0ea432; - color: #FFFFFF; - text-shadow: none; -} - -.ui.positive.buttons .button:active, -.ui.positive.button:active { - background-color: #198f35; - color: #FFFFFF; - text-shadow: none; -} - -.ui.positive.buttons .active.button, -.ui.positive.buttons .active.button:active, -.ui.positive.active.button, -.ui.positive.button .active.button:active { - background-color: #13ae38; - color: #FFFFFF; - text-shadow: none; -} - -/* Basic */ - -.ui.basic.positive.buttons .button, -.ui.basic.positive.button { - background: transparent; - box-shadow: 0 0 0 1px #21BA45 inset; - color: #21BA45; -} - -.ui.basic.positive.buttons .button:hover, -.ui.basic.positive.button:hover { - background: transparent; - box-shadow: 0 0 0 1px #16ab39 inset; - color: #16ab39; -} - -.ui.basic.positive.buttons .button:focus, -.ui.basic.positive.button:focus { - background: transparent; - box-shadow: 0 0 0 1px #0ea432 inset; - color: #16ab39; -} - -.ui.basic.positive.buttons .active.button, -.ui.basic.positive.active.button { - background: transparent; - box-shadow: 0 0 0 1px #13ae38 inset; - color: #198f35; -} - -.ui.basic.positive.buttons .button:active, -.ui.basic.positive.button:active { - box-shadow: 0 0 0 1px #198f35 inset; - color: #198f35; -} - -.ui.buttons:not(.vertical) > .basic.positive.button:not(:first-child) { - margin-left: -1px; -} - -/*--------------- - Negative -----------------*/ - -/* Standard */ - -.ui.negative.buttons .button, -.ui.negative.button { - background-color: #DB2828; - color: #FFFFFF; - text-shadow: none; - background-image: none; -} - -.ui.negative.button { - box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; -} - -.ui.negative.buttons .button:hover, -.ui.negative.button:hover { - background-color: #d01919; - color: #FFFFFF; - text-shadow: none; -} - -.ui.negative.buttons .button:focus, -.ui.negative.button:focus { - background-color: #ca1010; - color: #FFFFFF; - text-shadow: none; -} - -.ui.negative.buttons .button:active, -.ui.negative.button:active { - background-color: #b21e1e; - color: #FFFFFF; - text-shadow: none; -} - -.ui.negative.buttons .active.button, -.ui.negative.buttons .active.button:active, -.ui.negative.active.button, -.ui.negative.button .active.button:active { - background-color: #d41515; - color: #FFFFFF; - text-shadow: none; -} - -/* Basic */ - -.ui.basic.negative.buttons .button, -.ui.basic.negative.button { - background: transparent; - box-shadow: 0 0 0 1px #DB2828 inset; - color: #DB2828; -} - -.ui.basic.negative.buttons .button:hover, -.ui.basic.negative.button:hover { - background: transparent; - box-shadow: 0 0 0 1px #d01919 inset; - color: #d01919; -} - -.ui.basic.negative.buttons .button:focus, -.ui.basic.negative.button:focus { - background: transparent; - box-shadow: 0 0 0 1px #ca1010 inset; - color: #d01919; -} - -.ui.basic.negative.buttons .active.button, -.ui.basic.negative.active.button { - background: transparent; - box-shadow: 0 0 0 1px #d41515 inset; - color: #b21e1e; -} - -.ui.basic.negative.buttons .button:active, -.ui.basic.negative.button:active { - box-shadow: 0 0 0 1px #b21e1e inset; - color: #b21e1e; -} - -.ui.buttons:not(.vertical) > .basic.negative.button:not(:first-child) { - margin-left: -1px; -} - -/******************************* - Groups - *******************************/ - -.ui.buttons { - display: inline-flex; - flex-direction: row; - font-size: 0; - vertical-align: baseline; - margin: 0 0.25em 0 0; -} - -.ui.buttons:not(.basic):not(.inverted) { - box-shadow: none; -} - -/* Clearfix */ - -.ui.buttons:after { - content: "."; - display: block; - height: 0; - clear: both; - visibility: hidden; -} - -/* Standard Group */ - -.ui.buttons .button { - flex: 1 0 auto; - border-radius: 0; - margin: 0 0 0 0; -} - -.ui.buttons:not(.basic):not(.inverted) > .button:not(.basic):not(.inverted) { - box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset; -} - -.ui.buttons .button:first-child { - border-left: none; - margin-left: 0; - border-top-left-radius: 0.28571429rem; - border-bottom-left-radius: 0.28571429rem; -} - -.ui.buttons .button:last-child { - border-top-right-radius: 0.28571429rem; - border-bottom-right-radius: 0.28571429rem; -} - -/* Vertical Style */ - -.ui.vertical.buttons { - display: inline-flex; - flex-direction: column; -} - -.ui.vertical.buttons .button { - display: block; - float: none; - width: 100%; - margin: 0 0 0 0; - box-shadow: none; - border-radius: 0; -} - -.ui.vertical.buttons .button:first-child { - border-top-left-radius: 0.28571429rem; - border-top-right-radius: 0.28571429rem; -} - -.ui.vertical.buttons .button:last-child { - margin-bottom: 0; - border-bottom-left-radius: 0.28571429rem; - border-bottom-right-radius: 0.28571429rem; -} - -.ui.vertical.buttons .button:only-child { - border-radius: 0.28571429rem; -} - -/******************************* - Theme Overrides -*******************************/ - -/******************************* - Site Overrides -*******************************/ /*! * # Fomantic-UI - Dimmer * http://github.com/fomantic/Fomantic-UI/ diff --git a/web_src/fomantic/semantic.json b/web_src/fomantic/semantic.json index 5b3a480d5343a..489ca7b9b79cf 100644 --- a/web_src/fomantic/semantic.json +++ b/web_src/fomantic/semantic.json @@ -22,7 +22,6 @@ "admin": false, "components": [ "api", - "button", "dimmer", "dropdown", "form", diff --git a/web_src/js/components/PullRequestMergeForm.vue b/web_src/js/components/PullRequestMergeForm.vue index bd0901a7b5953..9efa8840ac47d 100644 --- a/web_src/js/components/PullRequestMergeForm.vue +++ b/web_src/js/components/PullRequestMergeForm.vue @@ -138,7 +138,7 @@ export default {
    -
    +