Fix 'Show/Hide TOC' glitch in dark mode (#2)

perlun · Apr 7, 2021 · 7796e22 · 7796e22
1 parent 5bd8d97
commit 7796e22
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 2 deletions.
diff --git a/Makefile b/Makefile
@@ -1,5 +1,5 @@
 .PHONY: \
-	all docs
+	all docs release
 
 all: docs
 
@@ -22,3 +22,6 @@ docs-serve:
 docfx/docfx.exe:
 	wget -qO- https://github.com/dotnet/docfx/releases/download/v2.51/docfx.zip | busybox unzip - -d docfx
 	chmod +x docfx/docfx.exe
+
+release: all
+	zip -9r darkerfx-`git describe --tags --abbrev=0`.zip darkerfx/
diff --git a/darkerfx/partials/toc.tmpl.partial b/darkerfx/partials/toc.tmpl.partial
@@ -0,0 +1,10 @@
+{{!Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE file in the project root for full license information.}}
+
+<div class="sidenav hide-when-search">
+  <div class="toc-toggle">
+    <a class="btn toc-toggle collapse" data-toggle="collapse" href="#sidetoggle" aria-expanded="false" aria-controls="sidetoggle">Show / Hide Table of Contents</a>
+  </div>
+  <div class="sidetoggle collapse" id="sidetoggle">
+    <div id="sidetoc"></div>
+  </div>
+</div>
diff --git a/darkerfx/styles/main.scss b/darkerfx/styles/main.scss
@@ -27,6 +27,8 @@ body.theme-dark {
     --theme-sidenav-border: #404040;
     --theme-sidenav-background: #2d2d30;
     --theme-sidenav-filter-background: #1d1d1d;
+    --theme-sidenav-toc-toggle-background: #1d1d1d;
+    --theme-sidenav-toc-toggle-hover: #fff;
     --theme-toc-hover: #fff;
     --theme-background: #2d2d30;
     --theme-body-background: #171717;
@@ -54,6 +56,8 @@ body.theme-light {
     --theme-sidenav-border: #e7e7e7;
     --theme-sidenav-background: #f1f1f1;
     --theme-sidenav-filter-background: #ffffff;
+    --theme-sidenav-toc-toggle-background: #f1f1f1;
+    --theme-sidenav-toc-toggle-hover: #337ab7;
     --theme-toc-hover: #4c4c4c;
     --theme-background: #ffffff;
     --theme-body-background: #ffffff;
@@ -138,8 +142,34 @@ article h4 {
     background-color: var(--theme-sidenav-background);
 }
 
+.sidenav {
+    background-color: var(--theme-sidenav-background);
+    padding-top: 0;
+}
+
+.sidenav>div.toc-toggle {
+    background-color: var(--theme-sidenav-toc-toggle-background);
+    margin: 0;
+    padding-top: 0px;
+}
+
+.sidenav a.toc-toggle {
+    color: var(--theme-navbar);
+}
+
+.sidenav a.toc-toggle:focus,
+.sidenav a.toc-toggle:hover {
+    color: var(--theme-sidenav-toc-toggle-hover);
+}
+
+.sidenav>.sidetoggle {
+    background-color: var(--theme-sidenav-background);
+}
+
 body.theme-dark {
-    button, a {
+
+    button,
+    a {
         color: #5999d8;
     }