finn/forgejo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Search and Diff CSS enhancements (#14050)

Browse source 
* Search and Diff CSS enhancements

- Use flexbox for language stats
- Improve labels and code boxes on repo and code search
- Use flexbox on diff header and improve suppressed diff text
- Add dedicated color for diff expander

* more diff tweaks, less vertical padding on header

* more minor tweaks

* always show fold icon, image diff improvments

* remove margin

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>
This commit is contained in:
silverwind 2020-12-20 19:00:03 +01:00 • committed by GitHub
parent e0a84d7880
commit b4f8da533e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 129 additions and 153 deletions
Download patch file Download diff file Expand all files Collapse all files

63
web_src/less/_base.less
View file

@ -85,7 +85,8 @@
--color-text-dark: #080808;
--color-text: #212121;
--color-text-light: #555555;
--color-text-light-2: #888888;
--color-text-light-2: #808080;
--color-text-light-3: #a0a0a0;
--color-box-header: #f7f7f7;
--color-box-body: #ffffff;
--color-footer: #ffffff;
@ -98,6 +99,7 @@
--color-label: #00000010;
--color-label-hover: #00000015;
--color-label-basic: #00000008;
--color-label-basic-hover: #00000015;
--color-label-border: #00000018;
--color-hover: #0000000a;
--color-active: #00000010;
@ -109,6 +111,7 @@
--color-code-bg: #ffffff;
--color-markdown-code-block: #00000010;
--color-secondary-bg: #f4f4f4;
--color-expand-button: #d8efff;
/* backgrounds */
--checkbox-mask-checked: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 18 18" width="16" height="16"><path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>');
--checkbox-mask-indeterminate: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2 7.75A.75.75 0 012.75 7h10a.75.75 0 010 1.5h-10A.75.75 0 012 7.75z"></path></svg>');
@ -170,6 +173,7 @@ h6 {
}
body {
color: var(--color-text);
background-color: var(--color-body);
overflow-y: auto;
display: flex;
@ -304,6 +308,11 @@ a.muted:hover,
}
.ui.ui.menu .item.disabled {
color: var(--color-text-light-3);
}
/* slightly more contrast for filters on issue list */
.ui.ui.menu .dropdown.item.disabled {
color: var(--color-text-light-2);
}
@ -809,10 +818,6 @@ a.ui.card:hover,
font-weight: normal;
}
&.bold {
font-weight: 600;
}
&.italic {
font-style: italic;
}
@ -1387,18 +1392,6 @@ a.ui.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.basic.labels a.label:hover,
a.ui.basic.label:hover {
background: var(--color-label-hover);
}
.ui.label > .detail .icons {
margin-right: .25em;
}
@ -1439,6 +1432,9 @@ a.ui.basic.label:hover {
.lines-num,
.lines-code {
font-size: 12px;
font-family: var(--fonts-monospace);
line-height: 20px;
padding-top: 0;
padding-bottom: 0;
vertical-align: top;
@ -1549,12 +1545,6 @@ a.ui.basic.label:hover {
overflow-y: visible;
}
*:not(.fa):not(.svg):not(.icon) {
font-size: 12px;
font-family: var(--fonts-monospace);
line-height: 20px;
}
table {
width: 100%;
}
@ -1576,6 +1566,10 @@ a.ui.basic.label:hover {
color: var(--color-text);
}
.ui.button.no-text .icon {
margin: 0 !important;
}
.ui.buttons .button:first-child {
border-left: 1px solid var(--color-secondary);
}
@ -1644,6 +1638,20 @@ a.ui.basic.label:hover {
color: var(--color-primary) !important;
}
.ui.basic.labels .label,
.ui.basic.label {
background: var(--color-label-basic);
border-color: var(--color-label-border);
color: var(--color-text);
}
.ui.basic.labels a.label:hover,
a.ui.basic.label:hover {
color: var(--color-text);
border-color: var(--color-label-border);
background: var(--color-label-basic-hover);
}
.ui.label > img {
width: auto !important;
vertical-align: middle;
@ -1703,15 +1711,10 @@ a.ui.basic.label:hover {
}
.color-icon {
margin-right: .5em;
margin-left: .5em;
display: inline-block;
border: 0 solid rgba(0, 0, 0, .2);
border-radius: 100%;
height: 14px;
width: 14px;
position: relative;
top: 2px;
}
.ui.label > .color-icon {
@ -1835,10 +1838,6 @@ table th[data-sortt-desc] {
align-items: center !important;
}
.text-label .color-icon {
position: static !important;
}
.emoji,
.reaction {
font-size: 1.25em;