taste-redesign

resources/input.css

@@ -2,6 +2,43 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer base {
+  html {
+    scroll-behavior: smooth;
+    font-size: 15px;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  body {
+    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
+  }
+
+  /* Tabular numbers for monetary values */
+  .tabular {
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* Focus ring for accessibility */
+  *:focus-visible {
+    outline: 2px solid #3b82f6;
+    outline-offset: 2px;
+    border-radius: 2px;
+  }
+
+  /* Smooth transitions for interactive elements */
+  button,
+  a.button,
+  .navbar-item,
+  .pagination-link,
+  .tag,
+  select,
+  input,
+  textarea {
+    transition: all 0.15s ease-in-out;
+  }
+}
+
 .htmx-added .fade-in {
     opacity: 0.0 !important;
 }
@@ -151,7 +188,7 @@
 }
 
 .min-h-content {
-    min-height: calc(100vh - 4em);
+    min-height: calc(100dvh - 4em);
 }
 
 .arrow,

resources/public/css/main.css

@@ -1,10 +1,10 @@
     form.dz .notification {  border: 2px dashed lightgray;}
 
     html,body {
-  font-size: 14px;
-  line-height: 1.5;
+  font-size: 15px;
+  line-height: 1.6;
   height: 100%;
-  background-color: #fff;
+  background-color: #f9fafb;
 }
 
     @keyframes scaleUp {
@@ -468,4 +468,125 @@ table.balance-sheet th.total {
     background-color: whitesmoke !important;
     border-color: whitesmoke !important;
     box-shadow: none;
+}
+
+/* ===== Design Upgrades ===== */
+
+/* Better table row hover */
+.table tbody tr {
+  transition: background-color 0.15s ease-in-out;
+}
+.table tbody tr:hover {
+  background-color: #f3f4f6 !important;
+}
+
+/* Sidebar item hover */
+.aside .main .item:hover {
+  background-color: #f3f4f6 !important;
+  transition: background-color 0.15s ease-in-out;
+}
+.aside .main .item.is-active {
+  background-color: #e5e7eb !important;
+}
+
+/* Navbar item hover */
+.navbar-item:hover {
+  background-color: #f3f4f6 !important;
+}
+
+/* Button active/pressed state */
+button:active,
+a.button:active {
+  transform: scale(0.98);
+}
+
+/* Pagination link hover */
+.pagination-link:hover {
+  background-color: #e5e7eb;
+  border-color: #d1d5db;
+}
+
+/* Tag hover */
+.tag.is-delete:hover {
+  background-color: #ef4444 !important;
+}
+
+/* Modal card shadow */
+.modal-card {
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+/* Card elevation */
+.card {
+  transition: box-shadow 0.2s ease-in-out;
+}
+.card:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+}
+
+/* Sidebar viewport fix */
+.aside {
+  min-height: calc(100dvh - 46px) !important;
+}
+
+/* Better select styling */
+select {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
+  background-position: right 0.5rem center !important;
+  background-repeat: no-repeat !important;
+  background-size: 1.5em 1.5em !important;
+  padding-right: 2.5rem !important;
+  -webkit-appearance: none !important;
+  -moz-appearance: none !important;
+  appearance: none !important;
+}
+
+/* Notification polish */
+.notification {
+  border-radius: 6px;
+}
+
+/* Better loader color */
+.loader.is-loading {
+  border-color: #16a34a !important;
+  border-right-color: transparent !important;
+  border-top-color: transparent !important;
+}
+
+/* Input focus state */
+.input:focus, .textarea:focus, .select select:focus {
+  border-color: #3b82f6 !important;
+  box-shadow: 0 0 0 1px #3b82f6 !important;
+}
+
+/* Better title styling */
+.title {
+  font-weight: 600;
+  letter-spacing: -0.025em;
+}
+.title.is-4 {
+  letter-spacing: -0.02em;
+}
+
+/* Better code/mono font for numbers */
+.table td {
+  font-variant-numeric: tabular-nums;
+}
+
+/* Subtle scrollbar styling */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+::-webkit-scrollbar-track {
+  background: #f3f4f6;
+}
+::-webkit-scrollbar-thumb {
+  background: #d1d5db;
+  border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: #9ca3af;
 }

resources/public/index.html

@@ -5,8 +5,10 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Integreat</title>
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=" crossorigin="anonymous" />
-  <link href="/css/font.min.css" rel="stylesheet">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="/css/bulma.min.css" />
   <link rel="stylesheet" href="/css/bulma-calendar.min.css" />
   <link rel="stylesheet" href="/css/bulma-badge.min.css" />