Update button and link colors for themes (#2026)

clicktodev · web-flow · commit c21ef96320cf · 2025-01-18T15:11:23.000+01:00
diff --git a/assets/css/content/bottom-actions.css b/assets/css/content/bottom-actions.css
@@ -29,6 +29,10 @@
   white-space: nowrap;
 }
 
+.content-inner .bottom-actions .bottom-actions-button .title {
+  color: var(--textHeaders);
+}
+
 .content-inner .bottom-actions .bottom-actions-button[rel="prev"] {
   text-align: start;
 }
diff --git a/assets/css/content/code.css b/assets/css/content/code.css
@@ -1,12 +1,12 @@
 .content-inner.content-inner :is(a:has(code, img), pre a) {
-  color: var(--linksNoUnderline);
+  color: var(--link-color);
   text-shadow: none;
   text-decoration: none;
   background-image: none;
 }
 
 .content-inner.content-inner :is(a:has(code, img), pre a):is(:visited, :active, :focus, :hover) {
-  color: var(--linksNoUnderlineVisited);
+  color: var(--link-visited-color);
 }
 
 .content-inner code {
diff --git a/assets/css/content/footer.css b/assets/css/content/footer.css
@@ -1,15 +1,9 @@
 .content-inner .footer {
   margin: 4em auto 1em;
   text-align: center;
-  font-style: italic;
   font-size: 14px;
 }
 
-.content-inner .footer,
-.content-inner .footer :is(a, .footer-button) {
-  color: var(--textFooter);
-}
-
 .content-inner .footer .line {
   display: inline-block;
 }
@@ -18,7 +12,6 @@
   background-color: transparent;
   border: 0;
   cursor: pointer;
-  font-style: italic;
   padding: 0 4px;
 }
 
diff --git a/assets/css/content/general.css b/assets/css/content/general.css
@@ -80,13 +80,12 @@
 }
 
 .content-inner :is(a, .a-main) {
-  color: var(--links);
+  color: var(--link-color);
   text-decoration: underline;
-  text-decoration-color: var(--linksDecoration);
   text-decoration-skip-ink: auto;
 }
 .content-inner :is(a:visited, .a-main:visited) {
-  color: var(--linksVisited);
+  color: var(--link-visited-color);
 }
 
 .content-inner .icon-action {
diff --git a/assets/css/custom-props/_elixir.css b/assets/css/custom-props/_elixir.css
@@ -8,11 +8,11 @@
   --searchBarFocusColor:  #8E7CE6;
   --searchBarBorderColor: rgba(142, 124, 230, 0.25);
 
-  --linksNoUnderline:            var(--mainDark);
-  --linksNoUnderlineVisited:     var(--mainDarkest);
+  --link-color:            var(--mainDark);
+  --link-visited-color:     var(--mainDarkest);
 }
 
 body.dark {
-  --linksNoUnderline:            var(--mainLightest);
-  --linksNoUnderlineVisited:     var(--mainLight);
+  --link-color:            var(--mainLightest);
+  --link-visited-color:     var(--mainLight);
 }
diff --git a/assets/css/custom-props/_erlang.css b/assets/css/custom-props/_erlang.css
@@ -8,11 +8,11 @@
   --searchBarFocusColor:  hsl(0, 100%, 50%);
   --searchBarBorderColor: rgb(255, 71, 71, 0.1);
 
-  --linksNoUnderline:            #0969da;
-  --linksNoUnderlineVisited:     #085fc4;
+  --link-color:            #0969da;
+  --link-visited-color:     #085fc4;
 }
 
 body.dark {
-  --linksNoUnderline:            #71b7ff;
-  --linksNoUnderlineVisited:     #65a4e5;
+  --link-color:            #71b7ff;
+  --link-visited-color:     #d0adef;
 }
diff --git a/assets/css/custom-props/theme-dark.css b/assets/css/custom-props/theme-dark.css
@@ -5,11 +5,6 @@ body.dark {
   --textHeaders:                 var(--gray100);
   --textDetailAccent:            var(--mainLight);
   --textDetailBackground:        var(--gray700);
-  --textFooter:                  var(--gray300);
-
-  --links:                       var(--gray100);
-  --linksVisited:                var(--gray100);
-  --linksDecoration:             var(--gray450);
 
   --iconAction:                  var(--coldGray-lightened-10);
   --iconActionHover:             var(--white);
diff --git a/assets/css/custom-props/theme-light.css b/assets/css/custom-props/theme-light.css
@@ -5,11 +5,6 @@
   --textHeaders:                 var(--gray900);
   --textDetailAccent:            var(--mainLight);
   --textDetailBackground:        var(--coldGrayFaint);
-  --textFooter:                  var(--gray700);
-
-  --links:                       var(--black);
-  --linksVisited:                var(--black);
-  --linksDecoration:             var(--gray450);
 
   --iconAction:                  var(--coldGray);
   --iconActionHover:             var(--gray800);
diff --git a/assets/css/search.css b/assets/css/search.css
@@ -58,11 +58,11 @@
 
 #search .result-id a {
   text-decoration: none;
+  color: var(--link-color);
   transition: var(--transition-colors);
-  color: var(--links);
 }
 #search .result-id a:is(:visited, :active, :focus) {
