add style for code snippet show-hide button

Author: fanixus96

docs/_assets/css/color-brewer.css

@@ -6,14 +6,14 @@ Ported by Fabrício Tavares de Oliveira
 
 */
 
-.hljs {
+/* .hljs {
   background: transparent;
 }
 
 .hljs,
 .hljs-subst {
   color: #000;
-}
+} */
 
 /*.hljs-string,
 .hljs-meta,
@@ -24,7 +24,7 @@ Ported by Fabrício Tavares de Oliveira
   color: #756bb1;
 }*/
 
-.hljs-comment,
+/* .hljs-comment,
 .hljs-quote {
   color: #636363;
 }
@@ -40,7 +40,7 @@ Ported by Fabrício Tavares de Oliveira
 .hljs-deletion,
 .hljs-variable {
   color: #88f;
-}
+} */
 
 /*.hljs-keyword,
 .hljs-selector-tag,
@@ -57,10 +57,10 @@ Ported by Fabrício Tavares de Oliveira
   color: #3182bd;
 }*/
 
-.hljs-emphasis {
+/* .hljs-emphasis {
   font-style: italic;
 }
 
 .hljs-attribute {
   color: #e6550d;
-}
+} */

docs/_layouts/main.html

@@ -6,26 +6,4 @@
   - css/content-contributors.css
 ---
 
-<div id="content-wrapper">
-  {{ content }}
-  <div id="footer" class="body-small mobile-footer">
-    <div class="left-container">"Generated with"</div>
-    <div class="right-container">
-      <a href="https://github.com/lampepfl/dotty">
-        <button class="icon-button gh"></button>
-      </a>
-      <a href="https://twitter.com/scala_lang">
-        <button class="icon-button twitter"></button>
-      </a>
-      <a href="https://discord.com/invite/scala">
-        <button class="icon-button discord"></button>
-      </a>
-      <a href="https://gitter.im/scala/scala">
-        <button class="icon-button gitter"></button>
-      </a>
-      <div class="text">"© 2002-2021 · LAMP/EPFL"</div>
-    </div>
-    <div cls="text-mobile"></div>
-    "© 2002-2021 · LAMP/EPFL"
-  </div>
-</div>
+<div id="content-wrapper">{{ content }}</div>

scaladoc-js/common/css/code-snippets.css

@@ -1,14 +1,14 @@
 /* Snippets */
 
-.snippet {
+/* .snippet {
   position: relative;
   background: var(--code-bg);
   margin: 1em 0px;
   border-radius: 2px;
   box-shadow: 0 0 2px #888;
   cursor: default;
-}
-.snippet-error {
+} */
+/* .snippet-error {
   border-bottom: 2px dotted red;
 }
 .snippet-warn {
@@ -19,17 +19,17 @@
 }
 .snippet-debug {
   border-bottom: 2px dotted pink;
-}
+} */
 
-.snippet .snippet-meta {
+/* .snippet .snippet-meta {
   border-top: 2px solid var(--inactive-bg);
   color: var(--inactive-fg);
   margin-top: 10px;
   padding-top: 10px;
   font-size: 0.75em;
-}
+} */
 
-.snippet-meta .snippet-label {
+/* .snippet-meta .snippet-label {
   font-weight: bold;
 }
 
@@ -319,4 +319,4 @@ input:checked + .slider:before {
       --slider-width: 24px;
       --slider-height: 10px;
   }
-}
+} */

scaladoc-js/common/src/code-snippets/CodeSnippets.scala

@@ -40,10 +40,9 @@ class CodeSnippets:
     def createShowHideButton(toggleRoot: html.Element) = {
       div(cls := "snippet-showhide")(
         label(cls := "snippet-showhide-button")(
-          input("type" := "checkbox").tap(_.addEventListener("change", _ => toggleHide(toggleRoot))),
-          span(cls := "slider")
+          input("type" := "checkbox", id := "snippet-showhide").tap(_.addEventListener("change", _ => toggleHide(toggleRoot))),
+          label(id := "snippet-showhide-label", "for" := "snippet-showhide")
         ),
-        p("Show collapsed lines")
       )
     }
 

scaladoc/resources/dotty_res/scripts/ux.js

@@ -121,7 +121,7 @@ window.addEventListener("DOMContentLoaded", () => {
   const sideMenuToggler = document.getElementById("mobile-sidebar-toggle");
   sideMenuToggler.addEventListener('click', _e => {
     document.getElementById("leftColumn").classList.toggle("show")
-    document.getElementById("content-wrapper").classList.toggle("sidebar-shown")
+    document.getElementById("content").classList.toggle("sidebar-shown")
     document.getElementById("toc").classList.toggle("sidebar-shown")
     sideMenuToggler.classList.toggle("menu-shown")
   })

scaladoc/resources/dotty_res/styles/nord-light.css

@@ -1,5 +1,5 @@
 /* Theme inspired by nordtheme. The colors have been darkened to work on light backgrounds. */
-:root {
+/* :root {
   --hljs-bg: var(--code-bg);
   --hljs-fg: var(--code-fg);
   --hljs-comment: #90A1C1;
@@ -75,4 +75,4 @@ pre, .hljs {
 }
 .hljs-attribute {
   color: var(--hljs-type);
-}
+} */

scaladoc/resources/dotty_res/styles/theme/components/code-snippet.css

@@ -0,0 +1,118 @@
+.snippet {
+  position: relative;
+  flex-direction: row;
+  gap: calc(2 * var(--base-spacing));
+  padding: calc(3 * var(--base-spacing)) calc(3 * var(--base-spacing))
+    calc(3 * var(--base-spacing)) calc(1 * var(--base-spacing));
+  background-color: var(--action-primary-background-default-solid);
+  border: 1px solid transparent;
+  color: var(--text-primary);
+}
+
+.snippet pre {
+  margin: 0;
+}
+
+.snippet:hover {
+  background-color: var(--action-primary-background-hover);
+  border: 1px solid var(--border-default);
+}
+
+.snippet .copy-button {
+  display: none;
+  position: absolute;
+  top: calc(3 * var(--base-spacing));
+  right: calc(3 * var(--base-spacing));
+}
+
+#snippet-showhide {
+  display: none;
+}
+
+.snippet-showhide {
+  margin-top: calc(2 * var(--base-spacing));
+}
+
+#snippet-showhide-label::before {
+  content: "Show all";
+  color: var(--action-primary-content-default);
+  text-decoration: none;
+  cursor: pointer;
+}
+
+#snippet-showhide-label:hover::before {
+  color: var(--action-primary-content-hover);
+}
+
+#snippet-showhide-label:active::before {
+  color: var(--action-primary-content-active);
+}
+
+#snippet-showhide:checked + #snippet-showhide-label::before {
+  content: "Hide";
+}
+
+.snippet:hover {
+  background-color: var(--action-primary-background-hover);
+  border: 1px solid var(--border-default);
+}
+
+.snippet:hover .copy-button {
+  display: block;
+}
+
+.hljs-keyword {
+  color: var(--code-method-highlighting-keyword);
+}
+
+.hljs-comment {
+  color: var(--code-syntax-highlighting-comment);
+}
+
+.hljs-quote {
+  color: var(--code-syntax-highlighting-quote);
+}
+
+.hljs-line-number {
+  color: var(--code-syntax-highlighting-line-number);
+}
+
+.hljs-title {
+  color: var(--code-syntax-highlighting-title);
+}
+
+.hljs-keyword {
+  color: var(--code-syntax-highlighting-keyword);
+}
+
+.hljs-code-fg {
+  color: var(--code-syntax-highlighting-code-fg);
+}
+
+.hljs-literal {
+  color: var(--code-syntax-highlighting-literal);
+}
+
+.hljs-type {
+  color: var(--code-syntax-highlighting-type);
+}
+
+.hljs-subst {
+  color: var(--code-syntax-highlighting-subst);
+}
+
+.hljs-meta {
+  color: var(--code-syntax-highlighting-meta);
+}
+
+.hljs-string {
+  color: var(--code-syntax-highlighting-string);
+}
+
+.hljs-deletion {
+  color: var(--code-syntax-highlighting-deletion);
+}
+
+.hljs-variable {
+  color: var(--code-syntax-highlighting-variable);
+}

scaladoc/resources/dotty_res/styles/theme/components/table-of-content.css

@@ -1,9 +1,8 @@
 #toc {
   position: absolute;
-  right:0;
+  right: 0;
   display: flex;
   flex-direction: column;
-  margin-top: calc(18.75 * var(--base-spacing));
   padding: 0 calc(1 * var(--base-spacing));
 }
 
@@ -16,25 +15,25 @@
   margin-bottom: calc(2.5 * var(--base-spacing));
 }
 
-@media(min-width: 1920px) {
+@media (min-width: 1920px) {
   #toc {
     margin-right: calc(36.75 * var(--base-spacing));
   }
 }
 
-@media(max-width: 1920px) {
+@media (max-width: 1920px) {
   #toc {
     margin-right: calc(6 * var(--base-spacing));
   }
 }
 
-@media(max-width: 1024px) {
+@media (max-width: 1024px) {
   #toc.sidebar-shown {
     display: none;
   }
 }
 
-@media(max-width: 768px) {
+@media (max-width: 768px) {
   #toc {
     display: none;
   }
@@ -60,4 +59,4 @@
 
 #toc li:focus-visible {
   box-shadow: 0px 0px 0px 2px var(--focus-default);
-}
+}