Convert light colors to variables
This commit is contained in:
Jordan Welch
parent
0029890ead
commit
93103e2c49
1 changed files with 76 additions and 40 deletions
|
|
@ -5,6 +5,42 @@
|
|||
*
|
||||
*/
|
||||
|
||||
:root {
|
||||
--d2h-color: rgba(0, 0, 0, 0.3);
|
||||
--d2h-bg-color: #fff;
|
||||
--d2h-border-color: #ddd;
|
||||
|
||||
--d2h-line-border-color: #eeeeee;
|
||||
|
||||
--d2h-file-header-color: #f7f7f7;
|
||||
--d2h-file-header-border-color: #d8d8d8;
|
||||
|
||||
--d2h-empty-placeholder-bg-color: #f1f1f1;
|
||||
--d2h-empty-placeholder-border-color: #e1e1e1;
|
||||
|
||||
--d2h-selected-color: #c8e1ff;
|
||||
|
||||
--d2h-ins-bg-color: #dfd;
|
||||
--d2h-ins-border-color: #b4e2b4;
|
||||
--d2h-ins-highlight-bg-color: #97f295;
|
||||
--d2h-ins-label-color: #399839;
|
||||
|
||||
--d2h-del-bg-color: #fee8e9;
|
||||
--d2h-del-border-color: #e9aeae;
|
||||
--d2h-del-highlight-bg-color: #ffb6ba;
|
||||
--d2h-del-label-color: #c33;
|
||||
|
||||
--d2h-change-label-color: #d0b44c;
|
||||
|
||||
--d2h-change-del-color: #fdf2d0;
|
||||
--d2h-change-ins-color: #ded;
|
||||
|
||||
--d2h-info-bg-color: #f8fafd;
|
||||
--d2h-info-border-color: #d5e4f2;
|
||||
|
||||
--d2h-moved-label-color: #3572b0;
|
||||
}
|
||||
|
||||
.d2h-wrapper {
|
||||
text-align: left;
|
||||
}
|
||||
|
|
@ -13,8 +49,8 @@
|
|||
display: flex;
|
||||
height: 35px;
|
||||
padding: 5px 10px;
|
||||
border-bottom: 1px solid #d8d8d8;
|
||||
background-color: #f7f7f7;
|
||||
border-bottom: 1px solid var(--d2h-file-header-border-color);
|
||||
background-color: var(--d2h-file-header-color);
|
||||
font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
|
|
@ -34,18 +70,18 @@
|
|||
|
||||
.d2h-lines-added {
|
||||
text-align: right;
|
||||
border: 1px solid #b4e2b4;
|
||||
border: 1px solid var(--d2h-ins-border-color);
|
||||
border-radius: 5px 0 0 5px;
|
||||
color: #399839;
|
||||
color: var(--d2h-ins-label-color);
|
||||
padding: 2px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.d2h-lines-deleted {
|
||||
text-align: left;
|
||||
border: 1px solid #e9aeae;
|
||||
border: 1px solid var(--d2h-del-border-color);
|
||||
border-radius: 0 5px 5px 0;
|
||||
color: #c33;
|
||||
color: var(--d2h-del-label-color);
|
||||
padding: 2px;
|
||||
vertical-align: middle;
|
||||
margin-left: 1px;
|
||||
|
|
@ -69,7 +105,7 @@
|
|||
}
|
||||
|
||||
.d2h-file-wrapper {
|
||||
border: 1px solid #ddd;
|
||||
border: 1px solid var(--d2h-border-color);
|
||||
border-radius: 3px;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
|
@ -81,12 +117,12 @@
|
|||
font-size: 12px;
|
||||
align-items: center;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #ddd;
|
||||
border: 1px solid var(--d2h-border-color);
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
.d2h-file-collapse.d2h-selected {
|
||||
background-color: #c8e1ff;
|
||||
background-color: var(--d2h-selected-color);
|
||||
}
|
||||
|
||||
.d2h-file-collapse-input {
|
||||
|
|
@ -155,7 +191,7 @@
|
|||
display: inline-block;
|
||||
margin-top: -1px;
|
||||
text-decoration: none;
|
||||
background-color: #ffb6ba;
|
||||
background-color: var(--d2h-del-highlight-bg-color);
|
||||
border-radius: 0.2em;
|
||||
}
|
||||
|
||||
|
|
@ -164,7 +200,7 @@
|
|||
display: inline-block;
|
||||
margin-top: -1px;
|
||||
text-decoration: none;
|
||||
background-color: #97f295;
|
||||
background-color: var(--d2h-ins-highlight-bg-color);
|
||||
border-radius: 0.2em;
|
||||
text-align: left;
|
||||
}
|
||||
|
|
@ -201,10 +237,10 @@
|
|||
/* Keep the numbers fixed on line contents scroll */
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
background-color: #fff;
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
background-color: var(--d2h-bg-color);
|
||||
color: var(--d2h-color);
|
||||
text-align: right;
|
||||
border: solid #eeeeee;
|
||||
border: solid var(--d2h-line-border-color);
|
||||
border-width: 0 1px 0 1px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -219,10 +255,10 @@
|
|||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
width: 4em;
|
||||
background-color: #fff;
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
background-color: var(--d2h-bg-color);
|
||||
color: var(--d2h-color);
|
||||
text-align: right;
|
||||
border: solid #eeeeee;
|
||||
border: solid var(--d2h-line-border-color);
|
||||
border-width: 0 1px 0 1px;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
|
|
@ -236,8 +272,8 @@
|
|||
|
||||
.d2h-code-side-emptyplaceholder,
|
||||
.d2h-emptyplaceholder {
|
||||
background-color: #f1f1f1;
|
||||
border-color: #e1e1e1;
|
||||
background-color: var(--d2h-empty-placeholder-bg-color);
|
||||
border-color: var(--d2h-empty-placeholder-border-color);
|
||||
}
|
||||
|
||||
.d2h-code-linenumber,
|
||||
|
|
@ -257,27 +293,27 @@
|
|||
*/
|
||||
|
||||
.d2h-del {
|
||||
background-color: #fee8e9;
|
||||
border-color: #e9aeae;
|
||||
background-color: var(--d2h-del-bg-color);
|
||||
border-color: var(--d2h-del-border-color);
|
||||
}
|
||||
|
||||
.d2h-ins {
|
||||
background-color: #dfd;
|
||||
border-color: #b4e2b4;
|
||||
background-color: var(--d2h-ins-bg-color);
|
||||
border-color: var(--d2h-ins-border-color);
|
||||
}
|
||||
|
||||
.d2h-info {
|
||||
background-color: #f8fafd;
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
border-color: #d5e4f2;
|
||||
background-color: var(--d2h-info-bg-color);
|
||||
color: var(--d2h-color);
|
||||
border-color: var(--d2h-info-border-color);
|
||||
}
|
||||
|
||||
.d2h-file-diff .d2h-del.d2h-change {
|
||||
background-color: #fdf2d0;
|
||||
background-color: var(--d2h-change-del-color);
|
||||
}
|
||||
|
||||
.d2h-file-diff .d2h-ins.d2h-change {
|
||||
background-color: #ded;
|
||||
background-color: var(--d2h-change-ins-color);
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -290,11 +326,11 @@
|
|||
|
||||
.d2h-file-list-wrapper a {
|
||||
text-decoration: none;
|
||||
color: #3572b0;
|
||||
color: var(--d2h-moved-label-color);
|
||||
}
|
||||
|
||||
.d2h-file-list-wrapper a:visited {
|
||||
color: #3572b0;
|
||||
color: var(--d2h-moved-label-color);
|
||||
}
|
||||
|
||||
.d2h-file-list-header {
|
||||
|
|
@ -320,7 +356,7 @@
|
|||
}
|
||||
|
||||
.d2h-file-list > li {
|
||||
border-bottom: #ddd solid 1px;
|
||||
border-bottom: var(--d2h-border-color) solid 1px;
|
||||
padding: 5px 10px;
|
||||
margin: 0;
|
||||
}
|
||||
|
|
@ -342,19 +378,19 @@
|
|||
}
|
||||
|
||||
.d2h-deleted {
|
||||
color: #c33;
|
||||
color: var(--d2h-del-label-color);
|
||||
}
|
||||
|
||||
.d2h-added {
|
||||
color: #399839;
|
||||
color: var(--d2h-ins-label-color);
|
||||
}
|
||||
|
||||
.d2h-changed {
|
||||
color: #d0b44c;
|
||||
color: var(--d2h-change-label-color);
|
||||
}
|
||||
|
||||
.d2h-moved {
|
||||
color: #3572b0;
|
||||
color: var(--d2h-moved-label-color);
|
||||
}
|
||||
|
||||
.d2h-tag {
|
||||
|
|
@ -364,23 +400,23 @@
|
|||
font-size: 10px;
|
||||
margin-left: 5px;
|
||||
padding: 0 2px;
|
||||
background-color: #fff;
|
||||
background-color: var(--d2h-bg-color);
|
||||
}
|
||||
|
||||
.d2h-deleted-tag {
|
||||
border: #c33 1px solid;
|
||||
border: var(--d2h-del-label-color) 1px solid;
|
||||
}
|
||||
|
||||
.d2h-added-tag {
|
||||
border: #399839 1px solid;
|
||||
border: var(--d2h-ins-label-color) 1px solid;
|
||||
}
|
||||
|
||||
.d2h-changed-tag {
|
||||
border: #d0b44c 1px solid;
|
||||
border: var(--d2h-change-label-color) 1px solid;
|
||||
}
|
||||
|
||||
.d2h-moved-tag {
|
||||
border: #3572b0 1px solid;
|
||||
border: var(--d2h-moved-label-color) 1px solid;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
Loading…
Reference in a new issue