From 38d2933cc12a55ca2f048530c48b775b59183dc1 Mon Sep 17 00:00:00 2001 From: Otto Richter Date: Wed, 25 Dec 2024 03:56:39 +0100 Subject: [PATCH] New repo: Clean up and improve CSS - drop custom layout rules for this page - move form-related content to form.css - extend new form CSS to add gap between labels and input fields (cherry picked from commit 471e5b197539676e397128be90a9f40aa8d917ed) --- web_src/css/base.css | 91 -------------------------------- web_src/css/form.css | 122 ++++++++++++++++++++++++++++++++++++++----- web_src/css/repo.css | 4 -- 3 files changed, 110 insertions(+), 107 deletions(-) diff --git a/web_src/css/base.css b/web_src/css/base.css index fc3200d7da..dd761a1b75 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -652,97 +652,6 @@ img.ui.avatar, background: var(--color-active); } -.ui.form .fields.error .field textarea, -.ui.form .fields.error .field select, -.ui.form .fields.error .field input:not([type]), -.ui.form .fields.error .field input[type="date"], -.ui.form .fields.error .field input[type="datetime-local"], -.ui.form .fields.error .field input[type="email"], -.ui.form .fields.error .field input[type="number"], -.ui.form .fields.error .field input[type="password"], -.ui.form .fields.error .field input[type="search"], -.ui.form .fields.error .field input[type="tel"], -.ui.form .fields.error .field input[type="time"], -.ui.form .fields.error .field input[type="text"], -.ui.form .fields.error .field input[type="file"], -.ui.form .fields.error .field input[type="url"], -.ui.form .fields.error .field .ui.dropdown, -.ui.form .fields.error .field .ui.dropdown .item, -.ui.form .field.error .ui.dropdown, -.ui.form .field.error .ui.dropdown .text, -.ui.form .field.error .ui.dropdown .item, -.ui.form .field.error textarea, -.ui.form .field.error select, -.ui.form .field.error input:not([type]), -.ui.form .field.error input[type="date"], -.ui.form .field.error input[type="datetime-local"], -.ui.form .field.error input[type="email"], -.ui.form .field.error input[type="number"], -.ui.form .field.error input[type="password"], -.ui.form .field.error input[type="search"], -.ui.form .field.error input[type="tel"], -.ui.form .field.error input[type="time"], -.ui.form .field.error input[type="text"], -.ui.form .field.error input[type="file"], -.ui.form .field.error input[type="url"], -.ui.form .field.error select:focus, -.ui.form .field.error input:not([type]):focus, -.ui.form .field.error input[type="date"]:focus, -.ui.form .field.error input[type="datetime-local"]:focus, -.ui.form .field.error input[type="email"]:focus, -.ui.form .field.error input[type="number"]:focus, -.ui.form .field.error input[type="password"]:focus, -.ui.form .field.error input[type="search"]:focus, -.ui.form .field.error input[type="tel"]:focus, -.ui.form .field.error input[type="time"]:focus, -.ui.form .field.error input[type="text"]:focus, -.ui.form .field.error input[type="file"]:focus, -.ui.form .field.error input[type="url"]:focus { - background-color: var(--color-error-bg); - border-color: var(--color-error-border); - color: var(--color-error-text); -} - -.ui.form .fields.error .field .ui.dropdown, -.ui.form .field.error .ui.dropdown, -.ui.form .fields.error .field .ui.dropdown:hover, -.ui.form .field.error .ui.dropdown:hover { - border-color: var(--color-error-border) !important; -} - -.ui.form .fields.error .field .ui.dropdown .menu .item:hover, -.ui.form .field.error .ui.dropdown .menu .item:hover { - background-color: var(--color-error-bg-hover); -} - -.ui.form .fields.error .field .ui.dropdown .menu .active.item, -.ui.form .field.error .ui.dropdown .menu .active.item { - background-color: var(--color-error-bg-active) !important; -} - -.ui.form .fields.error .dropdown .menu, -.ui.form .field.error .dropdown .menu { - border-color: var(--color-error-border) !important; -} - -input:-webkit-autofill, -input:-webkit-autofill:focus, -input:-webkit-autofill:hover, -input:-webkit-autofill:active, -.ui.form .field.field input:-webkit-autofill, -.ui.form .field.field input:-webkit-autofill:focus, -.ui.form .field.field input:-webkit-autofill:hover, -.ui.form .field.field input:-webkit-autofill:active { - -webkit-background-clip: text; - -webkit-text-fill-color: var(--color-text); - box-shadow: 0 0 0 100px var(--color-primary-light-6) inset !important; - border-color: var(--color-primary-light-4) !important; -} - -.ui.form .field.muted { - opacity: var(--opacity-disabled); -} - .text.primary { color: var(--color-primary) !important; } diff --git a/web_src/css/form.css b/web_src/css/form.css index fb9364db45..bf50114344 100644 --- a/web_src/css/form.css +++ b/web_src/css/form.css @@ -18,6 +18,11 @@ fieldset label:has(input[type="number"]) { font-weight: var(--font-weight-medium); } +/* override inline style on custom input elements */ +fieldset label .ui.dropdown { + width: 100% !important; +} + fieldset .help { font-weight: var(--font-weight-normal); } @@ -27,9 +32,17 @@ fieldset .help { padding-bottom: 0; } -fieldset input[type="checkbox"], -fieldset input[type="radio"] { +fieldset label > input, +fieldset label > textarea, +fieldset label > .ui.dropdown, +fieldset label + .ui.dropdown { + margin-top: 0.28rem !important; +} + +fieldset label > input[type="checkbox"], +fieldset label > input[type="radio"] { margin-right: 0.75em; + margin-top: 0 !important; vertical-align: initial !important; /* overrides a semantic.css rule, remove when obsolete */ } @@ -142,6 +155,101 @@ textarea:focus, color: var(--color-input-text); } +/* error messages */ +fieldset label.error textarea, +fieldset label.error select, +fieldset label.error input, +.ui.form .fields.error .field textarea, +.ui.form .fields.error .field select, +.ui.form .fields.error .field input:not([type]), +.ui.form .fields.error .field input[type="date"], +.ui.form .fields.error .field input[type="datetime-local"], +.ui.form .fields.error .field input[type="email"], +.ui.form .fields.error .field input[type="number"], +.ui.form .fields.error .field input[type="password"], +.ui.form .fields.error .field input[type="search"], +.ui.form .fields.error .field input[type="tel"], +.ui.form .fields.error .field input[type="time"], +.ui.form .fields.error .field input[type="text"], +.ui.form .fields.error .field input[type="file"], +.ui.form .fields.error .field input[type="url"], +.ui.form .fields.error .field .ui.dropdown, +.ui.form .fields.error .field .ui.dropdown .item, +.ui.form .field.error .ui.dropdown, +.ui.form .field.error .ui.dropdown .text, +.ui.form .field.error .ui.dropdown .item, +.ui.form .field.error textarea, +.ui.form .field.error select, +.ui.form .field.error input:not([type]), +.ui.form .field.error input[type="date"], +.ui.form .field.error input[type="datetime-local"], +.ui.form .field.error input[type="email"], +.ui.form .field.error input[type="number"], +.ui.form .field.error input[type="password"], +.ui.form .field.error input[type="search"], +.ui.form .field.error input[type="tel"], +.ui.form .field.error input[type="time"], +.ui.form .field.error input[type="text"], +.ui.form .field.error input[type="file"], +.ui.form .field.error input[type="url"], +.ui.form .field.error select:focus, +.ui.form .field.error input:not([type]):focus, +.ui.form .field.error input[type="date"]:focus, +.ui.form .field.error input[type="datetime-local"]:focus, +.ui.form .field.error input[type="email"]:focus, +.ui.form .field.error input[type="number"]:focus, +.ui.form .field.error input[type="password"]:focus, +.ui.form .field.error input[type="search"]:focus, +.ui.form .field.error input[type="tel"]:focus, +.ui.form .field.error input[type="time"]:focus, +.ui.form .field.error input[type="text"]:focus, +.ui.form .field.error input[type="file"]:focus, +.ui.form .field.error input[type="url"]:focus { + background-color: var(--color-error-bg); + border-color: var(--color-error-border); + color: var(--color-error-text); +} + +.ui.form .fields.error .field .ui.dropdown, +.ui.form .field.error .ui.dropdown, +.ui.form .fields.error .field .ui.dropdown:hover, +.ui.form .field.error .ui.dropdown:hover { + border-color: var(--color-error-border) !important; +} + +.ui.form .fields.error .field .ui.dropdown .menu .item:hover, +.ui.form .field.error .ui.dropdown .menu .item:hover { + background-color: var(--color-error-bg-hover); +} + +.ui.form .fields.error .field .ui.dropdown .menu .active.item, +.ui.form .field.error .ui.dropdown .menu .active.item { + background-color: var(--color-error-bg-active) !important; +} + +.ui.form .fields.error .dropdown .menu, +.ui.form .field.error .dropdown .menu { + border-color: var(--color-error-border) !important; +} + +input:-webkit-autofill, +input:-webkit-autofill:focus, +input:-webkit-autofill:hover, +input:-webkit-autofill:active, +.ui.form .field.field input:-webkit-autofill, +.ui.form .field.field input:-webkit-autofill:focus, +.ui.form .field.field input:-webkit-autofill:hover, +.ui.form .field.field input:-webkit-autofill:active { + -webkit-background-clip: text; + -webkit-text-fill-color: var(--color-text); + box-shadow: 0 0 0 100px var(--color-primary-light-6) inset !important; + border-color: var(--color-primary-light-4) !important; +} + +.ui.form .field.muted { + opacity: var(--opacity-disabled); +} + .ui.form .field > label, .ui.form .inline.fields > label, .ui.form .inline.fields .field > label, @@ -400,14 +508,12 @@ textarea:focus, .repository.new.fork form .header { padding-left: 280px !important; } - .repository.new.repo form .inline.field > label, .repository.new.migrate form .inline.field > label, .repository.new.fork form .inline.field > label { text-align: right; width: 250px !important; word-wrap: break-word; } - .repository.new.repo form .help, .repository.new.migrate form .help, .repository.new.fork form .help { margin-left: 265px !important; @@ -417,10 +523,8 @@ textarea:focus, .repository.new.fork form .optional .title { margin-left: 250px !important; } - .repository.new.repo form .inline.field > input, .repository.new.migrate form .inline.field > input, .repository.new.fork form .inline.field > input, - .repository.new.repo form .inline.field > textarea, .repository.new.migrate form .inline.field > textarea, .repository.new.fork form .inline.field > textarea { width: 50%; @@ -440,7 +544,6 @@ textarea:focus, } } -.repository.new.repo form .dropdown .text, .repository.new.migrate form .dropdown .text, .repository.new.fork form .dropdown .text { margin-right: 0 !important; @@ -453,7 +556,6 @@ textarea:focus, text-align: center; } -.repository.new.repo form .selection.dropdown, .repository.new.migrate form .selection.dropdown, .repository.new.fork form .selection.dropdown, .repository.new.fork form .field a { @@ -490,10 +592,6 @@ textarea:focus, } } -.repository.new.repo .ui.form .selection.dropdown:not(.owner) { - width: 50% !important; -} - @media (max-width: 767.98px) { .repository.new.repo .ui.form .selection.dropdown:not(.owner) { width: 100% !important; diff --git a/web_src/css/repo.css b/web_src/css/repo.css index 484cdf1c85..675e5565bd 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -4,10 +4,6 @@ user-select: none; } -.repository .owner.dropdown { - min-width: 40% !important; -} - .repository .unicode-escaped .escaped-code-point[data-escaped]::before { visibility: visible; content: attr(data-escaped);