feat(css): added unocss with attributify preset

src/components/TextareaCopyable.vue

@@ -21,7 +21,7 @@
         <span>{{ tooltipText }}</span>
       </n-tooltip>
     </n-card>
-    <n-space v-if="copyPlacement === 'outside'" justify="center" style="margin-top: 15px">
+    <n-space v-if="copyPlacement === 'outside'" justify="center" mt-4>
       <n-button secondary @click="onCopyClicked"> {{ tooltipText }} </n-button>
     </n-space>
   </div>

src/layouts/base.layout.vue

@@ -141,7 +141,7 @@ const tools = computed<ToolCategory[]>(() => [
               @click="() => tracker.trackEvent({ eventName: 'Support button clicked' })"
             >
               Buy me a coffee
-              <n-icon v-if="!styleStore.isSmallScreen" :component="Heart" style="margin-left: 5px" />
+              <n-icon v-if="!styleStore.isSmallScreen" :component="Heart" ml-2 />
             </n-button>
           </template>
           ❤ Support IT Tools development !

src/main.ts

@@ -5,6 +5,8 @@ import { createHead } from '@vueuse/head';
 import { registerSW } from 'virtual:pwa-register';
 import { plausible } from './plugins/plausible.plugin';
 
+import 'virtual:uno.css';
+
 registerSW();
 
 import { naive } from './plugins/naive.plugin';

src/tools/base64-file-converter/base64-file-converter.vue

@@ -17,7 +17,7 @@
   <n-card title="File to base64">
     <n-upload v-model:file-list="fileList" :show-file-list="true" :on-before-upload="onUpload" list-type="image">
       <n-upload-dragger>
-        <div style="margin-bottom: 12px">
+        <div mb-2>
           <n-icon size="35" :depth="3" :component="Upload" />
         </div>
         <n-text style="font-size: 14px"> Click or drag a file to this area to upload </n-text>

src/tools/bcrypt/bcrypt.vue

@@ -12,7 +12,7 @@
         />
       </n-form-item>
       <n-form-item label="Salt count: " label-placement="left">
-        <n-input-number v-model:value="saltCount" placeholder="Salt rounds..." :max="10" :min="0" style="width: 100%" />
+        <n-input-number v-model:value="saltCount" placeholder="Salt rounds..." :max="10" :min="0" w-full />
       </n-form-item>
       <n-input :value="hashed" readonly style="text-align: center" />
     </n-form>

src/tools/chmod-calculator/chmod-calculator.vue

@@ -24,7 +24,7 @@
       {{ octal }}
     </div>
 
-    <input-copyable :value="`chmod ${octal} path`" readonly style="margin-bottom: 5px" />
+    <input-copyable :value="`chmod ${octal} path`" readonly />
   </div>
 </template>
 

src/tools/integer-base-converter/integer-base-converter.vue

@@ -4,11 +4,11 @@
       <div v-if="styleStore.isSmallScreen">
         <n-input-group>
           <n-input-group-label style="flex: 0 0 120px"> Input number: </n-input-group-label>
-          <n-input v-model:value="input" style="width: 100%" :status="error ? 'error' : undefined" />
+          <n-input v-model:value="input" w-full :status="error ? 'error' : undefined" />
         </n-input-group>
         <n-input-group>
           <n-input-group-label style="flex: 0 0 120px"> Input base: </n-input-group-label>
-          <n-input-number v-model:value="inputBase" max="64" min="2" style="width: 100%" />
+          <n-input-number v-model:value="inputBase" max="64" min="2" w-full />
         </n-input-group>
       </div>
 

src/tools/otp-code-generator-and-validator/token-display.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <n-space class="labels" item-style="flex: 1 1 0" style="width: 100%" align="center">
+    <n-space class="labels" item-style="flex: 1 1 0" w-full align="center">
       <div style="text-align: left">Previous</div>
       <div style="text-align: center">Current OTP</div>
       <div style="text-align: right">Next</div>

src/tools/temperature-converter/temperature-converter.vue

@@ -1,10 +1,6 @@
 <template>
   <div>
-    <n-input-group
-      v-for="[key, { title, unit }] in Object.entries(units)"
-      :key="key"
-      style="width: 100%; margin-bottom: 15px"
-    >
+    <n-input-group v-for="[key, { title, unit }] in Object.entries(units)" :key="key" mb-3 w-full>
       <n-input-group-label style="width: 100px">
         {{ title }}
       </n-input-group-label>