mirror
/
gitea
mirror of https://github.com/go-gitea/gitea
2
0
Fork 0
Code Issues Releases Wiki Activity

Remove fomantic button module (#30475)

Browse Source 
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>
pull/30479/head^2
silverwind 7 months ago committed by GitHub
parent 4c6e2da088
commit 9946353282
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
21 changed files with 253 additions and 2991 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      templates/admin/notice.tmpl
  2. 2
      templates/admin/repo/unadopted.tmpl
  3. 10
      templates/base/modal_actions_confirm.tmpl
  4. 31
      templates/devtest/fomantic-modal.tmpl
  5. 42
      templates/devtest/gitea-ui.tmpl
  6. 2
      templates/org/team/sidebar.tmpl
  7. 2
      templates/repo/code/recently_pushed_new_branches.tmpl
  8. 24
      templates/repo/diff/compare.tmpl
  9. 2
      templates/repo/issue/view_content/sidebar.tmpl
  10. 2
      templates/repo/settings/lfs.tmpl
  11. 2
      templates/repo/settings/lfs_pointers.tmpl
  12. 2
      templates/repo/settings/webhook/history.tmpl
  13. 2
      templates/user/settings/applications.tmpl
  14. 8
      web_src/css/base.css
  15. 3
      web_src/css/helpers.css
  16. 769
      web_src/css/modules/button.css
  17. 4
      web_src/css/modules/modal.css
  18. 14
      web_src/css/repo.css
  19. 2318
      web_src/fomantic/build/semantic.css
  20. 1
      web_src/fomantic/semantic.json
  21. 2
      web_src/js/components/PullRequestMergeForm.vue

2
templates/admin/notice.tmpl
Unescape 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>

2
templates/admin/repo/unadopted.tmpl
Unescape 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>

10
templates/base/modal_actions_confirm.tmpl
Unescape 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>

31
templates/devtest/fomantic-modal.tmpl
Unescape 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" .}}

42
templates/devtest/gitea-ui.tmpl
Unescape 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>

2
templates/org/team/sidebar.tmpl
Unescape 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>

2
templates/repo/code/recently_pushed_new_branches.tmpl
Unescape 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>

24
templates/repo/diff/compare.tmpl
Unescape 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)}}

2
templates/repo/issue/view_content/sidebar.tmpl
Unescape 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"}}

2
templates/repo/settings/lfs.tmpl
Unescape 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>

2
templates/repo/settings/lfs_pointers.tmpl
Unescape 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>

2
templates/repo/settings/webhook/history.tmpl
Unescape 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>

2
templates/user/settings/applications.tmpl
Unescape 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" .}}

8
web_src/css/base.css
Unescape 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
web_src/css/helpers.css
Unescape 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 {

769
web_src/css/modules/button.css
Unescape 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
web_src/css/modules/modal.css
Unescape 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);

14
web_src/css/repo.css
Unescape 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;
}

2318
web_src/fomantic/build/semantic.css generated
View File

File diff suppressed because it is too large Load Diff

1
web_src/fomantic/semantic.json
Unescape View File

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

2
web_src/js/components/PullRequestMergeForm.vue
Unescape 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