src/main.js

@@ -20,7 +20,10 @@ import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
 import App from './App.vue'
 import { i18n, loadLanguage } from './i18n';
 import getCurrentLanguage from './utils/currentLanguage';
-import router from './router';
+import router from './router'
+import './styles/common.css'
+import './styles/variables/colors.css'
+import './styles/variables/dimensions.css';
 
 import './styles/common.css';
 import './styles/variables/colors.css';

src/styles/common.css

@@ -46,6 +46,24 @@ input {
     color: var(--dark);
 }
 
+.input {
+    padding: var(--input-padding);
+    display: block;
+    border-radius: calc(var(--input-padding) + 0.5 * var(--input-height) + 1px);
+    height: var(--input-height);
+    border: 1px solid var(--border);
+    background: none;
+    transition: border-color 0.2s ease;
+    color: inherit;
+    font-family: inherit;
+    font-size: inherit;
+}
+
+.input:focus-visible {
+    border-color: var(--primary-color);
+    outline: none;
+}
+
 .main-content-padding {
     padding: var(--main-content-padding);
     width: calc(100% - var(--main-content-padding-x) * 2);

src/styles/variables/dimensions.css

@@ -0,0 +1,4 @@
+:root {
+    --input-padding: 0.7em;
+    --input-height: 1em;
+}