domi/forgejo-domi
1
0
Fork 0
forked from forgejo/forgejo
Code Pull requests Activity

Dropdowns, Labels fixes and more CSS tweaks (#13733)

Browse source 
* Dropdowns and Labels fixes

- Rework dropdown, menu and label styles
- Improve issue sidebar milestone and label sections
- Fix archived repo and private org badge
- Move more colors to CSS vars
- Move issue number to end of title on issue page

* more dropdown fixes

* fix basic blue labels - fixes #13731

* improve class setting on svg

Co-authored-by: zeripath <art27@cantab.net>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>
This commit is contained in:
silverwind 2020-11-29 07:22:04 +01:00 • committed by GitHub
parent da4bb6fc4e
commit e00a355427
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
17 changed files with 416 additions and 520 deletions
Download patch file Download diff file Expand all files Collapse all files

189
web_src/less/_base.less
View file

@ -77,14 +77,23 @@
--color-body: #ffffff;
--color-text: #212121;
--color-text-light: #444444;
--color-text-light-2: #888888;
--color-box-header: #f7f7f7;
--color-box-body: #ffffff;
--color-footer: #ffffff;
--color-timeline: #ececec;
--color-input-text: #212121;
--color-input-background: #ffffff;
--color-input-border: #dedede;
--color-input-border-hover: #cecece;
--color-navbar: #f8f8f8;
--color-label: #00000010;
--color-label-hover: #00000015;
--color-label-basic: #00000008;
--color-label-border: #00000018;
--color-hover: #0000000d;
--color-active: #00000014;
--color-menu: #ffffff;
}
:root:lang(ja) {
@ -212,7 +221,12 @@ a,
cursor: pointer;
}
a.muted {
color: inherit;
}
a:hover,
a.muted:hover,
.ui.breadcrumb a:hover {
color: var(--color-primary-dark-2);
}
@ -226,6 +240,104 @@ a:hover,
border-right-color: var(--color-primary);
}
.ui.menu {
background: var(--color-menu);
border-color: var(--color-secondary);
}
.ui.menu .item {
color: var(--color-text);
}
.ui.link.menu .item:hover,
.ui.menu .dropdown.item:hover,
.ui.menu .link.item:hover,
.ui.menu a.item:hover {
color: var(--color-text);
background: var(--color-hover);
}
.ui.menu .active.item,
.ui.menu .active.item:hover,
.ui.vertical.menu .active.item:hover {
color: var(--color-text);
background: var(--color-active);
}
.ui.link.menu .item:active,
.ui.menu .link.item:active,
.ui.menu a.item:active {
color: var(--color-text);
background: none;
}
.ui.dropdown .menu {
background: var(--color-menu);
border-color: var(--color-secondary);
}
.ui.dropdown .menu > .header:not(.ui) {
color: var(--color-text);
}
.ui.dropdown .menu > .item {
color: var(--color-text);
}
.ui.dropdown .menu > .item:hover {
color: var(--color-text);
background: var(--color-hover);
}
.ui.dropdown .menu .active.item {
font-weight: normal;
}
.ui.selection.dropdown .menu > .item {
border-color: var(--color-secondary);
}
.ui.selection.visible.dropdown > .text:not(.default) {
color: var(--color-text);
}
.ui.dropdown.selected,
.ui.dropdown .menu .selected.item {
color: var(--color-text);
background: var(--color-hover);
}
.ui.secondary.menu .dropdown.item:hover,
.ui.secondary.menu .link.item:hover,
.ui.secondary.menu a.item:hover {
color: var(--color-text);
background: var(--color-hover);
}
.ui.secondary.menu .active.item,
.ui.secondary.menu .active.item:hover {
color: var(--color-text);
background: var(--color-active);
}
.ui.menu .dropdown.item .menu {
background: var(--color-menu);
}
.ui.menu .ui.dropdown .menu > .item {
color: var(--color-text) !important;
}
.ui.menu .ui.dropdown .menu > .item:hover {
color: var(--color-text) !important;
background: var(--color-hover) !important;
}
.ui.menu .ui.dropdown .menu > .active.item {
color: var(--color-text) !important;
background: var(--color-active) !important;
}
.ui.selection.active.dropdown,
.ui.selection.active.dropdown:hover,
.ui.selection.active.dropdown .menu,
@ -749,13 +861,13 @@ a:hover,
}
.migrate {
color: #888888 !important;
color: var(--color-text-light-2) !important;
opacity: .5;
a {
color: #444444 !important;
color: var(--color-text-light) !important;
&:hover {
color: #000000 !important;
color: var(--color-text) !important;
}
}
}
@ -865,11 +977,11 @@ a:hover,
}
footer {
background-color: white;
border-top: 1px solid #d6d6d6;
background-color: var(--color-footer);
border-top: 1px solid var(--color-secondary);
width: 100%;
flex-basis: 40px;
color: #888888;
color: var(--color-text-light);
.container {
width: 100vw !important;
@ -883,7 +995,7 @@ footer {
}
.links > * {
border-left: 1px solid #d6d6d6;
border-left: 1px solid var(--color-secondary);
padding-left: 8px;
margin-left: 5px;
@ -1110,6 +1222,21 @@ i.icon.centerlock {
.ui.label {
padding: .3em .5em;
background: var(--color-label);
color: var(--color-text-light);
}
.ui.labels a.label:hover,
a.ui.label:hover {
background: var(--color-label-hover);
color: var(--color-text);
}
.ui.basic.labels .label,
.ui.basic.label {
background: var(--color-label-basic);
border-color: var(--color-label-border);
color: var(--color-text);
}
.ui.label > .detail .icons {
@ -1331,9 +1458,9 @@ i.icon.centerlock {
.ui.ui.ui.basic.blue.label,
.ui.basic.labels .primary.label,
.ui.ui.ui.basic.primary.label {
background: transparent;
border-color: var(--color-primary);
color: var(--color-primary);
background: transparent !important;
border-color: var(--color-primary) !important;
color: var(--color-primary) !important;
}
.ui.label > img {
@ -1503,6 +1630,48 @@ table th[data-sortt-desc] {
vertical-align: -.15em;
}
.labelspage {
list-style: none;
padding-top: 0;
.item {
margin-top: 0;
margin-right: -14px;
margin-left: -14px;
padding: 10px;
border-bottom: 1px solid var(--color-secondary);
border-top: none;
a {
font-size: 15px;
padding-top: 5px;
padding-right: 10px;
color: var(--color-text-light);
&:hover {
color: var(--color-primary-light-2);
}
&.open-issues {
margin-right: 30px;
}
}
.ui.label {
font-size: 1em;
}
}
.item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.orglabel {
opacity: .7;
}
}
/* https://github.com/go-gitea/gitea/pull/11486 */
.ui.sub.header {
text-transform: none;