forked from forgejo/forgejo
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
18 changed files with 267 additions and 291 deletions
|
|
@ -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::after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
background-image: linear-gradient(to right, transparent, var(--color-navbar) 100%);
|
||||
content: ' ';
|
||||
right: 0;
|
||||
height: 39px;
|
||||
z-index: 1000;
|
||||
width: 60px;
|
||||
visibility: visible;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.ui.menu.new-menu::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 0, 0, .2);
|
||||
}
|
||||
.ui.menu.new-menu .item {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.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%);
|
||||
content: ' ';
|
||||
right: 0;
|
||||
height: 53px;
|
||||
z-index: 1000;
|
||||
width: 60px;
|
||||
clear: none;
|
||||
visibility: visible;
|
||||
@media @mediaSm {
|
||||
.ui.menu.new-menu .item {
|
||||
width: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.menu.new-menu a.item:last-child {
|
||||
padding-right: 30px !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 {
|
||||
padding: 11px 12px;
|
||||
color: rgba(0, 0, 0, .5);
|
||||
}
|
||||
border-color: var(--color-secondary);
|
||||
}
|
||||
|
||||
.item:hover {
|
||||
color: rgba(0, 0, 0, .8);
|
||||
}
|
||||
.ui.tabular.menu .item {
|
||||
padding: 11px 12px;
|
||||
color: var(--color-secondary-dark-6);
|
||||
}
|
||||
|
||||
.item.active {
|
||||
color: rgba(0, 0, 0, .9);
|
||||
margin-top: 1px; /* offset fomantic's margin-bottom: -1px */
|
||||
}
|
||||
.ui.tabular.menu .item:hover {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.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…
Add table
Add a link
Reference in a new issue