MoviePilot-Frontend/src/styles/themes/transparent.scss

/* stylelint-disable no-duplicate-selectors */
/* stylelint-disable no-descending-specificity */
/* stylelint-disable scss/at-rule-no-unknown */

// 透明主题专用样式
html[data-theme='transparent'] {
  // 定义透明度变量
  --transparent-opacity: 0.3;
  --transparent-opacity-light: 0.2;
  --transparent-opacity-heavy: 0.5;
  --transparent-blur: 10px;
  --transparent-blur-light: 6px;
  --transparent-blur-heavy: 16px;
  --app-grouped-list-background: rgba(var(--v-theme-surface), var(--transparent-opacity-light));
  --app-grouped-list-backdrop-filter: blur(var(--transparent-blur));
  --app-grouped-list-separator-color: rgba(var(--v-theme-on-surface), 0.18);
  --app-grouped-list-header-color: rgba(var(--v-theme-on-surface), 0.64);
  --app-grouped-list-chevron-color: rgba(var(--v-theme-on-surface), 0.5);
  --app-grouped-list-hover-background: rgba(var(--v-theme-primary), 0.08);
  --app-grouped-list-active-background: rgba(var(--v-theme-primary), 0.14);
  --app-grouped-list-icon-opacity: 0.88;

  // 应用、布局、主内容区域
  .v-application,
  .v-layout,
  .v-main,
  .layout-page-content {
    background: transparent;
  }

  // 侧边导航栏
  .layout-vertical-nav {
    backdrop-filter: blur(var(--transparent-blur-heavy));
    background-color: rgba(var(--v-theme-surface), var(--transparent-opacity-light));
    border-inline-end: 1px solid rgba(var(--v-theme-on-surface), 0.05);
  }

  // 列表
  .v-list {
    backdrop-filter: blur(var(--transparent-blur));
    background-color: rgba(var(--v-theme-surface), var(--transparent-opacity));
  }

  // 卡片
  .v-card:not(.no-blur) {
    backdrop-filter: blur(var(--transparent-blur));
    background-color: rgba(var(--v-theme-surface), var(--transparent-opacity));

    .v-list {
      backdrop-filter: none;
      background-color: transparent;
    }
  }

  // 工作流标题栏只叠加半透明状态染色，底层模糊仍由卡片统一承担。
  .workflow-task-card {
    --workflow-card-header-content-rgb: var(--v-theme-on-surface);
    --workflow-card-header-background:
      linear-gradient(145deg, rgba(var(--v-theme-on-surface), 0.12), transparent 36%),
      linear-gradient(
        118deg,
        rgba(var(--workflow-status-rgb), var(--transparent-opacity-heavy)) 0%,
        rgba(var(--workflow-status-rgb), var(--transparent-opacity)) 56%,
        rgba(var(--workflow-status-rgb), var(--transparent-opacity-light)) 100%
      ),
      linear-gradient(
        rgba(var(--v-theme-surface), var(--transparent-opacity-light)),
        rgba(var(--v-theme-surface), var(--transparent-opacity-light))
      );
    --workflow-card-header-shadow: inset 0 1px 0 rgba(var(--v-theme-on-surface), 0.14);
  }

  // 工作流编辑器组件选择栏
  .workflow-sidebar {
    --workflow-sidebar-background: rgba(var(--v-theme-surface), var(--transparent-opacity-heavy));
    --workflow-sidebar-backdrop-filter: blur(var(--transparent-blur-heavy));
    --workflow-sidebar-header-background: transparent;
    --workflow-sidebar-footer-background: transparent;
    --workflow-sidebar-border-color: rgba(var(--v-theme-on-surface), 0.08);
    --workflow-sidebar-card-background: rgba(var(--v-theme-surface), var(--transparent-opacity));
    --workflow-sidebar-card-background-hover: rgba(var(--v-theme-surface), var(--transparent-opacity-heavy));
    --workflow-sidebar-desc-color: rgba(var(--v-theme-on-surface), 0.55);
  }

  // 工作流编辑器流程边设置面板
  .workflow-edge-panel {
    --workflow-edge-panel-background: rgba(var(--v-theme-surface), var(--transparent-opacity-heavy));
    --workflow-edge-panel-backdrop-filter: blur(var(--transparent-blur-heavy));
  }

  // 订阅文件弹窗使用独立的玻璃表面参数，避免组件内通过全局选择器穿透主题。
  .subscribe-files-dialog {
    --sfd-accent-opacity: 0.12;
    --sfd-blur: var(--transparent-blur-heavy);
    --sfd-dialog-opacity: var(--transparent-opacity-heavy);
    --sfd-hero-end-opacity: 0.42;
    --sfd-hero-mid-opacity: 0.2;
    --sfd-hero-shade-opacity: 0.48;
    --sfd-hero-start-opacity: 0.52;
    --sfd-panel-opacity: 0.14;
    --sfd-panel-strong-opacity: var(--transparent-opacity);
    --sfd-code-opacity: 0.14;
  }

  .subscribe-files-progress__item,
  .subscribe-files-stat-card,
  .subscribe-files-tab-group {
    backdrop-filter: blur(var(--transparent-blur-light));
    background: rgba(var(--v-theme-surface), var(--sfd-panel-opacity));
  }

  .subscribe-files-tab-group {
    background: rgba(var(--v-theme-surface), 0.08) !important;
  }

  .subscribe-files-tab-group .v-btn:not(.subscribe-files-tab-group__button--active) {
    background: transparent !important;
  }

  // 设置页彩色卡片保留透明主题的玻璃质感，只叠加极轻的图标主色。
  .app-card-colorful {
    border: 0;
    background:
      linear-gradient(
        135deg,
        rgba(var(--app-card-accent-rgb), var(--app-card-accent-start-opacity, 0.018)),
        rgba(var(--app-card-accent-end-rgb, var(--app-card-accent-rgb)), var(--app-card-accent-end-opacity, 0.01)) 46%,
        rgba(var(--v-theme-surface), 0) 76%
      ),
      rgba(var(--v-theme-surface), var(--transparent-opacity-light));
  }

  // 工具栏
  .v-toolbar {
    backdrop-filter: blur(var(--transparent-blur));
    background-color: rgba(var(--v-theme-surface), var(--transparent-opacity));
  }

  // 表格
  .v-table {
    border-radius: 0;
    background-color: rgba(var(--v-theme-surface), 0);

    .v-table__wrapper > table > thead {
      background-color: rgba(var(--v-theme-surface), var(--transparent-opacity));
    }
  }

  // 页脚
  .v-footer {
    backdrop-filter: blur(var(--transparent-blur));
    background-color: rgba(var(--v-theme-surface), var(--transparent-opacity));
  }

  // Sheet
  .v-sheet {
    backdrop-filter: blur(var(--transparent-blur));
    background-color: rgba(var(--v-theme-surface), var(--transparent-opacity));
  }

  // 页面容器
  .layout-content-wrapper {
    background: transparent;
  }

  // 无内容区域的背景设为透明
  .page-content-container {
    background: transparent;
  }

  // 对话框和菜单蒙层样式
  .v-overlay__scrim {
    background: rgba(var(--v-overlay-scrim-background), var(--v-overlay-scrim-opacity));
  }

  // 折叠面板
  .v-expansion-panel {
    backdrop-filter: blur(var(--transparent-blur));
    background-color: rgba(var(--v-theme-surface), var(--transparent-opacity));
  }

  // 加载占位
  .v-skeleton-loader {
    background-color: rgba(var(--v-theme-surface), var(--transparent-opacity));
  }

  // 输入框和搜索框
  .v-field {
    background-color: rgba(var(--v-theme-surface), 0);
  }

  // 弹出层内容
  .v-overlay__content {
    border-radius: var(--app-surface-radius);
    backdrop-filter: blur(var(--transparent-blur));

    .v-card:not(.bg-primary) {
      backdrop-filter: blur(var(--transparent-blur));
      background-color: rgba(var(--v-theme-surface), var(--transparent-opacity-heavy));
    }

    .v-list {
      backdrop-filter: blur(var(--transparent-blur));
      background-color: rgba(var(--v-theme-surface), var(--transparent-opacity-heavy));
    }

    .v-table__wrapper table thead {
      background-color: rgba(var(--v-theme-surface), var(--transparent-opacity));
    }
  }

  // 主题定制器面板
  .theme-customizer-panel-host {
    backdrop-filter: blur(var(--transparent-blur-heavy));
    background-color: rgba(var(--v-theme-surface), var(--transparent-opacity-heavy)) !important;
    border-inline-start: 1px solid rgba(var(--v-theme-on-surface), 0.08) !important;
  }

  .theme-customizer-panel {
    backdrop-filter: blur(var(--transparent-blur));
    background-color: transparent;
  }

  // 主题定制器的边框/圆角/阴影示例沿用框架预览的透明玻璃底，避免透明主题下出现实色黑块。
  .theme-customizer-border-scene,
  .theme-customizer-radius-scene,
  .theme-customizer-shadow-slider,
  .theme-customizer-shadow-slider__sample {
    background:
      linear-gradient(180deg, rgba(var(--v-theme-on-surface), 0.02), rgba(var(--v-theme-on-surface), 0.05)),
      rgba(var(--v-theme-surface), var(--transparent-opacity-light));
  }

  .theme-customizer-preview-option.is-active .theme-customizer-border-scene,
  .theme-customizer-preview-option.is-active .theme-customizer-radius-scene {
    background: rgba(var(--v-theme-primary), 0.04);
  }

  .theme-customizer-border-scene__card,
  .theme-customizer-border-scene__dialog,
  .theme-customizer-border-scene__menu,
  .theme-customizer-radius-scene__card {
    background: rgba(var(--v-theme-surface), var(--transparent-opacity));
  }

  // 智能助手面板
  .agent-assistant-panel {
    backdrop-filter: blur(var(--transparent-blur-heavy));
    background-color: rgba(var(--v-theme-surface), var(--transparent-opacity-heavy)) !important;
    border-inline-start: 1px solid rgba(var(--v-theme-on-surface), 0.08);
  }

  .agent-assistant-shell {
    --agent-assistant-panel-bg: rgba(var(--v-theme-surface), var(--transparent-opacity-heavy));
    --agent-assistant-panel-blur: var(--transparent-blur);
    --agent-assistant-assistant-bg: rgba(var(--v-theme-surface), var(--transparent-opacity-heavy));
  }

  .agent-assistant-fab {
    background-color: transparent;
  }

  .agent-assistant-fab__bubble {
    backdrop-filter: blur(var(--transparent-blur));
    background-color: rgba(var(--v-theme-surface), var(--transparent-opacity-heavy));
  }

  .Vue-Toastification__toast {
    backdrop-filter: blur(var(--transparent-blur));
    background:
      linear-gradient(
        135deg,
        rgba(var(--mp-toast-accent-rgb), 0.16),
        rgba(var(--mp-toast-accent-rgb), 0.06) 44%,
        rgba(var(--v-theme-surface), var(--transparent-opacity-heavy))
      ),
      rgba(var(--v-theme-surface), var(--transparent-opacity-heavy)) !important;
  }
}

