feat: Merge ginger/oauth

src/web/pages/resources/components.css

@@ -11,12 +11,17 @@
     font-size: calc(var(--avatar-size) * 0.5);
     font-weight: 700;
     line-height: calc(var(--avatar-size) - 2px);
+    user-select: none;
 
-    color: oklch(from var(--c1) calc(l + 0.2) c h);
-    background-color: var(--c1);
+    color: oklch(from var(--avatar-color) calc(l + 0.2) c h);
+    background-color: var(--avatar-color);
 }
 
-.user-card {
+.red-avatar {
+    --avatar-color: var(--c1);
+}
+
+.card {
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -29,16 +34,26 @@
     .info {
         flex: 1 1;
 
-        p {
-            margin: 0;
+        .name {
+            font-weight: bold;
+        }
 
-            &.display-name {
-                font-weight: 700;
-            }
-
-            &:nth-of-type(2) {
-                color: var(--secondary);
-            }
+        .id {
+            color: var(--secondary);
+            font-weight: normal;
         }
     }
+
+    &.danger {
+        display: block;
+        background-color: oklch(from red 0.2 c h);
+        border: 1px dashed red;
+    }
+}
+
+.card-list {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    margin-top: 10px;
 }