From 07f9f1bb1524b82d79e079fc1651135cfb5a76ee Mon Sep 17 00:00:00 2001 From: Pieter Vander Vennet Date: Thu, 11 May 2023 17:29:25 +0200 Subject: [PATCH] More style tweaks --- Logic/State/UserRelatedState.ts | 2 +- UI/Base/ShareButton.svelte | 34 +++++ UI/BigComponents/Filterview.svelte | 137 ++++++++++-------- UI/BigComponents/SelectedElementTitle.svelte | 12 +- UI/BigComponents/SelectedElementView.svelte | 2 +- UI/BigComponents/ShareButton.ts | 43 ------ UI/Image/ImageUploadFlow.ts | 35 +++-- UI/Input/FileSelectorButton.ts | 6 +- UI/InputElement/ValidatedInput.svelte | 1 - UI/Popup/ShareLinkViz.ts | 10 +- .../TagRendering/TagRenderingAnswer.svelte | 3 +- .../TagRendering/TagRenderingEditable.svelte | 23 ++- .../TagRendering/TagRenderingQuestion.svelte | 1 - assets/svg/share.svg | 47 ++++-- index.css | 32 +++- package-lock.json | 20 ++- package.json | 2 +- public/css/index-tailwind-output.css | 82 ++++++++--- 18 files changed, 304 insertions(+), 188 deletions(-) create mode 100644 UI/Base/ShareButton.svelte delete mode 100644 UI/BigComponents/ShareButton.ts diff --git a/Logic/State/UserRelatedState.ts b/Logic/State/UserRelatedState.ts index 304f09c2f4..b038ccb849 100644 --- a/Logic/State/UserRelatedState.ts +++ b/Logic/State/UserRelatedState.ts @@ -256,7 +256,7 @@ export default class UserRelatedState { _theme: layout?.id, _backend: this.osmConnection.Backend(), _applicationOpened: new Date().toISOString(), - _supports_sharing: window.navigator.share ? "yes" : "no" + _supports_sharing: "yes" // TODO window.navigator.share ? "yes" : "no" }) for (const key in Constants.userJourney) { diff --git a/UI/Base/ShareButton.svelte b/UI/Base/ShareButton.svelte new file mode 100644 index 0000000000..9078815f30 --- /dev/null +++ b/UI/Base/ShareButton.svelte @@ -0,0 +1,34 @@ + + + + diff --git a/UI/BigComponents/Filterview.svelte b/UI/BigComponents/Filterview.svelte index a7f7a86c02..c64dd26af0 100644 --- a/UI/BigComponents/Filterview.svelte +++ b/UI/BigComponents/Filterview.svelte @@ -6,103 +6,122 @@ import LayerConfig from "../../Models/ThemeConfig/LayerConfig"; import ToSvelte from "../Base/ToSvelte.svelte"; import Checkbox from "../Base/Checkbox.svelte"; import FilterConfig from "../../Models/ThemeConfig/FilterConfig"; -import type { Writable } from "svelte/store"; +import type {Writable} from "svelte/store"; import If from "../Base/If.svelte"; import Dropdown from "../Base/Dropdown.svelte"; -import { onDestroy } from "svelte"; -import { ImmutableStore, Store } from "../../Logic/UIEventSource"; +import {onDestroy} from "svelte"; +import {ImmutableStore, Store} from "../../Logic/UIEventSource"; import FilterviewWithFields from "./FilterviewWithFields.svelte"; import Tr from "../Base/Tr.svelte"; import Translations from "../i18n/Translations"; export let filteredLayer: FilteredLayer; -export let highlightedLayer: Store = new ImmutableStore(undefined); +export let highlightedLayer: Store = new ImmutableStore(undefined); export let zoomlevel: Store = new ImmutableStore(22); let layer: LayerConfig = filteredLayer.layerDef; let isDisplayed: boolean = filteredLayer.isDisplayed.data; onDestroy(filteredLayer.isDisplayed.addCallbackAndRunD(d => { - isDisplayed = d; - return false; + isDisplayed = d; + return false; })); /** * Gets a UIEventSource as boolean for the given option, to be used with a checkbox */ function getBooleanStateFor(option: FilterConfig): Writable { - const state = filteredLayer.appliedFilters.get(option.id); - return state.sync(f => f === 0, [], (b) => b ? 0 : undefined); + const state = filteredLayer.appliedFilters.get(option.id); + return state.sync(f => f === 0, [], (b) => b ? 0 : undefined); } /** * Gets a UIEventSource as number for the given option, to be used with a dropdown or radiobutton */ function getStateFor(option: FilterConfig): Writable { - return filteredLayer.appliedFilters.get(option.id); + return filteredLayer.appliedFilters.get(option.id); } let mainElem: HTMLElement; $: onDestroy( - highlightedLayer.addCallbackAndRun(highlightedLayer => { - if (highlightedLayer === filteredLayer.layerDef.id) { - mainElem?.classList?.add("glowing-shadow"); - } else { - mainElem?.classList?.remove("glowing-shadow"); - } - }) + highlightedLayer.addCallbackAndRun(highlightedLayer => { + if (highlightedLayer === filteredLayer.layerDef.id) { + mainElem?.classList?.add("glowing-shadow"); + } else { + mainElem?.classList?.remove("glowing-shadow"); + } + }) ); {#if filteredLayer.layerDef.name} -
-
{/if} + + diff --git a/UI/BigComponents/SelectedElementTitle.svelte b/UI/BigComponents/SelectedElementTitle.svelte index 03fd6c1e56..151e1552df 100644 --- a/UI/BigComponents/SelectedElementTitle.svelte +++ b/UI/BigComponents/SelectedElementTitle.svelte @@ -31,7 +31,7 @@ {#if _tags._deleted === "yes"} {:else} -
+
@@ -40,12 +40,12 @@ {layer}> -
+
{#each layer.titleIcons as titleIconConfig} {#if (titleIconConfig.condition?.matchesProperties(_tags) ?? true) && (titleIconConfig.metacondition?.matchesProperties({..._metatags, ..._tags}) ?? true) && titleIconConfig.IsKnown(_tags)} -
+
+ {layer} extraClasses="h-full justify-center" >
{/if} {/each} @@ -55,3 +55,7 @@ state.selectedElement.setData(undefined)}/>
{/if} + + diff --git a/UI/BigComponents/SelectedElementView.svelte b/UI/BigComponents/SelectedElementView.svelte index 73c470da7a..6fd95d822d 100644 --- a/UI/BigComponents/SelectedElementView.svelte +++ b/UI/BigComponents/SelectedElementView.svelte @@ -30,7 +30,7 @@ {#if _tags._deleted === "yes"} {:else} -
+
{#each layer.tagRenderings as config (config.id)} {#if (config.condition === undefined || config.condition.matchesProperties(_tags)) && (config.metacondition === undefined || config.metacondition.matchesProperties({..._tags, ..._metatags}))} {#if config.IsKnown(_tags)} diff --git a/UI/BigComponents/ShareButton.ts b/UI/BigComponents/ShareButton.ts deleted file mode 100644 index a3af0390b5..0000000000 --- a/UI/BigComponents/ShareButton.ts +++ /dev/null @@ -1,43 +0,0 @@ -import BaseUIElement from "../BaseUIElement" - -export default class ShareButton extends BaseUIElement { - private _embedded: BaseUIElement - private _shareData: () => { text: string; title: string; url: string } - - constructor( - embedded: BaseUIElement, - generateShareData: () => { - text: string - title: string - url: string - } - ) { - super() - this._embedded = embedded - this._shareData = generateShareData - this.SetClass("share-button") - } - - protected InnerConstructElement(): HTMLElement { - const e = document.createElement("button") - e.type = "button" - e.appendChild(this._embedded.ConstructElement()) - - e.addEventListener("click", () => { - if (navigator.share) { - navigator - .share(this._shareData()) - .then(() => { - console.log("Thanks for sharing!") - }) - .catch((err) => { - console.log(`Couldn't share because of`, err.message) - }) - } else { - console.log("web share not supported") - } - }) - - return e - } -} diff --git a/UI/Image/ImageUploadFlow.ts b/UI/Image/ImageUploadFlow.ts index a246058f65..3a92acaeba 100644 --- a/UI/Image/ImageUploadFlow.ts +++ b/UI/Image/ImageUploadFlow.ts @@ -1,20 +1,20 @@ -import { Store, UIEventSource } from "../../Logic/UIEventSource" +import {Store, UIEventSource} from "../../Logic/UIEventSource" import Combine from "../Base/Combine" import Translations from "../i18n/Translations" import Svg from "../../Svg" -import { Tag } from "../../Logic/Tags/Tag" +import {Tag} from "../../Logic/Tags/Tag" import BaseUIElement from "../BaseUIElement" import Toggle from "../Input/Toggle" import FileSelectorButton from "../Input/FileSelectorButton" import ImgurUploader from "../../Logic/ImageProviders/ImgurUploader" import ChangeTagAction from "../../Logic/Osm/Actions/ChangeTagAction" import LayerConfig from "../../Models/ThemeConfig/LayerConfig" -import { FixedUiElement } from "../Base/FixedUiElement" -import { VariableUiElement } from "../Base/VariableUIElement" +import {FixedUiElement} from "../Base/FixedUiElement" +import {VariableUiElement} from "../Base/VariableUIElement" import Loading from "../Base/Loading" -import { LoginToggle } from "../Popup/LoginButton" +import {LoginToggle} from "../Popup/LoginButton" import Constants from "../../Models/Constants" -import { SpecialVisualizationState } from "../SpecialVisualization" +import {SpecialVisualizationState} from "../SpecialVisualization" export class ImageUploadFlow extends Toggle { private static readonly uploadCountsPerId = new Map>() @@ -70,17 +70,22 @@ export class ImageUploadFlow extends Toggle { const label = new Combine([ Svg.camera_plus_svg().SetClass("block w-12 h-12 p-1 text-4xl "), labelContent, - ]) - .SetClass( - "p-2 border-4 border-detail rounded-full font-bold h-full align-middle w-full flex justify-center" - ) - .SetStyle(" border-color: var(--foreground-color);") + ]).SetClass("w-full flex justify-center items-center") + const licenseStore = state?.osmConnection?.GetPreference( Constants.OsmPreferenceKeyPicturesLicense, "CC0" ) - const fileSelector = new FileSelectorButton(label) + const fileSelector = new FileSelectorButton(label, { + acceptType: "image/*", + allowMultiple: true, + labelClasses: "rounded-full border-2 border-black font-bold" + }) + /* fileSelector.SetClass( + "p-2 border-4 border-detail rounded-full font-bold h-full align-middle w-full flex justify-center" + ) + .SetStyle(" border-color: var(--foreground-color);")*/ fileSelector.GetValue().addCallback((filelist) => { if (filelist === undefined || filelist.length === 0) { return @@ -139,7 +144,7 @@ export class ImageUploadFlow extends Toggle { return new Loading(t.uploadingPicture).SetClass("alert") } else { return new Loading( - t.uploadingMultiple.Subs({ count: "" + l }) + t.uploadingMultiple.Subs({count: "" + l}) ).SetClass("alert") } }) @@ -163,7 +168,7 @@ export class ImageUploadFlow extends Toggle { if (l == 1) { return t.uploadDone.Clone().SetClass("thanks block") } - return t.uploadMultipleDone.Subs({ count: l }).SetClass("thanks block") + return t.uploadMultipleDone.Subs({count: l}).SetClass("thanks block") }) ), @@ -172,7 +177,7 @@ export class ImageUploadFlow extends Toggle { Translations.t.image.respectPrivacy, new VariableUiElement( licenseStore.map((license) => - Translations.t.image.currentLicense.Subs({ license }) + Translations.t.image.currentLicense.Subs({license}) ) ) .onClick(() => { diff --git a/UI/Input/FileSelectorButton.ts b/UI/Input/FileSelectorButton.ts index 2a409a8869..b38da0c562 100644 --- a/UI/Input/FileSelectorButton.ts +++ b/UI/Input/FileSelectorButton.ts @@ -11,17 +11,20 @@ export default class FileSelectorButton extends InputElement { private readonly _label: BaseUIElement private readonly _acceptType: string private readonly allowMultiple: boolean + private readonly _labelClasses: string; constructor( label: BaseUIElement, options?: { acceptType: "image/*" | string - allowMultiple: true | boolean + allowMultiple: true | boolean, + labelClasses?: string } ) { super() this._label = label this._acceptType = options?.acceptType ?? "image/*" + this._labelClasses= options?.labelClasses ?? "" this.SetClass("block cursor-pointer") label.SetClass("cursor-pointer") this.allowMultiple = options?.allowMultiple ?? true @@ -40,6 +43,7 @@ export default class FileSelectorButton extends InputElement { const el = document.createElement("form") const label = document.createElement("label") label.appendChild(this._label.ConstructElement()) + label.classList.add(...this._labelClasses.split(" ").filter(t => t !== "")) el.appendChild(label) const actualInputElement = document.createElement("input") diff --git a/UI/InputElement/ValidatedInput.svelte b/UI/InputElement/ValidatedInput.svelte index 52ca82ee3c..3a621802c3 100644 --- a/UI/InputElement/ValidatedInput.svelte +++ b/UI/InputElement/ValidatedInput.svelte @@ -22,7 +22,6 @@ // The type changed -> reset some values validator = Validators.get(type) _value.setData(value.data ?? "") - console.log("REseting validated input, _value is ", _value.data, validator?.getFeedback(_value.data, getCountry)) feedback = feedback?.setData(validator?.getFeedback(_value.data, getCountry)); _placeholder = placeholder ?? validator?.getPlaceholder() ?? type } diff --git a/UI/Popup/ShareLinkViz.ts b/UI/Popup/ShareLinkViz.ts index c63cffcf16..7246c7e8fa 100644 --- a/UI/Popup/ShareLinkViz.ts +++ b/UI/Popup/ShareLinkViz.ts @@ -1,9 +1,10 @@ import { UIEventSource } from "../../Logic/UIEventSource" import LayerConfig from "../../Models/ThemeConfig/LayerConfig" -import ShareButton from "../BigComponents/ShareButton" import Svg from "../../Svg" import { FixedUiElement } from "../Base/FixedUiElement" import { SpecialVisualization, SpecialVisualizationState } from "../SpecialVisualization"; +import SvelteUIElement from "../Base/SvelteUIElement"; +import ShareButton from "../Base/ShareButton.svelte"; export class ShareLinkViz implements SpecialVisualization { funcName = "share_link" @@ -18,7 +19,6 @@ export class ShareLinkViz implements SpecialVisualization { ] public constr(state: SpecialVisualizationState, tagSource: UIEventSource>, args: string[]) { - if (window.navigator.share) { const generateShareData = () => { const title = state?.layout?.title?.txt ?? "MapComplete" @@ -45,9 +45,7 @@ export class ShareLinkViz implements SpecialVisualization { } } - return new ShareButton(Svg.share_svg().SetClass("w-8 h-8"), generateShareData) - } else { - return new FixedUiElement("") - } + return new SvelteUIElement(ShareButton, {generateShareData}) + //return new ShareButton(Svg.share_svg().SetClass("w-8 h-8"), generateShareData) } } diff --git a/UI/Popup/TagRendering/TagRenderingAnswer.svelte b/UI/Popup/TagRendering/TagRenderingAnswer.svelte index e977dce32e..24012815f9 100644 --- a/UI/Popup/TagRendering/TagRenderingAnswer.svelte +++ b/UI/Popup/TagRendering/TagRenderingAnswer.svelte @@ -25,12 +25,13 @@ $:{ trs = Utils.NoNull(config?.GetRenderValues(_tags)); } + export let extraClasses: string= "" let classes = "" $:classes = config?.classes?.join(" ") ?? ""; {#if config !== undefined && (config?.condition === undefined || config.condition.matchesProperties(_tags))} -
+
{#if trs.length === 1} {/if} diff --git a/UI/Popup/TagRendering/TagRenderingEditable.svelte b/UI/Popup/TagRendering/TagRenderingEditable.svelte index 780e62b32f..0ed0a398bc 100644 --- a/UI/Popup/TagRendering/TagRenderingEditable.svelte +++ b/UI/Popup/TagRendering/TagRenderingEditable.svelte @@ -71,25 +71,22 @@
{#if config.question && $editingEnabled} {#if editMode} -
- - - {editMode = false}}/> - -
+ + + {editMode = false}}/> + {:else} -
+
-
{/if} {:else } -
- -
+ {/if}
diff --git a/UI/Popup/TagRendering/TagRenderingQuestion.svelte b/UI/Popup/TagRendering/TagRenderingQuestion.svelte index 2e04d29c70..1a0e3c04e5 100644 --- a/UI/Popup/TagRendering/TagRenderingQuestion.svelte +++ b/UI/Popup/TagRendering/TagRenderingQuestion.svelte @@ -26,7 +26,6 @@ export let layer: LayerConfig; let feedback: UIEventSource = new UIEventSource(undefined); - feedback.addCallbackAndRunD(f => console.trace("Feedback is now", f.txt)) // Will be bound if a freeform is available let freeformInput = new UIEventSource(tags?.[config.freeform?.key]); diff --git a/assets/svg/share.svg b/assets/svg/share.svg index 9483764813..d8410009d5 100644 --- a/assets/svg/share.svg +++ b/assets/svg/share.svg @@ -1,9 +1,38 @@ - - - - - - - - - \ No newline at end of file + + + + + + diff --git a/index.css b/index.css index 535ca30a82..e05f2e4723 100644 --- a/index.css +++ b/index.css @@ -34,7 +34,7 @@ --interactive-foreground: black; --interactive-contrast: #ff00ff; - --button-background: #737373; + --button-background: black; --button-foreground: white; /** @@ -172,7 +172,6 @@ button.disabled:hover { color: unset; } - button:hover { border: 2px solid var(--catch-detail-color-contrast); background-color: var(--catch-detail-color); @@ -184,7 +183,6 @@ button:hover img { border-radius: 100rem; } - button { display: inline-flex; line-height: 1.25rem; @@ -319,6 +317,34 @@ label.checked { border: 2px solid var(--foreground-color); } + + +.active-links a{ + /* + * Let a 'link' mimick a secondary button, but not entirely + */ + display: block; + width: 100%; + height: 100%; + padding: 3px; + margin: 0; + background: var(--low-interaction-background); + color: var(--low-interaction-foreground); + border: 2px solid var(--interactive-background); + border-radius: 0.5rem; +} + + +.active-links 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 { + fill: var(--catch-detail-foregroundcolor) !important; +} + /************************* OTHER CATEGORIES ********************************/ /** diff --git a/package-lock.json b/package-lock.json index e63a98d2ad..7c005414d8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "mapcomplete", - "version": "0.25.1", + "version": "0.30.5", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "mapcomplete", - "version": "0.25.1", + "version": "0.30.5", "license": "GPL-3.0-or-later", "dependencies": { "@onsvisual/svelte-maps": "^1.1.6", @@ -4465,9 +4465,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001445", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001445.tgz", - "integrity": "sha512-8sdQIdMztYmzfTMO6KfLny878Ln9c2M0fc7EH60IjlP4Dc4PiCy7K2Vl3ITmWgOyPgVQKa5x+UP/KqFsxj4mBg==", + "version": "1.0.30001486", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001486.tgz", + "integrity": "sha512-uv7/gXuHi10Whlj0pp5q/tsK/32J2QSqVRKQhs2j8VsDCjgyruAh/eEXHF822VqO9yT6iZKw3nRwZRSPBE9OQg==", "dev": true, "funding": [ { @@ -4477,6 +4477,10 @@ { "type": "tidelift", "url": "https://tidelift.com/funding/github/npm/caniuse-lite" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" } ] }, @@ -15387,9 +15391,9 @@ "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==" }, "caniuse-lite": { - "version": "1.0.30001445", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001445.tgz", - "integrity": "sha512-8sdQIdMztYmzfTMO6KfLny878Ln9c2M0fc7EH60IjlP4Dc4PiCy7K2Vl3ITmWgOyPgVQKa5x+UP/KqFsxj4mBg==", + "version": "1.0.30001486", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001486.tgz", + "integrity": "sha512-uv7/gXuHi10Whlj0pp5q/tsK/32J2QSqVRKQhs2j8VsDCjgyruAh/eEXHF822VqO9yT6iZKw3nRwZRSPBE9OQg==", "dev": true }, "canvg": { diff --git a/package.json b/package.json index e509b20918..03bb27e421 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,7 @@ "prepare-deploy": "npm run generate:service-worker && ./scripts/build.sh", "format": "npx prettier --write --svelte-bracket-new-line=false --html-whitespace-sensitivity=ignore '**/*.ts' '**/*.svelte'", "clean:tests": "(find . -type f -name \"*.doctest.ts\" | xargs -r rm)", - "clean": "rm -rf .cache/ && (find *.html | grep -v \"^\\(404\\|index\\|land\\|test\\|preferences\\|customGenerator\\|professional\\|automaton\\|import_helper\\|import_viewer\\|theme\\).html\" | xargs -r rm) && (ls | grep \"^index_[a-zA-Z_-]\\+\\.ts$\" | xargs -r rm) && (ls | grep \".*.webmanifest$\" | grep -v \"manifest.webmanifest\" | xargs -r rm)", + "clean": "rm -rf .cache/ && (find *.html | grep -v \"^\\(404\\|index\\|land\\|test\\|preferences\\|customGenerator\\|professional\\|automaton\\|import_helper\\|import_viewer\\|theme\\|style_test\\).html\" | xargs -r rm) && (ls | grep \"^index_[a-zA-Z_-]\\+\\.ts$\" | xargs -r rm) && (ls | grep \".*.webmanifest$\" | grep -v \"manifest.webmanifest\" | xargs -r rm)", "generate:dependency-graph": "node_modules/.bin/depcruise --exclude \"^node_modules\" --output-type dot Logic/State/MapState.ts > dependencies.dot && dot dependencies.dot -T svg -o dependencies.svg && rm dependencies.dot", "weblate-add-upstream": "git remote add weblate-github git@github.com:weblate/MapComplete.git && git remote add weblate-hosted-core https://hosted.weblate.org/git/mapcomplete/core/ && git remote add weblate-hosted-layers https://hosted.weblate.org/git/mapcomplete/layers/", "weblate-merge": "git remote update weblate-github; git merge weblate-github/weblate-mapcomplete-core weblate-github/weblate-mapcomplete-layers weblate-github/weblate-mapcomplete-layer-translations", diff --git a/public/css/index-tailwind-output.css b/public/css/index-tailwind-output.css index fa4c6a8471..1afd0529b8 100644 --- a/public/css/index-tailwind-output.css +++ b/public/css/index-tailwind-output.css @@ -825,11 +825,6 @@ video { margin-bottom: 0.75rem; } -.mx-2 { - margin-left: 0.5rem; - margin-right: 0.5rem; -} - .mr-2 { margin-right: 0.5rem; } @@ -1024,6 +1019,10 @@ video { height: fit-content; } +.h-7 { + height: 1.75rem; +} + .h-11 { height: 2.75rem; } @@ -1048,8 +1047,8 @@ video { height: 20rem; } -.max-h-32 { - max-height: 8rem; +.max-h-12 { + max-height: 3rem; } .max-h-7 { @@ -1060,14 +1059,6 @@ video { max-height: 6rem; } -.max-h-12 { - max-height: 3rem; -} - -.min-h-\[8rem\] { - min-height: 8rem; -} - .w-full { width: 100%; } @@ -1114,6 +1105,10 @@ video { width: fit-content; } +.w-7 { + width: 1.75rem; +} + .w-11 { width: 2.75rem; } @@ -1290,6 +1285,20 @@ video { row-gap: 0.25rem; } +.gap-x-0\.5 { + -webkit-column-gap: 0.125rem; + column-gap: 0.125rem; +} + +.gap-x-0 { + -webkit-column-gap: 0px; + column-gap: 0px; +} + +.gap-y-2 { + row-gap: 0.5rem; +} + .self-start { align-self: flex-start; } @@ -1533,6 +1542,11 @@ video { padding-right: 0.5rem; } +.px-3 { + padding-left: 0.75rem; + padding-right: 0.75rem; +} + .px-4 { padding-left: 1rem; padding-right: 1rem; @@ -1702,11 +1716,6 @@ video { color: rgb(22 163 74 / var(--tw-text-opacity)); } -.text-\[\#999\] { - --tw-text-opacity: 1; - color: rgb(153 153 153 / var(--tw-text-opacity)); -} - .text-white { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); @@ -1761,6 +1770,12 @@ video { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } +.drop-shadow-md { + --tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06)); + -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + .grayscale { --tw-grayscale: grayscale(100%); -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); @@ -1845,7 +1860,7 @@ video { --interactive-background: #dddddd; --interactive-foreground: black; --interactive-contrast: #ff00ff; - --button-background: #737373; + --button-background: black; --button-foreground: white; /** * Base colour of interactive elements, mainly the 'subtle button' @@ -2120,6 +2135,31 @@ label.checked { border: 2px solid var(--foreground-color); } +.active-links a{ + /* + * Let a 'link' mimick a secondary button, but not entirely + */ + display: block; + width: 100%; + height: 100%; + padding: 3px; + margin: 0; + background: var(--low-interaction-background); + color: var(--low-interaction-foreground); + border: 2px solid var(--interactive-background); + border-radius: 0.5rem; +} + +.active-links 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 { + fill: var(--catch-detail-foregroundcolor) !important; +} + /************************* OTHER CATEGORIES ********************************/ /**