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