From 83f3662b9ae150047c2c23612e5c1c23d20b609e Mon Sep 17 00:00:00 2001 From: Pieter Vander Vennet Date: Sun, 14 May 2023 03:24:13 +0200 Subject: [PATCH] Styling: style most buttons --- Logic/State/GeoLocationState.ts | 4 +- UI/Base/BackButton.svelte | 16 + UI/Base/FromHtml.svelte | 3 +- UI/Base/LoginButton.svelte | 24 +- UI/Base/MapControlButton.svelte | 2 +- UI/Base/NextButton.svelte | 20 + UI/Base/SubtleButton.svelte | 16 +- UI/Base/TabbedGroup.svelte | 10 +- UI/Base/Tr.svelte | 3 +- UI/BigComponents/ContactLink.svelte | 4 +- UI/BigComponents/Filterview.svelte | 14 - UI/BigComponents/Geosearch.svelte | 4 + UI/BigComponents/SelectedElementTitle.svelte | 47 +- UI/BigComponents/UserProfile.svelte | 8 +- UI/Input/Checkboxes.ts | 15 +- UI/Popup/AddNewPoint/AddNewPoint.svelte | 473 +++++++++--------- UI/Popup/AddNewPoint/PresetList.svelte | 159 +++--- .../TagRendering/TagRenderingQuestion.svelte | 2 +- UI/StylesheetTestGui.svelte | 16 +- UI/ThemeViewGUI.svelte | 72 ++- .../charging_station/charging_station.json | 2 +- assets/svg/crosshair.svg | 23 +- assets/svg/login.svg | 42 +- index.css | 166 +++--- langs/ca.json | 1 - langs/cs.json | 1 - langs/da.json | 1 - langs/de.json | 1 - langs/en.json | 4 +- langs/es.json | 1 - langs/fil.json | 1 - langs/fr.json | 1 - langs/gl.json | 1 - langs/hu.json | 1 - langs/id.json | 1 - langs/it.json | 1 - langs/ja.json | 1 - langs/layers/en.json | 18 + langs/nb_NO.json | 1 - langs/nl.json | 3 +- langs/pl.json | 1 - langs/pt.json | 1 - langs/pt_BR.json | 1 - langs/ru.json | 1 - langs/zh_Hant.json | 1 - public/css/index-tailwind-output.css | 203 ++++---- 46 files changed, 720 insertions(+), 671 deletions(-) create mode 100644 UI/Base/BackButton.svelte create mode 100644 UI/Base/NextButton.svelte diff --git a/Logic/State/GeoLocationState.ts b/Logic/State/GeoLocationState.ts index f0a9566be..c18da5284 100644 --- a/Logic/State/GeoLocationState.ts +++ b/Logic/State/GeoLocationState.ts @@ -2,7 +2,7 @@ import { UIEventSource } from "../UIEventSource" import { LocalStorageSource } from "../Web/LocalStorageSource" import { QueryParameters } from "../Web/QueryParameters" -type GeolocationState = "prompt" | "requested" | "granted" | "denied" +export type GeolocationPermissionState = "prompt" | "requested" | "granted" | "denied" export interface GeoLocationPointProperties extends GeolocationCoordinates { id: "gps" @@ -21,7 +21,7 @@ export class GeoLocationState { * 'granted' means that it is granted * 'denied' means that we don't have access */ - public readonly permission: UIEventSource = new UIEventSource("prompt") + public readonly permission: UIEventSource = new UIEventSource("prompt") /** * Important to determine e.g. if we move automatically on fix or not diff --git a/UI/Base/BackButton.svelte b/UI/Base/BackButton.svelte new file mode 100644 index 000000000..88ee19934 --- /dev/null +++ b/UI/Base/BackButton.svelte @@ -0,0 +1,16 @@ + + + dispatch("click")} options={{extraClasses:clss+ " flex items-center"}}> + + + diff --git a/UI/Base/FromHtml.svelte b/UI/Base/FromHtml.svelte index f947b9de3..0f5837629 100644 --- a/UI/Base/FromHtml.svelte +++ b/UI/Base/FromHtml.svelte @@ -11,9 +11,10 @@ } } + export let clss = "" {#if src !== undefined} - + {/if} diff --git a/UI/Base/LoginButton.svelte b/UI/Base/LoginButton.svelte index bb86bf244..2c710c2cf 100644 --- a/UI/Base/LoginButton.svelte +++ b/UI/Base/LoginButton.svelte @@ -1,15 +1,17 @@ - osmConnection.AttemptLogin()}> - - - - - + diff --git a/UI/Base/MapControlButton.svelte b/UI/Base/MapControlButton.svelte index 7528c0ba9..34ced51a4 100644 --- a/UI/Base/MapControlButton.svelte +++ b/UI/Base/MapControlButton.svelte @@ -8,6 +8,6 @@ - diff --git a/UI/Base/NextButton.svelte b/UI/Base/NextButton.svelte new file mode 100644 index 000000000..4feb7fc18 --- /dev/null +++ b/UI/Base/NextButton.svelte @@ -0,0 +1,20 @@ + + + dispatch("click")} options={{extraClasses: clss+" flex items-center"}}> + +
+ + +
+ diff --git a/UI/Base/SubtleButton.svelte b/UI/Base/SubtleButton.svelte index 9bbe097f1..464bba17e 100644 --- a/UI/Base/SubtleButton.svelte +++ b/UI/Base/SubtleButton.svelte @@ -12,11 +12,10 @@ let imgClasses = "block justify-center shrink-0 mr-4 " + (options?.imgSize ?? "h-11 w-11"); const dispatch = createEventDispatcher<{click}>() - console.log("Slots:", $$slots) - - diff --git a/UI/Base/TabbedGroup.svelte b/UI/Base/TabbedGroup.svelte index 54ffb52f0..c84901c9f 100644 --- a/UI/Base/TabbedGroup.svelte +++ b/UI/Base/TabbedGroup.svelte @@ -22,7 +22,7 @@
{#if $$slots.title1} - "tab "+(selected ? "selected" : "secondary")}> + "tab "+(selected ? "primary" : "")}>
Tab 0 @@ -31,28 +31,28 @@ {/if} {#if $$slots.title1} - "tab "+(selected ? "selected" : "secondary")}> + "tab "+(selected ? "primary" : "")}>
{/if} {#if $$slots.title2} - "tab "+(selected ? "selected" : "secondary")}> + "tab "+(selected ? "primary" : "")}>
{/if} {#if $$slots.title3} - "tab "+(selected ? "selected" : "secondary")}> + "tab "+(selected ? "primary" : "")}>
{/if} {#if $$slots.title4} - "tab "+(selected ? "selected" : "secondary")}> + "tab "+(selected ? "primary" : "")}>
diff --git a/UI/Base/Tr.svelte b/UI/Base/Tr.svelte index adbb54a6a..2fa188cd8 100644 --- a/UI/Base/Tr.svelte +++ b/UI/Base/Tr.svelte @@ -10,6 +10,7 @@ import WeblateLink from "./WeblateLink.svelte"; export let t: Translation; + export let cls: string = "" export let tags: Record | undefined = undefined; // Text for the current language let txt: string | undefined; @@ -29,7 +30,7 @@ {#if t} - + diff --git a/UI/BigComponents/ContactLink.svelte b/UI/BigComponents/ContactLink.svelte index 0fd252959..c26ea8860 100644 --- a/UI/BigComponents/ContactLink.svelte +++ b/UI/BigComponents/ContactLink.svelte @@ -40,9 +40,9 @@ {resource.resolved?.description} {#if resource.languageCodes?.indexOf($language) >= 0} - +
availableTranslation.Clone()} /> - +
{/if}
diff --git a/UI/BigComponents/Filterview.svelte b/UI/BigComponents/Filterview.svelte index c64dd26af..ce1b5cf76 100644 --- a/UI/BigComponents/Filterview.svelte +++ b/UI/BigComponents/Filterview.svelte @@ -111,17 +111,3 @@ $: onDestroy( {/if} - diff --git a/UI/BigComponents/Geosearch.svelte b/UI/BigComponents/Geosearch.svelte index 0ce04ea03..44aced7f0 100644 --- a/UI/BigComponents/Geosearch.svelte +++ b/UI/BigComponents/Geosearch.svelte @@ -11,6 +11,7 @@ import { Geocoding } from "../../Logic/Osm/Geocoding"; import { BBox } from "../../Logic/BBox"; import { GeoIndexedStoreForLayer } from "../../Logic/FeatureSource/Actors/GeoIndexedStore"; + import {createEventDispatcher} from "svelte"; export let perLayer: ReadonlyMap | undefined = undefined; export let bounds: UIEventSource; @@ -34,6 +35,8 @@ } ); + const dispatch = createEventDispatcher<{searchCompleted}>() + async function performSearch() { try { isRunning = true; @@ -59,6 +62,7 @@ } } + dispatch("searchCompleted") } catch (e) { console.error(e); feedback = Translations.t.general.search.error.txt; diff --git a/UI/BigComponents/SelectedElementTitle.svelte b/UI/BigComponents/SelectedElementTitle.svelte index 151e1552d..960f6bd11 100644 --- a/UI/BigComponents/SelectedElementTitle.svelte +++ b/UI/BigComponents/SelectedElementTitle.svelte @@ -4,7 +4,6 @@ import LayerConfig from "../../Models/ThemeConfig/LayerConfig"; import type {SpecialVisualizationState} from "../SpecialVisualization"; import TagRenderingAnswer from "../Popup/TagRendering/TagRenderingAnswer.svelte"; - import TagRenderingEditable from "../Popup/TagRendering/TagRenderingEditable.svelte"; import {onDestroy} from "svelte"; import Translations from "../i18n/Translations"; import Tr from "../Base/Tr.svelte"; @@ -31,31 +30,37 @@ {#if _tags._deleted === "yes"} {:else} -
-
+
+
- -

- -

+ +

+ +

-
- {#each layer.titleIcons as titleIconConfig} - {#if (titleIconConfig.condition?.matchesProperties(_tags) ?? true) && (titleIconConfig.metacondition?.matchesProperties({..._metatags, ..._tags}) ?? true) && titleIconConfig.IsKnown(_tags)} -
- -
- {/if} - {/each} -
- +
+ {#each layer.titleIcons as titleIconConfig} + {#if (titleIconConfig.condition?.matchesProperties(_tags) ?? true) && (titleIconConfig.metacondition?.matchesProperties({..._metatags, ..._tags}) ?? true) && titleIconConfig.IsKnown(_tags)} +
+ +
+ {/if} + {/each}
- state.selectedElement.setData(undefined)}/> +
+ state.selectedElement.setData(undefined)}/> +
{/if} diff --git a/UI/BigComponents/UserProfile.svelte b/UI/BigComponents/UserProfile.svelte index a2d8ac248..9ba056f63 100644 --- a/UI/BigComponents/UserProfile.svelte +++ b/UI/BigComponents/UserProfile.svelte @@ -23,7 +23,7 @@ })); -
+
{#if $userdetails.img} {:else} @@ -32,15 +32,15 @@

{$userdetails.name}

{#if description} - - + + {:else} - + diff --git a/UI/Input/Checkboxes.ts b/UI/Input/Checkboxes.ts index d75308ea1..d974c033a 100644 --- a/UI/Input/Checkboxes.ts +++ b/UI/Input/Checkboxes.ts @@ -1,6 +1,6 @@ -import { InputElement } from "./InputElement" -import { UIEventSource } from "../../Logic/UIEventSource" -import { Utils } from "../../Utils" +import {InputElement} from "./InputElement" +import {UIEventSource} from "../../Logic/UIEventSource" +import {Utils} from "../../Utils" import BaseUIElement from "../BaseUIElement" import InputElementMap from "./InputElementMap" import Translations from "../i18n/Translations" @@ -68,18 +68,15 @@ export default class CheckBoxes extends InputElement { label.appendChild(inputI.ConstructElement()) label.classList.add("block", "w-full", "p-2", "cursor-pointer", "bg-red") - const wrapper = document.createElement("div") - wrapper.classList.add("wrapper", "flex", "w-full", "border", "border-gray-400", "mb-1") - wrapper.appendChild(label) - formTag.appendChild(wrapper) + formTag.appendChild(label) value.addCallbackAndRunD((selectedValues) => { input.checked = selectedValues.indexOf(i) >= 0 if (input.checked) { - wrapper.classList.add("checked") + label.classList.add("checked") } else { - wrapper.classList.remove("checked") + label.classList.remove("checked") } }) diff --git a/UI/Popup/AddNewPoint/AddNewPoint.svelte b/UI/Popup/AddNewPoint/AddNewPoint.svelte index 1c451237a..10ee30a4a 100644 --- a/UI/Popup/AddNewPoint/AddNewPoint.svelte +++ b/UI/Popup/AddNewPoint/AddNewPoint.svelte @@ -1,272 +1,291 @@ - - - - - {#if $isLoading} -
- - - -
- {:else if $zoom < Constants.minZoomLevelToAddNewPoint} -
- -
- {:else if selectedPreset === undefined} - - {selectedPreset = event.detail}}> + + + + + {#if $isLoading} +
+ + + +
+ {:else if $zoom < Constants.minZoomLevelToAddNewPoint} +
+ +
+ {:else if selectedPreset === undefined} + + {selectedPreset = event.detail}}> - {:else if !$layerIsDisplayed} - -
- - +
+ + -
+ }/> +
- { + { layerIsDisplayed.setData(true) abort() }}> - - - - { + + + + + { abort() state.guistate.openFilterView(selectedPreset.layer) } }> - - - + + + - {:else if $layerHasFilters} - -
- - -
+ {:else if $layerHasFilters} + +
+ + +
- { + { abort() const flayer = state.layerState.filteredLayers.get(selectedPreset.layer.id) flayer.disableAllFilters() } }> - - - + + + - { + { abort() state.guistate.openFilterView(selectedPreset.layer) } }> - - - + + + - {:else if !confirmedCategory } - - + {:else if !confirmedCategory } + +

+ +

+ + - {#if selectedPreset.preset.description} - - {/if} - - {#if selectedPreset.preset.exampleImages} -

- {#if selectedPreset.preset.exampleImages.length == 1} - - {:else} - + {#if selectedPreset.preset.description} + {/if} -

- + + {#if selectedPreset.preset.exampleImages} +

+ {#if selectedPreset.preset.exampleImages.length === 1} + + {:else} + + {/if} +

+ {#each selectedPreset.preset.exampleImages as src} {/each} + {/if} + t.presetInfo.Subs({tags})} {state} + tags={new And(selectedPreset.preset.tags)}> + +
+ + selectedPreset = undefined} clss="w-full"> + + + + confirmedCategory = true} clss="primary w-full"> +
+ + +
+
+ +
+ +
+ + {:else if _globalFilter?.length > 0 && _globalFilter?.length > checkedOfGlobalFilters} + + {checkedOfGlobalFilters = checkedOfGlobalFilters + 1}}> + + + + {globalFilter.setData([]); abort()}}> + + + + {:else if !creating} + +
+ + selectedPreset = undefined} clss="w-full"> + + + + +
+ +
+ +
+ {:else} + Creating point... {/if} - t.presetInfo.Subs({tags})} {state} - tags={new And(selectedPreset.preset.tags)}> - - - confirmedCategory = true}> -
- - -
-
- -
- - selectedPreset = undefined}> - -
- -
- - {:else if _globalFilter?.length > 0 && _globalFilter?.length > checkedOfGlobalFilters} - - {checkedOfGlobalFilters = checkedOfGlobalFilters + 1}}> - - - - {globalFilter.setData([]); abort()}}> - - - - {:else if !creating} - - - Confirm location - - {:else} - Creating point... - {/if} diff --git a/UI/Popup/AddNewPoint/PresetList.svelte b/UI/Popup/AddNewPoint/PresetList.svelte index 1a921b92b..92d80b550 100644 --- a/UI/Popup/AddNewPoint/PresetList.svelte +++ b/UI/Popup/AddNewPoint/PresetList.svelte @@ -1,88 +1,93 @@ -
- - {#each presets as preset} - dispatch("select", preset)}> - -
+
+

+ +

+ + {#each presets as preset} + dispatch("select", preset)}> + +
+ + + + {#if preset.description} + + {/if} +
- - - - {#if preset.description} - - {/if} -
- - - {/each} + + {/each}
diff --git a/UI/Popup/TagRendering/TagRenderingQuestion.svelte b/UI/Popup/TagRendering/TagRenderingQuestion.svelte index 1a0e3c04e..70401a8a5 100644 --- a/UI/Popup/TagRendering/TagRenderingQuestion.svelte +++ b/UI/Popup/TagRendering/TagRenderingQuestion.svelte @@ -201,7 +201,7 @@ -
diff --git a/UI/StylesheetTestGui.svelte b/UI/StylesheetTestGui.svelte index 36a3a6480..89226ecc7 100644 --- a/UI/StylesheetTestGui.svelte +++ b/UI/StylesheetTestGui.svelte @@ -31,21 +31,21 @@

- -
- - @@ -79,21 +79,21 @@

- -
- - diff --git a/UI/ThemeViewGUI.svelte b/UI/ThemeViewGUI.svelte index 4259a1b46..6a7bc0562 100644 --- a/UI/ThemeViewGUI.svelte +++ b/UI/ThemeViewGUI.svelte @@ -39,6 +39,8 @@ import SelectedElementTitle from "./BigComponents/SelectedElementTitle.svelte"; import Svg from "../Svg"; import {ShareScreen} from "./BigComponents/ShareScreen"; + import NextButton from "./Base/NextButton.svelte"; + import IfNot from "./Base/IfNot.svelte"; export let state: ThemeViewState; let layout = state.layout; @@ -83,6 +85,21 @@ let availableLayers = state.availableLayers; let userdetails = state.osmConnection.userDetails; let currentViewLayer = layout.layers.find(l => l.id === "current_view") + + function jumpToCurrentLocation() { + const glstate = state.geolocation.geolocationState + if (glstate.currentGPSLocation.data !== undefined) { + const c: GeolocationCoordinates = glstate.currentGPSLocation.data + state.guistate.themeIsOpened.setData(false) + const coor = {lon: c.longitude, lat: c.latitude} + state.mapProperties.location.setData(coor) + } + if (glstate.permission.data !== "granted") { + glstate.requestPermission() + return + } + + } @@ -95,7 +112,7 @@
+ {selectedLayer}/>
@@ -184,7 +201,7 @@
-
+
@@ -198,11 +215,30 @@ loginStatus.SetClass("block mt-6 pt-2 md:border-t-2 border-dotted border-gray-400"), --> -
- +
+ + +
+ p === "denied")}> + + + +
+ Search for a location: + state.guistate.themeIsOpened.setData(false)} + perLayer={state.perLayer} + {selectedElement} + {selectedLayer}/> +
@@ -238,7 +274,7 @@
-
+
new DownloadPanel(state)}/>
@@ -251,8 +287,8 @@
- new ShareScreen(state)} slot="content4"/> - + new ShareScreen(state)} slot="content4"/> + @@ -270,7 +306,7 @@
-
+
@@ -308,12 +344,12 @@
-
+
-
+
- +
Get in touch with others
- +
+ +
- new PrivacyPolicy()} slot="content3"> +
+ new PrivacyPolicy()}/> +
-
+
diff --git a/assets/layers/charging_station/charging_station.json b/assets/layers/charging_station/charging_station.json index 7722b4497..905914b38 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/crosshair.svg b/assets/svg/crosshair.svg index 359777079..deeb2e0d3 100644 --- a/assets/svg/crosshair.svg +++ b/assets/svg/crosshair.svg @@ -1,11 +1,14 @@ - - - - - - - - - - + + + diff --git a/assets/svg/login.svg b/assets/svg/login.svg index 6b7bf28f7..6eda73f6f 100644 --- a/assets/svg/login.svg +++ b/assets/svg/login.svg @@ -5,48 +5,12 @@ viewBox="0 0 375 375" version="1.1" id="svg11" - sodipodi:docname="login.svg" - inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)" - xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" - xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> - - - - + id="path2" + style="color:#000000;fill:#000000;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none" + d="M 53.929688 27.095703 C 32.119816 27.095703 16.970068 40.812733 11.746094 53.177734 C 7.106544 64.159419 7.5344948 73.99011 7.6914062 76.158203 L 8.4628906 188.625 L 7.6914062 301.08984 C 7.5344948 303.25794 7.106544 313.08863 11.746094 324.07031 C 16.970068 336.43531 32.119816 350.1543 53.929688 350.1543 C 87.406 350.1543 140.12695 349.40625 140.12695 349.40625 A 15.663316 15.663316 0 0 0 140.16602 349.40625 C 140.16602 349.40625 151.12665 349.32365 161.72266 342.59961 C 172.31866 335.87554 182.41602 320.93277 182.41602 300.11719 L 182.41602 294.41016 A 15.66175 15.66175 0 0 0 166.75391 278.74805 A 15.66175 15.66175 0 0 0 151.0918 294.41016 L 151.0918 300.11719 C 151.0918 312.48521 147.76532 314.35785 144.9375 316.15234 C 142.10968 317.94684 139.64648 318.08594 139.64648 318.08594 C 139.59848 318.08661 86.922647 318.83008 53.929688 318.83008 C 42.493509 318.83008 42.353165 316.03148 40.599609 311.88086 C 38.846054 307.73024 38.962891 302.7207 38.962891 302.7207 A 15.663316 15.663316 0 0 0 39.013672 301.56836 L 39.787109 188.73242 A 15.66175 15.66175 0 0 0 39.78125 188.625 A 15.66175 15.66175 0 0 0 39.787109 188.51758 L 39.013672 75.681641 A 15.663316 15.663316 0 0 0 38.962891 74.527344 C 38.962891 74.527344 38.846054 69.517805 40.599609 65.367188 C 42.353165 61.216571 42.493508 58.419922 53.929688 58.419922 C 86.922646 58.419922 139.59847 59.161432 139.64648 59.162109 C 139.64648 59.162109 142.10968 59.303163 144.9375 61.097656 C 147.76532 62.892149 151.0918 64.762835 151.0918 77.130859 L 151.0918 82.839844 A 15.66175 15.66175 0 0 0 166.75391 98.5 A 15.66175 15.66175 0 0 0 182.41602 82.839844 L 182.41602 77.130859 C 182.41602 56.315277 172.31866 41.374459 161.72266 34.650391 C 151.12665 27.926322 140.16602 27.84375 140.16602 27.84375 A 15.663316 15.663316 0 0 0 140.12695 27.841797 C 140.12695 27.841797 87.406001 27.095703 53.929688 27.095703 z M 234.94336 74.408203 A 19.8664 19.8664 0 0 0 225.36719 78.158203 C 225.36719 78.158203 201.76359 95.524722 177.85938 116.39258 C 165.90727 126.82651 153.84111 138.11038 144.11523 149.23828 C 134.38936 160.36618 124.82118 169.15316 124.58594 187.41211 A 19.868386 19.868386 0 0 0 124.58594 187.41406 C 124.34949 205.98477 134.08341 214.90837 143.80273 226.0918 C 153.52206 237.27522 165.61857 248.59181 177.61914 259.06055 C 201.62029 279.99802 225.39648 297.42578 225.39648 297.42578 A 19.8664 19.8664 0 0 0 253.16602 293.16406 A 19.8664 19.8664 0 0 0 248.9043 265.39453 C 248.9043 265.39453 226.16776 248.68556 203.73828 229.11914 C 194.28077 220.86885 185.03853 212.15104 177.75586 204.33594 L 359.47461 204.33594 A 16.875 16.875 0 0 0 376.34961 187.46094 A 16.875 16.875 0 0 0 359.47461 170.58594 L 178.46289 170.58594 C 185.70519 162.89528 194.75718 154.38471 203.98828 146.32617 C 226.3516 126.80349 248.93359 110.14648 248.93359 110.14648 A 19.8664 19.8664 0 0 0 253.14453 82.369141 A 19.8664 19.8664 0 0 0 234.94336 74.408203 z " /> diff --git a/index.css b/index.css index e05f2e472..3c01ae22d 100644 --- a/index.css +++ b/index.css @@ -88,7 +88,7 @@ li::marker { } h1 { - font-size: x-large; + font-size: xx-large; margin-top: 0.6em; margin-bottom: 0.4em; font-weight: bold; @@ -96,7 +96,7 @@ h1 { h2 { - font-size: large; + font-size: x-large; margin-top: 0.5em; margin-bottom: 0.3em; font-weight: bold; @@ -157,31 +157,6 @@ input { * This very important section defines what the various input elements look like within the 'low-interaction' and 'interactive'-blocks */ -button.disabled { - cursor: default; - border: 2px dashed var(--button-background); - background: unset; - color: unset; - box-shadow: none; -} - -button.disabled:hover { - cursor: default; - border: 2px dashed var(--button-background); - background: unset; - color: unset; -} - -button:hover { - border: 2px solid var(--catch-detail-color-contrast); - background-color: var(--catch-detail-color); - color: var(--catch-detail-foregroundcolor); -} - -button:hover img { - background: var(--low-interaction-background); - border-radius: 100rem; -} button { display: inline-flex; @@ -192,16 +167,17 @@ button { padding-right: 0.6rem; font-size: large; font-weight: bold; - color: var(--button-foreground); - background: var(--button-background); /*-- invisible border: rendered on hover*/ border: 2px solid var(--button-background); border-radius: 0.5rem; transition: all 250ms; --tw-text-opacity: 1; --tw-bg-opacity: 1; + background: var(--low-interaction-background); + color: var(--low-interaction-foreground); } + button .button-shadow { box-shadow: 0 5px 10px #88888888; } @@ -217,14 +193,71 @@ button.selected svg path { fill: var(--catch-detail-foregroundcolor) !important; } -button svg path { +button:not(.no-image-background) svg path { + fill: var(--interactive-foreground) !important;; + transition: all 250ms; +} + +.interactive button { + background: var(--interactive-background); + color: var(--interactive-foreground); +} + +button:hover { + background-color: var(--catch-detail-color); + color: var(--catch-detail-foregroundcolor); + border: 2px solid var(--catch-detail-color-contrast); +} + + +button:hover:not(.no-image-background) img { + background: var(--low-interaction-background); + border-radius: 100rem; +} + + +button:hover:not(.no-image-background) svg path { + fill: var(--catch-detail-foregroundcolor) !important;; +} + +button.disabled:hover:not(.no-image-background) svg path { + fill: var(--low-interaction-foreground) !important;; +} + + + +button.primary { + color: var(--button-foreground); + background: var(--button-background); +} + +button.primary:not(.no-image-background) svg path { fill: var(--button-foreground) !important;; + transition: all 250ms; +} + + +button.disabled { + cursor: default; + border: 2px dashed var(--button-background); + background: unset; + color: unset; + box-shadow: none; +} + + +button.disabled:hover { + cursor: default; + border: 2px dashed var(--button-background); + background: unset; + color: unset; } .interactive button.disabled svg path { fill: var(--interactive-foreground) !important;; } + .low-interaction button.disabled svg path { fill: var(--low-interaction-foreground) !important;; } @@ -233,49 +266,7 @@ button svg path { fill: var(--foreground-color) !important; } -button.disabled.secondary:hover { - background: unset; - color: unset; -} -button.secondary { - background: var(--low-interaction-background); - color: var(--low-interaction-foreground); - border-color: var(--button-background); -} - -.interactive button.secondary { - background: var(--interactive-background); - color: var(--interactive-foreground); -} - -button.secondary svg path { - fill: var(--low-interaction-foreground) !important; - transition: all 250ms; -} - -button.secondary.disabled { - background: unset; - color: var(--low-interaction-foreground); -} - -button.secondary.disabled svg path { - fill: var(--low-interaction-foreground) !important; -} - -button.secondary:hover { - background-color: var(--catch-detail-color); - color: var(--catch-detail-foregroundcolor); - border-color: var(--catch-detail-color-contrast); -} - -button.secondary:hover svg path { - fill: var(--catch-detail-foregroundcolor) !important;; -} - -button.secondary.disabled:hover svg path { - fill: var(--low-interaction-foreground) !important;; -} label { /** @@ -317,15 +308,18 @@ label.checked { border: 2px solid var(--foreground-color); } - - -.active-links a{ - /* - * Let a 'link' mimick a secondary button, but not entirely - */ - display: block; +.links-w-full a { + display: flex; + column-gap: 0.25rem; + padding-left: 0.5rem; + padding-right: 0.5rem; width: 100%; - height: 100%; +} + +.links-as-button a{ + /* + * Let a 'link' mimick a button, but not entirely + */ padding: 3px; margin: 0; background: var(--low-interaction-background); @@ -335,13 +329,13 @@ label.checked { } -.active-links a:hover { +.links-as-button a:hover { background-color: var(--interactive-background); color: var(--catch-detail-foregroundcolor); border-color: var(--catch-detail-color-contrast); } -.active-links a:hover svg path { +.links-as-button a:hover svg path { fill: var(--catch-detail-foregroundcolor) !important; } @@ -354,12 +348,15 @@ label.checked { .thanks { /* The class to indicate 'operation successful' or 'thank you for contributing' */ - background-color: #43d904; font-weight: bold; border-radius: 1em; margin: 0.25em; text-align: center; - padding: 0.15em 0.3em; + padding: 0.25rem; + padding-left: 0.5rem; + padding-right: 0.5rem; + border: 3px dotted #58cd27; + background-color: #58cd2722; } .alert { @@ -371,6 +368,7 @@ label.checked { margin: 0.25em; text-align: center; padding: 0.15em 0.3em; + border: 2px dotted #ff9143; } .subtle { diff --git a/langs/ca.json b/langs/ca.json index b4a7c3f40..0f9460d6a 100644 --- a/langs/ca.json +++ b/langs/ca.json @@ -92,7 +92,6 @@ "addNew": "Afegir {category} aquí", "backToSelect": "Selecciona una categoria diferent", "confirmButton": "Afegir una {category}
La teva atribució és visible per a tots
", - "confirmIntro": "

Afegir {title} aquí?

L'element que estàs creant el veurà tothom. Només afegeix coses que realment existeixen. Moltes aplicacions fan servir aquestes dades.", "disableFilters": "Deshabilitar tots els filtres", "disableFiltersExplanation": "Alguns elements s'amagaran en passar un filtre", "hasBeenImported": "Aquest element ja ha estat importat", diff --git a/langs/cs.json b/langs/cs.json index 0e23dbf91..02e11a12f 100644 --- a/langs/cs.json +++ b/langs/cs.json @@ -92,7 +92,6 @@ "addNew": "Přidat {category}", "backToSelect": "Vyberte jinou kategorii", "confirmButton": "Přidat kategorii {category}
Váš příspěvek je viditelný pro všechny
", - "confirmIntro": "

Přidat {title}?

Funkce, kterou zde vytvoříte, bude viditelná pro všechny. Prosíme, přidávejte věci na mapu pouze tehdy, pokud skutečně existují. Tato data využívá mnoho aplikací.", "disableFilters": "Vypnout všechny filtry", "disableFiltersExplanation": "Některé funkce mohou být filtrem skryty", "hasBeenImported": "Tato funkce již byla importována", diff --git a/langs/da.json b/langs/da.json index 9e8a0a3c6..f8d22283c 100644 --- a/langs/da.json +++ b/langs/da.json @@ -44,7 +44,6 @@ "add": { "addNew": "Tilføj {category}", "confirmButton": "Tilføj en {category}
Din tilføjelse er synlig for alle
", - "confirmIntro": "

Tilføj en {title}?

Punktet du opretter her vil være synligt for alle. Tilføj kun ting til kortet, hvis de virkelig findes. Mange programmer bruger disse data.", "disableFilters": "Slå alle filtre fra", "disableFiltersExplanation": "Nogle elementer kan være skjult af et filter", "hasBeenImported": "Punktet er allerede importeret", diff --git a/langs/de.json b/langs/de.json index 1d366f7fa..7419c8c33 100644 --- a/langs/de.json +++ b/langs/de.json @@ -92,7 +92,6 @@ "addNew": "{category} hinzufügen", "backToSelect": "Wählen Sie eine andere Kategorie", "confirmButton": "Eine {category} hinzufügen.
Ihre Ergänzung ist für alle sichtbar
", - "confirmIntro": "

Einen {title} hinzufügen?

Das Objekt, das Sie erstellen wird für alle sichtbar sein. Bitte nur Dinge hinzufügen, die wirklich existieren. Viele Anwendungen verwenden diese Daten.", "disableFilters": "Alle Filter deaktivieren", "disableFiltersExplanation": "Einige Elemente können durch einen Filter ausgeblendet sein", "hasBeenImported": "Dieses Objekt wurde bereits importiert", diff --git a/langs/en.json b/langs/en.json index 0d3a40afc..331961340 100644 --- a/langs/en.json +++ b/langs/en.json @@ -98,7 +98,9 @@ "addNew": "Add {category}", "backToSelect": "Select a different category", "confirmButton": "Add a {category}
Your addition is visible for everyone
", - "confirmIntro": "

Add a {title}?

The feature you create here will be visible for everyone. Please, only add things on to the map if they truly exist. A lot of applications use this data.", + "confirmLocation": "Confirm this location", + "confirmTitle": "Add a {title}?", + "confirmWarning": "The feature you create here will be visible for everyone. Please, only add things on to the map if they truly exist. A lot of applications use this data.", "disableFilters": "Disable all filters", "disableFiltersExplanation": "Some features might be hidden by a filter", "enableLayer": "Enable layer {name}", diff --git a/langs/es.json b/langs/es.json index f0f8fac52..48db01aad 100644 --- a/langs/es.json +++ b/langs/es.json @@ -44,7 +44,6 @@ "add": { "addNew": "Añadir {category}", "confirmButton": "Añadir una {category} .
Tu contribución es visible para todos
", - "confirmIntro": "

Añadir {title} aquí?

El punto que estás creando lo verá todo el mundo. Sólo añade cosas que realmente existan. Muchas aplicaciones usan estos datos.", "disableFilters": "Desactivar todos los filtros", "disableFiltersExplanation": "Algunas características pueden estar ocultas por un filtro", "hasBeenImported": "Este punto ya ha sido importado", diff --git a/langs/fil.json b/langs/fil.json index 9fb65bbe0..41522b2e9 100644 --- a/langs/fil.json +++ b/langs/fil.json @@ -42,7 +42,6 @@ "add": { "addNew": "Dagdagan ng {category}", "confirmButton": "Magdagdag ng {category}
Makikita ng lahat ang idinagdag mo
", - "confirmIntro": "

Mag-dagdag ng {title}?

Ang tampók na ida-dagdag mo ay makikita ng lahat. Paki-usap, mag-dagdag lamang ng mga bagay na tutuong umiiral. Marami pang mga aplikasyon ang gumagamit ng datos na ito.", "disableFilters": "Huwag paganahin ang lahat ng filter", "disableFiltersExplanation": "May mga tampók na maaring nai-tago ng filter", "hasBeenImported": "Ang bukóng ito ay nai-angkat na", diff --git a/langs/fr.json b/langs/fr.json index 09455c6c9..0d66cfd55 100644 --- a/langs/fr.json +++ b/langs/fr.json @@ -63,7 +63,6 @@ "addNew": "Ajouter {category}", "backToSelect": "Sélectionner une catégorie différente", "confirmButton": "Ajouter un/une {category} ici.
Votre ajout sera visible par tout le monde
", - "confirmIntro": "

Ajouter un/une {title} ici ?

L’élément que vous ajouterez sera visible par tout le monde. Merci de vous assurer que celui-ci existe réellement. Beaucoup d'autres applications utilisent ces données.", "disableFilters": "Désactiver tous les filtres", "disableFiltersExplanation": "Certains élément peuvent être filtrés", "hasBeenImported": "Cet élément a déjà été importé", diff --git a/langs/gl.json b/langs/gl.json index 26bcfefc0..5a3b1054f 100644 --- a/langs/gl.json +++ b/langs/gl.json @@ -19,7 +19,6 @@ "add": { "addNew": "Engadir {category} aquí", "confirmButton": "Engadir {category} aquí", - "confirmIntro": "

Engadir {title} aquí?

O punto que estás a crear será ollado por todo o mundo. Só engade cousas que realmente existan. Moitas aplicacións empregan estes datos.", "import": {}, "intro": "Marcaches un lugar onde non coñecemos os datos.
", "layerNotEnabled": "A capa {layer} non está activada. Faino para poder engadir un punto nesta capa", diff --git a/langs/hu.json b/langs/hu.json index 9a2d5a96f..d2934084a 100644 --- a/langs/hu.json +++ b/langs/hu.json @@ -42,7 +42,6 @@ "add": { "addNew": "Új {category} hozzáadása", "confirmButton": "{category} hozzáadása.
A hozzáadott objektum mindenki számára látható lesz
", - "confirmIntro": "

Felrajzolsz egy {title} objektumot?

Az itt létrehozandó térképelemet mindenki láthatja majd. Kérjük, csak valóban létező dolgokat rajzolj fel a térképre. Ezeket az adatokat sok alkalmazás használja.", "disableFilters": "Minden szűrő kikapcsolása", "disableFiltersExplanation": "Lehet, hogy a szűrő miatt egyes térképelemek nem látszanak", "hasBeenImported": "Ezt a térképelemet már importálták", diff --git a/langs/id.json b/langs/id.json index ef37c077e..7fa0ddf5e 100644 --- a/langs/id.json +++ b/langs/id.json @@ -42,7 +42,6 @@ "add": { "addNew": "Tambahkan {category}", "confirmButton": "Tambahkan {category}
Penambahan Anda akan terlihat oleh semua orang
", - "confirmIntro": "

Tambahkan {title}?

Fitur yang Anda buat di sini akan terlihat oleh semua orang. Harap menambahkan sesuatu ke peta hanya jika ia benar-benar ada. Banyak aplikasi menggunakan data ini.", "disableFiltersExplanation": "Beberapa fitur mungkin disembunyikan oleh penyaringan", "hasBeenImported": "Fitur ini sudah diimpor", "import": { diff --git a/langs/it.json b/langs/it.json index e2574e53f..216632adf 100644 --- a/langs/it.json +++ b/langs/it.json @@ -44,7 +44,6 @@ "add": { "addNew": "Aggiungi {category} qua", "confirmButton": "Aggiungi una {category} qua.
La tua aggiunta è visibile a chiunque
", - "confirmIntro": "

Aggiungere un {title}?

L'elemento che hai creato qui sarà visibile da chiunque. Per favore, aggiungi sulla mappa solo oggetti realmente esistenti. Molte applicazioni usano questi dati.", "disableFilters": "Disabilita tutti i filtri", "disableFiltersExplanation": "Alcuni oggetti potrebbero essere nascosti da un filtro", "hasBeenImported": "Questo elemento è stato già importato", diff --git a/langs/ja.json b/langs/ja.json index d0107892c..ee14dcecd 100644 --- a/langs/ja.json +++ b/langs/ja.json @@ -19,7 +19,6 @@ "add": { "addNew": "ここに新しい {category} を追加します", "confirmButton": "ここに{category}を追加します。
追加内容はすべてのユーザーに表示されます。
", - "confirmIntro": "

ここに{title}を追加しますか?

ここで作成したポイントはすべてのユーザーに表示されます。本当に存在するものだけをマップに追加してください。多くのアプリケーションがこのデータを使用しています。", "import": {}, "intro": "データがまだわからない場所をクリックしました。
", "layerNotEnabled": "レイヤ{layer}は有効になっていません。このレイヤで点を追加できるようにする", diff --git a/langs/layers/en.json b/langs/layers/en.json index c63db2b5c..cc09a3bf6 100644 --- a/langs/layers/en.json +++ b/langs/layers/en.json @@ -8870,6 +8870,24 @@ }, "question": "Show user settings debug info?" }, + "show_tags": { + "mappings": { + "0": { + "then": "Never show the tags." + }, + "1": { + "then": "Show the tags that will be applied once I have made {__userjourney_tagsVisibleAt} changesets" + }, + "2": { + "then": "Show the tags that will be applied when making a change" + }, + "3": { + "then": "Show the tags that will be applied when making a change and show the tags table on every feature" + } + }, + "question": "Show the raw OpenStreetMap-tags?", + "questionHint": "Tags are attributes that every element has. This is the technical data that is stored in the database. You don't need this information to edit with MapComplete, but advanced users might want to use this as reference." + }, "translation-completeness": { "mappings": { "0": { diff --git a/langs/nb_NO.json b/langs/nb_NO.json index c8fb04fd5..7318b2b62 100644 --- a/langs/nb_NO.json +++ b/langs/nb_NO.json @@ -75,7 +75,6 @@ "addNew": "Legg til {category} her", "backToSelect": "Velg en annen kategori", "confirmButton": "Legg til en {category} her.
Din endring er synlig for alle
", - "confirmIntro": "

Legg til {title} her?

Punktet du oppretter her vil være synlig for alle. Kun legg til ting på kartet hvis de virkelig finnes. Mange programmer bruker denne dataen.", "disableFilters": "Skru av alle filtre", "disableFiltersExplanation": "Det kan hende noen funksjoner er skjult av et filter", "hasBeenImported": "Dette punktet har allerede blitt importert", diff --git a/langs/nl.json b/langs/nl.json index e9f5f26b2..4a86d635c 100644 --- a/langs/nl.json +++ b/langs/nl.json @@ -92,7 +92,8 @@ "addNew": "Voeg {category} toe", "backToSelect": "Selecteer een andere categorie", "confirmButton": "Voeg een {category} toe
Je toevoeging is voor iedereen zichtbaar
", - "confirmIntro": "

Voeg een {title} toe?

Het object dat je toevoegt, is zichtbaar voor iedereen. Veel applicaties gebruiken deze data, voeg dus enkel punten toe die echt bestaan.", + "confirmTitle": "Voeg een {title} toe?", + "confirmWarning": "Het object dat je toevoegt, is zichtbaar voor iedereen. Veel applicaties gebruiken deze data, voeg dus enkel punten toe die echt bestaan.", "disableFilters": "Zet alle filters af", "disableFiltersExplanation": "Interessepunten kunnen verborgen zijn door een filter", "hasBeenImported": "Dit object is reeds geïmporteerd", diff --git a/langs/pl.json b/langs/pl.json index 4cf22a22b..51c91619d 100644 --- a/langs/pl.json +++ b/langs/pl.json @@ -25,7 +25,6 @@ "add": { "addNew": "Dodaj nową {category} tutaj", "confirmButton": "Dodaj tutaj {category}.
Twój dodatek jest widoczny dla wszystkich
", - "confirmIntro": "

Czy dodać tutaj {title}?

Punkt, który tutaj utworzysz, będzie widoczny dla wszystkich. Proszę, dodawaj rzeczy do mapy tylko wtedy, gdy naprawdę istnieją. Wiele aplikacji korzysta z tych danych.", "intro": "Kliknąłeś gdzieś, gdzie nie są jeszcze znane żadne dane.
", "layerNotEnabled": "Warstwa {layer} nie jest włączona. Włącz tę warstwę, aby dodać punkt", "openLayerControl": "Otwórz okno sterowania warstwą", diff --git a/langs/pt.json b/langs/pt.json index 27144adab..e20bae4e0 100644 --- a/langs/pt.json +++ b/langs/pt.json @@ -81,7 +81,6 @@ "addNew": "Adicionar {category} aqui", "backToSelect": "Selecione uma categoria diferente", "confirmButton": "Adicione uma {category} aqui.
Esta adição será visível a todos
", - "confirmIntro": "

Adicionar {title} aqui?

O elemento que criar aqui será visível a todos. Por favor, só adicione coisas ao mapa se elas realmente existirem. Muitas aplicações usam estes dados.", "disableFilters": "Desativar todos os filtros", "disableFiltersExplanation": "Alguns elementos podem estar escondidos por um filtro", "hasBeenImported": "Este elemento já foi importado", diff --git a/langs/pt_BR.json b/langs/pt_BR.json index b4e7eece9..8998369c2 100644 --- a/langs/pt_BR.json +++ b/langs/pt_BR.json @@ -39,7 +39,6 @@ "add": { "addNew": "Adicione {category} aqui", "confirmButton": "Adicione uma {category} aqui.
Sua adição é visível para todos
", - "confirmIntro": "

Adicionar um {title} aqui?

O ponto que você criar aqui será visível para todos. Por favor, só adicione coisas ao mapa se elas realmente existirem. Muitos aplicativos usam esses dados.", "intro": "Você clicou em algum lugar onde ainda não há dados conhecidos.
", "layerNotEnabled": "A camada {layer} não está habilitada. Habilite esta camada para adicionar um ponto", "openLayerControl": "Abra a caixa de controle da camada", diff --git a/langs/ru.json b/langs/ru.json index 03b297b6a..31c768dd9 100644 --- a/langs/ru.json +++ b/langs/ru.json @@ -32,7 +32,6 @@ "add": { "addNew": "Добавить новую {category} здесь", "confirmButton": "Добавить {category} сюда.
Ваш вклад будет виден каждому
", - "confirmIntro": "

Добавить {title} сюда?

Точка будет видна всем. Пожалуйста, добавляйте только то, что действительно существует. Много приложений используют эти данные.", "intro": "Вы нажали туда, где ещё нет данных.
", "layerNotEnabled": "Слой {layer} не включён. Включите этот слой чтобы добавить точку", "openLayerControl": "Открыть панель управления слоями", diff --git a/langs/zh_Hant.json b/langs/zh_Hant.json index c72673f40..7c1ee389d 100644 --- a/langs/zh_Hant.json +++ b/langs/zh_Hant.json @@ -55,7 +55,6 @@ "add": { "addNew": "在這裡新增新的 {category}", "confirmButton": "在此新增 {category}。
大家都可以看到您新增的內容
", - "confirmIntro": "

在這裡新增 {title} ？

你在這裡新增的圖徵所有人都看得到。請只有在確定有物件存在的情形下才新增上去，許多應用程式都使用這份資料。", "disableFilters": "關閉所有篩選器", "disableFiltersExplanation": "有些圖徵可能被篩選器隱藏", "hasBeenImported": "這個圖徵已經被匯入了", diff --git a/public/css/index-tailwind-output.css b/public/css/index-tailwind-output.css index 1afd0529b..207594d12 100644 --- a/public/css/index-tailwind-output.css +++ b/public/css/index-tailwind-output.css @@ -909,10 +909,6 @@ video { margin-bottom: 2rem; } -.mb-1 { - margin-bottom: 0.25rem; -} - .-ml-6 { margin-left: -1.5rem; } @@ -929,6 +925,10 @@ video { margin-top: -3rem; } +.mb-1 { + margin-bottom: 0.25rem; +} + .box-border { box-sizing: border-box; } @@ -1281,6 +1281,11 @@ video { gap: 1rem; } +.gap-x-2 { + -webkit-column-gap: 0.5rem; + column-gap: 0.5rem; +} + .gap-y-1 { row-gap: 0.25rem; } @@ -1445,9 +1450,9 @@ video { border-color: rgb(252 165 165 / var(--tw-border-opacity)); } -.border-lime-500 { +.border-gray-600 { --tw-border-opacity: 1; - border-color: rgb(132 204 22 / var(--tw-border-opacity)); + border-color: rgb(75 85 99 / var(--tw-border-opacity)); } .border-opacity-50 { @@ -1537,16 +1542,16 @@ video { padding-bottom: 1rem; } -.px-2 { - padding-left: 0.5rem; - padding-right: 0.5rem; -} - .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; } +.px-2 { + padding-left: 0.5rem; + padding-right: 0.5rem; +} + .px-4 { padding-left: 1rem; padding-right: 1rem; @@ -1671,6 +1676,10 @@ video { font-weight: 600; } +.font-normal { + font-weight: 400; +} + .uppercase { text-transform: uppercase; } @@ -1812,12 +1821,6 @@ video { transition-duration: 150ms; } -.transition-\[color\2c background-color\2c box-shadow\] { - transition-property: color,background-color,box-shadow; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} - .transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); @@ -1830,6 +1833,12 @@ video { transition-duration: 150ms; } +.transition-\[color\2c background-color\2c box-shadow\] { + transition-property: color,background-color,box-shadow; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + .ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } @@ -1910,14 +1919,14 @@ li::marker { } h1 { - font-size: x-large; + font-size: xx-large; margin-top: 0.6em; margin-bottom: 0.4em; font-weight: bold; } h2 { - font-size: large; + font-size: x-large; margin-top: 0.5em; margin-bottom: 0.3em; font-weight: bold; @@ -1976,32 +1985,6 @@ input { * This very important section defines what the various input elements look like within the 'low-interaction' and 'interactive'-blocks */ -button.disabled { - cursor: default; - border: 2px dashed var(--button-background); - background: unset; - color: unset; - box-shadow: none; -} - -button.disabled:hover { - cursor: default; - border: 2px dashed var(--button-background); - background: unset; - color: unset; -} - -button:hover { - border: 2px solid var(--catch-detail-color-contrast); - background-color: var(--catch-detail-color); - color: var(--catch-detail-foregroundcolor); -} - -button:hover img { - background: var(--low-interaction-background); - border-radius: 100rem; -} - button { display: inline-flex; line-height: 1.25rem; @@ -2011,14 +1994,14 @@ button { padding-right: 0.6rem; font-size: large; font-weight: bold; - color: var(--button-foreground); - background: var(--button-background); /*-- invisible border: rendered on hover*/ border: 2px solid var(--button-background); border-radius: 0.5rem; transition: all 250ms; --tw-text-opacity: 1; --tw-bg-opacity: 1; + background: var(--low-interaction-background); + color: var(--low-interaction-foreground); } button .button-shadow { @@ -2035,8 +2018,58 @@ button.selected svg path { fill: var(--catch-detail-foregroundcolor) !important; } -button svg path { +button:not(.no-image-background) svg path { + fill: var(--interactive-foreground) !important; + transition: all 250ms; +} + +.interactive button { + background: var(--interactive-background); + color: var(--interactive-foreground); +} + +button:hover { + background-color: var(--catch-detail-color); + color: var(--catch-detail-foregroundcolor); + border: 2px solid var(--catch-detail-color-contrast); +} + +button:hover:not(.no-image-background) img { + background: var(--low-interaction-background); + border-radius: 100rem; +} + +button:hover:not(.no-image-background) svg path { + fill: var(--catch-detail-foregroundcolor) !important; +} + +button.disabled:hover:not(.no-image-background) svg path { + fill: var(--low-interaction-foreground) !important; +} + +button.primary { + color: var(--button-foreground); + background: var(--button-background); +} + +button.primary:not(.no-image-background) svg path { fill: var(--button-foreground) !important; + transition: all 250ms; +} + +button.disabled { + cursor: default; + border: 2px dashed var(--button-background); + background: unset; + color: unset; + box-shadow: none; +} + +button.disabled:hover { + cursor: default; + border: 2px dashed var(--button-background); + background: unset; + color: unset; } .interactive button.disabled svg path { @@ -2051,50 +2084,6 @@ button svg path { fill: var(--foreground-color) !important; } -button.disabled.secondary:hover { - background: unset; - color: unset; -} - -button.secondary { - background: var(--low-interaction-background); - color: var(--low-interaction-foreground); - border-color: var(--button-background); -} - -.interactive button.secondary { - background: var(--interactive-background); - color: var(--interactive-foreground); -} - -button.secondary svg path { - fill: var(--low-interaction-foreground) !important; - transition: all 250ms; -} - -button.secondary.disabled { - background: unset; - color: var(--low-interaction-foreground); -} - -button.secondary.disabled svg path { - fill: var(--low-interaction-foreground) !important; -} - -button.secondary:hover { - background-color: var(--catch-detail-color); - color: var(--catch-detail-foregroundcolor); - border-color: var(--catch-detail-color-contrast); -} - -button.secondary:hover svg path { - fill: var(--catch-detail-foregroundcolor) !important; -} - -button.secondary.disabled:hover svg path { - fill: var(--low-interaction-foreground) !important; -} - label { /** * Label should _contain_ the input element @@ -2135,13 +2124,19 @@ label.checked { border: 2px solid var(--foreground-color); } -.active-links a{ - /* - * Let a 'link' mimick a secondary button, but not entirely - */ - display: block; +.links-w-full a { + display: flex; + -webkit-column-gap: 0.25rem; + column-gap: 0.25rem; + padding-left: 0.5rem; + padding-right: 0.5rem; width: 100%; - height: 100%; +} + +.links-as-button a{ + /* + * Let a 'link' mimick a button, but not entirely + */ padding: 3px; margin: 0; background: var(--low-interaction-background); @@ -2150,13 +2145,13 @@ label.checked { border-radius: 0.5rem; } -.active-links a:hover { +.links-as-button a:hover { background-color: var(--interactive-background); color: var(--catch-detail-foregroundcolor); border-color: var(--catch-detail-color-contrast); } -.active-links a:hover svg path { +.links-as-button a:hover svg path { fill: var(--catch-detail-foregroundcolor) !important; } @@ -2169,12 +2164,15 @@ label.checked { .thanks { /* The class to indicate 'operation successful' or 'thank you for contributing' */ - background-color: #43d904; font-weight: bold; border-radius: 1em; margin: 0.25em; text-align: center; - padding: 0.15em 0.3em; + padding: 0.25rem; + padding-left: 0.5rem; + padding-right: 0.5rem; + border: 3px dotted #58cd27; + background-color: #58cd2722; } .alert { @@ -2186,6 +2184,7 @@ label.checked { margin: 0.25em; text-align: center; padding: 0.15em 0.3em; + border: 2px dotted #ff9143; } .subtle {