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
+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 + }