styles: css cleanup and fix for mobile mem-dashboard; projects css polishing
Alessandro committed
Nov 2, 2025 at 00:26 UTC
d1969dd29f2a2aa682973c0d45e30b4e8091a438
4 files changed
+24
-117
webui/components/projects/project-basic-data-form.html
+2
@@ -81,10 +81,12 @@
81
font-size: 1em;
82
font-weight: bolder;
83
opacity: 1;
84
+ margin-bottom: var(--spacing-sm);
85
}
86
87
.projects-form-description {
88
font-size: 0.8em;
89
+ margin-bottom: var(--spacing-xs);
90
}
91
92
.projects-form-input,
webui/components/projects/project-edit.html
+2
-2
@@ -13,7 +13,7 @@
13
<div>
14
15
16
- <div class="buttons-container" style="margin-top: 1em; margin-bottom: 2em;">
16
+ <div class="buttons-container" style="margin: var(--spacing-md) var(--spacing-sm) var(--spacing-lg) var(--spacing-sm);">
17
<div class="buttons-left">
18
<button type="button" class="button cancel" @click="$store.projects.deleteProjectAndCloseModal()">Delete</button>
19
</div>
@@ -39,7 +39,7 @@
39
</x-component>
40
</div>
41
42
- <div class="buttons-container" style="margin-top: 2em;">
42
+ <div class="buttons-container" style="margin: var(--spacing-md) var(--spacing-sm) var(--spacing-lg) var(--spacing-sm);">
43
<div class="buttons-left">
44
<button type="button" class="button cancel" @click="$store.projects.deleteProjectAndCloseModal()">Delete</button>
45
</div>
webui/components/projects/project-list.html
+14
-15
@@ -100,6 +100,9 @@
100
display: flex;
101
align-items: center;
102
}
103
+ .projects-project-card-name {
104
+ margin-top: var(--spacing-xs);
105
+ }
106
107
.project-color-ball {
108
width: 0.6em;
@@ -133,8 +136,7 @@
136
137
.projects-create-btn-top {
138
float: right;
136
- margin-bottom: 1em;
137
- margin-top: 0.2em;
139
+ margin: var(--spacing-xs) var(--spacing-md);
140
}
141
142
.projects-list-header {
@@ -144,20 +146,17 @@
146
align-items: center;
147
margin-bottom: 0.5em;
148
}
147
-</style>
149
149
-<style>
150
- .active-project-display {
151
- display: flex;
152
- align-items: center;
153
- gap: 0.5em;
154
- border: 1px solid var(--color-highlight);
155
- padding: 0.5em;
156
- border-radius: 0.5em;
157
- margin-right: auto;
158
- }
159
-</style>
160
-<style>
150
+ .active-project-display {
151
+ display: flex;
152
+ align-items: center;
153
+ gap: 0.5em;
154
+ border: 1px solid var(--color-highlight);
155
+ padding: 0.5em;
156
+ border-radius: 0.5em;
157
+ margin-right: auto;
158
+ }
159
+
160
@media (max-width: 600px) {
161
.projects-list-header {
162
flex-wrap: wrap;
webui/components/settings/memory/memory-dashboard.html
+6
-100
@@ -359,16 +359,13 @@
359
display: flex;
360
flex-direction: column;
361
}
362
-
362
.modal-inner.modal-with-footer .modal-scroll {
363
flex: 1;
364
min-height: 0;
365
}
367
-
366
.modal-inner.modal-with-footer .modal-footer {
367
flex-shrink: 0;
368
}
371
-
369
.memory-filters-header {
370
display: grid;
371
grid-template-columns: 35% 25% 10% auto;
@@ -387,33 +384,27 @@
384
grid-column: 1;
385
grid-row: 1;
386
}
390
-
387
.filter-area {
388
grid-column: 2;
389
grid-row: 1;
390
}
395
-
391
.filter-limit {
392
grid-column: 3;
393
grid-row: 1;
394
}
400
-
395
.filter-threshold {
396
grid-column: 4;
397
grid-row: 2;
398
}
405
-
399
#search-input {
400
grid-column: 1 / 3;
401
grid-row: 2;
402
}
410
-
403
.btn-search {
404
grid-column: 3;
405
grid-row: 2;
406
justify-content: center;
407
}
416
-
408
.btn-clear {
409
grid-column: 4;
410
grid-row: 1;
@@ -426,7 +417,6 @@
417
align-items: center;
418
gap: 0.5rem;
419
}
429
-
420
.filter-group-inline label {
421
font-size: 0.85rem;
422
font-weight: 600;
@@ -434,43 +424,35 @@
424
opacity: 0.8;
425
white-space: nowrap;
426
}
437
-
427
.filter-group-inline select,
428
.filter-group-inline input {
429
border: 1px solid var(--color-border);
430
flex: 0 auto;
431
min-width: 0;
432
}
444
-
433
.filter-group-inline select:focus,
434
.filter-group-inline input:focus {
435
outline: none;
436
border-color: var(--color-primary);
437
background: var(--color-input-focus);
438
}
451
-
439
.filter-group-inline.filter-limit {
440
flex: 0 0 auto;
441
}
455
-
442
.filter-limit input {
443
flex: 0 0 150%;
444
}
459
-
460
-
445
#search-input {
446
flex: 1;
447
border: 1px solid var(--color-border);
448
font-size: 0.9rem;
449
height: 38px;
450
}
467
-
451
#search-input:focus {
452
outline: none;
453
border-color: var(--color-primary);
454
background: var(--color-input-focus);
455
}
473
-
456
.filter-threshold label {
457
font-size: 0.85rem;
458
opacity: 0.8;
@@ -484,38 +466,31 @@
466
background: var(--color-panel);
467
border-bottom: 1px solid var(--color-border);
468
border-radius: 8px;
487
- /* margin-bottom: 1rem; */
469
font-size: 0.9rem;
470
}
490
-
471
.status-info {
472
display: flex;
473
align-items: center;
474
gap: 0.5rem;
475
flex-wrap: wrap;
476
}
497
-
477
.status-item {
478
display: flex;
479
align-items: center;
480
gap: 0.25rem;
481
}
503
-
482
.status-item strong {
483
color: var(--color-primary);
484
font-weight: 600;
485
}
508
-
486
.status-item .material-symbols-outlined {
487
font-size: 18px;
488
opacity: 0.6;
489
}
513
-
490
.status-separator {
491
color: var(--color-border);
492
margin: 0 0.25rem;
493
}
518
-
494
.status-pagination {
495
display: flex;
496
align-items: center;
@@ -531,18 +506,15 @@
506
align-items: center;
507
font-size: 0;
508
}
534
-
509
.btn-icon:hover:not(:disabled) {
510
background: var(--color-panel);
511
border-color: var(--color-primary);
512
color: var(--color-text);
513
}
540
-
514
.btn-icon:disabled {
515
opacity: 0.4;
516
cursor: not-allowed;
517
}
545
-
518
.btn-icon .material-symbols-outlined {
519
font-size: 20px;
520
}
@@ -552,23 +524,19 @@
524
align-items: center;
525
gap: 0.5rem;
526
}
555
-
527
.page-input-group label {
528
opacity: 0.8;
529
}
559
-
530
.page-total {
531
color: var(--color-text);
532
opacity: 0.8;
533
font-size: 0.85rem;
534
white-space: nowrap;
535
}
566
-
536
.page-total strong {
537
color: var(--color-primary);
538
font-weight: 600;
539
}
571
-
540
.page-input {
541
width: 60px;
542
padding: 0.25rem 0.5rem;
@@ -580,7 +548,6 @@
548
font-size: 0.85rem;
549
height: 28px;
550
}
583
-
551
.page-input:focus {
552
outline: none;
553
border-color: var(--color-primary);
@@ -593,7 +560,6 @@
560
-webkit-appearance: none;
561
margin: 0;
562
}
596
-
563
.page-input[type=number] {
564
-moz-appearance: textfield;
565
appearance: textfield;
@@ -612,17 +578,14 @@
578
border-radius: 8px;
579
margin: 1rem 0;
580
}
615
-
581
.loading-state {
582
display: grid;
583
align-items: center;
584
}
620
-
585
.init-message {
586
color: var(--color-primary);
587
border-color: var(--color-primary);
588
}
625
-
589
.error-state {
590
color: var(--color-accent);
591
border-color: var(--color-accent);
@@ -657,23 +620,18 @@
620
border: 1px solid var(--color-border);
621
border-radius: 8px;
622
}
660
-
623
.memory-table {
624
width: 100%;
625
border-collapse: collapse;
626
table-layout: fixed;
627
}
666
-
628
+
629
.col-select {
630
width: 5%;
631
}
670
-
632
.col-metadata {
633
width: 10em;
634
}
674
-
675
- .col-preview {}
676
-
635
.col-actions {
636
width: 4em;
637
}
@@ -686,25 +644,22 @@
644
border-bottom: 1px solid var(--color-border);
645
overflow: hidden;
646
}
689
-
647
+
648
.metadata-cell {
649
overflow: visible;
650
white-space: normal;
651
word-wrap: break-word;
652
}
695
-
653
.metadata-info {
654
display: flex;
655
flex-direction: column;
656
gap: 0.5rem;
657
}
701
-
658
.metadata-row {
659
display: flex;
660
align-items: center;
661
gap: 0.5rem;
662
}
707
-
663
.metadata-timestamp {
664
font-size: 0.85rem;
665
color: var(--color-text);
@@ -719,37 +674,29 @@
674
font-weight: bold;
675
text-transform: uppercase;
676
}
722
-
677
.select-cell,
678
.col-select {
679
text-align: center;
680
padding: 0.65rem 0.5rem !important;
681
}
728
-
682
.select-cell input[type="checkbox"],
683
.col-select input[type="checkbox"] {
684
cursor: pointer;
685
transform: scale(1.2);
686
}
734
-
687
.memory-row.selected {
688
background: var(--color-panel);
689
border-left: 3px solid var(--color-primary);
690
}
739
-
691
.mass-action-toolbar {
692
display: flex;
693
justify-content: space-between;
694
align-items: center;
695
padding: 1rem;
696
background: var(--color-panel);
746
- /* border: 1px solid var(--color-primary); */
747
- /* border-radius: 8px; */
748
- /* margin: 1rem 0; */
697
margin: 0;
698
animation: slideDown 0.3s ease;
699
}
752
-
700
.btn-mass {
701
align-items: center;
702
border: 1px solid var(--color-border);
@@ -758,35 +705,28 @@
705
background: var(--color-background);
706
color: var(--color-text);
707
}
761
-
708
.btn-mass:hover {
709
border-color: var(--color-primary);
710
color: var(--color-primary);
711
}
766
-
712
.btn-mass.delete:hover {
713
border-color: var(--color-accent);
714
color: var(--color-accent);
715
}
771
-
716
.selection-info {
717
font-weight: 600;
718
}
775
-
719
.mass-actions {
720
display: flex;
721
gap: 0.5rem;
722
}
780
-
723
.btn-mass .material-symbols-outlined {
724
font-size: 18px;
725
}
784
-
726
.btn-mass:hover {
727
border-color: var(--color-primary);
728
background: var(--color-panel);
729
}
789
-
730
.btn-mass.delete:hover {
731
border-color: var(--color-accent);
732
color: var(--color-accent);
@@ -813,15 +753,12 @@
753
z-index: 10;
754
border-bottom: 2px solid var(--color-border);
755
}
816
-
756
.memory-table tbody tr {
757
border-bottom: 1px solid var(--color-border);
758
}
820
-
759
.memory-table tbody tr:last-child {
760
border-bottom: none;
761
}
824
-
762
.memory-table tbody tr.memory-row>td {
763
height: 5em;
764
}
@@ -836,7 +773,6 @@
773
white-space: nowrap;
774
flex-shrink: 0;
775
}
839
-
776
.content-preview,
777
.metadata-info {
778
height: 5.5em;
@@ -844,14 +780,12 @@
780
word-wrap: break-word;
781
overflow-wrap: break-word;
782
}
847
-
783
.tags {
784
display: flex;
785
gap: 0.25rem;
786
margin-top: 0.5rem;
787
flex-wrap: wrap;
788
}
854
-
789
.tag {
790
background: var(--color-panel);
791
border: 1px solid var(--color-border);
@@ -861,12 +795,10 @@
795
color: var(--color-text);
796
opacity: 0.8;
797
}
864
-
798
.actions-cell {
799
padding: 0 !important;
800
position: relative;
801
}
869
-
802
.actions-wrapper {
803
position: absolute;
804
top: 0;
@@ -889,11 +821,9 @@
821
opacity: 0.7;
822
display: inline-flex;
823
}
892
-
824
.btn-action .material-symbols-outlined {
825
font-size: 18px;
826
}
896
-
827
.btn-action:hover {
828
opacity: 1;
829
background: var(--color-panel);
@@ -901,19 +831,16 @@
831
color: var(--color-primary);
832
transform: translateY(-1px);
833
}
904
-
834
.btn-action.view:hover {
835
background: var(--color-panel);
836
border-color: var(--color-primary);
837
color: var(--color-primary);
838
}
910
-
839
.btn-action.copy:hover {
840
background: var(--color-panel);
841
border-color: var(--color-primary);
842
color: var(--color-primary);
843
}
916
-
844
.btn-action.delete:hover {
845
background: var(--color-panel);
846
border-color: var(--color-accent);
@@ -925,16 +852,18 @@
852
.memory-dashboard {
853
padding: 0.5rem;
854
}
928
-
855
.memory-filters-header {
856
padding: 0.75rem;
857
}
932
-
858
.memory-filters-header {
859
display: flex;
860
flex-wrap: wrap;
861
gap: 0.75rem;
862
}
863
+ .content-preview,
864
+ .metadata-info {
865
+ height: 6em;
866
+ }
867
868
/* Reset grid positioning */
869
.filter-memory-dir,
@@ -947,29 +876,24 @@
876
grid-column: auto;
877
grid-row: auto;
878
}
950
-
879
.filter-group-inline {
880
width: 100%;
881
flex-direction: row;
882
align-items: center;
883
gap: 0.5rem;
884
}
957
-
885
.filter-group-inline label {
886
font-size: 0.9rem;
887
margin-bottom: 0.25rem;
888
}
962
-
889
.filter-group-inline select,
890
.filter-group-inline input {
891
height: 42px;
892
font-size: 1rem;
893
}
968
-
894
.filter-group-inline.filter-limit {
895
flex: 33%;
896
}
972
-
897
.filter-limit input {
898
flex: 1;
899
}
@@ -979,17 +903,14 @@
903
order: 1;
904
flex: 1 1 100%;
905
}
982
-
906
.filter-area {
907
order: 2;
908
flex: 1 1 100%;
909
}
987
-
910
.filter-limit {
911
order: 3;
912
flex: 1 1 100%;
913
}
992
-
914
.btn-clear {
915
order: 6;
916
flex: 40%;
@@ -998,7 +919,6 @@
919
height: 42px;
920
justify-content: center;
921
}
1001
-
922
#search-input {
923
order: 5;
924
flex: auto;
@@ -1014,7 +934,6 @@
934
padding: 0 1rem;
935
min-width: 80px;
936
}
1017
-
937
.filter-threshold {
938
order: 4;
939
flex: 40%;
@@ -1023,34 +942,28 @@
942
gap: 0.5rem;
943
padding: 0;
944
}
1026
-
945
.filter-threshold label {
946
font-size: 0.9rem;
947
width: 100%;
948
display: flex;
949
justify-content: space-between;
950
}
1033
-
951
.filter-threshold input[type="range"] {
952
width: 100%;
953
}
1037
-
954
.memory-status-bar {
955
flex-direction: column;
956
gap: 0.75rem;
957
}
1042
-
958
.status-info {
959
width: 100%;
960
justify-content: center;
961
flex-wrap: wrap;
962
gap: 0.5rem 1rem;
963
}
1049
-
964
.status-info .material-symbols-outlined {
965
font-size: 18px;
966
}
1053
-
967
.status-pagination {
968
width: 100%;
969
justify-content: center;
@@ -1063,32 +976,25 @@
976
padding: 0.5rem 0.25rem;
977
font-size: 0.85rem;
978
}
1066
-
979
.actions-cell {
980
min-width: 60px;
981
width: 60px;
982
}
1071
-
983
.col-select {
984
width: 8%;
985
}
1075
-
986
.col-metadata {
987
width: 27%;
988
}
1079
-
989
.col-preview {
990
width: 55%;
991
}
1083
-
992
.col-actions {
993
width: 10%;
994
}
995
}
996
</style>
1089
-
997
</template>
998
</div>
999
</body>
1093
-
1000
</html>
\ No newline at end of file