fix(v2): make code block nicer (#2502)

facebook · Apr 2, 2020 · 63997a4 · 63997a4
1 parent eeebc31
commit 63997a4
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 14 deletions.
diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/styles.module.css b/packages/docusaurus-theme-classic/src/theme/CodeBlock/styles.module.css
@@ -10,11 +10,10 @@
 }
 
 .codeBlockTitle {
-  border-top-left-radius: var(--ifm-pre-border-radius);
-  border-top-right-radius: var(--ifm-pre-border-radius);
+  font-family: var(--ifm-font-family-monospace);
   font-weight: bold;
-  padding: 4px 12px;
-  border-bottom: 1px solid;
+  padding: var(--ifm-pre-padding);
+  border-bottom: 1px solid var(--ifm-color-emphasis-200);
   width: 100%;
 }
 
@@ -31,10 +30,10 @@
 }
 
 .copyButton {
-  background: rgb(1, 22, 39);
-  border: 1px solid rgb(214, 222, 235);
+  background: rgba(0, 0, 0, 0.3);
+  border: none;
   border-radius: var(--ifm-global-radius);
-  color: rgb(214, 222, 235);
+  color: var(--ifm-color-content);
   cursor: pointer;
   line-height: 12px;
   opacity: 0;

diff --git a/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/styles.module.css b/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/styles.module.css
@@ -10,11 +10,10 @@
 }
 
 .codeBlockTitle {
-  border-top-left-radius: var(--ifm-pre-border-radius);
-  border-top-right-radius: var(--ifm-pre-border-radius);
+  font-family: var(--ifm-font-family-monospace);
   font-weight: bold;
-  padding: 4px 12px;
-  border-bottom: 1px solid;
+  padding: var(--ifm-pre-padding);
+  border-bottom: 1px solid var(--ifm-color-emphasis-200);
   width: 100%;
 }
 
@@ -28,10 +27,10 @@
 }
 
 .copyButton {
-  background: rgb(1, 22, 39);
-  border: 1px solid rgb(214, 222, 235);
+  background: rgba(0, 0, 0, 0.3);
+  border: none;
   border-radius: var(--ifm-global-radius);
-  color: rgb(214, 222, 235);
+  color: var(--ifm-color-content);
   cursor: pointer;
   line-height: 12px;
   opacity: 0;