cool CSS

static/css/base.css

@@ -88,10 +88,90 @@ body {
     padding: 2rem;
 }
 
+/* Enhanced Card Styles */
 .card {
     border: none;
     border-radius: 10px;
     box-shadow: 0 2px 4px var(--shadow-color);
+    background: var(--white);
+    position: relative;
+    overflow: hidden;
+}
+
+/* Hover effects only for dashboard and room/conversation cards */
+body[data-page="dashboard"] .card,
+body[data-page="rooms"] .card,
+body[data-page="conversations"] .card {
+    transition: all 0.3s ease;
+}
+
+body[data-page="dashboard"] .card:hover,
+body[data-page="rooms"] .card:hover,
+body[data-page="conversations"] .card:hover {
+    box-shadow: 0 8px 16px var(--shadow-color);
+}
+
+body[data-page="dashboard"] .card::after,
+body[data-page="rooms"] .card::after,
+body[data-page="conversations"] .card::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(135deg, var(--primary-opacity-15) 0%, var(--secondary-opacity-15) 100%);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    pointer-events: none;
+}
+
+body[data-page="dashboard"] .card:hover::after,
+body[data-page="rooms"] .card:hover::after,
+body[data-page="conversations"] .card:hover::after {
+    opacity: 1;
+}
+
+/* Override hover effects for file grid cards */
+#fileGrid .card {
+    transform: none !important;
+    box-shadow: 0 2px 4px var(--shadow-color) !important;
+}
+
+#fileGrid .card:hover {
+    transform: none !important;
+    box-shadow: 0 2px 4px var(--shadow-color) !important;
+}
+
+#fileGrid .card::after {
+    display: none !important;
+}
+
+/* Custom Scrollbar Styles */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--bg-color);
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--primary-color);
+    border-radius: 4px;
+    transition: background 0.3s ease;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--primary-light);
+}
+
+/* Firefox Scrollbar */
+* {
+    scrollbar-width: thin;
+    scrollbar-color: var(--primary-color) var(--bg-color);
 }
 
 .btn-primary {
@@ -108,6 +188,9 @@ body {
     transition: transform 0.2s;
 }
 
-.document-card:hover {
-    transform: translateY(-5px);
+
+/* Remove hover effect from list group items */
+.list-group-item-action:hover {
+    background-color: transparent !important;
+    color: inherit !important;
 }