-  color: var(--linksVisited);
+  color: var(--link-visited-color);
 }
 #search .result-id a:hover {
   color: var(--main);

Original file line number	Diff line number	Diff line change
`@@ -29,6 +29,10 @@`
`29`	`29`	`white-space: nowrap;`
`30`	`30`	`}`
`31`	`31`
	`32`	`+.content-inner .bottom-actions .bottom-actions-button .title {`
	`33`	`+ color: var(--textHeaders);`
	`34`	`+}`
	`35`	`+`
`32`	`36`	`.content-inner .bottom-actions .bottom-actions-button[rel="prev"] {`
`33`	`37`	`text-align: start;`
`34`	`38`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,12 +1,12 @@`
`1`	`1`	`.content-inner.content-inner :is(a:has(code, img), pre a) {`
`2`		`- color: var(--linksNoUnderline);`
	`2`	`+ color: var(--link-color);`
`3`	`3`	`text-shadow: none;`
`4`	`4`	`text-decoration: none;`
`5`	`5`	`background-image: none;`
`6`	`6`	`}`
`7`	`7`
`8`	`8`	`.content-inner.content-inner :is(a:has(code, img), pre a):is(:visited, :active, :focus, :hover) {`
`9`		`- color: var(--linksNoUnderlineVisited);`
	`9`	`+ color: var(--link-visited-color);`
`10`	`10`	`}`
`11`	`11`
`12`	`12`	`.content-inner code {`
Original file line number	Diff line number	Diff line change
`@@ -80,13 +80,12 @@`
`80`	`80`	`}`
`81`	`81`
`82`	`82`	`.content-inner :is(a, .a-main) {`
`83`		`- color: var(--links);`
	`83`	`+ color: var(--link-color);`
`84`	`84`	`text-decoration: underline;`
`85`		`- text-decoration-color: var(--linksDecoration);`
`86`	`85`	`text-decoration-skip-ink: auto;`
`87`	`86`	`}`
`88`	`87`	`.content-inner :is(a:visited, .a-main:visited) {`
`89`		`- color: var(--linksVisited);`
	`88`	`+ color: var(--link-visited-color);`
`90`	`89`	`}`
`91`	`90`
`92`	`91`	`.content-inner .icon-action {`
Original file line number	Diff line number	Diff line change
`@@ -8,11 +8,11 @@`
`8`	`8`	`--searchBarFocusColor: #8E7CE6;`
`9`	`9`	`--searchBarBorderColor: rgba(142, 124, 230, 0.25);`
`10`	`10`
`11`		`- --linksNoUnderline: var(--mainDark);`
`12`		`- --linksNoUnderlineVisited: var(--mainDarkest);`
	`11`	`+ --link-color: var(--mainDark);`
	`12`	`+ --link-visited-color: var(--mainDarkest);`
`13`	`13`	`}`
`14`	`14`
`15`	`15`	`body.dark {`
`16`		`- --linksNoUnderline: var(--mainLightest);`
`17`		`- --linksNoUnderlineVisited: var(--mainLight);`
	`16`	`+ --link-color: var(--mainLightest);`
	`17`	`+ --link-visited-color: var(--mainLight);`
`18`	`18`	`}`
Original file line number	Diff line number	Diff line change
`@@ -8,11 +8,11 @@`
`8`	`8`	`--searchBarFocusColor: hsl(0, 100%, 50%);`
`9`	`9`	`--searchBarBorderColor: rgb(255, 71, 71, 0.1);`
`10`	`10`
`11`		`- --linksNoUnderline: #0969da;`
`12`		`- --linksNoUnderlineVisited: #085fc4;`
	`11`	`+ --link-color: #0969da;`
	`12`	`+ --link-visited-color: #085fc4;`
`13`	`13`	`}`
`14`	`14`
`15`	`15`	`body.dark {`
`16`		`- --linksNoUnderline: #71b7ff;`
`17`		`- --linksNoUnderlineVisited: #65a4e5;`
	`16`	`+ --link-color: #71b7ff;`
	`17`	`+ --link-visited-color: #d0adef;`
`18`	`18`	`}`
Original file line number	Diff line number	Diff line change
`@@ -58,11 +58,11 @@`
`58`	`58`
`59`	`59`	`#search .result-id a {`
`60`	`60`	`text-decoration: none;`
	`61`	`+ color: var(--link-color);`
`61`	`62`	`transition: var(--transition-colors);`
`62`		`- color: var(--links);`
`63`	`63`	`}`
`64`	`64`	`#search .result-id a:is(:visited, :active, :focus) {`
`65`		`- color: var(--linksVisited);`
	`65`	`+ color: var(--link-visited-color);`
`66`	`66`	`}`
`67`	`67`	`#search .result-id a:hover {`
`68`	`68`	`color: var(--main);`