mirrors
/
gitea
mirror of https://github.com/go-gitea/gitea.git
Watch 1
Star 0
Fork 0
Code Issues 0 Releases 211 Wiki Activity
Browse Source

Remove fomantic button module (#30475) 

CSS-only module. Button colors are reduced to this:

<img width="639" alt="Screenshot 2024-04-14 at 15 36 07"
src="https://github.com/go-gitea/gitea/assets/115237/882d6c02-d1de-44f2-b707-db02a9f5070d">

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
tags/v1.22.0-rc1
silverwind 1 month ago
parent
4c6e2da088
commit
9946353282
No account linked to committer's email address
21 changed files with 253 additions and 2991 deletions
Split View Show Diff Stats
  1. 1
    1
      templates/admin/notice.tmpl
  2. 1
    1
      templates/admin/repo/unadopted.tmpl
  3. 1
    9
      templates/base/modal_actions_confirm.tmpl
  4. 9
    22
      templates/devtest/fomantic-modal.tmpl
  5. 3
    39
      templates/devtest/gitea-ui.tmpl
  6. 1
    1
      templates/org/team/sidebar.tmpl
  7. 1
    1
      templates/repo/code/recently_pushed_new_branches.tmpl
  8. 8
    16
      templates/repo/diff/compare.tmpl
  9. 1
    1
      templates/repo/issue/view_content/sidebar.tmpl
  10. 1
    1
      templates/repo/settings/lfs.tmpl
  11. 1
    1
      templates/repo/settings/lfs_pointers.tmpl
  12. 1
    1
      templates/repo/settings/webhook/history.tmpl
  13. 1
    1
      templates/user/settings/applications.tmpl
  14. 0
    8
      web_src/css/base.css
  15. 3
    0
      web_src/css/helpers.css
  16. 212
    557
      web_src/css/modules/button.css
  17. 4
    0
      web_src/css/modules/modal.css
  18. 3
    11
      web_src/css/repo.css
  19. 0
    2318
      web_src/fomantic/build/semantic.css
  20. 0
    1
      web_src/fomantic/semantic.json
  21. 1
    1
      web_src/js/components/PullRequestMergeForm.vue

+ 1
- 1
templates/admin/notice.tmpl View File

@@ -49,7 +49,7 @@
</div>
</div>
</div>
<button class="ui small teal button" id="delete-selection" data-link="{{.Link}}/delete" data-redirect="?page={{.Page.Paginater.Current}}">
<button class="ui small button" id="delete-selection" data-link="{{.Link}}/delete" data-redirect="?page={{.Page.Paginater.Current}}">
<span class="text">{{ctx.Locale.Tr "admin.notices.delete_selected"}}</span>
</button>
</th>

+ 1
- 1
templates/admin/repo/unadopted.tmpl View File

@@ -54,7 +54,7 @@
<input type="hidden" name="action" value="delete">
<input type="hidden" name="q" value="{{$.Keyword}}">
<input type="hidden" name="page" value="{{$.CurrentPage}}">
{{template "base/modal_actions_confirm" (dict "ModalButtonColors" "yellow")}}
{{template "base/modal_actions_confirm"}}
</form>
</div>
</div>

+ 1
- 9
templates/base/modal_actions_confirm.tmpl View File

@@ -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}}
<button class="ui cancel button">{{svg "octicon-x"}} {{$textNegitive}}</button>
<button class="ui {{$stylePositive}} ok button">{{svg "octicon-check"}} {{$textPositive}}</button>
<button class="ui primary ok button">{{svg "octicon-check"}} {{$textPositive}}</button>
{{end}}
</div>

+ 9
- 22
templates/devtest/fomantic-modal.tmpl View File

@@ -1,6 +1,15 @@
{{template "base/head" .}}
<div class="page-content devtest ui container">
{{template "base/alert" .}}
<div class="modal-buttons flex-text-block tw-flex-wrap"></div>
<script type="module">
for (const el of $('.ui.modal')) {
const $btn = $('<button class="ui button">').text(`${el.id}`).on('click', () => {
$(el).modal({onApprove() {alert('confirmed')}}).modal('show');
});
$('.modal-buttons').append($btn);
}
</script>

