Improvements to borders and copy buttons (#2023)

* Refactor border-radius styles to use CSS variable for consistency

* Update tooltip styles to use CSS variable for border-radius and enable overflow

* Add border-radius to inline code elements for improved styling

* Increase backdrop blur effect on copy button for enhanced visibility

Author: clicktodev

assets/css/autocomplete.css

@@ -107,7 +107,7 @@
 
 .autocomplete-suggestions {
   background-color: var(--autocompleteBackground);
-  border-radius: 8px;
+  border-radius: var(--borderRadius);
   box-shadow: 0px 15px 99px 0px var(--autocompleteBorder);
   overflow-y: auto;
   max-height: 450px;
@@ -168,7 +168,7 @@
   align-items: center;
   text-decoration: none;
   border: 1px solid var(--suggestionBorder);
-  border-radius: 8px;
+  border-radius: var(--borderRadius);
   transition: color .3s ease-in-out;
   background-color: var(--autocompletePreview);
   cursor: pointer;

assets/css/content/admonition.css

@@ -1,5 +1,5 @@
 .content-inner section.admonition {
-  border-radius: 10px;
+  border-radius: var(--borderRadius);
   border-left: 0;
 }
 

assets/css/content/code.css

@@ -12,12 +12,16 @@
 .content-inner code {
   background-color: var(--codeBackground);
   vertical-align: baseline;
-  border-radius: 2px;
+  border-radius: var(--borderRadius);
   padding: .1em .2em;
   border: 1px solid var(--codeBorder);
   text-transform: none;
 }
 
+.content-inner code.inline {
+  border-radius: 4px;
+}
+
 .content-inner pre {
   margin: var(--baseLineHeight) 0;
 }
@@ -26,7 +30,7 @@
   display: block;
   overflow-x: auto;
   white-space: inherit;
-  padding: .5em 1em;
+  padding: 1em;
   scrollbar-width: thin;
 }
 

assets/css/copy-button.css

@@ -14,7 +14,9 @@ pre .copy-button:focus {
   top: 5px;
   right: 5px;
   padding: 4px;
-  background-color: var(--codeBackground);
+  background-color: transparent;
+  backdrop-filter: blur(4px);
+  border-radius: var(--borderRadius);
   border: none;
   cursor: pointer;
   transition: all 150ms;

assets/css/custom-props/common.css

@@ -2,7 +2,7 @@
   /* Layout & Whitespace */
   --content-width: 949px;
   --content-gutter: 60px;
-  --borderRadius: 4px;
+  --borderRadius: 8px;
   --navTabBorderWidth: 4px;
 
   /* Font Families */

assets/css/search-bar.css

@@ -17,7 +17,7 @@
 
 .search-bar {
   border: 1px solid var(--searchBarBorder);
-  border-radius: 8px;
+  border-radius: var(--borderRadius);
   height: 48px;
   position: relative;
   width: 100%;
@@ -26,7 +26,7 @@
 .top-search .search-bar .search-input {
   background-color: var(--searchSearch);
   border: 1px solid transparent;
-  border-radius: 8px;
+  border-radius: var(--borderRadius);
   color: var(--searchAccentMain);
   position: relative;
   height: 46px;

assets/css/settings.css

@@ -14,7 +14,7 @@
   background-color: var(--settingsInputBackground);
   color: var(--settingsInput);
   border: 1px solid var(--settingsInputBorder);
-  border-radius: 8px;
+  border-radius: var(--borderRadius);
   transition: border-color 150ms;
 }
 #settings-modal-content .input:focus {

assets/css/toast.css

@@ -9,7 +9,7 @@
   padding: .7rem 1.2rem;
   text-align: center;
   font-weight: 700;
-  border-radius: 10px;
+  border-radius: var(--borderRadius);
   border: 1px solid var(--codeBorder);
   background-color: var(--codeBackground);
   color: var(--textBody);

assets/css/tooltips.css

@@ -29,6 +29,8 @@ as it has absolute positioning, so doesn't impact the layout and click events pa
 
 .tooltip .tooltip-body {
   border: 1px solid var(--codeBorder);
+  border-radius: var(--borderRadius);
+  overflow: auto;
 }
 
 .tooltip .tooltip-body .signature {