rdoc-babel 1.2.1 → 1.4.1

data/lib/rdoc/generator/ruby-lang/rdoc.css

@@ -1,4 +1,18 @@
 
+:root {
+  --default-font: "Noto Sans", Verdana, Geneva, Arial, Helvetica, sans-serif;
+  --heading-font: Georgia, Palatino, "Times New Roman", Times, serif;
+  --fixed-font: Consolas, Monaco, "Lucida Console", monospace;
+  --link-color: #00C;  /* less aggressive than pure blue */
+  --link-hover-background: #ffa;  /* pale yellow */
+  --link-to-non-documented-color: #555;  /* grey */
+  --index-background: #f5f5f5;  /* pale grey */
+  --pre-background: #f8f8f8;  /* very pale grey */
+  --code-background: #f4f4f4;  /* pale grey */
+  --current-index-link-color: firebrick;
+  --current-index-link-background: #fcfcfc;
+}
+
 /*
  * ===============
  *  General reset
@@ -8,7 +22,7 @@
 * { padding: 0; margin: 0; }
 
 body {
-  font-family: "Noto Sans", Verdana, Geneva, Arial, Helvetica, sans-serif;
+  font-family: var(--default-font);
   background-color: white;
   color: black;
   font-size: 10pt;
@@ -23,6 +37,11 @@ td {
   padding-right: 1ex;
 }
 
+blockquote {
+  border-left: 2px solid silver;
+  padding-left: 12px;
+}
+
 ul { margin-left: 1.5em; }
 li { margin-top: 0.5ex; }
 
@@ -31,12 +50,12 @@ ol li { margin-top: 1em; }
 
 /* label lists: classic DT/DD */
 
