taste-redesign

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;
 }