fix: improve style for copybutton

lepture · Apr 4, 2024 · 91ac420 · 91ac420
1 parent 39db2d5
commit 91ac420
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 2 deletions.
diff --git a/docs/extensions/sphinx-design.rst b/docs/extensions/sphinx-design.rst
@@ -159,6 +159,8 @@ Dropdown
 Tabs
 ~~~~
 
+Directive ``tab-set``:
+
 .. tab-set::
 
     .. tab-item:: Label1
@@ -169,6 +171,8 @@ Tabs
 
         Content 2
 
+Directive ``tab-set-code``:
+
 .. tab-set-code::
 
     .. code-block:: python
@@ -179,6 +183,24 @@ Tabs
 
         a = 1;
 
+Directive ``tab-set`` with ``code-block``:
+
+.. tab-set::
+
+    .. tab-item:: Python
+
+      .. code-block:: python
+          :caption: a.py
+
+          foo = "str"
+
+    .. tab-item:: JavaScript
+
+      .. code-block:: javascript
+          :caption: b.js
+
+          a = 1;
+
 Badges
 ~~~~~~
 

diff --git a/static/css/extensions/copybutton.css b/static/css/extensions/copybutton.css
@@ -11,12 +11,24 @@
   height: 1.4rem;
 }
 
+.yue button.copybtn:hover {
+  color: var(--syntax-meta);
+}
+
 .yue .highlight button.copybtn:hover {
   background-color: transparent;
-  color: var(--syntax-meta);
 }
 
-.yue .o-tooltip--left:after {
+.yue button.copybtn:after {
   background-color: transparent;
   color: var(--syntax-text);
 }
+
+.yue button.copybtn.success {
+  border-color: var(--green-a10);
+  color: var(--green-a10);
+}
+
+.yue button.copybtn.success:after {
+  color: var(--green-a10);
+}
diff --git a/static/css/variables.css b/static/css/variables.css
@@ -35,6 +35,14 @@
   --sy-dropdown-shadow: 0 12px 32px var(--gray-a6), 0 2px 6px var(--gray-a4);
 }
 
+[data-accent-color='sky'],
+[data-accent-color='mint'],
+[data-accent-color='lime'],
+[data-accent-color='yellow'],
+[data-accent-color='amber'] {
+  --sy-c-link: var(--accent-a10);
+}
+
 html.light {
   color-scheme: light;
   --sy-c-background: white;