Improve tabset corners; rework border-radius across styles (#2077)

DavidOliver · web-flow · commit d8568d4f2e22 · 2025-01-28T17:20:23.000+01:00
Reintroduces some controlled variance to help differentiate elements.
diff --git a/assets/css/autocomplete.css b/assets/css/autocomplete.css
@@ -107,7 +107,7 @@
 
 .autocomplete-suggestions {
   background-color: var(--autocompleteBackground);
-  border-radius: var(--borderRadius);
+  border-radius: var(--borderRadius-base);
   box-shadow: 0px 15px 99px 0px var(--autocompleteBorder);
   overflow-y: auto;
   max-height: 450px;
@@ -167,7 +167,7 @@
   align-items: center;
   text-decoration: none;
   border: 1px solid var(--suggestionBorder);
-  border-radius: var(--borderRadius);
+  border-radius: var(--borderRadius-base);
   transition: var(--transition-colors);
   background-color: var(--autocompletePreview);
   cursor: pointer;
diff --git a/assets/css/content/admonition.css b/assets/css/content/admonition.css
@@ -1,5 +1,5 @@
 .content-inner section.admonition {
-  border-radius: var(--borderRadius);
+  border-radius: var(--borderRadius-base);
   border-left: 0;
 }
 
diff --git a/assets/css/content/bottom-actions.css b/assets/css/content/bottom-actions.css
@@ -13,7 +13,7 @@
   display: flex;
   text-decoration: none;
   flex-direction: column;
-  border-radius: var(--borderRadius);
+  border-radius: var(--borderRadius-sm);
   border: 1px solid var(--bottomActionsBtnBorder);
   padding: 12px 16px;
   min-width: 150px;
diff --git a/assets/css/content/cheatsheet.css b/assets/css/content/cheatsheet.css
@@ -97,7 +97,7 @@
 
 .page-cheatmd .content-inner .h2 p > code {
   color: #eb5757;
-  border-radius: var(--borderRadius);
+  border-radius: var(--borderRadius-sm);
   padding: 0.2em 0.4em;
 }
 
@@ -156,7 +156,7 @@
 
 .page-cheatmd .content-inner .h2 td code {
   color: #eb5757;
-  border-radius: var(--borderRadius);
+  border-radius: var(--borderRadius-sm);
   padding: 0.2em 0.4em;
 }
 
@@ -195,7 +195,7 @@
 
 .page-cheatmd .content-inner .h2 li > code {
   color: #eb5757;
-  border-radius: var(--borderRadius);
+  border-radius: var(--borderRadius-sm);
   padding: 0.2em 0.4em;
 }
 
diff --git a/assets/css/content/code.css b/assets/css/content/code.css
@@ -19,14 +19,14 @@
 .content-inner code {
   background-color: var(--codeBackground);
   vertical-align: baseline;
-  border-radius: var(--borderRadius);
+  border-radius: var(--borderRadius-sm);
   padding: .1em .2em;
   border: 1px solid var(--codeBorder);
   text-transform: none;
 }
 
 .content-inner code.inline {
-  border-radius: 4px;
+  border-radius: var(--borderRadius-sm);
   word-wrap: break-word;
 }
 
diff --git a/assets/css/content/functions.css b/assets/css/content/functions.css
@@ -106,6 +106,6 @@
   display: block;
   padding: 1em;
   background-color: var(--fnDeprecated);
-  border-radius: var(--borderRadius);
+  border-radius: var(--borderRadius-sm);
   margin: var(--baseLineHeight) 0;
 }
diff --git a/assets/css/content/general.css b/assets/css/content/general.css
@@ -132,7 +132,7 @@
   padding: 0 1.2rem;
   overflow: auto;
   background-color: var(--blockquoteBackground);
-  border-radius: var(--borderRadius);
+  border-radius: var(--borderRadius-base);
 }
 .content-inner blockquote p:last-child, .content-inner section.admonition p:last-child  {
   padding-bottom: 1em;
diff --git a/assets/css/copy-button.css b/assets/css/copy-button.css
@@ -16,7 +16,7 @@ pre .copy-button:focus {
   padding: 8px;
   background-color: transparent;
   backdrop-filter: blur(8px);
-  border-radius: var(--borderRadius);
+  border-radius: var(--borderRadius-sm);
   border: 1px solid var(--codeBorder);
   cursor: pointer;
   transition: var(--transition-all);
diff --git a/assets/css/custom-props/common.css b/assets/css/custom-props/common.css
@@ -2,7 +2,9 @@
   /* Layout & Whitespace */
   --content-width: 949px;
   --content-gutter: 60px;
-  --borderRadius: 8px;
+  --borderRadius-lg: 14px;
+  --borderRadius-base: 8px;
+  --borderRadius-sm: 3px;
   --navTabBorderWidth: 2px;
 
   /* Font Families */
diff --git a/assets/css/keyboard-shortcuts.css b/assets/css/keyboard-shortcuts.css
@@ -22,7 +22,7 @@
 #keyboard-shortcuts-content kbd > kbd {
   background-color: var(--settingsInputBorder);
   color: var(--contrast);
-  border-radius: var(--borderRadius);
+  border-radius: var(--borderRadius-sm);
   font-family: inherit;
   font-weight: bold;
   display: inline-block;
diff --git a/assets/css/modal.css b/assets/css/modal.css
@@ -27,7 +27,7 @@
   margin: 75px auto 0 auto;
   max-width: 500px;
   background-color: var(--modalBackground);
-  border-radius: var(--borderRadius);
+  border-radius: var(--borderRadius-sm);
   box-shadow: 2px 2px 8px rgba(0, 0, 0, .2);
   padding: 25px 35px 35px;
 }
diff --git a/assets/css/search-bar.css b/assets/css/search-bar.css
@@ -17,7 +17,7 @@
 
 .search-bar {
   border: 1px solid var(--searchBarBorder);
-  border-radius: var(--borderRadius);
+  border-radius: var(--borderRadius-base);
   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: var(--borderRadius);
+  border-radius: var(--borderRadius-base);
   color: var(--searchAccentMain);
   position: relative;
   height: 46px;
@@ -42,7 +42,7 @@
 
 .top-search .search-bar .search-input:focus {
   border: 1px solid var(--searchBarFocusColor);
-  border-radius: 7px;
+  border-radius: calc(var(--borderRadius-base) - 1px);
   position: relative;
   box-shadow: 0px 4px 20px 0px var(--searchBarBorderColor) inset;
 }
diff --git a/assets/css/settings.css b/assets/css/settings.css
@@ -14,7 +14,7 @@
   background-color: var(--settingsInputBackground);
   color: var(--settingsInput);
   border: 1px solid var(--settingsInputBorder);
-  border-radius: var(--borderRadius);
+  border-radius: var(--borderRadius-base);
   transition: var(--transition-all);
 }
 #settings-modal-content .input:focus {
diff --git a/assets/css/tabset.css b/assets/css/tabset.css
@@ -4,7 +4,7 @@
   margin: var(--baseLineHeight) 0;
   border: var(--borderWidth) solid var(--tabBorder);
   padding: 0 var(--tabsetPadding);
-  border-radius: var(--borderRadius);
+  border-radius: var(--borderRadius-lg);
 }
 
 .tabset-tablist {
diff --git a/assets/css/toast.css b/assets/css/toast.css
@@ -10,7 +10,7 @@
   padding: .7rem 1.2rem;
   text-align: center;
   font-weight: 700;
-  border-radius: var(--borderRadius);
+  border-radius: var(--borderRadius-base);
   border: 1px solid var(--codeBorder);
   background-color: var(--codeBackground);
   color: var(--textBody);
diff --git a/assets/css/tooltips.css b/assets/css/tooltips.css
@@ -29,7 +29,7 @@ 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);
+  border-radius: var(--borderRadius-sm);
   overflow: auto;
 }
 

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`.content-inner section.admonition {`
`2`		`- border-radius: var(--borderRadius);`
	`2`	`+ border-radius: var(--borderRadius-base);`
