Search and Diff CSS enhancements (#14050)
* 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
GitHub
parent
e0a84d7880
commit
b4f8da533e
14 changed files with 129 additions and 153 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -15,39 +15,32 @@
|
|||
|
||||
.ui.repository.list {
|
||||
.item {
|
||||
padding-bottom: 25px;
|
||||
padding-bottom: 1.5rem;
|
||||
|
||||
&:not(:first-child) {
|
||||
border-top: 1px solid var(--color-secondary);
|
||||
padding-top: 25px;
|
||||
padding-top: 1.5rem;
|
||||
}
|
||||
|
||||
.ui.header {
|
||||
font-size: 1.5rem;
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: .5rem;
|
||||
|
||||
.name {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.metas {
|
||||
color: #888888;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
|
||||
span:not(:last-child) {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 12px;
|
||||
color: #808080;
|
||||
}
|
||||
|
||||
.ui.tags {
|
||||
margin-bottom: 1em;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1413,7 +1413,7 @@
|
|||
|
||||
.diff-detail-box {
|
||||
padding: 7px 0;
|
||||
background: #ffffff;
|
||||
background: var(--color-body);
|
||||
line-height: 30px;
|
||||
|
||||
@media @mediaMdAndDown {
|
||||
|
|
@ -1425,7 +1425,6 @@
|
|||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 8;
|
||||
margin-bottom: 10px;
|
||||
border-bottom: 1px solid var(--color-secondary);
|
||||
padding-left: 2px;
|
||||
padding-right: 2px;
|
||||
|
|
@ -1442,8 +1441,12 @@
|
|||
margin-right: .25rem;
|
||||
}
|
||||
|
||||
.diff-detail-actions .btn-review {
|
||||
margin-right: 0 !important;
|
||||
.diff-detail-actions > * {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.diff-detail-actions > * + * {
|
||||
margin-left: .25rem;
|
||||
}
|
||||
|
||||
span.status {
|
||||
|
|
@ -1454,26 +1457,21 @@
|
|||
vertical-align: middle;
|
||||
|
||||
&.modify {
|
||||
background-color: #f0db88;
|
||||
background-color: var(--color-yellow);
|
||||
}
|
||||
|
||||
&.add {
|
||||
background-color: #b4e2b4;
|
||||
background-color: var(--color-green);
|
||||
}
|
||||
|
||||
&.del {
|
||||
background-color: #e9aeae;
|
||||
background-color: var(--color-red);
|
||||
}
|
||||
|
||||
&.rename {
|
||||
background-color: #dad8ff;
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
.detail-files {
|
||||
background: #ffffff;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.diff-box .header {
|
||||
|
|
@ -1486,12 +1484,18 @@
|
|||
}
|
||||
|
||||
.button {
|
||||
padding: 8px 10px;
|
||||
padding: 8px 12px;
|
||||
flex: 0 0 auto;
|
||||
margin-top: -8px;
|
||||
margin-bottom: -8px;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.diff-file-box {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
.header {
|
||||
background-color: var(--color-box-header);
|
||||
}
|
||||
|
|
@ -1588,7 +1592,6 @@
|
|||
}
|
||||
|
||||
.diff-stats {
|
||||
|
||||
clear: both;
|
||||
margin-bottom: 5px;
|
||||
max-height: 400px;
|
||||
|
|
@ -1599,9 +1602,12 @@
|
|||
list-style: none;
|
||||
padding-bottom: 4px;
|
||||
margin-bottom: 4px;
|
||||
border-bottom: 1px dashed var(--color-secondary);
|
||||
padding-left: 6px;
|
||||
}
|
||||
|
||||
li + li {
|
||||
border-top: 1px solid var(--color-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.repo-search-result {
|
||||
|
|
@ -2961,9 +2967,8 @@ td.blob-excerpt {
|
|||
border-radius: var(--border-radius) !important;
|
||||
}
|
||||
|
||||
.diff-counter {
|
||||
font-weight: 600;
|
||||
margin-right: 8px;
|
||||
.diff-file-header-actions > * + * {
|
||||
margin-left: .5rem !important;
|
||||
}
|
||||
|
||||
.diff-stats-bar {
|
||||
|
|
@ -2971,8 +2976,6 @@ td.blob-excerpt {
|
|||
background-color: var(--color-red);
|
||||
height: 12px;
|
||||
width: 40px;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
|
||||
.diff-stats-add-bar {
|
||||
background-color: var(--color-green);
|
||||
|
|
|
|||
|
|
@ -122,19 +122,14 @@
|
|||
color: var(--color-text);
|
||||
}
|
||||
|
||||
a.fold-file {
|
||||
margin-right: 10px;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
a.blob-excerpt {
|
||||
color: #575a68;
|
||||
color: var(--color-text-light);
|
||||
height: 28px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
background: var(--color-primary-light-5);
|
||||
background: var(--color-expand-button);
|
||||
}
|
||||
|
||||
a.blob-excerpt:hover {
|
||||
|
|
|
|||
|
|
@ -12,12 +12,16 @@
|
|||
.f1 { flex: 1 !important; }
|
||||
.fw { flex-wrap: wrap !important; }
|
||||
.vm { vertical-align: middle !important; }
|
||||
.w-100 { width: 100% !important; }
|
||||
.h-100 { height: 100% !important; }
|
||||
|
||||
.mono {
|
||||
font-family: var(--fonts-monospace) !important;
|
||||
font-size: .9em !important; /* compensate for monospace fonts being usually slighty larger */
|
||||
}
|
||||
|
||||
.bold { font-weight: 600 !important; }
|
||||
|
||||
.word-break {
|
||||
word-wrap: break-word !important;
|
||||
word-break: break-all !important;
|
||||
|
|
|
|||
|
|
@ -82,7 +82,8 @@
|
|||
--color-text-dark: #dbe0ea;
|
||||
--color-text: #bbc0ca;
|
||||
--color-text-light: #a6aab5;
|
||||
--color-text-light-2: #868a95;
|
||||
--color-text-light-2: #8a8e99;
|
||||
--color-text-light-3: #707687;
|
||||
--color-footer: #2e323e;
|
||||
--color-timeline: #4c525e;
|
||||
--color-input-text: #d5dbe6;
|
||||
|
|
@ -92,7 +93,8 @@
|
|||
--color-navbar: #2a2e3a;
|
||||
--color-label: #ffffff0d;
|
||||
--color-label-hover: #ffffff20;
|
||||
--color-label-basic: #00000016;
|
||||
--color-label-basic: #00000030;
|
||||
--color-label-basic-hover: #40404030;
|
||||
--color-label-border: #ffffff28;
|
||||
--color-hover: #ffffff0d;
|
||||
--color-active: #ffffff14;
|
||||
|
|
@ -104,6 +106,8 @@
|
|||
--color-code-bg: #2a2e3a;
|
||||
--color-shadow: #00000060;
|
||||
--color-secondary-bg: #2a2e3a;
|
||||
--color-text-focus: #fff;
|
||||
--color-expand-button: #3c404d;
|
||||
}
|
||||
|
||||
.repository.branches .commit-divergence .bar {
|
||||
|
|
@ -118,10 +122,6 @@
|
|||
background: var(--color-primary-alpha-20) !important;
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--color-secondary-dark-6);
|
||||
}
|
||||
|
||||
::placeholder,
|
||||
.CodeMirror-placeholder {
|
||||
color: #6a737d !important;
|
||||
|
|
@ -505,15 +505,6 @@ td.blob-excerpt {
|
|||
background-color: rgba(0, 0, 0, .15);
|
||||
}
|
||||
|
||||
a.blob-excerpt {
|
||||
color: #ccc;
|
||||
background: #393d4a;
|
||||
}
|
||||
|
||||
a.blob-excerpt:hover {
|
||||
background: #87ab63;
|
||||
}
|
||||
|
||||
.lines-code.active,
|
||||
.lines-code .active {
|
||||
background: #534d1b !important;
|
||||
|
|
@ -658,18 +649,6 @@ a.blob-excerpt:hover {
|
|||
border-right-color: var(--color-secondary) !important;
|
||||
}
|
||||
|
||||
.repository .diff-detail-box {
|
||||
background-color: #383c4a;
|
||||
|
||||
.detail-files {
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
&.sticky {
|
||||
border-bottom-color: var(--color-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
/* code mirror dark theme */
|
||||
|
||||
.CodeMirror {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue