Copy button theming (#2125)

1 files changed, 17 insertions, 13 deletions

diff --git a/plugins/base/src/main/resources/dokka/styles/style.css b/plugins/base/src/main/resources/dokka/styles/style.css
index d68b495a..65a76042 100644
--- a/plugins/base/src/main/resources/dokka/styles/style.css
+++ b/plugins/base/src/main/resources/dokka/styles/style.css
@@ -27,17 +27,18 @@
     --dark-mode-and-search-icon-color: var(--default-white);
     --color-dark: #27282c;
     --default-font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Droid Sans, Helvetica Neue, Arial, sans-serif;
-    --default-monospace-font-family: JetBrains Mono,SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;
+    --default-monospace-font-family: JetBrains Mono, SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
     --default-font-size: 15px;
     --average-color: var(--color-dark);
     --brief-color: var(--average-color);
-    --secondary-text-color: rgba(39, 40, 44, .7);
+    --copy-icon-color: rgba(39, 40, 44, .7);
+    --copy-icon-hover-color: var(--color-dark);
     --code-background: rgba(39, 40, 44, .05);
     --border-color: rgba(39, 40, 44, .2);
     --navigation-highlight-color: rgba(39, 40, 44, 0.05);
     --top-navigation-height: 73px;
     --max-width: 1160px;
-    --white-10: hsla(0,0%,100%,.1);
+    --white-10: hsla(0, 0%, 100%, .1);
 
     --active-tab-border-color: var(--hover-link-color);
     --inactive-tab-border-color: #DADFE6;
@@ -46,17 +47,19 @@
 :root.theme-dark {
     --background-color: #27282c;
     --color-dark: #3d3d41;
-    --default-font-color: hsla(0,0%,100%,0.8);
-    --border-color: hsla(0,0%,100%,0.2);
-    --code-background: hsla(0,0%,100%,0.05);
+    --default-font-color: hsla(0, 0%, 100%, 0.8);
+    --border-color: hsla(0, 0%, 100%, 0.2);
+    --code-background: hsla(0, 0%, 100%, 0.05);
     --breadcrumb-font-color: #8c8c8e;
-    --brief-color: hsla(0,0%,100%,0.4);
+    --brief-color: hsla(0, 0%, 100%, 0.4);
+    --copy-icon-color: hsla(0, 0%, 100%, 0.6);
+    --copy-icon-hover-color: #fff;
 
     --active-tab-border-color: var(--default-font-color);
     --inactive-tab-border-color: var(--border-color);
     --navigation-highlight-color: rgba(255, 255, 255, 0.05);
-    --footer-background: hsla(0,0%,100%,0.05);
-    --footer-font-color: hsla(0,0%,100%,0.6);
+    --footer-background: hsla(0, 0%, 100%, 0.05);
+    --footer-font-color: hsla(0, 0%, 100%, 0.6);
     --footer-go-to-top-color: var(--footer-font-color);
 }
 
@@ -230,7 +233,7 @@ html ::-webkit-scrollbar-thumb {
     margin-bottom: 2px;
 }
 
-.divergent-group .table-row, tbody > tr  {
+.divergent-group .table-row, tbody > tr {
     border-bottom: 1px solid var(--border-color);
 }
 
@@ -347,11 +350,11 @@ code.paragraph {
     mask: url("../images/copy-icon.svg") no-repeat 50% 50%;
     -webkit-mask-size: cover;
     mask-size: cover;
-    background-color: var(--secondary-text-color);
+    background-color: var(--copy-icon-color);
 }
 
 .symbol span.copy-icon:hover::before, .sample-container span.copy-icon:hover::before {
-    background-color: var(--color-dark);
+    background-color: var(--copy-icon-hover-color);
 }
 
 .copy-popup-wrapper {
@@ -387,7 +390,8 @@ code.paragraph {
     left: -15em;
 }
 
-.copy-popup-wrapper.active-popup {
+.symbol:hover .copy-popup-wrapper.active-popup,
+.sample-container:hover .copy-popup-wrapper.active-popup {
     display: flex !important;
 }