`3`	`3`	`border-left: 0;`
`4`	`4`	`}`
`5`	`5`
Original file line number	Diff line number	Diff line change
`@@ -97,7 +97,7 @@`
`97`	`97`
`98`	`98`	`.page-cheatmd .content-inner .h2 p > code {`
`99`	`99`	`color: #eb5757;`
`100`		`- border-radius: var(--borderRadius);`
	`100`	`+ border-radius: var(--borderRadius-sm);`
`101`	`101`	`padding: 0.2em 0.4em;`
`102`	`102`	`}`
`103`	`103`
`@@ -156,7 +156,7 @@`
`156`	`156`
`157`	`157`	`.page-cheatmd .content-inner .h2 td code {`
`158`	`158`	`color: #eb5757;`
`159`		`- border-radius: var(--borderRadius);`
	`159`	`+ border-radius: var(--borderRadius-sm);`
`160`	`160`	`padding: 0.2em 0.4em;`
`161`	`161`	`}`
`162`	`162`
`@@ -195,7 +195,7 @@`
`195`	`195`
`196`	`196`	`.page-cheatmd .content-inner .h2 li > code {`
`197`	`197`	`color: #eb5757;`
`198`		`- border-radius: var(--borderRadius);`
	`198`	`+ border-radius: var(--borderRadius-sm);`
