forks/forgejo
1
0
Fork 0
Code Releases Activity

Refactor commit graph styling to use css variables (#17860)

Browse source 
- Use common variables for colors and font
- Alter graph color 5 to provide enough contrast on both themes
This commit is contained in:
silverwind 2021-11-29 18:47:18 -08:00 committed by GitHub
parent eb8513a690
commit 9ecfc54a8f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
web_src/less/features/gitgraph.less
View file

@ -68,15 +68,15 @@
align-items: center;
.node-relation {
font-family: "Bitstream Vera Sans Mono", Courier, monospace;
font-family: var(--fonts-monospace);
}
.author {
color: #666666;
color: var(--color-text-light);
}
.time {
color: #999999;
color: var(--color-text-light-3);
font-size: 80%;
}
@ -85,8 +85,8 @@
}
a em {
color: #bb0000;
border-bottom: 1px dotted #bbbbbb;
color: var(--color-red);
border-bottom: 1px dotted var(--color-secondary);
text-decoration: none;
font-style: normal;
}
@ -108,7 +108,7 @@
width: 100%;
li.highlight.hover {
background-color: rgba(0, 0, 0, .05);
background-color: var(--color-secondary-alpha-30);
}
.tags a.button {
@ -146,13 +146,13 @@
&.monochrome #rel-container {
.flow-group {
stroke: grey;
fill: grey;
stroke: var(--color-secondary-dark-5);
fill: var(--color-secondary-dark-5);
}
.flow-group.highlight {
stroke: black;
fill: black;
stroke: var(--color-secondary-dark-12);
fill: var(--color-secondary-dark-12);
}
}
@ -164,7 +164,7 @@
}
&.flow-color-16-2 {
stroke: hsl(356, 58%, 54%);
stroke: #ce4751;
fill: #ce4751;
}
@ -179,8 +179,8 @@
}
&.flow-color-16-5 {
stroke: #3d27aa;
fill: #3d27aa;
stroke: #7445e9;
fill: #7445e9;
}
&.flow-color-16-6 {
@ -261,8 +261,8 @@
}
&.flow-color-16-5 {
stroke: #4e33d1;
fill: #4f35d1;
stroke: #8455f9;
fill: #8455f9;
}
&.flow-color-16-6 {

38
web_src/less/themes/theme-arc-green.less
View file

@ -676,44 +676,6 @@ img[src$="/img/matrix.svg"] {
filter: invert(80%);
}
#git-graph-container li .time {
color: #6a737d;
}
#git-graph-container.monochrome #rel-container .flow-group {
stroke: dimgrey;
fill: dimgrey;
}
#git-graph-container.monochrome #rel-container .flow-group.highlight {
stroke: darkgrey;
fill: darkgrey;
}
#git-graph-container:not(.monochrome) #rel-container .flow-group {
&.flow-color-16-5 {
stroke: #5543b1;
fill: #5543b1;
}
}
#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight {
&.flow-color-16-5 {
stroke: #7058e6;
fill: #7058e6;
}
}
#git-graph-container #rev-list li.highlight.hover {
background-color: rgba(255, 255, 255, .1);
}
#git-graph-container .ui.buttons button#flow-color-monochrome.ui.button {
border-left-color: rgb(76, 80, 92);
border-left-style: solid;
border-left-width: 1px;
}
.mermaid-chart {
filter: invert(84%) hue-rotate(180deg);
}