Add ranks and ACP user enhancements

resources/js/index.css

@@ -231,6 +231,10 @@ a {
   overflow: hidden;
 }
 
+.bb-post-avatar i {
+  font-size: 4.4rem;
+}
+
 .bb-post-avatar img {
   width: 100%;
   height: 100%;
@@ -263,6 +267,17 @@ a {
   border: 1px solid rgba(0, 0, 0, 0.25);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
   width: fit-content;
+  overflow: hidden;
+}
+
+.bb-post-author-badge img {
+  width: auto;
+  height: 22px;
+  display: block;
+}
+
+.bb-post-author-badge span {
+  white-space: nowrap;
 }
 
 .bb-post-author-meta {
@@ -317,6 +332,12 @@ a {
   display: flex;
   align-items: center;
   gap: 0.6rem;
+  flex-wrap: wrap;
+}
+
+.bb-post-topic {
+  font-weight: 600;
+  color: var(--bb-accent, #f29b3f);
 }
 
 .bb-post-actions {
@@ -847,6 +868,13 @@ a {
   font-weight: 700;
 }
 
+.bb-portal-logo-link {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.4rem;
+}
+
 .bb-portal-logo-image {
   width: auto;
   height: auto;
@@ -1665,6 +1693,101 @@ a {
   justify-content: flex-end;
 }
 
+.bb-rank-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+}
+
+.bb-rank-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.6rem 0.8rem;
+  border-radius: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(18, 23, 33, 0.8);
+}
+
+.bb-rank-main {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+}
+
+.bb-rank-main img {
+  height: 22px;
+  width: auto;
+}
+
+.bb-rank-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.15rem 0.5rem;
+  border-radius: 6px;
+  background: linear-gradient(135deg, #f4f4f4, #c9c9c9);
+  color: #7b1f2a;
+  font-weight: 700;
+  font-size: 0.7rem;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  border: 1px solid rgba(0, 0, 0, 0.25);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
+}
+
+.bb-rank-badge-preview {
+  padding: 0.4rem;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  margin-bottom: 0.5rem;
+}
+
+.bb-rank-badge-preview img {
+  height: 28px;
+  width: auto;
+  display: block;
+}
+
+.bb-rank-actions {
+  display: inline-flex;
+  gap: 0.5rem;
+}
+
+.bb-user-search {
+  max-width: 320px;
+}
+
+.bb-sort-label {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.6rem;
+  width: 100%;
+}
+
+.bb-sort-label i {
+  font-size: 0.9rem;
+  color: var(--bb-ink-muted);
+}
+
+.rdt_TableCol_Sortable svg {
+  display: none;
+}
+
+.rdt_TableCol_Sortable .__rdt_custom_sort_icon__ {
+  display: none !important;
+}
+
+.bb-sort-hidden {
+  display: none;
+}
+
+.rdt_TableCol_Sortable .__rdt_custom_sort_icon__ i {
+  font-size: 0.9rem;
+}
+
 .bb-drag-handle {
   font-size: 1.2rem;
   line-height: 1;