summaryrefslogtreecommitdiff
path: root/lib/rdoc/generator
diff options
context:
space:
mode:
authorStan Lo <[email protected]>2024-10-24 06:36:23 +0800
committergit <[email protected]>2024-10-23 22:36:27 +0000
commit60c0c324b207797ae2aa82e107a6a570aabb00bc (patch)
tree44bbb77eee806a63a8b7171e8f58aa59eaa01e1f /lib/rdoc/generator
parent60d84354182c77cbd3d52fcd5387f434e12c2dfb (diff)
[ruby/rdoc] Red-based darkfish color scheme
(https://github.com/ruby/rdoc/pull/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 https://github.com/ruby/rdoc/commit/f69dc470ac
Diffstat (limited to 'lib/rdoc/generator')
-rw-r--r--lib/rdoc/generator/template/darkfish/css/rdoc.css429
1 files 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 <[email protected]>
@@ -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 */
-
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-18 00:40:49 +0000