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
GitHub
parent
03fa2eccbc
commit
b2de034278
@ -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>
|
||||
@ -33,3 +34,4 @@
|
||||
{{.i18n.Tr "admin.monitor"}}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
@ -27,3 +28,4 @@
|
||||
</a>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -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">
|
||||
@ -28,5 +29,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{template "base/footer" .}}
|
||||
|
||||
@ -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>
|
||||
@ -16,4 +17,5 @@
|
||||
</a>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
@ -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>
|
||||
@ -8,4 +9,5 @@
|
||||
</a>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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>
|
||||
@ -21,3 +22,4 @@
|
||||
{{.i18n.Tr "settings.repos"}}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -44,11 +44,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.ui.header,
|
||||
.ui.segment {
|
||||
box-shadow: 0 1px 2px 0 var(--color-secondary);
|
||||
}
|
||||
|
||||
&.user {
|
||||
.email {
|
||||
max-width: 200px;
|
||||
|
||||
@ -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,55 +982,75 @@ 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;
|
||||
}
|
||||
|
||||
.ui.menu.new-menu:hover::-webkit-scrollbar {
|
||||
display: block;
|
||||
@media @mediaSm {
|
||||
.ui.menu.new-menu .new-menu-inner {
|
||||
flex-wrap: wrap;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.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 {
|
||||
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 {
|
||||
.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] {
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -1,6 +1,4 @@
|
||||
.organization {
|
||||
padding-top: 15px;
|
||||
|
||||
.head {
|
||||
.ui.header {
|
||||
.text {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -180,3 +180,7 @@ a.blob-excerpt:hover {
|
||||
max-width: 900px;
|
||||
}
|
||||
}
|
||||
|
||||
.review-box > .segment {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
@ -1,10 +1,6 @@
|
||||
@import "variables.less";
|
||||
|
||||
.user {
|
||||
&:not(.icon) {
|
||||
padding-top: 15px;
|
||||
}
|
||||
|
||||
&.profile {
|
||||
.ui.card {
|
||||
.header,
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user