From 89cd3737bc4fca9cf0f6aea8120ec184acde8253 Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 17 Mar 2026 07:07:48 +0100 Subject: [PATCH] Migrate fomantic `search` and `modal` CSS to first-party modules (#36869) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replace the fomantic search.css (520 lines) and modal.css (698 lines) with minimal first-party modules containing only the rules actually used. Hardcoded colors are replaced with theme variables, and the base.css overrides are merged directly into the new modules. With this change, all original Fomantic CSS is now gone. **search.css**: 520 → 85 lines **modal.css**: 698 → 329 lines Co-authored-by: Claude (Opus 4.6) --- web_src/css/base.css | 33 +- web_src/css/index.css | 1 + web_src/css/modules/modal.css | 355 ++++++++-- web_src/css/modules/search.css | 86 +++ web_src/fomantic/build/components/modal.css | 698 ------------------- web_src/fomantic/build/components/search.css | 520 -------------- web_src/fomantic/build/fomantic.css | 2 - web_src/fomantic/semantic.json | 2 - webpack.config.ts | 1 - 9 files changed, 384 insertions(+), 1314 deletions(-) create mode 100644 web_src/css/modules/search.css delete mode 100644 web_src/fomantic/build/components/modal.css delete mode 100644 web_src/fomantic/build/components/search.css delete mode 100644 web_src/fomantic/build/fomantic.css diff --git a/web_src/css/base.css b/web_src/css/base.css index 1515b12320..d449fcef1e 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 */ @@ -337,37 +337,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 3edb3df6c1..8107d06f1d 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/modal.css b/web_src/css/modules/modal.css index fd6dacc30c..5d686746cb 100644 --- a/web_src/css/modules/modal.css +++ b/web_src/css/modules/modal.css @@ -1,3 +1,298 @@ +/* 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 > :first-child:not(.icon) { + border-top-left-radius: var(--border-radius); + border-top-right-radius: var(--border-radius); +} + +.ui.modal > :last-child { + border-bottom-left-radius: var(--border-radius); + border-bottom-right-radius: var(--border-radius); +} + +.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 { + display: block; + font-family: var(--fonts-regular); + background: var(--color-body); + 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); +} + +.ui.modal > .header:not(.ui) { + font-size: 1.42857143rem; + line-height: 1.28571429em; + font-weight: var(--font-weight-medium); +} + +.ui.modal > .header .svg { + vertical-align: middle; + display: inline-block; +} + +.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); +} + +.ui.modal > .actions, +.ui.modal .content + .actions, +.ui.modal .content + form > .actions { + background: var(--color-secondary-bg); + 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; @@ -10,70 +305,12 @@ top: 1.2em; } -.ui.modal > .close.inside { - color: inherit; -} - -.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 > .header { - /* can't use display:flex, because some headers have space-separated elements, eg: delete branch modal */ - color: var(--color-text-dark); - background: var(--color-body); - border-color: var(--color-secondary); - border-top-left-radius: var(--border-radius); - border-top-right-radius: var(--border-radius); - vertical-align: middle; -} - -.ui.modal > .header .svg { - vertical-align: middle; - 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 { - padding: 1.5em; - background: var(--color-body); - border-radius: 0 0 var(--border-radius) var(--border-radius); -} - -.ui.modal > .actions, -.ui.modal .content + .actions, -.ui.modal .content + form > .actions { - background: var(--color-secondary-bg); - border-color: var(--color-secondary); - padding: 1rem; - text-align: right; - border-radius: 0 0 var(--border-radius) var(--border-radius); -} - .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/css/modules/search.css b/web_src/css/modules/search.css new file mode 100644 index 0000000000..647b7e27a3 --- /dev/null +++ b/web_src/css/modules/search.css @@ -0,0 +1,86 @@ +/* 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; + transform-origin: center top; + 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/modal.css b/web_src/fomantic/build/components/modal.css deleted file mode 100644 index 7da015cfd0..0000000000 --- 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/components/search.css b/web_src/fomantic/build/components/search.css deleted file mode 100644 index b0a7b8db7e..0000000000 --- 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 deleted file mode 100644 index 9b5f654a8e..0000000000 --- a/web_src/fomantic/build/fomantic.css +++ /dev/null @@ -1,2 +0,0 @@ -@import "./components/modal.css"; -@import "./components/search.css"; diff --git a/web_src/fomantic/semantic.json b/web_src/fomantic/semantic.json index e135528f8f..8a59dd1683 100644 --- a/web_src/fomantic/semantic.json +++ b/web_src/fomantic/semantic.json @@ -22,8 +22,6 @@ "admin": false, "components": [ "api", - "modal", - "search", "tab" ] } diff --git a/webpack.config.ts b/webpack.config.ts index ef08239354..e3ef996909 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: [