diff --git a/templates/explore/code.tmpl b/templates/explore/code.tmpl index 9c880e59f..049564557 100644 --- a/templates/explore/code.tmpl +++ b/templates/explore/code.tmpl @@ -49,15 +49,7 @@ </table> </div> </div> - <div class="ui bottom attached table segment"> - {{if $result.Language}} - <i class="color-icon" style="background-color: {{$result.Color}}"></i>{{$result.Language}} - {{end}} - - {{if not $result.UpdatedUnix.IsZero}} - <span class="ui small grey text pull right">{{$.i18n.Tr "explore.code_last_indexed_at" (TimeSinceUnix $result.UpdatedUnix $.i18n.Lang) | Safe}} </span> - {{end}} - </div> + {{template "shared/searchbottom" dict "root" $ "result" .}} </div> {{end}} </div> diff --git a/templates/repo/issue/new_form.tmpl b/templates/repo/issue/new_form.tmpl index aa142e3de..efebc3bf3 100644 --- a/templates/repo/issue/new_form.tmpl +++ b/templates/repo/issue/new_form.tmpl @@ -13,7 +13,7 @@ </a> <div class="ui segment content"> <div class="field"> - <input name="title" id="issue_title" placeholder="{{.i18n.Tr "repo.milestones.title"}}" value="{{if .TitleQuery}}{{.TitleQuery}}{{else if .IssueTemplateTitle}}{{.IssueTemplateTitle}}{{else}}{{.title}}{{end}}" tabindex="3" autofocus required maxlength="255"> + <input name="title" id="issue_title" placeholder="{{.i18n.Tr "repo.milestones.title"}}" value="{{if .TitleQuery}}{{.TitleQuery}}{{else if .IssueTemplateTitle}}{{.IssueTemplateTitle}}{{else}}{{.title}}{{end}}" tabindex="3" autofocus required maxlength="255" autocomplete="off"> {{if .PageIsComparePull}} <div class="title_wip_desc" data-wip-prefixes="{{Json .PullRequestWorkInProgressPrefixes}}">{{.i18n.Tr "repo.pulls.title_wip_desc" (index .PullRequestWorkInProgressPrefixes 0| Escape) | Safe}}</div> {{end}} diff --git a/templates/repo/issue/view_content/add_reaction.tmpl b/templates/repo/issue/view_content/add_reaction.tmpl index 6d694219c..95778cc5b 100644 --- a/templates/repo/issue/view_content/add_reaction.tmpl +++ b/templates/repo/issue/view_content/add_reaction.tmpl @@ -1,5 +1,5 @@ {{if .ctx.IsSigned}} -<div class="item action ui pointing top right select-reaction dropdown" data-action-url="{{ .ActionURL }}"> +<div class="item action ui pointing select-reaction dropdown" data-action-url="{{ .ActionURL }}"> <a class="add-reaction"> {{svg "octicon-smiley"}} </a> diff --git a/templates/repo/issue/view_content/context_menu.tmpl b/templates/repo/issue/view_content/context_menu.tmpl index 7d5cae5bf..744821cb3 100644 --- a/templates/repo/issue/view_content/context_menu.tmpl +++ b/templates/repo/issue/view_content/context_menu.tmpl @@ -1,5 +1,5 @@ {{if .ctx.IsSigned}} -<div class="item action ui pointing top right custom dropdown context-dropdown"> +<div class="item action ui pointing custom dropdown context-dropdown"> <a class="context-menu"> {{svg "octicon-kebab-horizontal"}} </a> diff --git a/templates/repo/issue/view_title.tmpl b/templates/repo/issue/view_title.tmpl index 0d594b3a5..8956bf5e6 100644 --- a/templates/repo/issue/view_title.tmpl +++ b/templates/repo/issue/view_title.tmpl @@ -9,7 +9,7 @@ <span id="issue-title">{{RenderIssueTitle .Issue.Title $.RepoLink $.Repository.ComposeMetas}}</span> <span class="index">#{{.Issue.Index}}</span> <div id="edit-title-input" class="ui input" style="display: none"> - <input value="{{.Issue.Title}}" maxlength="255"> + <input value="{{.Issue.Title}}" maxlength="255" autocomplete="off"> </div> </h1> {{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .Repository.IsArchived)}} diff --git a/templates/repo/search.tmpl b/templates/repo/search.tmpl index ca39c9a2f..c2172ec78 100644 --- a/templates/repo/search.tmpl +++ b/templates/repo/search.tmpl @@ -48,15 +48,7 @@ </table> </div> </div> - <div class="ui bottom attached table segment"> - {{if $result.Language}} - <i class="color-icon" style="background-color: {{$result.Color}}"></i>{{$result.Language}} - {{end}} - - {{if not $result.UpdatedUnix.IsZero}} - <span class="ui small grey text pull right">{{$.i18n.Tr "explore.code_last_indexed_at" (TimeSinceUnix $result.UpdatedUnix $.i18n.Lang) | Safe}} </span> - {{end}} - </div> + {{template "shared/searchbottom" dict "root" $ "result" .}} </div> {{end}} </div> diff --git a/templates/repo/settings/lfs.tmpl b/templates/repo/settings/lfs.tmpl index b6a058158..79477051b 100644 --- a/templates/repo/settings/lfs.tmpl +++ b/templates/repo/settings/lfs.tmpl @@ -7,8 +7,8 @@ <h4 class="ui top attached header"> {{.i18n.Tr "repo.settings.lfs_filelist"}} ({{.i18n.Tr "admin.total" .Total}}) <div class="ui right"> - <a class="ui black tiny show-panel button" href="{{.Link}}/locks"><span class="octicon-tiny">{{svg "octicon-lock"}}</span>{{.i18n.Tr "repo.settings.lfs_locks"}}</a> - <a class="ui blue tiny show-panel button" href="{{.Link}}/pointers"><span class="octicon-tiny">{{svg "octicon-search"}}</span> {{.i18n.Tr "repo.settings.lfs_findpointerfiles"}}</a> + <a class="ui tiny show-panel button" href="{{.Link}}/locks"><span class="octicon-tiny">{{svg "octicon-lock"}}</span>{{.i18n.Tr "repo.settings.lfs_locks"}}</a> + <a class="ui primary tiny show-panel button" href="{{.Link}}/pointers"><span class="octicon-tiny">{{svg "octicon-search"}}</span> {{.i18n.Tr "repo.settings.lfs_findpointerfiles"}}</a> </div> </h4> <table id="lfs-files-table" class="ui attached segment single line table"> @@ -25,7 +25,7 @@ <td>{{FileSize .Size}}</td> <td>{{TimeSince .CreatedUnix.AsTime $.Lang}}</td> <td class="right aligned"> - <a class="ui blue show-panel button" href="{{$.Link}}/find?oid={{.Oid}}&size={{.Size}}">{{$.i18n.Tr "repo.settings.lfs_findcommits"}}</a> + <a class="ui primary show-panel button" href="{{$.Link}}/find?oid={{.Oid}}&size={{.Size}}">{{$.i18n.Tr "repo.settings.lfs_findcommits"}}</a> <button class="ui basic show-modal icon button" data-modal="#delete-{{.Oid}}"> <span class="btn-octicon btn-octicon-danger poping up" data-content="{{$.i18n.Tr "repo.editor.delete_this_file"}}" data-position="bottom center" data-variation="tiny inverted">{{svg "octicon-trashcan"}}</span> </button> diff --git a/templates/shared/searchbottom.tmpl b/templates/shared/searchbottom.tmpl new file mode 100644 index 000000000..5680c8d2a --- /dev/null +++ b/templates/shared/searchbottom.tmpl @@ -0,0 +1,12 @@ +<div class="ui bottom attached table segment df ac sb"> + <div class="ml-3"> + {{if .result.Language}} + <i class="color-icon" style="background-color: {{.result.Color}}"></i>{{.result.Language}} + {{end}} + </div> + <div class="mr-3"> + {{if not .result.UpdatedUnix.IsZero}} + <span class="ui grey text">{{.root.i18n.Tr "explore.code_last_indexed_at" (TimeSinceUnix .result.UpdatedUnix .root.i18n.Lang) | Safe}}</span> + {{end}} + </div> +</div> diff --git a/templates/status/404.tmpl b/templates/status/404.tmpl index c5f549bf5..6f572b43b 100644 --- a/templates/status/404.tmpl +++ b/templates/status/404.tmpl @@ -1,5 +1,5 @@ {{template "base/head" .}} -<div class="page-content ui container center {{if .IsRepo}}repository{{end}}"> +<div class="page-content ui container center full-screen-width {{if .IsRepo}}repository{{end}}"> {{if .IsRepo}}{{template "repo/header" .}}{{end}} <div class="ui container center"> <p style="margin-top: 100px"><img class="ui centered image" src="{{StaticUrlPrefix}}/img/404.png" alt="404"/></p> diff --git a/templates/status/500.tmpl b/templates/status/500.tmpl index d20b06b10..3f1b205d3 100644 --- a/templates/status/500.tmpl +++ b/templates/status/500.tmpl @@ -1,5 +1,5 @@ {{template "base/head" .}} -<div class="page-content ui container center"> +<div class="page-content ui container full-screen-width center"> <p style="margin-top: 100px"><img class="ui centered image" src="{{StaticUrlPrefix}}/img/500.png" alt="500"/></p> <div class="ui divider"></div> <br> diff --git a/templates/user/dashboard/issues.tmpl b/templates/user/dashboard/issues.tmpl index d4e7cb38b..b8625ec2c 100644 --- a/templates/user/dashboard/issues.tmpl +++ b/templates/user/dashboard/issues.tmpl @@ -77,7 +77,7 @@ </div> </form> </div> - <div class="column right aligned"> + <div class="column right aligned df ac je"> <!-- Sort --> <div class="ui dropdown type jump item"> <span class="text"> diff --git a/templates/user/dashboard/repolist.tmpl b/templates/user/dashboard/repolist.tmpl index 319bb3c6e..46c735071 100644 --- a/templates/user/dashboard/repolist.tmpl +++ b/templates/user/dashboard/repolist.tmpl @@ -23,8 +23,15 @@ <a :class="{item: true, active: tab === 'organizations'}" @click="changeTab('organizations')">{{.i18n.Tr "organization"}}</a> </div> <div v-show="tab === 'repos'" class="ui tab active list dashboard-repos"> - <h4 class="ui top attached header"> - {{.i18n.Tr "home.my_repos"}} <span class="ui grey label">${reposTotalCount}</span> + <h4 class="ui top attached header df ac"> + <div class="f1 df ac"> + {{.i18n.Tr "home.my_repos"}} + <span class="ui grey label ml-3">${reposTotalCount}</span> + </div> + <a class="poping up" :href="suburl + '/repo/create'" data-content="{{.i18n.Tr "new_repo"}}" data-variation="tiny inverted" data-position="left center"> + {{svg "octicon-plus"}} + <span class="sr-only">{{.i18n.Tr "new_repo"}}</span> + </a> </h4> <div class="ui attached secondary segment repos-search"> <div class="ui fluid right action left icon input" :class="{loading: isLoading}"> @@ -94,13 +101,16 @@ <div v-if="repos.length" class="ui attached table segment rounded-bottom"> <ul class="repo-owner-name-list"> <li v-for="repo in repos" :class="{'private': repo.private || repo.internal}"> - <a :href="suburl + '/' + repo.full_name"> - <component v-bind:is="repoIcon(repo)" size="16"></component> - <strong class="text truncate item-name">${repo.full_name}</strong> - <i v-if="repo.archived" class="archive icon archived-icon"></i> - <span class="ui right text light grey"> - ${repo.stars_count} <span class="rear">{{svg "octicon-star"}}</span> - </span> + <a class="df ac sb" :href="suburl + '/' + repo.full_name"> + <div class="f1 df ac"> + <component v-bind:is="repoIcon(repo)" size="16"></component> + <strong class="text truncate item-name">${repo.full_name}</strong> + <i v-if="repo.archived" class="archive icon archived-icon"></i> + </div> + <div class="text light grey df ac"> + ${repo.stars_count} + {{svg "octicon-star" 16 "rear ml-2"}} + </div> </a> </li> <li v-if="showMoreReposLink"> @@ -129,25 +139,29 @@ </ul> </div> </div> - <div v-if="!isOrganization" v-show="tab === 'organizations'" class="ui tab active list"> - <h4 class="ui top attached header"> - {{.i18n.Tr "home.my_orgs"}} <span class="ui grey label">${organizationsTotalCount}</span> - <div v-if="canCreateOrganization" class="ui right"> - <a class="poping up" :href="suburl + '/org/create'" data-content="{{.i18n.Tr "new_org"}}" data-variation="tiny inverted" data-position="left center"> - <i class="plus icon"></i> - <span class="sr-only">{{.i18n.Tr "new_org"}}</span> - </a> + <div v-if="!isOrganization" v-show="tab === 'organizations'" class="ui tab active list dashboard-orgs"> + <h4 class="ui top attached header df ac"> + <div class="f1 df ac"> + {{.i18n.Tr "home.my_orgs"}} + <span class="ui grey label ml-3">${organizationsTotalCount}</span> </div> + <a v-if="canCreateOrganization" class="poping up" :href="suburl + '/org/create'" data-content="{{.i18n.Tr "new_org"}}" data-variation="tiny inverted" data-position="left center"> + {{svg "octicon-plus"}} + <span class="sr-only">{{.i18n.Tr "new_org"}}</span> + </a> </h4> <div v-if="organizations.length" class="ui attached table segment rounded-bottom"> <ul class="repo-owner-name-list"> <li v-for="org in organizations"> - <a :href="suburl + '/' + org.name"> - {{svg "octicon-organization"}} - <strong class="text truncate item-name">${org.name}</strong> - <span class="ui right text light grey"> - ${org.num_repos} <span class="rear">{{svg "octicon-repo"}}</span> - </span> + <a class="df ac sb" :href="suburl + '/' + org.name"> + <div class="f1"> + {{svg "octicon-organization" 16 "mr-2"}} + <strong class="text truncate item-name">${org.name}</strong> + </div> + <div class="text light grey df ac"> + ${org.num_repos} + {{svg "octicon-repo" 16 "rear ml-2 mt-1"}} + </div> </a> </li> </ul> diff --git a/web_src/less/_base.less b/web_src/less/_base.less index 36421ca73..a1df19ef6 100644 --- a/web_src/less/_base.less +++ b/web_src/less/_base.less @@ -69,7 +69,7 @@ --color-purple: #a333c8; --color-pink: #e03997; --color-brown: #a5673f; - --color-grey: #767676; + --color-grey: #888888; --color-black: #1b1c1d; --color-gold: #a1882b; --color-white: #ffffff; @@ -97,6 +97,7 @@ --color-markdown-table-row: #00000008; --color-markdown-code-block: #00000010; --color-button: #ffffff; + --color-code-bg: #ffffff; } :root:lang(ja) { @@ -253,6 +254,10 @@ a.muted:hover, border-color: var(--color-primary); } +.CodeMirror-focused { + border-color: var(--color-primary) !important; +} + .ui.action.input:not([class*="left action"]) > input:focus { border-right-color: var(--color-primary); } @@ -288,6 +293,10 @@ a.muted:hover, background: none; } +.ui.ui.menu .item.disabled { + color: var(--color-text-light-2); +} + .ui.dropdown .menu { background: var(--color-menu); border-color: var(--color-secondary); @@ -307,6 +316,8 @@ a.muted:hover, } .ui.dropdown .menu .active.item { + color: var(--color-text); + background: var(--color-active); font-weight: normal; } @@ -523,17 +534,15 @@ a.muted:hover, flex-direction: inherit; } -.ui.dropdown:not(.labeled) > .dropdown.icon { - height: 14px; - vertical-align: bottom; - margin-bottom: -2px; - margin-left: .5rem; -} - .ui.dropdown .menu { border-color: var(--color-secondary); } +.ui.pagination.menu .active.item { + color: var(--color-text); + background: var(--color-active); +} + .ui.form .field > .selection.dropdown > .dropdown.icon { height: auto; } @@ -1266,6 +1275,11 @@ a.ui.label:hover { color: var(--color-text); } +.ui.basic.labels a.label:hover, +a.ui.basic.label:hover { + background: var(--color-label-hover); +} + .ui.label > .detail .icons { margin-right: .25em; } @@ -1597,6 +1611,7 @@ a.ui.label:hover { } .ui.attached.header { + position: relative; background: var(--color-box-header); border-color: var(--color-secondary); @@ -1606,6 +1621,14 @@ a.ui.label:hover { } } +/* fix misaligned right buttons on box headers */ +.ui.attached.header .right { + position: absolute; + right: .78571429rem; + top: 50%; + transform: translateY(-50%); +} + /* https://github.com/go-gitea/gitea/issues/10210 */ .ui.attached.segment ~ .ui.top.attached.header { margin-top: 1rem; diff --git a/web_src/less/_chroma.less b/web_src/less/_chroma.less index 28a795784..699f69d81 100644 --- a/web_src/less/_chroma.less +++ b/web_src/less/_chroma.less @@ -1,7 +1,6 @@ -/* Background */ - -.chroma { - background-color: #ffffff; +.chroma, +.lines-code { + background-color: var(--color-code-bg); } /* LineTableTD */ diff --git a/web_src/less/_dashboard.less b/web_src/less/_dashboard.less index 771c7e088..c925512f2 100644 --- a/web_src/less/_dashboard.less +++ b/web_src/less/_dashboard.less @@ -63,7 +63,8 @@ } } - .dashboard-repos { + .dashboard-repos, + .dashboard-orgs { margin: 0 1px; /* Accomodate for Semantic's 1px hacks on .attached elements */ } diff --git a/web_src/less/_editor.less b/web_src/less/_editor.less index 82a7153c7..c23de4f2e 100644 --- a/web_src/less/_editor.less +++ b/web_src/less/_editor.less @@ -37,12 +37,26 @@ border-color: var(--color-secondary); } +.editor-toolbar button { + border: none !important; + color: var(--color-text-light); +} + .editor-toolbar button:not(:hover) { background-color: transparent !important; } .editor-toolbar i.separator { border-left: none; + border-right-color: var(--color-secondary); +} + +.editor-toolbar button:hover { + background: var(--color-hover); +} + +.editor-toolbar button.active { + background: var(--color-active); } .editor-loading { diff --git a/web_src/less/helpers.less b/web_src/less/helpers.less index 3cf516165..77c81a62e 100644 --- a/web_src/less/helpers.less +++ b/web_src/less/helpers.less @@ -20,6 +20,9 @@ word-break: break-all !important; } +.full-screen-width { width: 100vw !important; } +.full-screen-height { height: 100vw !important; } + .rounded { border-radius: var(--border-radius) !important; } .rounded-top { border-radius: var(--border-radius) var(--border-radius) 0 0 !important; } .rounded-bottom { border-radius: 0 0 var(--border-radius) var(--border-radius) !important; } diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less index 2d097a655..884548acc 100644 --- a/web_src/less/themes/theme-arc-green.less +++ b/web_src/less/themes/theme-arc-green.less @@ -64,8 +64,8 @@ --color-purple: #a333c8; --color-pink: #e03997; --color-brown: #a5673f; - --color-grey: #767676; - --color-black: #1b1c1d; + --color-grey: #767a85; + --color-black: #1e222e; --color-gold: #a1882b; --color-white: #ffffff; /* target-based colors */ @@ -73,8 +73,8 @@ --color-box-header: #454a57; --color-box-body: #353945; --color-text: #bbc0ca; - --color-text-light: #969aa5; - --color-text-light-2: #767a85; + --color-text-light: #a6aab5; + --color-text-light-2: #868a95; --color-footer: #2e323e; --color-timeline: #4a505c; --color-input-text: #d5dbe6; @@ -92,13 +92,9 @@ --color-markdown-table-row: #ffffff06; --color-markdown-code-block: #2a2e3a; --color-button: #353846; + --color-code-bg: #2a2e3a; } -/* Background */ - -.chroma { - background-color: #2a2e3a; -} /* LineTableTD */ .chroma .lntd { @@ -563,12 +559,6 @@ a.ui.basic.green.label:hover { color: #fff !important; } -.ui.basic.red.active.button, -.ui.basic.red.buttons .active.button { - box-shadow: 0 0 0 1px #b75252 inset !important; - color: #b75252 !important; -} - .ui.divider:not(.vertical):not(.horizontal) { border-bottom-color: var(--color-secondary); border-top-color: transparent; @@ -771,19 +761,6 @@ a.ui.basic.green.label:hover { border-color: transparent !important; } -.ui.basic.green.active.button, -.ui.basic.green.buttons .active.button { - color: #87ab63 !important; - box-shadow: 0 0 0 1px #87ab63 inset !important; -} - -.ui.green.buttons .active.button, -.ui.green.buttons .active.button:active, -.ui.green.active.button, -.ui.green.button .active.button:active { - background: #87ab63; -} - .ui .info.segment.top { background-color: var(--color-secondary) !important; } @@ -840,23 +817,6 @@ td.blob-hunk { background: #353945; } -.ui.vertical.menu .active.item { - background: #4b5162; -} - -.ui.vertical.menu .item { - background: #353945; -} - -.ui.vertical.menu .header.item { - background: var(--color-secondary); -} - -.ui.vertical.menu { - background: #353945; - border: 1px solid #333640; -} - .ui.card, .ui.cards > .card { background: #353945; @@ -966,12 +926,6 @@ td.blob-hunk { color: rgba(158, 158, 158, 1); } -.ui.basic.red.button, -.ui.basic.red.buttons .button { - box-shadow: 0 0 0 1px #a04141 inset !important; - color: #a04141 !important; -} - .ui.list .list > .item .header, .ui.list > .item .header { color: #dedede; @@ -1183,30 +1137,11 @@ a.blob-excerpt:hover { filter: invert(100%); } -.editor-toolbar { - background-color: var(--color-secondary); - border-color: var(--color-secondary); -} - .edit-diff > div > .ui.table { border-left-color: var(--color-secondary) !important; border-right-color: var(--color-secondary) !important; } -.editor-toolbar button { - color: #87ab63 !important; -} - -.editor-toolbar button.active, -.editor-toolbar button:hover { - background: #2a2e3a; - border-color: transparent; -} - -.editor-toolbar i.separator { - border-right-color: #87ab63; -} - .repository .diff-detail-box { background-color: #383c4a; @@ -1232,11 +1167,6 @@ a.blob-excerpt:hover { } } -.add-comment-left.add-comment-right .ui.attached.header { - border-color: var(--color-secondary); - border-right: none; -} - .file-comment { color: var(--color-secondary-dark-6); }