forked from forgejo/forgejo
Comment box tweaks and SVG dropdown triangles (#13376)
* Comment box tweaks and SVG dropdown triangles - Change all dropdown triangles to SVG - Bring inline review comment box closer to regular comment boxes - Enhance arc-green checkbox contrast - Minor reaction tweaks - Flexbox the diff file header * remove a border * fix type marker in arc-green * add small code padding * fix position regression and remove useless rules Co-authored-by: Lauris BH <lauris@nix.lv> Co-authored-by: techknowlogick <techknowlogick@gitea.io>
This commit is contained in:
silverwind
GitHub
parent
e4e85a3e51
commit
2ac112d84e
57 changed files with 253 additions and 238 deletions
|
|
@ -310,6 +310,17 @@ code,
|
|||
flex-direction: inherit;
|
||||
}
|
||||
|
||||
.ui.dropdown:not(.labeled) > .dropdown.icon {
|
||||
height: 14px;
|
||||
vertical-align: bottom;
|
||||
margin-bottom: -2px;
|
||||
margin-left: .5rem;
|
||||
}
|
||||
|
||||
.ui.form .field > .selection.dropdown > .dropdown.icon {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.ui {
|
||||
&.left:not(.action) {
|
||||
float: left;
|
||||
|
|
@ -1118,6 +1129,10 @@ i.icon.centerlock {
|
|||
}
|
||||
}
|
||||
|
||||
.lines-code {
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.lines-code code {
|
||||
white-space: pre;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -158,19 +158,8 @@
|
|||
#create-page-form;
|
||||
|
||||
form {
|
||||
.dropdown {
|
||||
.dropdown.icon {
|
||||
margin-top: -7px !important;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-right: 0 !important;
|
||||
|
||||
i {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
}
|
||||
.dropdown .text {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
.header {
|
||||
|
|
|
|||
|
|
@ -162,16 +162,6 @@
|
|||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.svg {
|
||||
float: left;
|
||||
margin: 0 -7px 0 -5px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
&.labels .svg {
|
||||
margin: -2px -7px 0 -5px;
|
||||
}
|
||||
|
||||
&.labels {
|
||||
.label-filter .menu .info {
|
||||
display: inline-block;
|
||||
|
|
@ -191,21 +181,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-left: .9em;
|
||||
}
|
||||
|
||||
.menu {
|
||||
max-height: 300px;
|
||||
overflow-x: auto;
|
||||
right: 0 !important;
|
||||
left: auto !important;
|
||||
}
|
||||
|
||||
.dropdown.item {
|
||||
margin: 1px;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.select-label {
|
||||
|
|
@ -883,8 +864,8 @@
|
|||
justify-content: center;
|
||||
|
||||
.svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
padding: 3px;
|
||||
|
||||
&.octicon-circle-slash {
|
||||
|
|
@ -1040,22 +1021,6 @@
|
|||
top: -8px;
|
||||
left: 7px;
|
||||
}
|
||||
|
||||
.header-left > * + *,
|
||||
.header-right > * + * {
|
||||
margin-left: .25rem;
|
||||
}
|
||||
|
||||
.actions {
|
||||
a {
|
||||
padding: .5rem;
|
||||
color: rgba(0, 0, 0, .4);
|
||||
|
||||
&:hover {
|
||||
color: rgba(0, 0, 0, .8);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .merge-section {
|
||||
|
|
@ -2047,11 +2012,6 @@
|
|||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.dropdown.icon {
|
||||
margin: 0;
|
||||
padding-top: 3px;
|
||||
}
|
||||
|
||||
.selection.dropdown {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
|
|
@ -2458,12 +2418,16 @@
|
|||
|
||||
&.disabled {
|
||||
cursor: default;
|
||||
opacity: .5;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.label.basic {
|
||||
color: var(--color-primary) !important;
|
||||
}
|
||||
|
||||
.ui.label.basic.blue {
|
||||
background-color: var(--color-primary-alpha-10) !important;
|
||||
background-color: var(--color-primary-alpha-20) !important;
|
||||
border-color: inherit !important;
|
||||
}
|
||||
|
||||
|
|
@ -2829,6 +2793,25 @@
|
|||
}
|
||||
}
|
||||
|
||||
.comment-header .actions a {
|
||||
margin-right: 0 !important;
|
||||
padding: .5rem !important;
|
||||
}
|
||||
|
||||
.comment-header a {
|
||||
color: rgba(0, 0, 0, .4) !important;
|
||||
}
|
||||
|
||||
.comment-header .actions a:hover,
|
||||
.comment-header .actions a.active {
|
||||
color: rgba(0, 0, 0, .8) !important;
|
||||
}
|
||||
|
||||
.comment-header-left > * + *,
|
||||
.comment-header-right > * + * {
|
||||
margin-left: .25rem;
|
||||
}
|
||||
|
||||
.edit-label.modal,
|
||||
.new-label.segment {
|
||||
.form {
|
||||
|
|
|
|||
|
|
@ -17,9 +17,17 @@
|
|||
}
|
||||
}
|
||||
|
||||
.repository .diff-file-box .code-diff .add-comment-left,
|
||||
.repository .diff-file-box .code-diff .add-comment-right,
|
||||
.repository .diff-file-box .code-diff .add-code-comment .add-comment-left,
|
||||
.repository .diff-file-box .code-diff .add-code-comment .add-comment-right,
|
||||
.repository .diff-file-box .code-diff .add-code-comment .lines-type-marker {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
.add-comment-left.add-comment-right .ui.attached.header {
|
||||
border: 1px solid #d4d4d5;
|
||||
margin-top: .5em;
|
||||
|
||||
&:not(.top) {
|
||||
margin-bottom: .5em;
|
||||
|
|
@ -39,21 +47,9 @@
|
|||
|
||||
.comment-code-cloud {
|
||||
padding: 4px;
|
||||
padding-left: 0;
|
||||
position: relative;
|
||||
border: 1px solid #f1f1f1;
|
||||
margin: 13px 10px 5px auto;
|
||||
|
||||
&:before {
|
||||
content: " ";
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 13px solid transparent;
|
||||
border-right: 13px solid transparent;
|
||||
border-bottom: 13px solid #f1f1f1;
|
||||
left: 20px;
|
||||
position: absolute;
|
||||
top: -13px;
|
||||
}
|
||||
margin: 0 auto;
|
||||
|
||||
.attached {
|
||||
&.tab {
|
||||
|
|
@ -94,7 +90,7 @@
|
|||
}
|
||||
|
||||
.comment-list {
|
||||
padding-bottom: 10px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
|
|
@ -153,9 +149,9 @@ a.blob-excerpt:hover {
|
|||
}
|
||||
|
||||
.btn-review > .dropdown.icon {
|
||||
width: auto;
|
||||
font-size: .85714286em;
|
||||
margin: 0 0 0 1em;
|
||||
float: right;
|
||||
height: 12px !important;
|
||||
margin-left: .5rem;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
|
|
|
|||
|
|
@ -428,6 +428,10 @@
|
|||
background-color: #383c4a;
|
||||
}
|
||||
|
||||
.repository .segment.reactions .ui.label.basic.blue {
|
||||
background: var(--color-primary-alpha-20) !important;
|
||||
}
|
||||
|
||||
body {
|
||||
color: #a5a5a8;
|
||||
}
|
||||
|
|
@ -511,7 +515,7 @@ body {
|
|||
}
|
||||
|
||||
.following.bar .top.menu a.item:hover {
|
||||
color: #ffffff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.ui.attached.header {
|
||||
|
|
@ -629,7 +633,7 @@ footer {
|
|||
.ui.label.basic {
|
||||
color: #dbdbdb;
|
||||
border-color: #6a737d;
|
||||
background-color: #353945;
|
||||
background-color: #383c4a;
|
||||
}
|
||||
|
||||
.issue.list > .item .title {
|
||||
|
|
@ -655,7 +659,7 @@ footer {
|
|||
a.ui.basic.green.label:hover {
|
||||
background-color: #16ab39 !important;
|
||||
border-color: #16ab39 !important;
|
||||
color: #ffffff !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.issue.list > .item .comment {
|
||||
|
|
@ -832,7 +836,7 @@ a.ui.basic.green.label:hover {
|
|||
}
|
||||
|
||||
.ui.button {
|
||||
background: #383c4a;
|
||||
background: #353846;
|
||||
border: 1px solid #4c505c;
|
||||
color: #dbdbdb;
|
||||
}
|
||||
|
|
@ -1061,15 +1065,6 @@ a.ui.basic.green.label:hover {
|
|||
color: #dbdbdb !important;
|
||||
}
|
||||
|
||||
.ui .comment .actions a {
|
||||
color: #a5a5a8 !important;
|
||||
}
|
||||
|
||||
.ui .comment .actions a.active,
|
||||
.ui .comment .actions a:hover {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.repository.view.issue .comment-list .comment .content {
|
||||
> .bottom.segment {
|
||||
background: #353945;
|
||||
|
|
@ -1123,13 +1118,21 @@ a.ui.basic.green.label:hover {
|
|||
.repository.view.issue .comment-list .timeline-item .badge {
|
||||
background-color: #4c505c;
|
||||
border-color: #4c505c;
|
||||
color: #a5a5a8;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.repository.view.issue .comment-list .timeline-item .badge.badge-commit {
|
||||
background: radial-gradient(var(--color-body) 40%, transparent 40%) no-repeat;
|
||||
}
|
||||
|
||||
.comment-header-right a {
|
||||
color: #a5a5a8;
|
||||
}
|
||||
|
||||
.comment-header-right a:hover {
|
||||
color: #dedede;
|
||||
}
|
||||
|
||||
.repository.file.editor .commit-form-wrapper .commit-form {
|
||||
border-color: #505667;
|
||||
}
|
||||
|
|
@ -1208,6 +1211,10 @@ td.blob-hunk {
|
|||
color: #dbdbdb !important;
|
||||
}
|
||||
|
||||
.lines-type-marker {
|
||||
background: #2a2e3a;
|
||||
}
|
||||
|
||||
.ui.vertical.menu .active.item {
|
||||
background: #4b5162;
|
||||
}
|
||||
|
|
@ -1421,23 +1428,19 @@ input {
|
|||
background: #404552;
|
||||
opacity: 1;
|
||||
color: #dbdbdb;
|
||||
border-color: #4b505f;
|
||||
}
|
||||
|
||||
.ui.checkbox .box:hover::before,
|
||||
.ui.checkbox label:hover::before {
|
||||
background: #404552;
|
||||
border-color: #4b505f;
|
||||
border-color: #505667;
|
||||
}
|
||||
|
||||
.ui.checkbox .box:before,
|
||||
.ui.checkbox label:before {
|
||||
background: #404552;
|
||||
border: 1px solid #4b505f;
|
||||
border: 1px solid #505667;
|
||||
}
|
||||
|
||||
.ui.checkbox label:before {
|
||||
border-color: #4b505f;
|
||||
.ui.checkbox .box:hover::before,
|
||||
.ui.checkbox label:hover::before {
|
||||
background: #404552;
|
||||
border-color: #505667;
|
||||
}
|
||||
|
||||
.ui.checkbox .box:active::before,
|
||||
|
|
@ -1448,8 +1451,8 @@ input {
|
|||
|
||||
.ui.checkbox input:focus ~ .box:before,
|
||||
.ui.checkbox input:focus ~ label:before {
|
||||
border-color: #6a737d;
|
||||
background: #404552;
|
||||
border-color: #6a737d;
|
||||
}
|
||||
|
||||
.ui.checkbox input:checked:focus ~ .box:before,
|
||||
|
|
@ -1564,7 +1567,7 @@ input {
|
|||
|
||||
.lines-num {
|
||||
color: #a5a5a8 !important;
|
||||
border-color: #2d2d2d !important;
|
||||
border-color: #4b505f !important;
|
||||
}
|
||||
|
||||
td.blob-excerpt {
|
||||
|
|
@ -1598,13 +1601,17 @@ a.ui.labels .label:hover {
|
|||
|
||||
.sha.label,
|
||||
.repository #repo-files-table .sha.label,
|
||||
.repository #commits-table td.sha .sha.label,
|
||||
.repository .timeline-item.commits-list .singular-commit .sha.label,
|
||||
.repository.view.issue .comment-list .timeline-item.commits-list .singular-commit .shabox .sha.label {
|
||||
border-color: #4c505c;
|
||||
border-color: #505667;
|
||||
}
|
||||
|
||||
.sha.label.isSigned .detail.icon,
|
||||
.repository #commits-table td.sha .sha.label.isSigned .detail.icon,
|
||||
.repository #repo-files-table .sha.label.isSigned .detail.icon,
|
||||
.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned .detail.icon {
|
||||
.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned .detail.icon,
|
||||
.repository.view.issue .comment-list .timeline-item.commits-list .singular-commit .shabox .sha.label.isSigned .detail.icon {
|
||||
background: none;
|
||||
border-left-color: #888;
|
||||
}
|
||||
|
|
@ -1793,11 +1800,7 @@ a.ui.labels .label:hover {
|
|||
}
|
||||
|
||||
.comment-code-cloud {
|
||||
border-color: #3a3a3a;
|
||||
|
||||
&:before {
|
||||
border-bottom: 13px solid #5a5a5a;
|
||||
}
|
||||
border-color: transparent;
|
||||
|
||||
.ui.attached.top.header {
|
||||
background: none transparent;
|
||||
|
|
@ -1813,7 +1816,7 @@ a.ui.labels .label:hover {
|
|||
background: #404552;
|
||||
}
|
||||
|
||||
border-color: rgba(255, 255, 255, .15);
|
||||
border-color: #4c505c;
|
||||
}
|
||||
|
||||
.footer {
|
||||
|
|
@ -1849,6 +1852,15 @@ a.ui.labels .label:hover {
|
|||
}
|
||||
}
|
||||
|
||||
.comment-header a {
|
||||
color: #a5a5a8 !important;
|
||||
}
|
||||
|
||||
.comment-header .actions a:hover,
|
||||
.comment-header .actions a.active {
|
||||
color: #dedede !important;
|
||||
}
|
||||
|
||||
.heatmap(@heat) {
|
||||
@heatmap-cold: #2d303b;
|
||||
@heatmap-hot: #a0cc75;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue