Backport #24989. Clean cherry-pick aside from one small conflict with divider. - Various corrections to button styles, especially secondary - Remove focus highlight, it's annoying when it stays on button after press - Clearly define ghost and link buttons with demos in devtest - Remove black, grey and tertiary buttons, they should not be used - Make `arc-green` slightly darker <img width="1226" alt="image" src="https://github.com/go-gitea/gitea/assets/115237/8d89786a-01ab-40f8-ae5a-e17f40e35084"> <img width="1249" alt="image" src="https://github.com/go-gitea/gitea/assets/115237/83651e6d-3c27-46ff-b8bd-ff344d70e949">tags/v1.20.0-rc1
@@ -32,7 +32,7 @@ The ".ok.button" and ".cancel.button" selectors are also used by Fomantic Modal | |||
{{else if eq .ModalButtonColors "yellow"}} | |||
{{$stylePositive = "yellow"}} | |||
{{end}} | |||
<button class="ui secondary basic cancel button">{{svg "octicon-x"}} {{$textNegitive}}</button> | |||
<button class="ui basic cancel button">{{svg "octicon-x"}} {{$textNegitive}}</button> | |||
<button class="ui {{$stylePositive}} ok button">{{svg "octicon-check"}} {{$textPositive}}</button> | |||
{{end}} | |||
</div> |
@@ -14,24 +14,73 @@ | |||
<label><input type="checkbox" name="button-state-disabled" value="disabled">disabled</label> | |||
</div> | |||
<div id="devtest-button-samples"> | |||
<div> | |||
<button class="ui primary button">Primary</button> | |||
<button class="ui secondary button">Secondary</button> | |||
<button class="ui basic secondary button">Basic Secondary</button> | |||
<button class="ui red button">Red</button> | |||
<button class="ui basic red button">Basic Red</button> | |||
</div> | |||
<div>This is a <button class="ui button button-ghost">Ghost</button> button</div> | |||
</div> | |||
<script type="module"> | |||
const $buttons = $('#devtest-button-samples').find('button'); | |||
<style> | |||
.button-sample-groups { margin: 0; padding: 0; } | |||
.button-sample-groups .sample-group { list-style: none; margin: 0; padding: 0; } | |||
.button-sample-groups .sample-group .ui.button { margin-bottom: 5px; } | |||
</style> | |||
<ul class="button-sample-groups"> | |||
<li class="sample-group"> | |||
<h2>General purpose:</h2> | |||
<button class="ui button">Unclassed</button> | |||
<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 green button">Green</button> | |||
<button class="ui basic green 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> | |||
</li> | |||
<li class="sample-group"> | |||
<h2>Inline / Plain:</h2> | |||
<div class="gt-my-2"> | |||
<button class="btn gt-p-3">Plain button</button> | |||
<button class="btn interact-fg gt-p-3">Plain button with interact fg</button> | |||
<button class="btn interact-bg gt-p-3">Plain button with interact bg</button> | |||
</div> | |||
</li> | |||
</ul> | |||
<script type="module"> | |||
const $buttons = $('#devtest-button-samples').find('button.ui'); | |||
const $buttonStyles = $('input[name*="button-style"]'); | |||
$buttonStyles.on('click', () => $buttonStyles.map((_ ,el) => $buttons.toggleClass(el.value, el.checked))); | |||
const $buttonStyles = $('input[name*="button-style"]'); | |||
$buttonStyles.on('click', () => $buttonStyles.map((_ ,el) => $buttons.toggleClass(el.value, el.checked))); | |||
const $buttonStates = $('input[name*="button-state"]'); | |||
$buttonStates.on('click', () => $buttonStates.map((_ ,el) => $buttons.prop(el.value, el.checked))); | |||
</script> | |||
const $buttonStates = $('input[name*="button-state"]'); | |||
$buttonStates.on('click', () => $buttonStates.map((_ ,el) => $buttons.prop(el.value, el.checked))); | |||
</script> | |||
</div> | |||
</div> | |||
<div> | |||
@@ -75,7 +124,7 @@ | |||
</div> | |||
<style> | |||
h1 { | |||
h1, h2 { | |||
margin: 0; | |||
padding: 10px 0; | |||
} |
@@ -1,3 +1,10 @@ | |||
<style> | |||
@media (prefers-color-scheme: dark) { | |||
:root { | |||
color-scheme: dark; | |||
} | |||
} | |||
</style> | |||
<ul> | |||
{{range .SubNames}} | |||
<li><a href="{{AppSubUrl}}/devtest/{{.}}">{{.}}</a></li> |
@@ -6,7 +6,7 @@ | |||
</div> | |||
<div class="right floated three wide column"> | |||
<div class="ui right"> | |||
<button class="ui green new-label button">{{.locale.Tr "repo.issues.new_label"}}</button> | |||
<button class="ui small green new-label button">{{.locale.Tr "repo.issues.new_label"}}</button> | |||
</div> | |||
</div> | |||
</div> |
@@ -52,7 +52,7 @@ | |||
{{if $.EscapeStatus.Escaped}} | |||
<td class="lines-escape"> | |||
{{if $row.EscapeStatus.Escaped}} | |||
<button class="toggle-escape-button button button-ghost" title="{{template "repo/diff/escape_title" dict "diff" $row "locale" $.locale}}"></button> | |||
<button class="toggle-escape-button btn interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $row "locale" $.locale}}"></button> | |||
{{end}} | |||
</td> | |||
{{end}} |
@@ -27,7 +27,7 @@ | |||
</td> | |||
<td class="right aligned overflow-visible"> | |||
{{if and $.IsWriter (not $.Repository.IsArchived) (not .IsDeleted)}} | |||
<button class="ui button button-ghost show-create-branch-modal gt-p-3" | |||
<button class="btn interact-bg show-create-branch-modal gt-p-3" | |||
data-modal="#create-branch-modal" | |||
data-branch-from="{{$.DefaultBranch}}" | |||
data-branch-from-urlcomponent="{{PathEscapeSegments $.DefaultBranch}}" | |||
@@ -37,12 +37,10 @@ | |||
</button> | |||
{{end}} | |||
{{if .EnableFeed}} | |||
<a role="button" class="ui button button-ghost gt-p-3" href="{{$.FeedURL}}/rss/branch/{{PathEscapeSegments .DefaultBranch}}"> | |||
{{svg "octicon-rss"}} | |||
</a> | |||
<a role="button" class="btn interact-bg gt-p-3" href="{{$.FeedURL}}/rss/branch/{{PathEscapeSegments .DefaultBranch}}">{{svg "octicon-rss"}}</a> | |||
{{end}} | |||
{{if not $.DisableDownloadSourceArchives}} | |||
<div class="ui dropdown button button-ghost gt-p-3" data-tooltip-content="{{$.locale.Tr "repo.branch.download" ($.DefaultBranch)}}"> | |||
<div class="ui dropdown btn interact-bg gt-p-3" data-tooltip-content="{{$.locale.Tr "repo.branch.download" ($.DefaultBranch)}}"> | |||
{{svg "octicon-download"}} | |||
<div class="menu"> | |||
<a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments $.DefaultBranch}}.zip" rel="nofollow">{{svg "octicon-file-zip"}} ZIP</a> | |||
@@ -51,7 +49,7 @@ | |||
</div> | |||
{{end}} | |||
{{if and $.IsWriter (not $.Repository.IsArchived) (not .IsDeleted) (not $.IsMirror)}} | |||
<button class="ui button button-ghost gt-p-3 show-modal show-rename-branch-modal" | |||
<button class="btn interact-bg gt-p-3 show-modal show-rename-branch-modal" | |||
data-is-default-branch="true" | |||
data-modal="#rename-branch-modal" | |||
data-old-branch-name="{{$.DefaultBranch}}" | |||
@@ -134,7 +132,7 @@ | |||
</td> | |||
<td class="three wide right aligned overflow-visible"> | |||
{{if and $.IsWriter (not $.Repository.IsArchived) (not .IsDeleted)}} | |||
<button class="ui button button-ghost gt-p-3 show-modal show-create-branch-modal" | |||
<button class="btn interact-bg gt-p-3 show-modal show-create-branch-modal" | |||
data-branch-from="{{.Name}}" | |||
data-branch-from-urlcomponent="{{PathEscapeSegments .Name}}" | |||
data-tooltip-content="{{$.locale.Tr "repo.branch.new_branch_from" .Name}}" | |||
@@ -144,12 +142,10 @@ | |||
</button> | |||
{{end}} | |||
{{if $.EnableFeed}} | |||
<a role="button" class="ui button button-ghost gt-p-3" href="{{$.FeedURL}}/rss/branch/{{PathEscapeSegments .Name}}"> | |||
{{svg "octicon-rss"}} | |||
</a> | |||
<a role="button" class="btn interact-bg gt-p-3" href="{{$.FeedURL}}/rss/branch/{{PathEscapeSegments .Name}}">{{svg "octicon-rss"}}</a> | |||
{{end}} | |||
{{if and (not .IsDeleted) (not $.DisableDownloadSourceArchives)}} | |||
<div class="ui dropdown button button-ghost gt-p-3" data-tooltip-content="{{$.locale.Tr "repo.branch.download" (.Name)}}"> | |||
<div class="ui dropdown btn interact-bg gt-p-3" data-tooltip-content="{{$.locale.Tr "repo.branch.download" (.Name)}}"> | |||
{{svg "octicon-download"}} | |||
<div class="menu"> | |||
<a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments .Name}}.zip" rel="nofollow">{{svg "octicon-file-zip"}} ZIP</a> | |||
@@ -158,7 +154,7 @@ | |||
</div> | |||
{{end}} | |||
{{if and $.IsWriter (not $.Repository.IsArchived) (not .IsDeleted) (not $.IsMirror)}} | |||
<button class="ui button button-ghost gt-p-3 show-modal show-rename-branch-modal" | |||
<button class="btn interact-bg gt-p-3 show-modal show-rename-branch-modal" | |||
data-is-default-branch="false" | |||
data-old-branch-name="{{.Name}}" | |||
data-modal="#rename-branch-modal" | |||
@@ -169,13 +165,13 @@ | |||
{{end}} | |||
{{if and $.IsWriter (not $.IsMirror) (not $.Repository.IsArchived) (not .IsProtected)}} | |||
{{if .IsDeleted}} | |||
<button class="ui button button-ghost gt-p-3 undo-button" data-url="{{$.Link}}/restore?branch_id={{.DeletedBranch.ID}}&name={{.DeletedBranch.Name}}&page={{$.Page.Paginater.Current}}" data-tooltip-content="{{$.locale.Tr "repo.branch.restore" (.Name)}}"> | |||
<button class="btn interact-bg gt-p-3 undo-button" data-url="{{$.Link}}/restore?branch_id={{.DeletedBranch.ID}}&name={{.DeletedBranch.Name}}&page={{$.Page.Paginater.Current}}" data-tooltip-content="{{$.locale.Tr "repo.branch.restore" (.Name)}}"> | |||
<span class="text blue"> | |||
{{svg "octicon-reply"}} | |||
</span> | |||
</button> | |||
{{else}} | |||
<button class="ui button button-ghost gt-p-3 delete-button delete-branch-button" data-url="{{$.Link}}/delete?name={{.Name}}&page={{$.Page.Paginater.Current}}" data-tooltip-content="{{$.locale.Tr "repo.branch.delete" (.Name)}}" data-name="{{.Name}}"> | |||
<button class="btn interact-bg gt-p-3 delete-button delete-branch-button" data-url="{{$.Link}}/delete?name={{.Name}}&page={{$.Page.Paginater.Current}}" data-tooltip-content="{{$.locale.Tr "repo.branch.delete" (.Name)}}" data-name="{{.Name}}"> | |||
{{svg "octicon-trash"}} | |||
</button> | |||
{{end}} |
@@ -15,7 +15,7 @@ | |||
</div> | |||
</div> | |||
<div class="actions"> | |||
<button class="ui black cancel button"> | |||
<button class="ui cancel button"> | |||
{{.locale.Tr "cancel"}} | |||
</button> | |||
</div> |
@@ -1,6 +1,6 @@ | |||
{{if .Statuses}} | |||
{{if and (eq (len .Statuses) 1) .Status.TargetURL}} | |||
<a class="gt-vm gt-tdn" data-tippy="commit-statuses" href="{{.Status.TargetURL}}"> | |||
<a class="gt-vm gt-no-underline" data-tippy="commit-statuses" href="{{.Status.TargetURL}}"> | |||
{{template "repo/commit_status" .Status}} | |||
</a> | |||
{{else}} |
@@ -26,7 +26,7 @@ | |||
{{else}} | |||
{{$inlineDiff := $.section.GetComputedInlineDiffFor $line $.locale}} | |||
<td class="lines-num lines-num-old" data-line-num="{{if $line.LeftIdx}}{{$line.LeftIdx}}{{end}}"><span rel="{{if $line.LeftIdx}}diff-{{$.FileNameHash}}L{{$line.LeftIdx}}{{end}}"></span></td> | |||
<td class="blob-excerpt lines-escape lines-escape-old">{{if and $line.LeftIdx $inlineDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button button button-ghost" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.locale}}"></button>{{end}}</td> | |||
<td class="blob-excerpt lines-escape lines-escape-old">{{if and $line.LeftIdx $inlineDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button btn interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.locale}}"></button>{{end}}</td> | |||
<td class="blob-excerpt lines-type-marker lines-type-marker-old">{{if $line.LeftIdx}}<span class="gt-mono" data-type-marker=""></span>{{end}}</td> | |||
<td class="blob-excerpt lines-code lines-code-old">{{/* | |||
*/}}{{if $line.LeftIdx}}{{template "repo/diff/section_code" dict "diff" $inlineDiff "locale" $.locale}}{{else}}{{/* | |||
@@ -34,7 +34,7 @@ | |||
*/}}{{end}}{{/* | |||
*/}}</td> | |||
<td class="lines-num lines-num-new" data-line-num="{{if $line.RightIdx}}{{$line.RightIdx}}{{end}}"><span rel="{{if $line.RightIdx}}diff-{{$.FileNameHash}}R{{$line.RightIdx}}{{end}}"></span></td> | |||
<td class="blob-excerpt lines-escape lines-escape-new">{{if and $line.RightIdx $inlineDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button button button-ghost" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.locale}}"></button>{{end}}</td> | |||
<td class="blob-excerpt lines-escape lines-escape-new">{{if and $line.RightIdx $inlineDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button btn interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.locale}}"></button>{{end}}</td> | |||
<td class="blob-excerpt lines-type-marker lines-type-marker-new">{{if $line.RightIdx}}<span class="gt-mono" data-type-marker=""></span>{{end}}</td> | |||
<td class="blob-excerpt lines-code lines-code-new">{{/* | |||
*/}}{{if $line.RightIdx}}{{template "repo/diff/section_code" dict "diff" $inlineDiff "locale" $.locale}}{{else}}{{/* | |||
@@ -72,7 +72,7 @@ | |||
<td class="lines-num lines-num-new" data-line-num="{{if $line.RightIdx}}{{$line.RightIdx}}{{end}}"><span rel="{{if $line.RightIdx}}diff-{{$.FileNameHash}}R{{$line.RightIdx}}{{end}}"></span></td> | |||
{{end}} | |||
{{$inlineDiff := $.section.GetComputedInlineDiffFor $line $.locale}} | |||
<td class="blob-excerpt lines-escape">{{if $inlineDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button button button-ghost" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.locale}}"></button>{{end}}</td> | |||
<td class="blob-excerpt lines-escape">{{if $inlineDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button btn interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.locale}}"></button>{{end}}</td> | |||
<td class="blob-excerpt lines-type-marker"><span class="gt-mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span></td> | |||
<td class="blob-excerpt lines-code{{if (not $line.RightIdx)}} lines-code-old{{end}}"><code {{if $inlineDiff.EscapeStatus.Escaped}}class="code-inner has-escaped" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.locale}}"{{else}}class="code-inner"{{end}}>{{$inlineDiff.Content}}</code></td> | |||
</tr> |
@@ -90,7 +90,7 @@ | |||
<div class="diff-file-box diff-box file-content {{TabSizeClass $.Editorconfig $file.Name}} gt-mt-3" id="diff-{{$file.NameHash}}" data-old-filename="{{$file.OldName}}" data-new-filename="{{$file.Name}}" {{if or ($file.ShouldBeHidden) (not $isExpandable)}}data-folded="true"{{end}}> | |||
<h4 class="diff-file-header sticky-2nd-row ui top attached normal header gt-df gt-ac gt-sb gt-fw"> | |||
<div class="diff-file-name gt-df gt-ac gt-gap-2 gt-fw"> | |||
<button class="fold-file ui button button-ghost gt-p-0 gt-mr-3{{if not $isExpandable}} gt-invisible{{end}}"> | |||
<button class="fold-file btn interact-bg gt-p-2{{if not $isExpandable}} gt-invisible{{end}}"> | |||
{{if $file.ShouldBeHidden}} | |||
{{svg "octicon-chevron-right" 18}} | |||
{{else}} | |||
@@ -107,7 +107,7 @@ | |||
{{end}} | |||
</div> | |||
<span class="file gt-mono"><a class="muted file-link" title="{{if $file.IsRenamed}}{{$file.OldName}} → {{end}}{{$file.Name}}" href="#diff-{{$file.NameHash}}">{{if $file.IsRenamed}}{{$file.OldName}} → {{end}}{{$file.Name}}</a>{{if .IsLFSFile}} ({{$.locale.Tr "repo.stored_lfs"}}){{end}}</span> | |||
<button class="ui button button-link gt-p-3" data-clipboard-text="{{$file.Name}}">{{svg "octicon-copy" 14}}</button> | |||
<button class="btn interact-fg gt-p-3" data-clipboard-text="{{$file.Name}}">{{svg "octicon-copy" 14}}</button> | |||
{{if $file.IsGenerated}} | |||
<span class="ui label">{{$.locale.Tr "repo.diff.generated"}}</span> | |||
{{end}} |
@@ -34,7 +34,7 @@ | |||
{{end}} | |||
</div> | |||
</td>{{$inlineDiff := $section.GetComputedInlineDiffFor $line $.root.locale}} | |||
<td class="lines-escape lines-escape-old">{{if $inlineDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button button button-ghost" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.root.locale}}"></button>{{end}}</td> | |||
<td class="lines-escape lines-escape-old">{{if $inlineDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button btn interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.root.locale}}"></button>{{end}}</td> | |||
<td colspan="6" class="lines-code lines-code-old ">{{/* | |||
*/}}{{template "repo/diff/section_code" dict "diff" $inlineDiff "locale" $.root.locale}}{{/* | |||
*/}}</td> | |||
@@ -43,7 +43,7 @@ | |||
{{- $leftDiff := ""}}{{if $line.LeftIdx}}{{$leftDiff = $section.GetComputedInlineDiffFor $line $.root.locale}}{{end}} | |||
{{- $rightDiff := ""}}{{if $match.RightIdx}}{{$rightDiff = $section.GetComputedInlineDiffFor $match $.root.locale}}{{end}} | |||
<td class="lines-num lines-num-old del-code" data-line-num="{{$line.LeftIdx}}"><span rel="diff-{{$file.NameHash}}L{{$line.LeftIdx}}"></span></td> | |||
<td class="lines-escape del-code lines-escape-old">{{if $line.LeftIdx}}{{if $leftDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button button button-ghost" title="{{template "repo/diff/escape_title" dict "diff" $leftDiff "locale" $.root.locale}}"></a>{{end}}{{end}}</td> | |||
<td class="lines-escape del-code lines-escape-old">{{if $line.LeftIdx}}{{if $leftDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button btn interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $leftDiff "locale" $.root.locale}}"></a>{{end}}{{end}}</td> | |||
<td class="lines-type-marker lines-type-marker-old del-code"><span class="gt-mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span></td> | |||
<td class="lines-code lines-code-old del-code">{{/* | |||
*/}}{{if and $.root.SignedUserID $.root.PageIsPullFiles}}{{/* | |||
@@ -58,7 +58,7 @@ | |||
*/}}{{end}}{{/* | |||
*/}}</td> | |||
<td class="lines-num lines-num-new add-code" data-line-num="{{if $match.RightIdx}}{{$match.RightIdx}}{{end}}"><span rel="{{if $match.RightIdx}}diff-{{$file.NameHash}}R{{$match.RightIdx}}{{end}}"></span></td> | |||
<td class="lines-escape add-code lines-escape-new">{{if $match.RightIdx}}{{if $rightDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button button button-ghost" title="{{template "repo/diff/escape_title" dict "diff" $rightDiff "locale" $.root.locale}}"></button>{{end}}{{end}}</td> | |||
<td class="lines-escape add-code lines-escape-new">{{if $match.RightIdx}}{{if $rightDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button btn interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $rightDiff "locale" $.root.locale}}"></button>{{end}}{{end}}</td> | |||
<td class="lines-type-marker lines-type-marker-new add-code">{{if $match.RightIdx}}<span class="gt-mono" data-type-marker="{{$match.GetLineTypeMarker}}"></span>{{end}}</td> | |||
<td class="lines-code lines-code-new add-code">{{/* | |||
*/}}{{if and $.root.SignedUserID $.root.PageIsPullFiles}}{{/* | |||
@@ -75,7 +75,7 @@ | |||
{{else}} | |||
{{$inlineDiff := $section.GetComputedInlineDiffFor $line $.root.locale}} | |||
<td class="lines-num lines-num-old" data-line-num="{{if $line.LeftIdx}}{{$line.LeftIdx}}{{end}}"><span rel="{{if $line.LeftIdx}}diff-{{$file.NameHash}}L{{$line.LeftIdx}}{{end}}"></span></td> | |||
<td class="lines-escape lines-escape-old">{{if $line.LeftIdx}}{{if $inlineDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button button button-ghost" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.root.locale}}"></button>{{end}}{{end}}</td> | |||
<td class="lines-escape lines-escape-old">{{if $line.LeftIdx}}{{if $inlineDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button btn interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.root.locale}}"></button>{{end}}{{end}}</td> | |||
<td class="lines-type-marker lines-type-marker-old">{{if $line.LeftIdx}}<span class="gt-mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span>{{end}}</td> | |||
<td class="lines-code lines-code-old">{{/* | |||
*/}}{{if and $.root.SignedUserID $.root.PageIsPullFiles (not (eq .GetType 2))}}{{/* | |||
@@ -90,7 +90,7 @@ | |||
*/}}{{end}}{{/* | |||
*/}}</td> | |||
<td class="lines-num lines-num-new" data-line-num="{{if $line.RightIdx}}{{$line.RightIdx}}{{end}}"><span rel="{{if $line.RightIdx}}diff-{{$file.NameHash}}R{{$line.RightIdx}}{{end}}"></span></td> | |||
<td class="lines-escape lines-escape-new">{{if $line.RightIdx}}{{if $inlineDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button button button-ghost" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.root.locale}}"></button>{{end}}{{end}}</td> | |||
<td class="lines-escape lines-escape-new">{{if $line.RightIdx}}{{if $inlineDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button btn interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.root.locale}}"></button>{{end}}{{end}}</td> | |||
<td class="lines-type-marker lines-type-marker-new">{{if $line.RightIdx}}<span class="gt-mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span>{{end}}</td> | |||
<td class="lines-code lines-code-new">{{/* | |||
*/}}{{if and $.root.SignedUserID $.root.PageIsPullFiles (not (eq .GetType 3))}}{{/* |
@@ -41,7 +41,7 @@ | |||
{{$inlineDiff := $section.GetComputedInlineDiffFor $line $.root.locale -}} | |||
<td class="lines-escape"> | |||
{{- if $inlineDiff.EscapeStatus.Escaped -}} | |||
<button class="toggle-escape-button button button-ghost" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.root.locale}}"></button> | |||
<button class="toggle-escape-button btn interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.root.locale}}"></button> | |||
{{- end -}} | |||
</td> | |||
<td class="lines-type-marker"><span class="gt-mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span></td> |
@@ -30,7 +30,7 @@ | |||
</div> | |||
<div class="gt-df gt-ac gt-fw gt-mt-3" id="repo-topics"> | |||
{{range .Topics}}<a class="ui repo-topic large label topic" href="{{AppSubUrl}}/explore/repos?q={{.Name}}&topic=1">{{.Name}}</a>{{end}} | |||
{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}<button id="manage_topic" class="ui tiny button button-ghost gt-ml-2">{{.locale.Tr "repo.topic.manage_topics"}}</button>{{end}} | |||
{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}<button id="manage_topic" class="btn interact-fg gt-ml-2 gt-font-12">{{.locale.Tr "repo.topic.manage_topics"}}</button>{{end}} | |||
</div> | |||
{{end}} | |||
{{if and .Permission.IsAdmin (not .Repository.IsArchived)}} | |||
@@ -46,7 +46,7 @@ | |||
</div> | |||
</div> | |||
<div> | |||
<button class="ui basic button secondary" id="cancel_topic_edit">{{.locale.Tr "cancel"}}</button> | |||
<button class="ui basic button" id="cancel_topic_edit">{{.locale.Tr "cancel"}}</button> | |||
<button class="ui primary button" id="save_topic" data-link="{{.RepoLink}}/topics">{{.locale.Tr "save"}}</button> | |||
</div> | |||
</div> |
@@ -6,7 +6,7 @@ | |||
{{template "repo/issue/navbar" .}} | |||
{{if and (or .CanWriteIssues .CanWritePulls) (not .Repository.IsArchived)}} | |||
<div class="ui right"> | |||
<button class="ui green new-label button">{{.locale.Tr "repo.issues.new_label"}}</button> | |||
<button class="ui small green new-label button">{{.locale.Tr "repo.issues.new_label"}}</button> | |||
</div> | |||
{{end}} | |||
</div> |
@@ -52,7 +52,7 @@ | |||
</form> | |||
</div> | |||
<div class="actions"> | |||
<button class="ui secondary small basic cancel button"> | |||
<button class="ui small basic cancel button"> | |||
{{svg "octicon-x"}} | |||
{{.locale.Tr "cancel"}} | |||
</button> |
@@ -27,7 +27,7 @@ | |||
{{end}} | |||
</div> | |||
<div class="meta gt-my-2"> | |||
<span class="text light grey"> | |||
<span class="text light grey muted-links"> | |||
#{{.Index}} | |||
{{$timeStr := TimeSinceUnix .GetLastEventTimestamp $.locale}} | |||
{{if .OriginalAuthor}} |
@@ -175,7 +175,7 @@ | |||
<div class="field"> | |||
<div class="text right edit"> | |||
<button class="ui basic secondary cancel button" tabindex="3">{{.locale.Tr "repo.issues.cancel"}}</button> | |||
<button class="ui basic cancel button" tabindex="3">{{.locale.Tr "repo.issues.cancel"}}</button> | |||
<button class="ui primary save button" tabindex="2">{{.locale.Tr "repo.issues.save"}}</button> | |||
</div> | |||
</div> |
@@ -14,7 +14,7 @@ | |||
</h1> | |||
<div class="issue-title-buttons"> | |||
{{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .Repository.IsArchived)}} | |||
<button id="edit-title" class="ui small basic button secondary edit-button not-in-edit{{if .Issue.IsPull}} gt-mr-0{{end}}">{{.locale.Tr "repo.issues.edit"}}</button> | |||
<button id="edit-title" class="ui small basic button edit-button not-in-edit{{if .Issue.IsPull}} gt-mr-0{{end}}">{{.locale.Tr "repo.issues.edit"}}</button> | |||
{{end}} | |||
{{if not .Issue.IsPull}} | |||
<a role="button" class="ui small green button new-issue-button gt-mr-0" href="{{.RepoLink}}/issues/new{{if .NewIssueChooseTemplate}}/choose{{end}}">{{.locale.Tr "repo.issues.new"}}</a> | |||
@@ -22,7 +22,7 @@ | |||
</div> | |||
{{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .Repository.IsArchived)}} | |||
<div class="edit-buttons"> | |||
<button id="cancel-edit-title" class="ui small basic button secondary in-edit gt-hidden">{{.locale.Tr "repo.issues.cancel"}}</button> | |||
<button id="cancel-edit-title" class="ui small basic button in-edit gt-hidden">{{.locale.Tr "repo.issues.cancel"}}</button> | |||
<button id="save-edit-title" class="ui small primary button in-edit gt-hidden gt-mr-0" data-update-url="{{$.RepoLink}}/issues/{{.Issue.Index}}/title" {{if .Issue.IsPull}}data-target-update-url="{{$.RepoLink}}/pull/{{.Issue.Index}}/target_branch"{{end}}>{{.locale.Tr "repo.issues.save"}}</button> | |||
</div> | |||
{{end}} | |||
@@ -47,7 +47,7 @@ | |||
{{if .HeadBranchLink}} | |||
{{$headHref = printf `<a href="%s">%s</a>` (.HeadBranchLink | Escape) $headHref}} | |||
{{end}} | |||
{{$headHref = printf `%s <button class="button button-ghost" data-tooltip-content="%s" data-clipboard-text="%s">%s</button>` $headHref (.locale.Tr "copy_branch") (.HeadTarget | Escape) (svg "octicon-copy" 14)}} | |||
{{$headHref = printf `%s <button class="btn interact-fg" data-tooltip-content="%s" data-clipboard-text="%s">%s</button>` $headHref (.locale.Tr "copy_branch") (.HeadTarget | Escape) (svg "octicon-copy" 14)}} | |||
{{$baseHref := .BaseTarget|Escape}} | |||
{{if .BaseBranchLink}} | |||
{{$baseHref = printf `<a href="%s">%s</a>` (.BaseBranchLink | Escape) $baseHref}} |
@@ -123,7 +123,7 @@ | |||
{{end}} | |||
{{else}} | |||
{{if not .tag_name}} | |||
<button class="ui grey button" type="submit" name="tag_only" value="{{.locale.Tr "repo.release.add_tag"}}">{{.locale.Tr "repo.release.add_tag"}}</button> | |||
<button class="ui button" type="submit" name="tag_only" value="{{.locale.Tr "repo.release.add_tag"}}">{{.locale.Tr "repo.release.add_tag"}}</button> | |||
{{end}} | |||
<button class="ui button" type="submit" name="draft" value="{{.locale.Tr "repo.release.save_draft"}}">{{.locale.Tr "repo.release.save_draft"}}</button> | |||
<button class="ui primary button"> |
@@ -107,7 +107,7 @@ | |||
<tr> | |||
<td id="L{{$line}}" class="lines-num"><span id="L{{$line}}" data-line-number="{{$line}}"></span></td> | |||
{{if $.EscapeStatus.Escaped}} | |||
<td class="lines-escape">{{if (index $.LineEscapeStatus $idx).Escaped}}<button class="toggle-escape-button button button-ghost" title="{{if (index $.LineEscapeStatus $idx).HasInvisible}}{{$.locale.Tr "repo.invisible_runes_line"}} {{end}}{{if (index $.LineEscapeStatus $idx).HasAmbiguous}}{{$.locale.Tr "repo.ambiguous_runes_line"}}{{end}}"></button>{{end}}</td> | |||
<td class="lines-escape">{{if (index $.LineEscapeStatus $idx).Escaped}}<button class="toggle-escape-button btn interact-bg" title="{{if (index $.LineEscapeStatus $idx).HasInvisible}}{{$.locale.Tr "repo.invisible_runes_line"}} {{end}}{{if (index $.LineEscapeStatus $idx).HasAmbiguous}}{{$.locale.Tr "repo.ambiguous_runes_line"}}{{end}}"></button>{{end}}</td> | |||
{{end}} | |||
<td rel="L{{$line}}" class="lines-code chroma"><code class="code-inner">{{$code | Safe}}</code></td> | |||
</tr> |
@@ -12,7 +12,7 @@ | |||
</div> | |||
<div class="issue-item-main gt-f1 gt-fc gt-df"> | |||
<div class="issue-item-top-row"> | |||
<a class="title gt-tdn issue-title" href="{{if .Link}}{{.Link}}{{else}}{{$.Link}}/{{.Index}}{{end}}">{{RenderEmoji $.Context .Title | RenderCodeBlock}}</a> | |||
<a class="title gt-no-underline issue-title" href="{{if .Link}}{{.Link}}{{else}}{{$.Link}}/{{.Index}}{{end}}">{{RenderEmoji $.Context .Title | RenderCodeBlock}}</a> | |||
{{if .IsPull}} | |||
{{if (index $.CommitStatuses .PullRequest.ID)}} | |||
{{template "repo/commit_statuses" dict "Status" (index $.CommitLastStatus .PullRequest.ID) "Statuses" (index $.CommitStatuses .PullRequest.ID) "root" $}} | |||
@@ -132,7 +132,7 @@ | |||
{{if .Assignees}} | |||
<div class="issue-item-icon-right text grey"> | |||
{{range .Assignees}} | |||
<a class="ui assignee gt-tdn" href="{{.HomeLink}}" data-tooltip-content="{{.GetDisplayName}}"> | |||
<a class="ui assignee gt-no-underline" href="{{.HomeLink}}" data-tooltip-content="{{.GetDisplayName}}"> | |||
{{avatar $.Context . 20}} | |||
</a> | |||
{{end}} | |||
@@ -140,7 +140,7 @@ | |||
{{end}} | |||
{{if .NumComments}} | |||
<div class="issue-item-icon-right text grey"> | |||
<a class="gt-tdn muted" href="{{if .Link}}{{.Link}}{{else}}{{$.Link}}/{{.Index}}{{end}}"> | |||
<a class="gt-no-underline muted" href="{{if .Link}}{{.Link}}{{else}}{{$.Link}}/{{.Index}}{{end}}"> | |||
{{svg "octicon-comment" 16 "gt-mr-2"}}{{.NumComments}} | |||
</a> | |||
</div> |
@@ -74,7 +74,7 @@ | |||
{{$.CsrfTokenHtml}} | |||
<input type="hidden" name="notification_id" value="{{.ID}}"> | |||
<input type="hidden" name="status" value="pinned"> | |||
<button class="ui mini button button-ghost gt-p-3" title='{{$.locale.Tr "notification.pin"}}' | |||
<button class="btn interact-bg gt-p-3" title='{{$.locale.Tr "notification.pin"}}' | |||
data-url="{{AppSubUrl}}/notifications/status" | |||
data-status="pinned" | |||
data-page="{{$.Page.Paginater.Current}}" | |||
@@ -90,7 +90,7 @@ | |||
<input type="hidden" name="notification_id" value="{{.ID}}"> | |||
<input type="hidden" name="status" value="read"> | |||
<input type="hidden" name="page" value="{{$.Page.Paginater.Current}}"> | |||
<button class="ui mini button button-ghost gt-p-3" title='{{$.locale.Tr "notification.mark_as_read"}}' | |||
<button class="btn interact-bg gt-p-3" title='{{$.locale.Tr "notification.mark_as_read"}}' | |||
data-url="{{AppSubUrl}}/notifications/status" | |||
data-status="read" | |||
data-page="{{$.Page.Paginater.Current}}" | |||
@@ -105,7 +105,7 @@ | |||
<input type="hidden" name="notification_id" value="{{.ID}}"> | |||
<input type="hidden" name="status" value="unread"> | |||
<input type="hidden" name="page" value="{{$.Page.Paginater.Current}}"> | |||
<button class="ui mini button button-ghost gt-p-3" title='{{$.locale.Tr "notification.mark_as_unread"}}' | |||
<button class="btn interact-bg gt-p-3" title='{{$.locale.Tr "notification.mark_as_unread"}}' | |||
data-url="{{AppSubUrl}}/notifications/status" | |||
data-status="unread" | |||
data-page="{{$.Page.Paginater.Current}}" |
@@ -27,7 +27,7 @@ | |||
<form class="ui form ignore-dirty" action="{{.FormActionPath}}/regenerate_secret" method="post"> | |||
{{.CsrfTokenHtml}} | |||
{{.locale.Tr "settings.oauth2_regenerate_secret_hint"}} | |||
<button class="ui button button-ghost" type="submit">{{.locale.Tr "settings.oauth2_regenerate_secret"}}</button> | |||
<button class="btn interact-bg" type="submit">{{.locale.Tr "settings.oauth2_regenerate_secret"}}</button> | |||
</form> | |||
</div> | |||
</div> |
@@ -73,8 +73,9 @@ | |||
--color-secondary-alpha-70: #dededeb3; | |||
--color-secondary-alpha-80: #dededecc; | |||
--color-secondary-alpha-90: #dededee1; | |||
--color-secondary-hover: var(--color-secondary-dark-1); | |||
--color-secondary-active: var(--color-secondary-dark-2); | |||
--color-secondary-button: var(--color-secondary-dark-4); | |||
--color-secondary-hover: var(--color-secondary-dark-5); | |||
--color-secondary-active: var(--color-secondary-dark-6); | |||
/* console colors - used for actions console and console files */ | |||
--color-console-fg: #eeeff2; | |||
--color-console-fg-subtle: #959cab; | |||
@@ -191,22 +192,20 @@ | |||
--color-footer: #ffffff; | |||
--color-timeline: #ececec; | |||
--color-input-text: #212121; | |||
--color-input-background: #ffffff; | |||
--color-input-background: #fafafa; | |||
--color-input-toggle-background: #dedede; | |||
--color-input-border: #dedede; | |||
--color-input-border-hover: #cecece; | |||
--color-header-wrapper: #f8f8f8; | |||
--color-header-wrapper-transparent: #f8f8f800; | |||
--color-input-border: var(--color-secondary); | |||
--color-input-border-hover: var(--color-secondary-dark-1); | |||
--color-light: #00000006; | |||
--color-light-mimic-enabled: rgba(0, 0, 0, calc(6 / 255 * 222 / 255 / var(--opacity-disabled))); | |||
--color-light-border: #0000001d; | |||
--color-hover: #00000014; | |||
--color-active: #0000001e; | |||
--color-menu: #ffffff; | |||
--color-card: #ffffff; | |||
--color-active: #0000001b; | |||
--color-menu: #fafafa; | |||
--color-card: #fafafa; | |||
--color-markup-table-row: #00000008; | |||
--color-markup-code-block: #00000010; | |||
--color-button: #ffffff; | |||
--color-button: #fafafa; | |||
--color-code-bg: #ffffff; | |||
--color-code-sidebar-bg: #f5f5f5; | |||
--color-shadow: #00000030; | |||
@@ -415,11 +414,6 @@ a.silenced:hover { | |||
text-decoration: none; | |||
} | |||
.delete-button, | |||
.delete-button:hover { | |||
color: var(--color-red); | |||
} | |||
a.label, | |||
.repository-menu a, | |||
.ui.search .results a, | |||
@@ -462,12 +456,6 @@ a.label, | |||
background-color: var(--color-markup-code-block); | |||
} | |||
/* try to match button with no icons in height */ | |||
.icon-button { | |||
padding-top: 7.42px !important; | |||
padding-bottom: 7.42px !important; | |||
} | |||
.ui.divider { | |||
color: var(--color-text); | |||
} | |||
@@ -509,8 +497,9 @@ a.label, | |||
border-right-color: transparent; | |||
} | |||
.ui.action.input:not([class*="left action"]) > input, | |||
.ui.action.input:not([class*="left action"]) > input:hover { | |||
border-right-color: transparent; | |||
border-right: 1px solid transparent; | |||
} | |||
.ui.action.input:not([class*="left action"]) > input:focus { | |||
@@ -682,7 +671,7 @@ a.label, | |||
} | |||
.ui.menu .dropdown.item .menu { | |||
background: var(--color-menu); | |||
background: var(--color-body); | |||
} | |||
.ui.menu .ui.dropdown .menu > .item { | |||
@@ -1735,6 +1724,10 @@ i.icon.centerlock { | |||
color: var(--color-label-text); | |||
} | |||
.ui.label > a { | |||
opacity: .75; /* increase contrast over default fomantic .5 */ | |||
} | |||
.ui.active.label { | |||
background: var(--color-label-active-bg); | |||
border-color: var(--color-label-active-bg); | |||
@@ -2039,7 +2032,7 @@ a.ui.ui.ui.basic.primary.label:hover { | |||
.ui.basic.labels .label, | |||
.ui.basic.label { | |||
background: var(--color-light); | |||
background: var(--color-button); | |||
border-color: var(--color-light-border); | |||
color: var(--color-text-light); | |||
} |
@@ -11,7 +11,6 @@ Gitea's private styles use `g-` prefix. | |||
.gt-ab { align-items: baseline !important; } | |||
.gt-tc { text-align: center !important; } | |||
.gt-tl { text-align: left !important; } | |||
.gt-tdn { text-decoration: none !important; } | |||
.gt-jc { justify-content: center !important; } | |||
.gt-js { justify-content: flex-start !important; } | |||
.gt-je { justify-content: flex-end !important; } | |||
@@ -76,6 +75,7 @@ Gitea's private styles use `g-` prefix. | |||
.gt-self-center { align-self: center !important; } | |||
.gt-self-start { align-self: flex-start !important; } | |||
.gt-self-end { align-self: flex-end !important; } | |||
.gt-no-underline { text-decoration-line: none !important; } | |||
.gt-overflow-x-auto { overflow-x: auto !important; } | |||
.gt-overflow-x-scroll { overflow-x: scroll !important; } | |||
@@ -124,6 +124,14 @@ Gitea's private styles use `g-` prefix. | |||
.gt-text-white { color: var(--color-white) !important; } | |||
.interact-fg { color: inherit !important; } | |||
.interact-fg:hover { color: var(--color-primary) !important; } | |||
.interact-fg:active { color: var(--color-primary-active) !important; } | |||
.interact-bg { background: transparent !important; } | |||
.interact-bg:hover { background: var(--color-hover) !important; } | |||
.interact-bg:active { background: var(--color-active) !important; } | |||
.gt-m-0 { margin: 0 !important; } | |||
.gt-m-1 { margin: .125rem !important; } | |||
.gt-m-2 { margin: .25rem !important; } | |||
@@ -253,6 +261,7 @@ Gitea's private styles use `g-` prefix. | |||
.gt-shrink-0 { flex-shrink: 0 !important; } | |||
.gt-font-12 { font-size: 12px !important } | |||
.gt-font-13 { font-size: 13px !important } | |||
.gt-font-14 { font-size: 14px !important } | |||
.gt-font-15 { font-size: 15px !important } |
@@ -1,44 +1,21 @@ | |||
/* this contains override styles for buttons and related elements */ | |||
.ui.button { | |||
.ui.button, | |||
.ui.button:focus { | |||
background: var(--color-button); | |||
border: 1px solid var(--color-light-border); | |||
color: var(--color-text); | |||
} | |||
/* a ghost button is a button without border */ | |||
.button.button-ghost { | |||
background: transparent; | |||
border: none; | |||
color: inherit; | |||
margin: 0; | |||
padding: 0; | |||
} | |||
.button.button-ghost:hover { | |||
.ui.button:hover { | |||
background: var(--color-hover); | |||
} | |||
.button.button-ghost:active { | |||
background: var(--color-active); | |||
} | |||
.ui.button.button-link { | |||
background: transparent; | |||
border: none; | |||
color: inherit; | |||
color: var(--color-text); | |||
} | |||
.page-content .ui.button { | |||
box-shadow: none !important; | |||
} | |||
.ui.button:focus, | |||
.ui.button:hover { | |||
background: var(--color-hover); | |||
color: var(--color-text); | |||
} | |||
.ui.active.button, | |||
.ui.button:active, | |||
.ui.active.button:active, | |||
@@ -51,6 +28,42 @@ | |||
margin: 0 !important; | |||
} | |||
.delete-button, | |||
.delete-button:hover { | |||
color: var(--color-red); | |||
} | |||
/* try to match button with no icons in height */ | |||
.icon-button { | |||
padding-top: 7.42px !important; | |||
padding-bottom: 7.42px !important; | |||
} | |||
/* btn is a plain button without any opinionated styling */ | |||
.btn { | |||
background: transparent; | |||
border-radius: var(--border-radius); | |||
border: none; | |||
color: inherit; | |||
margin: 0; | |||
padding: 0; | |||
} | |||
.btn:hover, | |||
.btn:active, | |||
.btn:focus { | |||
background: none; | |||
border: none; | |||
} | |||
a.btn, | |||
a.btn:hover { | |||
color: inherit; | |||
} | |||
/* other button styles */ | |||
.ui.buttons .button:first-child { | |||
border-left: 1px solid var(--color-light-border); | |||
} | |||
@@ -63,10 +76,6 @@ | |||
border-left: none; | |||
} | |||
.ui.button.button-link:hover { | |||
color: var(--color-primary); | |||
} | |||
.two-toggle-buttons .button:not(.active):first-of-type { | |||
border-right: none; | |||
} | |||
@@ -77,9 +86,11 @@ | |||
.ui.labeled.button.disabled > .button, | |||
.ui.basic.buttons .button, | |||
.ui.basic.button { | |||
.ui.basic.button, | |||
.ui.basic.buttons .button:focus, | |||
.ui.basic.button:focus { | |||
color: var(--color-text-light); | |||
background: var(--color-light); | |||
background: var(--color-button); | |||
} | |||
.ui.basic.buttons .button:hover, | |||
@@ -88,8 +99,7 @@ | |||
background: var(--color-hover); | |||
} | |||
.ui.basic.buttons .button:focus, | |||
.ui.basic.button:focus, | |||
.ui.basic.buttons .button:active, | |||
.ui.basic.button:active, | |||
.ui.basic.buttons .active.button, | |||
@@ -114,14 +124,14 @@ | |||
.ui.primary.labels .label, | |||
.ui.ui.ui.primary.label, | |||
.ui.primary.button, | |||
.ui.primary.buttons .button { | |||
.ui.primary.buttons .button, | |||
.ui.primary.button:focus, | |||
.ui.primary.buttons .button:focus { | |||
background: var(--color-primary); | |||
} | |||
.ui.primary.button:hover, | |||
.ui.primary.buttons .button:hover, | |||
.ui.primary.button:focus, | |||
.ui.primary.buttons .button:focus { | |||
.ui.primary.buttons .button:hover { | |||
background: var(--color-primary-hover); | |||
} | |||
@@ -131,15 +141,15 @@ | |||
} | |||
.ui.basic.primary.buttons .button, | |||
.ui.basic.primary.button { | |||
.ui.basic.primary.button, | |||
.ui.basic.primary.buttons .button:focus, | |||
.ui.basic.primary.button:focus { | |||
color: var(--color-primary); | |||
border-color: var(--color-primary); | |||
} | |||
.ui.basic.primary.buttons .button:hover, | |||
.ui.basic.primary.button:hover, | |||
.ui.basic.primary.buttons .button:focus, | |||
.ui.basic.primary.button:focus { | |||
.ui.basic.primary.button:hover { | |||
color: var(--color-primary-hover); | |||
border-color: var(--color-primary-hover); | |||
} | |||
@@ -155,47 +165,46 @@ | |||
.ui.secondary.labels .label, | |||
.ui.ui.ui.secondary.label, | |||
.ui.secondary.button, | |||
.ui.secondary.buttons .button { | |||
background: var(--color-secondary); | |||
color: var(--color-text); | |||
.ui.secondary.buttons .button, | |||
.ui.secondary.button:focus, | |||
.ui.secondary.buttons .button:focus { | |||
background: var(--color-secondary-button); | |||
} | |||
.ui.secondary.button:hover, | |||
.ui.secondary.buttons .button:hover, | |||
.ui.secondary.button:focus, | |||
.ui.secondary.buttons .button:focus { | |||
background: var(--color-secondary-dark-1); | |||
color: var(--color-text); | |||
.ui.secondary.buttons .button:hover { | |||
background: var(--color-secondary-hover); | |||
} | |||
.ui.secondary.button:active, | |||
.ui.secondary.buttons .button:active { | |||
background: var(--color-secondary-dark-2); | |||
color: var(--color-text); | |||
background: var(--color-secondary-active); | |||
} | |||
.ui.basic.secondary.buttons .button, | |||
.ui.basic.secondary.button { | |||
color: var(--color-secondary-dark-6) !important; | |||
.ui.basic.secondary.button, | |||
.ui.basic.secondary.button:focus, | |||
.ui.basic.secondary.buttons .button:focus { | |||
color: var(--color-secondary-button); | |||
border-color: var(--color-secondary-button); | |||
} | |||
.ui.basic.secondary.buttons .button:hover, | |||
.ui.basic.secondary.button:hover, | |||
.ui.basic.secondary.buttons .button:active, | |||
.ui.basic.secondary.button:active { | |||
color: var(--color-secondary-dark-8) !important; | |||
border-color: var(--color-secondary-dark-1) !important; | |||
.ui.basic.secondary.button:hover { | |||
color: var(--color-secondary-hover); | |||
border-color: var(--color-secondary-hover); | |||
} | |||
.ui.basic.secondary.button:focus, | |||
.ui.basic.secondary.buttons .button:focus { | |||
color: var(--color-secondary-dark-8) !important; | |||
border-color: var(--color-secondary-dark-3) !important; | |||
.ui.basic.secondary.buttons .button:active, | |||
.ui.basic.secondary.button:active { | |||
color: var(--color-secondary-active); | |||
border-color: var(--color-secondary-active); | |||
} | |||
/* tertiary */ | |||
.ui.tertiary.button { | |||
.ui.tertiary.button, | |||
.ui.tertiary.button:focus { | |||
color: var(--color-text-light); | |||
border: none; | |||
} | |||
@@ -204,7 +213,7 @@ | |||
color: var(--color-text); | |||
} | |||
.ui.tertiary.button:focus { | |||
.ui.tertiary.button:active { | |||
color: var(--color-text-dark); | |||
} | |||
@@ -213,14 +222,14 @@ | |||
.ui.red.labels .label, | |||
.ui.ui.ui.red.label, | |||
.ui.red.button, | |||
.ui.red.buttons .button { | |||
.ui.red.buttons .button, | |||
.ui.red.button:focus, | |||
.ui.red.buttons .button:focus { | |||
background: var(--color-red); | |||
} | |||
.ui.red.button:hover, | |||
.ui.red.buttons .button:hover, | |||
.ui.red.button:focus, | |||
.ui.red.buttons .button:focus { | |||
.ui.red.buttons .button:hover { | |||
background: var(--color-red-dark-1); | |||
} | |||
@@ -230,15 +239,15 @@ | |||
} | |||
.ui.basic.red.buttons .button, | |||
.ui.basic.red.button { | |||
.ui.basic.red.button, | |||
.ui.basic.red.buttons .button:focus, | |||
.ui.basic.red.button:focus { | |||
color: var(--color-red); | |||
border-color: var(--color-red); | |||
} | |||
.ui.basic.red.buttons .button:hover, | |||
.ui.basic.red.button:hover, | |||
.ui.basic.red.buttons .button:focus, | |||
.ui.basic.red.button:focus { | |||
.ui.basic.red.button:hover { | |||
color: var(--color-red-dark-1); | |||
border-color: var(--color-red-dark-1); | |||
} | |||
@@ -254,14 +263,14 @@ | |||
.ui.orange.labels .label, | |||
.ui.ui.ui.orange.label, | |||
.ui.orange.button, | |||
.ui.orange.buttons .button { | |||
.ui.orange.buttons .button, | |||
.ui.orange.button:focus, | |||
.ui.orange.buttons .button:focus { | |||
background: var(--color-orange); | |||
} | |||
.ui.orange.button:hover, | |||
.ui.orange.buttons .button:hover, | |||
.ui.orange.button:focus, | |||
.ui.orange.buttons .button:focus { | |||
.ui.orange.buttons .button:hover { | |||
background: var(--color-orange-dark-1); | |||
} | |||
@@ -271,15 +280,15 @@ | |||
} | |||
.ui.basic.orange.buttons .button, | |||
.ui.basic.orange.button { | |||
.ui.basic.orange.button, | |||
.ui.basic.orange.buttons .button:focus, | |||
.ui.basic.orange.button:focus { | |||
color: var(--color-orange); | |||
border-color: var(--color-orange); | |||
} | |||
.ui.basic.orange.buttons .button:hover, | |||
.ui.basic.orange.button:hover, | |||
.ui.basic.orange.buttons .button:focus, | |||
.ui.basic.orange.button:focus { | |||
.ui.basic.orange.button:hover { | |||
color: var(--color-orange-dark-1); | |||
border-color: var(--color-orange-dark-1); | |||
} | |||
@@ -295,14 +304,14 @@ | |||
.ui.yellow.labels .label, | |||
.ui.ui.ui.yellow.label, | |||
.ui.yellow.button, | |||
.ui.yellow.buttons .button { | |||
.ui.yellow.buttons .button, | |||
.ui.yellow.button:focus, | |||
.ui.yellow.buttons .button:focus { | |||
background: var(--color-yellow); | |||
} | |||
.ui.yellow.button:hover, | |||
.ui.yellow.buttons .button:hover, | |||
.ui.yellow.button:focus, | |||
.ui.yellow.buttons .button:focus { | |||
.ui.yellow.buttons .button:hover { | |||
background: var(--color-yellow-dark-1); | |||
} | |||
@@ -312,15 +321,15 @@ | |||
} | |||
.ui.basic.yellow.buttons .button, | |||
.ui.basic.yellow.button { | |||
.ui.basic.yellow.button, | |||
.ui.basic.yellow.buttons .button:focus, | |||
.ui.basic.yellow.button:focus { | |||
color: var(--color-yellow); | |||
border-color: var(--color-yellow); | |||
} | |||
.ui.basic.yellow.buttons .button:hover, | |||
.ui.basic.yellow.button:hover, | |||
.ui.basic.yellow.buttons .button:focus, | |||
.ui.basic.yellow.button:focus { | |||
.ui.basic.yellow.button:hover { | |||
color: var(--color-yellow-dark-1); | |||
border-color: var(--color-yellow-dark-1); | |||
} | |||
@@ -336,14 +345,14 @@ | |||
.ui.olive.labels .label, | |||
.ui.ui.ui.olive.label, | |||
.ui.olive.button, | |||
.ui.olive.buttons .button { | |||
.ui.olive.buttons .button, | |||
.ui.olive.button:focus, | |||
.ui.olive.buttons .button:focus { | |||
background: var(--color-olive); | |||
} | |||
.ui.olive.button:hover, | |||
.ui.olive.buttons .button:hover, | |||
.ui.olive.button:focus, | |||
.ui.olive.buttons .button:focus { | |||
.ui.olive.buttons .button:hover { | |||
background: var(--color-olive-dark-1); | |||
} | |||
@@ -353,15 +362,15 @@ | |||
} | |||
.ui.basic.olive.buttons .button, | |||
.ui.basic.olive.button { | |||
.ui.basic.olive.button, | |||
.ui.basic.olive.buttons .button:focus, | |||
.ui.basic.olive.button:focus { | |||
color: var(--color-olive); | |||
border-color: var(--color-olive); | |||
} | |||
.ui.basic.olive.buttons .button:hover, | |||
.ui.basic.olive.button:hover, | |||
.ui.basic.olive.buttons .button:focus, | |||
.ui.basic.olive.button:focus { | |||
.ui.basic.olive.button:hover { | |||
color: var(--color-olive-dark-1); | |||
border-color: var(--color-olive-dark-1); | |||
} | |||
@@ -377,14 +386,14 @@ | |||
.ui.green.labels .label, | |||
.ui.ui.ui.green.label, | |||
.ui.green.button, | |||
.ui.green.buttons .button { | |||
.ui.green.buttons .button, | |||
.ui.green.button:focus, | |||
.ui.green.buttons .button:focus { | |||
background: var(--color-green); | |||
} | |||
.ui.green.button:hover, | |||
.ui.green.buttons .button:hover, | |||
.ui.green.button:focus, | |||
.ui.green.buttons .button:focus { | |||
.ui.green.buttons .button:hover { | |||
background: var(--color-green-dark-1); | |||
} | |||
@@ -394,15 +403,15 @@ | |||
} | |||
.ui.basic.green.buttons .button, | |||
.ui.basic.green.button { | |||
.ui.basic.green.button, | |||
.ui.basic.green.buttons .button:focus, | |||
.ui.basic.green.button:focus { | |||
color: var(--color-green); | |||
border-color: var(--color-green); | |||
} | |||
.ui.basic.green.buttons .button:hover, | |||
.ui.basic.green.button:hover, | |||
.ui.basic.green.buttons .button:focus, | |||
.ui.basic.green.button:focus { | |||
.ui.basic.green.button:hover { | |||
color: var(--color-green-dark-1); | |||
border-color: var(--color-green-dark-1); | |||
} | |||
@@ -418,14 +427,14 @@ | |||
.ui.teal.labels .label, | |||
.ui.ui.ui.teal.label, | |||
.ui.teal.button, | |||
.ui.teal.buttons .button { | |||
.ui.teal.buttons .button, | |||
.ui.teal.button:focus, | |||
.ui.teal.buttons .button:focus { | |||
background: var(--color-teal); | |||
} | |||
.ui.teal.button:hover, | |||
.ui.teal.buttons .button:hover, | |||
.ui.teal.button:focus, | |||
.ui.teal.buttons .button:focus { | |||
.ui.teal.buttons .button:hover { | |||
background: var(--color-teal-dark-1); | |||
} | |||
@@ -435,15 +444,15 @@ | |||
} | |||
.ui.basic.teal.buttons .button, | |||
.ui.basic.teal.button { | |||
.ui.basic.teal.button, | |||
.ui.basic.teal.buttons .button:focus, | |||
.ui.basic.teal.button:focus { | |||
color: var(--color-teal); | |||
border-color: var(--color-teal); | |||
} | |||
.ui.basic.teal.buttons .button:hover, | |||
.ui.basic.teal.button:hover, | |||
.ui.basic.teal.buttons .button:focus, | |||
.ui.basic.teal.button:focus { | |||
.ui.basic.teal.button:hover { | |||
color: var(--color-teal-dark-1); | |||
border-color: var(--color-teal-dark-1); | |||
} | |||
@@ -459,14 +468,14 @@ | |||
.ui.blue.labels .label, | |||
.ui.ui.ui.blue.label, | |||
.ui.blue.button, | |||
.ui.blue.buttons .button { | |||
.ui.blue.buttons .button, | |||
.ui.blue.button:focus, | |||
.ui.blue.buttons .button:focus { | |||
background: var(--color-blue); | |||
} | |||
.ui.blue.button:hover, | |||
.ui.blue.buttons .button:hover, | |||
.ui.blue.button:focus, | |||
.ui.blue.buttons .button:focus { | |||
.ui.blue.buttons .button:hover { | |||
background: var(--color-blue-dark-1); | |||
} | |||
@@ -476,15 +485,15 @@ | |||
} | |||
.ui.basic.blue.buttons .button, | |||
.ui.basic.blue.button { | |||
.ui.basic.blue.button, | |||
.ui.basic.blue.buttons .button:focus, | |||
.ui.basic.blue.button:focus { | |||
color: var(--color-blue); | |||
border-color: var(--color-blue); | |||
} | |||
.ui.basic.blue.buttons .button:hover, | |||
.ui.basic.blue.button:hover, | |||
.ui.basic.blue.buttons .button:focus, | |||
.ui.basic.blue.button:focus { | |||
.ui.basic.blue.button:hover { | |||
color: var(--color-blue-dark-1); | |||
border-color: var(--color-blue-dark-1); | |||
} | |||
@@ -500,14 +509,14 @@ | |||
.ui.violet.labels .label, | |||
.ui.ui.ui.violet.label, | |||
.ui.violet.button, | |||
.ui.violet.buttons .button { | |||
.ui.violet.buttons .button, | |||
.ui.violet.button:focus, | |||
.ui.violet.buttons .button:focus { | |||
background: var(--color-violet); | |||
} | |||
.ui.violet.button:hover, | |||
.ui.violet.buttons .button:hover, | |||
.ui.violet.button:focus, | |||
.ui.violet.buttons .button:focus { | |||
.ui.violet.buttons .button:hover { | |||
background: var(--color-violet-dark-1); | |||
} | |||
@@ -517,15 +526,15 @@ | |||
} | |||
.ui.basic.violet.buttons .button, | |||
.ui.basic.violet.button { | |||
.ui.basic.violet.button, | |||
.ui.basic.violet.buttons .button:focus, | |||
.ui.basic.violet.button:focus { | |||
color: var(--color-violet); | |||
border-color: var(--color-violet); | |||
} | |||
.ui.basic.violet.buttons .button:hover, | |||
.ui.basic.violet.button:hover, | |||
.ui.basic.violet.buttons .button:focus, | |||
.ui.basic.violet.button:focus { | |||
.ui.basic.violet.button:hover { | |||
color: var(--color-violet-dark-1); | |||
border-color: var(--color-violet-dark-1); | |||
} | |||
@@ -541,14 +550,14 @@ | |||
.ui.purple.labels .label, | |||
.ui.ui.ui.purple.label, | |||
.ui.purple.button, | |||
.ui.purple.buttons .button { | |||
.ui.purple.buttons .button, | |||
.ui.purple.button:focus, | |||
.ui.purple.buttons .button:focus { | |||
background: var(--color-purple); | |||
} | |||
.ui.purple.button:hover, | |||
.ui.purple.buttons .button:hover, | |||
.ui.purple.button:focus, | |||
.ui.purple.buttons .button:focus { | |||
.ui.purple.buttons .button:hover { | |||
background: var(--color-purple-dark-1); | |||
} | |||
@@ -558,15 +567,15 @@ | |||
} | |||
.ui.basic.purple.buttons .button, | |||
.ui.basic.purple.button { | |||
.ui.basic.purple.button, | |||
.ui.basic.purple.buttons .button:focus, | |||
.ui.basic.purple.button:focus { | |||
color: var(--color-purple); | |||
border-color: var(--color-purple); | |||
} | |||
.ui.basic.purple.buttons .button:hover, | |||
.ui.basic.purple.button:hover, | |||
.ui.basic.purple.buttons .button:focus, | |||
.ui.basic.purple.button:focus { | |||
.ui.basic.purple.button:hover { | |||
color: var(--color-purple-dark-1); | |||
border-color: var(--color-purple-dark-1); | |||
} | |||
@@ -582,14 +591,14 @@ | |||
.ui.pink.labels .label, | |||
.ui.ui.ui.pink.label, | |||
.ui.pink.button, | |||
.ui.pink.buttons .button { | |||
.ui.pink.buttons .button, | |||
.ui.pink.button:focus, | |||
.ui.pink.buttons .button:focus { | |||
background: var(--color-pink); | |||
} | |||
.ui.pink.button:hover, | |||
.ui.pink.buttons .button:hover, | |||
.ui.pink.button:focus, | |||
.ui.pink.buttons .button:focus { | |||
.ui.pink.buttons .button:hover { | |||
background: var(--color-pink-dark-1); | |||
} | |||
@@ -599,15 +608,15 @@ | |||
} | |||
.ui.basic.pink.buttons .button, | |||
.ui.basic.pink.button { | |||
.ui.basic.pink.button, | |||
.ui.basic.pink.buttons .button:focus, | |||
.ui.basic.pink.button:focus { | |||
color: var(--color-pink); | |||
border-color: var(--color-pink); | |||
} | |||
.ui.basic.pink.buttons .button:hover, | |||
.ui.basic.pink.button:hover, | |||
.ui.basic.pink.buttons .button:focus, | |||
.ui.basic.pink.button:focus { | |||
.ui.basic.pink.button:hover { | |||
color: var(--color-pink-dark-1); | |||
border-color: var(--color-pink-dark-1); | |||
} | |||
@@ -623,14 +632,14 @@ | |||
.ui.brown.labels .label, | |||
.ui.ui.ui.brown.label, | |||
.ui.brown.button, | |||
.ui.brown.buttons .button { | |||
.ui.brown.buttons .button, | |||
.ui.brown.button:focus, | |||
.ui.brown.buttons .button:focus { | |||
background: var(--color-brown); | |||
} | |||
.ui.brown.button:hover, | |||
.ui.brown.buttons .button:hover, | |||
.ui.brown.button:focus, | |||
.ui.brown.buttons .button:focus { | |||
.ui.brown.buttons .button:hover { | |||
background: var(--color-brown-dark-1); | |||
} | |||
@@ -640,15 +649,15 @@ | |||
} | |||
.ui.basic.brown.buttons .button, | |||
.ui.basic.brown.button { | |||
.ui.basic.brown.button, | |||
.ui.basic.brown.buttons .button:focus, | |||
.ui.basic.brown.button:focus { | |||
color: var(--color-brown); | |||
border-color: var(--color-brown); | |||
} | |||
.ui.basic.brown.buttons .button:hover, | |||
.ui.basic.brown.button:hover, | |||
.ui.basic.brown.buttons .button:focus, | |||
.ui.basic.brown.button:focus { | |||
.ui.basic.brown.button:hover { | |||
color: var(--color-brown-dark-1); | |||
border-color: var(--color-brown-dark-1); | |||
} | |||
@@ -659,97 +668,17 @@ | |||
border-color: var(--color-brown-dark-2); | |||
} | |||
/* grey */ | |||
.ui.grey.labels .label, | |||
.ui.ui.ui.grey.label, | |||
.ui.grey.button, | |||
.ui.grey.buttons .button { | |||
background: var(--color-grey); | |||
} | |||
.ui.grey.button:hover, | |||
.ui.grey.buttons .button:hover, | |||
.ui.grey.button:focus, | |||
.ui.grey.buttons .button:focus { | |||
background: var(--color-grey-dark-1); | |||
} | |||
.ui.grey.button:active, | |||
.ui.grey.buttons .button:active { | |||
background: var(--color-grey-dark-2); | |||
} | |||
.ui.basic.grey.buttons .button, | |||
.ui.basic.grey.button { | |||
color: var(--color-grey); | |||
border-color: var(--color-grey); | |||
} | |||
.ui.basic.grey.buttons .button:hover, | |||
.ui.basic.grey.button:hover, | |||
.ui.basic.grey.buttons .button:focus, | |||
.ui.basic.grey.button:focus { | |||
color: var(--color-grey-dark-1); | |||
border-color: var(--color-grey-dark-1); | |||
} | |||
.ui.basic.grey.buttons .button:active, | |||
.ui.basic.grey.button:active { | |||
color: var(--color-grey-dark-2); | |||
border-color: var(--color-grey-dark-2); | |||
} | |||
/* black */ | |||
.ui.black.labels .label, | |||
.ui.ui.ui.black.label, | |||
.ui.black.button, | |||
.ui.black.buttons .button { | |||
background: var(--color-black); | |||
} | |||
.ui.black.button:hover, | |||
.ui.black.buttons .button:hover, | |||
.ui.black.button:focus, | |||
.ui.black.buttons .button:focus { | |||
background: var(--color-black-dark-1); | |||
} | |||
.ui.black.button:active, | |||
.ui.black.buttons .button:active { | |||
background: var(--color-black-dark-2); | |||
} | |||
.ui.basic.black.buttons .button, | |||
.ui.basic.black.button { | |||
color: var(--color-black); | |||
border-color: var(--color-black); | |||
} | |||
.ui.basic.black.buttons .button:hover, | |||
.ui.basic.black.button:hover, | |||
.ui.basic.black.buttons .button:focus, | |||
.ui.basic.black.button:focus { | |||
color: var(--color-black-dark-1); | |||
border-color: var(--color-black-dark-1); | |||
} | |||
.ui.basic.black.buttons .button:active, | |||
.ui.basic.black.button:active { | |||
color: var(--color-black-dark-2); | |||
border-color: var(--color-black-dark-2); | |||
} | |||
/* negative */ | |||
.ui.negative.buttons .button, | |||
.ui.negative.button { | |||
.ui.negative.button, | |||
.ui.negative.buttons .button:focus, | |||
.ui.negative.button:focus { | |||
background: var(--color-red); | |||
} | |||
.ui.negative.buttons .button:hover, | |||
.ui.negative.button:hover, | |||
.ui.negative.buttons .button:focus, | |||
.ui.negative.button:focus { | |||
.ui.negative.button:hover { | |||
background: var(--color-red-dark-1); | |||
} | |||
@@ -758,18 +687,16 @@ | |||
background: var(--color-red-dark-2); | |||
} | |||
/* negative */ | |||
.ui.basic.negative.buttons .button, | |||
.ui.basic.negative.button { | |||
.ui.basic.negative.button, | |||
.ui.basic.negative.buttons .button:focus, | |||
.ui.basic.negative.button:focus { | |||
color: var(--color-red); | |||
border-color: var(--color-red); | |||
} | |||
.ui.basic.negative.buttons .button:hover, | |||
.ui.basic.negative.button:hover, | |||
.ui.basic.negative.buttons .button:focus, | |||
.ui.basic.negative.button:focus { | |||
.ui.basic.negative.button:hover { | |||
color: var(--color-red-dark-1); | |||
border-color: var(--color-red-dark-1); | |||
} | |||
@@ -783,14 +710,14 @@ | |||
/* positive */ | |||
.ui.positive.buttons .button, | |||
.ui.positive.button { | |||
.ui.positive.button, | |||
.ui.positive.buttons .button:focus, | |||
.ui.positive.button:focus { | |||
background: var(--color-green); | |||
} | |||
.ui.positive.buttons .button:hover, | |||
.ui.positive.button:hover, | |||
.ui.positive.buttons .button:focus, | |||
.ui.positive.button:focus { | |||
.ui.positive.button:hover { | |||
background: var(--color-green-dark-1); | |||
} | |||
@@ -800,15 +727,15 @@ | |||
} | |||
.ui.basic.positive.buttons .button, | |||
.ui.basic.positive.button { | |||
.ui.basic.positive.button, | |||
.ui.basic.positive.buttons .button:focus, | |||
.ui.basic.positive.button:focus { | |||
color: var(--color-green); | |||
border-color: var(--color-green); | |||
} | |||
.ui.basic.positive.buttons .button:hover, | |||
.ui.basic.positive.button:hover, | |||
.ui.basic.positive.buttons .button:focus, | |||
.ui.basic.positive.button:focus { | |||
.ui.basic.positive.button:hover { | |||
color: var(--color-green-dark-1); | |||
border-color: var(--color-green-dark-1); | |||
} |
@@ -1823,16 +1823,12 @@ | |||
clear: right; | |||
} | |||
.repository .diff-file-box.file-content img { | |||
.repository .diff-file-box.file-content .image-diff img { | |||
max-width: 100%; | |||
padding: 0; | |||
border-radius: 0; | |||
} | |||
.repository .diff-file-box.file-content img.emoji { | |||
padding: 0; | |||
} | |||
.repository .diff-file-box .ui.bottom.attached.table.segment { | |||
padding-top: 5px; | |||
padding-bottom: 5px; | |||
@@ -3085,8 +3081,7 @@ tbody.commit-list { | |||
} | |||
.diff-file-header { | |||
padding-top: 5px !important; | |||
padding-bottom: 5px !important; | |||
padding: 5px 8px !important; | |||
} | |||
.diff-file-box[data-folded="true"] .diff-file-body { |
@@ -28,9 +28,19 @@ | |||
.small-menu-items { | |||
min-height: 35.4px !important; /* match .small.button in height */ | |||
background: none !important; /* fomantic sets a color here which does not play well with active transparent color on the item, so unset and set the colors on the item */ | |||
} | |||
.small-menu-items .item { | |||
background: var(--color-menu) !important; | |||
padding-top: 6px !important; | |||
padding-bottom: 6px !important; | |||
} | |||
.small-menu-items .item:hover { | |||
background: var(--color-hover) !important; | |||
} | |||
.small-menu-items .item.active { | |||
background: var(--color-active) !important; | |||
} |
@@ -145,7 +145,7 @@ | |||
} | |||
.issue.list .branches .branch { | |||
background-color: var(--color-secondary); | |||
background-color: var(--color-secondary-alpha-40); | |||
border-radius: 3px; | |||
} | |||
@@ -58,8 +58,9 @@ | |||
--color-secondary-alpha-70: #525767b3; | |||
--color-secondary-alpha-80: #525767cc; | |||
--color-secondary-alpha-90: #525767e1; | |||
--color-secondary-hover: var(--color-secondary-light-1); | |||
--color-secondary-active: var(--color-secondary-light-2); | |||
--color-secondary-button: var(--color-secondary-dark-4); | |||
--color-secondary-hover: var(--color-secondary-dark-3); | |||
--color-secondary-active: var(--color-secondary-dark-2); | |||
/* console colors - used for actions console and console files */ | |||
--color-console-fg: #eeeff2; | |||
--color-console-fg-subtle: #959cab; | |||
@@ -163,37 +164,37 @@ | |||
--color-orange-badge-hover-bg: #f2711c4d; | |||
--color-git: #f05133; | |||
/* target-based colors */ | |||
--color-body: #373b47; | |||
--color-box-header: #404652; | |||
--color-box-body: #2a2e3a; | |||
--color-box-body-highlight: #353945; | |||
--color-body: #2e323e; | |||
--color-box-header: #333743; | |||
--color-box-body: #252a36; | |||
--color-box-body-highlight: #303440; | |||
--color-text-dark: #dbe0ea; | |||
--color-text: #cbd0da; | |||
--color-text-light: #bbbfca; | |||
--color-text-light-1: #aaafb9; | |||
--color-text-light-2: #9a9ea9; | |||
--color-text-light-3: #8a8e99; | |||
--color-footer: #2e323e; | |||
--color-footer: #262b36; | |||
--color-timeline: #4c525e; | |||
--color-input-text: #dfe3ec; | |||
--color-input-background: #232933; | |||
--color-input-background: #262b36; | |||
--color-input-toggle-background: #454a57; | |||
--color-input-border: #454a57; | |||
--color-input-border-hover: #505667; | |||
--color-header-wrapper: #2a2e3a; | |||
--color-header-wrapper-transparent: #2a2e3a00; | |||
--color-input-border: var(--color-secondary); | |||
--color-input-border-hover: var(--color-secondary-dark-1); | |||
--color-header-wrapper: #212531; | |||
--color-header-wrapper-transparent: #21253100; | |||
--color-light: #00000028; | |||
--color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled))); | |||
--color-light-border: #ffffff28; | |||
--color-hover: #ffffff19; | |||
--color-active: #ffffff24; | |||
--color-menu: #2e323e; | |||
--color-card: #2e323e; | |||
--color-menu: #262b36; | |||
--color-card: #262b36; | |||
--color-markup-table-row: #ffffff06; | |||
--color-markup-code-block: #ffffff16; | |||
--color-button: #353846; | |||
--color-code-bg: #2a2e3a; | |||
--color-code-sidebar-bg: #2e323e; | |||
--color-button: #262b36; | |||
--color-code-bg: #222733; | |||
--color-code-sidebar-bg: #252a36; | |||
--color-shadow: #00000060; | |||
--color-secondary-bg: #2a2e3a; | |||
--color-text-focus: #fff; |
@@ -14,7 +14,7 @@ | |||
<button class="ui basic small compact button red" @click="cancelRun()" v-else-if="run.canCancel"> | |||
{{ locale.cancel }} | |||
</button> | |||
<button class="ui basic small compact button secondary gt-mr-0" @click="rerun()" v-else-if="run.canRerun"> | |||
<button class="ui basic small compact button gt-mr-0" @click="rerun()" v-else-if="run.canRerun"> | |||
{{ locale.rerun_all }} | |||
</button> | |||
</div> | |||
@@ -70,7 +70,7 @@ | |||
</div> | |||
<div class="job-info-header-right"> | |||
<div class="ui top right pointing dropdown custom jump item" @click.stop="menuVisible = !menuVisible" @keyup.enter="menuVisible = !menuVisible"> | |||
<button class="ui button button-ghost gt-p-3"> | |||
<button class="btn gt-interact-bg gt-p-3"> | |||
<SvgIcon name="octicon-gear" :size="18"/> | |||
</button> | |||
<div class="menu transition action-job-menu" :class="{visible: menuVisible}" v-if="menuVisible" v-cloak> |