Nice UI

src/css/app.scss

@@ -1,10 +1,157 @@
-// app global css in SCSS form
 @font-face {
   font-family: geist;
   src: url(./font/Geist-var.ttf) format('truetype');
 }
 
-// declare a class which applies it
 html, body {
-  font-family: 'geist';
+  font-family: 'geist', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+:root {
+  --glow-primary: 0 0 20px rgba(6, 182, 212, 0.15);
+  --glow-secondary: 0 0 20px rgba(168, 85, 247, 0.15);
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.q-drawer {
+  background: rgba(15, 15, 20, 0.95) !important;
+  border-right: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.q-header {
+  background: rgba(9, 9, 11, 0.95) !important;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.q-card {
+  border-radius: 16px;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  background: rgba(15, 15, 20, 0.95);
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
+}
+
+.q-table__container,
+.q-table {
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.q-table tbody td {
+  border-color: rgba(255, 255, 255, 0.04) !important;
+}
+
+.q-table thead th {
+  border-color: rgba(255, 255, 255, 0.06) !important;
+  font-weight: 600;
+  text-transform: uppercase;
+  font-size: 0.75rem;
+  letter-spacing: 0.05em;
+  opacity: 0.7;
+}
+
+.q-btn {
+  border-radius: 10px;
+  font-weight: 500;
+  letter-spacing: 0.01em;
+  transition: all 0.2s ease;
+}
+
+.q-btn--outline:before {
+  border-radius: 10px;
+}
+
+.q-field--outlined .q-field__control {
+  border-radius: 10px;
+  border-color: rgba(255, 255, 255, 0.1);
+}
+
+.q-field--outlined .q-field__control:hover {
+  border-color: rgba(255, 255, 255, 0.2);
+}
+
+.q-input .q-field__native,
+.q-input .q-field__label {
+  font-family: 'geist', sans-serif;
+}
+
+.q-field__label {
+  font-weight: 400;
+}
+
+.q-chip {
+  border-radius: 8px;
+  font-weight: 500;
+  font-size: 0.75rem;
+}
+
+.q-item {
+  border-radius: 8px;
+  margin: 1px 0;
+}
+
+.q-item.q-router-link--active,
+.q-item--active {
+  background: rgba(168, 85, 247, 0.1);
+  border-left: 2px solid #a855f7;
+}
+
+.q-dialog .q-card {
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
+}
+
+.q-separator {
+  background: rgba(255, 255, 255, 0.06);
+}
+
+.q-btn-toggle .q-btn {
+  border-radius: 8px;
+}
+
+.q-btn-toggle {
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.text-faded {
+  opacity: 0.4;
+}
+
+.q-page {
+  animation: fadeIn 0.3s ease;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.q-uploader {
+  border-radius: 12px;
+  border: 1px dashed rgba(255, 255, 255, 0.15) !important;
+  background: rgba(255, 255, 255, 0.02) !important;
+}
+
+.q-toggle__thumb {
+  border-radius: 50%;
 }

src/css/quasar.variables.scss

@@ -1,35 +1,13 @@
-// Quasar SCSS (& Sass) Variables
-// --------------------------------------------------
-// To customize the look and feel of this app, you can override
-// the Sass/SCSS variables found in Quasar's source Sass/SCSS files.
+$primary   : #06b6d4;
+$secondary : #a855f7;
+$accent    : #f472b6;
 
-// Check documentation for full list of Quasar variables
+$dark      : #09090b;
+$dark-page : #060608;
 
-// Your own variables (that are declared here) and Quasar's own
-// ones will be available out of the box in your .vue/.scss/.sass files
+$positive  : #10b981;
+$negative  : #ef4444;
+$info      : #60a5fa;
+$warning   : #f59e0b;
 
-// It's highly recommended to change the default colors
-// to match your app's branding.
-// Tip: Use the "Theme Builder" on Quasar's documentation website.
-
-//$primary   : #1976D2;
-//$secondary : #26A69A;
-//$accent    : #9C27B0;
-//
-//$dark      : #1D1D1D;
-//$dark-page : #121212;
-//
-//$positive  : #21BA45;
-//$negative  : #C10015;
-//$info      : #31CCEC;
-//$warning   : #F2C037;
-
-$primary: #027be3;
-$secondary: #26A69A;
-$tertiary: #555;
-
-$neutral: #E0E1E2;
-$positive: #21BA45;
-$negative: #DB2828;
-$info: #31CCEC;
-$warning: #F2C037;
+$typography-font-family: 'Geist', sans-serif;