/* * Member video: the introduction link and its modal player, and the Videos * panel. * * Loaded on profiles only. Builds on mpmp-front.css -- cards, buttons, inputs * and tokens come from there. */ /* Introduction ---------------------------------------------------------- */ /* * The introduction costs the profile no layout at all. * * This wrapper holds only the modal (fixed, hidden) and the owner's file * input, progress bar and message (all hidden until an upload runs), so it * collapses to nothing between the header and the tabs. What a member clicks * is `.mpmp-intro-video-link`, a single line in the identity column. * * Two earlier placements are why. Inside the avatar's flex row, a full-width * block took its width out of the member's name. Above the tabs, a 16:9 * player was correct but sat as a slab across the profile of everyone who had * one. An introduction should introduce a profile, not be it. */ .mpmp-intro-video { margin: 0; } .mpmp-intro-video-cta { margin: 0; } .mpmp-intro-video-link { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0; border: 0; background: none; font: inherit; color: var(--mpmp-accent, #7c3aed); cursor: pointer; text-align: left; } .mpmp-intro-video-link:hover .mpmp-intro-video-link-text, .mpmp-intro-video-link:focus-visible .mpmp-intro-video-link-text { text-decoration: underline; } .mpmp-intro-video-link-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.15rem; height: 1.15rem; flex: none; border-radius: 50%; background: var(--mpmp-accent, #7c3aed); color: #fff; font-size: 0.6rem; line-height: 1; } .mpmp-intro-video-link--add .mpmp-intro-video-link-icon { font-size: 0.85rem; } .mpmp-intro-video-link-duration { color: var(--mpmp-muted, #6b7280); font-variant-numeric: tabular-nums; font-size: 0.8125rem; } /* * On the cover-style header the identity column sits on the cover image, so * the link takes the same light treatment the rest of that text does. */ .mpmp-cover-text .mpmp-intro-video-link { color: inherit; } .mpmp-cover-text .mpmp-intro-video-link-duration { color: inherit; opacity: 0.75; } /* The modal ------------------------------------------------------------- */ /* * Moved to by assets/js/mpmp-video.js before it is ever shown. * * It is authored inside the profile markup, which sits inside the ComunityQ * theme's `.cq-main` (position: relative; z-index: 0) and * `.cq-layout-content` (z-index: 1). Both are stacking contexts, so every * z-index inside them is scoped to a parent that ranks 0 against the sticky * site header's 1080 -- no value here, however large, can win from in there. * Escaping to is what makes this token mean anything. */ .mpmp-intro-modal { position: fixed; inset: 0; z-index: var(--mpmp-z-theme-overlay, 12050); display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(15, 23, 42, 0.82); } .mpmp-intro-modal[hidden] { display: none; } body.mpmp-intro-modal-open { overflow: hidden; } .mpmp-intro-modal-close { position: absolute; top: 0.75rem; right: 1rem; border: 0; background: none; color: #fff; font-size: 2.25rem; line-height: 1; cursor: pointer; opacity: 0.85; } .mpmp-intro-modal-close:hover, .mpmp-intro-modal-close:focus-visible { opacity: 1; } .mpmp-intro-modal-stage { width: min(46rem, 100%); max-height: 90vh; border-radius: var(--mpmp-radius, 0.75rem); overflow: hidden; background: #000; } .mpmp-intro-modal-video { display: block; width: 100%; /* * `max-height` rather than a fixed aspect ratio, and `contain` rather than * `cover`: a phone-recorded introduction is usually portrait, and cropping * one to 16:9 cuts the member's head off. */ max-height: calc(90vh - 3rem); object-fit: contain; background: #000; } .mpmp-intro-modal-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; padding: 0.5rem 0.75rem; background: var(--mpmp-surface, #fff); font-size: 0.8125rem; } .mpmp-intro-modal-label { font-weight: 600; } .mpmp-intro-modal-duration { color: var(--mpmp-muted, #6b7280); font-variant-numeric: tabular-nums; margin-right: auto; } .mpmp-intro-modal-owner-actions { display: flex; gap: 0.4rem; margin-left: auto; } .mpmp-intro-video-message, .mpmp-intro-video-progress { margin-top: 0.6rem; } .mpmp-btn-small { padding: 0.2rem 0.65rem; font-size: 0.8125rem; } /* Videos panel ---------------------------------------------------------- */ .mpmp-profile-videos-header { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline; justify-content: space-between; } .mpmp-profile-videos-quota { margin: 0; font-size: 0.8125rem; color: var(--mpmp-muted, #6b7280); font-variant-numeric: tabular-nums; } .mpmp-profile-videos-quota.is-full { color: #b3261e; font-weight: 600; } .mpmp-video-uploader { margin: 0.85rem 0 1.25rem; padding: 0.85rem; border: 1px dashed var(--mpmp-border, #d9dee5); border-radius: var(--mpmp-radius, 0.75rem); color: var(--mpmp-text); transition: border-color 0.2s ease, background 0.2s ease; } /* * Same treatment as the gallery uploader: a translucent tint rather than a * fixed surface colour, so the hover state cannot strand the label on a * panel of the wrong lightness. See the note on .mpmp-upload-zone. */ .mpmp-video-uploader:hover { border-color: var(--mpmp-accent); background: color-mix(in srgb, var(--mpmp-accent) 10%, transparent); color: var(--mpmp-text); } .mpmp-video-uploader-label { display: block; font-weight: 600; margin-bottom: 0.35rem; color: inherit; } .mpmp-video-progress { height: 0.4rem; border-radius: 999px; background: var(--mpmp-muted-bg, #eef1f5); overflow: hidden; margin-top: 0.6rem; } .mpmp-video-progress-bar { height: 100%; width: 0; background: var(--mpmp-primary, #7a2ff2); transition: width 0.2s ease; } .mpmp-video-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; } .mpmp-video-item { border: 1px solid var(--mpmp-border, #d9dee5); border-radius: var(--mpmp-radius, 0.75rem); overflow: hidden; background: var(--mpmp-surface, #fff); } .mpmp-video-el { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #000; } .mpmp-video-item-meta { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; padding: 0.5rem 0.65rem; font-size: 0.8125rem; } .mpmp-video-duration { color: var(--mpmp-muted, #6b7280); font-variant-numeric: tabular-nums; margin-right: auto; } .mpmp-video-badge { border-radius: 999px; padding: 0.1rem 0.5rem; font-size: 0.75rem; font-weight: 600; background: #fdf0d5; color: #7a5200; }