CSS navbar and color tweaks (#13609)

* CSS and color tweaks

- Unify navbar-style menus
- Fix admin bar overlapping menu bar
- Fixes file edit comment box
- Fix double border on review box
- Fix review timeline icons

* Many fixes to new-menu and navbar layout enhancements

* misc settings fixes

* navbar tweak

* fix pr tabs

* branch tag and arc color tweaks
This commit is contained in:
silverwind 2020-11-26 20:33:28 +01:00 committed by GitHub
parent 03fa2eccbc
commit b2de034278
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 267 additions and 291 deletions

View file

@ -1,4 +1,5 @@
<div class="ui secondary pointing tabular top attached borderless menu stackable new-menu navbar">
<div class="new-menu-inner">
<a class="{{if .PageIsAdminDashboard}}active{{end}} item" href="{{AppSubUrl}}/admin">
{{.i18n.Tr "admin.dashboard"}}
</a>
@ -32,4 +33,5 @@
<a class="{{if .PageIsAdminMonitor}}active{{end}} item" href="{{AppSubUrl}}/admin/monitor">
{{.i18n.Tr "admin.monitor"}}
</a>
</div>
</div>

View file

@ -2,9 +2,11 @@
<img width="48" height="48" class="ui image commit-avatar" src="{{.SignedUser.RelAvatarLink}}">
<div class="commit-form">
<h3>{{- if .CanCommitToBranch.WillSign}}
<i title="{{.i18n.Tr "repo.signing.will_sign" .CanCommitToBranch.SigningKey}}" class="lock green icon"></i>{{.i18n.Tr "repo.editor.commit_signed_changes"}}
<span title="{{.i18n.Tr "repo.signing.will_sign" .CanCommitToBranch.SigningKey}}">{{svg "octicon-lock" 24}}</span>
{{.i18n.Tr "repo.editor.commit_signed_changes"}}
{{- else}}
<i title="{{.i18n.Tr (printf "repo.signing.wont_sign.%s" .CanCommitToBranch.WontSignReason)}}" class="unlock grey icon"></i>{{.i18n.Tr "repo.editor.commit_changes"}}
<span title="{{.i18n.Tr (printf "repo.signing.wont_sign.%s" .CanCommitToBranch.WontSignReason)}}">{{svg "octicon-unlock" 24}}</span>
{{.i18n.Tr "repo.editor.commit_changes"}}
{{- end}}</h3>
<div class="field">
<input name="commit_summary" placeholder="{{if .PageIsDelete}}{{.i18n.Tr "repo.editor.delete" .TreePath}}{{else if .PageIsUpload}}{{.i18n.Tr "repo.editor.upload_files_to_dir" .TreePath}}{{else if .IsNewFile}}{{.i18n.Tr "repo.editor.add_tmpl"}}{{else}}{{.i18n.Tr "repo.editor.update" .TreePath}}{{end}}" value="{{.commit_summary}}" autofocus>

View file

@ -403,10 +403,10 @@
<img src="{{.Poster.RelAvatarLink}}">
</a>
{{end}}
<span class="badge {{if eq .Review.Type 1}}green
{{- else if eq .Review.Type 2}}grey
{{- else if eq .Review.Type 3}}red
{{- else}}grey{{end}}">{{svg (printf "octicon-%s" .Review.Type.Icon)}}</span>
<span class="badge {{if eq .Review.Type 1}}bg-green
{{- else if eq .Review.Type 2}}bg-grey
{{- else if eq .Review.Type 3}}bg-red
{{- else}}bg-grey{{end}} text-white">{{svg (printf "octicon-%s" .Review.Type.Icon)}}</span>
<span class="text grey">
{{if .OriginalAuthor }}
<span class="text black"><i class="fa {{MigrationIcon $.Repository.GetOriginalURLHostname}}" aria-hidden="true"></i> {{ .OriginalAuthor }}</span><span class="text grey"> {{if $.Repository.OriginalURL}}</span><span class="text migrate">({{$.i18n.Tr "repo.migrated_from" $.Repository.OriginalURL $.Repository.GetOriginalURLHostname | Safe }}){{end}}</span>

View file

@ -1,4 +1,5 @@
<div class="ui secondary pointing tabular top attached borderless menu stackable new-menu navbar">
<div class="new-menu-inner">
<a class="{{if .PageIsSettingsOptions}}active{{end}} item" href="{{.RepoLink}}/settings">
{{.i18n.Tr "repo.settings.options"}}
</a>
@ -26,4 +27,5 @@
{{.i18n.Tr "repo.settings.lfs"}}
</a>
{{end}}
</div>
</div>

View file

@ -2,6 +2,7 @@
<div class="user link-account">
<div class="ui secondary pointing tabular top attached borderless menu new-menu navbar">
<div class="new-menu-inner">
<!-- TODO handle .ShowRegistrationButton once other login bugs are fixed -->
<a class="item {{if not .user_exists}}active{{end}}"
data-tab="auth-link-signup-tab">
@ -27,6 +28,7 @@
</div>
</div>
</div>
</div>
</div>
{{template "base/footer" .}}

View file

@ -1,5 +1,6 @@
{{if or .EnableOpenIDSignIn .EnableSSPI}}
<div class="ui secondary pointing tabular top attached borderless menu new-menu navbar">
<div class="new-menu-inner">
<a class="{{if .PageIsLogin}}active{{end}} item" rel="nofollow" href="{{AppSubUrl}}/user/login">
{{.i18n.Tr "auth.login_userpass"}}
</a>
@ -15,5 +16,6 @@
&nbsp;SSPI
</a>
{{end}}
</div>
</div>
{{end}}

View file

@ -1,4 +1,5 @@
<div class="ui secondary pointing tabular top attached borderless menu stackable new-menu navbar">
<div class="new-menu-inner">
<a class="{{if .PageIsOpenIDConnect}}active{{end}} item" href="{{AppSubUrl}}/user/openid/connect">
{{.i18n.Tr "auth.openid_connect_title"}}
</a>
@ -7,5 +8,6 @@
{{.i18n.Tr "auth.openid_register_title"}}
</a>
{{end}}
</div>
</div>

View file

@ -1,5 +1,5 @@
{{template "base/head" .}}
<div class="user profile">
<div class="user profile mt-5">
<div class="ui container">
<div class="ui stackable grid">
<div class="ui five wide column">

View file

@ -1,4 +1,5 @@
<div class="ui secondary pointing tabular top attached borderless menu stackable new-menu navbar">
<div class="new-menu-inner">
<a class="{{if .PageIsSettingsProfile}}active{{end}} item" href="{{AppSubUrl}}/user/settings">
{{.i18n.Tr "settings.profile"}}
</a>
@ -20,4 +21,5 @@
<a class="{{if .PageIsSettingsRepos}}active{{end}} item" href="{{AppSubUrl}}/user/settings/repos">
{{.i18n.Tr "settings.repos"}}
</a>
</div>
</div>

View file

@ -44,11 +44,6 @@
}
}
.ui.header,
.ui.segment {
box-shadow: 0 1px 2px 0 var(--color-secondary);
}
&.user {
.email {
max-width: 200px;

View file

@ -84,6 +84,7 @@
--color-input-background: #ffffff;
--color-input-border: #dedede;
--color-input-border-hover: #cecece;
--color-navbar: #f8f8f8;
}
:root:lang(ja) {
@ -189,6 +190,9 @@ table {
::-webkit-scrollbar-thumb:hover {
box-shadow: inset 0 0 0 6px var(--color-primary-dark-2);
}
::-webkit-scrollbar-corner {
background: transparent;
}
::selection,
.CodeMirror-selected {
@ -233,6 +237,15 @@ a:hover,
margin: 0 -1.25px;
}
.ui.pointing.dropdown > .menu:not(.hidden)::after {
background: var(--color-box-body);
box-shadow: -1px -1px 0 0 var(--color-secondary);
}
.ui.progress[data-percent="0"] .bar .progress {
color: var(--color-text);
}
.ui.attached.table {
border-color: var(--color-secondary);
}
@ -286,9 +299,8 @@ a:hover,
margin: 0 !important;
&.light {
background-color: white;
border-bottom: 1px solid #dddddd;
box-shadow: 0 2px 3px rgba(0, 0, 0, .04);
background: var(--color-body);
border-bottom: 1px solid var(--color-secondary);
}
.column .menu {
@ -376,6 +388,10 @@ a:hover,
margin-left: .5rem;
}
.ui.dropdown .menu {
border-color: var(--color-secondary);
}
.ui.form .field > .selection.dropdown > .dropdown.icon {
height: auto;
}
@ -966,57 +982,77 @@ footer {
}
.ui.menu.new-menu {
justify-content: center !important;
padding-top: 15px !important;
margin-top: -15px !important;
margin-bottom: 15px !important;
background: #fafafa;
border-width: 1px !important;
padding-top: 15px;
margin-bottom: 15px;
background: var(--color-navbar);
border-bottom: 1px solid var(--color-secondary) !important;
overflow: auto;
}
@media @mediaLgAndDown {
@media @mediaSm {
.ui.menu.new-menu {
overflow-x: auto !important;
justify-content: left !important;
padding-bottom: 2px;
overflow: visible !important;
}
}
.ui.menu.new-menu::-webkit-scrollbar {
height: 8px;
display: none;
.ui.menu.new-menu .new-menu-inner {
display: flex;
margin-left: auto;
margin-right: auto;
}
@media @mediaSm {
.ui.menu.new-menu .new-menu-inner {
flex-wrap: wrap;
margin-left: 0;
margin-right: 0;
}
}
.ui.menu.new-menu:hover::-webkit-scrollbar {
display: block;
}
.ui.menu.new-menu::-webkit-scrollbar-track {
background: rgba(0, 0, 0, .01);
}
.ui.menu.new-menu::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, .2);
}
.ui.menu.new-menu::after {
.ui.menu.new-menu::after {
position: absolute;
margin-top: -15px;
display: block;
background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 100%);
background-image: linear-gradient(to right, transparent, var(--color-navbar) 100%);
content: ' ';
right: 0;
height: 53px;
height: 39px;
z-index: 1000;
width: 60px;
clear: none;
visibility: visible;
}
pointer-events: none;
}
.ui.menu.new-menu a.item:last-child {
padding-right: 30px !important;
.ui.menu.new-menu .item {
margin: 0 !important;
}
@media @mediaSm {
.ui.menu.new-menu .item {
width: auto !important;
}
}
.ui.menu.new-menu .item:last-child {
padding-right: 30px !important;
}
.ui.menu.new-menu::-webkit-scrollbar {
height: 6px;
display: none;
}
.ui.menu.new-menu::-webkit-scrollbar-track {
background: none !important;
}
.ui.menu.new-menu::-webkit-scrollbar-thumb {
box-shadow: none !important;
}
.ui.menu.new-menu:hover::-webkit-scrollbar {
display: block;
}
[v-cloak] {
display: none !important;
}
@ -1473,23 +1509,40 @@ table th[data-sortt-desc] {
}
.ui.tabular.menu {
.item {
border-color: var(--color-secondary);
}
.ui.tabular.menu .item {
padding: 11px 12px;
color: rgba(0, 0, 0, .5);
}
color: var(--color-secondary-dark-6);
}
.item:hover {
color: rgba(0, 0, 0, .8);
}
.ui.tabular.menu .item:hover {
color: var(--color-text);
}
.item.active {
color: rgba(0, 0, 0, .9);
.ui.tabular.menu .active.item,
.ui.tabular.menu .active.item:hover {
background: var(--color-body);
border-color: var(--color-secondary);
color: var(--color-text);
margin-top: 1px; /* offset fomantic's margin-bottom: -1px */
}
}
.ui.secondary.pointing.menu {
border-color: var(--color-secondary);
}
.ui.secondary.pointing.menu .item {
padding: 12px;
color: var(--color-secondary-dark-6);
}
.ui.secondary.pointing.menu .active.item,
.ui.secondary.pointing.menu .active.item:hover,
.ui.secondary.pointing.menu .dropdown.item:hover,
.ui.secondary.pointing.menu .link.item:hover,
.ui.secondary.pointing.menu a.item:hover {
color: var(--color-text);
}
.ui.header .ui.label {

View file

@ -1,6 +1,4 @@
.dashboard {
padding-top: 15px;
&.feeds,
&.issues {
.context.user.menu {
@ -71,7 +69,9 @@
.dashboard-navbar {
width: 100vw;
padding: 0 .5rem;
padding-left: .5rem;
padding-right: .5rem;
padding-top: 15px;
.org-visibility .label {
margin-left: 5px;
}

View file

@ -1,12 +1,9 @@
.explore {
padding-top: 15px;
.navbar {
justify-content: center;
padding-top: 15px !important;
margin-top: -15px !important;
margin-bottom: 15px !important;
background-color: #fafafa !important;
background-color: var(--color-navbar) !important;
border-width: 1px !important;
.svg {

View file

@ -1,6 +1,4 @@
.organization {
padding-top: 15px;
.head {
.ui.header {
.text {

View file

@ -1,6 +1,4 @@
.repository {
padding-top: 15px;
.repo-header {
.ui.compact.menu {
margin-left: 1rem;
@ -144,8 +142,7 @@
}
.header-wrapper {
background-color: #fafafa;
margin-top: -15px;
background-color: var(--color-navbar);
padding-top: 15px;
.ui.tabs.divider {
@ -519,21 +516,23 @@
padding: 15px;
margin-bottom: 10px;
border: 1px solid var(--color-secondary);
background: var(--color-box-body);
border-radius: 3px;
#avatar-arrow;
&::after {
border-right-color: var(--color-box-header);
border-right-color: var(--color-box-body);
}
.quick-pull-choice {
.branch-name {
display: inline-block;
padding: 3px 6px;
padding: 2px 4px;
font: 12px var(--fonts-monospace);
color: rgba(0, 0, 0, .65);
background-color: rgba(209, 227, 237, .45);
color: var(--color-text);
background: var(--color-secondary);
border-radius: 3px;
margin: 0 2px;
}
.new-branch-name-input {
@ -741,14 +740,6 @@
align-items: center;
}
.avatar,
.type-icon {
.svg {
width: 23px;
height: 23px;
}
}
.text {
margin: .3em 0 .5em .5em;
}
@ -2629,10 +2620,6 @@
.list {
> .item {
.green:not(.ui.button) {
color: var(--color-green);
}
&:not(:first-child) {
border-top: 1px solid var(--color-secondary);
padding: 1rem;

View file

@ -180,3 +180,7 @@ a.blob-excerpt:hover {
max-width: 900px;
}
}
.review-box > .segment {
border: none !important;
}

View file

@ -1,10 +1,6 @@
@import "variables.less";
.user {
&:not(.icon) {
padding-top: 15px;
}
&.profile {
.ui.card {
.header,

View file

@ -72,13 +72,14 @@
--color-body: #383c4a;
--color-box-header: #454a57;
--color-box-body: #353945;
--color-text: #b6bac5;
--color-text: #bbc0ca;
--color-text-light: #969aa5;
--color-timeline: #4a505c;
--color-input-text: #dcdcdc;
--color-input-text: #d5dbe6;
--color-input-background: #2e323e;
--color-input-border: #454a57;
--color-input-border-hover: #505667;
--color-navbar: #2a2e3a;
}
/* Background */
@ -566,7 +567,7 @@ body {
.following.bar.light {
background: #2e323e;
border-bottom: 1px solid #313131;
border-color: var(--color-secondary-alpha-40);
}
.ui.secondary.menu .active.item {
@ -721,10 +722,6 @@ a.ui.basic.green.label:hover {
background-color: #87ab63;
}
.repository .header-wrapper {
background-color: #2a2e3a;
}
.ui.header,
.ui.breadcrumb .divider {
color: var(--color-secondary-dark-6);
@ -884,35 +881,6 @@ a.ui.basic.green.label:hover {
border-bottom: 1px solid #304251;
}
.ui.tabular.menu {
border-bottom-color: var(--color-secondary);
.item.active {
border-top-color: var(--color-secondary);
border-left-color: var(--color-secondary);
border-right-color: var(--color-secondary);
background: #383c4a;
color: #dbdbdb;
}
.item {
color: var(--color-secondary-dark-6);
}
.item:hover {
color: #dbdbdb;
}
&.navbar {
.item.active {
border-top-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
background: #383c4a;
}
}
}
.markdown:not(code) .highlight pre,
.markdown:not(code) pre {
background-color: #2a2e3a;
@ -1022,8 +990,9 @@ a.ui.basic.green.label:hover {
color: #dedede;
}
.repository .comment.form .ui.tabular.menu .item.active {
background: #353945;
.repository .navbar .active.item,
.repository .navbar .active.item:hover {
border-color: transparent !important;
}
.ui.basic.green.active.button,
@ -1156,43 +1125,6 @@ td.blob-hunk {
background: #353945;
}
.ui.secondary.pointing.menu {
border-bottom-color: rgba(255, 255, 255, .15);
}
.ui.secondary.pointing.menu .active.item {
color: #dbdbdb;
}
.ui.secondary.pointing.menu .active.item:hover {
color: #dbdbdb;
}
.ui.secondary.pointing.menu .dropdown.item:hover,
.ui.secondary.pointing.menu .link.item:hover,
.ui.secondary.pointing.menu a.item:hover {
color: #dbdbdb;
}
.ui.pointing.dropdown > .menu:not(.hidden)::after {
background: #2c303a;
}
.explore .navbar {
background-color: #2a2e3a !important;
}
.ui.menu.new-menu {
background: #2a2e3a;
border-color: transparent !important;
@media @mediaLgAndDown {
&::after {
background: linear-gradient(to right, transparent 0%, #2a2e3a 100%);
}
}
}
.ui.attached.info.message,
.ui.info.message {
box-shadow: 0 0 0 1px #4b5e71 inset, 0 0 0 0 transparent;