html[data-theme='transparent'].transparent-background-blur-disabled {
  .global-blur-layer,
  .background-image.active {
    backdrop-filter: none;
    filter: none;
    transform: none;
  }
}

html[data-theme='transparent'].transparent-glass-lightweight {
  --app-grouped-list-backdrop-filter: none;

  .global-blur-layer {
    display: none !important;
    backdrop-filter: none !important;
  }

  .layout-vertical-nav,
  .v-toolbar,
  .v-footer,
  .theme-customizer-panel-host,
  .theme-customizer-panel,
  .agent-assistant-panel,
  .agent-assistant-fab__bubble,
  .nav-button {
    backdrop-filter: blur(var(--transparent-blur));
  }

  .layout-vertical-nav,
  .theme-customizer-panel-host,
  .agent-assistant-panel {
    backdrop-filter: blur(var(--transparent-blur-heavy));
  }

  .v-list,
  .v-card:not(.no-blur, .bg-primary),
  .v-sheet,
  .v-expansion-panel {
    backdrop-filter: none;
  }

  .v-card:not(.no-blur, .bg-primary),
  .v-sheet,
  .v-expansion-panel,
  .v-list {
    background-color: rgba(var(--v-theme-surface), var(--transparent-opacity));
  }

  .footer-nav-card.v-card {
    backdrop-filter: blur(var(--transparent-blur-heavy));
    background-color: rgba(var(--v-theme-surface), var(--transparent-opacity-heavy));
  }

  .plugin-quick-access.v-card {
    backdrop-filter: blur(var(--transparent-blur-heavy));
  }

  .v-overlay__content,
  .v-overlay__content .v-card:not(.bg-primary),
  .v-overlay__content .v-list {
    backdrop-filter: blur(var(--transparent-blur));
  }

  .v-overlay__content .v-card:not(.bg-primary),
  .v-overlay__content .v-list {
    background-color: rgba(var(--v-theme-surface), var(--transparent-opacity-heavy));
  }

  .app-card-colorful {
    backdrop-filter: none;
  }
}

