@mooncompany/uplink-chat 0.5.0

package/public/css/panels-unified.css

@@ -0,0 +1,483 @@
+/**
+ * Unified Panel System
+ * Shared styles for all panels (Settings, Activity, Satellites)
+ * Mobile: Full-page slide-in | Desktop: Floating panels
+ */
+
+/* ==========================================================================
+   Panel Container
+   ========================================================================== */
+
+/* Base panel styles - internal layout only, positioning handled by split-view or mobile.css */
+.panel {
+  display: none;
+  flex-direction: column;
+  background: var(--bg);
+  overflow: hidden;
+}
+
+.panel.visible {
+  display: flex;
+}
+
+/* Desktop: panels render inside .side-panel-content via split-view.js
+   No positioning rules here - just fill the container */
+@media (min-width: 1024px) {
+  .panel {
+    /* Inside side-panel, just fill the space */
+    width: 100%;
+    height: 100%;
+    max-height: 100%;
+    border: none;
+    border-radius: 0;
+    box-shadow: none;
+    background: var(--bg);
+  }
+  
+  .panel.visible {
+    display: flex;
+    animation: panel-fade-in 0.2s ease-out;
+  }
+}
+
+@keyframes panel-fade-in {
+  from {
+    opacity: 0;
+    transform: scale(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* Mobile: Full-page slide-in (< 1024px breakpoint to match split-view) */
+@media (max-width: 1023px) {
+  .panel {
+    position: fixed !important;
+    inset: 0 !important;
+    width: 100% !important;
+    height: 100% !important;
+    max-width: 100% !important;
+    max-height: 100% !important;
+    border-radius: 0 !important;
+    transform: translateX(100%);
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    background: var(--bg) !important;
+    z-index: var(--z-sticky) !important;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    overscroll-behavior: contain;
+  }
+
+  .panel.visible {
+    display: flex !important;
+    flex-direction: column;
+    transform: translateX(0);
+  }
+}
+
+/* ==========================================================================
+   Panel Header
+   ========================================================================== */
+
+.panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-4) var(--space-5);
+  border-bottom: 1px solid var(--border);
+  background: var(--bg);
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  flex-shrink: 0;
+}
+
+.panel-title {
+  font-size: var(--text-base);
+  font-weight: 600;
+  color: var(--text);
+}
+
+.panel-close {
+  min-width: 44px;
+  min-height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  font-size: var(--text-xl);
+  cursor: pointer;
+  border-radius: var(--radius-md);
+  transition: color 0.2s, background 0.2s;
+}
+
+.panel-close:hover {
+  color: var(--text);
+  background: var(--white-10);
+}
+
+.panel-close:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+/* ==========================================================================
+   Panel Content
+   ========================================================================== */
+
+.panel-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--space-4) var(--space-5);
+  -webkit-overflow-scrolling: touch;
+}
+
+/* Scrollbar styling for panel content */
+.panel-content::-webkit-scrollbar {
+  width: 6px;
+}
+
+.panel-content::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.panel-content::-webkit-scrollbar-thumb {
+  background: var(--border);
+  border-radius: 3px;
+}
+
+.panel-content::-webkit-scrollbar-thumb:hover {
+  background: var(--text-muted);
+}
+
+/* ==========================================================================
+   Panel Row (Settings-style rows)
+   ========================================================================== */
+
+.panel-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+  padding: var(--space-4) 0;
+  border-bottom: 1px solid var(--border);
+}
+
+.panel-row:last-child {
+  border-bottom: none;
+}
+
+.panel-row-info {
+  flex: 1;
+  min-width: 0; /* Allow text truncation */
+}
+
+.panel-row-label {
+  font-size: var(--text-base);
+  font-weight: 500;
+  color: var(--text);
+}
+
+.panel-row-desc {
+  font-size: var(--text-sm);
+  color: var(--text-muted);
+  margin-top: var(--space-1);
+}
+
+@media (max-width: 768px) {
+  .panel-row {
+    padding: var(--space-4) var(--space-5);
+    min-height: 60px;
+    margin: 0 calc(-1 * var(--space-5)); /* Extend to edges */
+  }
+}
+
+/* ==========================================================================
+   Panel Tabs
+   ========================================================================== */
+
+.panel-tabs {
+  display: flex;
+  border-bottom: 1px solid var(--border);
+  padding: 0 var(--space-4);
+  flex-shrink: 0;
+}
+
+.panel-tab {
+  flex: 1;
+  padding: var(--space-3) var(--space-4);
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  color: var(--text-muted);
+  font-size: var(--text-sm);
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+  min-height: 44px; /* Touch-friendly */
+}
+
+.panel-tab:hover {
+  color: var(--text);
+  background: var(--white-05);
+}
+
+.panel-tab.active {
+  color: var(--accent);
+  border-bottom-color: var(--accent);
+}
+
+.panel-tab:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+}
+
+/* ==========================================================================
+   Panel List Items (Satellites-style)
+   ========================================================================== */
+
+.panel-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-3) var(--space-4);
+  margin: var(--space-1) 0;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: background 0.2s;
+  border: 1px solid transparent;
+  min-height: 44px; /* Touch-friendly */
+}
+
+.panel-item:hover {
+  background: var(--white-05);
+}
+
+.panel-item.active {
+  background: rgba(99, 102, 241, 0.15);
+  border-color: var(--accent);
+}
+
+.panel-item:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+.panel-item-icon {
+  font-size: var(--text-lg);
+  flex-shrink: 0;
+}
+
+.panel-item-name {
+  flex: 1;
+  font-size: var(--text-sm);
+  font-weight: 500;
+  color: var(--text);
+  min-width: 0; /* Allow text truncation */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.panel-item-badge {
+  font-size: var(--text-xs);
+  color: var(--text-muted);
+  background: var(--bg-input);
+  padding: 2px var(--space-2);
+  border-radius: var(--radius-full);
+  flex-shrink: 0;
+}
+
+.panel-item-status {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--success);
+  flex-shrink: 0;
+}
+
+.panel-item-status.offline {
+  background: var(--text-muted);
+}
+
+.panel-item-status.error {
+  background: var(--error);
+}
+
+/* ==========================================================================
+   Panel Actions (bottom area)
+   ========================================================================== */
+
+.panel-actions {
+  padding: var(--space-4) var(--space-5);
+  border-top: 1px solid var(--border);
+  background: var(--bg);
+  flex-shrink: 0;
+}
+
+.panel-btn {
+  width: 100%;
+  padding: var(--space-3) var(--space-4);
+  background: var(--accent);
+  color: var(--text-inverse);
+  border: none;
+  border-radius: var(--radius-md);
+  font-size: var(--text-sm);
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.2s, transform 0.1s;
+  min-height: 44px; /* Touch-friendly */
+}
+
+.panel-btn:hover {
+  background: var(--accent-hover);
+  transform: translateY(-1px);
+}
+
+.panel-btn:active {
+  transform: translateY(0);
+}
+
+.panel-btn:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+.panel-btn.secondary {
+  background: transparent;
+  color: var(--text);
+  border: 1px solid var(--border);
+}
+
+.panel-btn.secondary:hover {
+  background: var(--white-05);
+  border-color: var(--text-muted);
+}
+
+.panel-btn + .panel-btn {
+  margin-top: var(--space-2);
+}
+
+/* Inline action buttons */
+.panel-actions-inline {
+  display: flex;
+  gap: var(--space-2);
+}
+
+.panel-actions-inline .panel-btn {
+  flex: 1;
+}
+
+/* ==========================================================================
+   Panel Empty State
+   ========================================================================== */
+
+.panel-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-8) var(--space-4);
+  text-align: center;
+  color: var(--text-muted);
+}
+
+.panel-empty-icon {
+  font-size: 2rem;
+  margin-bottom: var(--space-3);
+  opacity: 0.5;
+}
+
+.panel-empty-text {
+  font-size: var(--text-sm);
+}
+
+/* ==========================================================================
+   Panel Loading State
+   ========================================================================== */
+
+.panel-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-8);
+}
+
+.panel-loading::after {
+  content: '';
+  width: 24px;
+  height: 24px;
+  border: 2px solid var(--border);
+  border-top-color: var(--accent);
+  border-radius: 50%;
+  animation: panel-spin 0.8s linear infinite;
+}
+
+@keyframes panel-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* ==========================================================================
+   Panel Section Headers
+   ========================================================================== */
+
+.panel-section {
+  margin-top: var(--space-6);
+}
+
+.panel-section:first-child {
+  margin-top: 0;
+}
+
+.panel-section-title {
+  font-size: var(--text-xs);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-muted);
+  margin-bottom: var(--space-3);
+  padding: 0 var(--space-1);
+}
+
+/* ==========================================================================
+   Panel Divider
+   ========================================================================== */
+
+.panel-divider {
+  height: 1px;
+  background: var(--border);
+  margin: var(--space-4) 0;
+}
+
+/* ==========================================================================
+   Responsive Adjustments
+   ========================================================================== */
+
+/* Tablet adjustments (still mobile behavior until 1024px) */
+@media (min-width: 481px) and (max-width: 1023px) {
+  .panel-content {
+    padding: var(--space-5) var(--space-6);
+  }
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .panel {
+    transition: none;
+  }
+
+  .panel-btn {
+    transition: none;
+  }
+
+  .panel-loading::after {
+    animation: none;
+  }
+}
+