button styling

packages/client/src/components/MkInfo.vue

@@ -10,7 +10,7 @@
 		<button
 			v-if="closeable"
 			v-tooltip="i18n.ts.close"
-			class="_button close"
+			class="_buttonIcon close"
 			@click.stop="close"
 		>
 			<i class="ph-x ph-bold ph-lg"></i>
@@ -48,6 +48,9 @@ function close() {
 	background: var(--infoBg);
 	color: var(--infoFg);
 	border-radius: var(--radius);
+	display: flex;
+	align-items: center;
+	gap: .4em;
 
 	&.warn {
 		background: var(--infoWarnBg);
@@ -55,6 +58,7 @@ function close() {
 	}
 
 	&.card {
+		display: inline;
 		background: var(--panel);
 		color: var(--fg);
 		padding: 48px;

packages/client/src/components/global/MkPageHeader.vue

@@ -11,7 +11,7 @@
 			<div class="buttons">
 				<button
 					v-if="props.displayBackButton"
-					class="_button button icon backButton"
+					class="_buttonIcon button icon backButton"
 					@click.stop="goBack()"
 					@touchstart="preventDrag"
 					v-tooltip.noDelay="i18n.ts.goBack"
@@ -110,7 +110,7 @@
 			<template v-for="action in actions">
 				<button
 					v-tooltip.noDelay="action.text"
-					class="_button button"
+					class="_buttonIcon button"
 					:class="{ highlighted: action.highlighted }"
 					@click.stop="action.handler"
 					@touchstart="preventDrag"
@@ -393,26 +393,6 @@ onUnmounted(() => {
 			}
 		}
 
-		> .button/*, @at-root .backButton*/ {
-			/* I don't know how to get this to work */
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			height: calc(var(--height) - (var(--margin) * 2));
-			width: calc(var(--height) - (var(--margin) * 2));
-			box-sizing: border-box;
-			position: relative;
-			border-radius: 5px;
-
-			&:hover {
-				background: rgba(0, 0, 0, 0.05);
-			}
-
-			&.highlighted {
-				color: var(--accent);
-			}
-		}
-
 		> .fullButton {
 			& + .fullButton {
 				margin-left: 12px;

packages/client/src/style.scss

@@ -219,6 +219,36 @@ hr {
 	}
 }
 
+._buttonIcon {
+	@extend ._button;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: calc(var(--height) - (var(--margin) * 2));
+	height: calc(var(--height) - (var(--margin) * 2));
+	box-sizing: border-box;
+	position: relative;
+	border-radius: 5px;
+
+	&::before {
+		content: "";
+		position: absolute;
+		width: 2.7em;
+		height: 2.7em;
+		border-radius: inherit;
+		transition: background 0.2s;
+	}
+
+	&:hover:before {
+		// background: rgba(0, 0, 0, 0.05);
+		background: var(--buttonBg);
+	}
+
+	&.highlighted::before {
+		color: var(--accent);
+	}
+}
+
 ._buttonPrimary {
 	@extend ._button;
 	color: var(--fgOnAccent);