WIP! A BB-style forum, on the ATmosphere!
We're still working... we'll be back soon when we have something to show off!
node
typescript
hono
htmx
atproto
fix(web): replace all hardcoded CSS values with design tokens in mod and structure UI (ATB-52)
+31
-31
+31
-31
apps/web/public/static/css/theme.css
+31
-31
apps/web/public/static/css/theme.css
···
752
752
753
753
.post-card__mod-actions {
754
754
display: flex;
755
-
gap: var(--space-2);
756
-
margin-top: var(--space-2);
757
-
padding-top: var(--space-2);
758
-
border-top: 1px solid var(--color-border);
755
+
gap: var(--space-sm);
756
+
margin-top: var(--space-sm);
757
+
padding-top: var(--space-sm);
758
+
border-top: var(--border-width) solid var(--color-border);
759
759
}
760
760
761
761
.mod-btn {
762
-
font-size: 0.75rem;
763
-
padding: 0.25rem 0.6rem;
764
-
border: 2px solid currentColor;
765
-
border-radius: 0;
762
+
font-size: var(--font-size-xs);
763
+
padding: var(--space-xs) var(--space-sm);
764
+
border: var(--border-width) solid currentColor;
765
+
border-radius: var(--radius);
766
766
cursor: pointer;
767
767
background: transparent;
768
768
font-family: inherit;
769
-
font-weight: 700;
769
+
font-weight: var(--font-weight-bold);
770
770
text-transform: uppercase;
771
771
letter-spacing: 0.05em;
772
772
}
773
773
774
774
.mod-btn--hide,
775
775
.mod-btn--lock {
776
-
color: var(--color-danger, #d00);
776
+
color: var(--color-danger);
777
777
}
778
778
779
779
.mod-btn--hide:hover,
780
780
.mod-btn--lock:hover {
781
-
background: var(--color-danger, #d00);
782
-
color: #fff;
781
+
background: var(--color-danger);
782
+
color: var(--color-surface);
783
783
}
784
784
785
785
.mod-btn--unhide,
786
786
.mod-btn--unlock,
787
787
.mod-btn--ban {
788
-
color: var(--color-text-muted, #666);
788
+
color: var(--color-text-muted);
789
789
}
790
790
791
791
.mod-btn--unhide:hover,
792
792
.mod-btn--unlock:hover,
793
793
.mod-btn--ban:hover {
794
-
background: var(--color-text-muted, #666);
795
-
color: #fff;
794
+
background: var(--color-text-muted);
795
+
color: var(--color-surface);
796
796
}
797
797
798
798
.topic-mod-controls {
799
-
margin-bottom: var(--space-4);
799
+
margin-bottom: var(--space-md);
800
800
}
801
801
802
802
.mod-dialog {
803
-
border: 3px solid var(--color-border);
804
-
border-radius: 0;
805
-
padding: var(--space-6);
803
+
border: var(--border-width) solid var(--color-border);
804
+
border-radius: var(--radius);
805
+
padding: var(--space-lg);
806
806
max-width: 480px;
807
807
width: 90vw;
808
-
box-shadow: 6px 6px 0 var(--color-shadow);
808
+
box-shadow: var(--card-shadow);
809
809
background: var(--color-bg);
810
810
}
811
811
···
815
815
816
816
.mod-dialog__title {
817
817
margin-top: 0;
818
-
margin-bottom: var(--space-4);
819
-
font-size: 1.25rem;
818
+
margin-bottom: var(--space-md);
819
+
font-size: var(--font-size-lg);
820
820
}
821
821
822
822
/* ═══════════════════════════════════════════════════════════════════════════
···
931
931
}
932
932
933
933
.admin-nav-card__icon {
934
-
font-size: var(--font-size-xl, 2rem);
934
+
font-size: var(--font-size-xl);
935
935
margin-bottom: var(--space-sm);
936
936
}
937
937
···
1005
1005
.structure-page {
1006
1006
display: flex;
1007
1007
flex-direction: column;
1008
-
gap: var(--space-6, 1.5rem);
1008
+
gap: var(--space-lg);
1009
1009
}
1010
1010
1011
1011
.structure-category {
1012
1012
background: var(--color-surface);
1013
1013
border: var(--border-width) solid var(--color-border);
1014
-
border-radius: var(--radius, 0.5rem);
1014
+
border-radius: var(--radius);
1015
1015
overflow: hidden;
1016
1016
}
1017
1017
···
1051
1051
.structure-board {
1052
1052
background: var(--color-bg);
1053
1053
border: var(--border-width) solid var(--color-border);
1054
-
border-radius: var(--radius, 0.375rem);
1054
+
border-radius: var(--radius);
1055
1055
}
1056
1056
1057
1057
.structure-board__header {
···
1094
1094
1095
1095
.structure-add-board {
1096
1096
border: var(--border-width) dashed var(--color-border);
1097
-
border-radius: var(--radius, 0.375rem);
1097
+
border-radius: var(--radius);
1098
1098
background: transparent;
1099
1099
}
1100
1100
···
1109
1109
1110
1110
.structure-add-board__trigger:hover {
1111
1111
background: var(--color-surface);
1112
-
border-radius: var(--radius, 0.375rem);
1112
+
border-radius: var(--radius);
1113
1113
}
1114
1114
1115
1115
.structure-add-category {
···
1117
1117
}
1118
1118
1119
1119
.structure-confirm-dialog {
1120
-
border-radius: var(--radius, 0.5rem);
1120
+
border-radius: var(--radius);
1121
1121
border: var(--border-width) solid var(--color-border);
1122
-
padding: var(--space-6, 1.5rem);
1122
+
padding: var(--space-lg);
1123
1123
max-width: 24rem;
1124
1124
}
1125
1125
···
1142
1142
color: var(--color-danger);
1143
1143
border: var(--border-width) solid var(--color-danger);
1144
1144
border-left-width: calc(var(--border-width) * 3);
1145
-
border-radius: var(--radius, 0.5rem);
1145
+
border-radius: var(--radius);
1146
1146
padding: var(--space-sm) var(--space-md);
1147
1147
margin-bottom: var(--space-md);
1148
1148
}