-.label-list dt {
+.label-list > dt {
   margin-top: 1ex;
   font-weight: bold;
 }
-.label-list dt code { font-size: 100%; }
-.label-list dd { margin-left: 2em; }
+.label-list > dt > code { font-size: 100%; }
+.label-list > dd { margin-left: 2em; }
 
 /* note lists: DT and DD on same row, no space between rows */
 
@@ -45,10 +64,10 @@ dl.note-list {
   grid-template-columns: max-content auto;
   margin-left: 1ex;
 }
-dl.note-list dt { grid-column-start: 1; }
-dl.note-list dd { grid-column-start: 2; margin-left: 2ex; }
-dl.note-list dd p { margin-top: 0; }
-dl.note-list dd pre {
+dl.note-list > dt { grid-column-start: 1; }
+dl.note-list > dd { grid-column-start: 2; margin-left: 2ex; }
+dl.note-list > dd > p { margin-top: 0; }
+dl.note-list > dd > pre {
   margin-top: 2px;
   padding-top: 0.5ex;
   padding-bottom: 0.5ex;
@@ -72,17 +91,17 @@ hr {
 }
 
 a {
-  color: #00C; /* less aggressive than pure blue */
+  color: var(--link-color);
   text-decoration: none;
 }
 
 a:hover {
-  background-color: #ffa; /* pale yellow */
+  background-color: var(--link-hover-background);
   padding-bottom: 2px;
 }
 
 .nodoc a {
-  color: #555;
+  color: var(--link-to-non-documented-color);
 }
 
 /* banner colors */
@@ -93,6 +112,42 @@ a:hover {
   background: linear-gradient(to right,  #164270,  #77a1d1);
 }
 
+/*
+ * ===============
+ *  General Layout
+ * ===============
+ */
+
+body {
+  display: grid;
+  grid-template-columns: auto 1fr;
+}
+
+#left-container {
+  position: sticky;
+  top: 0;
+  width: 20vw;
+  height: 100vh;
+  overflow: hidden;
+  border-right: 2px solid silver;
+}
+
+#left-frame {
+  width: 100%;
+  height: 100vh;
+  border: none;
+}
+
+#resizer {
+  position: absolute;
+  right: -5px;
+  top: 0;
+  width: 10px;
+  height: 100%;
+  cursor: ew-resize;
+  z-index: 9999;
+}
+
 /*
  * =============
  *  Index files
@@ -105,11 +160,14 @@ a:hover {
 }
 
 body.index {
-  background-color: #f5f5f5;  /* very pale grey */
+  background-color: var(--index-background);
+  display: unset;
+  height: unset;
+  overflow: auto;
 }
 
 .index .title {
-  font-family: Georgia, Palatino, "Times New Roman", Times, serif;
+  font-family: var(--heading-font);
   padding: 3px 2px 5px 5px; /* TRBL */
 }
 .index .title .text {
@@ -117,7 +175,7 @@ body.index {
   padding-top: 2px; /* TRBL */
 }
 .search-field {
-  font-family: Consolas, Monaco, "Lucida Console", monospace;
+  font-family: var(--fixed-font);
   position: absolute;
   right: 3px;
   padding: 0 1px 2px 2px; /* TRBL */
@@ -149,6 +207,12 @@ body.index {
   padding: 0 0.5ex;
 }
 
+/* current file, class, method */
+.current-main {
+  color: var(--current-index-link-color);
+  background-color: var(--current-index-link-background);
+}
+
 /* the resizers, and a 9-pixel wide area around them */
 #file-class-resizer, #class-method-resizer {
   position: fixed;
@@ -178,12 +242,13 @@ body.index {
  *
  * The structure is:
  *  #header
+ *  nav  (inserted by script)
  *  #documentation
  *
  */
 
 h1, h2, h3, h4, h5, h6 {
-  font-family: Georgia, Palatino, "Times New Roman", Times, serif;
+  font-family: var(--heading-font);
   color: #c61a1a; /* ruby red ;) */
   padding-bottom: 0.5ex;
   font-weight: normal;
@@ -218,14 +283,23 @@ h6 { font-size: 100%; }
 }
 
 code {
-  font-family: Consolas, Monaco, "Lucida Console", monospace;
+  font-family: var(--fixed-font);
   font-size: 100%;
+  background-color: var(--code-background);
+  padding: 1px 5px;
+  border-radius: 4px;
+}
+
+a:hover code {
+  background-color: var(--link-hover-background);
 }
 
 pre {
-  font-family: Consolas, Monaco, "Lucida Console", monospace;
+  font-family: var(--fixed-font);
   padding: 1ex;
-  background-color: #f8f8f8;  /* very pale grey */
+  background-color: var(--pre-background);
+  border-radius: 8px;
+  white-space: break-spaces; /* for too wide text: see Net::HTTP#patch */
 }
 
 #documentation {
@@ -233,6 +307,80 @@ pre {
   overflow: auto;
 }
 
+/* --- toc button and menu */
+
+nav {
+  position: fixed;
+  padding-top: 10px;
+  right: 10px;
+  z-index: 2;
+}
+
+nav p {
+  margin: 0;
+  padding: 0;
+}
+
+nav p.h2 { text-indent: 10px; }
+nav p.h3 { text-indent: 20px; }
+nav p.h4 { text-indent: 30px; }
+nav p.h5 { text-indent: 40px; }
+nav p.h6 { text-indent: 50px; }
+
+#menu-button {
+  float: right;
+  margin-top: 4px;
+  margin-right: 4px;
+
+  cursor: pointer;
+  background-color: #ededed;
+  opacity: 0.5;
+  box-shadow: none;
+  border: 1px solid silver;
+  border-radius: 3px;
+  padding: 3px;
+  padding-bottom: 0;  /* centers the 18px icon vertically */
+}
+
+#menu-button:hover {
+  opacity: 1;
+}
+
+#menu-content {
+  font-size: 9pt;
+  border: 1px solid silver;
+  background-color: white;
+  z-index: 1;
+}
+
+#menu-top {
+  margin: 0;
+  padding: 6pt;
+  border-bottom: 1px solid silver;
+}
+
+#toc-content {
+  margin: 0;
+  padding: 6pt;
+  max-height: 80vh;
+  overflow: auto;
+}
+
+.hidden {
+  display: none;
+}
+
+.icon-hamburger {
+  content: url("images/menu_black_18dp.svg");
+  display: inline-block !important; }
+.icon-cross {
+  content: url("images/close_black_18dp.svg");
+  display: none !important;
+}
+
+.show-close .icon-hamburger { display: none !important; }
+.show-close .icon-cross { display: inline-block !important; }
+
 /* --- top header of main files
 
   div#header
@@ -242,45 +390,25 @@ pre {
     p.header-title
       span.parent
     p#file-info
-      span.displayed
-        span.in-files
-          'In:'
-        span.first-files
-          a (link to 1st files)
-          a#show-all-files  # if more than 2 files
-      span.hidden
-        (same as .displayed, but no #show-all-files id on last a)
-      span#all-files
-        a (link to each file)
-
-  The reason for repeating the spans .displayed & .hidden is to have
-  .displayed to the right, on the same line as the class title if it fits,
-  on the next line otherwise:
-
-    class Object                                  In: object.c
-
-    class VeryLongNameInVeryLongFileName
-                   In: very_long_name_in_very_long_filename.rb
-
-    class VeryLongNameInVeryLongFileName < Object
-                   In: very_long_name_in_very_long_filename.rb
-
-    class VeryLongNameInVeryLongFileNameAndAlsoASuperclass
-      < Object     In: very_long_name_in_very_long_filename.rb
-
-  Because p#file-info has 'white-space: nowrap', .displayed & .hidden
-  are always on the same line.
-
+      span.in-files
+        'In:'
+      span.file-list
+        a (link to 1st files)
+        a#show-all-files  # if more than 2 files
+        span#all-files
+          a (link to each file)
 */
 
 #header {
   padding: 1ex;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: end;
 }
 
 #header p {
   margin: 0;
   padding: 0;
