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 @@ -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 */ -