<div id="test-modal-form-1" class="ui mini modal">
<div class="header">Form dialog (layout 1)</div>
@@ -54,33 +63,11 @@
{{template "base/modal_actions_confirm" (dict "ModalButtonTypes" "confirm")}}
</div>

<div class="ui g-modal-confirm modal" id="test-modal-blue">
<div class="header">Blue dialog</div>
<div class="content">hello, this is the modal dialog content</div>
{{template "base/modal_actions_confirm" (dict "ModalButtonColors" "blue")}}
</div>

<div class="ui g-modal-confirm modal" id="test-modal-yellow">
<div class="header">yellow dialog</div>
<div class="content">hello, this is the modal dialog content</div>
{{template "base/modal_actions_confirm" (dict "ModalButtonColors" "yellow")}}
</div>

<div class="ui g-modal-confirm modal" id="test-modal-danger">
{{svg "octicon-x" 16 "inside close"}}
<div class="header">dangerous action dialog</div>
<div class="content">hello, this is the modal dialog content, this is a dangerous operation</div>
{{template "base/modal_actions_confirm" (dict "ModalButtonDangerText" "I know and must do this is dangerous operation")}}
</div>

<div class="modal-buttons flex-text-block tw-flex-wrap"></div>
<script type="module">
for (const el of $('.ui.modal')) {
const $btn = $('<button>').text(`${el.id}`).on('click', () => {
$(el).modal({onApprove() {alert('confirmed')}}).modal('show');
});
$('.modal-buttons').append($btn);
}
</script>
</div>
{{template "base/footer" .}}

+ 3
- 39
templates/devtest/gitea-ui.tmpl View File

@@ -29,41 +29,13 @@
<button class="ui basic button">Basic Unclassed</button>
<button class="ui primary button">Primary</button>
<button class="ui basic primary button">Basic Primary</button>
<button class="ui negative button">Negative</button>
<button class="ui basic negative button">Basic Negative</button>
<button class="ui positive button">Positive</button>
<button class="ui basic positive button">Basic Positive</button>
</li>
<li class="sample-group">
<h2>Recommended colors:</h2>
<button class="ui red button">Red</button>
<button class="ui basic red button">Basic Red</button>
<button class="ui primary button">Green</button>
<button class="ui basic primary button">Basic Green</button>
<button class="ui blue button">Blue</button>
<button class="ui basic blue button">Basic Blue</button>
<button class="ui orange button">Orange</button>
<button class="ui basic orange button">Basic Orange</button>
<button class="ui yellow button">Yellow</button>
<button class="ui basic yellow button">Basic Yellow</button>
</li>
<li class="sample-group">
<h2>Supported but not recommended:</h2>
<p>Do not use if there is no strong requirement. Do not use grey/black buttons, they don't work well with dark theme.</p>
<button class="ui secondary button">Secondary</button>
<button class="ui basic secondary button">Basic Secondary</button>
<button class="ui olive button">Olive</button>
<button class="ui basic olive button">Basic Olive</button>
<button class="ui teal button">Teal</button>
<button class="ui basic teal button">Basic Teal</button>
<button class="ui violet button">Violet</button>
<button class="ui basic violet button">Basic Violet</button>
<button class="ui purple button">Purple</button>
<button class="ui basic purple button">Basic Purple</button>
<button class="ui pink button">Pink</button>
<button class="ui basic pink button">Basic Pink</button>
<button class="ui brown button">Brown</button>
<button class="ui basic brown button">Basic Brown</button>
<button class="ui green button">Green</button>
<button class="ui basic green button">Basic Green</button>
</li>
<li class="sample-group">
<h2>Inline / Plain:</h2>
@@ -198,7 +170,7 @@
<button class="ui basic button">labeled button</button>
<a class="ui basic label">123</a>
</div>
<button class="ui yellow button">{{svg "octicon-x" 16}} button with very very very very very very very very long text</button>
<button class="ui button">{{svg "octicon-x" 16}} button with very very very very very very very very long text</button>
</div>

<h2>Input with SVG</h2>
@@ -271,10 +243,6 @@
<span class="text">button dropdown</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
</div>
<div class="ui dropdown large button">
<span class="text">large dropdown</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
</div>
</div>

<div>
@@ -290,10 +258,6 @@
<span class="text">button compact</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
</div>
<div class="ui dropdown large compact button">
<span class="text">large compact</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
</div>
</div>