-  display: inline-block;
   white-space: nowrap;
 }
 
@@ -295,7 +423,7 @@ pre {
 }
 
 .header-title {
-  font-family: Georgia, Palatino, "Times New Roman", Times, serif;
+  font-family: var(--heading-font);
   /* vertical-align: middle; */
 }
 
@@ -303,45 +431,37 @@ pre {
 #header .name   { font-size: 170%; }
 #header .parent { font-size: 130%; }
 
-#file-info {
-  font-family: Consolas, Monaco, "Lucida Console", monospace;
+p#file-info {
+  font-family: var(--fixed-font);
   font-size: 90%;
   vertical-align: top;
-}
-.displayed {
-  position: absolute;
-  right: 1ex;
-}
-.hidden {
-  visibility: hidden;
-  display: inline-block;
+  margin-left: auto;
 }
 .in-files {
   vertical-align: top;
 }
-.first-files {
+.file-list {
   display: inline-block;
 }
 #all-files {
   border: 1px solid silver;
   margin-top: 0.5ex;
-  background-color: white;
+  background-color: var(--index-background);
   padding: 1px 0;
   max-height: 30em;
   overflow-x: hidden;
   overflow-y: auto;
   display: none;
   position: absolute;
-  right: 1ex;
 }
 #all-files a {
-  color: #00C;
+  color: var(--link-color);
   padding-top: 0;
   padding-bottom: 0;
 }
 #all-files a:hover {
-  color: #00C;
-  background-color: #ffa;
+  color: var(--link-color);
+  background-color: var(--link-hover-background);
 }
 
 /* --- class page
@@ -412,7 +532,7 @@ pre {
 }
 #method-list li {
   display: inline-block;
-  font-family: Consolas, Monaco, "Lucida Console", monospace;
+  font-family: var(--fixed-font);
   font-size: 100%;
   padding: 2px 0;
 }
@@ -450,7 +570,7 @@ table.classes-modules {
   padding: 0.75ex 0 0 1ex;
 }
 .const-name p, .attr-name p {
-  font-family: Consolas, Monaco, "Lucida Console", monospace;
+  font-family: var(--fixed-font);
   font-size: 100%;
   font-weight: bold;
   padding: 0.3ex 0.5ex 0 0.2ex;  /* top padding to align baselines */
@@ -464,7 +584,7 @@ table.classes-modules {
   visibility: visible;
 }
 .const-value {
-  font-family: Consolas, Monaco, "Lucida Console", monospace;
+  font-family: var(--fixed-font);
   display: none;
 }
 
@@ -479,6 +599,7 @@ table.classes-modules {
 
 .method-detail {
   border: 1px solid #ddd;
+  border-radius: 3px;
   margin-top: 1em;
   padding-bottom: 1ex;
   /* cursor: pointer; */
@@ -496,10 +617,12 @@ table.classes-modules {
 
 .method-heading {
   position: relative;
-  font-family: Consolas, Monaco, "Lucida Console", monospace;
+  font-family: var(--fixed-font);
   font-size: 105%;
   padding: 0.5ex 1ex;
   border-bottom: 1px solid #ddd;
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
   background-color: #eee;
   cursor: pointer;
 }
@@ -580,7 +703,7 @@ pre.method-source-code {
 
 /* requires */
 #file-details li {
-  font-family: Consolas, Monaco, "Lucida Console", monospace;
+  font-family: var(--fixed-font);
 }
 
 /* maybe JS stuff */
@@ -594,7 +717,6 @@ pre.method-source-code {
   -moz-border-radius: 5px;
 }
 
-
 /* debugging section */
 
 #debugging-toggle {