wip

app/static/css/style.css

@@ -134,12 +134,90 @@ button {
     margin-right: 10px;
 }
 
+/* Category tree in sidebar */
 .category-tree {
     margin-left: 15px;
     padding-left: 10px;
     border-left: 1px dashed var(--border-color);
 }
 
+/* Category item and nested items */
+.category-item {
+    position: relative;
+    transition: background-color 0.2s ease;
+}
+
+.category-item:hover > div {
+    background-color: rgba(80, 250, 123, 0.05);
+}
+
+.category-item .actions {
+    z-index: 5;
+    border-radius: 4px;
+}
+
+/* Document item styling */
+.document-item {
+    position: relative;
+    margin: 2px 0;
+}
+
+.document-item:hover {
+    background-color: rgba(80, 250, 123, 0.05);
+}
+
+/* Animation for collapsing/expanding */
+.category-item .mdi-chevron-down,
+.category-item .mdi-chevron-right {
+    transition: transform 0.2s ease;
+}
+
+/* Nested children container */
+.children-container {
+    overflow: hidden;
+    transition: max-height 0.3s ease;
+}
+
+/* Hover effects for category items */
+.category-item:hover > .category-row {
+    color: var(--primary-color);
+}
+
+/* Toggle button hover */
+.category-item button:hover {
+    color: var(--primary-color);
+}
+
+/* Document and category action buttons */
+.actions button {
+    opacity: 0.7;
+    transition: opacity 0.2s ease, color 0.2s ease;
+}
+
+.actions button:hover {
+    opacity: 1;
+    color: var(--primary-color);
+}
+
+/* Drag and drop styling */
+.category-item.drop-target {
+    background-color: rgba(80, 250, 123, 0.15);
+    outline: 1px dashed var(--primary-color);
+}
+
+.document-item.dragging {
+    opacity: 0.5;
+    background-color: rgba(80, 250, 123, 0.1);
+}
+
+/* Proper truncation for long category/document names */
+.truncate {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 180px;
+}
+
 /* Main content area */
 .content {
     flex: 1;
@@ -688,4 +766,69 @@ button {
     .category-grid {
         grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
     }
+}
+
+/* Category list view */
+.active-view {
+    background-color: var(--primary-color);
+    color: var(--bg-color);
+}
+
+.category-list-item {
+    transition: all 0.3s ease;
+}
+
+.category-list-item .toggle-btn .mdi {
+    transition: transform 0.3s ease;
+}
+
+.category-list-item .toggle-btn .rotate-90 {
+    transform: rotate(90deg);
+}
+
+.category-children {
+    transition: max-height 0.3s ease, opacity 0.3s ease;
+}
+
+/* Animation for sliding down content */
+@keyframes slideDown {
+    from {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.animate-slide-down {
+    animation: slideDown 0.3s ease-out forwards;
+}
+
+/* Hover effects for list items */
+.document-list-item:hover,
+.subcategory-list-item:hover {
+    background-color: rgba(80, 250, 123, 0.05);
+}
+
+/* Interactive hover effects */
+.category-list-item > div {
+    transition: all 0.2s ease;
+}
+
+.category-list-item > div:hover {
+    transform: translateX(2px);
+}
+
+/* Document and subcategory items */
+.document-list-item,
+.subcategory-list-item {
+    transition: all 0.2s ease;
+    border-radius: 4px;
+}
+
+.document-list-item:hover a,
+.subcategory-list-item:hover a {
+    color: var(--primary-color);
 }