Merge remote-tracking branch 'upstream/main' into merge-gramsrv-9106877

cmd/telesrv-admin/web/src/styles/01-foundation.css

@@ -185,6 +185,7 @@ body {
 
 button,
 input,
+select,
 textarea {
   font: inherit;
 }

cmd/telesrv-admin/web/src/styles/02-pages-and-forms.css

@@ -325,6 +325,7 @@
 }
 
 input,
+select,
 textarea {
   color: var(--text);
   background: var(--input-bg);
@@ -339,12 +340,33 @@ textarea::placeholder {
   color: var(--muted-2);
 }
 
-input {
+input,
+select {
   width: 190px;
   height: 34px;
   padding: 0 10px;
 }
 
+select {
+  min-width: 220px;
+  height: 34px;
+  padding: 0 30px 0 10px;
+  font: inherit;
+  font-weight: 600;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  cursor: pointer;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239aa4b2' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+}
+
+select:disabled {
+  color: var(--muted-2);
+  cursor: not-allowed;
+}
+
 textarea {
   width: 100%;
   padding: 9px 10px;
@@ -352,6 +374,7 @@ textarea {
 }
 
 input:focus,
+select:focus,
 textarea:focus {
   border-color: var(--brand);
   box-shadow: 0 0 0 3px var(--focus);
@@ -627,3 +650,43 @@ textarea:focus {
     align-items: stretch;
   }
 }
+
+/* Level progress bars (account rating leaderboard and detail). */
+.progress-cell {
+  display: grid;
+  gap: 4px;
+  min-width: 130px;
+}
+
+.progress-cell small,
+.progress-note {
+  color: var(--muted);
+  font-size: 11px;
+}
+
+.progress-bar {
+  overflow: hidden;
+  width: 100%;
+  height: 6px;
+  background: var(--panel-subtle);
+  border: 1px solid var(--line);
+  border-radius: 999px;
+}
+
+.progress-bar > span {
+  display: block;
+  height: 100%;
+  background: var(--brand-2);
+}
+
+.progress-bar.good > span {
+  background: var(--good);
+}
+
+.progress-bar.danger > span {
+  background: var(--danger);
+}
+
+.progress-wide .progress-cell {
+  min-width: 0;
+}

cmd/telesrv-admin/web/src/styles/03-entities-and-actions.css

@@ -103,7 +103,8 @@
   font-weight: 800;
 }
 
-.duration-field input {
+.duration-field input,
+.duration-field select {
   width: 100%;
 }
 
@@ -126,6 +127,16 @@
   border-top: 1px solid var(--line);
 }
 
+/* A .dock-title already draws the rule under itself, so a .danger-zone placed
+   directly after one must not draw a second: the verification and bot-verification
+   detail docks label the zone with a dock-title and rendered two lines 10px apart
+   above the revoke button. */
+.dock-title + .danger-zone {
+  margin-top: 0;
+  padding-top: 0;
+  border-top: 0;
+}
+
 .authorization-block {
   display: grid;
   gap: 10px;
@@ -693,7 +704,8 @@
   border-radius: var(--radius-sm);
 }
 
-.attr-block .duration-field input {
+.attr-block .duration-field input,
+.duration-field select {
   width: 100%;
 }
 
@@ -793,3 +805,113 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+/* Account rating component breakdown. */
+.breakdown-list {
+  display: grid;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+
+.breakdown-row {
+  display: grid;
+  grid-template-columns: minmax(140px, 260px) 1fr minmax(80px, auto);
+  gap: 12px;
+  align-items: center;
+  padding: 9px 10px;
+  background: var(--panel-subtle);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+}
+
+.breakdown-row.total {
+  grid-template-columns: 1fr minmax(80px, auto);
+  background: transparent;
+}
+
+.breakdown-label {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.breakdown-label strong {
+  color: var(--text);
+  font-weight: 800;
+}
+
+.breakdown-label small {
+  color: var(--muted);
+  font-size: 11px;
+  line-height: 1.35;
+}
+
+.breakdown-value {
+  color: var(--text);
+  font-weight: 800;
+  text-align: right;
+}
+
+.breakdown-value.good {
+  color: var(--good);
+}
+
+.breakdown-value.danger {
+  color: var(--danger-text);
+}
+
+@media (max-width: 760px) {
+  .breakdown-row,
+  .breakdown-row.total {
+    grid-template-columns: 1fr;
+  }
+
+  .breakdown-value {
+    text-align: left;
+  }
+}
+
+/* Collectible usernames branching off the peer's editable one. The guide is drawn
+   with borders rather than a "↳" character so it lines up at any font size and is
+   not read out by a screen reader as punctuation. */
+.username-branch {
+  margin: 2px 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.username-branch li {
+  position: relative;
+  padding-left: 14px;
+  color: var(--text-soft);
+  font-size: 12px;
+  line-height: 1.7;
+}
+
+.username-branch li::before {
+  position: absolute;
+  top: 0;
+  left: 3px;
+  width: 6px;
+  height: 11px;
+  border-left: 1px solid var(--line-strong, var(--line));
+  border-bottom: 1px solid var(--line-strong, var(--line));
+  content: "";
+}
+
+.username-branch li.inactive {
+  color: var(--muted);
+}
+
+.username-branch li.inactive span {
+  text-decoration: line-through;
+}
+
+.username-branch li em {
+  margin-left: 6px;
+  font-size: 10px;
+  font-style: normal;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}