<div>

+ 1
- 1
templates/org/team/sidebar.tmpl View File

@@ -79,7 +79,7 @@
</div>
{{if .IsOrganizationOwner}}
<div class="ui bottom attached segment">
<a class="ui teal small button" href="{{.OrgLink}}/teams/{{.Team.LowerName | PathEscape}}/edit">{{svg "octicon-gear"}} {{ctx.Locale.Tr "org.teams.settings"}}</a>
<a class="ui small button" href="{{.OrgLink}}/teams/{{.Team.LowerName | PathEscape}}/edit">{{svg "octicon-gear"}} {{ctx.Locale.Tr "org.teams.settings"}}</a>
</div>
{{end}}
</div>

+ 1
- 1
templates/repo/code/recently_pushed_new_branches.tmpl View File

@@ -5,7 +5,7 @@
{{$branchLink := HTMLFormat `<a href="%s/src/branch/%s">%s</a>` $.RepoLink (PathEscapeSegments .Name) .Name}}
{{ctx.Locale.Tr "repo.pulls.recently_pushed_new_branches" $branchLink $timeSince}}
</div>
<a role="button" class="ui compact positive button tw-m-0" href="{{$.Repository.ComposeBranchCompareURL $.Repository.BaseRepo .Name}}">
<a role="button" class="ui compact green button tw-m-0" href="{{$.Repository.ComposeBranchCompareURL $.Repository.BaseRepo .Name}}">
{{ctx.Locale.Tr "repo.pulls.compare_changes"}}
</a>
</div>

+ 8
- 16
templates/repo/diff/compare.tmpl View File

@@ -184,23 +184,15 @@
{{end}}
{{else if and .PageIsComparePull (gt .CommitCount 0)}}
{{if .HasPullRequest}}
<div class="ui segment grid title">
<div class="twelve wide column issue-title">
{{ctx.Locale.Tr "repo.pulls.has_pull_request" (print $.RepoLink "/pulls/" .PullRequest.Issue.Index) $.RepoRelPath .PullRequest.Index}}
<h1>
<span id="issue-title">{{RenderIssueTitle $.Context .PullRequest.Issue.Title ($.Repository.ComposeMetas ctx)}}</span>
<span class="index">#{{.PullRequest.Issue.Index}}</span>
</h1>
</div>
<div class="four wide column middle aligned text right">
{{- if .PullRequest.HasMerged -}}
<a href="{{$.RepoLink}}/pulls/{{.PullRequest.Issue.Index}}" class="ui button purple show-form">{{svg "octicon-git-merge" 16}} {{ctx.Locale.Tr "repo.pulls.view"}}</a>
{{else if .Issue.IsClosed}}
<a href="{{$.RepoLink}}/pulls/{{.PullRequest.Issue.Index}}" class="ui button red show-form">{{svg "octicon-issue-closed" 16}} {{ctx.Locale.Tr "repo.pulls.view"}}</a>
{{else}}
<a href="{{$.RepoLink}}/pulls/{{.PullRequest.Issue.Index}}" class="ui button primary show-form">{{svg "octicon-git-pull-request" 16}} {{ctx.Locale.Tr "repo.pulls.view"}}</a>
{{end}}
<div class="ui segment flex-text-block tw-gap-4">
{{template "shared/issueicon" .}}
<div class="issue-title tw-break-anywhere">
{{RenderIssueTitle $.Context .PullRequest.Issue.Title ($.Repository.ComposeMetas ctx) | RenderCodeBlock}}
<span class="index">#{{.PullRequest.Issue.Index}}</span>
</div>
<a href="{{$.RepoLink}}/pulls/{{.PullRequest.Issue.Index}}" class="ui compact button primary">
{{ctx.Locale.Tr "repo.pulls.view"}}
</a>
</div>
{{else}}
{{if and $.IsSigned (not .Repository.IsArchived)}}

+ 1
- 1
templates/repo/issue/view_content/sidebar.tmpl View File

@@ -572,7 +572,7 @@
</form>
{{end}}

<button class="tw-mt-1 fluid ui show-modal button {{if .Issue.IsLocked}} negative {{end}}" data-modal="#lock">
<button class="tw-mt-1 fluid ui show-modal button{{if .Issue.IsLocked}} red{{end}}" data-modal="#lock">
{{if .Issue.IsLocked}}
{{svg "octicon-key"}}
{{ctx.Locale.Tr "repo.issues.unlock"}}

