From 276211f21fcc785f78350c0ebf5a88d83e789926 Mon Sep 17 00:00:00 2001 From: silverwind Date: Sun, 8 Mar 2026 20:03:52 +0100 Subject: [PATCH 1/4] Migrate fomantic search CSS to first-party module Replace the fomantic search.css (520 lines) with a minimal first-party module (80 lines) containing only the rules actually used. Hardcoded colors are replaced with theme variables, and the base.css overrides are merged directly into the new module. Eliminated unused CSS for: category search, selection search, loading spinner, disabled state, scrolling/long/short variations, left/right alignment, all size variants, price display, message display, and action buttons. Co-Authored-By: Claude (Opus 4.6) --- web_src/css/base.css | 31 -- web_src/css/index.css | 1 + web_src/css/modules/search.css | 85 +++ web_src/fomantic/build/components/search.css | 520 ------------------- web_src/fomantic/build/fomantic.css | 1 - web_src/fomantic/semantic.json | 1 - 6 files changed, 86 insertions(+), 553 deletions(-) create mode 100644 web_src/css/modules/search.css delete mode 100644 web_src/fomantic/build/components/search.css diff --git a/web_src/css/base.css b/web_src/css/base.css index 59072839a9b42..1f87e41879c89 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -336,37 +336,6 @@ a.label, background: currentcolor; } -.ui.search > .results { - background: var(--color-body); - border-color: var(--color-secondary); - overflow-wrap: anywhere; /* allow text to wrap as fomantic limits this to 18em width */ -} - -.ui.search > .results .result { - background: var(--color-body); - border-color: var(--color-secondary); - display: flex; - align-items: center; -} - -.ui.search > .results .result .title { - color: var(--color-text-dark); -} - -.ui.search > .results .result .description { - color: var(--color-text-light-2); -} - -.ui.search > .results .result .image { - width: auto; - height: auto; -} - -.ui.search > .results .result:hover, -.ui.category.search > .results .category .result:hover { - background: var(--color-hover); -} - .empty-placeholder { display: flex; flex-direction: column; diff --git a/web_src/css/index.css b/web_src/css/index.css index 3edb3df6c1c19..8107d06f1d8a6 100644 --- a/web_src/css/index.css +++ b/web_src/css/index.css @@ -18,6 +18,7 @@ @import "./modules/checkbox.css"; @import "./modules/dimmer.css"; @import "./modules/modal.css"; +@import "./modules/search.css"; @import "./modules/tab.css"; @import "./modules/form.css"; @import "./modules/dropdown.css"; diff --git a/web_src/css/modules/search.css b/web_src/css/modules/search.css new file mode 100644 index 0000000000000..c62bd0ff9e455 --- /dev/null +++ b/web_src/css/modules/search.css @@ -0,0 +1,85 @@ +/* These are the remnants of the fomantic search module */ + +.ui.search { + position: relative; +} + +.ui.search > .results { + display: none; + position: absolute; + top: 100%; + left: 0; + white-space: normal; + text-align: left; + background: var(--color-body); + margin-top: 0.5em; + width: 18em; + border-radius: 0.28571429rem; + box-shadow: 0 2px 4px 0 var(--color-shadow), 0 2px 10px 0 var(--color-shadow); + border: 1px solid var(--color-secondary); + z-index: 998; + overflow-wrap: anywhere; +} + +.ui.search > .results > :first-child { + border-top-left-radius: 0.28571429rem; + border-top-right-radius: 0.28571429rem; +} + +.ui.search > .results > :last-child { + border-bottom-left-radius: 0.28571429rem; + border-bottom-right-radius: 0.28571429rem; +} + +.ui.search > .results .result { + cursor: pointer; + display: flex; + align-items: center; + overflow: hidden; + padding: 0.85714286em 1.14285714em; + color: var(--color-text); + line-height: 1.33; + border-bottom: 1px solid var(--color-secondary); + background: var(--color-body); +} + +.ui.search > .results .result:last-child { + border-bottom: none; +} + +.ui.search > .results .result .image { + overflow: hidden; + border-radius: 0.25em; +} + +.ui.search > .results .result .image img { + display: block; + height: 100%; +} + +.ui.search > .results .result .title { + margin: -0.14285714em 0 0; + font-family: var(--fonts-regular); + font-weight: var(--font-weight-medium); + color: var(--color-text-dark); +} + +.ui.search > .results .result .description { + font-size: 0.92857143em; + color: var(--color-text-light-2); +} + +.ui.search > .results .result:hover, +.ui.search > .results .result.active { + background: var(--color-hover); +} + +.ui.fluid.search .results { + width: 100%; +} + +@media only screen and (max-width: 767.98px) { + .ui.search .results { + max-width: calc(100vw - 2rem); + } +} diff --git a/web_src/fomantic/build/components/search.css b/web_src/fomantic/build/components/search.css deleted file mode 100644 index b0a7b8db7e0f7..0000000000000 --- a/web_src/fomantic/build/components/search.css +++ /dev/null @@ -1,520 +0,0 @@ -/*! - * # Fomantic-UI - Search - * http://github.com/fomantic/Fomantic-UI/ - * - * - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ - - -/******************************* - Search -*******************************/ - -.ui.search { - position: relative; -} -.ui.search > .prompt { - margin: 0; - outline: none; - -webkit-appearance: none; - -webkit-tap-highlight-color: rgba(255, 255, 255, 0); - text-shadow: none; - font-style: normal; - font-weight: normal; - line-height: 1.21428571em; - padding: 0.67857143em 1em; - font-size: 1em; - background: #FFFFFF; - border: 1px solid rgba(34, 36, 38, 0.15); - color: rgba(0, 0, 0, 0.87); - box-shadow: 0 0 0 0 transparent inset; - transition: background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, border-color 0.1s ease; -} -.ui.search .prompt { - border-radius: 500rem; -} - -/*-------------- - Icon ----------------*/ - -.ui.search .prompt ~ .search.icon { - cursor: pointer; -} - -/*-------------- - Results ----------------*/ - -.ui.search > .results { - display: none; - position: absolute; - top: 100%; - left: 0; - transform-origin: center top; - white-space: normal; - text-align: left; - text-transform: none; - background: #FFFFFF; - margin-top: 0.5em; - width: 18em; - border-radius: 0.28571429rem; - box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15); - border: 1px solid #D4D4D5; - z-index: 998; -} -.ui.search > .results > :first-child { - border-radius: 0.28571429rem 0.28571429rem 0 0; -} -.ui.search > .results > :last-child { - border-radius: 0 0 0.28571429rem 0.28571429rem; -} - -/*-------------- - Result ----------------*/ - -.ui.search > .results .result { - cursor: pointer; - display: block; - overflow: hidden; - font-size: 1em; - padding: 0.85714286em 1.14285714em; - color: rgba(0, 0, 0, 0.87); - line-height: 1.33; - border-bottom: 1px solid rgba(34, 36, 38, 0.1); -} -.ui.search > .results .result:last-child { - border-bottom: none !important; -} - -/* Image */ -.ui.search > .results .result .image { - float: right; - overflow: hidden; - background: none; - width: 5em; - height: 3em; - border-radius: 0.25em; -} -.ui.search > .results .result .image img { - display: block; - width: auto; - height: 100%; -} - -/*-------------- - Info ----------------*/ - -.ui.search > .results .result .image + .content { - margin: 0 6em 0 0; -} -.ui.search > .results .result .title { - margin: -0.14285714em 0 0; - font-family: var(--fonts-regular); - font-weight: 500; - font-size: 1em; - color: rgba(0, 0, 0, 0.85); -} -.ui.search > .results .result .description { - margin-top: 0; - font-size: 0.92857143em; - color: rgba(0, 0, 0, 0.4); -} -.ui.search > .results .result .price { - float: right; - color: #21BA45; -} - -/*-------------- - Message ----------------*/ - -.ui.search > .results > .message { - padding: 1em 1em; -} -.ui.search > .results > .message .header { - font-family: var(--fonts-regular); - font-size: 1rem; - font-weight: 500; - color: rgba(0, 0, 0, 0.87); -} -.ui.search > .results > .message .description { - margin-top: 0.25rem; - font-size: 1em; - color: rgba(0, 0, 0, 0.87); -} - -/* View All Results */ -.ui.search > .results > .action { - display: block; - border-top: none; - background: #F3F4F5; - padding: 0.92857143em 1em; - color: rgba(0, 0, 0, 0.87); - font-weight: 500; - text-align: center; -} - - -/******************************* - States -*******************************/ - - -/*-------------------- - Focus ----------------------*/ - -.ui.search > .prompt:focus { - border-color: rgba(34, 36, 38, 0.35); - background: #FFFFFF; - color: rgba(0, 0, 0, 0.95); -} - -/*-------------------- - Loading - ---------------------*/ - -.ui.loading.search .input > i.icon:before { - position: absolute; - content: ''; - top: 50%; - left: 50%; - margin: -0.64285714em 0 0 -0.64285714em; - width: 1.28571429em; - height: 1.28571429em; - border-radius: 500rem; - border: 0.2em solid rgba(0, 0, 0, 0.1); -} -.ui.loading.search .input > i.icon:after { - position: absolute; - content: ''; - top: 50%; - left: 50%; - margin: -0.64285714em 0 0 -0.64285714em; - width: 1.28571429em; - height: 1.28571429em; - animation: loader 0.6s infinite linear; - border: 0.2em solid #767676; - border-radius: 500rem; - box-shadow: 0 0 0 1px transparent; -} - -/*-------------- - Hover ----------------*/ - -.ui.search > .results .result:hover, -.ui.category.search > .results .category .result:hover { - background: #F9FAFB; -} -.ui.search .action:hover:not(div) { - background: #E0E0E0; -} - -/*-------------- - Active ----------------*/ - -.ui.category.search > .results .category.active { - background: #F3F4F5; -} -.ui.category.search > .results .category.active > .name { - color: rgba(0, 0, 0, 0.87); -} -.ui.search > .results .result.active, -.ui.category.search > .results .category .result.active { - position: relative; - border-left-color: rgba(34, 36, 38, 0.1); - background: #F3F4F5; - box-shadow: none; -} -.ui.search > .results .result.active .title { - color: rgba(0, 0, 0, 0.85); -} -.ui.search > .results .result.active .description { - color: rgba(0, 0, 0, 0.85); -} - -/*-------------------- - Disabled - ----------------------*/ - - -/* Disabled */ -.ui.disabled.search { - cursor: default; - pointer-events: none; - opacity: var(--opacity-disabled); -} - - -/******************************* - Types -*******************************/ - - -/*-------------- - Selection - ---------------*/ - -.ui.search.selection .prompt { - border-radius: 0.28571429rem; -} - -/* Remove input */ -.ui.search.selection > .icon.input > .remove.icon { - pointer-events: none; - position: absolute; - left: auto; - opacity: 0; - color: ''; - top: 0; - right: 0; - transition: color 0.1s ease, opacity 0.1s ease; -} -.ui.search.selection > .icon.input > .active.remove.icon { - cursor: pointer; - opacity: 0.8; - pointer-events: auto; -} -.ui.search.selection > .icon.input:not([class*="left icon"]) > .icon ~ .remove.icon { - right: 1.85714em; -} -.ui.search.selection > .icon.input > .remove.icon:hover { - opacity: 1; - color: #DB2828; -} - -/*-------------- - Category - ---------------*/ - -.ui.category.search .results { - width: 28em; -} -.ui.category.search .results.animating, -.ui.category.search .results.visible { - display: table; -} - -/* Category */ -.ui.category.search > .results .category { - display: table-row; - background: #F3F4F5; - box-shadow: none; - transition: background 0.1s ease, border-color 0.1s ease; -} - -/* Last Category */ -.ui.category.search > .results .category:last-child { - border-bottom: none; -} - -/* First / Last */ -.ui.category.search > .results .category:first-child .name + .result { - border-radius: 0 0.28571429rem 0 0; -} -.ui.category.search > .results .category:last-child .result:last-child { - border-radius: 0 0 0.28571429rem 0; -} - -/* Category Result Name */ -.ui.category.search > .results .category > .name { - display: table-cell; - text-overflow: ellipsis; - width: 100px; - white-space: nowrap; - background: transparent; - font-family: var(--fonts-regular); - font-size: 1em; - padding: 0.4em 1em; - font-weight: 500; - color: rgba(0, 0, 0, 0.4); - border-bottom: 1px solid rgba(34, 36, 38, 0.1); -} - -/* Category Result */ -.ui.category.search > .results .category .results { - display: table-cell; - background: #FFFFFF; - border-left: 1px solid rgba(34, 36, 38, 0.15); - border-bottom: 1px solid rgba(34, 36, 38, 0.1); -} -.ui.category.search > .results .category .result { - border-bottom: 1px solid rgba(34, 36, 38, 0.1); - transition: background 0.1s ease, border-color 0.1s ease; - padding: 0.85714286em 1.14285714em; -} - - -/******************************* - Variations -*******************************/ - - -/*------------------- - Scrolling - --------------------*/ - -.ui.scrolling.search > .results, -.ui.search.long > .results, -.ui.search.short > .results { - overflow-x: hidden; - overflow-y: auto; - backface-visibility: hidden; - -webkit-overflow-scrolling: touch; -} -@media only screen and (max-width: 767.98px) { - .ui.scrolling.search > .results { - max-height: 12.17714286em; - } -} -@media only screen and (min-width: 768px) { - .ui.scrolling.search > .results { - max-height: 18.26571429em; - } -} -@media only screen and (min-width: 992px) { - .ui.scrolling.search > .results { - max-height: 24.35428571em; - } -} -@media only screen and (min-width: 1920px) { - .ui.scrolling.search > .results { - max-height: 36.53142857em; - } -} -@media only screen and (max-width: 767.98px) { - .ui.search.short > .results { - max-height: 12.17714286em; - } - .ui.search[class*="very short"] > .results { - max-height: 9.13285714em; - } - .ui.search.long > .results { - max-height: 24.35428571em; - } - .ui.search[class*="very long"] > .results { - max-height: 36.53142857em; - } -} -@media only screen and (min-width: 768px) { - .ui.search.short > .results { - max-height: 18.26571429em; - } - .ui.search[class*="very short"] > .results { - max-height: 13.69928571em; - } - .ui.search.long > .results { - max-height: 36.53142857em; - } - .ui.search[class*="very long"] > .results { - max-height: 54.79714286em; - } -} -@media only screen and (min-width: 992px) { - .ui.search.short > .results { - max-height: 24.35428571em; - } - .ui.search[class*="very short"] > .results { - max-height: 18.26571429em; - } - .ui.search.long > .results { - max-height: 48.70857143em; - } - .ui.search[class*="very long"] > .results { - max-height: 73.06285714em; - } -} -@media only screen and (min-width: 1920px) { - .ui.search.short > .results { - max-height: 36.53142857em; - } - .ui.search[class*="very short"] > .results { - max-height: 27.39857143em; - } - .ui.search.long > .results { - max-height: 73.06285714em; - } - .ui.search[class*="very long"] > .results { - max-height: 109.59428571em; - } -} - -/*------------------- - Left / Right - --------------------*/ - -.ui[class*="left aligned"].search > .results { - right: auto; - left: 0; -} -.ui[class*="right aligned"].search > .results { - right: 0; - left: auto; -} - -/*-------------- - Fluid ----------------*/ - -.ui.fluid.search .results { - width: 100%; -} - -/*-------------- - Sizes ----------------*/ - -.ui.search { - font-size: 1em; -} -.ui.mini.search { - font-size: 0.78571429em; -} -.ui.tiny.search { - font-size: 0.85714286em; -} -.ui.small.search { - font-size: 0.92857143em; -} -.ui.large.search { - font-size: 1.14285714em; -} -.ui.big.search { - font-size: 1.28571429em; -} -.ui.huge.search { - font-size: 1.42857143em; -} -.ui.massive.search { - font-size: 1.71428571em; -} - -/*-------------- - Mobile ----------------*/ - -@media only screen and (max-width: 767.98px) { - .ui.search .results { - max-width: calc(100vw - 2rem); - } -} - - -/******************************* - Theme Overrides -*******************************/ - - - -/******************************* - Site Overrides -*******************************/ - diff --git a/web_src/fomantic/build/fomantic.css b/web_src/fomantic/build/fomantic.css index 9b5f654a8eb2f..243e0e6b08ac4 100644 --- a/web_src/fomantic/build/fomantic.css +++ b/web_src/fomantic/build/fomantic.css @@ -1,2 +1 @@ @import "./components/modal.css"; -@import "./components/search.css"; diff --git a/web_src/fomantic/semantic.json b/web_src/fomantic/semantic.json index e135528f8ff59..4bd5d4e8fdbe3 100644 --- a/web_src/fomantic/semantic.json +++ b/web_src/fomantic/semantic.json @@ -23,7 +23,6 @@ "components": [ "api", "modal", - "search", "tab" ] } From e9b1ef663f1ae69e8998072fa1572613f8958d35 Mon Sep 17 00:00:00 2001 From: silverwind Date: Sun, 8 Mar 2026 21:52:54 +0100 Subject: [PATCH 2/4] Migrate fomantic modal CSS to first-party module Replace the fomantic modal.css (698 lines) with a minimal first-party module (329 lines) containing only the rules actually used. Hardcoded colors are replaced with theme variables, and the base.css overrides are merged directly into the new module. Eliminated unused CSS for: basic modal, legacy modal positioning, inverted dimmer coupling, aligned variations, undetached scrolling, overlay fullscreen, image content/description layout, all large size variants (large/big/huge/massive), loading state, scrolling content, and vendor-prefixed user-select. Co-Authored-By: Claude (Opus 4.6) --- web_src/css/base.css | 2 +- web_src/css/modules/modal.css | 309 ++++++++- web_src/fomantic/build/components/modal.css | 698 -------------------- web_src/fomantic/build/fomantic.css | 1 - web_src/fomantic/semantic.json | 1 - 5 files changed, 274 insertions(+), 737 deletions(-) delete mode 100644 web_src/fomantic/build/components/modal.css diff --git a/web_src/css/base.css b/web_src/css/base.css index 1f87e41879c89..70f1c86a6bab4 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -34,7 +34,7 @@ --transition-hover-fade: opacity 0.2s ease; /* fade transition for elements that show on hover */ /* z-index */ - --z-index-modal: 1001; /* modal dialog, hard-coded from Fomantic modal.css */ + --z-index-modal: 1001; /* modal dialog */ --z-index-toast: 1002; /* should be larger than modal */ --font-size-label: 12px; /* font size of individual labels */ diff --git a/web_src/css/modules/modal.css b/web_src/css/modules/modal.css index fd6dacc30c971..5d686746cbed2 100644 --- a/web_src/css/modules/modal.css +++ b/web_src/css/modules/modal.css @@ -1,32 +1,65 @@ -.ui.modal.g-modal-confirm { - max-width: min(800px, 90vw); - width: fit-content; +/* These are the remnants of the fomantic modal module */ + +.ui.modal { + position: absolute; + display: none; + z-index: var(--z-index-modal); + text-align: left; + background: var(--color-body); + border: none; + box-shadow: 1px 3px 3px 0 var(--color-shadow), 1px 3px 15px 2px var(--color-shadow); + transform-origin: 50% 25%; + flex: 0 0 auto; + border-radius: var(--border-radius); + user-select: text; + will-change: top, left, margin, transform, opacity; } -.ui.modal.g-modal-confirm > .inside.close.icon { - padding: 0; - width: 1em; - height: 1em; - top: 1.2em; +.ui.modal > :first-child:not(.icon) { + border-top-left-radius: var(--border-radius); + border-top-right-radius: var(--border-radius); } -.ui.modal > .close.inside { - color: inherit; +.ui.modal > :last-child { + border-bottom-left-radius: var(--border-radius); + border-bottom-right-radius: var(--border-radius); } -.ui.modal > .close.icon[height="16"] { - top: 0.7em; /* fomantic uses absolute layout, so if we have special icon size, it needs this trick to align vertically */ - color: var(--color-text-dark); +.ui.modal > .close { + cursor: pointer; + position: absolute; + top: -2.5rem; + right: -2.5rem; + z-index: 1; + opacity: 0.8; + font-size: 1.25em; + color: var(--color-white); + width: 2.25rem; + height: 2.25rem; + padding: 0.625rem 0 0; +} + +.ui.modal > .close:hover { + opacity: 1; } .ui.modal > .header { - /* can't use display:flex, because some headers have space-separated elements, eg: delete branch modal */ - color: var(--color-text-dark); + display: block; + font-family: var(--fonts-regular); background: var(--color-body); - border-color: var(--color-secondary); + margin: 0; + padding: 1.25rem 1.5rem; + box-shadow: none; + color: var(--color-text-dark); + border-bottom: 1px solid var(--color-secondary); border-top-left-radius: var(--border-radius); border-top-right-radius: var(--border-radius); - vertical-align: middle; +} + +.ui.modal > .header:not(.ui) { + font-size: 1.42857143rem; + line-height: 1.28571429em; + font-weight: var(--font-weight-medium); } .ui.modal > .header .svg { @@ -34,24 +67,12 @@ display: inline-block; } -.ui.modal { - background: var(--color-body); - box-shadow: 1px 3px 3px 0 var(--color-shadow), 1px 3px 15px 2px var(--color-shadow); -} - -/* Gitea sometimes use a form in a modal dialog, then the "positive" button could submit the form directly -Fomantic UI only supports the layout:
-However, Gitea uses the following layouts: -*
-*
-*
-*
-* ... -These inconsistent layouts should be refactored to simple ones. -*/ - .ui.modal > .content, .ui.modal form > .content { + display: block; + width: 100%; + font-size: 1em; + line-height: 1.4; padding: 1.5em; background: var(--color-body); border-radius: 0 0 var(--border-radius) var(--border-radius); @@ -61,19 +82,235 @@ These inconsistent layouts should be refactored to simple ones. .ui.modal .content + .actions, .ui.modal .content + form > .actions { background: var(--color-secondary-bg); - border-color: var(--color-secondary); padding: 1rem; + border-top: 1px solid var(--color-secondary); text-align: right; border-radius: 0 0 var(--border-radius) var(--border-radius); } +.ui.modal .actions > .button { + margin-left: 0.75em; +} + +@media only screen and (max-width: 767.98px) { + .ui.modal { + width: 95%; + } +} + +@media only screen and (min-width: 768px) { + .ui.modal { + width: 88%; + } +} + +@media only screen and (min-width: 992px) { + .ui.modal { + width: 850px; + } +} + +@media only screen and (min-width: 1200px) { + .ui.modal { + width: 900px; + } +} + +@media only screen and (min-width: 1920px) { + .ui.modal { + width: 950px; + } +} + +@media only screen and (max-width: 991.98px) { + .ui.modal > .header { + padding-right: 2.25rem; + } + .ui.modal > .close { + top: 1.0535rem; + right: 1rem; + color: var(--color-text); + } +} + +@media only screen and (max-width: 767.98px) { + .ui.modal > .header { + padding: 0.75rem 1rem !important; + padding-right: 2.25rem !important; + } + .ui.modal > .content { + display: block; + padding: 1rem !important; + } + .ui.modal > .close { + top: 0.5rem !important; + right: 0.5rem !important; + } + .ui.modal > .actions { + padding: 1rem 1rem 0 !important; + } + .ui.modal .actions > .buttons, + .ui.modal .actions > .button { + margin-bottom: 1rem; + } +} + +.ui.active.modal { + display: block; +} + +.scrolling.dimmable.dimmed { + overflow: hidden; +} + +.scrolling.dimmable > .dimmer { + justify-content: flex-start; + position: fixed; +} + +.scrolling.dimmable.dimmed > .dimmer { + overflow: auto; +} + +.modals.dimmer .ui.scrolling.modal { + margin: 2rem auto; +} + +.ui.modal > .close.inside + .header { + padding-right: 2.25rem; +} + +.ui.modal > .close.inside { + top: 1.0535rem; + right: 1rem; + color: inherit; +} + +.ui.modal > .close.icon[height="16"] { + top: 0.7em; + color: var(--color-text-dark); +} + +.ui.mini.modal > .header:not(.ui) { + font-size: 1.3em; +} + +@media only screen and (max-width: 767.98px) { + .ui.mini.modal { + width: 95%; + } +} + +@media only screen and (min-width: 768px) { + .ui.mini.modal { + width: 35.2%; + } +} + +@media only screen and (min-width: 992px) { + .ui.mini.modal { + width: 340px; + } +} + +@media only screen and (min-width: 1200px) { + .ui.mini.modal { + width: 360px; + } +} + +@media only screen and (min-width: 1920px) { + .ui.mini.modal { + width: 380px; + } +} + +.ui.tiny.modal > .header:not(.ui) { + font-size: 1.3em; +} + +@media only screen and (max-width: 767.98px) { + .ui.tiny.modal { + width: 95%; + } +} + +@media only screen and (min-width: 768px) { + .ui.tiny.modal { + width: 52.8%; + } +} + +@media only screen and (min-width: 992px) { + .ui.tiny.modal { + width: 510px; + } +} + +@media only screen and (min-width: 1200px) { + .ui.tiny.modal { + width: 540px; + } +} + +@media only screen and (min-width: 1920px) { + .ui.tiny.modal { + width: 570px; + } +} + +.ui.small.modal > .header:not(.ui) { + font-size: 1.3em; +} + +@media only screen and (max-width: 767.98px) { + .ui.small.modal { + width: 95%; + } +} + +@media only screen and (min-width: 768px) { + .ui.small.modal { + width: 70.4%; + } +} + +@media only screen and (min-width: 992px) { + .ui.small.modal { + width: 680px; + } +} + +@media only screen and (min-width: 1200px) { + .ui.small.modal { + width: 720px; + } +} + +@media only screen and (min-width: 1920px) { + .ui.small.modal { + width: 760px; + } +} + +.ui.modal.g-modal-confirm { + max-width: min(800px, 90vw); + width: fit-content; +} + +.ui.modal.g-modal-confirm > .inside.close.icon { + padding: 0; + width: 1em; + height: 1em; + top: 1.2em; +} + .ui.modal .content > form > .actions, .ui.modal .content > .actions { - padding-top: 1em; /* if the "actions" is in the "content", some paddings are already added by the "content" */ + padding-top: 1em; text-align: right; } -/* positive/negative action buttons */ .ui.modal .actions > .ui.button { display: inline-flex; align-items: center; diff --git a/web_src/fomantic/build/components/modal.css b/web_src/fomantic/build/components/modal.css deleted file mode 100644 index 7da015cfd042f..0000000000000 --- a/web_src/fomantic/build/components/modal.css +++ /dev/null @@ -1,698 +0,0 @@ -/*! - * # Fomantic-UI - Modal - * http://github.com/fomantic/Fomantic-UI/ - * - * - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ - - -/******************************* - Modal -*******************************/ - -.ui.modal { - position: absolute; - display: none; - z-index: 1001; - text-align: left; - background: #FFFFFF; - border: none; - box-shadow: 1px 3px 3px 0 rgba(0, 0, 0, 0.2), 1px 3px 15px 2px rgba(0, 0, 0, 0.2); - transform-origin: 50% 25%; - flex: 0 0 auto; - border-radius: 0.28571429rem; - -webkit-user-select: text; - -moz-user-select: text; - user-select: text; - will-change: top, left, margin, transform, opacity; -} -.ui.modal > :first-child:not(.icon):not(.dimmer), -.ui.modal > i.icon:first-child + *, -.ui.modal > .dimmer:first-child + *:not(.icon), -.ui.modal > .dimmer:first-child + i.icon + * { - border-top-left-radius: 0.28571429rem; - border-top-right-radius: 0.28571429rem; -} -.ui.modal > :last-child { - border-bottom-left-radius: 0.28571429rem; - border-bottom-right-radius: 0.28571429rem; -} -.ui.modal > .ui.dimmer { - border-radius: inherit; -} - - -/******************************* - Content -*******************************/ - - -/*-------------- - Close ----------------*/ - -.ui.modal > .close { - cursor: pointer; - position: absolute; - top: -2.5rem; - right: -2.5rem; - z-index: 1; - opacity: 0.8; - font-size: 1.25em; - color: #FFFFFF; - width: 2.25rem; - height: 2.25rem; - padding: 0.625rem 0 0 0; -} -.ui.modal > .close:hover { - opacity: 1; -} - -/*-------------- - Header ----------------*/ - -.ui.modal > .header { - display: block; - font-family: var(--fonts-regular); - background: #FFFFFF; - margin: 0; - padding: 1.25rem 1.5rem; - box-shadow: none; - color: rgba(0, 0, 0, 0.85); - border-bottom: 1px solid rgba(34, 36, 38, 0.15); -} -.ui.modal > .header:not(.ui) { - font-size: 1.42857143rem; - line-height: 1.28571429em; - font-weight: 500; -} - -/*-------------- - Content ----------------*/ - -.ui.modal > .content { - display: block; - width: 100%; - font-size: 1em; - line-height: 1.4; - padding: 1.5rem; - background: #FFFFFF; -} -.ui.modal > .image.content { - display: flex; - flex-direction: row; -} - -/* Image */ -.ui.modal > .content > .image { - display: block; - flex: 0 1 auto; - width: ''; - align-self: start; - max-width: 100%; -} - -.ui.modal > [class*="stretched"] { - align-self: stretch; -} - -/* Description */ -.ui.modal > .content > .description { - display: block; - flex: 1 0 auto; - min-width: 0; - align-self: start; -} -.ui.modal > .content > i.icon + .description, -.ui.modal > .content > .image + .description { - flex: 0 1 auto; - min-width: ''; - width: auto; - padding-left: 2em; -} -/*rtl:ignore*/ -.ui.modal > .content > .image > i.icon { - margin: 0; - opacity: 1; - width: auto; - line-height: 1; - font-size: 8rem; -} - -/*-------------- - Actions ----------------*/ - -.ui.modal > .actions { - background: #F9FAFB; - padding: 1rem 1rem; - border-top: 1px solid rgba(34, 36, 38, 0.15); - text-align: right; -} -.ui.modal .actions > .button:not(.fluid) { - margin-left: 0.75em; -} -.ui.basic.modal > .actions { - border-top: none; -} - -/*------------------- - Responsive ---------------------*/ - - -/* Modal Width */ -@media only screen and (max-width: 767.98px) { - .ui.modal:not(.fullscreen) { - width: 95%; - margin: 0 0 0 0; - } -} -@media only screen and (min-width: 768px) { - .ui.modal:not(.fullscreen) { - width: 88%; - margin: 0 0 0 0; - } -} -@media only screen and (min-width: 992px) { - .ui.modal:not(.fullscreen) { - width: 850px; - margin: 0 0 0 0; - } -} -@media only screen and (min-width: 1200px) { - .ui.modal:not(.fullscreen) { - width: 900px; - margin: 0 0 0 0; - } -} -@media only screen and (min-width: 1920px) { - .ui.modal:not(.fullscreen) { - width: 950px; - margin: 0 0 0 0; - } -} - -/* Tablet and Mobile */ -@media only screen and (max-width: 991.98px) { - .ui.modal > .header { - padding-right: 2.25rem; - } - .ui.modal > .close { - top: 1.0535rem; - right: 1rem; - color: rgba(0, 0, 0, 0.87); - } -} - -/* Mobile */ -@media only screen and (max-width: 767.98px) { - .ui.modal > .header { - padding: 0.75rem 1rem !important; - padding-right: 2.25rem !important; - } - .ui.overlay.fullscreen.modal > .content.content.content { - min-height: calc(100vh - 8.1rem); - } - .ui.overlay.fullscreen.modal > .scrolling.content.content.content { - max-height: calc(100vh - 8.1rem); - } - .ui.modal > .content { - display: block; - padding: 1rem !important; - } - .ui.modal > .close { - top: 0.5rem !important; - right: 0.5rem !important; - } - /*rtl:ignore*/ - .ui.modal .image.content { - flex-direction: column; - } - .ui.modal > .content > .image { - display: block; - max-width: 100%; - margin: 0 auto !important; - text-align: center; - padding: 0 0 1rem !important; - } - .ui.modal > .content > .image > i.icon { - font-size: 5rem; - text-align: center; - } - /*rtl:ignore*/ - .ui.modal > .content > .description { - display: block; - width: 100% !important; - margin: 0 !important; - padding: 1rem 0 !important; - box-shadow: none; - } - -/* Let Buttons Stack */ - .ui.modal > .actions { - padding: 1rem 1rem 0rem !important; - } - .ui.modal .actions > .buttons, - .ui.modal .actions > .button { - margin-bottom: 1rem; - } -} - -/*-------------- - Coupling ----------------*/ - -.ui.inverted.dimmer > .ui.modal { - box-shadow: 1px 3px 10px 2px rgba(0, 0, 0, 0.2); -} - - -/******************************* - Types -*******************************/ - -.ui.basic.modal { - background-color: transparent; - border: none; - border-radius: 0; - box-shadow: none !important; - color: #FFFFFF; -} -.ui.basic.modal > .header, -.ui.basic.modal > .content, -.ui.basic.modal > .actions { - background-color: transparent; -} -.ui.basic.modal > .header { - color: #FFFFFF; - border-bottom: none; -} -.ui.basic.modal > .close { - top: 1rem; - right: 1.5rem; - color: #FFFFFF; -} -.ui.inverted.dimmer > .basic.modal { - color: rgba(0, 0, 0, 0.87); -} -.ui.inverted.dimmer > .ui.basic.modal > .header { - color: rgba(0, 0, 0, 0.85); -} - -/* Resort to margin positioning if legacy */ -.ui.legacy.legacy.modal, -.ui.legacy.legacy.page.dimmer > .ui.modal { - left: 50% !important; -} -.ui.legacy.legacy.modal:not(.aligned), -.ui.legacy.legacy.page.dimmer > .ui.modal:not(.aligned) { - top: 50%; -} -.ui.legacy.legacy.page.dimmer > .ui.scrolling.modal:not(.aligned), -.ui.page.dimmer > .ui.scrolling.legacy.legacy.modal:not(.aligned), -.ui.top.aligned.legacy.legacy.page.dimmer > .ui.modal:not(.aligned), -.ui.top.aligned.dimmer > .ui.legacy.legacy.modal:not(.aligned) { - top: auto; -} -.ui.legacy.overlay.fullscreen.modal { - margin-top: -2rem !important; -} - - -/******************************* - States -*******************************/ - -.ui.loading.modal { - display: block; - visibility: hidden; - z-index: -1; -} -.ui.active.modal { - display: block; -} - - -/******************************* - Variations -*******************************/ - - -/*-------------- - Aligned - ---------------*/ - -.modals.dimmer .ui.top.aligned.modal { - top: 5vh; -} -.modals.dimmer .ui.bottom.aligned.modal { - bottom: 5vh; -} -@media only screen and (max-width: 767.98px) { - .modals.dimmer .ui.top.aligned.modal { - top: 1rem; - } - .modals.dimmer .ui.bottom.aligned.modal { - bottom: 1rem; - } -} - -/*-------------- - Scrolling - ---------------*/ - - -/* Scrolling Dimmer */ -.scrolling.dimmable.dimmed { - overflow: hidden; -} -.scrolling.dimmable > .dimmer { - justify-content: flex-start; - position: fixed; -} -.scrolling.dimmable.dimmed > .dimmer { - overflow: auto; - -webkit-overflow-scrolling: touch; -} -.modals.dimmer .ui.scrolling.modal:not(.fullscreen) { - margin: 2rem auto; -} - -/* Fix for Firefox, Edge, IE11 */ -.modals.dimmer .ui.scrolling.modal:not([class*="overlay fullscreen"])::after { - content: '\00A0'; - position: absolute; - height: 2rem; -} - -/* Undetached Scrolling */ -.scrolling.undetached.dimmable.dimmed { - overflow: auto; - -webkit-overflow-scrolling: touch; -} -.scrolling.undetached.dimmable.dimmed > .dimmer { - overflow: hidden; -} -.scrolling.undetached.dimmable .ui.scrolling.modal:not(.fullscreen) { - position: absolute; - left: 50%; -} - -/* Scrolling Content */ -.ui.modal > .scrolling.content { - max-height: calc(80vh - 10rem); - overflow: auto; -} -.ui.overlay.fullscreen.modal > .content { - min-height: calc(100vh - 9.1rem); -} -.ui.overlay.fullscreen.modal > .scrolling.content { - max-height: calc(100vh - 9.1rem); -} - -/*-------------- - Full Screen - ---------------*/ - -.ui.fullscreen.modal { - width: 95%; - left: 2.5%; - margin: 1em auto; -} -.ui.overlay.fullscreen.modal { - width: 100%; - left: 0; - margin: 0 auto; - top: 0; - border-radius: 0; -} -.ui.modal > .close.inside + .header, -.ui.fullscreen.modal > .header { - padding-right: 2.25rem; -} -.ui.modal > .close.inside, -.ui.fullscreen.modal > .close { - top: 1.0535rem; - right: 1rem; - color: rgba(0, 0, 0, 0.87); -} -.ui.basic.fullscreen.modal > .close { - color: #FFFFFF; -} - -/*-------------- - Size ----------------*/ - -.ui.modal { - font-size: 1rem; -} -.ui.mini.modal > .header:not(.ui) { - font-size: 1.3em; -} -@media only screen and (max-width: 767.98px) { - .ui.mini.modal { - width: 95%; - margin: 0 0 0 0; - } -} -@media only screen and (min-width: 768px) { - .ui.mini.modal { - width: 35.2%; - margin: 0 0 0 0; - } -} -@media only screen and (min-width: 992px) { - .ui.mini.modal { - width: 340px; - margin: 0 0 0 0; - } -} -@media only screen and (min-width: 1200px) { - .ui.mini.modal { - width: 360px; - margin: 0 0 0 0; - } -} -@media only screen and (min-width: 1920px) { - .ui.mini.modal { - width: 380px; - margin: 0 0 0 0; - } -} -.ui.tiny.modal > .header:not(.ui) { - font-size: 1.3em; -} -@media only screen and (max-width: 767.98px) { - .ui.tiny.modal { - width: 95%; - margin: 0 0 0 0; - } -} -@media only screen and (min-width: 768px) { - .ui.tiny.modal { - width: 52.8%; - margin: 0 0 0 0; - } -} -@media only screen and (min-width: 992px) { - .ui.tiny.modal { - width: 510px; - margin: 0 0 0 0; - } -} -@media only screen and (min-width: 1200px) { - .ui.tiny.modal { - width: 540px; - margin: 0 0 0 0; - } -} -@media only screen and (min-width: 1920px) { - .ui.tiny.modal { - width: 570px; - margin: 0 0 0 0; - } -} -.ui.small.modal > .header:not(.ui) { - font-size: 1.3em; -} -@media only screen and (max-width: 767.98px) { - .ui.small.modal { - width: 95%; - margin: 0 0 0 0; - } -} -@media only screen and (min-width: 768px) { - .ui.small.modal { - width: 70.4%; - margin: 0 0 0 0; - } -} -@media only screen and (min-width: 992px) { - .ui.small.modal { - width: 680px; - margin: 0 0 0 0; - } -} -@media only screen and (min-width: 1200px) { - .ui.small.modal { - width: 720px; - margin: 0 0 0 0; - } -} -@media only screen and (min-width: 1920px) { - .ui.small.modal { - width: 760px; - margin: 0 0 0 0; - } -} -.ui.large.modal > .header:not(.ui) { - font-size: 1.6em; -} -@media only screen and (max-width: 767.98px) { - .ui.large.modal { - width: 95%; - margin: 0 0 0 0; - } -} -@media only screen and (min-width: 768px) { - .ui.large.modal { - width: 88%; - margin: 0 0 0 0; - } -} -@media only screen and (min-width: 992px) { - .ui.large.modal { - width: 1020px; - margin: 0 0 0 0; - } -} -@media only screen and (min-width: 1200px) { - .ui.large.modal { - width: 1080px; - margin: 0 0 0 0; - } -} -@media only screen and (min-width: 1920px) { - .ui.large.modal { - width: 1140px; - margin: 0 0 0 0; - } -} -.ui.big.modal > .header:not(.ui) { - font-size: 1.6em; -} -@media only screen and (max-width: 767.98px) { - .ui.big.modal { - width: 95%; - margin: 0 0 0 0; - } -} -@media only screen and (min-width: 768px) { - .ui.big.modal { - width: 88%; - margin: 0 0 0 0; - } -} -@media only screen and (min-width: 992px) { - .ui.big.modal { - width: 1190px; - margin: 0 0 0 0; - } -} -@media only screen and (min-width: 1200px) { - .ui.big.modal { - width: 1260px; - margin: 0 0 0 0; - } -} -@media only screen and (min-width: 1920px) { - .ui.big.modal { - width: 1330px; - margin: 0 0 0 0; - } -} -.ui.huge.modal > .header:not(.ui) { - font-size: 1.6em; -} -@media only screen and (max-width: 767.98px) { - .ui.huge.modal { - width: 95%; - margin: 0 0 0 0; - } -} -@media only screen and (min-width: 768px) { - .ui.huge.modal { - width: 88%; - margin: 0 0 0 0; - } -} -@media only screen and (min-width: 992px) { - .ui.huge.modal { - width: 1360px; - margin: 0 0 0 0; - } -} -@media only screen and (min-width: 1200px) { - .ui.huge.modal { - width: 1440px; - margin: 0 0 0 0; - } -} -@media only screen and (min-width: 1920px) { - .ui.huge.modal { - width: 1520px; - margin: 0 0 0 0; - } -} -.ui.massive.modal > .header:not(.ui) { - font-size: 1.8em; -} -@media only screen and (max-width: 767.98px) { - .ui.massive.modal { - width: 95%; - margin: 0 0 0 0; - } -} -@media only screen and (min-width: 768px) { - .ui.massive.modal { - width: 88%; - margin: 0 0 0 0; - } -} -@media only screen and (min-width: 992px) { - .ui.massive.modal { - width: 1530px; - margin: 0 0 0 0; - } -} -@media only screen and (min-width: 1200px) { - .ui.massive.modal { - width: 1620px; - margin: 0 0 0 0; - } -} -@media only screen and (min-width: 1920px) { - .ui.massive.modal { - width: 1710px; - margin: 0 0 0 0; - } -} - - -/******************************* - Theme Overrides -*******************************/ - - - -/******************************* - Site Overrides -*******************************/ - diff --git a/web_src/fomantic/build/fomantic.css b/web_src/fomantic/build/fomantic.css index 243e0e6b08ac4..e69de29bb2d1d 100644 --- a/web_src/fomantic/build/fomantic.css +++ b/web_src/fomantic/build/fomantic.css @@ -1 +0,0 @@ -@import "./components/modal.css"; diff --git a/web_src/fomantic/semantic.json b/web_src/fomantic/semantic.json index 4bd5d4e8fdbe3..8a59dd1683c46 100644 --- a/web_src/fomantic/semantic.json +++ b/web_src/fomantic/semantic.json @@ -22,7 +22,6 @@ "admin": false, "components": [ "api", - "modal", "tab" ] } From 9e753e44fd79397873009f0a3554af3f8527fd62 Mon Sep 17 00:00:00 2001 From: silverwind Date: Sun, 8 Mar 2026 22:12:08 +0100 Subject: [PATCH 3/4] Remove empty fomantic.css and its webpack entry No fomantic CSS components remain, so remove the empty file and its webpack entry point. Co-Authored-By: Claude (Opus 4.6) --- web_src/fomantic/build/fomantic.css | 0 webpack.config.ts | 1 - 2 files changed, 1 deletion(-) delete mode 100644 web_src/fomantic/build/fomantic.css diff --git a/web_src/fomantic/build/fomantic.css b/web_src/fomantic/build/fomantic.css deleted file mode 100644 index e69de29bb2d1d..0000000000000 diff --git a/webpack.config.ts b/webpack.config.ts index ef082393540e0..e3ef996909dd6 100644 --- a/webpack.config.ts +++ b/webpack.config.ts @@ -66,7 +66,6 @@ export default { entry: { index: [ fileURLToPath(new URL('web_src/js/index.ts', import.meta.url)), - fileURLToPath(new URL('web_src/fomantic/build/fomantic.css', import.meta.url)), fileURLToPath(new URL('web_src/css/index.css', import.meta.url)), ], swagger: [ From c917134c154657ec6e24c6adc1b6bc7cb2d22d73 Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 14 Mar 2026 09:44:30 +0100 Subject: [PATCH 4/4] Add transform-origin to search results for scale animation Restore transform-origin: center top on .ui.search > .results to preserve the fomantic transition module scale animation origin. Co-Authored-By: Claude (Opus 4.6) --- web_src/css/modules/search.css | 1 + 1 file changed, 1 insertion(+) diff --git a/web_src/css/modules/search.css b/web_src/css/modules/search.css index c62bd0ff9e455..647b7e27a3a5f 100644 --- a/web_src/css/modules/search.css +++ b/web_src/css/modules/search.css @@ -18,6 +18,7 @@ box-shadow: 0 2px 4px 0 var(--color-shadow), 0 2px 10px 0 var(--color-shadow); border: 1px solid var(--color-secondary); z-index: 998; + transform-origin: center top; overflow-wrap: anywhere; }