html[data-theme='transparent'].transparent-glass-realtime {
  --app-grouped-list-backdrop-filter: none;

  .background-image.active {
    filter: none;
    transform: none;
  }

  .v-list,
  .v-card:not(.no-blur, .bg-primary),
  .v-sheet,
  .v-expansion-panel {
    backdrop-filter: none;
  }

  .layout-vertical-nav,
  .v-toolbar,
  .v-footer,
  .theme-customizer-panel-host,
  .theme-customizer-panel,
  .agent-assistant-panel,
  .agent-assistant-fab__bubble,
  .nav-button,
  .v-overlay__content,
  .v-overlay__content .v-card:not(.bg-primary),
  .v-overlay__content .v-list {
    backdrop-filter: blur(var(--transparent-blur));
  }

  .footer-nav-card.v-card {
    backdrop-filter: blur(var(--transparent-blur-heavy));
    background-color: rgba(var(--v-theme-surface), var(--transparent-opacity-heavy));
  }

  .plugin-quick-access.v-card {
    backdrop-filter: blur(var(--transparent-blur-heavy));
  }

  .layout-vertical-nav,
  .theme-customizer-panel-host,
  .agent-assistant-panel {
    backdrop-filter: blur(var(--transparent-blur-heavy));
  }
}

html[data-theme='transparent'].transparent-blur-disabled {
  --app-grouped-list-backdrop-filter: none;

  .layout-vertical-nav,
  .v-list,
  .v-card:not(.no-blur),
  .v-toolbar,
  .v-footer,
  .v-sheet,
  .v-expansion-panel,
  .v-overlay__content,
  .v-overlay__content .v-card:not(.bg-primary),
  .v-overlay__content .v-list,
  .theme-customizer-panel-host,
  .theme-customizer-panel,
  .agent-assistant-panel,
  .agent-assistant-fab__bubble,
  .nav-button,
  .layout-navbar {
    backdrop-filter: none !important;
  }
}