From f69dc470acf8b656f9f2c9f0279585982377920e Mon Sep 17 00:00:00 2001
From: Stan Lo <stan001212@gmail.com>
Date: Thu, 24 Oct 2024 06:36:23 +0800
Subject: [PATCH] Red-based darkfish color scheme (#1191)

* Cleanup rdoc.css

* Use red as the highlight color

* Use the same red as ruby-lang.org

* Make main section links stand out more

* Remove scrollbar styling
---
 .../generator/template/darkfish/css/rdoc.css  | 429 +++++++-----------
 1 file changed, 157 insertions(+), 272 deletions(-)

diff --git a/lib/rdoc/generator/template/darkfish/css/rdoc.css b/lib/rdoc/generator/template/darkfish/css/rdoc.css
index a4e1ef188c..6802a99e3c 100644
--- a/lib/rdoc/generator/template/darkfish/css/rdoc.css
+++ b/lib/rdoc/generator/template/darkfish/css/rdoc.css
@@ -1,5 +1,5 @@
 /*
- * "Darkfish" Rdoc CSS
+ * "Darkfish" RDoc CSS
  * $Id: rdoc.css 54 2009-01-27 01:09:48Z deveiant $
  *
  * Author: Michael Granger <ged@FaerieMUD.org>
@@ -7,22 +7,22 @@
  */
 
 /* vim: ft=css et sw=2 ts=2 sts=2 */
-/* Base Green is: #6C8C22 */
 
 /* 1. Variables and Root Styles */
 :root {
   --sidebar-width: 300px;
-  --primary-color: #2c8c5e;  /* A more muted green */
-  --secondary-color: #246b4b;  /* A darker, muted green */
-  --text-color: #333;
-  --background-color: #f8f9fa;
-  --code-block-background-color: #f0f4f8;
-  --code-block-border-color: #d1d5da;
-  --link-color: #246b4b;  /* A muted teal-green color */
-  --link-hover-color: #25a28a;  /* A slightly brighter teal-green */
-  --border-color: #e0e0e0;
-  --sidebar-text-color: #2c3e50;  /* Dark blue-gray for contrast */
-  --source-code-background-color: #e8f0eb;
+  --highlight-color: #cc342d; /* Reddish color for accents and headings */
+  --secondary-highlight-color: #c83045; /* Darker reddish color for secondary highlights */
+  --text-color: #505050; /* Dark bluish-grey for text */
+  --background-color: #fefefe; /* Near white background */
+  --code-block-background-color: #f6f6f3; /* Slightly darker grey for code blocks */
+  --link-color: #42405F; /* Dark bluish-grey for links */
+  --link-hover-color: var(--highlight-color); /* Reddish color on hover */
+  --border-color: #e0e0e0;; /* General border color */
+  --source-code-toggle-color: var(--secondary-highlight-color);
+  --scrollbar-thumb-hover-background: #505050; /* Hover color for scrollbar thumb */
+  --table-header-background-color: #eceaed;
+  --table-td-background-color: #f5f4f6;
 
   /* Font family variables */
   --font-primary: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
@@ -84,22 +84,26 @@ h4:target,
 h5:target,
 h6:target {
   margin-left: -10px;
-  border-left: 10px solid var(--source-code-background-color);
+  border-left: 10px solid var(--border-color);
+  scroll-margin-top: 1rem;
+}
+
+main .anchor-link:target {
   scroll-margin-top: 1rem;
 }
 
 /* 4. Links */
-:link,
-:visited {
+a {
   color: var(--link-color);
-  text-decoration: none;
   transition: color 0.3s ease;
 }
 
-:link:hover,
-:visited:hover {
+a:hover {
+  color: var(--link-hover-color);
+}
+
+a code:hover {
   color: var(--link-hover-color);
-  text-decoration: underline;
 }
 
 /* 5. Code and Pre */
@@ -107,16 +111,23 @@ code,
 pre {
   font-family: var(--font-code);
   background-color: var(--code-block-background-color);
-  border: 1px solid var(--code-block-border-color);
+  border: 1px solid var(--border-color);
   border-radius: 6px;
   padding: 16px;
   overflow-x: auto;
-  font-size: 15px;  /* Increased from 14px */
-  line-height: 1.5;  /* Slightly increased for better readability with larger font */
-  margin: 1em 0;  /* Add some vertical margin */
+  font-size: 15px;
+  line-height: 1.5;
+  margin: 1em 0;
+}
+
+code {
+  background-color: var(--code-block-background-color);
+  padding: 0.1em 0.3em;
+  border-radius: 3px;
+  font-size: 85%;
 }
 
-/* 6. Tables */
+/* Tables */
 table {
   margin: 0;
   border-spacing: 0;
@@ -125,15 +136,15 @@ table {
 
 table tr th, table tr td {
   padding: 0.2em 0.4em;
-  border: 1px solid #ccc;
+  border: 1px solid var(--border-color);
 }
 
 table tr th {
-  background-color: #eceaed;
+  background-color: var(--table-header-background-color);
 }
 
 table tr:nth-child(even) td {
-  background-color: #f5f4f6;
+  background-color: var(--table-td-background-color);
 }
 
 /* 7. Navigation and Sidebar */
@@ -146,12 +157,12 @@ nav {
   bottom: 0;
   left: 0;
   width: var(--sidebar-width);
-  background: var(--background-color);
+  background: var(--background-color); /* It needs an explicit background for toggling narrow screens */
   overflow-y: auto;
   z-index: 10;
   display: flex;
   flex-direction: column;
-  color: var(--sidebar-text-color);
+  color: var(--text-color);
 }
 
 nav[hidden] {
@@ -160,7 +171,11 @@ nav[hidden] {
 
 nav footer {
   padding: 1em;
-  border-top: 1px solid #ccc;
+  border-top: 1px solid var(--border-color);
+}
+
+nav footer a {
+  color: var(--secondary-highlight-color);
 }
 
 nav .nav-section {
@@ -168,20 +183,20 @@ nav .nav-section {
   padding: 0 1em;
 }
 
-nav h2 {
+nav h2, nav h3 {
   margin: 0 0 0.5em;
   padding: 0.5em 0;
-  font-size: 1.2em;
-  color: var(--text-color);
+  color: var(--highlight-color);
   border-bottom: 1px solid var(--border-color);
 }
 
+nav h2 {
+  font-size: 1.2em;
+}
+
 nav h3,
 #table-of-contents-navigation {
-  margin: 0;
-  padding: 0.5em 0;
   font-size: 1em;
-  color: var(--text-color);
 }
 
 nav ul,
@@ -214,6 +229,7 @@ nav a {
 }
 
 nav a:hover {
+  color: var(--link-hover-color);
   text-decoration: underline;
 }
 
@@ -274,6 +290,13 @@ main {
   }
 }
 
+main h1[class] {
+  margin-top: 0;
+  margin-bottom: 1em;
+  font-size: 2.5em;
+  color: var(--highlight-color);
+}
+
 main h1,
 main h2,
 main h3,
@@ -281,6 +304,7 @@ main h4,
 main h5,
 main h6 {
   font-family: var(--font-heading);
+  color: var(--highlight-color);
 }
 
 @media (min-width: 1024px) {
@@ -289,12 +313,7 @@ main h6 {
   }
 }
 
-#validator-badges {
-  margin: 1em 1em 2em;
-  font-size: smaller;
-}
-
-/* 9. Search */
+/* Search */
 #search-section {
   padding: 1em;
   background-color: var(--background-color);
@@ -315,20 +334,19 @@ main h6 {
   font-size: 14px;
   outline: none;
   transition: border-color 0.3s ease;
-  background-color: var(--background-color);
+  color: var(--text-color);
 }
 
 #search-field:focus {
-  border-color: var(--primary-color);
+  border-color: var(--highlight-color);
 }
 
 #search-field::placeholder {
   color: var(--text-color);
-  opacity: 0.6;
 }
 
 #search-field-wrapper::before {
-  content: "\1F50D";  /* Unicode for magnifying glass */
+  content: "\1F50D";
   position: absolute;
   left: 0.75em;
   top: 50%;
@@ -338,170 +356,110 @@ main h6 {
   opacity: 0.6;
 }
 
-/* 10. Utility Classes */
-.hide { display: none !important; }
-.initially-hidden { display: none; }
-
-/* 11. Media Queries */
-@media (min-width: 1024px) {
-  /* Styles for larger screens */
-}
-
-/* 12. Print Styles */
-@media print {
-  /* Print-specific styles */
-}
-
-/* 13. Syntax Highlighting */
-.ruby-constant   { color: #0366d6; }  /* Bright blue for constants */
-.ruby-keyword    { color: #d73a49; }  /* Red for keywords */
-.ruby-ivar       { color: #e36209; }  /* Orange for instance variables */
-.ruby-operator   { color: #005cc5; }  /* Dark blue for operators */
-.ruby-identifier { color: #24292e; }  /* Dark gray for identifiers */
-.ruby-node       { color: #22863a; }  /* Green for interpolation */
-.ruby-comment    { color: #6a737d; }  /* Gray for comments */
-.ruby-regexp     { color: #032f62; }  /* Navy for regular expressions */
-.ruby-value      { color: #005cc5; }  /* Dark blue for numeric values */
-.ruby-string     { color: #22863a; }  /* Green for strings */
-
-code {
-  background-color: #f0f4f8;  /* Match pre background */
-  padding: 0.2em 0.4em;
-  border-radius: 3px;
-  font-size: 85%;
+/* Search Results */
+#search-results {
+  font-family: var(--font-primary);
+  font-weight: 300;
 }
 
-em {
-  text-decoration-color: rgba(52, 48, 64, 0.25);
-  text-decoration-line: underline;
-  text-decoration-style: dotted;
+#search-results .search-match {
+  font-family: var(--font-heading);
+  font-weight: normal;
 }
 
-strong,
-em {
-  background-color: rgba(158, 178, 255, 0.1);
+#search-results .search-selected {
+  background: var(--code-block-background-color);
+  border-bottom: 1px solid transparent;
 }
 
-/* 14. Specific Component Styles */
-.table-of-contents ul {
-  margin: 1em;
+#search-results li {
   list-style: none;
+  border-bottom: 1px solid var(--border-color);
+  margin-bottom: 0.5em;
 }
 
-.table-of-contents ul ul {
-  margin-top: 0.25em;
-}
-
-.table-of-contents ul :link,
-.table-of-contents ul :visited {
-  font-size: 16px;
-}
-
-.table-of-contents li {
-  margin-bottom: 0.25em;
-}
-
-.table-of-contents li .toc-toggle {
-  width: 16px;
-  height: 16px;
-  background: url(../images/add.png) no-repeat;
-}
-
-.table-of-contents li .toc-toggle.open {
-  background: url(../images/delete.png) no-repeat;
-}
-
-main {
-  color: #333;
-}
-
-main > h1:first-child,
-main > h2:first-child,
-main > h3:first-child,
-main > h4:first-child,
-main > h5:first-child,
-main > h6:first-child {
-  margin-top: 0px;
+#search-results li:last-child {
+  border-bottom: none;
+  margin-bottom: 0;
 }
 
-main sup {
-  vertical-align: super;
-  font-size: 0.8em;
+#search-results li p {
+  padding: 0;
+  margin: 0.5em;
 }
 
-main .anchor-link:target {
-  scroll-margin-top: 20px;
+#search-results .search-namespace {
+  font-weight: bold;
 }
 
-/* The heading with the class name */
-main h1[class] {
-  margin-top: 0;
-  margin-bottom: 1em;
-  font-size: 2.5em;
-  color: var(--primary-color);
+#search-results li em {
+  background-color: rgba(224, 108, 117, 0.1);
+  font-style: normal;
 }
 
-main h1 {
-  margin: 1.5em 0 0.5em;
-  font-size: 2.2em;
-  color: var(--secondary-color);
+#search-results pre {
+  margin: 0.5em;
+  font-family: var(--font-code);
 }
 
-main h2 {
-  margin: 1.3em 0 0.5em;
-  font-size: 1.8em;
-  color: var(--secondary-color);
-}
+/* Syntax Highlighting - Gruvbox Light Scheme */
 
-main h3 {
-  margin: 1.2em 0 0.5em;
-  font-size: 1.5em;
-  color: var(--secondary-color);
-}
+.ruby-constant   { color: #AF3A03; }  /* Dark Orange */
+.ruby-keyword    { color: #9D0006; }  /* Dark Red */
+.ruby-ivar       { color: #B57614; }  /* Brown */
+.ruby-operator   { color: #427B58; }  /* Dark Teal */
+.ruby-identifier { color: #076678; }  /* Deep Teal */
+.ruby-node       { color: #8F3F71; }  /* Plum */
+.ruby-comment    { color: #928374; font-style: italic; }  /* Gray */
+.ruby-regexp     { color: #8F3F71; }  /* Plum */
+.ruby-value      { color: #AF3A03; }  /* Dark Orange */
+.ruby-string     { color: #79740E; }  /* Olive */
 
-main h4 {
-  margin: 1.1em 0 0.5em;
-  font-size: 1.3em;
-  color: var(--secondary-color);
+/* Emphasis */
+em {
+  text-decoration-color: rgba(52, 48, 64, 0.25);
+  text-decoration-line: underline;
+  text-decoration-style: dotted;
 }
 
-main h5, main h6 {
-  margin: 1em 0 0.5em;
-  font-size: 1.1em;
-  color: var(--secondary-color);
+strong,
+em {
+  color: var(--highlight-color);
+  background-color: rgba(255, 111, 97, 0.1); /* Light red background for emphasis */
 }
 
+/* Paragraphs */
 main p {
   line-height: 1.5em;
   font-weight: 400;
 }
 
+/* Preformatted Text */
 main pre {
   margin: 1.2em 0.5em;
   padding: 1em;
   font-size: 0.8em;
 }
 
+/* Horizontal Rules */
 main hr {
   margin: 1.5em 1em;
-  border: 2px solid #ddd;
+  border: 2px solid var(--border-color);
 }
 
+/* Blockquotes */
 main blockquote {
   margin: 0 2em 1.2em 1.2em;
   padding-left: 0.5em;
-  border-left: 2px solid #ddd;
-}
-
-main ol,
-main ul {
-  margin: 1em 2em;
+  border-left: 2px solid var(--border-color);
 }
 
+/* Lists */
 main li > p {
-  margin-bottom: 0.5em;
+  margin: 0.5em;
 }
 
+/* Definition Lists */
 main dl {
   margin: 1em 0.5em;
 }
@@ -517,81 +475,58 @@ main dd {
   margin: 0 1em 1em 0.5em;
 }
 
+/* Headers within Main */
 main header h2 {
   margin-top: 2em;
   border-width: 0;
-  border-top: 4px solid #bbb;
+  border-top: 4px solid var(--border-color);
   font-size: 130%;
 }
 
 main header h3 {
   margin: 2em 0 1.5em;
   border-width: 0;
-  border-top: 3px solid #bbb;
+  border-top: 3px solid var(--border-color);
   font-size: 120%;
 }
 
-.documentation-section-title {
-  position: relative;
-}
-.documentation-section-title .section-click-top {
-  position: absolute;
-  top: 6px;
-  left: 12px;
-  font-size: 10px;
-  color: #9b9877;
-  visibility: hidden;
-  padding-left: 0.5px;
-}
-
-.documentation-section-title:hover .section-click-top {
-  visibility: visible;
-}
-
-.constants-list > dl {
-  margin: 1em 0 2em;
-  border: 0;
-}
+/* Utility Classes */
+.hide { display: none !important; }
+.initially-hidden { display: none; }
 
-.constants-list > dl dt {
-  margin-bottom: 0.75em;
-  padding-left: 0;
-  font-family: var(--font-code);
-  font-size: 110%;
+/* Media Queries */
+@media (min-width: 1024px) {
+  /* Styles for larger screens */
+  .table-of-contents main {
+    margin-left: 20em;
+  }
 }
 
-.constants-list > dl dt a {
-  color: inherit;
+@media print {
+  /* Print-specific styles */
 }
 
-.constants-list > dl dd {
-  margin: 0 0 2em 0;
-  padding: 0;
-  color: #666;
+/* Table of Contents */
+.table-of-contents ul {
+  margin: 1em;
+  list-style: none;
 }
 
-.documentation-section h2 {
-  position: relative;
+.table-of-contents ul ul {
+  margin-top: 0.25em;
 }
 
-.documentation-section h2 a {
-  position: absolute;
-  top: 8px;
-  right: 10px;
-  font-size: 12px;
-  color: #9b9877;
-  visibility: hidden;
+.table-of-contents ul :link,
+.table-of-contents ul :visited {
+  font-size: 16px;
 }
 
-.documentation-section h2:hover a {
-  visibility: visible;
+.table-of-contents li {
+  margin-bottom: 0.25em;
 }
 
-/* @group Method Details */
-
+/* Method Details */
 main .method-source-code {
-  /* While this is already invisible through the rule below, this will inform the browser to
-  not consider source code during text searching until it is actually expanded. */
   visibility: hidden;
   max-height: 0;
   overflow: auto;
@@ -602,7 +537,7 @@ main .method-source-code {
 }
 
 main .method-source-code pre {
-  background: var(--source-code-background-color);
+  border-color: var(--source-code-toggle-color);
 }
 
 main .method-source-code.active-menu {
@@ -621,7 +556,7 @@ main .method-detail {
 
 main .method-detail:target {
   margin-left: -10px;
-  border-left: 10px solid var(--source-code-background-color);
+  border-left: 10px solid var(--border-color);
 }
 
 main .method-header {
@@ -633,14 +568,13 @@ main .method-heading {
   font-family: var(--font-code);
   font-size: 110%;
   font-weight: bold;
-  color: var(--text-color);
 }
 
 main .method-heading::after {
   content: '¶';
   position: absolute;
   visibility: hidden;
-  color: var(--secondary-color);
+  color: var(--highlight-color);
   font-size: 0.5em;
 }
 
@@ -651,14 +585,10 @@ main .method-heading:hover::after {
 main .method-controls {
   line-height: 20px;
   float: right;
-  color: var(--secondary-color);
+  color: var(--source-code-toggle-color);
   cursor: pointer;
 }
 
-main .method-alias .method-heading {
-  color: #666;
-}
-
 main .method-description,
 main .aliases {
   margin-top: 0.75em;
@@ -671,6 +601,10 @@ main .aliases {
   cursor: default;
 }
 
+main .aliases a {
+  color: var(--secondary-highlight-color);
+}
+
 main .mixin-from {
   font-size: 80%;
   font-style: italic;
@@ -685,59 +619,12 @@ main #attribute-method-details .method-detail:hover {
   background-color: transparent;
   cursor: default;
 }
+
 main .attribute-access-type {
   text-transform: uppercase;
 }
-/* @end */
-
-/* @end */
-
-/* @group search results */
-#search-results {
-  font-family: var(--font-primary);
-  font-weight: 300;
-}
-
-#search-results .search-match {
-  font-family: var(--font-heading);
-  font-weight: normal;
-}
-
-#search-results .search-selected {
-  background: #e8e8e8;
-  border-bottom: 1px solid transparent;
-}
-
-#search-results li {
-  list-style: none;
-  border-bottom: 1px solid #aaa;
-  margin-bottom: 0.5em;
-}
-
-#search-results li:last-child {
-  border-bottom: none;
-  margin-bottom: 0;
-}
-
-#search-results li p {
-  padding: 0;
-  margin: 0.5em;
-}
-
-#search-results .search-namespace {
-  font-weight: bold;
-}
-
-#search-results li em {
-  background: yellow;
-  font-style: normal;
-}
-
-#search-results pre {
-  margin: 0.5em;
-  font-family: var(--font-code);
-}
 
+/* Responsive Adjustments */
 @media (max-width: 480px) {
   nav {
     width: 100%;
@@ -769,5 +656,3 @@ main .attribute-access-type {
     float: none;
   }
 }
-/* @end */
-