mirror of
https://github.com/PR0M3TH3AN/bitvid.git
synced 2026-10-27 07:52:24 +00:00
562 lines
15 KiB
CSS
562 lines
15 KiB
CSS
@import "./tokens.css";
|
|
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer components {
|
|
.focus-ring {
|
|
@apply outline-none focus-visible:ring-2 focus-visible:ring-info focus-visible:ring-opacity-70 focus-visible:ring-offset-2 focus-visible:ring-offset-surface focus-visible:transition-shadow focus-visible:duration-fast focus-visible:ease-out;
|
|
}
|
|
|
|
.btn {
|
|
@apply focus-ring inline-flex items-center justify-center gap-2 rounded-lg border border-transparent bg-primary px-4 py-2 text-sm font-semibold uppercase tracking-wide text-white shadow-md transition duration-base ease-in-out;
|
|
}
|
|
|
|
.btn:hover {
|
|
@apply bg-info-strong shadow-lg;
|
|
}
|
|
|
|
.btn:focus-visible {
|
|
@apply bg-info-pressed;
|
|
}
|
|
|
|
.btn:disabled {
|
|
@apply pointer-events-none cursor-not-allowed opacity-60 shadow-none;
|
|
}
|
|
|
|
.btn-ghost {
|
|
@apply btn border border-border border-opacity-60 bg-transparent text-white shadow-none;
|
|
}
|
|
|
|
.btn-ghost:hover {
|
|
@apply bg-panel-hover text-text;
|
|
}
|
|
|
|
.btn-ghost:focus-visible {
|
|
@apply bg-panel-hover;
|
|
}
|
|
|
|
.btn-ghost:disabled {
|
|
@apply pointer-events-none opacity-50 shadow-none;
|
|
}
|
|
|
|
.badge {
|
|
@apply inline-flex items-center gap-1 rounded-full bg-panel px-3 py-1 text-xs font-semibold uppercase tracking-wide text-muted-strong;
|
|
}
|
|
|
|
.badge[data-variant="critical"] {
|
|
@apply bg-critical bg-opacity-20 text-critical-strong;
|
|
}
|
|
|
|
.badge[data-variant="info"] {
|
|
@apply bg-info bg-opacity-20 text-info-strong;
|
|
}
|
|
|
|
.badge[data-variant="neutral"] {
|
|
@apply bg-border bg-opacity-40 text-muted-strong;
|
|
}
|
|
|
|
.card {
|
|
@apply focus-ring relative rounded-lg border border-transparent bg-card text-text shadow-md transition duration-base ease-in-out;
|
|
}
|
|
|
|
.card:hover {
|
|
@apply shadow-lg;
|
|
}
|
|
|
|
.card:focus-visible {
|
|
@apply border-info border-opacity-40 shadow-lg;
|
|
}
|
|
|
|
.card[data-state="critical"] {
|
|
@apply border border-critical border-opacity-40 bg-card-critical;
|
|
}
|
|
|
|
.card[data-state="private"] {
|
|
@apply bg-card-private shadow-lg;
|
|
}
|
|
|
|
.card[data-state="disabled"] {
|
|
@apply opacity-60 shadow-none;
|
|
}
|
|
|
|
.form-control {
|
|
@apply focus-ring block w-full rounded-md border border-border-subtle bg-surface-alt px-3 py-2 text-sm text-text shadow-sm transition duration-base ease-in-out placeholder:text-muted;
|
|
}
|
|
|
|
.form-control:hover {
|
|
@apply border-border;
|
|
}
|
|
|
|
.form-control:focus-visible {
|
|
@apply border-info-strong;
|
|
}
|
|
|
|
.form-control:disabled {
|
|
@apply cursor-not-allowed bg-surface text-muted opacity-60;
|
|
}
|
|
|
|
.form-control:invalid {
|
|
@apply border-critical border-opacity-60;
|
|
}
|
|
|
|
.input {
|
|
@apply form-control;
|
|
}
|
|
|
|
.textarea {
|
|
@apply form-control min-h-[8rem] resize-y;
|
|
}
|
|
|
|
.select {
|
|
@apply form-control appearance-none pr-10;
|
|
--select-arrow-color: var(--color-border);
|
|
background-image: linear-gradient(135deg, transparent 50%, var(--select-arrow-color) 50%),
|
|
linear-gradient(45deg, var(--select-arrow-color) 50%, transparent 50%),
|
|
linear-gradient(to right, var(--color-border-subtle), var(--color-border-subtle));
|
|
background-position: right 0.75rem center, right 0.4rem center, right 2.5rem center;
|
|
background-size: 0.6rem 0.6rem, 0.6rem 0.6rem, 1px 60%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.select:hover {
|
|
--select-arrow-color: var(--color-border);
|
|
}
|
|
|
|
.select:focus-visible {
|
|
--select-arrow-color: var(--color-info-strong);
|
|
}
|
|
|
|
.select:disabled {
|
|
--select-arrow-color: var(--color-border-subtle);
|
|
}
|
|
|
|
.select:invalid {
|
|
--select-arrow-color: var(--color-critical);
|
|
}
|
|
|
|
.checkbox {
|
|
@apply focus-ring inline-flex h-5 w-5 cursor-pointer appearance-none items-center justify-center rounded border border-border-subtle bg-surface-alt text-white transition duration-base ease-in-out;
|
|
}
|
|
|
|
.checkbox:hover {
|
|
@apply border-border;
|
|
}
|
|
|
|
.checkbox:disabled {
|
|
@apply cursor-not-allowed border-border-subtle bg-surface text-muted opacity-60;
|
|
}
|
|
|
|
.checkbox::after {
|
|
content: "";
|
|
@apply pointer-events-none h-2 w-3 border-b-2 border-r-2 border-white opacity-0 transition duration-base ease-in-out;
|
|
transform: rotate(45deg) translateY(-0.125rem) scale(0.85);
|
|
}
|
|
|
|
.checkbox:checked,
|
|
.checkbox[aria-checked="true"] {
|
|
@apply border-info-strong bg-info-strong;
|
|
}
|
|
|
|
.checkbox:checked::after,
|
|
.checkbox[aria-checked="true"]::after {
|
|
@apply opacity-100;
|
|
transform: rotate(45deg) translateY(-0.125rem) scale(1);
|
|
}
|
|
|
|
.switch {
|
|
@apply focus-ring relative inline-flex h-6 w-11 cursor-pointer items-center rounded-full border border-border-subtle bg-border-subtle transition-colors duration-base ease-in-out;
|
|
}
|
|
|
|
.switch::before {
|
|
content: "";
|
|
@apply pointer-events-none absolute left-0.5 top-1/2 h-5 w-5 -translate-y-1/2 transform rounded-full bg-surface shadow-md transition duration-base ease-in-out;
|
|
}
|
|
|
|
.switch:disabled {
|
|
@apply cursor-not-allowed border-border-subtle bg-surface text-muted opacity-60;
|
|
}
|
|
|
|
.switch[aria-checked="true"],
|
|
.switch.is-on {
|
|
@apply border-info-strong bg-info-strong;
|
|
}
|
|
|
|
.switch[aria-checked="true"]::before,
|
|
.switch.is-on::before {
|
|
@apply translate-x-5;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.form-control,
|
|
.checkbox,
|
|
.checkbox::after,
|
|
.switch,
|
|
.switch::before {
|
|
transition: none !important;
|
|
}
|
|
}
|
|
|
|
.bv-modal {
|
|
@apply fixed inset-0 z-[var(--z-modal-root)] flex items-center justify-center p-4 sm:p-6;
|
|
}
|
|
|
|
.bv-modal__panel {
|
|
@apply focus-ring relative z-[var(--z-modal-content)] w-full max-w-3xl rounded-xl border border-border border-opacity-40 bg-surface px-6 py-8 text-left text-white shadow-modal transition duration-base ease-out;
|
|
}
|
|
|
|
.bv-modal__panel:focus-visible {
|
|
@apply border-info border-opacity-50;
|
|
}
|
|
|
|
.bv-modal-backdrop {
|
|
@apply absolute inset-0 z-[var(--z-modal-overlay)] bg-overlay bg-opacity-80 backdrop-blur;
|
|
}
|
|
|
|
.grid-stack {
|
|
@apply grid gap-lg;
|
|
}
|
|
|
|
.grid-stack[data-variant="cards"] {
|
|
@apply grid-cols-1 sm:grid-cols-2 xl:grid-cols-3;
|
|
}
|
|
|
|
.grid-stack[data-orientation="vertical"] {
|
|
@apply flex flex-col gap-md;
|
|
}
|
|
|
|
.bv-stack {
|
|
@apply flex flex-col gap-lg;
|
|
}
|
|
|
|
.bv-stack--tight {
|
|
@apply gap-md;
|
|
}
|
|
|
|
.bv-grid-video {
|
|
@apply grid gap-xl py-lg;
|
|
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
|
|
}
|
|
|
|
/* Legacy compatibility shims */
|
|
.video-card {
|
|
@apply card overflow-visible;
|
|
}
|
|
|
|
.video-card.video-card--owner-private {
|
|
@apply bg-card-private;
|
|
}
|
|
|
|
.video-card.video-card--nsfw-owner {
|
|
@apply border border-critical border-opacity-40 bg-black;
|
|
}
|
|
|
|
.video-card.video-card--nsfw-owner:hover {
|
|
@apply border-opacity-60 shadow-lg;
|
|
}
|
|
|
|
.video-card img.video-card__thumbnail--blurred {
|
|
@apply transition duration-base ease-in-out;
|
|
filter: blur(18px);
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.video-card[data-owner-is-viewer="true"][data-url-health-state="offline"][data-stream-health-state="unhealthy"] {
|
|
@apply border border-critical border-opacity-40 bg-card-critical;
|
|
}
|
|
|
|
.video-visibility-toggle {
|
|
@apply inline-flex items-center gap-1 rounded-full border border-border bg-panel px-1 py-1;
|
|
}
|
|
|
|
.video-visibility-toggle__option {
|
|
@apply inline-flex items-center justify-center rounded-full border border-transparent bg-panel px-3 py-2 text-xs font-semibold uppercase text-muted transition duration-base ease-in-out;
|
|
}
|
|
|
|
.video-visibility-toggle__option:not(.is-disabled):hover {
|
|
@apply bg-panel-hover text-text;
|
|
}
|
|
|
|
.video-visibility-toggle__option[data-active="true"] {
|
|
@apply border border-info border-opacity-60 text-text shadow-lg;
|
|
}
|
|
|
|
.video-visibility-toggle__option.is-disabled {
|
|
@apply cursor-not-allowed opacity-45;
|
|
}
|
|
|
|
.modal-container {
|
|
@apply bv-modal;
|
|
}
|
|
|
|
.modal-content {
|
|
@apply bv-modal__panel flex h-full flex-col;
|
|
}
|
|
|
|
.video-modal__container {
|
|
@apply flex h-full min-h-screen w-full flex-1 flex-col;
|
|
}
|
|
|
|
.player-modal__container {
|
|
@apply video-modal__container;
|
|
}
|
|
|
|
.video-modal__panel {
|
|
@apply bv-modal__panel relative flex w-full flex-1 flex-col overflow-visible bg-surface shadow-none;
|
|
}
|
|
|
|
.player-modal__content {
|
|
@apply video-modal__panel;
|
|
}
|
|
|
|
.video-modal__nav {
|
|
@apply sticky top-0 z-[60] border-b border-border border-opacity-40 bg-surface;
|
|
}
|
|
|
|
.modal-nav {
|
|
@apply video-modal__nav;
|
|
}
|
|
|
|
.video-modal__actions {
|
|
@apply ml-auto flex flex-nowrap items-center justify-end gap-2;
|
|
}
|
|
|
|
.modal-actions {
|
|
@apply video-modal__actions;
|
|
}
|
|
|
|
.video-modal__video {
|
|
@apply sticky top-0 z-[51] flex w-full flex-shrink-0 items-center justify-center border-b border-border border-opacity-20 bg-surface;
|
|
}
|
|
|
|
.player-modal__video {
|
|
@apply video-modal__video;
|
|
}
|
|
|
|
.video-modal__media {
|
|
@apply block aspect-video w-full rounded-xl bg-black object-contain shadow-2xl;
|
|
}
|
|
|
|
.player-modal__video video {
|
|
@apply video-modal__media;
|
|
}
|
|
|
|
.video-modal__info {
|
|
@apply flex-none border-t border-border border-opacity-20 bg-surface;
|
|
}
|
|
|
|
.player-modal__info {
|
|
@apply video-modal__info;
|
|
}
|
|
|
|
.profile-pane {
|
|
@apply flex flex-col gap-lg;
|
|
}
|
|
|
|
.profile-pane.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.profile-switcher {
|
|
@apply card flex flex-col gap-lg;
|
|
}
|
|
|
|
.profile-switcher__badge {
|
|
@apply badge self-start;
|
|
}
|
|
|
|
.profile-switcher__header {
|
|
@apply flex flex-col gap-sm sm:flex-row sm:items-center sm:justify-between;
|
|
}
|
|
|
|
.profile-switcher__intro {
|
|
@apply flex flex-col gap-2xs;
|
|
}
|
|
|
|
.profile-switcher__title {
|
|
@apply text-base font-semibold text-text;
|
|
}
|
|
|
|
.profile-switcher__subtitle {
|
|
@apply text-sm text-muted;
|
|
}
|
|
|
|
.profile-switcher__list {
|
|
@apply flex flex-col gap-md;
|
|
}
|
|
|
|
.profile-switcher__helper {
|
|
@apply text-xs text-muted;
|
|
}
|
|
|
|
.profile-card {
|
|
@apply card relative flex cursor-pointer flex-col gap-md p-4 text-text transition duration-base ease-out hover:shadow-lg focus-visible:border-info focus-visible:border-opacity-60 focus-visible:shadow-lg sm:flex-row sm:items-center;
|
|
}
|
|
|
|
.profile-card--active {
|
|
@apply border-info border-opacity-60 shadow-lg;
|
|
}
|
|
|
|
.profile-card__avatar {
|
|
@apply flex h-12 w-12 flex-none items-center justify-center overflow-hidden rounded-full border border-border border-opacity-30 bg-surface;
|
|
}
|
|
|
|
.profile-card__avatar img {
|
|
@apply h-full w-full rounded-full object-cover;
|
|
}
|
|
|
|
.profile-card--active .profile-card__avatar {
|
|
@apply border-info border-opacity-70 ring-2 ring-info ring-opacity-20;
|
|
}
|
|
|
|
.profile-card__meta {
|
|
@apply flex min-w-0 flex-1 flex-col gap-sm;
|
|
}
|
|
|
|
.profile-card__topline {
|
|
@apply flex w-full flex-wrap items-center gap-sm sm:justify-between;
|
|
}
|
|
|
|
.profile-card__label {
|
|
@apply text-xs font-semibold uppercase tracking-wide text-info;
|
|
}
|
|
|
|
.profile-card__name {
|
|
@apply truncate text-sm font-semibold text-text;
|
|
}
|
|
|
|
.profile-card__npub {
|
|
@apply break-all font-mono text-xs text-muted;
|
|
}
|
|
|
|
.profile-card__action,
|
|
.profile-nav-button {
|
|
@apply btn-ghost ml-auto flex-shrink-0 px-3 py-1 text-xs;
|
|
}
|
|
|
|
.profile-switcher__add {
|
|
@apply card hover:bg-info/10 flex cursor-pointer items-center gap-4 border border-dashed border-border border-opacity-40 bg-surface text-left text-muted transition duration-base ease-out hover:border-info hover:border-opacity-60 hover:text-white focus-visible:border-info focus-visible:border-opacity-60;
|
|
}
|
|
|
|
.profile-switcher__addAvatar {
|
|
@apply flex h-12 w-12 flex-none items-center justify-center rounded-full border border-dashed border-current bg-surface;
|
|
}
|
|
|
|
.profile-switcher__addAvatar svg {
|
|
@apply h-5 w-5;
|
|
}
|
|
|
|
.profile-switcher__addCopy {
|
|
@apply flex flex-col gap-1 text-left;
|
|
}
|
|
|
|
.profile-switcher__addTitle {
|
|
@apply text-sm font-semibold text-inherit;
|
|
}
|
|
|
|
.profile-switcher__addHint {
|
|
@apply text-xs text-muted;
|
|
}
|
|
|
|
.watch-history-grid {
|
|
@apply flex w-full flex-col gap-5 py-6 sm:gap-6;
|
|
}
|
|
|
|
.watch-history-grid.watch-history-grid--modal {
|
|
@apply gap-5 py-0 sm:gap-6;
|
|
}
|
|
|
|
.watch-history-card {
|
|
@apply card flex flex-wrap items-stretch gap-5 p-4 transition duration-base ease-out hover:-translate-y-0.5 hover:shadow-lg sm:gap-6 sm:p-5;
|
|
}
|
|
|
|
.watch-history-card--private {
|
|
@apply border-info border-opacity-60;
|
|
}
|
|
|
|
.watch-history-card__primary {
|
|
@apply flex min-w-0 flex-1 flex-wrap items-stretch gap-4 sm:flex-nowrap;
|
|
}
|
|
|
|
.watch-history-card__thumbnail {
|
|
@apply block flex-none text-white no-underline sm:w-56;
|
|
}
|
|
|
|
.watch-history-card__thumbnailInner {
|
|
@apply aspect-video w-full overflow-hidden rounded-lg bg-surface;
|
|
}
|
|
|
|
.watch-history-card__thumbnailInner img {
|
|
@apply h-full w-full object-cover;
|
|
}
|
|
|
|
.watch-history-card__details {
|
|
@apply flex min-w-0 flex-1 flex-col justify-center gap-sm;
|
|
}
|
|
|
|
.watch-history-card__title {
|
|
@apply cursor-pointer text-lg font-semibold leading-snug text-white transition duration-base ease-out;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.watch-history-card__title:hover,
|
|
.watch-history-card__title:focus {
|
|
@apply text-info;
|
|
}
|
|
|
|
.watch-history-card__created {
|
|
@apply text-sm text-muted;
|
|
}
|
|
|
|
.watch-history-card__meta {
|
|
@apply flex min-w-0 flex-col justify-between gap-4 sm:min-w-[14rem] sm:flex-[0_0_16rem];
|
|
}
|
|
|
|
.watch-history-card__watched {
|
|
@apply text-sm text-border-subtle;
|
|
}
|
|
|
|
.watch-history-card__creator {
|
|
@apply flex items-center gap-3;
|
|
}
|
|
|
|
.watch-history-card__creatorAvatar {
|
|
@apply flex h-10 w-10 items-center justify-center rounded-full bg-panel transition duration-base ease-out hover:ring-2 hover:ring-info hover:ring-opacity-50 focus-visible:ring-2 focus-visible:ring-info focus-visible:ring-opacity-50;
|
|
}
|
|
|
|
.watch-history-card__creatorAvatar img {
|
|
@apply h-full w-full rounded-full object-cover;
|
|
}
|
|
|
|
.watch-history-card__creatorName {
|
|
@apply cursor-pointer bg-transparent p-0 text-left text-base font-medium text-muted transition duration-base ease-out hover:text-info focus-visible:text-info;
|
|
}
|
|
|
|
.watch-history-card__actions {
|
|
@apply flex flex-wrap items-center gap-3;
|
|
}
|
|
|
|
.watch-history-card__action {
|
|
@apply inline-flex items-center justify-center gap-2 rounded-full border border-transparent bg-panel px-4 py-2 text-sm font-medium text-muted transition duration-base ease-out hover:border-border hover:bg-surface-alt hover:text-white focus-visible:border-border focus-visible:bg-surface-alt focus-visible:text-white;
|
|
}
|
|
|
|
.watch-history-card__action--primary {
|
|
@apply bg-info-strong text-white hover:bg-info-pressed focus-visible:bg-info-pressed;
|
|
}
|
|
|
|
.watch-history-card__action--danger {
|
|
@apply bg-critical text-white hover:bg-critical-strong focus-visible:bg-critical-strong;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 40rem) {
|
|
.bv-grid-video {
|
|
gap: var(--space-md);
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|