🎨

src/client/components/debobigego/switch.vue

@@ -96,6 +96,7 @@ export default defineComponent({
 				width: 16px;
 				height: 16px;
 				background-color: #fff;
+				pointer-events: none;
 			}
 		}
 

src/client/components/ui/menu.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="rrevdjwt" :class="{ left: align === 'left', pointer: point === 'top' }"
+<div class="rrevdjwt" :class="{ center: align === 'center' }"
 	ref="items"
 	@contextmenu.self="e => e.preventDefault()"
 	v-hotkey="keymap"
@@ -59,10 +59,6 @@ export default defineComponent({
 			type: String,
 			requried: false
 		},
-		point: {
-			type: String,
-			requried: false
-		},
 	},
 	emits: ['close'],
 	data() {
@@ -145,26 +141,11 @@ export default defineComponent({
 <style lang="scss" scoped>
 .rrevdjwt {
 	padding: 8px 0;
+	min-width: 200px;
 
-	&.pointer {
+	&.center {
-		&:before {
-			--size: 8px;
-			content: '';
-			display: block;
-			position: absolute;
-			top: calc(0px - (var(--size) * 2));
-			left: 0;
-			right: 0;
-			width: 0;
-			margin: auto;
-			border: solid var(--size) transparent;
-			border-bottom-color: var(--popup);
-		}
-	}
-
-	&.left {
 		> .item {
-			text-align: left;
+			text-align: center;
 		}
 	}
 
@@ -177,33 +158,55 @@ export default defineComponent({
 		white-space: nowrap;
 		font-size: 0.9em;
 		line-height: 20px;
-		text-align: center;
+		text-align: left;
 		overflow: hidden;
 		text-overflow: ellipsis;
 
+		&:before {
+			content: "";
+			display: block;
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			margin: auto;
+			width: calc(100% - 16px);
+			height: 100%;
+			border-radius: 6px;
+		}
+
 		&.danger {
 			color: #ff2a2a;
 
 			&:hover {
 				color: #fff;
-				background: #ff4242;
+
+				&:before {
+					background: #ff4242;
+				}
 			}
 
 			&:active {
 				color: #fff;
-				background: #d42e2e;
+
+				&:before {
+					background: #d42e2e;
+				}
 			}
 		}
 
 		&:hover {
-			color: var(--fgOnAccent);
+			color: var(--accent);
-			background: var(--accent);
 			text-decoration: none;
+
+			&:before {
+				background: var(--accentedBg);
+			}
 		}
 
 		&:active {
-			color: var(--fgOnAccent);
+			//color: var(--fgOnAccent);
-			background: var(--accentDarken);
+			//background: var(--accentDarken);
 		}
 
 		&:not(:active):focus-visible {

src/client/components/ui/popup-menu.vue

@@ -1,6 +1,6 @@
 <template>
-<MkPopup ref="popup" :src="src" @closed="$emit('closed')" #default="{point}">
+<MkPopup ref="popup" :src="src" @closed="$emit('closed')">
-	<MkMenu :items="items" :align="align" :point="point" @close="$refs.popup.close()" class="_popup _shadow"/>
+	<MkMenu :items="items" :align="align" @close="$refs.popup.close()" class="_popup _shadow"/>
 </MkPopup>
 </template>
 

src/client/components/ui/popup.vue

@@ -1,7 +1,7 @@
 <template>
 <transition :name="$store.state.animation ? 'popup-menu' : ''" appear @after-leave="onClosed" @enter="$emit('opening')" @after-enter="childRendered">
 	<div v-show="manualShowing != null ? manualShowing : showing" class="ccczpooj" :class="{ front, fixed, top: position === 'top' }" ref="content" :style="{ pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }">
-		<slot :point="point"></slot>
+		<slot></slot>
 	</div>
 </transition>
 </template>
@@ -52,7 +52,6 @@ export default defineComponent({
 			fixed: false,
 			transformOrigin: 'center',
 			contentClicking: false,
-			point: null,
 		};
 	},
 
@@ -136,10 +135,8 @@ export default defineComponent({
 			}
 
 			if (top > rect.top + (this.fixed ? 0 : window.pageYOffset)) {
-				this.point = 'top';
 				this.transformOrigin = 'center top';
 			} else {
-				this.point = null;
 				this.transformOrigin = 'center';
 			}