Spaces:
Running
Running
| /* ============================================================ | |
| GLASSGRID — COMPONENT VISUAL STYLES | |
| Visual rules for each named component. | |
| Structure lives in layout.css. | |
| Colors/effects ONLY via token variables. | |
| ============================================================ */ | |
| /* ═══ NAVBAR ═══ */ | |
| .navbar { | |
| /* layout in layout.css */ | |
| } | |
| .navbar__logo { | |
| font: var(--text-subheading); | |
| background: var(--color-accent-gradient); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| letter-spacing: var(--letter-spacing-tight); | |
| } | |
| .navbar__icon-btn { | |
| width: 36px; | |
| height: 36px; | |
| border-radius: var(--radius-full); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: background var(--duration-fast) var(--ease-out); | |
| color: var(--color-text-secondary); | |
| } | |
| .navbar__icon-btn:hover, | |
| .navbar__icon-btn:active { | |
| background: var(--color-interactive-hover); | |
| color: var(--color-text-primary); | |
| } | |
| /* ═══ BOTTOM NAVIGATION ═══ */ | |
| .bottombar-item { | |
| cursor: pointer; | |
| transition: transform var(--duration-fast) var(--ease-spring); | |
| color: var(--color-text-muted); | |
| border-radius: var(--radius-lg); | |
| } | |
| .bottombar-item:active { | |
| transform: scale(0.92); | |
| } | |
| .bottombar-item.active { | |
| color: var(--color-accent-primary); | |
| } | |
| .bottombar-item__label { | |
| font: var(--text-micro); | |
| letter-spacing: var(--letter-spacing-wide); | |
| } | |
| .bottombar-item__dot { | |
| width: 4px; | |
| height: 4px; | |
| border-radius: var(--radius-full); | |
| background: var(--color-accent-primary); | |
| margin: 0 auto; | |
| } | |
| /* ═══ POST CARD ═══ */ | |
| .post-card { | |
| background: var(--color-glass-fill); | |
| border: 1px solid var(--color-glass-border); | |
| box-shadow: var(--shadow-md); | |
| transition: box-shadow var(--duration-normal) var(--ease-out); | |
| } | |
| .post-card:focus-within { | |
| box-shadow: var(--shadow-lg); | |
| } | |
| .post-card__username { | |
| font-weight: var(--font-weight-semibold); | |
| font-size: var(--font-size-sm); | |
| color: var(--color-text-primary); | |
| letter-spacing: var(--letter-spacing-tight); | |
| } | |
| .post-card__handle { | |
| font-size: var(--font-size-xs); | |
| color: var(--color-text-muted); | |
| } | |
| .post-card__timestamp { | |
| font-size: var(--font-size-xs); | |
| color: var(--color-text-muted); | |
| margin-left: auto; | |
| } | |
| .post-card__more-btn { | |
| color: var(--color-text-muted); | |
| transition: color var(--duration-fast); | |
| border-radius: var(--radius-full); | |
| width: 32px; | |
| height: 32px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .post-card__more-btn:hover { color: var(--color-text-primary); } | |
| .post-card__media img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| transition: transform var(--duration-slow) var(--ease-out); | |
| } | |
| /* ── Action Icons ── */ | |
| .post-card__like-btn { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-2); | |
| color: var(--color-like-default); | |
| transition: color var(--duration-fast) var(--ease-out), | |
| transform var(--duration-fast) var(--ease-spring); | |
| font-size: var(--font-size-sm); | |
| font-weight: var(--font-weight-medium); | |
| } | |
| .post-card__like-btn.liked { | |
| color: var(--color-like-active); | |
| } | |
| .post-card__like-btn:active { | |
| transform: scale(0.88); | |
| } | |
| .post-card__comment-btn { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-2); | |
| color: var(--color-comment); | |
| font-size: var(--font-size-sm); | |
| font-weight: var(--font-weight-medium); | |
| transition: transform var(--duration-fast) var(--ease-spring); | |
| } | |
| .post-card__comment-btn:active { | |
| transform: scale(0.88); | |
| } | |
| .post-card__save-btn { | |
| margin-left: auto; | |
| color: var(--color-save-default); | |
| transition: color var(--duration-fast) var(--ease-out); | |
| } | |
| .post-card__save-btn.saved { | |
| color: var(--color-save-active); | |
| } | |
| .post-card__caption-text { | |
| font-size: var(--font-size-sm); | |
| color: var(--color-text-secondary); | |
| line-height: var(--line-height-normal); | |
| } | |
| .post-card__caption-username { | |
| font-weight: var(--font-weight-semibold); | |
| color: var(--color-text-primary); | |
| margin-right: var(--space-2); | |
| } | |
| .post-card__view-comments { | |
| font-size: var(--font-size-xs); | |
| color: var(--color-text-muted); | |
| cursor: pointer; | |
| transition: color var(--duration-fast); | |
| } | |
| .post-card__view-comments:hover { | |
| color: var(--color-text-accent); | |
| } | |
| /* ═══ STORY REEL ═══ */ | |
| .story-item__ring { | |
| background: var(--story-ring-gradient); | |
| } | |
| .story-item__ring--seen { | |
| background: var(--color-glass-border-md); | |
| } | |
| .story-item__avatar { | |
| border: 2px solid var(--color-bg-base); | |
| border-radius: var(--radius-full); | |
| } | |
| .story-item__label { | |
| font: var(--text-micro); | |
| color: var(--color-text-secondary); | |
| max-width: 60px; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| text-align: center; | |
| } | |
| .story-item--add .story-item__ring { | |
| background: var(--color-glass-fill-md); | |
| border: 1px dashed var(--color-glass-border-md); | |
| } | |
| /* ═══ PROFILE HEADER ═══ */ | |
| .profile-header__stat-value { | |
| font: var(--text-subheading); | |
| color: var(--color-text-primary); | |
| } | |
| .profile-header__stat-label { | |
| font: var(--text-micro); | |
| color: var(--color-text-muted); | |
| text-transform: uppercase; | |
| letter-spacing: var(--letter-spacing-wider); | |
| } | |
| .profile-header__stat-divider { | |
| width: 1px; | |
| background: var(--color-border-subtle); | |
| height: 32px; | |
| align-self: center; | |
| } | |
| .profile-header__name { | |
| font: var(--text-subheading); | |
| color: var(--color-text-primary); | |
| } | |
| .profile-header__username { | |
| font: var(--text-caption); | |
| color: var(--color-text-accent); | |
| } | |
| .profile-header__bio { | |
| font: var(--text-caption); | |
| color: var(--color-text-secondary); | |
| line-height: var(--line-height-loose); | |
| } | |
| .profile-header__location { | |
| font: var(--text-micro); | |
| color: var(--color-text-muted); | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-1); | |
| } | |
| /* ═══ COMMENT BOX ═══ */ | |
| .comment-box__item__body { | |
| padding: var(--space-2) var(--space-3); | |
| border-radius: var(--radius-md); | |
| background: var(--color-glass-fill); | |
| border: 1px solid var(--color-glass-border); | |
| flex: 1; | |
| } | |
| .comment-box__item__username { | |
| font-weight: var(--font-weight-semibold); | |
| font-size: var(--font-size-xs); | |
| color: var(--color-text-primary); | |
| margin-bottom: var(--space-1); | |
| } | |
| .comment-box__item__text { | |
| font-size: var(--font-size-sm); | |
| color: var(--color-text-secondary); | |
| line-height: var(--line-height-normal); | |
| } | |
| .comment-box__item__meta { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-4); | |
| margin-top: var(--space-2); | |
| } | |
| .comment-box__item__time { | |
| font: var(--text-micro); | |
| color: var(--color-text-muted); | |
| } | |
| .comment-box__item__like { | |
| font: var(--text-micro); | |
| color: var(--color-text-muted); | |
| transition: color var(--duration-fast); | |
| } | |
| .comment-box__item__like.liked { | |
| color: var(--color-like-active); | |
| } | |
| .comment-box__item__reply { | |
| font: var(--text-micro); | |
| color: var(--color-text-muted); | |
| font-weight: var(--font-weight-medium); | |
| transition: color var(--duration-fast); | |
| } | |
| .comment-box__item__reply:hover { | |
| color: var(--color-text-accent); | |
| } | |
| .comment-box__input-row { | |
| border-top: 1px solid var(--color-glass-border); | |
| } | |
| .comment-box__input { | |
| flex: 1; | |
| height: 40px; | |
| padding: 0 var(--space-4); | |
| border-radius: var(--radius-full); | |
| font-size: var(--font-size-sm); | |
| color: var(--color-text-primary); | |
| } | |
| .comment-box__submit { | |
| color: var(--color-accent-primary); | |
| font-weight: var(--font-weight-semibold); | |
| font-size: var(--font-size-sm); | |
| transition: opacity var(--duration-fast); | |
| } | |
| .comment-box__submit:disabled { | |
| opacity: 0.4; | |
| cursor: not-allowed; | |
| } | |
| /* ═══ BUTTONS ═══ */ | |
| .btn-primary { | |
| background: var(--color-accent-gradient); | |
| color: var(--color-text-primary); | |
| font-weight: var(--font-weight-semibold); | |
| font-size: var(--font-size-sm); | |
| box-shadow: var(--shadow-glow); | |
| } | |
| .btn-primary:hover { | |
| box-shadow: var(--shadow-glow-accent); | |
| transform: translateY(-1px); | |
| } | |
| .btn-primary:active { | |
| transform: scale(0.97) translateY(0); | |
| } | |
| .btn-secondary { | |
| background: var(--color-glass-fill-md); | |
| border: 1px solid var(--color-glass-border-md); | |
| color: var(--color-text-primary); | |
| font-weight: var(--font-weight-medium); | |
| font-size: var(--font-size-sm); | |
| } | |
| .btn-secondary:hover { | |
| background: var(--color-glass-fill-lg); | |
| } | |
| .btn-ghost { | |
| color: var(--color-text-secondary); | |
| font-size: var(--font-size-sm); | |
| font-weight: var(--font-weight-medium); | |
| } | |
| .btn-ghost:hover { | |
| background: var(--color-interactive-hover); | |
| color: var(--color-text-primary); | |
| } | |
| .btn-danger { | |
| background: rgba(239, 68, 68, 0.15); | |
| border: 1px solid rgba(239, 68, 68, 0.3); | |
| color: var(--color-error); | |
| font-weight: var(--font-weight-medium); | |
| font-size: var(--font-size-sm); | |
| } | |
| .btn-danger:hover { | |
| background: rgba(239, 68, 68, 0.25); | |
| } | |
| /* ═══ AVATAR ═══ */ | |
| .avatar { | |
| background: var(--color-glass-fill-lg); | |
| border: 1.5px solid var(--avatar-border-color); | |
| } | |
| .avatar--ring { | |
| padding: 2px; | |
| background: var(--story-ring-gradient); | |
| border: none; | |
| } | |
| .avatar--ring .avatar__img { | |
| border: 2px solid var(--color-bg-base); | |
| border-radius: var(--radius-full); | |
| } | |
| /* ═══ BADGE ═══ */ | |
| .badge-accent { | |
| background: rgba(168, 85, 247, 0.15); | |
| border: 1px solid rgba(168, 85, 247, 0.3); | |
| color: var(--color-accent-primary); | |
| } | |
| .badge-success { | |
| background: rgba(74, 222, 128, 0.12); | |
| border: 1px solid rgba(74, 222, 128, 0.25); | |
| color: var(--color-success); | |
| } | |
| .badge-error { | |
| background: rgba(248, 113, 113, 0.12); | |
| border: 1px solid rgba(248, 113, 113, 0.25); | |
| color: var(--color-error); | |
| } | |
| /* ═══ EXPLORE GRID ═══ */ | |
| .explore-grid-item img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| transition: transform var(--duration-slow) var(--ease-out); | |
| } | |
| .explore-grid-item:hover img { | |
| transform: scale(1.04); | |
| } | |
| .explore-grid-item__overlay { | |
| position: absolute; | |
| inset: 0; | |
| background: var(--color-bg-scrim); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| opacity: 0; | |
| transition: opacity var(--duration-normal) var(--ease-out); | |
| } | |
| .explore-grid-item:hover .explore-grid-item__overlay { | |
| opacity: 1; | |
| } | |
| .explore-grid-item__stats { | |
| display: flex; | |
| gap: var(--space-4); | |
| color: var(--color-text-primary); | |
| font-weight: var(--font-weight-semibold); | |
| font-size: var(--font-size-sm); | |
| } | |
| /* ═══ TOAST ═══ */ | |
| .toast { | |
| background: var(--color-glass-fill-lg); | |
| backdrop-filter: blur(var(--glass-blur)); | |
| -webkit-backdrop-filter: blur(var(--glass-blur)); | |
| border: 1px solid var(--color-glass-border-md); | |
| box-shadow: var(--shadow-lg); | |
| font-size: var(--font-size-sm); | |
| font-weight: var(--font-weight-medium); | |
| color: var(--color-text-primary); | |
| white-space: nowrap; | |
| } | |
| /* ═══ INPUT ═══ */ | |
| .input-field { | |
| width: 100%; | |
| height: 48px; | |
| padding: 0 var(--space-4); | |
| border-radius: var(--input-radius); | |
| font-size: var(--font-size-base); | |
| color: var(--color-text-primary); | |
| } | |
| .textarea-field { | |
| width: 100%; | |
| padding: var(--space-3) var(--space-4); | |
| border-radius: var(--input-radius); | |
| font-size: var(--font-size-base); | |
| color: var(--color-text-primary); | |
| resize: none; | |
| line-height: var(--line-height-normal); | |
| } | |
| /* ═══ SECTION HEADERS ═══ */ | |
| .section-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: var(--space-2) var(--page-padding); | |
| } | |
| .section-header__title { | |
| font: var(--text-subheading); | |
| color: var(--color-text-primary); | |
| letter-spacing: var(--letter-spacing-tight); | |
| } | |
| .section-header__action { | |
| font-size: var(--font-size-sm); | |
| color: var(--color-text-accent); | |
| font-weight: var(--font-weight-medium); | |
| } | |
| /* ═══ ADMIN PANEL ═══ */ | |
| .admin-nav-item { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-3); | |
| padding: var(--space-3) var(--space-4); | |
| border-radius: var(--radius-md); | |
| font-size: var(--font-size-sm); | |
| font-weight: var(--font-weight-medium); | |
| color: var(--color-text-secondary); | |
| transition: all var(--duration-fast) var(--ease-out); | |
| cursor: pointer; | |
| } | |
| .admin-nav-item:hover { | |
| background: var(--color-interactive-hover); | |
| color: var(--color-text-primary); | |
| } | |
| .admin-nav-item.active { | |
| background: var(--color-glass-fill-md); | |
| color: var(--color-text-accent); | |
| border: 1px solid var(--color-glass-border); | |
| } | |
| .admin-card { | |
| border-radius: var(--card-radius); | |
| padding: var(--space-5); | |
| } | |
| .admin-card__title { | |
| font: var(--text-subheading); | |
| color: var(--color-text-primary); | |
| margin-bottom: var(--space-4); | |
| } | |
| .admin-card__label { | |
| font: var(--text-micro); | |
| color: var(--color-text-muted); | |
| text-transform: uppercase; | |
| letter-spacing: var(--letter-spacing-wider); | |
| margin-bottom: var(--space-2); | |
| } | |
| .admin-token-swatch { | |
| width: 32px; | |
| height: 32px; | |
| border-radius: var(--radius-sm); | |
| border: 1px solid var(--color-glass-border-md); | |
| cursor: pointer; | |
| flex-shrink: 0; | |
| } | |
| .admin-token-name { | |
| font: var(--text-caption); | |
| color: var(--color-text-secondary); | |
| font-family: var(--font-family-mono); | |
| flex: 1; | |
| } | |
| .admin-token-value { | |
| font: var(--text-micro); | |
| color: var(--color-text-muted); | |
| font-family: var(--font-family-mono); | |
| } | |
| .theme-card { | |
| border-radius: var(--card-radius); | |
| padding: var(--space-4); | |
| cursor: pointer; | |
| transition: all var(--duration-normal) var(--ease-out); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .theme-card.selected { | |
| border-color: var(--color-accent-primary); | |
| box-shadow: var(--shadow-glow); | |
| } | |
| .theme-card__preview { | |
| display: flex; | |
| gap: var(--space-2); | |
| margin-bottom: var(--space-3); | |
| } | |
| .theme-card__dot { | |
| width: 20px; | |
| height: 20px; | |
| border-radius: var(--radius-full); | |
| } | |
| /* ═══ TOGGLE SWITCH ═══ */ | |
| .toggle-switch { | |
| position: relative; | |
| width: 48px; | |
| height: 26px; | |
| flex-shrink: 0; | |
| } | |
| .toggle-switch__track { | |
| width: 100%; | |
| height: 100%; | |
| border-radius: var(--radius-full); | |
| background: var(--color-glass-fill-md); | |
| border: 1px solid var(--color-glass-border-md); | |
| transition: background var(--duration-normal) var(--ease-out); | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| padding: 0 var(--space-1); | |
| } | |
| .toggle-switch__track.on { | |
| background: rgba(168, 85, 247, 0.25); | |
| border-color: var(--color-accent-primary); | |
| } | |
| .toggle-switch__thumb { | |
| width: 20px; | |
| height: 20px; | |
| border-radius: var(--radius-full); | |
| background: var(--color-text-muted); | |
| transition: transform var(--duration-normal) var(--ease-spring), | |
| background var(--duration-normal) var(--ease-out); | |
| flex-shrink: 0; | |
| } | |
| .toggle-switch__track.on .toggle-switch__thumb { | |
| transform: translateX(22px); | |
| background: var(--color-accent-primary); | |
| } | |
| /* ═══ DIVIDER ═══ */ | |
| .divider { | |
| height: 1px; | |
| background: var(--color-border-subtle); | |
| margin: var(--space-4) 0; | |
| } | |