Refine UI (#7806)

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* Update default.vue

* wip

src/client/components/global/avatar.vue

@@ -73,6 +73,22 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+@keyframes earwiggleleft {
+	from { transform: rotate(37.6deg) skew(30deg); }
+	25% { transform: rotate(10deg) skew(30deg); }
+	50% { transform: rotate(20deg) skew(30deg); }
+	75% { transform: rotate(0deg) skew(30deg); }
+	to { transform: rotate(37.6deg) skew(30deg); }
+}
+
+@keyframes earwiggleright {
+	from { transform: rotate(-37.6deg) skew(-30deg); }
+	30% { transform: rotate(-10deg) skew(-30deg); }
+	55% { transform: rotate(-20deg) skew(-30deg); }
+	75% { transform: rotate(0deg) skew(-30deg); }
+	to { transform: rotate(-37.6deg) skew(-30deg); }
+}
+
 .eiwwqkts {
 	position: relative;
 	display: inline-block;
@@ -132,6 +148,16 @@ export default defineComponent({
 			border-radius: 75% 0 75% 75%;
 			transform: rotate(-37.5deg) skew(-30deg);
 		}
+
+		&:hover {
+			&:before {
+				animation: earwiggleleft 1s infinite;
+			}
+
+			&:after {
+				animation: earwiggleright 1s infinite;
+			}
+		}
 	}
 }
 </style>

src/client/components/ui/folder.vue

@@ -99,7 +99,8 @@ export default defineComponent({
 		z-index: 10;
 		position: sticky;
 		top: var(--stickyTop, 0px);
-		background: var(--panel);
+		padding: var(--x-padding);
+		background: var(--x-header, var(--panel));
 		/* TODO panelの半透明バージョンをプログラマティックに作りたい
 		background: var(--X17);
 		-webkit-backdrop-filter: var(--blur, blur(8px));

src/client/components/ui/input.vue

@@ -245,7 +245,7 @@ export default defineComponent({
 			font-size: 1em;
 			color: var(--fg);
 			background: var(--panel);
-			border: solid 1px var(--inputBorder);
+			border: solid 0.5px var(--inputBorder);
 			border-radius: 6px;
 			outline: none;
 			box-shadow: none;

src/client/components/ui/textarea.vue

@@ -212,7 +212,7 @@ export default defineComponent({
 			font-size: 1em;
 			color: var(--fg);
 			background: var(--panel);
-			border: solid 1px var(--inputBorder);
+			border: solid 0.5px var(--inputBorder);
 			border-radius: 6px;
 			outline: none;
 			box-shadow: none;