+ 1
- 1
templates/repo/settings/lfs.tmpl View File

@@ -44,7 +44,7 @@
</p>
<form class="ui form" action="{{$.Link}}/delete/{{.Oid}}" method="post">
{{$.CsrfTokenHtml}}
{{template "base/modal_actions_confirm" (dict "ModalButtonColors" "yellow")}}
{{template "base/modal_actions_confirm"}}
</form>
</div>
</div>

+ 1
- 1
templates/repo/settings/lfs_pointers.tmpl View File

@@ -37,7 +37,7 @@
</a>
</td>
<td>
<a {{if and .Exists .InRepo}}href="{{$.LFSFilesLink}}/show/{{.Oid}}" rel="nofollow" target="_blank"{{end}} title="{{.Oid}}" class="ui brown button tw-font-mono">
<a {{if and .Exists .InRepo}}href="{{$.LFSFilesLink}}/show/{{.Oid}}" rel="nofollow" target="_blank"{{end}} title="{{.Oid}}" class="ui button tw-font-mono">
{{ShortSha .Oid}}
</a>
</td>

+ 1
- 1
templates/repo/settings/webhook/history.tmpl View File

@@ -6,7 +6,7 @@
<div class="ui right">
<!-- the button is wrapped with a span because the tooltip doesn't show on hover if we put data-tooltip-content directly on the button -->
<span data-tooltip-content="{{if or $isNew .Webhook.IsActive}}{{ctx.Locale.Tr "repo.settings.webhook.test_delivery_desc"}}{{else}}{{ctx.Locale.Tr "repo.settings.webhook.test_delivery_desc_disabled"}}{{end}}">
<button class="ui teal tiny button{{if not (or $isNew .Webhook.IsActive)}} disabled{{end}}" id="test-delivery" data-link="{{.Link}}/test" data-redirect="{{.Link}}">
<button class="ui tiny button{{if not (or $isNew .Webhook.IsActive)}} disabled{{end}}" id="test-delivery" data-link="{{.Link}}/test" data-redirect="{{.Link}}">
<span class="text">{{ctx.Locale.Tr "repo.settings.webhook.test_delivery"}}</span>
</button>
</span>

+ 1
- 1
templates/user/settings/applications.tmpl View File

@@ -109,7 +109,7 @@
<div class="content">
<p>{{ctx.Locale.Tr "settings.access_token_deletion_desc"}}</p>
</div>
{{template "base/modal_actions_confirm" (dict "ModalButtonColors" "yellow")}}
{{template "base/modal_actions_confirm"}}
</div>

{{template "user/settings/layout_footer" .}}

+ 0
- 8
web_src/css/base.css View File

@@ -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;
}

+ 3
- 0
web_src/css/helpers.css View File

@@ -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 {

+ 212
- 557
web_src/css/modules/button.css View File

@@ -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;
}

+ 4
- 0
web_src/css/modules/modal.css View File

@@ -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);

+ 3
- 11
web_src/css/repo.css View File

@@ -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;
}

+ 0
- 2318
web_src/fomantic/build/semantic.css
File diff suppressed because it is too large
View File


+ 0
- 1
web_src/fomantic/semantic.json View File

@@ -22,7 +22,6 @@
"admin": false,
"components": [
"api",
"button",
"dimmer",
"dropdown",
"form",

+ 1
- 1
web_src/js/components/PullRequestMergeForm.vue View File

@@ -138,7 +138,7 @@ export default {

<div v-if="!showActionForm" class="tw-flex">
<!-- the merge button -->
<div class="ui buttons merge-button" :class="[mergeForm.emptyCommit ? 'grey' : mergeForm.allOverridableChecksOk ? 'primary' : 'red']" @click="toggleActionForm(true)">
<div class="ui buttons merge-button" :class="[mergeForm.emptyCommit ? '' : mergeForm.allOverridableChecksOk ? 'primary' : 'red']" @click="toggleActionForm(true)">
<button class="ui button">
<svg-icon name="octicon-git-merge"/>
<span class="button-text">

Write Preview
Loading…
Cancel
Save