/* TX.WTF Custom Styles */ /* ==================== Theme Variables ==================== */ :root { /* Primary/Accent colors */ --theme-primary: #00d1b2; --theme-primary-dark: #00947e; --theme-primary-light: #00ffdc; /* Secondary/Accent colors */ --theme-secondary: #3273dc; --theme-secondary-dark: #2366d1; --theme-secondary-light: #5a95f5; /* Background colors */ --theme-bg-primary: #1a1a2e; --theme-bg-secondary: #16213e; --theme-bg-tertiary: #0f3460; /* Surface colors (boxes, cards, modals) */ --theme-surface: #2d2d44; --theme-surface-light: #3d3d5c; --theme-surface-dark: #1d1d2e; /* Text colors */ --theme-text-primary: #ffffff; --theme-text-secondary: #d0d0dc; --theme-text-muted: #a8a8b8; /* Button colors */ --theme-btn-primary-bg: var(--theme-primary); --theme-btn-primary-text: #ffffff; --theme-btn-secondary-bg: var(--theme-secondary); --theme-btn-secondary-text: #ffffff; /* Success/Danger/Warning/Info ---------------------------------------------------------------- The palette deliberately uses only four colors: primary (teal) - also drives .is-primary / .is-success secondary (blue) - also drives .is-link / .is-info warning (amber) danger (red) Bulma's vivid is-success / is-info greens & blues are remapped onto the palette tokens below so the UI stays cohesive instead of looking like a rainbow. See the button/tag/notification overrides further down. */ --theme-success: var(--theme-primary); --theme-success-dark: var(--theme-primary-dark); --theme-info: var(--theme-secondary); --theme-info-dark: var(--theme-secondary-dark); --theme-danger: #e2495f; --theme-danger-dark: #c43a4e; --theme-warning: #f0a64c; --theme-warning-dark: #d68a32; /* Border colors */ --theme-border: rgba(255, 255, 255, 0.1); --theme-border-light: rgba(255, 255, 255, 0.2); /* Shadow */ --theme-shadow: rgba(0, 0, 0, 0.3); /* Input fields */ --theme-input-bg: #363652; --theme-input-border: rgba(255, 255, 255, 0.2); --theme-input-text: #ffffff; /* Legacy variables for compatibility */ --primary-color: var(--theme-primary); --dark-bg: var(--theme-bg-primary); --darker-bg: var(--theme-bg-secondary); } /* ==================== Avatar / Rounded Image Aspect Ratio ==================== Force every rounded avatar to fill its square container without changing the image aspect ratio. Without this, Bulma's default .image > img sizing (width/height 100%, object-fit: fill) stretches non-square uploads. */ img.is-rounded, figure.image > img.is-rounded, .avatar-picker-preview img, .avatar-picker-preview video { object-fit: cover; object-position: center; } /* ==================== Background Container ==================== */ #background-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden; pointer-events: none; } /* Theme background (default) */ #background-container.theme-active { background: linear-gradient(135deg, var(--theme-bg-primary) 0%, var(--theme-bg-secondary) 100%); } /* WebGL background */ #background-container.webgl-active { background: transparent; pointer-events: auto; /* Allow orbit controls interaction */ } #background-container.webgl-active canvas { display: block; width: 100%; height: 100%; } /* Attachment background */ #background-container.attachment-active { background-color: var(--theme-bg-primary); } /* Video background element */ #background-container .background-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } /* Profile background media layer. Rendered at the level (not inside the scrolling profile screen) so the image/video fills the viewport and stays pinned while the page scrolls instead of scrolling with the content. Sits above the theme #background-container (same negative z-index, later in DOM) but behind all app content. */ #profile-bg-layer { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; display: none; } #profile-bg-layer.is-active { display: block; } #profile-bg-layer > video, #profile-bg-layer > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } #profile-bg-layer > .profile-bg-overlay { position: absolute; inset: 0; } /* Ensure content is readable over any background */ body.has-webgl-background #app-container, body.has-attachment-background #app-container { position: relative; z-index: 1; } /* Semi-transparent overlay for content boxes when using dynamic backgrounds */ body.has-dynamic-background .box { background-color: rgba(45, 45, 68, 0.85) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } body.has-dynamic-background .navbar.is-dark { background-color: rgba(22, 33, 62, 0.9) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* ==================== Theme Application ==================== */ html { overflow-x: hidden; overflow-y: auto; /* Only show scrollbar when needed */ scrollbar-gutter: stable; /* Reserve space for scrollbar to prevent layout shift */ } body { min-height: 100vh; background: transparent; /* Background handled by #background-container */ color: var(--theme-text-primary); overflow-x: hidden; overflow-y: visible; /* Let html handle scrolling */ } /* Prevent nested scrollbars in layout elements */ .section, .container, .columns, .column { overflow-x: hidden; overflow-y: visible; } /* Navbar theming */ .navbar.is-dark { background-color: var(--theme-bg-secondary) !important; } /* Box theming - use !important to override Bulma */ .box { background-color: var(--theme-surface) !important; color: var(--theme-text-primary) !important; overflow-x: hidden; overflow-y: visible; } .box.has-background-dark { background-color: var(--theme-surface-dark) !important; color: var(--theme-text-primary) !important; } .box.has-background-light { background-color: var(--theme-surface-light) !important; color: var(--theme-text-primary) !important; } /* ==================== Unified palette overrides ==================== Bulma exposes six color modifiers (is-primary, is-link, is-info, is-success, is-warning, is-danger). We collapse them onto our 4-color palette so the UI stays cohesive: is-primary -> primary (teal) is-success -> primary (teal) is-link -> secondary (blue) is-info -> secondary (blue) is-warning -> warning (amber) is-danger -> danger (red) Solid variants always use white text. The .is-light variants use a tinted dark surface with the accent color as text so they remain legible on the themed dark background. */ /* --- Buttons ------------------------------------------------------- */ .button.is-primary, .button.is-success { background-color: var(--theme-primary) !important; border-color: var(--theme-primary) !important; color: #ffffff !important; } .button.is-primary:hover, .button.is-success:hover { background-color: var(--theme-primary-dark) !important; border-color: var(--theme-primary-dark) !important; color: #ffffff !important; } .button.is-link, .button.is-info { background-color: var(--theme-secondary) !important; border-color: var(--theme-secondary) !important; color: #ffffff !important; } .button.is-link:hover, .button.is-info:hover { background-color: var(--theme-secondary-dark) !important; border-color: var(--theme-secondary-dark) !important; color: #ffffff !important; } .button.is-warning { background-color: var(--theme-warning) !important; border-color: var(--theme-warning) !important; color: #1d1d2e !important; } .button.is-warning:hover { background-color: var(--theme-warning-dark) !important; border-color: var(--theme-warning-dark) !important; color: #1d1d2e !important; } .button.is-danger { background-color: var(--theme-danger) !important; border-color: var(--theme-danger) !important; color: #ffffff !important; } .button.is-danger:hover { background-color: var(--theme-danger-dark) !important; border-color: var(--theme-danger-dark) !important; color: #ffffff !important; } /* Light variants: dark themed surface with accent-color text */ .button.is-primary.is-light, .button.is-success.is-light { background-color: color-mix(in srgb, var(--theme-primary) 18%, var(--theme-surface)) !important; border-color: color-mix(in srgb, var(--theme-primary) 40%, var(--theme-surface-light)) !important; color: var(--theme-primary-light) !important; } .button.is-link.is-light, .button.is-info.is-light { background-color: color-mix(in srgb, var(--theme-secondary) 18%, var(--theme-surface)) !important; border-color: color-mix(in srgb, var(--theme-secondary) 40%, var(--theme-surface-light)) !important; color: var(--theme-secondary-light) !important; } .button.is-warning.is-light { background-color: color-mix(in srgb, var(--theme-warning) 18%, var(--theme-surface)) !important; border-color: color-mix(in srgb, var(--theme-warning) 40%, var(--theme-surface-light)) !important; color: var(--theme-warning) !important; } .button.is-danger.is-light { background-color: color-mix(in srgb, var(--theme-danger) 18%, var(--theme-surface)) !important; border-color: color-mix(in srgb, var(--theme-danger) 40%, var(--theme-surface-light)) !important; color: #ff8a9a !important; } /* Default (uncolored) button: legible neutral on dark theme. */ .button:not(.is-primary):not(.is-link):not(.is-info):not(.is-success):not(.is-warning):not(.is-danger):not(.is-text):not(.is-ghost):not([class*="is-menu-"]) { background-color: var(--theme-surface-light); border-color: var(--theme-border-light); color: var(--theme-text-primary); } .button:not(.is-primary):not(.is-link):not(.is-info):not(.is-success):not(.is-warning):not(.is-danger):not(.is-text):not(.is-ghost):not([class*="is-menu-"]):hover { background-color: color-mix(in srgb, var(--theme-primary) 15%, var(--theme-surface-light)); border-color: var(--theme-primary); color: var(--theme-text-primary); } .button.is-static { background-color: var(--theme-surface-dark) !important; border-color: var(--theme-border) !important; color: var(--theme-text-secondary) !important; } /* Outlined variants */ .button.is-outlined.is-primary, .button.is-outlined.is-success { background-color: transparent !important; border-color: var(--theme-primary) !important; color: var(--theme-primary-light) !important; } .button.is-outlined.is-link, .button.is-outlined.is-info { background-color: transparent !important; border-color: var(--theme-secondary) !important; color: var(--theme-secondary-light) !important; } .button.is-outlined.is-warning { background-color: transparent !important; border-color: var(--theme-warning) !important; color: var(--theme-warning) !important; } .button.is-outlined.is-danger { background-color: transparent !important; border-color: var(--theme-danger) !important; color: #ff8a9a !important; } /* --- Tags ---------------------------------------------------------- */ .tag.is-primary, .tag.is-success { background-color: var(--theme-primary) !important; color: #ffffff !important; } .tag.is-link, .tag.is-info { background-color: var(--theme-secondary) !important; color: #ffffff !important; } .tag.is-warning { background-color: var(--theme-warning) !important; color: #1d1d2e !important; } .tag.is-danger { background-color: var(--theme-danger) !important; color: #ffffff !important; } .tag.is-primary.is-light, .tag.is-success.is-light { background-color: color-mix(in srgb, var(--theme-primary) 20%, var(--theme-surface)) !important; color: var(--theme-primary-light) !important; } .tag.is-link.is-light, .tag.is-info.is-light { background-color: color-mix(in srgb, var(--theme-secondary) 20%, var(--theme-surface)) !important; color: var(--theme-secondary-light) !important; } .tag.is-warning.is-light { background-color: color-mix(in srgb, var(--theme-warning) 20%, var(--theme-surface)) !important; color: var(--theme-warning) !important; } .tag.is-danger.is-light { background-color: color-mix(in srgb, var(--theme-danger) 20%, var(--theme-surface)) !important; color: #ff8a9a !important; } /* --- Notifications ------------------------------------------------- */ .notification.is-primary, .notification.is-success { background-color: var(--theme-primary) !important; color: #ffffff !important; } .notification.is-link, .notification.is-info { background-color: var(--theme-secondary) !important; color: #ffffff !important; } .notification.is-warning { background-color: var(--theme-warning) !important; color: #1d1d2e !important; } .notification.is-danger { background-color: var(--theme-danger) !important; color: #ffffff !important; } .notification.is-primary.is-light, .notification.is-success.is-light { background-color: color-mix(in srgb, var(--theme-primary) 18%, var(--theme-surface)) !important; color: var(--theme-primary-light) !important; border: 1px solid color-mix(in srgb, var(--theme-primary) 40%, var(--theme-surface-light)) !important; } .notification.is-link.is-light, .notification.is-info.is-light { background-color: color-mix(in srgb, var(--theme-secondary) 18%, var(--theme-surface)) !important; color: var(--theme-secondary-light) !important; border: 1px solid color-mix(in srgb, var(--theme-secondary) 40%, var(--theme-surface-light)) !important; } .notification.is-warning.is-light { background-color: color-mix(in srgb, var(--theme-warning) 18%, var(--theme-surface)) !important; color: var(--theme-warning) !important; border: 1px solid color-mix(in srgb, var(--theme-warning) 40%, var(--theme-surface-light)) !important; } .notification.is-danger.is-light { background-color: color-mix(in srgb, var(--theme-danger) 18%, var(--theme-surface)) !important; color: #ffb1bc !important; border: 1px solid color-mix(in srgb, var(--theme-danger) 40%, var(--theme-surface-light)) !important; } .notification:not(.is-primary):not(.is-link):not(.is-info):not(.is-success):not(.is-warning):not(.is-danger) { background-color: var(--theme-surface) !important; color: var(--theme-text-primary) !important; border: 1px solid var(--theme-border-light) !important; } /* --- Bulma helper text colors mapped to palette --------------------- .has-text-success / -info / -link / -primary / -danger / -warning so any inline text using these stays on-palette. */ .has-text-primary, .has-text-success { color: var(--theme-primary-light) !important; } .has-text-link, .has-text-info { color: var(--theme-secondary-light) !important; } .has-text-warning { color: var(--theme-warning) !important; } .has-text-danger { color: #ff8a9a !important; } /* Background helper variants used on small badges/spans. */ .has-background-primary, .has-background-success { background-color: var(--theme-primary) !important; color: #ffffff !important; } .has-background-link, .has-background-info { background-color: var(--theme-secondary) !important; color: #ffffff !important; } .has-background-warning { background-color: var(--theme-warning) !important; color: #1d1d2e !important; } .has-background-danger { background-color: var(--theme-danger) !important; color: #ffffff !important; } /* --- Progress bars ------------------------------------------------- */ .progress.is-success::-webkit-progress-value, .progress.is-primary::-webkit-progress-value { background-color: var(--theme-primary); } .progress.is-success::-moz-progress-bar, .progress.is-primary::-moz-progress-bar { background-color: var(--theme-primary); } .progress.is-info::-webkit-progress-value, .progress.is-link::-webkit-progress-value { background-color: var(--theme-secondary); } .progress.is-info::-moz-progress-bar, .progress.is-link::-moz-progress-bar { background-color: var(--theme-secondary); } .progress.is-warning::-webkit-progress-value { background-color: var(--theme-warning); } .progress.is-warning::-moz-progress-bar { background-color: var(--theme-warning); } .progress.is-danger::-webkit-progress-value { background-color: var(--theme-danger); } .progress.is-danger::-moz-progress-bar { background-color: var(--theme-danger); } /* Input theming */ .input, .textarea, .select select { background-color: var(--theme-input-bg); border-color: var(--theme-input-border); color: var(--theme-input-text); } .input:focus, .textarea:focus, .select select:focus { border-color: var(--theme-primary); box-shadow: 0 0 0 0.125em rgba(var(--theme-primary), 0.25); } .input::placeholder, .textarea::placeholder { color: var(--theme-text-muted); } /* Table theming */ .table { background-color: var(--theme-surface) !important; color: var(--theme-text-primary) !important; } .table th { color: var(--theme-text-primary) !important; border-color: var(--theme-border) !important; background-color: var(--theme-surface-dark) !important; } .table td { color: var(--theme-text-primary) !important; border-color: var(--theme-border) !important; } .table thead { background-color: var(--theme-surface-dark) !important; } .table thead th { color: var(--theme-text-primary) !important; } .table.is-striped tbody tr:not(.is-selected):nth-child(even) { background-color: var(--theme-surface-dark) !important; } .table.is-striped tbody tr:not(.is-selected):nth-child(even) td { color: var(--theme-text-primary) !important; } .table.is-hoverable tbody tr:not(.is-selected):hover { background-color: var(--theme-surface-light) !important; } .table.is-hoverable tbody tr:not(.is-selected):hover td { color: var(--theme-text-primary) !important; } /* Tabs theming */ .tabs.is-boxed li.is-active a { background-color: var(--theme-surface); border-color: var(--theme-border); border-bottom-color: transparent !important; color: var(--theme-primary); } .tabs.is-boxed a { border-color: var(--theme-border); color: var(--theme-text-secondary); } .tabs.is-boxed a:hover { background-color: var(--theme-surface-light); border-bottom-color: var(--theme-border); } /* Panel theming */ .panel-block { border-color: var(--theme-border); color: var(--theme-text-primary); } .panel-block:hover { background-color: var(--theme-surface-light) !important; } /* Direct-messages conversation list rows. Bulma's is sized for ~1em icons; embedding a 32x32 avatar inside it caused the avatar to overflow horizontally and visually collide with the timestamp text. Use an explicit flex layout so the avatar reserves its own column and the meta column flexes to fill the remaining width. */ .dm-conversation-item { display: flex; align-items: center; gap: 0.75rem; } .dm-conversation-avatar { flex: 0 0 32px; margin: 0; } .dm-conversation-meta { flex: 1 1 auto; min-width: 0; } .dm-conversation-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Notification theming (legacy overrides preserved for back-compat; solid + light variants are normalized by the unified palette block near the top of this file). */ /* Label theming */ .label { color: var(--theme-text-primary); } .label.has-text-white { color: var(--theme-text-primary) !important; } /* Title/subtitle theming */ .title { color: var(--theme-text-primary) !important; } .title.has-text-light { color: var(--theme-text-primary) !important; } .subtitle { color: var(--theme-text-secondary) !important; } .subtitle.has-text-grey { color: var(--theme-text-secondary) !important; } /* Help text theming */ .help { color: var(--theme-text-muted); } .help.has-text-grey-light { color: var(--theme-text-muted) !important; } /* Modal theming */ .modal-card-head, .modal-card-foot { background-color: var(--theme-surface-dark); border-color: var(--theme-border); } .modal-card-title { color: var(--theme-text-primary); } .modal-card-body { background-color: var(--theme-surface); color: var(--theme-text-primary); } /* Tag theming */ .tag.is-dark { background-color: var(--theme-surface-dark); color: var(--theme-text-primary); } .tag.is-light { background-color: var(--theme-surface-light); color: var(--theme-text-primary); } /* Note: .tag.is-info / .tag.is-primary / .tag.is-success and their .is-light variants are normalized by the unified palette block near the top of this file. */ /* Currency tags in exchange log */ .tag.currency-tag { background-color: var(--theme-surface); color: var(--theme-primary); border: 1px solid var(--theme-primary); font-weight: 600; } /* Progress bar theming */ .progress.is-primary::-webkit-progress-value { background-color: var(--theme-primary); } .progress.is-primary::-moz-progress-bar { background-color: var(--theme-primary); } /* Pagination theming */ .pagination-link.is-current { background-color: var(--theme-primary); border-color: var(--theme-primary); } /* Breadcrumb theming */ .breadcrumb a { color: var(--theme-secondary); } /* Text color utilities with theme support */ .has-text-primary { color: var(--theme-primary) !important; } /* ==================== End Theme Variables ==================== */ /* Hide all screens by default */ .screen.is-hidden { display: none !important; } /* Screens should not create nested scrollbars - let the body handle scrolling */ .screen:not(.is-hidden) { overflow-x: hidden; overflow-y: visible; } /* ==================== Responsive Content Containers ==================== */ /* These replace the columns is-centered + column pattern for simpler layout */ /* Narrow content (feed, posts, profile, hashtags) - narrowest on large screens */ .content-narrow { width: 100%; max-width: 100%; margin-left: auto; margin-right: auto; padding-left: 0.75rem; padding-right: 0.75rem; } /* Medium content (messages, menu) - wider on large screens */ .content-medium { width: 100%; max-width: 100%; margin-left: auto; margin-right: auto; padding-left: 0.75rem; padding-right: 0.75rem; } /* Small content (login, transfer) - narrowest */ .content-small { width: 100%; max-width: 100%; margin-left: auto; margin-right: auto; padding-left: 0.75rem; padding-right: 0.75rem; } /* Tablet and up - constrain widths */ @media screen and (min-width: 769px) { .content-narrow { max-width: 66.6667%; /* ~is-8-tablet */ padding-left: 0; padding-right: 0; } .content-medium { max-width: 83.3333%; /* ~is-10-tablet */ padding-left: 0; padding-right: 0; } .content-small { max-width: 41.6667%; /* ~is-5-tablet */ padding-left: 0; padding-right: 0; } } /* Desktop and up - narrower */ @media screen and (min-width: 1024px) { .content-narrow { max-width: 58.3333%; /* ~is-7-desktop */ } .content-medium { max-width: 75%; /* ~is-9-desktop */ } .content-small { max-width: 33.3333%; /* ~is-4-desktop */ } } /* Widescreen and up - even narrower for readability */ @media screen and (min-width: 1216px) { .content-narrow { max-width: 50%; /* ~is-6-widescreen */ } .content-medium { max-width: 66.6667%; /* ~is-8-widescreen */ } .content-small { max-width: 33.3333%; /* ~is-4-widescreen */ } } /* Login Screen */ #screen-login { min-height: 100vh; display: flex; align-items: center; } #screen-login .box { border-radius: 8px; box-shadow: 0 10px 40px var(--theme-shadow); } /* Title styling */ .title.is-1 { font-size: 3.5rem; letter-spacing: 2px; font-weight: 800; } /* Navbar */ .navbar.is-dark { background-color: var(--darker-bg); } /* Menu buttons - themed with gradient pattern */ .menu-buttons .button { justify-content: flex-start; padding-left: 1.5rem; transition: all 0.2s ease; } .menu-buttons .button .icon { margin-right: 0.5rem; } /* Menu button styling - row 1 (primary accent) */ .menu-buttons .button.is-menu-1 { background-color: var(--theme-primary) !important; border-color: var(--theme-primary) !important; color: var(--theme-surface-dark) !important; } .menu-buttons .button.is-menu-1:hover { background-color: var(--theme-primary-dark) !important; border-color: var(--theme-primary-dark) !important; transform: translateX(3px); } /* Menu button styling - row 2 (primary light) */ .menu-buttons .button.is-menu-2 { background-color: color-mix(in srgb, var(--theme-primary) 60%, var(--theme-surface-light)) !important; border-color: color-mix(in srgb, var(--theme-primary) 60%, var(--theme-surface-light)) !important; color: var(--theme-text-primary) !important; } .menu-buttons .button.is-menu-2:hover { background-color: var(--theme-primary) !important; border-color: var(--theme-primary) !important; transform: translateX(3px); } /* Menu button styling - row 3 (blend) */ .menu-buttons .button.is-menu-3 { background-color: color-mix(in srgb, var(--theme-primary) 30%, var(--theme-surface-light)) !important; border-color: color-mix(in srgb, var(--theme-primary) 30%, var(--theme-surface-light)) !important; color: var(--theme-text-primary) !important; } .menu-buttons .button.is-menu-3:hover { background-color: color-mix(in srgb, var(--theme-primary) 50%, var(--theme-surface-light)) !important; border-color: color-mix(in srgb, var(--theme-primary) 50%, var(--theme-surface-light)) !important; transform: translateX(3px); } /* Menu button styling - row 4 (surface) */ .menu-buttons .button.is-menu-4 { background-color: var(--theme-surface-light) !important; border-color: var(--theme-surface-light) !important; color: var(--theme-text-primary) !important; } .menu-buttons .button.is-menu-4:hover { background-color: color-mix(in srgb, var(--theme-secondary) 30%, var(--theme-surface-light)) !important; border-color: color-mix(in srgb, var(--theme-secondary) 30%, var(--theme-surface-light)) !important; transform: translateX(3px); } /* Menu button styling - row 5 (secondary blend) */ .menu-buttons .button.is-menu-5 { background-color: color-mix(in srgb, var(--theme-secondary) 30%, var(--theme-surface-light)) !important; border-color: color-mix(in srgb, var(--theme-secondary) 30%, var(--theme-surface-light)) !important; color: var(--theme-text-primary) !important; } .menu-buttons .button.is-menu-5:hover { background-color: color-mix(in srgb, var(--theme-secondary) 50%, var(--theme-surface-light)) !important; border-color: color-mix(in srgb, var(--theme-secondary) 50%, var(--theme-surface-light)) !important; transform: translateX(3px); } /* Menu button styling - row 6 (secondary light) */ .menu-buttons .button.is-menu-6 { background-color: color-mix(in srgb, var(--theme-secondary) 60%, var(--theme-surface-light)) !important; border-color: color-mix(in srgb, var(--theme-secondary) 60%, var(--theme-surface-light)) !important; color: var(--theme-text-primary) !important; } .menu-buttons .button.is-menu-6:hover { background-color: var(--theme-secondary) !important; border-color: var(--theme-secondary) !important; transform: translateX(3px); } /* Menu button styling - row 7 (secondary accent) */ .menu-buttons .button.is-menu-7 { background-color: var(--theme-secondary) !important; border-color: var(--theme-secondary) !important; color: #ffffff !important; } .menu-buttons .button.is-menu-7:hover { background-color: var(--theme-secondary-dark) !important; border-color: var(--theme-secondary-dark) !important; transform: translateX(3px); } /* Menu button styling - row 8 (primary/secondary mix for Mail/Messages) */ .menu-buttons .button.is-menu-8 { background-color: color-mix(in srgb, var(--theme-primary) 50%, var(--theme-secondary)) !important; border-color: color-mix(in srgb, var(--theme-primary) 50%, var(--theme-secondary)) !important; color: #ffffff !important; } .menu-buttons .button.is-menu-8:hover { background-color: color-mix(in srgb, var(--theme-primary-dark) 50%, var(--theme-secondary-dark)) !important; border-color: color-mix(in srgb, var(--theme-primary-dark) 50%, var(--theme-secondary-dark)) !important; transform: translateX(3px); } /* Legacy menu button classes for compatibility */ .menu-buttons .button.is-menu-primary { background-color: var(--theme-primary) !important; border-color: var(--theme-primary) !important; color: var(--theme-surface-dark) !important; } .menu-buttons .button.is-menu-primary:hover { background-color: var(--theme-primary-dark) !important; border-color: var(--theme-primary-dark) !important; } .menu-buttons .button.is-menu-secondary { background-color: var(--theme-secondary) !important; border-color: var(--theme-secondary) !important; color: #ffffff !important; } .menu-buttons .button.is-menu-secondary:hover { background-color: var(--theme-secondary-dark) !important; border-color: var(--theme-secondary-dark) !important; } .menu-buttons .button.is-menu-neutral { background-color: var(--theme-surface-light) !important; border-color: var(--theme-surface-light) !important; color: var(--theme-text-primary) !important; } .menu-buttons .button.is-menu-neutral:hover { background-color: var(--theme-surface) !important; border-color: var(--theme-surface) !important; } /* Menu Grid View */ .menu-grid { display: grid; grid-template-columns: repeat(var(--menu-grid-columns, 4), 1fr); gap: 0.75rem; } .menu-grid-item { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1rem 0.5rem; border-radius: 8px; cursor: pointer; transition: all 0.2s ease; text-align: center; min-height: 80px; border: none !important; } .menu-grid-item .icon { font-size: 1.5rem; margin-bottom: 0.5rem; } .menu-grid-item .label { font-size: 0.75rem; font-weight: 500; line-height: 1.2; word-wrap: break-word; max-width: 100%; } .menu-grid-item.no-label .label { display: none; } .menu-grid-item.no-label { min-height: 60px; } .menu-grid-item:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); filter: brightness(1.1); } /* Grid item menu color classes - match list button styles exactly */ /* Row 1 (primary accent) */ .menu-grid-item.is-menu-1 { background-color: var(--theme-primary) !important; color: var(--theme-surface-dark) !important; } /* Row 2 (primary light) */ .menu-grid-item.is-menu-2 { background-color: color-mix(in srgb, var(--theme-primary) 60%, var(--theme-surface-light)) !important; color: var(--theme-text-primary) !important; } /* Row 3 (blend) */ .menu-grid-item.is-menu-3 { background-color: color-mix(in srgb, var(--theme-primary) 30%, var(--theme-surface-light)) !important; color: var(--theme-text-primary) !important; } /* Row 4 (surface) */ .menu-grid-item.is-menu-4 { background-color: var(--theme-surface-light) !important; color: var(--theme-text-primary) !important; } /* Row 5 (secondary blend) */ .menu-grid-item.is-menu-5 { background-color: color-mix(in srgb, var(--theme-secondary) 30%, var(--theme-surface-light)) !important; color: var(--theme-text-primary) !important; } /* Row 6 (secondary light) */ .menu-grid-item.is-menu-6 { background-color: color-mix(in srgb, var(--theme-secondary) 60%, var(--theme-surface-light)) !important; color: var(--theme-text-primary) !important; } /* Row 7 (secondary accent) */ .menu-grid-item.is-menu-7 { background-color: var(--theme-secondary) !important; color: #ffffff !important; } /* Legacy/neutral styles */ .menu-grid-item.is-menu-primary { background-color: var(--theme-primary) !important; color: var(--theme-surface-dark) !important; } .menu-grid-item.is-menu-secondary { background-color: var(--theme-secondary) !important; color: #ffffff !important; } .menu-grid-item.is-menu-neutral { background-color: var(--theme-surface-light) !important; color: var(--theme-text-primary) !important; } /* User Status Indicators */ .user-status-indicator { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: middle; } .user-status-indicator.status-online { background-color: var(--theme-primary); box-shadow: 0 0 4px color-mix(in srgb, var(--theme-primary) 50%, transparent); } .user-status-indicator.status-offline { background-color: var(--theme-text-muted); } .user-status-indicator.status-away { background-color: var(--theme-warning); box-shadow: 0 0 4px color-mix(in srgb, var(--theme-warning) 50%, transparent); } .user-status-indicator.status-busy { background-color: var(--theme-danger); box-shadow: 0 0 4px color-mix(in srgb, var(--theme-danger) 50%, transparent); } .user-status-indicator.status-dnd { background-color: var(--theme-danger); box-shadow: 0 0 4px color-mix(in srgb, var(--theme-danger) 50%, transparent); } /* Small status for compact layouts */ .user-status-indicator.is-small { width: 8px; height: 8px; } /* User Badges/Emblems */ .user-badge { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; font-size: 0.6rem; margin-left: 4px; vertical-align: middle; } .user-badge.is-small { width: 14px; height: 14px; font-size: 0.5rem; } /* Country Flag Badge */ .user-badge.badge-country { background: transparent; width: auto; height: auto; font-size: 1em; border-radius: 0; } .user-badge.badge-country.is-small { font-size: 0.85em; } /* Admin Crown Badge */ .user-badge.badge-admin { background: var(--theme-warning); color: #1d1d2e; box-shadow: 0 1px 3px color-mix(in srgb, var(--theme-warning) 40%, transparent); } /* Custom Emblems */ .user-badge.badge-emblem { background-color: var(--theme-primary); color: white; } .user-badge.badge-verified { background: var(--theme-secondary); color: white; } .user-badge.badge-vip { background: var(--theme-primary-dark); color: white; } .user-badge.badge-founder { background: var(--theme-danger); color: white; } .user-badge.badge-contributor { background: var(--theme-primary); color: white; } .user-badge.badge-moderator { background: var(--theme-secondary); color: white; } /* User display with status and badges */ .user-display { display: inline-flex; align-items: center; } .user-display .username { font-weight: 500; } .user-display .user-badges { display: inline-flex; align-items: center; margin-left: 4px; } /* Tables */ .table-container { overflow-x: auto; } .table th { white-space: nowrap; } /* Panel items */ .panel-block { cursor: pointer; } .panel-block:hover { background-color: var(--theme-surface-light); } /* Notifications */ .notification-container { position: fixed; top: 60px; right: 20px; z-index: 1000; max-width: 400px; } .notification-container .notification { margin-bottom: 10px; animation: slideIn 0.3s ease-out; } @keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes slideOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } } .notification.is-removing { animation: slideOut 0.3s ease-in forwards; } /* Balance cards */ .balance-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } .balance-card { background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-secondary) 100%); border-radius: 8px; padding: 1rem; color: white; overflow: hidden; } .balance-card .currency { font-size: 0.9rem; opacity: 0.9; } .balance-card .amount { font-size: 1.25rem; font-weight: bold; word-break: break-all; } /* Bulma .has-text-grey / .has-text-grey-* have very low contrast on the dark theme surfaces; remap to the themed muted/secondary tokens so that scrip amounts, timestamps and meta text remain legible. */ .has-text-grey, .has-text-grey-dark { color: var(--theme-text-secondary) !important; } .has-text-grey-light, .has-text-grey-lighter { color: var(--theme-text-muted) !important; } /* Monetary / scrip values shown inline as next to labels need a bit of extra weight so they don't fade against the dark surface. */ .amount, .scrip-amount, td.amount, .is-scrip { color: var(--theme-text-primary); font-weight: 600; } /* Status tags */ .tag.is-active { background-color: var(--theme-primary); color: white; } .tag.is-inactive { background-color: var(--theme-danger); color: white; } /* Order status */ .order-status-active { color: var(--theme-primary-light); } .order-status-cancelled { color: #ff8a9a; } .order-status-filled { color: var(--theme-secondary-light); } /* Permission tags */ .permission-tag { margin: 2px; } /* Loading spinner */ .loading-spinner { display: flex; justify-content: center; align-items: center; padding: 2rem; } /* Transaction type badges */ .transaction-credit { color: var(--theme-primary-light); font-weight: bold; } .transaction-debit { color: #ff8a9a; font-weight: bold; } /* Responsive adjustments */ @media screen and (max-width: 768px) { .title.is-1 { font-size: 2.5rem; } .table td, .table th { font-size: 0.85rem; } .notification-container { left: 10px; right: 10px; max-width: none; } /* Mobile menu grid - adjust columns based on screen size */ .menu-grid { grid-template-columns: repeat(min(var(--menu-grid-columns, 4), 3), 1fr); gap: 0.5rem; } .menu-grid-item { padding: 0.75rem 0.25rem; min-height: 70px; } .menu-grid-item .icon { font-size: 1.25rem; margin-bottom: 0.25rem; } .menu-grid-item .label { font-size: 0.65rem; } /* Posts fill screen width on mobile */ .section { padding: 1rem 0.5rem; } /* Post boxes on mobile - full width with minimal margin */ .post-box, .box { border-radius: 0; margin-left: -0.5rem; margin-right: -0.5rem; width: calc(100% + 1rem); } /* Post feed container */ #feed-container .box, #post-detail-container .box { border-radius: 0; margin-left: -0.5rem; margin-right: -0.5rem; width: calc(100% + 1rem); } /* Reduce padding in post content on mobile */ .media-content { overflow-x: hidden; } .post-content { font-size: 0.95rem; } /* Modal adjustments for mobile */ .modal-card { max-width: 95%; margin: 0 auto; } } /* Even smaller screens */ @media screen and (max-width: 480px) { /* Force 2 columns on very small screens */ .menu-grid { grid-template-columns: repeat(2, 1fr); } .menu-grid-item { padding: 0.5rem 0.25rem; min-height: 60px; } .menu-grid-item .icon { font-size: 1.1rem; } .menu-grid-item .label { font-size: 0.6rem; } /* Tighter sections on very small screens */ .section { padding: 0.75rem 0.25rem; } .box { padding: 0.75rem; } } /* Dark mode boxes when logged in - use theme surface */ .section:not(#screen-login) .box { background-color: var(--theme-surface); color: var(--theme-text-primary); border: 1px solid var(--theme-border); } /* Modal styling */ .modal-card { max-width: 500px; margin: 0 auto; } /* Form improvements */ .field.has-addons .control.is-expanded { flex-grow: 1; } /* Session table improvements */ #auth-sessions-table-body td { vertical-align: middle; } #auth-sessions-table-body .uuid-cell { font-family: monospace; font-size: 0.8rem; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* User agent cell */ .user-agent-cell { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Panel icon */ .panel-icon-right { float: right; } /* Group user item */ .group-user-item { display: flex; justify-content: space-between; align-items: center; } .group-user-item .user-info { flex-grow: 1; } /* Hover effects for clickable rows */ .table tbody tr.is-clickable:hover { background-color: #f5f5f5; cursor: pointer; } /* Autocomplete dropdown styles */ .autocomplete-dropdown { position: absolute; top: 100%; left: 0; right: 0; z-index: 100; background: white; border: 1px solid #dbdbdb; border-radius: 4px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); max-height: 250px; overflow-y: auto; } .autocomplete-item { padding: 0.5rem 0.75rem; cursor: pointer; border-bottom: 1px solid #f5f5f5; display: flex; align-items: center; gap: 0.5rem; } .autocomplete-item:last-child { border-bottom: none; } .autocomplete-item:hover, .autocomplete-item.is-active { background-color: #f0f0f0; } .autocomplete-item .user-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; } .autocomplete-item .user-info { flex: 1; } .autocomplete-item .user-username { font-weight: 600; color: #363636; } .autocomplete-item .user-details { font-size: 0.8rem; color: #7a7a7a; } .autocomplete-empty { padding: 0.75rem; color: #7a7a7a; text-align: center; font-style: italic; } /* User's order highlighting in order book and trades */ .user-order-highlight { background-color: color-mix(in srgb, var(--theme-warning) 25%, transparent) !important; border-left: 3px solid var(--theme-warning) !important; font-weight: 600; } .user-order-highlight td:first-child::before { content: "★ "; color: var(--theme-warning); } /* Dark mode variant for order book */ .has-background-light .user-order-highlight { background-color: rgba(255, 221, 87, 0.25) !important; } /* Flash highlight for updated data */ @keyframes flashHighlight { 0% { background-color: rgba(0, 209, 178, 0.5); } 100% { background-color: transparent; } } @keyframes flashHighlightRow { 0% { background-color: rgba(0, 209, 178, 0.4) !important; } 100% { background-color: inherit; } } .flash-update { animation: flashHighlight 1s ease-out; } .flash-update-row { animation: flashHighlightRow 1s ease-out; } /* Price increase flash (green) */ @keyframes flashPriceUp { 0% { background-color: rgba(35, 209, 96, 0.6); color: #fff; } 100% { background-color: transparent; } } /* Price decrease flash (red) */ @keyframes flashPriceDown { 0% { background-color: rgba(255, 56, 96, 0.6); color: #fff; } 100% { background-color: transparent; } } .flash-price-up { animation: flashPriceUp 1s ease-out; } .flash-price-down { animation: flashPriceDown 1s ease-out; } /* New row flash (for trades) */ @keyframes flashNewRow { 0% { background-color: rgba(50, 115, 220, 0.5) !important; } 50% { background-color: rgba(50, 115, 220, 0.3) !important; } 100% { background-color: inherit; } } .flash-new-row { animation: flashNewRow 1.5s ease-out; } /* Exchange Log clickable rows */ .exchange-log-row { cursor: pointer; transition: background-color 0.15s ease; } .exchange-log-row:hover { background-color: var(--theme-surface-light) !important; } .exchange-log-row:hover td { color: var(--theme-primary) !important; } /* Price Ticker */ .price-ticker { background-color: var(--darker-bg); border-bottom: 1px solid rgba(255, 255, 255, 0.1); overflow: hidden; white-space: nowrap; height: 32px; line-height: 32px; } .price-ticker.is-hidden { display: none !important; } .ticker-wrapper { width: 100%; overflow: hidden; position: relative; display: flex; align-items: center; } .ticker-content { display: inline-flex; animation: tickerScroll 60s linear infinite; padding-left: 20px; flex-grow: 1; } .ticker-content:hover { animation-play-state: paused; } @keyframes tickerScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .ticker-item { display: inline-flex; align-items: center; padding: 0 20px; font-size: 0.85rem; color: #fff; cursor: pointer; border-radius: 4px; transition: background-color 0.2s ease; } .ticker-item:hover { background-color: rgba(255, 255, 255, 0.1); } .ticker-item .ticker-pair { font-weight: 600; color: #00d1b2; margin-right: 8px; } .ticker-item .ticker-price { font-family: monospace; padding: 2px 6px; border-radius: 3px; transition: background-color 0.3s ease, color 0.3s ease; } .ticker-item .ticker-change { margin-left: 8px; font-size: 0.75rem; padding: 2px 6px; border-radius: 3px; } .ticker-item .ticker-change.is-up { background-color: color-mix(in srgb, var(--theme-primary) 20%, transparent); color: var(--theme-primary-light); } .ticker-item .ticker-change.is-down { background-color: color-mix(in srgb, var(--theme-danger) 20%, transparent); color: #ff8a9a; } .ticker-item .ticker-change.is-neutral { background-color: rgba(255, 255, 255, 0.1); color: var(--theme-text-muted); } /* Ticker price flash animations */ @keyframes tickerFlashUp { 0% { background-color: rgba(35, 209, 96, 0.6); color: #fff; } 100% { background-color: transparent; color: inherit; } } @keyframes tickerFlashDown { 0% { background-color: rgba(255, 56, 96, 0.6); color: #fff; } 100% { background-color: transparent; color: inherit; } } .ticker-flash-up { animation: tickerFlashUp 1s ease-out; } .ticker-flash-down { animation: tickerFlashDown 1s ease-out; } /* Clickable table rows */ tr.is-clickable:hover { background-color: rgba(50, 115, 220, 0.1) !important; } /* ==================== Theme Picker Styles ==================== */ .theme-preset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .theme-preset-card { border: 2px solid var(--theme-border); border-radius: 8px; padding: 0.75rem; cursor: pointer; transition: all 0.2s ease; background: var(--theme-surface-dark); } .theme-preset-card:hover { border-color: var(--theme-primary); transform: translateY(-2px); } .theme-preset-card.is-active { border-color: var(--theme-primary); box-shadow: 0 0 10px rgba(0, 209, 178, 0.3); } .theme-preset-swatch { display: flex; height: 40px; border-radius: 4px; overflow: hidden; margin-bottom: 0.5rem; } .theme-preset-swatch > div { flex: 1; } .theme-preset-name { font-size: 0.85rem; font-weight: 600; text-align: center; color: var(--theme-text-primary); } .theme-color-picker-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; } .theme-color-picker-row label { min-width: 140px; font-size: 0.9rem; } .theme-color-picker-row input[type="color"] { width: 50px; height: 35px; border: 2px solid var(--theme-border); border-radius: 4px; padding: 2px; cursor: pointer; background: var(--theme-surface-dark); } .theme-color-picker-row input[type="text"] { width: 100px; font-family: monospace; } .theme-preview-box { padding: 1rem; border-radius: 8px; margin-top: 1rem; } .theme-preview-box .preview-title { font-weight: 600; margin-bottom: 0.5rem; } .theme-preview-box .preview-buttons { display: flex; gap: 0.5rem; flex-wrap: wrap; } /* Custom theme color sections */ .theme-color-section { margin-bottom: 1.5rem; padding: 1rem; border-radius: 8px; background: var(--theme-surface-dark); } .theme-color-section h5 { margin-bottom: 1rem; color: var(--theme-text-primary); border-bottom: 1px solid var(--theme-border); padding-bottom: 0.5rem; } /* ==================== Streams UI ==================== */ /* Stream list styling */ .stream-list .panel-block { cursor: pointer; transition: background-color 0.2s; } .stream-list .panel-block:hover { background-color: var(--theme-surface-light); } .stream-list .panel-block.is-active { background-color: var(--theme-primary); color: #fff; } .stream-list .panel-block.is-active .has-text-grey { color: rgba(255, 255, 255, 0.8) !important; } .stream-list .stream-item-info { display: flex; flex-direction: column; flex: 1; overflow: hidden; } .stream-list .stream-item-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .stream-list .stream-item-meta { font-size: 0.75rem; opacity: 0.7; } /* Stream messages area */ .stream-messages { background-color: var(--theme-surface-dark); font-family: inherit; } .stream-message { padding: 0.5rem 0.75rem; margin-bottom: 0.5rem; border-radius: 8px; background-color: var(--theme-surface); animation: slideIn 0.3s ease-out; } @keyframes slideIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .stream-message .message-header-row { display: flex; justify-content: space-between; margin-bottom: 0.25rem; } .stream-message .message-author { font-weight: 600; color: var(--theme-primary); } .stream-message .message-time { font-size: 0.75rem; color: var(--theme-text-muted); } .stream-message .message-content { word-wrap: break-word; } .stream-message.is-own { background-color: var(--theme-primary); color: #fff; margin-left: 20%; } .stream-message.is-own .message-author { color: rgba(255, 255, 255, 0.9); } .stream-message.is-own .message-time { color: rgba(255, 255, 255, 0.7); } .stream-message.is-system { background-color: transparent; border: 1px dashed var(--theme-border); font-style: italic; text-align: center; color: var(--theme-text-muted); } /* Stream visibility badges */ .stream-visibility-private { background-color: var(--theme-danger); color: #fff; } .stream-visibility-group { background-color: var(--theme-warning); color: #1d1d2e; } .stream-visibility-public { background-color: var(--theme-primary); color: #fff; } .stream-visibility-anonymous { background-color: var(--theme-surface-light); color: var(--theme-text-secondary); } /* Stream invitation item */ .stream-invitation-item { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--theme-border); } .stream-invitation-item:last-child { border-bottom: none; } .stream-invitation-buttons { display: flex; gap: 0.5rem; margin-top: 0.5rem; } /* Subscriber list */ .subscriber-item { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem; border-bottom: 1px solid var(--theme-border); } .subscriber-item:last-child { border-bottom: none; } .subscriber-info { display: flex; align-items: center; gap: 0.75rem; } .subscriber-permissions { display: flex; gap: 0.25rem; } .subscriber-permissions .tag { font-size: 0.65rem; } /* ==================== Notification Badge ==================== */ .notification-badge { position: absolute; top: -5px; right: -8px; background-color: var(--theme-danger); color: white; border-radius: 50%; min-width: 18px; height: 18px; font-size: 0.65rem; font-weight: bold; display: flex; align-items: center; justify-content: center; padding: 0 4px; box-shadow: 0 0 4px rgba(0, 0, 0, 0.3); animation: notification-pulse 2s infinite; } @keyframes notification-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } #notification-icon { position: relative; } #notification-icon.has-notifications .fa-bell { color: var(--theme-primary); animation: bell-ring 0.5s ease-in-out; } @keyframes bell-ring { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(15deg); } 50% { transform: rotate(-15deg); } 75% { transform: rotate(10deg); } } /* Notification list items */ .notification-item { padding: 0.75rem; border-radius: 6px; margin-bottom: 0.5rem; background-color: var(--theme-surface); border-left: 3px solid var(--theme-primary); transition: background-color 0.2s; } .notification-item.is-clickable { cursor: pointer; } .notification-item:hover { background-color: var(--theme-surface-light); } .notification-item.is-unviewed { background-color: var(--theme-surface-light); border-left-color: var(--theme-info); } .notification-item .notification-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.25rem; } .notification-item .notification-type { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; color: var(--theme-text-muted); } .notification-item .notification-time { font-size: 0.7rem; color: var(--theme-text-muted); } .notification-item .notification-message { font-size: 0.9rem; color: var(--theme-text-primary); } .notification-item .notification-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; } /* ==================== Social Feed Styles ==================== */ /* Post Composer */ .post-composer { border: 1px solid var(--theme-border); transition: border-color 0.2s ease; } .post-composer:focus-within { border-color: var(--theme-primary); } .post-composer .textarea { background-color: var(--theme-input-bg); border-color: var(--theme-input-border); color: var(--theme-input-text); resize: none; transition: all 0.2s ease; } .post-composer .textarea:focus { border-color: var(--theme-primary); box-shadow: 0 0 0 0.125em rgba(var(--theme-primary), 0.25); } .post-composer .file-input { display: none; } .attachment-preview { padding: 0.5rem; background-color: var(--theme-surface-dark); border-radius: 4px; } /* New Posts Button */ .new-posts-button { position: sticky; top: 60px; z-index: 50; animation: slideDown 0.3s ease-out; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } @keyframes slideDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } /* Feed action bar (create post + feed selector icon buttons) */ .feed-action-bar .buttons.has-addons .button.is-active { background-color: var(--primary-color); border-color: var(--primary-color); color: #fff; z-index: 2; } .feed-action-bar .buttons.has-addons .button.is-active:hover { filter: brightness(1.05); } /* Post Card */ .post-card { background-color: var(--theme-surface); border: 1px solid var(--theme-border); border-radius: 8px; padding: 1rem; margin-bottom: 1rem; transition: border-color 0.2s ease; } .post-card:hover { border-color: var(--theme-border-light); } .post-card .post-header { display: flex; align-items: flex-start; margin-bottom: 0.75rem; } .post-card .post-avatar { width: 48px; height: 48px; border-radius: 50%; margin-right: 0.75rem; flex-shrink: 0; object-fit: cover; } .post-card .post-author-info { flex-grow: 1; min-width: 0; } .post-card .post-author-name { font-weight: 600; color: var(--theme-text-primary); cursor: pointer; transition: color 0.2s ease; } .post-card .post-author-name:hover { color: var(--theme-primary); } .post-card .post-author-username { font-size: 0.875rem; color: var(--theme-text-muted); } .post-card .post-time { font-size: 0.75rem; color: var(--theme-text-muted); } .post-card .post-content { color: var(--theme-text-primary); line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; margin-bottom: 0.75rem; } .post-card .post-content a { color: var(--theme-primary); } .post-card .post-content a:hover { text-decoration: underline; } .post-card .post-content .hashtag { color: var(--theme-primary); cursor: pointer; } .post-card .post-content .hashtag:hover { text-decoration: underline; } .post-card .post-content .mention { color: var(--theme-secondary); cursor: pointer; } .post-card .post-content .mention:hover { text-decoration: underline; } /* Custom emojis (Slack/Discord-style :shortcode: rendering) */ .custom-emoji { height: 1.4em; width: auto; vertical-align: -0.25em; display: inline-block; object-fit: contain; } span.custom-emoji { height: auto; line-height: 1; } /* Standard (unicode) emojis rendered as native glyphs */ .emoji { font-style: normal; font-size: 1.15em; line-height: 1; vertical-align: -0.05em; } .custom-emoji-preview img { max-height: 32px; } /* Post Attachments */ .post-attachments { margin-bottom: 0.75rem; } /* Single attachment - full width */ .post-attachments.single-attachment .post-attachment-media { width: 100%; max-height: 500px; object-fit: cover; border-radius: 8px; display: block; } /* Video container inside single attachment */ .post-attachments.single-attachment .video-container { width: 100%; position: relative; } .post-attachments.single-attachment .video-container .post-video { width: 100%; min-height: 200px; max-height: 70vh; object-fit: cover; /* Fill container, clip if needed */ border-radius: 8px; display: block; background: var(--theme-surface-dark); cursor: pointer; /* Indicate clickable for fullscreen */ } /* Multiple attachments - grid layout */ .post-attachments.multi-attachment { display: grid; gap: 4px; border-radius: 8px; overflow: hidden; } .post-attachments.multi-attachment.grid-2 { grid-template-columns: repeat(2, 1fr); } .post-attachments.multi-attachment.grid-3 { grid-template-columns: repeat(3, 1fr); } .post-attachments.multi-attachment.grid-4 { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); } .post-attachments.multi-attachment .post-attachment-media { width: 100%; height: 150px; object-fit: cover; border-radius: 0; cursor: pointer; } /* Video container inside multi attachment grid */ .post-attachments.multi-attachment .video-container { width: 100%; height: 100%; } .post-attachments.multi-attachment .video-container .post-video { width: 100%; height: 150px; object-fit: cover; border-radius: 0; } /* For 3 attachments - first one spans full width on top */ .post-attachments.multi-attachment.grid-3 .attachment-item:first-child { grid-column: span 3; } .post-attachments.multi-attachment.grid-3 .attachment-item:first-child .post-attachment-media { height: 200px; } /* More than 4 attachments indicator */ .attachment-more-indicator { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; color: white; font-size: 1.5rem; font-weight: bold; cursor: pointer; } .attachment-item { position: relative; overflow: hidden; } .post-attachment-media { max-width: 100%; max-height: 400px; width: auto; height: auto; border-radius: 8px; object-fit: contain; display: block; } .post-attachment-video { max-width: 100%; max-height: 400px; border-radius: 8px; } .post-attachment-audio { width: 100%; max-width: 400px; } .post-attachment-file { display: inline-flex; align-items: center; padding: 0.5rem 1rem; background-color: var(--theme-surface-dark); border-radius: 4px; color: var(--theme-text-primary); text-decoration: none; transition: background-color 0.2s ease; } .post-attachment-file:hover { background-color: var(--theme-surface-light); color: var(--theme-primary); } .post-attachment-file .icon { margin-right: 0.5rem; } /* Deleted Attachment Placeholder */ .deleted-attachment-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--theme-surface-dark); border: 2px dashed var(--theme-border); border-radius: 8px; padding: 2rem 1rem; min-height: 150px; width: 100%; height: 100%; box-sizing: border-box; } .deleted-attachment-placeholder .icon { margin-bottom: 0.5rem; opacity: 0.5; } .deleted-attachment-placeholder p { text-align: center; font-style: italic; } /* Audio Player Styles */ .post-audio-attachments { display: flex; flex-direction: column; gap: 0.75rem; margin: 0.75rem 0; } .audio-player-card { background: var(--theme-surface-dark); border: 1px solid var(--theme-border); border-radius: 12px; padding: 0.75rem 1rem; position: relative; } .audio-player-card audio { display: none; /* Hidden, we use custom controls */ } .audio-player-info { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; } .audio-player-icon { width: 40px; height: 40px; background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-hover)); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 1rem; } .audio-player-details { flex: 1; min-width: 0; } .audio-player-filename { display: block; font-weight: 500; color: var(--theme-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.9rem; } .audio-player-duration { font-size: 0.75rem; color: var(--theme-text-muted); } .audio-player-controls { display: flex; align-items: center; gap: 0.75rem; } .audio-play-btn { width: 36px; height: 36px; border: none; background: var(--theme-primary); color: white; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color 0.2s, transform 0.1s; flex-shrink: 0; } .audio-play-btn:hover { background: var(--theme-primary-hover); transform: scale(1.05); } .audio-play-btn:active { transform: scale(0.95); } .audio-progress-container { flex: 1; height: 6px; background: var(--theme-surface-light); border-radius: 3px; cursor: pointer; position: relative; overflow: hidden; min-width: 100px; } .audio-progress-bar { position: absolute; top: 0; left: 0; height: 100%; background: linear-gradient(90deg, var(--theme-primary), var(--theme-primary-hover)); border-radius: 3px; width: 0%; transition: width 0.1s linear; } .audio-current-time { font-size: 0.75rem; color: var(--theme-text-muted); min-width: 35px; text-align: right; } /* Responsive audio player */ @media screen and (max-width: 480px) { .audio-player-card { padding: 0.5rem 0.75rem; } .audio-player-icon { width: 32px; height: 32px; font-size: 0.875rem; } .audio-play-btn { width: 32px; height: 32px; } } /* Video Embeds (YouTube, Vimeo, etc.) */ .post-video-embeds { display: flex; flex-direction: column; gap: 0.75rem; margin: 0.75rem 0; } .video-embed-container { position: relative; border-radius: 12px; overflow: hidden; background-color: var(--theme-surface-dark); } .video-embed-wrapper { position: relative; width: 100%; padding-bottom: 56.25%; /* 16:9 aspect ratio */ height: 0; overflow: hidden; } .video-embed-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; border-radius: 12px; } /* TikTok has different aspect ratio */ .video-embed-container[data-provider="tiktok"] .video-embed-wrapper { padding-bottom: 177%; /* 9:16 portrait aspect ratio */ max-width: 325px; } /* Embedded post video embeds (smaller) */ .embedded-post-video-embeds { margin-top: 0.5rem; } .embedded-post-video-embeds .video-embed-wrapper { max-height: 300px; padding-bottom: 56.25%; } /* Link Previews */ .post-link-previews { display: flex; flex-direction: column; gap: 0.75rem; margin: 0.75rem 0; } .link-preview-card { display: flex; border: 1px solid var(--theme-border); border-radius: 12px; overflow: hidden; background-color: var(--theme-surface-dark); text-decoration: none; color: inherit; transition: background-color 0.2s ease, border-color 0.2s ease; } .link-preview-card:hover { background-color: var(--theme-surface-light); border-color: var(--theme-primary); } .link-preview-image { flex-shrink: 0; width: 120px; min-height: 80px; overflow: hidden; background-color: var(--theme-surface); } .link-preview-image img { width: 100%; height: 100%; object-fit: cover; } .link-preview-content { flex: 1; padding: 0.75rem; min-width: 0; display: flex; flex-direction: column; justify-content: center; } .link-preview-site { font-size: 0.75rem; color: var(--theme-text-muted); text-transform: lowercase; margin-bottom: 0.25rem; } .link-preview-title { font-size: 0.9rem; font-weight: 600; color: var(--theme-text-primary); line-height: 1.3; margin-bottom: 0.25rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .link-preview-description { font-size: 0.8rem; color: var(--theme-text-muted); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } /* Responsive link previews */ @media screen and (max-width: 480px) { .link-preview-card { flex-direction: column; } .link-preview-image { width: 100%; height: 150px; } } /* Post Actions */ .post-actions { display: flex; align-items: center; gap: 1rem; border-top: 1px solid var(--theme-border); padding-top: 0.75rem; } .post-action { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--theme-text-muted); cursor: pointer; transition: color 0.2s ease; font-size: 0.875rem; padding: 0.25rem 0.5rem; border-radius: 4px; } .post-action:hover { color: var(--theme-primary); background-color: var(--theme-surface-light); } .post-action.is-active { color: var(--theme-danger); } .post-action.is-active:hover { color: var(--theme-danger); } /* Pin action styling */ .post-action.pin-action.is-active { color: var(--theme-primary); } .post-action.pin-action:hover { color: var(--theme-primary); } .post-action .icon { font-size: 1rem; } .post-action .count { font-size: 0.875rem; } /* Post truncation styling */ .post-content-truncated, .post-content-full { margin-bottom: 0.75rem; line-height: 1.5; word-break: break-word; } .post-expand-link { color: var(--theme-primary); cursor: pointer; font-weight: 500; margin-left: 0.25rem; } .post-expand-link:hover { text-decoration: underline; color: var(--theme-primary-dark); } /* Reply styling - only indent in feed, not on post screen */ #feed-posts .post-card.is-reply { margin-left: 2rem; border-left: 2px solid var(--theme-primary); } /* Post screen replies - no indentation, full width */ #post-screen-replies .post-card.is-reply { margin-left: 0; border-left: none; } /* Feed tabs styling */ .tabs.is-boxed { background-color: var(--theme-surface); border-radius: 8px 8px 0 0; padding: 0.5rem 0.5rem 0; margin-bottom: 0 !important; } .tabs.is-boxed li.is-active a { background-color: var(--theme-surface-light); border-color: var(--theme-border); border-bottom-color: transparent; color: var(--theme-primary); } .tabs.is-boxed a { border-color: var(--theme-border); color: var(--theme-text-secondary); background-color: transparent; } .tabs.is-boxed a:hover { background-color: var(--theme-surface-dark); color: var(--theme-text-primary); } /* Feed container styling */ #feed-container { background-color: transparent; border-radius: 0 0 8px 8px; padding: 1rem; border: 0; border-top: none; overflow: visible; /* No scrollbars - let page scroll */ max-height: none; /* No height restriction */ } /* Profile screen posts/replies content: flat, transparent (no box) */ #profile-screen-content-posts { background-color: transparent; border: 0; box-shadow: none; } /* Profile screen tabs bar: transparent background */ #profile-screen-tabs-container .tabs.is-boxed { background-color: transparent; } /* Hashtag feed container */ #hashtag-feed-container { background-color: var(--theme-surface); border-radius: 8px; padding: 1rem; border: 1px solid var(--theme-border); overflow: visible; /* No scrollbars - let page scroll */ max-height: none; /* No height restriction */ } /* Ensure post lists don't create scrollbars */ #feed-posts, #hashtag-feed-posts, #profile-posts-feed, #profile-replies-feed, #post-screen-content, #post-screen-replies { overflow-x: hidden; overflow-y: visible; } /* Post screen action bar (permalink, embed) */ .post-screen-actions { padding: 0.75rem; background: var(--theme-surface-dark); border-radius: 8px; margin-top: 0.5rem; } .post-screen-actions .level-left span { word-break: break-all; } /* Tab content boxes should not create scrollbars */ #profile-screen-content-posts, #profile-screen-content-replies, .tabs.is-boxed + .box { overflow-x: hidden; overflow-y: visible; } /* Image lightbox effect */ .post-attachment-media.is-clickable { cursor: pointer; transition: transform 0.2s ease; } .post-attachment-media.is-clickable:hover { transform: scale(1.01); } /* Video container with inline playback */ .video-container { position: relative; width: 100%; border-radius: 12px; overflow: hidden; } .video-container .post-video { width: 100%; min-height: 150px; max-height: 400px; background: var(--theme-surface-dark); border-radius: 12px; } .video-fullscreen-btn { position: absolute; top: 0.5rem; right: 0.5rem; background: rgba(0, 0, 0, 0.6); color: white; border: none; border-radius: 4px; padding: 0.4rem 0.6rem; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; z-index: 10; opacity: 0; } .video-container:hover .video-fullscreen-btn { opacity: 1; } .video-fullscreen-btn:hover { background: rgba(0, 0, 0, 0.8); transform: scale(1.1); } /* Video play overlay - shown when controls are hidden */ .video-play-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 4rem; color: rgba(255, 255, 255, 0.85); cursor: pointer; transition: color 0.2s ease, transform 0.2s ease; z-index: 5; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); pointer-events: auto; } .video-play-overlay:hover { color: white; transform: translate(-50%, -50%) scale(1.1); } .video-container:hover .video-play-overlay { color: white; } /* Lightbox overlay */ .image-lightbox-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.95); display: flex; align-items: center; justify-content: center; z-index: 1000; } .lightbox-container { position: relative; max-width: 95vw; max-height: 95vh; display: flex; align-items: center; justify-content: center; } .lightbox-container img, .lightbox-container video { max-width: 95vw; max-height: 90vh; object-fit: contain; } .lightbox-close { position: absolute; top: 1rem; right: 1rem; background: rgba(0, 0, 0, 0.5); color: white; border: none; border-radius: 50%; width: 40px; height: 40px; font-size: 1.5rem; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 1001; } .lightbox-close:hover { background: rgba(255, 255, 255, 0.2); } .lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, 0.5); color: white; border: none; width: 50px; height: 50px; font-size: 1.5rem; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 50%; z-index: 1001; } .lightbox-nav:hover { background: rgba(255, 255, 255, 0.2); } .lightbox-nav.prev { left: 1rem; } .lightbox-nav.next { right: 1rem; } .lightbox-counter { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); color: white; font-size: 0.9rem; background: rgba(0, 0, 0, 0.5); padding: 0.5rem 1rem; border-radius: 4px; } /* Visibility badge */ .visibility-badge { display: inline-flex; align-items: center; font-size: 0.7rem; padding: 0.1rem 0.4rem; border-radius: 3px; margin-left: 0.5rem; background-color: var(--theme-surface-light); color: var(--theme-text-muted); } /* Repost styling */ .repost-info { display: flex; align-items: center; font-size: 0.8rem; color: var(--theme-text-muted); margin-bottom: 0.5rem; padding-bottom: 0.5rem; border-bottom: 1px dashed var(--theme-border); } .repost-info .icon { margin-right: 0.25rem; color: var(--theme-success); } /* Reply thread indicator */ .reply-indicator { display: flex; align-items: center; font-size: 0.8rem; color: var(--theme-text-muted); margin-bottom: 0.5rem; } .reply-indicator .icon { margin-right: 0.25rem; } .reply-indicator.is-clickable { cursor: pointer; transition: color 0.15s ease; } .reply-indicator.is-clickable:hover, .reply-indicator.is-clickable:focus { color: var(--theme-link, #3273dc); text-decoration: underline; outline: none; } /* Post dropdown menu */ .post-menu { position: relative; } .post-menu-trigger { color: var(--theme-text-muted); cursor: pointer; padding: 0.25rem; transition: color 0.2s ease; } .post-menu-trigger:hover { color: var(--theme-text-primary); } .post-menu-dropdown { position: absolute; right: 0; top: 100%; background-color: var(--theme-surface); border: 1px solid var(--theme-border); border-radius: 4px; box-shadow: 0 4px 12px var(--theme-shadow); min-width: 150px; z-index: 100; display: none; } .post-menu-dropdown.is-active { display: block; } .post-menu-item { display: block; padding: 0.5rem 1rem; color: var(--theme-text-primary); cursor: pointer; transition: background-color 0.2s ease; } .post-menu-item:hover { background-color: var(--theme-surface-light); } .post-menu-item.is-danger { color: var(--theme-danger); } /* Empty feed state */ #feed-empty { padding: 3rem 1rem; } /* Load more button */ #feed-load-more .button { color: var(--theme-text-secondary); border-color: var(--theme-border); } #feed-load-more .button:hover { color: var(--theme-primary); border-color: var(--theme-primary); } /* ==================== Registry Browser ==================== */ .registry-tree { font-family: 'Consolas', 'Monaco', monospace; font-size: 0.9rem; } .registry-tree-node { user-select: none; } .registry-tree-item { display: flex; align-items: center; padding: 0.25rem 0.5rem; cursor: pointer; border-radius: 4px; transition: background-color 0.15s ease; margin-bottom: 2px; } .registry-tree-item:hover { background-color: var(--theme-surface); } .registry-tree-item.is-selected { background-color: var(--theme-primary); color: white; } .registry-tree-item.is-selected .registry-tree-icon { color: white; } .registry-tree-toggle { width: 1.25rem; text-align: center; flex-shrink: 0; color: var(--theme-text-muted); } .registry-tree-icon { width: 1.25rem; text-align: center; flex-shrink: 0; margin-right: 0.5rem; color: var(--theme-primary); } .registry-tree-label { flex-grow: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .registry-tree-children { margin-left: 1.5rem; border-left: 1px dashed var(--theme-border); padding-left: 0.5rem; } .registry-tree-loading { padding: 0.5rem 1rem; color: var(--theme-text-muted); font-style: italic; } .registry-value-display { background-color: var(--theme-surface-dark); color: var(--theme-text-primary); padding: 1rem; border-radius: 4px; overflow-x: auto; white-space: pre-wrap; word-break: break-word; font-family: 'Consolas', 'Monaco', monospace; font-size: 0.85rem; max-height: 200px; overflow-y: auto; } .registry-children-list { display: flex; flex-wrap: wrap; gap: 0.5rem; } .registry-child-tag { display: inline-flex; align-items: center; padding: 0.25rem 0.75rem; background-color: var(--theme-surface-dark); border-radius: 4px; cursor: pointer; transition: background-color 0.15s ease; font-size: 0.85rem; } .registry-child-tag:hover { background-color: var(--theme-primary); color: white; } .registry-child-tag .icon { margin-right: 0.25rem; } .registry-search-result { display: flex; align-items: center; padding: 0.5rem; border-bottom: 1px solid var(--theme-border); cursor: pointer; transition: background-color 0.15s ease; } .registry-search-result:hover { background-color: var(--theme-surface); } .registry-search-result:last-child { border-bottom: none; } .registry-search-result-path { font-family: 'Consolas', 'Monaco', monospace; font-size: 0.85rem; color: var(--theme-text-primary); } /* ==================== Repost Header Styling ==================== */ .repost-header { display: flex; align-items: center; font-size: 0.8rem; color: var(--theme-text-primary); margin-bottom: 0.5rem; padding-bottom: 0.5rem; cursor: pointer; } .repost-header span { color: inherit; } .repost-header:hover { color: var(--theme-primary); } .repost-header:hover span { color: inherit; } .repost-header .icon { margin-right: 0.35rem; color: var(--theme-success); } .repost-header strong { font-weight: 600; color: inherit; } /* ==================== Embedded Post Styling (Quote Reposts) ==================== */ .embedded-post { margin-top: 0.75rem; padding: 0.75rem; border: 1px solid var(--theme-border); border-radius: 12px; background-color: var(--theme-surface-dark); cursor: pointer; transition: border-color 0.15s ease; } .embedded-post:hover { border-color: var(--theme-text-muted); } .embedded-post-header { display: flex; align-items: center; gap: 0.35rem; margin-bottom: 0.5rem; font-size: 0.85rem; } .embedded-post-avatar { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; } .embedded-post-author { font-weight: 600; color: var(--theme-text-primary); } .embedded-post-username { color: var(--theme-text-muted); } .embedded-post-time { color: var(--theme-text-muted); } .embedded-post-content { font-size: 0.9rem; line-height: 1.4; color: var(--theme-text-primary); } /* Hashtags/mentions inside embedded (quoted/reposted) posts. The feed renders these in `.embedded-post-content`, not `.post-content`, so the `.post-card .post-content` rules above don't apply. Without these the spans are clickable but not colored — mirror the styling here so mentions/hashtags look the same as on the standalone post page. */ .embedded-post-content .hashtag { color: var(--theme-primary); cursor: pointer; } .embedded-post-content .hashtag:hover { text-decoration: underline; } .embedded-post-content .mention { color: var(--theme-secondary); cursor: pointer; } .embedded-post-content .mention:hover { text-decoration: underline; } .embedded-post-attachments { margin-top: 0.5rem; } .embedded-post-attachments .post-attachments { max-height: 200px; overflow: hidden; border-radius: 8px; } .embedded-post-attachments .post-attachment-media { max-height: 200px; object-fit: cover; } /* ==================== Media Grid ==================== */ .media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; } .media-grid-item { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 8px; background: var(--theme-surface-dark); cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; } .media-grid-item:hover { transform: scale(1.02); box-shadow: 0 4px 12px var(--theme-shadow); } .media-grid-item img, .media-grid-item video { width: 100%; height: 100%; object-fit: cover; } .media-grid-item .media-type-badge { position: absolute; top: 8px; left: 8px; background: rgba(0, 0, 0, 0.6); color: white; padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; } .media-grid-item .media-attached-badge { position: absolute; bottom: 8px; right: 8px; background: var(--theme-primary); color: white; padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; } .media-grid-item .media-ownership-badge { position: absolute; bottom: 8px; left: 8px; font-size: 14px; line-height: 1; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); z-index: 1; } .media-grid-item .media-audio-placeholder, .media-grid-item .media-file-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--theme-surface); color: var(--theme-text-muted); } /* Media Fullscreen Overlay */ .media-fullscreen-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.9); z-index: 10000; display: flex; align-items: center; justify-content: center; } .media-fullscreen-content { position: relative; max-width: 90vw; max-height: 90vh; display: flex; flex-direction: column; align-items: center; } .media-fullscreen-content .fullscreen-media { max-width: 90vw; max-height: 80vh; object-fit: contain; border-radius: 8px; } .media-fullscreen-controls { position: absolute; top: 10px; right: 10px; display: flex; gap: 8px; } .media-fullscreen-info { margin-top: 16px; text-align: center; color: white; } /* Media Picker Modal */ .media-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; max-height: 400px; overflow-y: auto; padding: 8px; } .media-picker-item { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 4px; cursor: pointer; border: 2px solid transparent; transition: border-color 0.2s ease; } .media-picker-item:hover { border-color: var(--theme-primary); } .media-picker-item.selected { border-color: var(--theme-primary); box-shadow: 0 0 0 2px var(--theme-primary); } .media-picker-item img, .media-picker-item video { width: 100%; height: 100%; object-fit: cover; } .media-picker-item .checkmark { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; background: var(--theme-primary); border-radius: 50%; display: none; align-items: center; justify-content: center; color: white; font-size: 10px; } .media-picker-item.selected .checkmark { display: flex; } /* Media ownership badges */ .media-ownership-badge { position: absolute; bottom: 4px; left: 4px; font-size: 14px; line-height: 1; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); z-index: 1; } /* Avatar picker specific */ .avatar-picker-preview { width: 128px; height: 128px; border-radius: 50%; overflow: hidden; margin: 0 auto 16px; background: var(--theme-surface); } .avatar-picker-preview img, .avatar-picker-preview video { width: 100%; height: 100%; object-fit: cover; } .avatar-picker-preview video { object-fit: cover; } /* Global Loading Overlay */ .global-loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: none; align-items: center; justify-content: center; z-index: 9999; color: white; } .global-loading-overlay.is-active { display: flex; } /* ==================== Mobile-First Improvements ==================== */ /* Ensure containers don't overflow on mobile */ .container { max-width: 100%; overflow-x: hidden; } /* Post attachments on mobile */ @media screen and (max-width: 768px) { /* Post attachment images fill available width */ .post-attachments .image, .post-attachments figure { max-width: 100%; } .post-attachments img, .post-attachments video { max-width: 100%; height: auto; } /* Reduce avatar size on mobile for more content space */ .post-avatar, .media-left .image.is-48x48 { width: 40px; height: 40px; } .media-left .image.is-48x48 img { width: 40px; height: 40px; } /* Tighter post metadata */ .post-meta { font-size: 0.8rem; } /* Post action buttons */ .post-actions .button { padding: 0.25rem 0.5rem; font-size: 0.85rem; } /* Direct messages container on mobile */ #dm-conversations-container, #dm-messages-container { max-height: 60vh; } /* Columns stack on mobile */ .columns.is-mobile-stacked { display: block; } .columns.is-mobile-stacked > .column { width: 100%; } /* Hide non-essential elements on mobile */ .is-hidden-mobile { display: none !important; } /* Full-width buttons on mobile */ .button.is-fullwidth-mobile { width: 100%; } /* Tabs on mobile */ .tabs ul { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; } .tabs li { flex-shrink: 0; } } /* Touch-friendly sizing */ @media screen and (max-width: 768px) { /* Larger touch targets */ .button:not(.is-small) { min-height: 44px; } .input, .textarea, .select select { min-height: 44px; font-size: 16px; /* Prevents iOS zoom on focus */ } /* Panel items should be easier to tap */ .panel-block { min-height: 48px; } } /* Landscape mobile orientation */ @media screen and (max-width: 768px) and (orientation: landscape) { .menu-grid { grid-template-columns: repeat(min(var(--menu-grid-columns, 4), 4), 1fr); } #dm-conversations-container, #dm-messages-container { max-height: 40vh; } } /* ==================== Profile Page Styles ==================== */ /* Profile header banner (rectangular bar above profile card) */ .profile-header-banner { background-color: var(--theme-surface-light); position: relative; z-index: 1; } /* Profile card container */ .profile-card-container { position: relative; z-index: 2; padding-top: 1rem; } /* Icon-only action button list on profile cards (follow/message/block). Keeps the card compact so it can be reused outside the profile page. */ .profile-card-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .profile-card-actions .button { width: 2.5em; padding-left: 0; padding-right: 0; } /* Make the section have proper padding for the navbar if needed */ #screen-profile { padding-top: 2rem; } /* ==================== Reusable User Card ==================== */ /* Responsive grid of profile cards on the Users directory page. Cells are landscape "business-card" shaped so each card matches the profile page. */ .user-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1.25rem; align-items: start; } /* Neutralise Bulma's .box:not(:last-child) { margin-bottom } so every card in the grid is sized identically regardless of DOM position. */ .user-card-grid > .box { margin-bottom: 0; } /* ===== Media grid (public attachments) ===== */ .media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); grid-auto-rows: 1fr; gap: 6px; } /* Square-ish cells; the media inside is cropped to fill while preserving its own aspect ratio via object-fit: cover. */ .media-grid-item { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 8px; background-color: var(--theme-surface-dark, #1f1f33); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); transition: transform 0.18s ease, box-shadow 0.18s ease; } .media-grid-item:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28); } /* Fill the cell while preserving the media's aspect ratio. */ .media-grid-media { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } .media-grid-video { pointer-events: none; } .media-grid-overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.4rem 0.55rem; font-size: 0.72rem; color: #fff; background: linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity 0.18s ease; pointer-events: none; } .media-grid-item:hover .media-grid-overlay { opacity: 1; } /* First-class, profile-style card shared by the profile page and the Users directory grid. The directory variant (.profile-card-compact) is sized to a landscape business-card aspect ratio so it renders exactly like the profile page card: card background image/video (with dark gradient overlay) when present, rounded avatar, username, badges, stats and status. */ .profile-card-container.profile-card-compact { position: relative; overflow: hidden; padding: 1.1rem 1.25rem; aspect-ratio: 1.85 / 1; display: flex; align-items: center; background-color: var(--theme-surface, #2d2d44); background-size: cover; background-position: center; border-radius: 12px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08); transition: transform 0.18s ease, box-shadow 0.18s ease; border: 1px solid rgba(0, 0, 0, 0.06); } .profile-card-container.profile-card-compact .profile-card-columns { width: 100%; margin: 0; } /* Clickable cards behave like buttons with depth on hover. */ .profile-card-container.is-clickable { cursor: pointer; } .profile-card-container.is-clickable:hover, .profile-card-container.is-clickable:focus-visible { transform: translateY(-6px); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22), 0 4px 10px rgba(0, 0, 0, 0.12); outline: none; } .profile-card-container.is-clickable:active { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18); } /* Secondary (name) line muted by default. */ .profile-card-name { color: var(--theme-text-muted, #a8a8b8); word-break: break-word; } .profile-card-stats { color: var(--theme-text-muted, #a8a8b8); align-items: center; } .profile-card-stats > span { white-space: nowrap; } /* Avatar styling shared by both contexts (image or animated video avatar). */ .profile-card-avatar img, .profile-card-avatar video { object-fit: cover; border: 3px solid var(--theme-surface, #2d2d44); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); } /* When a card background is present, force light text for legibility over the dark gradient overlay (applies to both the profile page and directory). */ .profile-card-container.has-card-bg, .profile-card-container.has-card-bg .title, .profile-card-container.has-card-bg .subtitle, .profile-card-container.has-card-bg .profile-card-name, .profile-card-container.has-card-bg .profile-card-stats, .profile-card-container.has-card-bg .content { color: #fff !important; } .profile-card-container.has-card-bg .has-text-grey { color: rgba(255, 255, 255, 0.85) !important; } .profile-card-container.has-card-bg .profile-card-avatar img, .profile-card-container.has-card-bg .profile-card-avatar video { border-color: rgba(255, 255, 255, 0.85); } /* Admin quick-actions float in the top-right corner of the card. */ .user-card-admin { position: absolute; top: 0.5rem; right: 0.5rem; display: flex; gap: 0.25rem; z-index: 2; } /* ------------------------------------------------------------------ */ /* Animated profile media (looping muted videos as avatars/backgrounds) */ /* ------------------------------------------------------------------ */ .has-bg-media { position: relative; overflow: hidden; isolation: isolate; } .bg-media-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; } .bg-media-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; } /* Pin a background video (and its overlay) to the viewport so it fills the screen in its original aspect ratio without stretching to the full scroll height of a tall page. Mirrors `background-attachment: fixed` used for image backgrounds. */ .bg-media-video.bg-media-video-fixed { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; object-fit: cover; } .bg-media-overlay.bg-media-overlay-fixed { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; } /* Keep real content above the injected video/overlay layers. */ .has-bg-media > *:not(.bg-media-video):not(.bg-media-overlay) { position: relative; z-index: 2; } /* Video avatars fill their figure exactly like the they replace. */ .avatar-media-video { width: 100%; height: 100%; object-fit: cover; display: block; } .avatar-media-video.is-rounded { border-radius: 9999px; } /* Responsive adjustments for profile on mobile */ @media screen and (max-width: 768px) { .profile-header-banner { height: 60px !important; } #screen-profile .column.is-3 figure.is-128x128 { width: 96px; height: 96px; } #screen-profile .column.is-3 figure.is-128x128 img { width: 96px; height: 96px; } } /* Mail admin: flow vertically on mobile so filters/level controls don't get squashed horizontally and tables remain horizontally scrollable. */ @media screen and (max-width: 768px) { #screen-mail-admin .level:not(.is-mobile), #screen-mail-admin .level:not(.is-mobile) .level-left, #screen-mail-admin .level:not(.is-mobile) .level-right { display: block; width: 100%; } #screen-mail-admin .level:not(.is-mobile) .level-item { justify-content: flex-start; margin-bottom: 0.5rem; } #screen-mail-admin .field.is-grouped { flex-wrap: wrap; gap: 0.5rem; } #screen-mail-admin .field.is-grouped > .control { flex: 1 1 100%; } #screen-mail-admin .field.is-grouped > .control .input, #screen-mail-admin .field.is-grouped > .control .select, #screen-mail-admin .field.is-grouped > .control .select select, #screen-mail-admin .field.is-grouped > .control .button { width: 100%; } #screen-mail-admin .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; } #screen-mail-admin .columns.is-multiline.is-mobile > .column { flex: 0 0 50%; max-width: 50%; } #screen-mail-admin .box { padding: 1rem; } } /* ==================== Quill Rich Text Editor ==================== */ /* Container styling */ .quill-editor { background-color: var(--theme-input-bg); border-radius: 4px; border: 1px solid var(--theme-input-border); } .quill-editor .quill-fallback-textarea { background-color: var(--theme-input-bg); color: var(--theme-input-text); border: none; border-radius: 4px; min-height: 100px; resize: vertical; } .quill-editor.quill-editor-compact .quill-fallback-textarea { min-height: 60px; } /* Override Quill Snow theme toolbar for dark theme */ .quill-editor .ql-toolbar.ql-snow { background-color: var(--theme-surface-dark); border: none; border-bottom: 1px solid var(--theme-border); border-radius: 4px 4px 0 0; padding: 6px 8px; /* Allow toolbar buttons to wrap onto multiple rows when the composer is narrow, so color/background pickers and other formatting controls are never clipped off-screen. */ display: flex; flex-wrap: wrap; align-items: center; row-gap: 4px; } .quill-editor .ql-toolbar.ql-snow .ql-formats { display: inline-flex; flex-wrap: wrap; align-items: center; margin-right: 12px; } /* Toolbar button styling */ .quill-editor .ql-toolbar.ql-snow .ql-stroke { stroke: var(--theme-text-secondary); } .quill-editor .ql-toolbar.ql-snow .ql-fill { fill: var(--theme-text-secondary); } .quill-editor .ql-toolbar.ql-snow .ql-picker-label { color: var(--theme-text-secondary); } .quill-editor .ql-toolbar.ql-snow button:hover .ql-stroke, .quill-editor .ql-toolbar.ql-snow .ql-picker-label:hover .ql-stroke { stroke: var(--theme-primary); } .quill-editor .ql-toolbar.ql-snow button:hover .ql-fill, .quill-editor .ql-toolbar.ql-snow .ql-picker-label:hover .ql-fill { fill: var(--theme-primary); } .quill-editor .ql-toolbar.ql-snow button:hover, .quill-editor .ql-toolbar.ql-snow .ql-picker-label:hover { color: var(--theme-primary); } .quill-editor .ql-toolbar.ql-snow button.ql-active .ql-stroke { stroke: var(--theme-primary); } .quill-editor .ql-toolbar.ql-snow button.ql-active .ql-fill { fill: var(--theme-primary); } .quill-editor .ql-toolbar.ql-snow button.ql-active { color: var(--theme-primary); } /* Toolbar dropdown styling */ .quill-editor .ql-toolbar.ql-snow .ql-picker-options { background-color: var(--theme-surface); border: 1px solid var(--theme-border); border-radius: 4px; box-shadow: 0 2px 8px var(--theme-shadow); } .quill-editor .ql-toolbar.ql-snow .ql-picker-item { color: var(--theme-text-secondary); } .quill-editor .ql-toolbar.ql-snow .ql-picker-item:hover { color: var(--theme-primary); } /* Editor content area */ .quill-editor .ql-container.ql-snow { border: none; border-radius: 0 0 4px 4px; font-size: 0.95rem; } .quill-editor .ql-editor { color: var(--theme-text-primary); min-height: 180px; max-height: 480px; overflow-y: auto; padding: 12px 15px; line-height: 1.6; resize: vertical; } .quill-editor .ql-editor.ql-blank::before { color: var(--theme-text-muted); font-style: italic; } /* Compact editor variant (replies, short descriptions) */ .quill-editor.quill-editor-compact .ql-editor { min-height: 120px; max-height: 320px; padding: 8px 12px; } .quill-editor.quill-editor-compact .ql-toolbar.ql-snow { padding: 4px 6px; } .quill-editor.quill-editor-compact .ql-toolbar.ql-snow .ql-formats { margin-right: 8px; } .quill-editor.quill-editor-compact .ql-toolbar.ql-snow button { width: 24px; height: 24px; } /* Fallback textarea (when Quill JS fails to load) — match the roomier editor heights so reply/composer affordances stay usable. */ .quill-editor .quill-fallback-textarea { min-height: 180px; } .quill-editor.quill-editor-compact .quill-fallback-textarea { min-height: 120px; } /* Code block styling */ .quill-editor .ql-editor pre.ql-syntax { background-color: var(--theme-bg-secondary); color: var(--theme-primary-light); border: 1px solid var(--theme-border); border-radius: 4px; padding: 10px; font-family: 'Courier New', Courier, monospace; font-size: 0.9em; } /* Blockquote styling */ .quill-editor .ql-editor blockquote { border-left: 4px solid var(--theme-primary); padding-left: 12px; color: var(--theme-text-secondary); margin: 8px 0; } /* Link styling in editor */ .quill-editor .ql-editor a { color: var(--theme-primary); text-decoration: underline; } /* Quill tooltip (link insertion dialog) */ .ql-snow .ql-tooltip { background-color: var(--theme-surface); border: 1px solid var(--theme-border); box-shadow: 0 2px 8px var(--theme-shadow); color: var(--theme-text-primary); border-radius: 4px; z-index: 100; } .ql-snow .ql-tooltip input[type="text"] { background-color: var(--theme-input-bg); border: 1px solid var(--theme-input-border); color: var(--theme-input-text); border-radius: 4px; padding: 4px 8px; } .ql-snow .ql-tooltip a.ql-action, .ql-snow .ql-tooltip a.ql-remove { color: var(--theme-primary); } /* Focus state */ .quill-editor:focus-within { border-color: var(--theme-primary); box-shadow: 0 0 0 2px rgba(0, 209, 178, 0.15); } /* Rendered rich text in posts/descriptions */ .post-content h1, .post-content h2, .post-content h3 { color: var(--theme-text-primary); margin-bottom: 0.5em; } .post-content h1 { font-size: 1.5em; font-weight: 700; } .post-content h2 { font-size: 1.3em; font-weight: 600; } .post-content h3 { font-size: 1.1em; font-weight: 600; } .post-content blockquote { border-left: 4px solid var(--theme-primary); padding-left: 12px; color: var(--theme-text-secondary); margin: 8px 0; } .post-content pre { background-color: var(--theme-bg-secondary); color: var(--theme-primary-light); border: 1px solid var(--theme-border); border-radius: 4px; padding: 10px; font-family: 'Courier New', Courier, monospace; font-size: 0.9em; overflow-x: auto; } .post-content ul, .post-content ol { padding-left: 1.5em; margin: 0.5em 0; } .post-content a { color: var(--theme-primary); text-decoration: underline; } /* ==================== Mailbox compose recipient autocomplete ==================== */ .mail-recip-control { position: relative; } .mail-recip-suggestions { position: absolute; left: 0; right: 0; top: 100%; z-index: 60; margin: 2px 0 0 0; max-height: 240px; overflow-y: auto; background: var(--theme-bg-secondary, #fff); border: 1px solid var(--theme-border, #dbdbdb); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); } .mail-recip-suggestions[hidden] { display: none !important; } .mail-recip-item { display: flex; align-items: center; padding: 4px 8px; cursor: pointer; border-radius: 3px; font-size: 0.875rem; } .mail-recip-item:hover, .mail-recip-item.is-active { background: rgba(50, 115, 220, 0.12); } .mail-recip-item .mail-recip-email { font-weight: 600; margin-right: 6px; } .mail-recip-item .mail-recip-meta { color: var(--theme-text-muted, #7a7a7a); font-size: 0.75rem; } .mail-recip-item .mail-recip-source { margin-left: auto; font-size: 0.7rem; color: var(--theme-text-muted, #7a7a7a); text-transform: uppercase; } /* Mail compose "Attach from my files" picker */ .mail-attach-files-list { max-height: 50vh; overflow-y: auto; border: 1px solid #ededed; border-radius: 4px; padding: 4px; } .mail-attach-files-row { display: flex; align-items: center; padding: 6px 8px; border-radius: 3px; cursor: pointer; } .mail-attach-files-row:hover { background: rgba(50, 115, 220, 0.08); } .mail-attach-files-row .mail-attach-files-name { font-weight: 500; } /* Reading pane attachment rows with "Save to my files" action */ .mail-reading-attachment-list { list-style: none; margin: 4px 0 0; padding: 0; } .mail-reading-attachment { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 4px 0; } .mail-reading-attachment .mail-reading-attachment-name { font-weight: 600; } .mail-reading-attachment-save { margin-left: auto !important; } /* ==================== Mailbox UI containers ==================== The mail screen uses a 3-column layout (folders, message list, reading pane). Each pane gets a real surface so messages render in a visible container rather than being transparent over the page background. */ .mailbox-layout { background-color: var(--theme-surface-dark); border: 1px solid var(--theme-border); border-radius: 8px; overflow: hidden; } .mailbox-pane { background-color: var(--theme-surface); color: var(--theme-text-primary); } .mailbox-pane-folders, .mailbox-pane-list { border-right: 1px solid var(--theme-border); } #mailbox-reading-pane { background-color: var(--theme-surface); color: var(--theme-text-primary); min-height: 60vh; border-radius: 0; } .mailbox-message-list { background-color: var(--theme-surface); } /* Mail compose attachment drop zone */ .mail-compose-drop { border: 2px dashed var(--theme-border-light); background-color: var(--theme-surface-dark); color: var(--theme-text-secondary); } .mail-compose-drop:hover { border-color: var(--theme-primary); } /* Order book left/right divider */ .orderbook-bids-box { border-right: 1px solid var(--theme-border-light); } /* Mobile: hide the navbar site title and description to save horizontal space so the always-visible mobile items (notifications, avatar, burger) stay on a single row (#348). */ @media screen and (max-width: 768px) { #navbar-site-title, #navbar-site-description { display: none !important; } }