Make tabs smaller (#12003)

* Make tabs smaller

Fomantic's tabs are excessively wide and with another tab added on the
repo tabbar (https://github.com/go-gitea/gitea/pull/8346) it would break
the layout on the english language.

Globally reduce tab bar padding to around half of the previous values.

* disable no-duplicate-selectors linter rule

* more tab bar tweaks

* more tweaks

* merge rules and nesting

* remove arc-green weird hover color

* few more arc-green tweaks

* restore to 12px

* tweaks

* use half width height padding

* final tweak

* 10px

* remove min-height

* 11px

* remve new-menu background on light theme too

* background fixes for new-menu

Co-authored-by: Lauris BH <lauris@nix.lv>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>
release/v1.15
silverwind 2020-06-22 18:44:06 +02:00 committed by GitHub
parent 4dee08a6b4
commit b948ecb2d2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 42 additions and 26 deletions

View File

@ -887,7 +887,7 @@ footer {
padding-top: 15px !important; padding-top: 15px !important;
margin-top: -15px !important; margin-top: -15px !important;
margin-bottom: 15px !important; margin-bottom: 15px !important;
background-color: #fafafa !important; background: #fafafa;
border-width: 1px !important; border-width: 1px !important;
} }
@ -895,7 +895,7 @@ footer {
.ui.menu.new-menu { .ui.menu.new-menu {
overflow-x: auto !important; overflow-x: auto !important;
justify-content: left !important; justify-content: left !important;
padding-bottom: 5px; padding-bottom: 2px;
} }
.ui.menu.new-menu::-webkit-scrollbar { .ui.menu.new-menu::-webkit-scrollbar {
@ -1011,19 +1011,6 @@ footer {
margin-top: 3em !important; margin-top: 3em !important;
} }
/* Tab color tweaks */
.ui.tabular.menu .item {
color: rgba(0, 0, 0, .5);
}
.ui.tabular.menu .item:hover {
color: rgba(0, 0, 0, .8);
}
.ui.tabular.menu .item.active {
color: rgba(0, 0, 0, .9);
}
/* multiple radio or checkboxes as inline element */ /* multiple radio or checkboxes as inline element */
.inline-grouped-list { .inline-grouped-list {
display: inline-block; display: inline-block;
@ -1300,3 +1287,23 @@ i.icon.centerlock {
.ui.sub.header { .ui.sub.header {
text-transform: none; text-transform: none;
} }
.ui.tabular.menu {
.item {
padding: 11px 12px;
color: rgba(0, 0, 0, .5);
}
.item:hover {
color: rgba(0, 0, 0, .8);
}
.item.active {
color: rgba(0, 0, 0, .9);
margin-top: 1px; /* offset fomantic's margin-bottom: -1px */
}
}
.ui.secondary.pointing.menu .item {
padding: 12px;
}

View File

@ -3037,3 +3037,13 @@ td.blob-excerpt {
.added-code { .added-code {
background-color: #99ff99; background-color: #99ff99;
} }
.repository .ui.menu.new-menu {
background: none !important;
@media only screen and (max-width: 1200px) {
&:after {
background: none !important;
}
}
}

View File

@ -516,13 +516,13 @@ a.ui.basic.green.label:hover {
} }
.ui.tabular.menu { .ui.tabular.menu {
border-bottom-color: rgba(187, 187, 187, .24); border-bottom-color: rgba(255, 255, 255, .1);
.item.active { .item.active {
border-top-color: transparent; border-top-color: transparent;
border-left-color: transparent; border-left-color: transparent;
border-right-color: transparent; border-right-color: transparent;
background: #404552; background: #383c4a;
color: #dbdbdb; color: #dbdbdb;
} }
@ -536,10 +536,8 @@ a.ui.basic.green.label:hover {
&.navbar { &.navbar {
.item.active { .item.active {
background: #383c4a;
border-left-color: transparent; border-left-color: transparent;
border-right-color: transparent; border-right-color: transparent;
border-top: none;
} }
} }
} }
@ -857,10 +855,12 @@ a.ui.basic.green.label:hover {
background: #353945; background: #353945;
} }
.ui.secondary.pointing.menu {
border-bottom-color: rgba(255, 255, 255, .15);
}
.ui.secondary.pointing.menu .active.item { .ui.secondary.pointing.menu .active.item {
color: #dbdbdb; color: #dbdbdb;
border: 0;
background: #383c4a;
} }
.ui.user.list .item:not(:first-child) { .ui.user.list .item:not(:first-child) {
@ -868,9 +868,7 @@ a.ui.basic.green.label:hover {
} }
.ui.secondary.pointing.menu .active.item:hover { .ui.secondary.pointing.menu .active.item:hover {
border-color: #af8b4c;
color: #dbdbdb; color: #dbdbdb;
background: #4b5162;
} }
.ui.secondary.pointing.menu .dropdown.item:hover, .ui.secondary.pointing.menu .dropdown.item:hover,
@ -902,11 +900,12 @@ a.ui.basic.green.label:hover {
} }
.ui.menu.new-menu { .ui.menu.new-menu {
background-color: #2a2e3a !important; background: #2a2e3a;
border-color: transparent !important;
@media only screen and (max-width: 1200px) { @media only screen and (max-width: 1200px) {
&:after { &:after {
background-image: linear-gradient(to right, rgba(42, 46, 42, 0), rgba(42, 46, 42, 1) 100%); background: linear-gradient(to right, transparent 0%, #2a2e3a 100%);
} }
} }
} }
@ -1359,7 +1358,7 @@ a.ui.labels .label:hover {
background: #404552; background: #404552;
} }
border-color: rgba(187, 187, 187, .24); border-color: rgba(255, 255, 255, .15);
} }
.footer { .footer {