feat: add discord status class

2026-05-30 18:20:22 -03:00
parent cc0cf9e055
commit ebe0842759
2 changed files with 255 additions and 0 deletions
@@ -0,0 +1,76 @@
+.discord-status-compact {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+}
+
+.avatar-container {
+    position: relative;
+    display: inline-block;
+    width: 34px;
+    height: 34px;
+    flex-shrink: 0;
+}
+
+.discord-avatar {
+    width: 100%;
+    height: 100%;
+    border-radius: 2px;
+    border: 1px solid var(--accent);
+    box-shadow: 2px 2px 0px var(--pink-accent);
+    object-fit: cover;
+}
+
+.status-dot {
+    position: absolute;
+    bottom: -2px;
+    right: -2px;
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    box-shadow: 0 0 0 2px #fffdfd;
+}
+.status-dot.online { background-color: #a7f3d0; border: 1px solid #34d399; }
+.status-dot.idle { background-color: #fef08a; border: 1px solid #facc15; }
+.status-dot.dnd { background-color: #fecdd3; border: 1px solid #fb7185; }
+.status-dot.offline { background-color: var(--text-dim); border: 1px solid var(--text-main); }
+
+.status-details {
+    display: flex;
+    flex-direction: column;
+    align-items: center; 
+    gap: 2px;
+}
+
+.status-text {
+    font-size: 0.75rem;
+    color: var(--text-dim);
+    text-transform: lowercase;
+}
+
+.status-text em {
+    font-style: italic;
+    font-weight: normal;
+    color: var(--text-title);
+}
+
+.status-bubble-inline {
+    font-size: 0.7rem;
+    color: var(--text-main);
+    border-bottom: 1px dashed var(--border);
+    max-width: 220px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.game-icon {
+    width: 24px;
+    height: 24px;
+    border-radius: 2px;
+    border: 1px solid var(--border);
+    box-shadow: 1px 1px 0px var(--pink-accent);
+    object-fit: cover;
+    flex-shrink: 0;
+}