From dca2f9371d95c2227f43ad7a0ddad579d407afd5 Mon Sep 17 00:00:00 2001 From: delvh Date: Mon, 28 Aug 2023 21:43:59 +0200 Subject: [PATCH] Unify `border-radius` behavior (#26770) ## Changes - no more hardcoded `border-radius`es (apart from `0`) - no more value inconsistencies - no more guessing what pixel value you should use - two new variables: - `--border-radius-medium` (for elements where the normal border radius does not suffice) - `--border-radius-circle` (for displaying circles) --------- Co-authored-by: silverwind --- web_src/css/base.css | 14 ++++++++------ web_src/css/dashboard.css | 2 +- web_src/css/editor/combomarkdowneditor.css | 8 ++++---- web_src/css/features/codeeditor.css | 2 +- web_src/css/features/console.css | 2 +- web_src/css/features/dropzone.css | 2 +- web_src/css/features/tribute.css | 2 +- web_src/css/form.css | 2 +- web_src/css/markup/content.css | 8 ++++---- web_src/css/modules/animations.css | 2 +- web_src/css/modules/navbar.css | 2 +- web_src/css/modules/toast.css | 4 ++-- web_src/css/repo.css | 20 ++++++++++---------- web_src/css/repo/issue-list.css | 5 ++--- web_src/css/repo/release-tag.css | 4 +--- web_src/css/review.css | 2 +- web_src/css/user.css | 2 +- 17 files changed, 41 insertions(+), 42 deletions(-) diff --git a/web_src/css/base.css b/web_src/css/base.css index 481e231f3..1a88823cb 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -16,7 +16,9 @@ --checkbox-mask-indeterminate: url('data:image/svg+xml;utf8,'); --octicon-chevron-right: url('data:image/svg+xml;utf8,'); /* non-color variables */ - --border-radius: 0.28571429rem; + --border-radius: 4px; + --border-radius-medium: 6px; + --border-radius-circle: 100%; --opacity-disabled: 0.55; --height-loading: 16rem; --tab-size: 4; @@ -309,7 +311,7 @@ details summary > * { progress { background: var(--color-secondary-dark-1); - border-radius: 6px; + border-radius: var(--border-radius); border: none; overflow: hidden; } @@ -339,7 +341,7 @@ progress::-moz-progress-bar { ::-webkit-scrollbar-thumb { box-shadow: inset 0 0 0 6px var(--color-primary); border: 2px solid transparent; - border-radius: 5px !important; + border-radius: var(--border-radius); } ::-webkit-scrollbar-thumb:window-inactive { @@ -454,7 +456,7 @@ a.label, .issue-title code { padding: 2px 4px; - border-radius: 6px; + border-radius: var(--border-radius-medium); background-color: var(--color-markup-code-block); } @@ -1510,7 +1512,7 @@ img.ui.avatar, margin-left: 0.4em; height: 0.67em; width: 0.67em; - border-radius: 0.15em; + border-radius: var(--border-radius); } .attention-icon { @@ -2013,7 +2015,7 @@ a.ui.basic.label:hover { .color-icon { display: inline-block; - border-radius: 100%; + border-radius: var(--border-radius-circle); height: 14px; width: 14px; } diff --git a/web_src/css/dashboard.css b/web_src/css/dashboard.css index 402eb7b34..6dcf73e2a 100644 --- a/web_src/css/dashboard.css +++ b/web_src/css/dashboard.css @@ -98,7 +98,7 @@ .feeds code { padding: 2px 4px; - border-radius: 3px; + border-radius: var(--border-radius); background-color: var(--color-markup-code-block); word-break: break-all; } diff --git a/web_src/css/editor/combomarkdowneditor.css b/web_src/css/editor/combomarkdowneditor.css index 63f4ebf89..a82e2b176 100644 --- a/web_src/css/editor/combomarkdowneditor.css +++ b/web_src/css/editor/combomarkdowneditor.css @@ -83,7 +83,7 @@ text-expander .suggestions { margin-top: 24px; list-style: none; background: var(--color-box-body); - border-radius: 5px; + border-radius: var(--border-radius); border: 1px solid var(--color-secondary); box-shadow: 0 .5rem 1rem var(--color-shadow); } @@ -101,15 +101,15 @@ text-expander .suggestions li + li { } text-expander .suggestions li:first-child { - border-radius: 4px 4px 0 0; + border-radius: var(--border-radius) var(--border-radius) 0 0; } text-expander .suggestions li:last-child { - border-radius: 0 0 4px 4px; + border-radius: 0 0 var(--border-radius) var(--border-radius); } text-expander .suggestions li:only-child { - border-radius: 4px; + border-radius: var(--border-radius); } text-expander .suggestions li:hover { diff --git a/web_src/css/features/codeeditor.css b/web_src/css/features/codeeditor.css index 8666ad2f8..34a104c83 100644 --- a/web_src/css/features/codeeditor.css +++ b/web_src/css/features/codeeditor.css @@ -44,5 +44,5 @@ position: absolute !important; resize: none !important; overflow: hidden !important; - border-radius: 4px !important; + border-radius: var(--border-radius-medium) !important; } diff --git a/web_src/css/features/console.css b/web_src/css/features/console.css index db187a48d..99fb25dae 100644 --- a/web_src/css/features/console.css +++ b/web_src/css/features/console.css @@ -4,7 +4,7 @@ background: var(--color-console-bg); color: var(--color-console-fg); font-family: var(--fonts-monospace); - border-radius: 5px; + border-radius: var(--border-radius); word-break: break-word; overflow-wrap: break-word; } diff --git a/web_src/css/features/dropzone.css b/web_src/css/features/dropzone.css index 509dbf1df..cbc32df20 100644 --- a/web_src/css/features/dropzone.css +++ b/web_src/css/features/dropzone.css @@ -3,7 +3,7 @@ background: none; box-shadow: none; padding: 0; - border-radius: 4px; + border-radius: var(--border-radius-medium); min-height: 0; } diff --git a/web_src/css/features/tribute.css b/web_src/css/features/tribute.css index 76e3138b6..bd843675e 100644 --- a/web_src/css/features/tribute.css +++ b/web_src/css/features/tribute.css @@ -2,7 +2,7 @@ .tribute-container { box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.25); - border-radius: 0.25rem; + border-radius: var(--border-radius); } .tribute-container ul { diff --git a/web_src/css/form.css b/web_src/css/form.css index 1bd192095..e4efa3494 100644 --- a/web_src/css/form.css +++ b/web_src/css/form.css @@ -221,7 +221,7 @@ textarea:focus, } .g-recaptcha-style iframe, .h-captcha-style iframe { - border-radius: 5px !important; + border-radius: var(--border-radius) !important; width: 302px !important; height: 76px !important; } diff --git a/web_src/css/markup/content.css b/web_src/css/markup/content.css index d89e02c64..59b34b7dd 100644 --- a/web_src/css/markup/content.css +++ b/web_src/css/markup/content.css @@ -180,7 +180,7 @@ appearance: none; position: relative; border: 1px solid var(--color-secondary); - border-radius: 2px; + border-radius: var(--border-radius); background: var(--color-input-background); height: 14px; width: 14px; @@ -433,7 +433,7 @@ font-size: 85%; white-space: break-spaces; background-color: var(--color-markup-code-block); - border-radius: 4px; + border-radius: var(--border-radius); } .markup code br, @@ -466,7 +466,7 @@ font-size: 85%; line-height: 1.45; background-color: var(--color-markup-code-block); - border-radius: 4px; + border-radius: var(--border-radius); } .markup .highlight pre { @@ -504,7 +504,7 @@ vertical-align: middle; background-color: var(--color-markup-code-block); border: 1px solid var(--color-secondary); - border-radius: 3px; + border-radius: var(--border-radius); box-shadow: inset 0 -1px 0 var(--color-secondary); } diff --git a/web_src/css/modules/animations.css b/web_src/css/modules/animations.css index ea1409687..7b3ec360f 100644 --- a/web_src/css/modules/animations.css +++ b/web_src/css/modules/animations.css @@ -26,7 +26,7 @@ border-width: 4px; border-style: solid; border-color: var(--color-secondary) var(--color-secondary) var(--color-secondary-dark-8) var(--color-secondary-dark-8); - border-radius: 100%; + border-radius: var(--border-radius-circle); } .is-loading.small-loading-icon::after { diff --git a/web_src/css/modules/navbar.css b/web_src/css/modules/navbar.css index 66c7f9ec7..15114f90b 100644 --- a/web_src/css/modules/navbar.css +++ b/web_src/css/modules/navbar.css @@ -134,7 +134,7 @@ top: -9px; min-width: 17px; min-height: 17px; - border-radius: 17px; + border-radius: var(--border-radius-circle); display: flex; align-items: center; justify-content: center; diff --git a/web_src/css/modules/toast.css b/web_src/css/modules/toast.css index c96521f27..0bfaa5be4 100644 --- a/web_src/css/modules/toast.css +++ b/web_src/css/modules/toast.css @@ -4,7 +4,7 @@ opacity: 0; transition: all .2s ease; z-index: 500; - border-radius: 4px; + border-radius: var(--border-radius); box-shadow: 0 8px 24px var(--color-shadow); display: flex; max-width: 50vw; @@ -25,7 +25,7 @@ .toast-close, .toast-icon { color: currentcolor; - border-radius: 3px; + border-radius: var(--border-radius); background: transparent; border: none; display: inline-block; diff --git a/web_src/css/repo.css b/web_src/css/repo.css index 7a24f4670..eb3f98774 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -117,7 +117,7 @@ .repository .issue-content-right #deadlineForm input { width: 12.8rem; - border-radius: 4px 0 0 4px; + border-radius: var(--border-radius) 0 0 var(--border-radius); border-right: 0; white-space: nowrap; } @@ -141,7 +141,7 @@ .repository .filter.menu.labels .label-filter .menu .info code { border: 1px solid var(--color-secondary); - border-radius: 3px; + border-radius: var(--border-radius); padding: 1px 2px; font-size: 11px; } @@ -518,7 +518,7 @@ margin-bottom: 10px; border: 1px solid var(--color-secondary); background: var(--color-box-body); - border-radius: 3px; + border-radius: var(--border-radius); } .repository.file.editor .commit-form-wrapper .commit-form::before, @@ -551,7 +551,7 @@ font: 12px var(--fonts-monospace); color: var(--color-text); background: var(--color-secondary); - border-radius: 3px; + border-radius: var(--border-radius); margin: 0 2px; } @@ -709,7 +709,7 @@ align-items: center !important; font-size: 14px !important; padding: 7px 10px !important; - border-radius: 6px !important; + border-radius: var(--border-radius-medium) !important; } .issue-state-label .svg { @@ -835,7 +835,7 @@ width: 34px; height: 34px; background-color: var(--color-timeline); - border-radius: 50%; + border-radius: var(--border-radius-circle); display: flex; float: left; margin-left: -33px; @@ -1049,7 +1049,7 @@ .merge-section-info code { border: 1px solid var(--color-light-border); - border-radius: 4px; + border-radius: var(--border-radius); padding: 2px 4px; background: var(--color-light); } @@ -2093,7 +2093,7 @@ width: 34px; height: 34px; min-height: 0 !important; - border-radius: 6px; + border-radius: var(--border-radius); display: flex !important; align-items: center; justify-content: center; @@ -2753,7 +2753,7 @@ tbody.commit-list { #new-dependency-drop-list.ui.selection.dropdown { min-width: 0; width: 100%; - border-radius: 4px 0 0 4px; + border-radius: var(--border-radius) 0 0 var(--border-radius); border-right: 0; white-space: nowrap; } @@ -2949,7 +2949,7 @@ tbody.commit-list { margin: 10px 0; background-color: var(--color-markup-code-block); border: 1px solid var(--color-secondary); - border-radius: 3px; + border-radius: var(--border-radius); font-size: 13px; line-height: 1.5; overflow: auto; diff --git a/web_src/css/repo/issue-list.css b/web_src/css/repo/issue-list.css index 2a0a86c08..f76b690cb 100644 --- a/web_src/css/repo/issue-list.css +++ b/web_src/css/repo/issue-list.css @@ -39,7 +39,7 @@ #issue-list .flex-item-body .branches .branch { background-color: var(--color-secondary-alpha-40); - border-radius: 3px; + border-radius: var(--border-radius); padding: 0 4px; } @@ -55,7 +55,6 @@ width: 80px; height: 6px; display: inline-block; - border-radius: 3px; } #issue-list .flex-item-body .checklist progress::-webkit-progress-value { @@ -64,4 +63,4 @@ #issue-list .flex-item-body .checklist progress::-moz-progress-bar { background-color: var(--color-secondary-dark-4); -} \ No newline at end of file +} diff --git a/web_src/css/repo/release-tag.css b/web_src/css/repo/release-tag.css index 70925f5a0..cad1aaae6 100644 --- a/web_src/css/repo/release-tag.css +++ b/web_src/css/repo/release-tag.css @@ -75,12 +75,10 @@ width: 10px; height: 10px; background-color: var(--color-secondary-dark-3); - z-index: 9; position: absolute; - display: block; left: -5.5px; top: 40px; - border-radius: 100%; + border-radius: var(--border-radius-circle); border: 2.5px solid var(--color-body); } diff --git a/web_src/css/review.css b/web_src/css/review.css index a4c4efd02..c831f3897 100644 --- a/web_src/css/review.css +++ b/web_src/css/review.css @@ -273,7 +273,7 @@ border: 1px solid transparent; padding: 4px 8px; margin: -8px 0; /* just like other buttons in the diff box header */ - border-radius: 0.285rem; /* just like .ui.tiny.button */ + border-radius: var(--border-radius); font-size: 0.857rem; /* just like .ui.tiny.button */ } diff --git a/web_src/css/user.css b/web_src/css/user.css index 2f951440b..af8a2f5ad 100644 --- a/web_src/css/user.css +++ b/web_src/css/user.css @@ -107,7 +107,7 @@ #readme_profile { padding: 1em 2em; - border-radius: 0.28571429rem; + border-radius: var(--border-radius); background: var(--color-card); border: 1px solid var(--color-secondary); }