diff --git a/StylesheetTestGui.ts b/StylesheetTestGui.ts new file mode 100644 index 000000000..2ebe1dfbb --- /dev/null +++ b/StylesheetTestGui.ts @@ -0,0 +1,4 @@ +import SvelteUIElement from "./UI/Base/SvelteUIElement"; +import StylesheetTestGui from "./UI/StylesheetTestGui.svelte"; + +new SvelteUIElement(StylesheetTestGui, {}).AttachTo("main") diff --git a/UI/Popup/DeleteWizard.ts b/UI/Popup/DeleteWizard.ts index 18cb6241d..637fb3267 100644 --- a/UI/Popup/DeleteWizard.ts +++ b/UI/Popup/DeleteWizard.ts @@ -108,9 +108,7 @@ export default class DeleteWizard extends Toggle { const deleteOptionPicker = DeleteWizard.constructMultipleChoice(options, tagsSource, state) const deleteDialog = new Combine([ new Title( - new SubstitutedTranslation(t.whyDelete, tagsSource, state).SetClass( - "question-text" - ), + new SubstitutedTranslation(t.whyDelete, tagsSource, state), 3 ), deleteOptionPicker, diff --git a/UI/Popup/LanguageElement.ts b/UI/Popup/LanguageElement.ts index b07e90232..754026228 100644 --- a/UI/Popup/LanguageElement.ts +++ b/UI/Popup/LanguageElement.ts @@ -143,7 +143,7 @@ export class LanguageElement implements SpecialVisualization { const saveButton = new SaveButton( selector.GetValue().map((lngs) => (lngs.length > 0 ? "true" : undefined)), - state.osmConnection + state ).onClick(() => { const selectedLanguages = selector.GetValue().data const currentLanguages = foundLanguages.data diff --git a/UI/Popup/SaveButton.ts b/UI/Popup/SaveButton.ts index 63968ece5..fba21d610 100644 --- a/UI/Popup/SaveButton.ts +++ b/UI/Popup/SaveButton.ts @@ -1,10 +1,11 @@ -import { ImmutableStore, Store } from "../../Logic/UIEventSource" +import {Store} from "../../Logic/UIEventSource" import Translations from "../i18n/Translations" -import { OsmConnection } from "../../Logic/Osm/OsmConnection" +import {OsmConnection} from "../../Logic/Osm/OsmConnection" import Toggle from "../Input/Toggle" import BaseUIElement from "../BaseUIElement" import Combine from "../Base/Combine" import Svg from "../../Svg" +import {LoginToggle} from "./LoginButton"; export class EditButton extends Toggle { constructor(osmConnection: OsmConnection, onClick: () => void) { @@ -19,10 +20,13 @@ export class EditButton extends Toggle { } } -export class SaveButton extends Toggle { +export class SaveButton extends LoginToggle { constructor( value: Store, - osmConnection: OsmConnection, + state: { + readonly osmConnection?: OsmConnection + readonly featureSwitchUserbadge?: Store + }, textEnabled?: BaseUIElement, textDisabled?: BaseUIElement ) { @@ -30,11 +34,6 @@ export class SaveButton extends Toggle { throw "No event source for savebutton, something is wrong" } - const pleaseLogin = Translations.t.general.loginToStart - .Clone() - .SetClass("login-button-friendly") - .onClick(() => osmConnection?.AttemptLogin()) - const isSaveable = value.map((v) => v !== false && (v ?? "") !== "") const saveEnabled = (textEnabled ?? Translations.t.general.save.Clone()).SetClass(`btn`) @@ -43,6 +42,6 @@ export class SaveButton extends Toggle { ) const save = new Toggle(saveEnabled, saveDisabled, isSaveable) - super(save, pleaseLogin, osmConnection?.isLoggedIn ?? new ImmutableStore(false)) + super(save, Translations.t.general.loginToStart, state) } } diff --git a/UI/Reviews/ReviewForm.ts b/UI/Reviews/ReviewForm.ts index dd9928f91..dd604f6db 100644 --- a/UI/Reviews/ReviewForm.ts +++ b/UI/Reviews/ReviewForm.ts @@ -44,9 +44,7 @@ export default class ReviewForm extends LoginToggle { const saveButton = new Toggle( Translations.t.reviews.no_rating.SetClass("block alert"), - new SubtleButton(Svg.confirm_svg(), Translations.t.reviews.save, { - extraClasses: "border-attention-catch", - }) + new SubtleButton(Svg.confirm_svg(), Translations.t.reviews.save) .OnClickWithLoading( Translations.t.reviews.saving_review.SetClass("alert"), async () => { diff --git a/UI/Reviews/SingleReview.ts b/UI/Reviews/SingleReview.ts index ee18ca3d0..de51a226a 100644 --- a/UI/Reviews/SingleReview.ts +++ b/UI/Reviews/SingleReview.ts @@ -13,13 +13,15 @@ export default class SingleReview extends Combine { const reviewAuthor = review.metadata.nickname ?? (review.metadata.given_name ?? "") + (review.metadata.family_name ?? "") + const authorElement = new FixedUiElement(reviewAuthor).SetClass("font-bold") + super([ new Combine([SingleReview.GenStars(review.rating)]), new FixedUiElement(review.opinion), new Combine([ new Combine([ - new FixedUiElement(reviewAuthor).SetClass("font-bold"), - review.metadata.is_affiliated + authorElement, + review.metadata.is_affiliated ? Translations.t.reviews.affiliated_reviewer_warning : "", ]).SetStyle("margin-right: 0.5em"), @@ -29,15 +31,15 @@ export default class SingleReview extends Combine { )}-${Utils.TwoDigits(date.getDate())} ${Utils.TwoDigits( date.getHours() )}:${Utils.TwoDigits(date.getMinutes())}` - ).SetClass("subtle-lighter"), + ).SetClass("subtle"), ]).SetClass("flex mb-4 justify-end"), ]) this.SetClass("block p-2 m-4 rounded-xl subtle-background review-element") review.madeByLoggedInUser.addCallbackAndRun((madeByUser) => { if (madeByUser) { - this.SetClass("border-attention-catch") + authorElement.SetClass("thanks") } else { - this.RemoveClass("border-attention-catch") + authorElement.RemoveClass("thanks") } }) } diff --git a/UI/SpecialVisualizations.ts b/UI/SpecialVisualizations.ts index c3365b101..0037dd030 100644 --- a/UI/SpecialVisualizations.ts +++ b/UI/SpecialVisualizations.ts @@ -129,7 +129,7 @@ class NearbyImageVis implements SpecialVisualization { } saveButton = new SaveButton( selectedImage, - state.osmConnection, + state, confirmText, t.noImageSelected ) diff --git a/UI/StylesheetTestGui.svelte b/UI/StylesheetTestGui.svelte new file mode 100644 index 000000000..635579ce3 --- /dev/null +++ b/UI/StylesheetTestGui.svelte @@ -0,0 +1,58 @@ + + +
+ +

Stylesheet testing grounds

+ + This document exists to explore the style hierarchy. + +
+

Normal background

+ There are a few styles, such as the normal-background-style which is used if there is + nothing special going on. Some general information, with at most a + link to someplace. + Alert: something went wrong + Thank you! Operation successful +
+ +
+

Low interaction

+

+ There are low-interaction areas, where some buttons might appear. +

+ + + + + + +
+ +
+ +
+ + +
+ + Alert: something went wrong + Thank you! Operation successful +
+ +
+

Interactive area

+

+ There are interactive areas, where some buttons might appear. +

+ + + + + Alert: something went wrong + Thank you! Operation successful +
+ +
diff --git a/assets/layers/bike_cleaning/bike_cleaning_icon.svg b/assets/layers/bike_cleaning/bike_cleaning_icon.svg index 7283c4358..92a6739fe 100644 --- a/assets/layers/bike_cleaning/bike_cleaning_icon.svg +++ b/assets/layers/bike_cleaning/bike_cleaning_icon.svg @@ -1,18 +1,67 @@ - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + - \ No newline at end of file + diff --git a/assets/layers/charging_station/charging_station.json b/assets/layers/charging_station/charging_station.json index 905914b38..7722b4497 100644 --- a/assets/layers/charging_station/charging_station.json +++ b/assets/layers/charging_station/charging_station.json @@ -5218,4 +5218,4 @@ }, "neededChangesets": 10 } -} +} \ No newline at end of file diff --git a/assets/svg/license_info.json b/assets/svg/license_info.json index eadb7dba0..fc572a123 100644 --- a/assets/svg/license_info.json +++ b/assets/svg/license_info.json @@ -59,18 +59,6 @@ ], "sources": [] }, - { - "path": "ampersand.svg", - "license": "CC0; trivial", - "authors": [], - "sources": [] - }, - { - "path": "ampersand.svg", - "license": "CC0; trivial", - "authors": [], - "sources": [] - }, { "path": "back.svg", "license": "CC0", @@ -165,22 +153,6 @@ "https://commons.wikimedia.org/wiki/File:Camera_font_awesome.svg" ] }, - { - "path": "checkbox-empty.svg", - "license": "CC0", - "authors": [ - "Hannah Declerck" - ], - "sources": [] - }, - { - "path": "checkbox-filled.svg", - "license": "CC0", - "authors": [ - "Hannah Declerck" - ], - "sources": [] - }, { "path": "checkmark.svg", "license": "CC0", @@ -289,36 +261,6 @@ "authors": [], "sources": [] }, - { - "path": "crosshair-blue-center.svg", - "license": "CC0; trivial", - "authors": [], - "sources": [] - }, - { - "path": "crosshair-blue-center.svg", - "license": "CC0; trivial", - "authors": [], - "sources": [] - }, - { - "path": "crosshair-blue.svg", - "license": "CC0; trivial", - "authors": [], - "sources": [] - }, - { - "path": "crosshair-blue.svg", - "license": "CC0; trivial", - "authors": [], - "sources": [] - }, - { - "path": "crosshair-empty.svg", - "license": "CC0; trivial", - "authors": [], - "sources": [] - }, { "path": "crosshair-locked.svg", "license": "CC0; trivial", diff --git a/css/index-tailwind-output.css b/css/index-tailwind-output.css index eb1547331..02043b7d3 100644 --- a/css/index-tailwind-output.css +++ b/css/index-tailwind-output.css @@ -763,14 +763,6 @@ video { margin: 1.25rem; } -.m-0\.5 { - margin: 0.125rem; -} - -.m-0 { - margin: 0px; -} - .m-3 { margin: 0.75rem; } @@ -783,6 +775,14 @@ video { margin: 0.25rem; } +.m-0\.5 { + margin: 0.125rem; +} + +.m-0 { + margin: 0px; +} + .m-4 { margin: 1rem; } @@ -989,10 +989,6 @@ video { height: 8rem; } -.h-10 { - height: 2.5rem; -} - .h-12 { height: 3rem; } @@ -1039,6 +1035,10 @@ video { height: 10rem; } +.h-10 { + height: 2.5rem; +} + .h-80 { height: 20rem; } @@ -1075,10 +1075,6 @@ video { width: 8rem; } -.w-10 { - width: 2.5rem; -} - .w-12 { width: 3rem; } @@ -1130,6 +1126,10 @@ video { width: 6rem; } +.w-10 { + width: 2.5rem; +} + .w-48 { width: 12rem; } @@ -1241,10 +1241,6 @@ video { flex-wrap: wrap-reverse; } -.place-content-center { - place-content: center; -} - .content-start { align-content: flex-start; } @@ -1428,11 +1424,6 @@ video { border-color: rgb(132 204 22 / var(--tw-border-opacity)); } -.border-blue-500 { - --tw-border-opacity: 1; - border-color: rgb(59 130 246 / var(--tw-border-opacity)); -} - .border-opacity-50 { --tw-border-opacity: 0.5; } @@ -1805,15 +1796,6 @@ video { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } -.z-above-map { - z-index: 10000; -} - -.bg-subtle { - background-color: var(--subtle-detail-color); - color: var(--subtle-detail-color-contrast); -} - .\[key\:string\] { key: string; } @@ -1823,19 +1805,20 @@ video { } :root { - /* The main colour scheme of mapcomplete is configured here. - * For a custom styling, set 'customCss' in your layoutConfig and overwrite some of these. - */ + /* + * The main colour scheme of mapcomplete is configured here. + * For a custom styling, set 'customCss' in your layoutConfig and overwrite some of these. + */ /* Main color of the application: the background and text colours */ --background-color: white; /* Main text colour. Also styles some elements, such as the 'close popup'-button or 'back-arrow' (in mobile) */ --foreground-color: black; - /* A colour to indicate an error or warning */ + /* A colour scheme to indicate an error or warning */ --alert-color: #fee4d1; + --alert-foreground-color: var(--foreground-color); /** - * Base colour of interactive elements, mainly the 'subtle button' - * - */ + * Base colour of interactive elements, mainly the 'subtle button' + */ --subtle-detail-color: #dbeafe; --subtle-detail-color-contrast: black; --subtle-detail-color-light-contrast: lightgrey; @@ -1847,11 +1830,7 @@ video { --unsubtle-detail-color-contrast: black; --catch-detail-color: #3a3aeb; --catch-detail-color-contrast: white; - --non-active-tab-svg: var(--foreground-color); - --shadow-color: #00000066; --image-carousel-height: 350px; - /* Technical variable to make some dynamic behaviour possible; set by javascript. */ - --variable-title-height: 0px; } html, @@ -1936,34 +1915,6 @@ a { border: 3px solid var(--unsubtle-detail-color); } -/* slider */ - -input[type="range"].vertical { - -webkit-writing-mode: bt-lr; - writing-mode: bt-lr; - /* IE */ - -webkit-appearance: slider-vertical; - /* Chromium */ - cursor: pointer; -} - -@-moz-document url-prefix() { - input[type="range"].elevator::-moz-range-thumb { - background-color: #00000000 !important; - background-image: url("/assets/svg/elevator_wheelchair.svg"); - width: 150px !important; - height: 30px !important; - border: 2px; - border-style: solid; - background-size: contain; - background-position: center center; - background-repeat: no-repeat; - cursor: pointer; - border-image: linear-gradient(to right, black 50%, transparent 50%) 100% 1; - padding-bottom: 5px; - } -} - .rounded-left-full { border-bottom-left-radius: 999rem; border-top-left-radius: 999rem; @@ -1995,6 +1946,8 @@ li { } h2 { + font-size: x-large; + margin-bottom: 0. 4em; font-size: large; margin-top: 0.5em; margin-bottom: 0.3em; @@ -2027,22 +1980,6 @@ li::marker { color: var(--foreground-color); } -.subtle-lighter { - color: var(--subtle-detail-color-light-contrast); -} - -.border-attention-catch { - border: 5px solid var(--catch-detail-color); -} - -.border-attention { - border-color: var(--catch-detail-color); -} - -.direction-svg svg path { - fill: var(--catch-detail-color) !important; -} - .block-ruby { display: block ruby; } @@ -2066,6 +2003,8 @@ li::marker { } .selected svg:not(.noselect *) path.selectable { + /* A marker on the map gets the 'selected' class when it's properties are displayed + */ stroke: white !important; stroke-width: 20px !important; overflow: visible !important; @@ -2074,6 +2013,8 @@ li::marker { } .selected svg { + /* A marker on the map gets the 'selected' class when it's properties are displayed + */ overflow: visible !important; } @@ -2093,7 +2034,7 @@ li::marker { .alert { background-color: var(--alert-color); - color: var(--foreground-color); + color: var(--alert-foreground-color); font-weight: bold; border-radius: 1em; margin: 0.25em; @@ -2101,31 +2042,10 @@ li::marker { padding: 0.15em 0.3em; } -.invalid { - box-shadow: 0 0 10px #ff5353; - height: -webkit-min-content; - height: min-content; -} - .shadow { box-shadow: 0 0 20px var(--shadow-color); } -.title-font span { - font-size: xx-large !important; - font-weight: bold; -} - -.soft { - background-color: var(--subtle-detail-color); - color: var(--subtle-detail-color-contrast); - font-weight: bold; - border-radius: 1em; - margin: 0.25em; - text-align: center; - padding: 0.15em 0.3em; -} - .subtle { color: #999; } @@ -2229,52 +2149,6 @@ input { } } -.mapping-icon-small-height { - /* A mapping icon type */ - height: 1.5rem; - margin-right: 0.5rem; - width: unset; -} - -.mapping-icon-medium-height { - /* A mapping icon type */ - height: 3rem; - margin-right: 0.5rem; - width: unset; -} - -.mapping-icon-large-height { - /* A mapping icon type */ - height: 5rem; - margin-right: 0.5rem; - width: unset; -} - -.mapping-icon-small { - /* A mapping icon type */ - width: 1.5rem; - max-height: 1.5rem; - margin-right: 0.5rem; -} - -.mapping-icon-medium { - /* A mapping icon type */ - width: 3rem; - max-height: 3rem; - margin-right: 1rem; - margin-left: 1rem; -} - -.mapping-icon-large { - /* A mapping icon type */ - width: 6rem; - max-height: 5rem; - margin-top: 0.5rem; - margin-bottom: 0.5rem; - margin-right: 1.5rem; - margin-left: 1.5rem; -} - .hover\:bg-unsubtle:hover { --tw-bg-opacity: 1; background-color: rgb(191 219 254 / var(--tw-bg-opacity)); @@ -2296,11 +2170,6 @@ input { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.hover\:bg-unsubtle:hover { - background-color: var(--unsubtle-detail-color); - color: var(--unsubtle-detail-color-contrast); -} - @media (max-width: 480px) { .max-\[480px\]\:w-full { width: 100%; @@ -2530,3 +2399,4 @@ input { width: 33.333333%; } } + diff --git a/css/mobile.css b/css/mobile.css index dfef43f64..c574cdf88 100644 --- a/css/mobile.css +++ b/css/mobile.css @@ -1,77 +1,10 @@ -/* -Contains tweaks for small screens -*/ - -@media only screen and (min-width: 769px) and (min-height: 700px) { - - .only-on-mobile { - display: none !important; - } - -} - - -@media only screen and (min-height: 175px) and (min-width: 175px) { - .very-small-screen { - display: none !important; - } - - - .hidden-on-very-small-screen { - } - -} - - -@media not screen and (min-height: 175px) and (min-width: 175px) { - .very-small-screen { - } - - .hidden-on-very-small-screen { - display: none !important; - } - -} - @media only screen and (max-width: 768px), only screen and (max-height: 700px) { - - .hidden-on-mobile { display: none !important; } - - #centermessage { - top: 30%; - left: 15%; - width: 60%; - - } - - .add-popup-all-buttons { - /* Buttons in the 'add new point' have a default of 50vh maxheight which is ugly in the new context*/ - max-height: unset !important; - } - - #messagesboxmobile { - display: block; - - position: absolute; - z-index: 10000; - width: 100vw; - height: 100vh; - } -} - -@media only screen and (max-width: 768px) { - #leafletDiv .leaflet-control-attribution { - display: none; - } - - .leaflet-popup { - display: none; - } } + diff --git a/css/tagrendering.css b/css/tagrendering.css index 09634d2e9..4c63a909b 100644 --- a/css/tagrendering.css +++ b/css/tagrendering.css @@ -1,4 +1,8 @@ +/** + Some utility functions which are only used to render data + */ + .question .form-text-field > input { width: 100%; box-sizing: border-box; @@ -26,43 +30,53 @@ height: 100%; } -.question-text { - font-size: larger; - font-weight: bold; - margin-bottom: 0.5em; + + + +.mapping-icon-small-height { + /* A mapping icon type */ + height: 1.5rem; + margin-right: 0.5rem; + width: unset; } -.question-text img { - max-width: 100%; -} - - - -.question-option-with-border { - border: 2px solid lightgray; - border-radius: 0.5em; - display: block; - width: 100%; - margin: 5px; - box-sizing: border-box; - padding: 0.5em; -} - -input:checked + label .question-option-with-border { - border: 2px solid var(--subtle-detail-color-contrast); -} - -.login-button-friendly { - display: inline-block; - background-color: var(--catch-detail-color); - color: var(--catch-detail-color-contrast); - border: solid var(--catch-detail-color-contrast) 2px; - padding: 0.2em 0.6em; - font-size: large; - font-weight: bold; - border-radius: 1.5em; - box-sizing: border-box; - width: 100%; +.mapping-icon-medium-height { + /* A mapping icon type */ + height: 3rem; + margin-right: 0.5rem; + width: unset; +} + +.mapping-icon-large-height { + /* A mapping icon type */ + height: 5rem; + margin-right: 0.5rem; + width: unset; +} + +.mapping-icon-small { + /* A mapping icon type */ + width: 1.5rem; + max-height: 1.5rem; + margin-right: 0.5rem; +} + +.mapping-icon-medium { + /* A mapping icon type */ + width: 3rem; + max-height: 3rem; + margin-right: 1rem; + margin-left: 1rem; +} + +.mapping-icon-large { + /* A mapping icon type */ + width: 6rem; + max-height: 5rem; + margin-top: 0.5rem; + margin-bottom: 0.5rem; + margin-right: 1.5rem; + margin-left: 1.5rem; } diff --git a/index.css b/index.css index f3fe601b0..1ea500cc0 100644 --- a/index.css +++ b/index.css @@ -11,62 +11,24 @@ @tailwind components; @tailwind utilities; -@layer utilities { - .z-above-map { - z-index: 10000; - } - - .z-above-controls { - z-index: 10001; - } - - .w-160 { - width: 40rem; - } - - .bg-subtle { - background-color: var(--subtle-detail-color); - color: var(--subtle-detail-color-contrast); - } - - .bg-unsubtle { - background-color: var(--unsubtle-detail-color); - color: var(--unsubtle-detail-color-contrast); - } - - .bg-catch { - background-color: var(--catch-detail-color); - color: var(--catch-detail-color-contrast); - } - - .rounded-left-full { - border-bottom-left-radius: 999rem; - border-top-left-radius: 999rem; - } - - .rounded-right-full { - border-bottom-right-radius: 999rem; - border-top-right-radius: 999rem; - } -} - :root { - /* The main colour scheme of mapcomplete is configured here. - * For a custom styling, set 'customCss' in your layoutConfig and overwrite some of these. - */ + /* + * The main colour scheme of mapcomplete is configured here. + * For a custom styling, set 'customCss' in your layoutConfig and overwrite some of these. + */ /* Main color of the application: the background and text colours */ --background-color: white; /* Main text colour. Also styles some elements, such as the 'close popup'-button or 'back-arrow' (in mobile) */ --foreground-color: black; - /* A colour to indicate an error or warning */ + /* A colour scheme to indicate an error or warning */ --alert-color: #fee4d1; + --alert-foreground-color: var(--foreground-color); /** - * Base colour of interactive elements, mainly the 'subtle button' - * - */ + * Base colour of interactive elements, mainly the 'subtle button' + */ --subtle-detail-color: #dbeafe; --subtle-detail-color-contrast: black; --subtle-detail-color-light-contrast: lightgrey; @@ -81,13 +43,9 @@ --catch-detail-color: #3a3aeb; --catch-detail-color-contrast: white; - --non-active-tab-svg: var(--foreground-color); - --shadow-color: #00000066; --image-carousel-height: 350px; - /* Technical variable to make some dynamic behaviour possible; set by javascript. */ - --variable-title-height: 0px; } html, @@ -173,30 +131,6 @@ a { border: 3px solid var(--unsubtle-detail-color); } -/* slider */ -input[type="range"].vertical { - writing-mode: bt-lr; /* IE */ - -webkit-appearance: slider-vertical; /* Chromium */ - cursor: pointer; -} - -@-moz-document url-prefix() { - input[type="range"].elevator::-moz-range-thumb { - background-color: #00000000 !important; - background-image: url("/assets/svg/elevator_wheelchair.svg"); - width: 150px !important; - height: 30px !important; - border: 2px; - border-style: solid; - background-size: contain; - background-position: center center; - background-repeat: no-repeat; - cursor: pointer; - border-image: linear-gradient(to right, black 50%, transparent 50%) 100% 1; - padding-bottom: 5px; - } -} - .rounded-left-full { border-bottom-left-radius: 999rem; border-top-left-radius: 999rem; @@ -225,6 +159,14 @@ li { margin-top: 0.1em; } +h1 { + font-size: x-large; + margin-top: 0.6em; + margin-bottom: 0.4em; + font-weight: bold; +} + + h2 { font-size: large; margin-top: 0.5em; @@ -264,22 +206,6 @@ li::marker { color: var(--foreground-color); } -.subtle-lighter { - color: var(--subtle-detail-color-light-contrast); -} - -.border-attention-catch { - border: 5px solid var(--catch-detail-color); -} - -.border-attention { - border-color: var(--catch-detail-color); -} - -.direction-svg svg path { - fill: var(--catch-detail-color) !important; -} - .block-ruby { display: block ruby; } @@ -302,7 +228,10 @@ li::marker { display: none; } + .selected svg:not(.noselect *) path.selectable { + /* A marker on the map gets the 'selected' class when it's properties are displayed + */ stroke: white !important; stroke-width: 20px !important; overflow: visible !important; @@ -312,6 +241,8 @@ li::marker { } .selected svg { + /* A marker on the map gets the 'selected' class when it's properties are displayed + */ overflow: visible !important; } @@ -330,31 +261,7 @@ li::marker { .alert { background-color: var(--alert-color); - color: var(--foreground-color); - font-weight: bold; - border-radius: 1em; - margin: 0.25em; - text-align: center; - padding: 0.15em 0.3em; -} - -.invalid { - box-shadow: 0 0 10px #ff5353; - height: min-content; -} - -.shadow { - box-shadow: 0 0 20px var(--shadow-color); -} - -.title-font span { - font-size: xx-large !important; - font-weight: bold; -} - -.soft { - background-color: var(--subtle-detail-color); - color: var(--subtle-detail-color-contrast); + color: var(--alert-foreground-color); font-weight: bold; border-radius: 1em; margin: 0.25em; @@ -448,48 +355,3 @@ input { } } -.mapping-icon-small-height { - /* A mapping icon type */ - height: 1.5rem; - margin-right: 0.5rem; - width: unset; -} - -.mapping-icon-medium-height { - /* A mapping icon type */ - height: 3rem; - margin-right: 0.5rem; - width: unset; -} - -.mapping-icon-large-height { - /* A mapping icon type */ - height: 5rem; - margin-right: 0.5rem; - width: unset; -} - -.mapping-icon-small { - /* A mapping icon type */ - width: 1.5rem; - max-height: 1.5rem; - margin-right: 0.5rem; -} - -.mapping-icon-medium { - /* A mapping icon type */ - width: 3rem; - max-height: 3rem; - margin-right: 1rem; - margin-left: 1rem; -} - -.mapping-icon-large { - /* A mapping icon type */ - width: 6rem; - max-height: 5rem; - margin-top: 0.5rem; - margin-bottom: 0.5rem; - margin-right: 1.5rem; - margin-left: 1.5rem; -}