malpercio.dev
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
feat(web): add CSS for admin structure management page (ATB-47)
+152
apps/web/public/static/css/theme.css
+152
apps/web/public/static/css/theme.css
···
999
999
font-weight: var(--font-weight-bold);
1000
1000
margin-top: var(--space-xs);
1001
1001
}
1002
+
1003
+
/* ── Structure Management Page ──────────────────────────────────────────── */
1004
+
1005
+
.structure-page {
1006
+
display: flex;
1007
+
flex-direction: column;
1008
+
gap: var(--space-6, 1.5rem);
1009
+
}
1010
+
1011
+
.structure-category {
1012
+
background: var(--color-surface);
1013
+
border: var(--border-width) solid var(--color-border);
1014
+
border-radius: var(--radius, 0.5rem);
1015
+
overflow: hidden;
1016
+
}
1017
+
1018
+
.structure-category__header {
1019
+
display: flex;
1020
+
align-items: center;
1021
+
gap: var(--space-sm);
1022
+
padding: var(--space-sm) var(--space-md);
1023
+
background: var(--color-bg);
1024
+
border-bottom: var(--border-width) solid var(--color-border);
1025
+
}
1026
+
1027
+
.structure-category__name {
1028
+
font-weight: var(--font-weight-bold);
1029
+
font-size: var(--font-size-base);
1030
+
flex: 1;
1031
+
}
1032
+
1033
+
.structure-category__meta {
1034
+
font-size: var(--font-size-sm);
1035
+
color: var(--color-text-muted);
1036
+
}
1037
+
1038
+
.structure-category__actions {
1039
+
display: flex;
1040
+
gap: var(--space-sm);
1041
+
flex-shrink: 0;
1042
+
}
1043
+
1044
+
.structure-boards {
1045
+
padding: var(--space-sm);
1046
+
display: flex;
1047
+
flex-direction: column;
1048
+
gap: var(--space-sm);
1049
+
}
1050
+
1051
+
.structure-board {
1052
+
background: var(--color-bg);
1053
+
border: var(--border-width) solid var(--color-border);
1054
+
border-radius: var(--radius, 0.375rem);
1055
+
}
1056
+
1057
+
.structure-board__header {
1058
+
display: flex;
1059
+
align-items: center;
1060
+
gap: var(--space-sm);
1061
+
padding: var(--space-xs) var(--space-sm);
1062
+
}
1063
+
1064
+
.structure-board__name {
1065
+
font-weight: var(--font-weight-bold);
1066
+
flex: 1;
1067
+
}
1068
+
1069
+
.structure-board__meta {
1070
+
font-size: var(--font-size-sm);
1071
+
color: var(--color-text-muted);
1072
+
}
1073
+
1074
+
.structure-board__actions {
1075
+
display: flex;
1076
+
gap: var(--space-sm);
1077
+
flex-shrink: 0;
1078
+
}
1079
+
1080
+
.structure-edit-form {
1081
+
border-top: var(--border-width) solid var(--color-border);
1082
+
}
1083
+
1084
+
.structure-edit-form[open] {
1085
+
display: block;
1086
+
}
1087
+
1088
+
.structure-edit-form__body {
1089
+
padding: var(--space-md);
1090
+
display: flex;
1091
+
flex-direction: column;
1092
+
gap: var(--space-sm);
1093
+
}
1094
+
1095
+
.structure-add-board {
1096
+
border: var(--border-width) dashed var(--color-border);
1097
+
border-radius: var(--radius, 0.375rem);
1098
+
background: transparent;
1099
+
}
1100
+
1101
+
.structure-add-board__trigger {
1102
+
display: block;
1103
+
padding: var(--space-xs) var(--space-sm);
1104
+
cursor: pointer;
1105
+
color: var(--color-primary);
1106
+
font-size: var(--font-size-sm);
1107
+
user-select: none;
1108
+
}
1109
+
1110
+
.structure-add-board__trigger:hover {
1111
+
background: var(--color-surface);
1112
+
border-radius: var(--radius, 0.375rem);
1113
+
}
1114
+
1115
+
.structure-add-category {
1116
+
margin-top: var(--space-md);
1117
+
}
1118
+
1119
+
.structure-confirm-dialog {
1120
+
border-radius: var(--radius, 0.5rem);
1121
+
border: var(--border-width) solid var(--color-border);
1122
+
padding: var(--space-6, 1.5rem);
1123
+
max-width: 24rem;
1124
+
}
1125
+
1126
+
.structure-confirm-dialog::backdrop {
1127
+
background: rgba(0, 0, 0, 0.4);
1128
+
}
1129
+
1130
+
.structure-confirm-dialog p {
1131
+
margin-bottom: var(--space-md);
1132
+
}
1133
+
1134
+
.dialog-actions {
1135
+
display: flex;
1136
+
gap: var(--space-sm);
1137
+
justify-content: flex-end;
1138
+
}
1139
+
1140
+
.structure-error-banner {
1141
+
background: var(--color-surface);
1142
+
color: var(--color-danger);
1143
+
border: var(--border-width) solid var(--color-danger);
1144
+
border-left-width: calc(var(--border-width) * 3);
1145
+
border-radius: var(--radius, 0.5rem);
1146
+
padding: var(--space-sm) var(--space-md);
1147
+
margin-bottom: var(--space-md);
1148
+
}
1149
+
1150
+
.btn-sm {
1151
+
font-size: var(--font-size-sm);
1152
+
padding: var(--space-xs) var(--space-sm);
1153
+
}