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
GitHub
parent
01087e9eef
commit
3fd502cca8
5 changed files with 145 additions and 230 deletions
|
|
@ -82,6 +82,15 @@
|
|||
--color-diff-moved-row-border: #d0e27f;
|
||||
--color-diff-added-row-border: #e6ffed;
|
||||
--color-diff-inactive: #f2f2f2;
|
||||
--color-error-border: #c29393;
|
||||
--color-error-bg: #fff5f5;
|
||||
--color-error-text: #d64444;
|
||||
--color-success-border: #a3c293;
|
||||
--color-success-bg: #fcfff5;
|
||||
--color-success-text: #6cc644;
|
||||
--color-warning-border: #c2c193;
|
||||
--color-warning-bg: #fffff5;
|
||||
--color-warning-text: #fbbd08;
|
||||
/* target-based colors */
|
||||
--color-body: #ffffff;
|
||||
--color-text-dark: #080808;
|
||||
|
|
@ -411,6 +420,16 @@ a.muted:hover,
|
|||
background: var(--color-active) !important;
|
||||
}
|
||||
|
||||
.ui.message {
|
||||
background: var(--color-box-body);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.ui.bottom.attached.message {
|
||||
box-shadow: none !important;
|
||||
border: 1px solid var(--color-secondary);
|
||||
}
|
||||
|
||||
.ui.selection.active.dropdown,
|
||||
.ui.selection.active.dropdown:hover,
|
||||
.ui.selection.active.dropdown .menu,
|
||||
|
|
@ -896,20 +915,6 @@ a.ui.card:hover,
|
|||
text-align: left;
|
||||
}
|
||||
|
||||
&.bottom.attached.message {
|
||||
text-align: left;
|
||||
color: black;
|
||||
|
||||
.pull-right {
|
||||
color: black;
|
||||
}
|
||||
|
||||
& > span,
|
||||
.pull-right > span {
|
||||
color: var(--color-green);
|
||||
}
|
||||
}
|
||||
|
||||
.header > i + .content {
|
||||
padding-left: .75rem;
|
||||
vertical-align: middle;
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -2,8 +2,10 @@
|
|||
.di { display: inline !important; }
|
||||
.dif { display: inline-flex !important; }
|
||||
.dib { display: inline-block !important; }
|
||||
.pr { position: relative !important; }
|
||||
.ac { align-items: center !important; }
|
||||
.tc { text-align: center !important; }
|
||||
.tl { text-align: left !important; }
|
||||
.jc { justify-content: center !important; }
|
||||
.js { justify-content: flex-start !important; }
|
||||
.je { justify-content: flex-end !important; }
|
||||
|
|
|
|||
|
|
@ -78,6 +78,15 @@
|
|||
--color-diff-moved-row-border: #bcca6f;
|
||||
--color-diff-added-row-border: #314a37;
|
||||
--color-diff-inactive: #353846;
|
||||
--color-error-border: #a53a37;
|
||||
--color-error-bg: #403440;
|
||||
--color-error-text: #d64444;
|
||||
--color-success-border: #458a57;
|
||||
--color-success-bg: #304440;
|
||||
--color-success-text: #6cc664;
|
||||
--color-warning-border: #aaa050;
|
||||
--color-warning-bg: #404440;
|
||||
--color-warning-text: #fbbd08;
|
||||
/* target-based colors */
|
||||
--color-body: #383c4a;
|
||||
--color-box-header: #404652;
|
||||
|
|
@ -310,10 +319,6 @@ a.ui.basic.green.label:hover {
|
|||
border-color: transparent !important;
|
||||
}
|
||||
|
||||
.ui .info.segment.top {
|
||||
background-color: var(--color-secondary) !important;
|
||||
}
|
||||
|
||||
.repository .diff-stats li {
|
||||
border-color: var(--color-secondary);
|
||||
}
|
||||
|
|
@ -332,25 +337,6 @@ td.blob-hunk {
|
|||
color: #dbdbdb !important;
|
||||
}
|
||||
|
||||
.ui.attached.info.message,
|
||||
.ui.info.message {
|
||||
box-shadow: 0 0 0 1px #4b5e71 inset, 0 0 0 0 transparent;
|
||||
}
|
||||
|
||||
.ui.bottom.attached.message {
|
||||
background-color: #2c662d;
|
||||
color: #87ab63;
|
||||
}
|
||||
|
||||
.ui.bottom.attached.message .pull-right {
|
||||
color: #87ab63;
|
||||
}
|
||||
|
||||
.ui.info.message {
|
||||
background-color: #2c3b4a;
|
||||
color: #9ebcc5;
|
||||
}
|
||||
|
||||
.ui .warning.header,
|
||||
.ui.warning.message {
|
||||
background-color: #542 !important;
|
||||
|
|
@ -449,59 +435,6 @@ td.blob-excerpt {
|
|||
color: #dbdbdb;
|
||||
}
|
||||
|
||||
.repository .ui.attached.message.isSigned.isVerified {
|
||||
background-color: #394829;
|
||||
color: var(--color-secondary-dark-6);
|
||||
|
||||
&.message {
|
||||
color: #87ab63;
|
||||
.ui.text {
|
||||
color: var(--color-secondary-dark-6);
|
||||
}
|
||||
.pull-right {
|
||||
color: #87ab63;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.repository .ui.attached.message.isSigned.isVerifiedUntrusted {
|
||||
background-color: #4a3903;
|
||||
color: var(--color-secondary-dark-6);
|
||||
&.message {
|
||||
color: #c2c193;
|
||||
.ui.text {
|
||||
color: var(--color-secondary-dark-6);
|
||||
}
|
||||
a {
|
||||
color: #c2c193;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.repository .ui.attached.message.isSigned.isVerifiedUnmatched {
|
||||
background-color: #4e3321;
|
||||
color: var(--color-secondary-dark-6);
|
||||
&.message {
|
||||
color: #c2a893;
|
||||
.ui.text {
|
||||
color: var(--color-secondary-dark-6);
|
||||
}
|
||||
a {
|
||||
color: #c2a893;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.repository .ui.attached.message.isSigned.isWarning {
|
||||
background-color: rgba(80, 23, 17, .6);
|
||||
&.message {
|
||||
color: #d07d7d;
|
||||
.ui.text {
|
||||
color: #d07d7d;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ui.header .sub.header {
|
||||
color: var(--color-secondary-dark-6);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue