diff --git a/assets/css/autocomplete.css b/assets/css/autocomplete.css index d3ddd8321..3997efb96 100644 --- 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 index ea772ed87..e3d01c12c 100644 --- 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 index 50d5e3674..bb55633a4 100644 --- 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 index 0839c3066..e27d94d8d 100644 --- 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 index b6908a16c..d5bf158d7 100644 --- a/assets/css/content/code.css +++ b/assets/css/content/code.css @@ -12,14 +12,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 index a9b3befc0..0a5f2d4a1 100644 --- a/assets/css/content/functions.css +++ b/assets/css/content/functions.css @@ -105,6 +105,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 index ea5c39180..7e638977f 100644 --- a/assets/css/content/general.css +++ b/assets/css/content/general.css @@ -121,7 +121,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 index 946862162..776dedf62 100644 --- 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 index fb9dbb43c..72e23cbf6 100644 --- 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 */ @@ -58,7 +60,7 @@ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ - + --transition-duration: 150ms; --transition-timing: cubic-bezier(0.4, 0, 0.2, 1); diff --git a/assets/css/keyboard-shortcuts.css b/assets/css/keyboard-shortcuts.css index 2d4f91628..59263abc9 100644 --- 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 index 2fba2ae2a..da27b970b 100644 --- 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 index d5e9f0e73..354a65a72 100644 --- 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 index 49cda7f77..b7aa2f852 100644 --- 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 index 2db66b7d3..2fbce9bb5 100644 --- 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 index 3dde8d8c7..744b84a30 100644 --- 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 index 9e44749b1..746e5c7d6 100644 --- 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; }