Rework commit page header (#17849)

- Remove blue background and use regular header styling
- Use flexbox on author and signature segments
- Add shield-type icons besides gpg key, replacing icon font icons
- Ensure author and signature line are same height
- Remove erronous green background on arc-green signature line
- Turn signing colors into CSS variables
- Consolidate the two warning states into one

Co-authored-by: zeripath <art27@cantab.net>
This commit is contained in:
silverwind 2021-11-30 15:40:17 -08:00 committed by GitHub
parent 01087e9eef
commit 3fd502cca8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 145 additions and 230 deletions

View file

@ -2183,110 +2183,82 @@
}
.ui.attached.isSigned.isWarning {
border-left: 1px solid #c29393;
border-right: 1px solid #c29393;
border-left: 1px solid var(--color-error-border);
border-right: 1px solid var(--color-error-border);
&.top,
&.message {
border-top: 1px solid #c29393;
border-top: 1px solid var(--color-error-border);
}
&.message {
box-shadow: none;
background-color: #fff5f5;
color: #d95c5c;
background-color: var(--color-error-bg);
color: var(--color-error-text);
.ui.text {
color: #d64444;
color: var(--color-error-text);
}
}
&:last-child,
&.bottom {
border-bottom: 1px solid #c29393;
border-bottom: 1px solid var(--color-error-border);
}
}
.ui.attached.isSigned:not(.isWarning) .pull-right {
padding-top: 5px;
}
.ui.attached.isSigned.isVerified {
border-left: 1px solid #a3c293;
border-right: 1px solid #a3c293;
border-left: 1px solid var(--color-success-border);
border-right: 1px solid var(--color-success-border);
&.top,
&.message {
border-top: 1px solid #a3c293;
border-top: 1px solid var(--color-success-border);
}
&.message {
box-shadow: none;
background-color: #fcfff5;
color: #6cc644;
background-color: var(--color-success-bg);
color: var(--color-success-text);
.pull-right {
color: var(--color-text);
}
.ui.text {
color: #21ba45;
color: var(--color-success-text);
}
}
&:last-child,
&.bottom {
border-bottom: 1px solid #a3c293;
}
}
.ui.attached.isSigned.isVerifiedUntrusted {
border-left: 1px solid #c2c193;
border-right: 1px solid #c2c193;
&.top,
&.message {
border-top: 1px solid #c2c193;
}
&.message {
box-shadow: none;
background-color: #fffff5;
color: #fbbd08;
.ui.text {
color: #d2ab00;
}
}
&:last-child,
&.bottom {
border-bottom: 1px solid #c2c193;
border-bottom: 1px solid var(--color-success-border);
}
}
.ui.attached.isSigned.isVerifiedUntrusted,
.ui.attached.isSigned.isVerifiedUnmatched {
border-left: 1px solid #c2a893;
border-right: 1px solid #c2a893;
border-left: 1px solid var(--color-warning-border);
border-right: 1px solid var(--color-warning-border);
&.top,
&.message {
border-top: 1px solid #c2a893;
border-top: 1px solid var(--color-warning-border);
}
&.message {
box-shadow: none;
background-color: #fffaf5;
color: #f2711c;
background-color: var(--color-warning-bg);
color: var(--color-warning-text);
.ui.text {
color: #ee5f00;
color: var(--color-warning-text);
}
}
&:last-child,
&.bottom {
border-bottom: 1px solid #c2a893;
border-bottom: 1px solid var(--color-warning-border);
}
}
@ -2469,24 +2441,6 @@
padding-top: 9px !important;
padding-bottom: 9px !important;
}
&.diff .committed-by {
padding-top: .5rem;
.ui.avatar {
width: 20px;
height: 20px;
}
span {
margin-right: .25rem;
svg {
vertical-align: text-bottom;
margin-right: 2px;
}
}
}
}
// End of .repository
@ -2573,6 +2527,18 @@
padding-top: 15px;
}
.browse-button {
position: absolute;
right: 1rem;
top: .75rem;
}
.commit-header-row {
min-height: 50px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.settings {
.content {
> .header,