🔨 Remove stylus

Author: devmount

package-lock.json

@@ -17,12 +17,9 @@
 		"vue-i18n": "^11.1.10"
 	},
 	"devDependencies": {
-		"@intlify/unplugin-vue-i18n": "^11.0.1",
 		"@localazy/cli": "^2.0.5",
 		"@vitejs/plugin-vue": "^6.0.0",
 		"oxlint": "^1.9.0",
-		"stylus": "^0.64.0",
-		"stylus-loader": "^8.1.0",
 		"vite": "^7.1.11"
 	},
 	"browserslist": [

package.json

@@ -626,49 +626,52 @@ onMounted(async () => {
 });
 </script>
 
-<style lang="stylus">
-@require "assets/global"
-
-// general
-html, body
-	min-height: 300px
-
-// layout
-#options
-	width: 100%
-	min-height: 100vh
-
-	header,	footer,	.container
-		width: calc(100% - 2rem)
-		max-width: 840px
-		padding: 1rem
-
-	&.embedded
-		header,	footer,	.container
-			width: 100%
-			max-width: auto
-			padding-left: .5rem
-			padding-right: .5rem
-		.container > section:first-child > h2
-			margin-top: 0
-
-	header
-		h1
-			margin: 0
-			.logo
-				height: 48px
-
-	.container
-		&>section
-			h2
-				font-weight: 300
-			.entry
-				display: grid
-				grid-template-columns: 1fr 50%
-				column-gap: 2rem
-				margin-bottom: 1rem
-				.action
-					align-self: center
-
+<style>
+@import url('assets/main.css');
+
+html, body {
+	min-height: 300px;
+}
+
+#options {
+	width: 100%;
+	min-height: 100vh;
+}
+#options header,
+#options footer,
+#options .container {
+	width: calc(100% - 2rem);
+	max-width: 840px;
+	padding: 1rem;
+}
+#options.embedded header,
+#options.embedded footer,
+#options.embedded .container {
+	width: 100%;
+	max-width: auto;
+	padding-left: 0.5rem;
+	padding-right: 0.5rem;
+}
+#options.embedded .container > section:first-child > h2 {
+	margin-top: 0;
+}
+#options header h1 {
+	margin: 0;
+}
+#options header h1 .logo {
+	height: 48px;
+}
+#options .container>section h2 {
+	font-weight: 300;
+}
+#options .container>section .entry {
+	display: grid;
+	grid-template-columns: 1fr 50%;
+	column-gap: 2rem;
+	margin-bottom: 1rem;
+}
+#options .container>section .entry .action {
+	align-self: center;
+}
 
 </style>

src/Options.vue

@@ -5,7 +5,7 @@
 			<header class="d-flex gap-0-5 mb-1-5">
 				<h3 class="flex-grow">
 					<span class="mr-1">{{ t("popup.nAccounts", accounts.length, [accounts.length]) }}</span>
-					<span v-if="loading" class="loading"></span>
+					<span v-if="loading" class="loader"></span>
 				</h3>
 				<div
 					class="cursor-pointer tooltip tooltip-left transition-color"
@@ -162,49 +162,54 @@ onMounted(async () => {
 });
 </script>
 
-<style lang="stylus">
-@require "assets/global"
+<style>
+@import url('assets/main.css');
 
-// general
-html, body
-	width: 380px
-	overflow-y: auto
-	overflow-x: hidden
-
-// layout
-#popup
-	width: 100%
-	height: 100%
-
-	.container
-		padding-left: 20px
-		padding-right: 20px
-		padding-bottom: 20px
-		header
-			h3
-				margin: 0
-				font-weight: 400
-				font-size: 20px
-		.loading
-			loader 16px 3px
-		.accounts
-			display: grid
-			grid-template-columns: 1fr 1fr
-			gap: 20px
-			& > div
-				padding: .75rem 1rem
-				border-radius: 4px
-				transition: all .2s
-				overflow: hidden
-				h4
-					margin: 0
-					font-weight: normal
-					white-space: nowrap
-					overflow: hidden
-					text-overflow: ellipsis
-				.background-chart
-					position: absolute
-					bottom: 0
-					left: 0
+html, body {
+	width: 380px;
+	overflow-y: auto;
+	overflow-x: hidden;
+}
 
+#popup {
+	width: 100%;
+	height: 100%;
+}
+#popup .container {
+	padding-left: 20px;
+	padding-right: 20px;
+	padding-bottom: 20px;
+}
+#popup .container header h3 {
+	margin: 0;
+	font-weight: 400;
+	font-size: 20px;
+}
+#popup .container .loader {
+	height: 16px;
+	width: 16px;
+}
+#popup .container .accounts {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: 20px;
+}
+#popup .container .accounts > div {
+	padding: 0.75rem 1rem;
+	border-radius: 4px;
+	transition: all 0.2s;
+	overflow: hidden;
+}
+#popup .container .accounts > div h4 {
+	margin: 0;
+	font-weight: normal;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+#popup .container .accounts > div .background-chart {
+	position: absolute;
+	bottom: 0;
+	left: 0;
+}
 </style>