🎨

src/client/components/channel-follow-button.vue

@@ -91,7 +91,7 @@ export default defineComponent({
 		width: 31px;
 	}
 
-	&:focus {
+	&:focus-visible {
 		&:after {
 			content: "";
 			pointer-events: none;

src/client/components/emoji-picker-window.vue

@@ -153,7 +153,7 @@ export default defineComponent({
 					height: var(--eachSize);
 					border-radius: 4px;
 
-					&:focus {
+					&:focus-visible {
 						outline: solid 2px var(--focus);
 						z-index: 1;
 					}

src/client/components/emoji-picker.vue

@@ -465,7 +465,7 @@ export default defineComponent({
 					height: var(--eachSize);
 					border-radius: 4px;
 
-					&:focus {
+					&:focus-visible {
 						outline: solid 2px var(--focus);
 						z-index: 1;
 					}

src/client/components/follow-button.vue

@@ -161,7 +161,7 @@ export default defineComponent({
 		width: 31px;
 	}
 
-	&:focus {
+	&:focus-visible {
 		&:after {
 			content: "";
 			pointer-events: none;

src/client/components/media-caption.vue

@@ -206,7 +206,7 @@ export default defineComponent({
 		min-width: 100%;
 		min-height: 90px;
 
-		&:focus {
+		&:focus-visible {
 			outline: none;
 		}
 

src/client/components/note.vue

@@ -888,7 +888,7 @@ export default defineComponent({
 	//content-visibility: auto;
   //contain-intrinsic-size: 0 128px;
 
-	&:focus {
+	&:focus-visible {
 		outline: none;
 
 		&:after {

src/client/components/post-form.vue

@@ -819,7 +819,7 @@ export default defineComponent({
 			color: var(--fg);
 			font-family: inherit;
 
-			&:focus {
+			&:focus-visible {
 				outline: none;
 			}
 

src/client/components/ui/button.vue

@@ -1,7 +1,7 @@
 <template>
 <component class="bghgjjyj _button"
 	:is="link ? 'MkA' : 'button'"
-	:class="{ inline, primary, danger, full }"
+	:class="{ inline, primary, danger, rounded, full }"
 	:type="type"
 	@click="$emit('click', $event)"
 	@mousedown="onMousedown"
@@ -27,6 +27,11 @@ export default defineComponent({
 			required: false,
 			default: false
 		},
+		rounded: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
 		inline: {
 			type: Boolean,
 			required: false,
@@ -124,8 +129,8 @@ export default defineComponent({
 	box-shadow: none;
 	text-decoration: none;
 	background: var(--buttonBg);
-	border-radius: 999px;
-	overflow: hidden;
+	border-radius: 4px;
+	overflow: clip;
 	box-sizing: border-box;
 	transition: background 0.1s ease;
 
@@ -141,6 +146,10 @@ export default defineComponent({
 		width: 100%;
 	}
 
+	&.rounded {
+		border-radius: 999px;
+	}
+
 	&.primary {
 		font-weight: bold;
 		color: var(--fgOnAccent) !important;
@@ -176,7 +185,7 @@ export default defineComponent({
 		opacity: 0.7;
 	}
 
-	&:focus {
+	&:focus-visible {
 		outline: solid 2px var(--focus);
 		outline-offset: 2px;
 	}

src/client/components/ui/menu.vue

@@ -206,7 +206,7 @@ export default defineComponent({
 			background: var(--accentDarken);
 		}
 
-		&:not(:active):focus {
+		&:not(:active):focus-visible {
 			box-shadow: 0 0 0 2px var(--focus) inset;
 		}