`199`	`199`	`padding: 0.2em 0.4em;`
`200`	`200`	`}`
`201`	`201`
Original file line number	Diff line number	Diff line change
`@@ -106,6 +106,6 @@`
`106`	`106`	`display: block;`
`107`	`107`	`padding: 1em;`
`108`	`108`	`background-color: var(--fnDeprecated);`
`109`		`- border-radius: var(--borderRadius);`
	`109`	`+ border-radius: var(--borderRadius-sm);`
`110`	`110`	`margin: var(--baseLineHeight) 0;`
`111`	`111`	`}`
Original file line number	Diff line number	Diff line change
`@@ -132,7 +132,7 @@`
`132`	`132`	`padding: 0 1.2rem;`
`133`	`133`	`overflow: auto;`
`134`	`134`	`background-color: var(--blockquoteBackground);`
`135`		`- border-radius: var(--borderRadius);`
	`135`	`+ border-radius: var(--borderRadius-base);`
`136`	`136`	`}`
`137`	`137`	`.content-inner blockquote p:last-child, .content-inner section.admonition p:last-child {`
`138`	`138`	`padding-bottom: 1em;`
Original file line number	Diff line number	Diff line change
`@@ -27,7 +27,7 @@`
`27`	`27`	`margin: 75px auto 0 auto;`
`28`	`28`	`max-width: 500px;`
`29`	`29`	`background-color: var(--modalBackground);`
`30`		`- border-radius: var(--borderRadius);`
	`30`	`+ border-radius: var(--borderRadius-sm);`
`31`	`31`	`box-shadow: 2px 2px 8px rgba(0, 0, 0, .2);`
`32`	`32`	`padding: 25px 35px 35px;`
`33`	`33`	`}`
Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,7 @@`
`14`	`14`	`background-color: var(--settingsInputBackground);`
`15`	`15`	`color: var(--settingsInput);`
`16`	`16`	`border: 1px solid var(--settingsInputBorder);`
`17`		`- border-radius: var(--borderRadius);`
	`17`	`+ border-radius: var(--borderRadius-base);`
`18`	`18`	`transition: var(--transition-all);`
`19`	`19`	`}`
`20`	`20`	`#settings-modal-content .input:focus {`
Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,7 @@`
`4`	`4`	`margin: var(--baseLineHeight) 0;`
`5`	`5`	`border: var(--borderWidth) solid var(--tabBorder);`
`6`	`6`	`padding: 0 var(--tabsetPadding);`
`7`		`- border-radius: var(--borderRadius);`
	`7`	`+ border-radius: var(--borderRadius-lg);`
`8`	`8`	`}`
`9`	`9`
`10`	`10`	`.tabset-tablist {`
Original file line number	Diff line number	Diff line change
`@@ -29,7 +29,7 @@ as it has absolute positioning, so doesn't impact the layout and click events pa`
`29`	`29`
`30`	`30`	`.tooltip .tooltip-body {`
`31`	`31`	`border: 1px solid var(--codeBorder);`
`32`		`- border-radius: var(--borderRadius);`
	`32`	`+ border-radius: var(--borderRadius-sm);`
`33`	`33`	`overflow: auto;`
`34`	`34`	`}`
`35`	`35`