tdsds.com/gitea
1
1
Fork 0
mirror of https://github.com/go-gitea/gitea synced 2025-07-22 18:28:37 +00:00
Code Releases 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
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;

41
web_src/less/_organization.less
View File

@@ -173,45 +173,4 @@
height: 60px;
}
}
&.settings {
.labelspage {
list-style: none;
padding-top: 0;
.item {
margin-top: 0;
margin-right: -14px;
margin-left: -14px !important;
padding: 10px;
border-bottom: 1px solid var(--color-secondary);
border-top: none;
a {
font-size: 15px;
padding-top: 5px;
padding-right: 10px;
color: #666666;
&:hover {
color: #000000;
}
&.open-issues {
margin-right: 30px;
}
}
.ui.label {
font-size: 1em;
}
}
.item:last-child {
border-bottom: none;
padding-bottom: 0;
}
}
}
}

107
web_src/less/_repository.less
View File

@@ -165,14 +165,14 @@
.label-filter .menu .info {
display: inline-block;
padding: .5rem .25rem;
border-bottom: 1px solid #cccccc;
border-bottom: 1px solid var(--color-secondary);
font-size: 12px;
width: 100%;
white-space: nowrap;
text-align: center;
code {
border: 1px solid #cccccc;
border: 1px solid var(--color-secondary);
border-radius: 3px;
padding: 1px 2px;
font-size: 11px;
@@ -388,7 +388,7 @@
}
.jumpable-path {
color: #888888;
color: var(--color-text-light-2);
}
}
@@ -684,9 +684,7 @@
}
.index {
font-weight: 300;
color: #aaaaaa;
letter-spacing: -1px;
color: var(--color-text-light-2);
}
.label {
@@ -828,7 +826,9 @@
.avatar.image img {
width: 20px;
height: 20px;
margin-right: .15em;
margin-right: .5rem;
position: relative;
top: -2px;
}
&:first-child:not(.commit) {
@@ -853,7 +853,7 @@
float: left;
margin-left: -33px;
margin-right: 8px;
color: #666;
color: var(--color-text-light-2);
align-items: center;
justify-content: center;
@@ -1069,11 +1069,11 @@
span.ui.image {
font-size: 128px;
color: #000000;
color: var(--color-text);
}
span.ui.image:hover {
color: #000000;
color: var(--color-text);
}
}
}
@@ -1218,49 +1218,6 @@
}
}
.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: #666666;
&:hover {
color: #000000;
}
&.open-issues {
margin-right: 30px;
}
}
.ui.label {
font-size: 1em;
}
}
.item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.orglabel {
opacity: .7;
}
}
.milestone.list {
list-style: none;
padding-top: 15px;
@@ -1268,12 +1225,12 @@
> .item {
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 1px dashed #aaaaaa;
border-bottom: 1px dashed var(--color-secondary);
> a {
padding-top: 5px;
padding-right: 10px;
color: #000000;
color: var(--color-text);
&:hover {
color: var(--color-primary);
@@ -1292,7 +1249,7 @@
}
.meta {
color: #999999;
color: var(--color-text-light-2);
padding-top: 5px;
.issue-stats .svg {
@@ -1311,10 +1268,10 @@
font-size: 15px;
padding-top: 5px;
padding-right: 10px;
color: #666666;
color: var(--color-text-light-2);
&:hover {
color: #000000;
color: var(--color-text);
}
}
}
@@ -1651,7 +1608,7 @@
.file {
flex: 1;
color: #888888;
color: var(--color-text-light-2);
word-break: break-all;
}
@@ -2243,7 +2200,7 @@
color: #6cc644;
.pull-right {
color: #000;
color: var(--color-text);
}
.ui.text {
@@ -2327,19 +2284,19 @@
}
a {
color: black;
color: var(--color-text);
&:hover {
color: #666666;
color: var(--color-primary-light-2);
}
}
span.ui {
color: black;
color: var(--color-text);
}
&.active {
background: rgba(0, 0, 0, .05);
background: var(--color-secondary);
}
}
}
@@ -2649,7 +2606,7 @@
&.key {
.meta {
padding-top: 5px;
color: #666666;
color: var(--color-text-light-2);
}
}
@@ -2979,10 +2936,15 @@ tbody.commit-list {
#repo-topics {
margin-top: 5px;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.repo-topic {
font-weight: normal !important;
cursor: pointer;
margin: 2px !important;
}
#new-dependency-drop-list {
@@ -3189,6 +3151,11 @@ td.blob-excerpt {
margin-top: 1em;
}
.sidebar-item-link {
display: inline-flex;
align-items: center;
}
.diff-file-box[data-folded="true"] .diff-file-body {
display: none;
}
@@ -3226,16 +3193,6 @@ td.blob-excerpt {
}
}
.select-project .item {
color: inherit;
display: inline-flex;
align-items: center;
}
.select-project .item .svg {
margin-right: .5rem;
}
.migrate .cards .card {
text-align: center;
}

1
web_src/less/helpers.less
View File

@@ -1,4 +1,5 @@
.df { display: flex !important; }
.dif { display: inline-flex !important; }
.ac { align-items: center !important; }
.jc { justify-content: center !important; }
.js { justify-content: flex-start !important; }

245
web_src/less/themes/theme-arc-green.less
View File

@@ -74,12 +74,21 @@
--color-box-body: #353945;
--color-text: #bbc0ca;
--color-text-light: #969aa5;
--color-text-light-2: #666a75;
--color-footer: #2e323e;
--color-timeline: #4a505c;
--color-input-text: #d5dbe6;
--color-input-background: #2e323e;
--color-input-border: #454a57;
--color-input-border-hover: #505667;
--color-navbar: #2a2e3a;
--color-label: #ffffff10;
--color-label-hover: #ffffff20;
--color-label-basic: #00000016;
--color-label-border: #ffffff28;
--color-hover: #ffffff0d;
--color-active: #ffffff14;
--color-menu: #2e323e;
}
/* Background */
@@ -460,22 +469,6 @@
color: #bbbbbb;
}
.repository .ui.segment.sub-menu .list .item {
color: #dbdbdb;
a,
span.ui {
color: #dbdbdb;
}
}
.repository .ui.segment.sub-menu .list .item a:hover {
color: #fff;
}
.repository .ui.segment.sub-menu .list .item.active {
background: var(--color-secondary);
}
.repository.branches .commit-divergence .bar {
background: #6a737d;
}
@@ -508,55 +501,6 @@ body {
box-shadow: 1px 1px 0 0 #1b1c1d !important; /* .ui.inverted.popup */
}
.ui.card > .extra a:not(.ui):hover,
.ui.cards > .card > .extra a:not(.ui):hover {
color: #a0cc75;
}
.ui.breadcrumb a:hover {
color: #a0cc75;
}
.ui.breadcrumb a {
color: #87ab63;
}
.repository .metas .ui.list a .text {
color: #87ab63;
}
.repository .metas .ui.list a .text:hover {
color: #a0cc75;
}
.repository .label.list .item a {
color: #87ab63;
}
.repository .label.list .item a:hover {
color: #a0cc75;
}
.repository .milestone.list > .item {
border-bottom-color: var(--color-secondary);
}
.repository .milestone.list > .item > a {
color: #87ab63;
}
.repository .milestone.list > .item > a:hover {
color: #a0cc75;
}
.repository .milestone.list > .item .operate > a {
color: #87ab63;
}
.repository .milestone.list > .item .operate > a:hover {
color: #a0cc75;
}
.ui.green.progress .bar {
background-color: #668844;
}
@@ -570,14 +514,6 @@ body {
border-color: var(--color-secondary-alpha-40);
}
.ui.secondary.menu .active.item {
color: #dbdbdb;
}
.ui.secondary.menu .item {
color: var(--color-secondary-dark-6);
}
.following.bar .top.menu a.item:hover {
color: #fff;
}
@@ -586,68 +522,12 @@ body {
background: #353945;
}
.ui.secondary.menu .active.item,
.ui.secondary.menu .dropdown.item:hover,
.ui.secondary.menu .link.item:hover,
.ui.secondary.menu .active.item:hover,
.ui.secondary.menu a.item:hover,
.ui.dropdown .menu .active.item,
.ui.link.menu .item:hover,
.ui.menu .dropdown.item:hover,
.ui.menu .link.item:hover,
.ui.menu a.item:hover,
.ui.menu .active.item {
color: #dbdbdb;
background: #454b5a;
}
.ui.link.list .item,
.ui.link.list a.item,
.ui.link.list .item a:not(.ui) {
color: #dbdbdb;
}
.ui.menu .ui.dropdown .menu > .item {
color: var(--color-secondary-dark-6) !important;
}
.ui.menu .ui.dropdown .menu > .item:hover,
.ui.menu .ui.dropdown .menu > .selected.item {
color: #dbdbdb !important;
background: #454b5a !important;
}
.ui.secondary.menu .dropdown.item > .menu,
.ui.text.menu .dropdown.item > .menu {
border: 1px solid #434444;
}
footer {
background: #2e323e;
border-top: 1px solid #313131;
color: #bababa;
}
.ui.menu .dropdown.item .menu {
background: #2c303a;
}
.ui.dropdown .menu > .header,
.ui.dropdown .menu > .header:not(.ui) {
color: #dbdbdb;
}
.ui.labels a.label:hover,
a.ui.label:hover {
background: #454b5a;
color: #dbdbdb;
}
.ui.basic.labels a.label:hover,
a.ui.basic.label:hover {
background: var(--color-body);
}
.ui.red.label,
.ui.red.labels .label {
background-color: #7d3434 !important;
@@ -660,28 +540,10 @@ a.ui.basic.label:hover {
background-color: #936e00 !important;
}
.ui.menu {
background: var(--color-secondary);
border: 1px solid #353945;
}
.ui.menu .active.item:hover,
.ui.vertical.menu .active.item:hover {
color: #dbdbdb;
background: #4b5162;
}
.ui.accordion .title:not(.ui) {
color: #dbdbdb;
}
.ui.label,
.ui.label.basic {
color: #dbdbdb;
border-color: #6a737d;
background-color: #383c4a;
}
.ui.green.label,
.ui.green.labels .label,
.ui.basic.green.label {
@@ -704,24 +566,6 @@ a.ui.basic.green.label:hover {
color: #b75252 !important;
}
.ui.menu .item {
background: var(--color-secondary);
color: var(--color-secondary-dark-6);
}
.ui.menu .item.disabled,
.ui.menu .item.disabled:hover,
.ui.ui.menu .item.disabled,
.ui.ui.menu .item.disabled:hover {
color: #626773;
opacity: 1;
}
.ui.pagination.menu .active.item {
color: #fff;
background-color: #87ab63;
}
.ui.header,
.ui.breadcrumb .divider {
color: var(--color-secondary-dark-6);
@@ -732,10 +576,6 @@ a.ui.basic.green.label:hover {
border-top-color: transparent;
}
.ui.menu .item > .label {
background: #505667;
}
.form .help {
color: #7f8699;
}
@@ -827,12 +667,6 @@ a.ui.basic.green.label:hover {
box-shadow: none;
}
.ui.blue.label,
.ui.blue.labels .label {
background-color: var(--color-primary-light-2) !important;
border-color: var(--color-primary) !important;
}
.ui.labeled.button:not([class*="left labeled"]) > .label,
.ui[class*="left labeled"].button > .button {
background: var(--color-secondary);
@@ -917,14 +751,6 @@ a.ui.basic.green.label:hover {
}
}
.ui.dropdown .menu {
background: #2c303a;
}
.ui.dropdown .menu > .message:not(.ui) {
color: #636363;
}
.overflow.menu .items .item {
color: #9d9d9d;
}
@@ -950,20 +776,6 @@ a.ui.basic.green.label:hover {
color: #dbdbdb;
}
.ui.dropdown .menu .selected.item,
.ui.dropdown.selected {
color: #dbdbdb;
}
.ui.dropdown .menu > .item:hover {
color: #dbdbdb;
background: #353945;
}
.ui.dropdown .menu > .item {
color: var(--color-secondary-dark-6);
}
.repository.view.issue .comment-list .event > .svg.issue-symbol {
background: #3b4954;
}
@@ -1081,22 +893,6 @@ td.blob-hunk {
border: 1px solid #333640;
}
.ui.selection.active.dropdown,
.ui.selection.active.dropdown:hover,
.ui.selection.active.dropdown .menu,
.ui.selection.active.dropdown:hover .menu {
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1);
}
.ui.menu .ui.dropdown .menu > .active.item {
color: #dbdbdb !important;
}
.repository .filter.menu.labels .label-filter .menu .info,
.repository .filter.menu.labels .label-filter .menu .info code {
border-color: #4e5361;
}
.ui.card,
.ui.cards > .card {
background: #353945;
@@ -1186,14 +982,6 @@ td.blob-hunk {
background-color: #984646;
}
.ui.selection.dropdown .menu > .item {
border-top: 1px solid #313c47;
}
.ui.selection.visible.dropdown > .text:not(.default) {
color: var(--color-secondary-dark-6);
}
.ui.positive.message {
background-color: #0d491b;
color: #87ab63;
@@ -1320,7 +1108,6 @@ a.blob-excerpt:hover {
.ui.text {
color: var(--color-secondary-dark-6);
}
.pull-right,
a {
color: #c2c193;
}
@@ -1335,7 +1122,6 @@ a.blob-excerpt:hover {
.ui.text {
color: var(--color-secondary-dark-6);
}
.pull-right,
a {
color: #c2a893;
}
@@ -1349,9 +1135,6 @@ a.blob-excerpt:hover {
.ui.text {
color: #d07d7d;
}
.pull-right {
color: var(--color-secondary-dark-6);
}
}
}
@@ -1385,16 +1168,6 @@ a.blob-excerpt:hover {
border-color: #634343 !important;
}
.repository .labelspage .item a,
.organization.settings .labelspage .item a {
color: #6a737d;
}
.repository .labelspage .item a:hover,
.organization.settings .labelspage .item a:hover {
color: var(--color-secondary-dark-6);
}
.ui.header .sub.header {
color: var(--color-secondary-dark-6);
}