You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@libcloud.apache.org by to...@apache.org on 2022/03/29 21:34:16 UTC

[libcloud-site] 01/03: Improve dark theme colors.

This is an automated email from the ASF dual-hosted git repository.

tomaz pushed a commit to branch asf-staging
in repository https://gitbox.apache.org/repos/asf/libcloud-site.git

commit f52ef63d93b72ea6b49811a96aad99ed2879cdb7
Author: Tomaz Muraus <to...@tomaz.me>
AuthorDate: Tue Mar 29 23:23:35 2022 +0200

    Improve dark theme colors.
---
 source/_assets/css/main.css | 23 +++++++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/source/_assets/css/main.css b/source/_assets/css/main.css
index a5db3ff..4a5020c 100644
--- a/source/_assets/css/main.css
+++ b/source/_assets/css/main.css
@@ -10,11 +10,13 @@ html, html[data-theme="light"] {
     --main-code-text-color: #c7254e;
     --main-code-background-color: #f9f2f4;;
     --main-syntax-highlight-background-color: #fff0f0;
+    --main-syntax-highlight-o-text-color: #333;
     --main-carousel-color: #333;
     --main-post-date-author: rgba(77,77,77,0.75);
     --main-navbar-text-color: #000;
     --main-a-text-color: #428bca;
     --main-a-hover-focus-color: #2a6496;
+    --main-sidebar-nav-a-active: #000;
     --main-hr-border-color: #eee;
 }
 
@@ -28,11 +30,13 @@ html[data-theme="dark"] {
     --main-code-text-color: rgb(221, 73, 110);
     --main-code-background-color: rgb(43, 20, 26);
     --main-syntax-highlight-background-color: rgb(60, 0, 0);
+    --main-syntax-highlight-o-text-color: rgb(200, 195, 188);
     --main-carousel-color: #fff;
     --main-post-date-author: rgba(183, 177, 168, 0.75);
     --main-navbar-text-color: #fff;
     --main-a-text-color: rgb(125, 178, 219);
     --main-a-hover-focus-color: rgb(125, 178, 219);
+    --main-sidebar-nav-a-active: rgb(232, 230, 227);
     --main-hr-border-color: rgb(53, 57, 59);
 }
 
@@ -47,11 +51,13 @@ html[data-theme="dark"] {
         --main-code-text-color: rgb(221, 73, 110);
         --main-code-background-color: rgb(43, 20, 26);
         --main-syntax-highlight-background-color: rgb(60, 0, 0);
+        --main-syntax-highlight-o-text-color: rgb(200, 195, 188);
         --main-carousel-color: #fff;
         --main-post-date-author: rgba(183, 177, 168, 0.75);
         --main-navbar-text-color: #fff;
         --main-a-text-color: rgb(125, 178, 219);
         --main-a-hover-focus-color: rgb(125, 178, 219);
+        --main-sidebar-nav-a-active: rgb(232, 230, 227);
         --main-hr-border-color: rgb(53, 57, 59);
     }
     html[data-theme="light"] {
@@ -65,11 +71,13 @@ html[data-theme="dark"] {
         --main-code-text-color: #c7254e;
         --main-code-background-color: #f9f2f4;;
         --main-syntax-highlight-background-color: #fff0f0;
+        --main-syntax-highlight-o-text-color: #333;
         --main-carousel-color: #333;
         --main-post-date-author: rgba(77,77,77,0.75);
         --main-navbar-text-color: #000;
         --main-a-text-color: #428bca;
         --main-a-hover-focus-color: #2a6496;
+        --main-sidebar-nav-a-active: #000;
         --main-hr-border-color: #eee;
     }
 }
@@ -247,17 +255,22 @@ div.sidebar-nav {
 }
 
 .sidebar-nav > ul > li.active > a {
-    color: black;
+    color: var(--main-sidebar-nav-a-active);
     text-decoration: none;
     cursor: default;
 }
 
 .sidebar-nav > ul > li.active > a:hover {
-    color: black;
+    color: var(--main-sidebar-nav-a-active);
+    background-color: var(--main-navbar-color);
     text-decoration: none;
     cursor: default;
 }
 
+.sidebar-nav > ul > li > a:hover {
+    background-color: var(--main-navbar-color);
+}
+
 /* Credits page */
 
 div.member {
@@ -365,6 +378,7 @@ div.footer-text {
 hr {
     border-color: var(--main-hr-border-color);
 }
+
 a {
   color: var(--main-a-text-color);
 }
@@ -373,9 +387,14 @@ a:hover,
 a:focus {
   color: var(--main-a-hover-focus-color);
 }
+
+/* Syntax highlighter classes */
 .s {
   background-color: var(--main-syntax-highlight-background-color);
 }
+.o {
+    color: var(--main-syntax-highlight-o-text-color);
+}
 
 code {
     color: var(--main-code-text-color);