@axium/client 0.31.0 → 0.31.2

package/assets/styles.css

@@ -232,15 +232,18 @@ div.success {
 }
 
 .danger {
-	border: var(--border-error);
-	background-color: hsl(from var(--bg-strong) 0 s l);
-	color: hsl(0 33 var(--fg-light));
-	--fill: hsl(0 33 var(--fg-light));
-	accent-color: hsl(0 33 var(--fg-light));
-}
+	color: var(--fg-danger);
+	--fill: var(--fg-danger);
+	accent-color: var(--fg-danger);
+
+	&:is(button, div):not(.reset) {
+		border: var(--border-error);
+		background-color: var(--bg-danger);
 
-.danger:hover {
-	background-color: hsl(0 20 calc(var(--bg-light) + (var(--light-step) * 3)));
+		&:hover {
+			background-color: hsl(0 20 calc(var(--bg-light) + (var(--light-step) * 3)));
+		}
+	}
 }
 
 :disabled,
@@ -274,6 +277,15 @@ div.success {
 			background-color: var(--bg-strong);
 			cursor: pointer;
 		}
+
+		&.danger:where(button, div) {
+			border: none;
+			background-color: transparent;
+
+			&:hover {
+				background-color: var(--bg-danger);
+			}
+		}
 	}
 
 	.menu-header {
@@ -474,4 +486,39 @@ div.toast {
 		z-index: 4;
 		font-size: 1.25em;
 	}
+
+	:popover-open {
+		position: fixed;
+		width: 100%;
+		max-width: 100%;
+		max-height: 80dvh;
+		overflow-y: auto;
+		border: none;
+		gap: 0.25em;
+
+		&:not(.mobile-top) {
+			inset: auto 0 0 0 !important;
+			border-top: var(--border-elevated);
+			border-radius: 1em 1em 0 0;
+			padding: 0.5em 0.5em calc(0.5em + env(safe-area-inset-bottom, 0px));
+		}
+
+		&.mobile-top {
+			inset: 0 0 auto 0 !important;
+			border-bottom: var(--border-elevated);
+			border-radius: 0 0 1em 1em;
+			padding: calc(0.5em + env(safe-area-inset-top, 0px)) 0.5em 0.5em;
+		}
+
+		.menu-item {
+			padding: 1em;
+			font-size: 1.05em;
+			border-radius: 0.75em;
+		}
+
+		.menu-header {
+			padding: 0.75em 1em 0.5em;
+			font-size: 1em;
+		}
+	}
 }

package/assets/theme.css

