diff --git a/lib/rdoc/generator/template/darkfish/_sidebar_toggle.rhtml b/lib/rdoc/generator/template/darkfish/_sidebar_toggle.rhtml
index 8710d75b48..ed2cbe31a0 100644
--- a/lib/rdoc/generator/template/darkfish/_sidebar_toggle.rhtml
+++ b/lib/rdoc/generator/template/darkfish/_sidebar_toggle.rhtml
@@ -1,3 +1,3 @@
-
+
+ ☰
+
diff --git a/lib/rdoc/generator/template/darkfish/css/rdoc.css b/lib/rdoc/generator/template/darkfish/css/rdoc.css
index b6dd6353ca..a1919357c3 100644
--- a/lib/rdoc/generator/template/darkfish/css/rdoc.css
+++ b/lib/rdoc/generator/template/darkfish/css/rdoc.css
@@ -9,6 +9,7 @@
/* 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 */
@@ -21,10 +22,7 @@
--sidebar-text-color: #2c3e50; /* Dark blue-gray for contrast */
}
-.hide { display: none !important; }
-
-* { padding: 0; margin: 0; }
-
+/* 2. Global Styles */
body {
background: var(--background-color);
font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
@@ -43,6 +41,7 @@ body > :last-child {
width: 100%;
}
+/* 3. Typography */
h1 span,
h2 span,
h3 span,
@@ -84,6 +83,7 @@ h6:target {
border-left: 10px solid #f1edba;
}
+/* 4. Links */
:link,
:visited {
color: var(--link-color);
@@ -98,6 +98,7 @@ h6:target {
text-decoration: underline;
}
+/* 5. Code and Pre */
code,
pre {
font-family: 'Source Code Pro', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
@@ -111,36 +112,7 @@ pre {
margin: 1em 0; /* Add some vertical margin */
}
-/* Syntax highlighting */
-.ruby-constant { color: #005cc5; } /* Blue */
-.ruby-keyword { color: #d73a49; } /* Red */
-.ruby-ivar { color: #e36209; } /* Orange */
-.ruby-operator { color: #005cc5; } /* Blue */
-.ruby-identifier { color: #0f6e81; } /* Darker teal for identifiers */
-.ruby-node { color: #22863a; } /* Green */
-.ruby-comment { color: #6a737d; } /* Gray */
-.ruby-regexp { color: #032f62; } /* Navy */
-.ruby-value { color: #005cc5; } /* Blue */
-.ruby-string { color: #032f62; } /* Navy */
-
-code {
- background-color: #f0f4f8; /* Match pre background */
- padding: 0.2em 0.4em;
- border-radius: 3px;
- font-size: 85%;
-}
-
-em {
- text-decoration-color: rgba(52, 48, 64, 0.25);
- text-decoration-line: underline;
- text-decoration-style: dotted;
-}
-
-strong,
-em {
- background-color: rgba(158, 178, 255, 0.1);
-}
-
+/* 6. Tables */
table {
margin: 0;
border-spacing: 0;
@@ -160,117 +132,126 @@ table tr:nth-child(even) td {
background-color: #f5f4f6;
}
-/* @group Generic Classes */
+/* 7. Navigation and Sidebar */
+nav {
+ font-family: 'Helvetica Neue', Arial, sans-serif;
+ font-size: 16px;
+ border-right: 1px solid var(--border-color);
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ width: var(--sidebar-width);
+ background: var(--sidebar-background, #f8f9fa);
+ overflow-y: auto;
+ z-index: 10;
+ display: flex;
+ flex-direction: column;
+ color: var(--sidebar-text-color);
+}
-.initially-hidden {
+nav[hidden] {
display: none;
}
-#search-field {
- width: 98%;
- background: white;
- border: none;
- height: 1.5em;
- -webkit-border-radius: 4px;
- -moz-border-radius: 4px;
- border-radius: 4px;
- text-align: left;
-}
-#search-field:focus {
- background: #f1edba;
-}
-#search-field:-moz-placeholder,
-#search-field::-webkit-input-placeholder {
- font-weight: bold;
- color: #666;
+nav footer {
+ padding: 1em;
+ border-top: 1px solid #ccc;
}
-.missing-docs {
- font-size: 120%;
- background: white url(../images/wrench_orange.png) no-repeat 4px center;
- color: #ccc;
- line-height: 2em;
- border: 1px solid #d00;
- opacity: 1;
- padding-left: 20px;
- text-indent: 24px;
- letter-spacing: 3px;
- font-weight: bold;
- -webkit-border-radius: 5px;
- -moz-border-radius: 5px;
+nav .nav-section {
+ margin-top: 1em;
+ padding: 0 1em;
}
-.target-section {
- border: 2px solid #dcce90;
- border-left-width: 8px;
- padding: 0 1em;
- background: #fff3c2;
+nav h2 {
+ margin: 0 0 0.5em;
+ padding: 0.5em 0;
+ font-size: 1.2em;
+ color: var(--primary-color, #333333);
+ border-bottom: 1px solid var(--border-color);
}
-/* @end */
+nav h3,
+#table-of-contents-navigation {
+ margin: 0;
+ padding: 0.5em 0;
+ font-size: 1em;
+ color: var(--text-color, #333333);
+}
-/* @group Index Page, Standalone file pages */
-.table-of-contents ul {
- margin: 1em;
+nav ul,
+nav dl,
+nav p {
+ padding: 0;
list-style: none;
+ margin: 0.5em 0;
}
-.table-of-contents ul ul {
- margin-top: 0.25em;
+nav ul li {
+ margin-bottom: 0.3em;
}
-.table-of-contents ul :link,
-.table-of-contents ul :visited {
- font-size: 16px;
+nav ul ul {
+ padding-left: 1em;
}
-.table-of-contents li {
- margin-bottom: 0.25em;
+nav ul ul ul {
+ padding-left: 1em;
}
-.table-of-contents li .toc-toggle {
- width: 16px;
- height: 16px;
- background: url(../images/add.png) no-repeat;
+nav ul ul ul ul {
+ padding-left: 1em;
}
-.table-of-contents li .toc-toggle.open {
- background: url(../images/delete.png) no-repeat;
+nav a {
+ color: var(--link-color, #0366d6);
+ text-decoration: none;
}
-/* @end */
+nav a:hover {
+ text-decoration: underline;
+}
-/* @group Top-Level Structure */
+#navigation-toggle {
+ z-index: 1000;
+ font-size: 2em;
+ position: absolute;
+}
-nav {
- font-family: 'Helvetica Neue', Arial, sans-serif;
- font-size: 16px; /* Increased from 14px */
- border-right: 1px solid var(--border-color);
- position: fixed;
- top: 0;
- bottom: 0;
- overflow-y: auto;
- z-index: 10;
+#navigation-toggle[aria-expanded="true"] {
+ top: 10px;
+ left: 250px;
+}
- /* Layout */
- width: var(--sidebar-width);
- background: white;
- box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
+#navigation-toggle[aria-expanded="false"] {
+ top: 10px;
+ left: 20px;
+}
- display: flex;
- flex-direction: column;
- color: var(--sidebar-text-color);
+nav ul li details {
+ position: relative;
+ padding-right: 1.5em; /* Add space for the marker on the right */
}
-nav[hidden] {
- display: none;
+nav ul li details > summary {
+ list-style: none; /* Remove the default marker */
}
-nav footer {
- padding: 1em;
- border-top: 1px solid #ccc;
+nav ul li details > summary::after {
+ content: '▶'; /* Unicode right-pointing triangle */
+ position: absolute;
+ font-size: 0.8em;
+ top: 0.3em;
+ padding-left: 0.2em;
+ transition: transform 0.2s ease;
+}
+
+nav ul li details[open] > summary::after {
+ transform: rotate(90deg); /* Rotate the triangle when open */
}
+/* 8. Main Content */
main {
flex: 1;
display: block;
@@ -308,153 +289,123 @@ main h6 {
font-size: smaller;
}
-/* @end */
-
-/* @group navigation */
-nav {
- margin-bottom: 1em;
-}
-
-nav .nav-section {
- margin-top: 2em;
- border-top: 2px solid #aaa;
- font-size: 90%;
- flex: 1;
-}
-
-nav h2 {
- margin: 0;
- padding: 2px 8px 2px 8px;
- background-color: #e8e8e8;
- color: #555;
- font-size: 125%;
- text-align: center;
-}
-
-nav h3,
-#table-of-contents-navigation {
- margin: 0;
- padding: 2px 8px 2px 8px;
- text-align: right;
- background-color: #e8e8e8;
- color: #555;
+/* 9. Search */
+#search-section {
+ padding: 1em;
+ background-color: var(--sidebar-background, #f8f9fa);
+ border-bottom: 1px solid var(--border-color);
}
-nav ul,
-nav dl,
-nav p {
- padding: 4px 8px 0;
- list-style: none;
+#search-field-wrapper {
+ position: relative;
+ display: flex;
+ align-items: center;
}
-.navigation-toggle {
- position: fixed;
- left: 4px;
- z-index: 100;
-
- background: transparent;
- border: none;
- cursor: pointer;
- padding: 4px;
- font-size: 24px;
-}
-.navigation-toggle[aria-expanded="true"] {
- left: 260px;
+#search-field {
+ width: 100%;
+ padding: 0.5em 1em 0.5em 2em;
+ border: 1px solid var(--border-color);
+ border-radius: 20px;
+ font-size: 14px;
+ outline: none;
+ transition: border-color 0.3s ease;
+ background-color: var(--background-color, #ffffff);
}
-/* Adds a suble gradient to help the toggle stand out from the background */
-.navigation-toggle::before {
- content: "";
- background: linear-gradient(180deg, rgba(250,250,250,1) 40%, rgba(250,250,250,0.8) 70%, rgba(250,250,250,0) 100%);
- display: block;
- z-index: -1;
- pointer-events: none;
- position: fixed;
- top: 0;
- height: 50px;
- width: 100vw;
+#search-field:focus {
+ border-color: var(--primary-color, #333333);
}
-.navigation-toggle[aria-expanded="true"]::before {
- height: 0;
+#search-field::placeholder {
+ color: var(--text-color, #333333);
+ opacity: 0.6;
}
-#project-navigation .nav-section {
- margin: 0;
- border-top: 0;
+#search-field-wrapper::before {
+ content: "\1F50D"; /* Unicode for magnifying glass */
+ position: absolute;
+ left: 0.75em;
+ top: 50%;
+ transform: translateY(-50%);
+ font-size: 14px;
+ color: var(--text-color, #333333);
+ opacity: 0.6;
}
-#home-section h2 {
- text-align: center;
-}
+/* 10. Utility Classes */
+.hide { display: none !important; }
+.initially-hidden { display: none; }
-#table-of-contents-navigation {
- font-size: 1.2em;
- font-weight: bold;
- text-align: center;
+/* 11. Media Queries */
+@media (min-width: 1024px) {
+ /* Styles for larger screens */
}
-#search-section {
- margin-top: 0;
- border-top: 0;
+/* 12. Print Styles */
+@media print {
+ /* Print-specific styles */
}
-#search-field-wrapper {
- border-top: 1px solid #aaa;
- border-bottom: 1px solid #aaa;
- padding: 3px 8px;
- background-color: #e8e8e8;
- color: #555;
-}
+/* 13. Syntax Highlighting */
+.ruby-constant { color: #005cc5; }
+.ruby-keyword { color: #d73a49; }
+.ruby-ivar { color: #e36209; }
+.ruby-operator { color: #005cc5; }
+.ruby-identifier { color: #0f6e81; }
+.ruby-node { color: #22863a; }
+.ruby-comment { color: #6a737d; }
+.ruby-regexp { color: #032f62; }
+.ruby-value { color: #005cc5; }
+.ruby-string { color: #032f62; }
-ul.link-list li {
- white-space: nowrap;
- line-height: 1.4em;
+code {
+ background-color: #f0f4f8; /* Match pre background */
+ padding: 0.2em 0.4em;
+ border-radius: 3px;
+ font-size: 85%;
}
-ul.link-list .type {
- font-size: 8px;
- text-transform: uppercase;
- color: white;
- background: #969696;
- padding: 2px 4px;
- -webkit-border-radius: 5px;
+em {
+ text-decoration-color: rgba(52, 48, 64, 0.25);
+ text-decoration-line: underline;
+ text-decoration-style: dotted;
}
-dl.note-list dt {
- float: left;
- margin-right: 1em;
+strong,
+em {
+ background-color: rgba(158, 178, 255, 0.1);
}
-.calls-super {
- background: url(../images/arrow_up.png) no-repeat right center;
+/* 14. Specific Component Styles */
+.table-of-contents ul {
+ margin: 1em;
+ list-style: none;
}
-.nav-section details > summary {
- display: block;
+.table-of-contents ul ul {
+ margin-top: 0.25em;
}
-.nav-section details > summary::-webkit-details-marker {
- display: none;
+.table-of-contents ul :link,
+.table-of-contents ul :visited {
+ font-size: 16px;
}
-.nav-section details > summary::before {
- content: "";
+.table-of-contents li {
+ margin-bottom: 0.25em;
}
-.nav-section details > summary::after {
- content: "\25B6"; /* BLACK RIGHT-POINTING TRIANGLE */
- font-size: 0.8em;
- margin-left: 0.4em;
+.table-of-contents li .toc-toggle {
+ width: 16px;
+ height: 16px;
+ background: url(../images/add.png) no-repeat;
}
-.nav-section details[open] > summary::after {
- content: "\25BD"; /* WHITE DOWN-POINTING TRIANGLE */
+.table-of-contents li .toc-toggle.open {
+ background: url(../images/delete.png) no-repeat;
}
-/* @end */
-
-/* @group Documentation Section */
main {
color: #333;
}