Misc UI fixes, add secondary color (#13378)

* Misc UI fixes, add secondary color

- Add secondary color, primarily used in arc-green currently
- Convert icons on release page to SVG
- Improve resolved conversation placeholder
- Diff fixes on arc-green
- Misc color tweaks

* fix comment header, adjust arc-green dropzone

* label margin, sidebar margin

* flexbox commits table and add primary button styles

* tooltip styles

* file header fixes

Co-authored-by: Lauris BH <lauris@nix.lv>
Co-authored-by: zeripath <art27@cantab.net>
This commit is contained in:
silverwind 2020-11-01 21:04:26 +01:00 committed by GitHub
parent 543697e61e
commit 4617bb689b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
17 changed files with 300 additions and 234 deletions

View file

@ -407,9 +407,11 @@
font-size: .5em;
}
.file-actions {
margin-bottom: -5px;
.file-info {
font-size: 13px;
}
.file-actions {
.btn-octicon {
display: inline-block;
padding: 5px;
@ -996,33 +998,6 @@
}
.content {
> .header {
#avatar-arrow;
font-weight: normal;
padding: .5rem 1rem;
position: relative;
color: #767676;
background-color: #f7f7f7;
display: flex;
justify-content: space-between;
align-items: center;
&.arrow-top::before,
&.arrow-top::after {
transform: rotate(90deg);
}
&.arrow-top::before {
top: -9px;
left: 6px;
}
&.arrow-top::after {
top: -8px;
left: 7px;
}
}
> .merge-section {
background-color: #f7f7f7;
@ -1433,7 +1408,7 @@
.bar {
height: 4px;
position: absolute;
background-color: #d4d4d5;
background-color: var(--color-secondary);
&.bar-behind {
right: 0;
@ -1603,12 +1578,17 @@
background: #ffffff;
line-height: 30px;
@media only screen and (max-width: 992px) {
flex-direction: column;
align-items: flex-start;
}
&.sticky {
position: sticky;
top: 0;
z-index: 8;
margin-bottom: 10px;
border-bottom: 1px solid #d4d4d5;
border-bottom: 1px solid var(--color-secondary);
padding-left: 2px;
padding-right: 2px;
}
@ -2729,7 +2709,7 @@
> .header,
.segment {
box-shadow: 0 1px 2px 0 rgba(34, 36, 38, .15);
box-shadow: 0 1px 2px 0 var(--color-secondary);
}
}
@ -2793,6 +2773,34 @@
}
}
.comment-header {
#avatar-arrow;
font-weight: normal !important;
padding: .5rem 1rem !important;
margin: 0 !important;
position: relative;
color: #767676;
background-color: #f7f7f7;
display: flex;
justify-content: space-between;
align-items: center;
&.arrow-top::before,
&.arrow-top::after {
transform: rotate(90deg);
}
&.arrow-top::before {
top: -9px;
left: 6px;
}
&.arrow-top::after {
top: -8px;
left: 7px;
}
}
.comment-header .actions a {
margin-right: 0 !important;
padding: .5rem !important;
@ -2871,7 +2879,7 @@
}
&:before {
border-right-color: #d3d3d4;
border-right-color: var(--color-secondary);
border-width: 9px;
margin-top: -9px;
}
@ -3080,7 +3088,7 @@ tbody.commit-list {
.repo-buttons .disabled-repo-button a.button:hover {
background: none !important;
color: rgba(0, 0, 0, .6) !important;
box-shadow: 0 0 0 1px rgba(34, 36, 38, .15) inset !important;
box-shadow: 0 0 0 1px var(--color-secondary) inset !important;
}
.repo-buttons .ui.labeled.button > .label {
@ -3099,6 +3107,17 @@ tbody.commit-list {
vertical-align: middle;
}
.resolved-placeholder {
font-weight: normal !important;
border: 1px solid var(--color-secondary) !important;
border-radius: var(--border-radius) !important;
margin: 4px !important;
}
.resolved-placeholder + .comment-code-cloud {
padding-top: 0 !important;
}
.board {
display: flex;
flex-direction: row;
@ -3109,7 +3128,7 @@ tbody.commit-list {
.board-column {
background-color: rgba(0, 0, 0, .05) !important;
border: 1px solid rgba(34, 36, 38, .15) !important;
border: 1px solid var(--color-secondary) !important;
margin: 0 .5rem !important;
padding: .5rem !important;
width: 320px;