@@ -36,6 +36,7 @@ html {
 	--bg-alt: hsl(var(--hue) 5 calc(var(--bg-light) + var(--light-step)));
 	--bg-strong: hsl(var(--hue) 20 calc(var(--bg-light) + var(--light-step)));
 	--bg-elevated: hsl(from var(--bg-menu) h s l / 95%);
+	--bg-danger: hsl(from var(--bg-strong) 0 s l);
 
 	--bg-error: hsl(0 40 var(--bg-light-status));
 	--bg-warning: hsl(60 40 var(--bg-light-status));
@@ -45,6 +46,7 @@ html {
 	--fg-accent: hsl(var(--hue) 15 var(--fg-light));
 	--fg-strong: hsl(var(--hue) 25 calc(var(--fg-light) - var(--light-step)));
 	--fg-disabled: hsl(0 0 calc(var(--fg-light) - var(--light-step)));
+	--fg-danger: hsl(0 33 var(--fg-light));
 
 	--fg-error: hsl(0 50 calc(var(--fg-light) - var(--light-step)));
 	--fg-warning: hsl(60 50 calc(var(--fg-light) - var(--light-step)));

package/dist/gui/index.d.ts

@@ -1,3 +1,4 @@
 export * from './animate.js';
 export * from './clipboard.js';
 export * as controls from './controls.js';
+export * from './mobile.js';

package/dist/gui/index.js

@@ -1,3 +1,4 @@
 export * from './animate.js';
 export * from './clipboard.js';
 export * as controls from './controls.js';
+export * from './mobile.js';

package/dist/gui/mobile.d.ts

@@ -0,0 +1 @@
+export declare function isMobile(): boolean;

package/dist/gui/mobile.js

@@ -0,0 +1,4 @@
+const width = matchMedia('(width <= 700px)');
+export function isMobile() {
+    return width.matches;
+}

package/lib/Popover.svelte

@@ -66,16 +66,16 @@
 		:global(:hover:has(:hover > .Popover > .toggle-hover)) > div > .toggle-hover:not(.cascade-hover) {
 			visibility: hidden;
 		}
-	}
 
-	:popover-open {
-		position-anchor: --popover;
-		position-try-fallbacks:
-			flip-inline,
-			flip-block,
-			flip-block flip-inline;
-		position-visibility: always;
-		left: anchor(left);
-		top: anchor(bottom);
+		:popover-open {
+			position-anchor: --popover;
+			position-try-fallbacks:
+				flip-inline,
+				flip-block,
+				flip-block flip-inline;
+			position-visibility: always;
+			left: anchor(left);
+			top: anchor(bottom);
+		}
 	}
 </style>

package/lib/UserMenu.svelte

@@ -10,7 +10,7 @@
 </script>
 
 {#if user}
-	<Popover>
+	<Popover class="mobile-top">
 		{#snippet toggle()}
 			<div class="UserMenu toggle">
 				<UserPFP {user} />
@@ -51,8 +51,8 @@
 			<i>{text('AppMenu.failed')}</i>
 		{/await}
 
-		<button class="menu-item logout reset" command="show-modal" commandfor="logout">
-			<Icon i="right-from-bracket" --size="1.5em" --fill="hsl(0 33 var(--fg-light))" />
+		<button class="menu-item danger reset" command="show-modal" commandfor="logout">
+			<Icon i="right-from-bracket" --size="1.5em" />
 			<span>{text('generic.logout')}</span>
 		</button>
 	</Popover>
@@ -73,18 +73,16 @@
 		background-color: var(--bg-alt);
 	}
 
-	.logout {
-		color: hsl(0 33 var(--fg-light));
-		font-size: 16px;
-	}
-
 	:global(.UserMenu + div:popover-open) {
-		position: fixed;
-		left: unset;
-		right: anchor(right);
-		top: calc(anchor(bottom) + 0.5em);
-		width: fit-content;
-		height: fit-content;
 		cursor: default;
+
+		@media (width > 700px) {
+			position: fixed;
+			left: unset;
+			right: anchor(right);
+			top: calc(anchor(bottom) + 0.5em);
+			width: fit-content;
+			height: fit-content;
+		}
 	}
 </style>

package/lib/attachments/context-menu.ts

@@ -1,3 +1,4 @@
+import { isMobile } from '@axium/client/gui';
 import { mount, unmount } from 'svelte';
 import type { Attachment } from 'svelte/attachments';
 import Icon from '../Icon.svelte';
@@ -86,6 +87,8 @@ export function contextMenu(...menuItems: ContextMenuEntry[] | [() => ContextMen
 			menu.showPopover();
 			_forcePopover = true;
 
+			if (isMobile()) return;
+
 			const x = e.clientX;
 			const y = e.clientY;
 

package/lib/attachments/drag-and-drop.ts

@@ -1,4 +1,4 @@
-import { mount, unmount, type Component } from 'svelte';
+import { mount, unmount } from 'svelte';
 import type { Attachment } from 'svelte/attachments';
 import Icon from '../Icon.svelte';
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@axium/client",
-	"version": "0.31.0",
+	"version": "0.31.2",
 	"author": "James Prevett <jp@jamespre.dev>",
 	"funding": {
 		"type": "individual",
@@ -40,7 +40,10 @@
 		"./toast": "./lib/toast.js",
 		"./attachments": "./lib/attachments/index.js",
 		"./reactive": "./lib/reactive/index.svelte.js",
-		"./styles/*": "./styles/*.css"
+		"./styles/*": {
+			"types": "./styles/styles.d.ts",
+			"default": "./styles/*.css"
+		}
 	},
 	"scripts": {
 		"build": "tsc"

package/styles/styles.d.ts

@@ -0,0 +1 @@
+declare module '@axium/client/styles/*';