mirror of
https://github.com/Cp0204/quark-auto-save.git
synced 2026-01-12 15:20:44 +08:00
8418 lines
229 KiB
CSS
8418 lines
229 KiB
CSS
/**
|
||
* main.css - 夸克自动转存 WebUI 样式文件
|
||
* 整合了所有 WebUI 的样式，包括 index.html、login.html 和 dashboard.css 中的样式
|
||
*/
|
||
|
||
/* --------------- CSS变量定义 --------------- */
|
||
:root {
|
||
--focus-border-color-rgb: 0, 123, 255;
|
||
--success-color: #28a745;
|
||
--secondary-text-color: #979799; /* 影视发现类型文本中灰色 */
|
||
--dark-text-color: #404040;
|
||
--light-text-color: #b1b1b3;
|
||
--border-color: #e3e3e5; /* 统一边框颜色变量 */
|
||
--focus-border-color: #0D53FF; /* 输入框聚焦时的边框颜色 */
|
||
--shadow-spread: 0; /* 统一阴影扩散距离设为0 */
|
||
--button-gray-background-color: #ededf0; /* 按钮灰色背景颜色 */
|
||
}
|
||
|
||
/* --------------- 基础样式 --------------- */
|
||
body {
|
||
font-size: 1rem;
|
||
padding-bottom: 110px;
|
||
color: var(--dark-text-color);
|
||
}
|
||
|
||
/* 登录页面样式 */
|
||
body.login-page {
|
||
background: linear-gradient(135deg, #b2c8ff 0%, #739aff 100%);
|
||
min-height: 100vh;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding-bottom: 0;
|
||
}
|
||
|
||
/* 响应式布局调整 */
|
||
@media (max-width: 768px) {
|
||
.container-fluid {
|
||
padding-right: 5px;
|
||
padding-left: 5px;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 769px) {
|
||
.container-fluid {
|
||
padding-right: 5px;
|
||
padding-left: 5px;
|
||
}
|
||
/* 减少列padding */
|
||
.row > [class*="col-"] {
|
||
padding-right: 10px; /* 默认是15px */
|
||
padding-left: 10px; /* 默认是15px */
|
||
}
|
||
|
||
/* 同时调整row的负margin以保持对齐 */
|
||
.row {
|
||
margin-right: -10px;
|
||
margin-left: -10px;
|
||
}
|
||
}
|
||
|
||
/* 页面宽度模式 - 窄 */
|
||
.page-width-narrow .container-fluid {
|
||
max-width: 1440px !important;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
/* 页面宽度模式 - 中 */
|
||
.page-width-medium .container-fluid {
|
||
max-width: 1680px !important;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
/* 页面宽度模式 - 宽 */
|
||
.page-width-wide .container-fluid {
|
||
max-width: 2160px !important;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
/* --------------- 通用工具类 --------------- */
|
||
.cursor-pointer {
|
||
cursor: pointer;
|
||
}
|
||
|
||
.cursor-pointer:hover {
|
||
background-color: rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.text-truncate {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
max-width: 100%;
|
||
padding-right: 25px;
|
||
}
|
||
|
||
.position-relative {
|
||
position: relative;
|
||
}
|
||
|
||
/* --------------- Toast 通知组件 --------------- */
|
||
.toast-container-center {
|
||
position: fixed;
|
||
top: 64px;
|
||
left: 0;
|
||
right: 0;
|
||
margin: 0 auto;
|
||
transform: none; /* 固定顶部距离，不随内容高度变化 */
|
||
z-index: 9999;
|
||
width: 100%;
|
||
max-width: 100%;
|
||
pointer-events: none;
|
||
text-align: center; /* 容器内居中，使移动端与桌面端一致 */
|
||
padding: 0 10px; /* 页面左右各 10px 的安全边距 */
|
||
}
|
||
|
||
.toast-custom {
|
||
background-color: var(--focus-border-color);
|
||
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.1);
|
||
border: none;
|
||
border-radius: 6px;
|
||
margin: 0; /* 由容器 padding 提供页面边距限制，避免强制扩张 */
|
||
display: inline-block; /* 保持根据内容自适应，同时允许换行后包裹 */
|
||
width: -moz-fit-content;
|
||
width: fit-content; /* 内容自适应宽度 */
|
||
max-width: calc(100vw - 20px); /* 视口宽度减去左右 10px */
|
||
}
|
||
|
||
/* Bootstrap 在显示阶段可能将 .toast 设为 block，强制保持 inline-block 以持续居中 */
|
||
.toast-custom.show,
|
||
.toast-custom.showing {
|
||
display: inline-block !important;
|
||
}
|
||
|
||
.toast-body-custom {
|
||
text-align: center;
|
||
padding: 0.93rem 1.2rem;
|
||
color: #fff;
|
||
font-size: 0.95rem;
|
||
white-space: normal;
|
||
word-break: break-word;
|
||
margin: 0 auto; /* 保持正文在容器中水平居中 */
|
||
padding-top: calc(0.93rem - 0.25px);
|
||
padding-bottom: calc(0.93rem - 0.25px);
|
||
}
|
||
|
||
/* --------------- 底部按钮 --------------- */
|
||
.bottom-buttons {
|
||
z-index: 99;
|
||
position: fixed;
|
||
left: 50%;
|
||
bottom: 20px;
|
||
background-color: transparent;
|
||
display: flex;
|
||
flex-direction: row;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
.bottom-buttons button {
|
||
border-radius: 50%;
|
||
margin: 0 10px;
|
||
width: 50px;
|
||
height: 50px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: none;
|
||
box-shadow: none;
|
||
}
|
||
|
||
/* --------------- 标题和内容布局 --------------- */
|
||
.title {
|
||
margin-top: 30px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
/* 缩小p标签之间的行距 */
|
||
.row.title + p {
|
||
margin-bottom: 2px;
|
||
}
|
||
|
||
/* --------------- 系统配置页面标题样式 --------------- */
|
||
/* 系统配置页面标题容器样式 */
|
||
main .row.title {
|
||
margin-top: 20px;
|
||
margin-bottom: 6.5px;
|
||
padding-left: 0px; /* 不使用padding，因为不能有负值 */
|
||
margin-left: -15px; /* 添加负边距向左移动2px */
|
||
}
|
||
|
||
/* 精准调整：QASX API 模块与上方模块的垂直间距减小 8px */
|
||
main .row.title[title^="QASX API"] {
|
||
margin-top: 12px;
|
||
}
|
||
|
||
/* 系统配置页面标题文字样式 */
|
||
main .row.title h2 {
|
||
font-size: 1.25rem !important; /* 标题字体大小 */
|
||
font-weight: 500; /* 字体加粗 */
|
||
color: var(--dark-text-color); /* 使用统一的文本颜色变量 */
|
||
margin-bottom: 0;
|
||
margin-top: 0;
|
||
line-height: 1.5;
|
||
padding-left: 0px; /* 标题文字左内边距 */
|
||
}
|
||
|
||
/* 标题旁边的问号图标容器样式 */
|
||
main .row.title .badge {
|
||
margin-left: -2px;
|
||
vertical-align: middle;
|
||
background-color: transparent !important; /* 移除背景色 */
|
||
padding: 0 !important; /* 移除内边距 */
|
||
border: none !important; /* 移除边框 */
|
||
}
|
||
|
||
/* 标题旁边的问号图标链接样式 */
|
||
main .row.title .badge a {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
text-decoration: none !important;
|
||
color: inherit;
|
||
padding: 2px;
|
||
border-radius: 50%;
|
||
transition: background-color 0.2s;
|
||
}
|
||
|
||
/* 问号图标链接悬停状态 */
|
||
main .row.title .badge a:hover {
|
||
text-decoration: none !important;
|
||
}
|
||
|
||
/* 问号图标链接悬停并聚焦状态 */
|
||
main .row.title .badge a:hover,
|
||
main .row.title .badge a:focus {
|
||
outline: none;
|
||
}
|
||
|
||
/* 标题旁边的问号图标样式 */
|
||
main .row.title .bi-question-circle {
|
||
font-size: 0.9rem;
|
||
color: var(--focus-border-color);
|
||
opacity: 1;
|
||
position: relative;
|
||
top: -6.5px;
|
||
transition: color 0.2s, opacity 0.2s;
|
||
}
|
||
|
||
/* 问号图标悬停状态 */
|
||
main .row.title .badge a:hover .bi-question-circle {
|
||
color: var(--dark-text-color);
|
||
opacity: 1;
|
||
}
|
||
|
||
/* 系统配置页面第一个标题的上边距特殊处理 */
|
||
main div[v-if="activeTab === 'config'"] .row.title:first-child {
|
||
margin-top: 20px;
|
||
}
|
||
|
||
/* --------------- 导航栏样式 --------------- */
|
||
.navbar-title {
|
||
margin-left: -2px; /* 将导航栏标题"夸克自动转存"向左移动2px */
|
||
}
|
||
|
||
/* 导航栏样式 */
|
||
.navbar-brand {
|
||
padding-top: .75rem;
|
||
padding-bottom: .75rem;
|
||
background-color: rgba(0, 0, 0, .25);
|
||
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
|
||
height: 54px;
|
||
display: flex;
|
||
align-items: center;
|
||
transition: none; /* 禁用动画效果 */
|
||
}
|
||
|
||
.navbar .navbar-toggler {
|
||
right: 1rem;
|
||
}
|
||
|
||
.navbar .form-control {
|
||
padding: .75rem 1rem;
|
||
border-width: 0;
|
||
border-radius: 0;
|
||
}
|
||
|
||
.form-control-dark {
|
||
color: #fff;
|
||
background-color: rgba(255, 255, 255, .1);
|
||
border-color: rgba(255, 255, 255, .1);
|
||
}
|
||
|
||
.form-control-dark:focus {
|
||
border-color: transparent;
|
||
box-shadow: none;
|
||
}
|
||
|
||
/* 云朵图标在不同状态下的位置调整 */
|
||
.navbar-brand i.bi-clouds {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
margin-right: 5px; /* 展开状态下右移主标题夸克自动转存 */
|
||
position: relative;
|
||
right: 2px; /* 展开状态下右移云朵图标 */
|
||
top: 0; /* 向上移动3px修复偏移问题 */
|
||
transition: none; /* 禁用动画效果 */
|
||
font-size: 1.624rem; /* 添加云朵图标的大小设置 */
|
||
}
|
||
|
||
/* --------------- 侧边栏样式 --------------- */
|
||
.sidebar {
|
||
position: fixed;
|
||
top: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
z-index: 100;
|
||
padding: 54px 0 0;
|
||
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .088);
|
||
transition: none; /* 禁用动画效果 */
|
||
overflow-x: hidden; /* 防止水平滚动条 */
|
||
}
|
||
|
||
.sidebar-sticky {
|
||
position: relative;
|
||
top: 0;
|
||
height: calc(100vh - 54px);
|
||
padding-top: 20px; /* 侧边栏顶距 */
|
||
overflow-x: hidden;
|
||
overflow-y: auto;
|
||
transition: none; /* 禁用动画效果 */
|
||
}
|
||
|
||
@supports ((position: -webkit-sticky) or (position: sticky)) {
|
||
.sidebar-sticky {
|
||
position: -webkit-sticky;
|
||
position: sticky;
|
||
}
|
||
}
|
||
|
||
.sidebar .nav-link {
|
||
font-size: medium;
|
||
color: var(--dark-text-color);
|
||
padding: 8px 7px;
|
||
height: 32px; /* 侧边栏菜单项高度 */
|
||
line-height: 22px;
|
||
display: flex;
|
||
align-items: center;
|
||
transition: none; /* 禁用动画效果 */
|
||
white-space: nowrap; /* 防止文字换行 */
|
||
overflow: hidden; /* 隐藏溢出内容 */
|
||
}
|
||
|
||
/* 添加导航菜单项之间的间距 */
|
||
.sidebar .nav-item {
|
||
margin-bottom: 8px; /* 增加菜单项之间的间距 */
|
||
}
|
||
|
||
.sidebar .nav-link:hover {
|
||
background-color: #e6f1ff; /* 导航悬停背景颜色 */
|
||
}
|
||
|
||
.sidebar .nav-link i {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 8px;
|
||
margin-left: 7px;
|
||
width: 20px;
|
||
transition: none; /* 禁用动画效果 */
|
||
position: static; /* 保持在固定位置，不要使用相对定位 */
|
||
}
|
||
|
||
.sidebar .nav-link.active {
|
||
background-color: #0D53FF;
|
||
color: white !important;
|
||
}
|
||
|
||
.sidebar-heading {
|
||
font-size: .75rem;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
/* --------------- 侧边栏折叠样式 --------------- */
|
||
.nav-text {
|
||
transition: none; /* 禁用动画效果 */
|
||
white-space: nowrap;
|
||
opacity: 1;
|
||
}
|
||
|
||
.sidebar-collapsed {
|
||
width: 54px !important;
|
||
min-width: 54px !important;
|
||
max-width: 54px !important;
|
||
flex: 0 0 54px !important;
|
||
overflow-x: hidden;
|
||
transition: none; /* 禁用动画效果 */
|
||
}
|
||
|
||
.sidebar-collapsed .nav-text {
|
||
opacity: 0;
|
||
width: 0;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
.collapse-text {
|
||
transition: none; /* 禁用动画效果 */
|
||
white-space: nowrap;
|
||
opacity: 1;
|
||
}
|
||
|
||
.sidebar-collapsed .collapse-text {
|
||
opacity: 0;
|
||
width: 0;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
.sidebar-collapsed .nav-text,
|
||
.sidebar-collapsed .collapse-text {
|
||
display: block; /* 改用opacity控制而不是display:none，避免跳动 */
|
||
visibility: hidden;
|
||
max-width: 0;
|
||
}
|
||
|
||
.sidebar-collapsed + main {
|
||
max-width: calc(100% - 54px) !important;
|
||
flex: 0 0 calc(100% - 54px) !important;
|
||
transition: none; /* 禁用动画效果 */
|
||
}
|
||
|
||
/* 当侧边栏折叠时调整导航标题宽度 */
|
||
.sidebar-collapsed-navbar-brand {
|
||
width: 54px !important;
|
||
min-width: 54px !important;
|
||
max-width: 54px !important;
|
||
flex: 0 0 54px !important;
|
||
padding-left: 0 !important;
|
||
padding-right: 0 !important;
|
||
justify-content: center;
|
||
transition: none; /* 禁用动画效果 */
|
||
height: 54px !important; /* 保持导航栏高度一致 */
|
||
}
|
||
|
||
.sidebar-collapsed-navbar-brand i.bi-clouds {
|
||
right: 0; /* 折叠状态下额外右移，总共成为0 */
|
||
top: 0; /* 云朵图标与展开状态保持一致高度 */
|
||
margin-right: 0;
|
||
margin-left: 0;
|
||
}
|
||
|
||
.sidebar-collapsed-navbar-brand .navbar-title {
|
||
display: none;
|
||
}
|
||
|
||
.sidebar-collapsed .nav-link {
|
||
justify-content: center;
|
||
padding-left: 0;
|
||
padding-right: 0;
|
||
text-align: center;
|
||
width: 100%;
|
||
}
|
||
|
||
.sidebar-collapsed .nav-link i {
|
||
margin-right: 0;
|
||
margin-left: 0;
|
||
transform: translateX(0); /* 确保图标在收起状态下没有位移 */
|
||
}
|
||
|
||
/* 底部GitHub图标在折叠状态下的调整 */
|
||
.sidebar-collapsed .text-center {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
/* 设置导航栏最大宽度为188px，超过后不再增长 */
|
||
@media (min-width: 768px) {
|
||
#sidebarMenu.col-md-2,
|
||
.navbar-brand.col-md-2 {
|
||
max-width: 184px;
|
||
flex: 0 0 184px;
|
||
}
|
||
|
||
main.col-md-10 {
|
||
max-width: calc(100% - 184px);
|
||
flex: 0 0 calc(100% - 184px);
|
||
}
|
||
}
|
||
|
||
/* 底部链接样式 */
|
||
.bottom-links {
|
||
position: absolute;
|
||
bottom: 20px;
|
||
width: 100%;
|
||
}
|
||
|
||
.bottom-links .nav-flex-column {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.bottom-links .nav-item {
|
||
margin-bottom: -8px;
|
||
}
|
||
|
||
.bottom-links .nav-item + .nav-item {
|
||
margin-top: 0; /* 底部链接项之间的间距，调整这个值可以改变两个链接之间的垂直间距 */
|
||
}
|
||
|
||
.bottom-links .nav-link {
|
||
color: var(--dark-text-color);
|
||
transition: none; /* 禁用动画效果 */
|
||
padding-top: 0.1rem;
|
||
padding-bottom: 0.1rem;
|
||
}
|
||
|
||
.bottom-links .nav-link:hover {
|
||
color: #0D53FF;
|
||
background-color: transparent;
|
||
}
|
||
|
||
/* 侧边栏折叠相关功能只在大尺寸屏幕上启用 */
|
||
@media (max-width: 767.98px) {
|
||
/* 追剧日历：筛选框与下方按钮组的竖向间距调整为 8px */
|
||
.calendar-filter-row {
|
||
margin-bottom: 8px !important;
|
||
}
|
||
.sidebar-collapsed {
|
||
width: auto !important;
|
||
min-width: auto !important;
|
||
max-width: none !important;
|
||
flex: auto !important;
|
||
}
|
||
|
||
.sidebar-collapsed + main {
|
||
max-width: 100% !important;
|
||
flex: 0 0 100% !important;
|
||
}
|
||
|
||
.sidebar-collapsed-navbar-brand {
|
||
width: auto !important;
|
||
min-width: auto !important;
|
||
max-width: none !important;
|
||
flex: auto !important;
|
||
}
|
||
|
||
.sidebar-collapsed .nav-text,
|
||
.sidebar-collapsed .collapse-text {
|
||
display: block;
|
||
visibility: visible;
|
||
opacity: 1;
|
||
width: auto;
|
||
max-width: none;
|
||
}
|
||
|
||
.sidebar-collapsed .nav-link {
|
||
justify-content: flex-start;
|
||
padding-left: 10px;
|
||
padding-right: 10px;
|
||
width: 100%;
|
||
}
|
||
|
||
.sidebar-collapsed .nav-link i {
|
||
margin-right: 8px;
|
||
margin-left: 0;
|
||
width: 20px;
|
||
}
|
||
|
||
/* 移动设备下底部链接的样式 */
|
||
.sidebar-collapsed .bottom-links .nav-text {
|
||
display: block;
|
||
visibility: visible;
|
||
opacity: 1;
|
||
width: auto;
|
||
max-width: none;
|
||
}
|
||
|
||
.sidebar-collapsed .bottom-links .nav-link {
|
||
justify-content: flex-start;
|
||
padding-left: 10px;
|
||
padding-right: 10px;
|
||
width: 100%;
|
||
}
|
||
|
||
.sidebar-collapsed .nav-item,
|
||
.sidebar-collapsed .bottom-links .nav-item {
|
||
width: 100%;
|
||
display: block;
|
||
}
|
||
|
||
/* 确保导航栏高度足够 */
|
||
.navbar {
|
||
min-height: 54px;
|
||
}
|
||
|
||
.sidebar-collapsed .sidebar-sticky,
|
||
.sidebar-collapsed .nav.flex-column {
|
||
display: block;
|
||
align-items: initial;
|
||
}
|
||
}
|
||
|
||
/* --------------- 顶部操作按钮样式 --------------- */
|
||
/* 顶部操作按钮容器 */
|
||
.navbar-actions {
|
||
display: flex;
|
||
position: absolute;
|
||
height: 54px;
|
||
align-items: center;
|
||
}
|
||
|
||
/* 变量定义 - 颜色 */
|
||
:root {
|
||
/* Bootstrap 导航栏背景色 */
|
||
--navbar-bg-color: #343a40;
|
||
/* 移动端导航栏覆盖颜色 - 黑色半透明 */
|
||
--navbar-mobile-overlay: rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
/* 顶部操作按钮样式 */
|
||
.navbar-action-btn {
|
||
width: 32px !important;
|
||
height: 32px !important;
|
||
padding: 6px 0 !important;
|
||
text-align: center !important;
|
||
border-radius: 6px !important;
|
||
background-color: transparent !important;
|
||
border: 1px solid #fff !important;
|
||
display: flex !important;
|
||
align-items: center !important;
|
||
justify-content: center !important;
|
||
margin-right: 8px !important;
|
||
color: #fff !important;
|
||
transition: all 0.2s !important;
|
||
}
|
||
|
||
/* 桌面端按钮的悬停状态样式 */
|
||
@media (min-width: 768px) {
|
||
.navbar-action-btn:hover {
|
||
background-color: #fff !important;
|
||
color: var(--navbar-bg-color) !important;
|
||
border-color: #fff !important;
|
||
}
|
||
|
||
/* 确保按钮内图标颜色也随之变化 */
|
||
.navbar-action-btn:hover i {
|
||
color: var(--navbar-bg-color) !important;
|
||
}
|
||
}
|
||
|
||
/* 移动端按钮的悬停状态样式 */
|
||
@media (max-width: 767.98px) {
|
||
.navbar-action-btn:hover {
|
||
background-color: #fff !important;
|
||
color: #272b30 !important;
|
||
border-color: #fff !important;
|
||
}
|
||
|
||
/* 确保按钮内图标颜色也随之变化 */
|
||
.navbar-action-btn:hover i {
|
||
color: #272b30 !important;
|
||
}
|
||
}
|
||
|
||
/* 激活和焦点状态保持默认样式 */
|
||
.navbar-action-btn:active,
|
||
.navbar-action-btn:focus {
|
||
outline: none !important;
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
/* 移动模式下的菜单按钮位置 */
|
||
@media (max-width: 767.98px) {
|
||
.navbar-actions {
|
||
right: 52px; /* 菜单按钮宽度(32px) + 间距(8px) */
|
||
flex-direction: row;
|
||
}
|
||
|
||
/* 确保在移动设备上隐藏页面宽度按钮 */
|
||
.navbar-action-btn.d-none.d-md-inline-block {
|
||
display: none !important;
|
||
}
|
||
}
|
||
|
||
/* 桌面模式下的按钮位置 */
|
||
@media (min-width: 768px) {
|
||
.navbar-actions {
|
||
right: 12px; /* 与移动模式下保持一致的边距 */
|
||
}
|
||
}
|
||
|
||
/* 覆盖Bootstrap和dashboard.css中的默认样式 */
|
||
.navbar .navbar-toggler.navbar-toggler-square {
|
||
border: 1px solid #fff !important;
|
||
}
|
||
|
||
/* 确保响应式类正常工作 */
|
||
@media (min-width: 768px) {
|
||
button.navbar-toggler.navbar-toggler-square.position-absolute.d-md-none {
|
||
display: none !important;
|
||
}
|
||
.d-md-none {
|
||
display: none !important;
|
||
}
|
||
}
|
||
|
||
/* 添加移动端菜单按钮的悬停样式 */
|
||
@media (max-width: 767.98px) {
|
||
.navbar-toggler-square:hover {
|
||
background-color: #fff !important;
|
||
color: #272b30 !important;
|
||
border-color: #fff !important;
|
||
}
|
||
|
||
/* 确保按钮内图标颜色也随之变化 */
|
||
.navbar-toggler-square:hover i {
|
||
color: #272b30 !important;
|
||
}
|
||
}
|
||
|
||
/* 修改菜单按钮的基础样式 - 始终使用透明背景和白色图标（默认折叠状态） */
|
||
.navbar-toggler-square {
|
||
width: 32px !important;
|
||
height: 32px !important;
|
||
padding: 6px 0 !important;
|
||
text-align: center !important;
|
||
border-radius: 6px !important;
|
||
position: absolute !important;
|
||
right: 20px !important; /* 右边距 */
|
||
background-color: transparent !important;
|
||
border: 1px solid #fff !important;
|
||
display: flex !important;
|
||
align-items: center !important;
|
||
justify-content: center !important;
|
||
transition: all 0.1s !important; /* 缩短过渡效果时间，使恢复更快 */
|
||
color: #fff !important;
|
||
}
|
||
|
||
/* 确保菜单按钮图标的基础样式 */
|
||
.navbar-toggler-square i {
|
||
color: #fff !important;
|
||
font-size: 1.3rem;
|
||
position: relative;
|
||
top: 0.5px; /* 向下微调1px使图标居中 */
|
||
transition: color 0.1s !important; /* 缩短过渡效果时间，使恢复更快 */
|
||
}
|
||
|
||
/* 添加移动端菜单按钮的激活和聚焦样式 - 仅在按下时生效 */
|
||
.navbar-toggler-square:active {
|
||
outline: none !important;
|
||
box-shadow: none !important;
|
||
background-color: #fff !important;
|
||
color: #272b30 !important;
|
||
border-color: #fff !important;
|
||
}
|
||
|
||
/* 确保按钮按下状态下图标颜色也随之变化 */
|
||
.navbar-toggler-square:active i {
|
||
color: #272b30 !important;
|
||
}
|
||
|
||
/* 移除焦点状态的特殊样式，使其与默认状态一致 */
|
||
.navbar-toggler-square:focus {
|
||
outline: none !important;
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
/* 在桌面模式下明确隐藏菜单按钮 */
|
||
@media (min-width: 768px) {
|
||
.navbar-toggler-square {
|
||
display: none !important;
|
||
}
|
||
}
|
||
|
||
/* 自定义菜单按钮图标样式 */
|
||
.menu-icon {
|
||
position: relative;
|
||
width: 20px;
|
||
height: 16px;
|
||
display: inline-flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.menu-icon span {
|
||
display: block;
|
||
width: 100%;
|
||
height: 2px;
|
||
background-color: #fff;
|
||
border-radius: 1px;
|
||
}
|
||
|
||
/* --------------- 按钮样式 --------------- */
|
||
/* 系统配置页面中添加和删除按钮的符号样式 */
|
||
.config-page-btn-symbol {
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
width: 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
line-height: 1;
|
||
position: static;
|
||
}
|
||
|
||
/* 将添加和删除按钮设为正方形 */
|
||
.btn-outline-primary,
|
||
.btn-outline-danger {
|
||
width: 32px;
|
||
height: 32px;
|
||
padding: 0;
|
||
text-align: center;
|
||
font-size: 16px;
|
||
line-height: 30px;
|
||
border-radius: 6px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
/* 筛选按钮设为正方形 */
|
||
.filter-btn-square {
|
||
width: 32px;
|
||
height: 32px;
|
||
padding: 0;
|
||
text-align: center;
|
||
font-size: 16px;
|
||
line-height: 30px;
|
||
border-radius: 6px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
/* X图标的样式 */
|
||
.bi-x-lg {
|
||
color: var(--dark-text-color);
|
||
font-size: 1.05rem;
|
||
}
|
||
|
||
/* 文件夹图标样式 */
|
||
.bi-folder {
|
||
color: var(--dark-text-color);
|
||
font-size: 1.01rem;
|
||
position: relative;
|
||
top: 0.5px;
|
||
}
|
||
|
||
/* 重置文件夹图标样式 */
|
||
.bi-folder-x {
|
||
font-size: 1.01rem;
|
||
position: relative;
|
||
top: 0.5px;
|
||
}
|
||
|
||
/* 恢复图标样式 */
|
||
.bi-reply {
|
||
color: var(--dark-text-color);
|
||
font-size: 1.16rem;
|
||
position: relative;
|
||
top: -1.5px;
|
||
}
|
||
|
||
/* 调整下拉选择框的内边距，使文本与输入框占位符位置一致 */
|
||
select.form-control {
|
||
padding: 0 8px !important; /* 移除右侧额外空间，图标已经用DOM实现 */
|
||
text-indent: 0 !important;
|
||
appearance: none !important;
|
||
-webkit-appearance: none !important;
|
||
-moz-appearance: none !important;
|
||
background-image: none !important; /* 移除默认的背景图像 */
|
||
}
|
||
|
||
/* 下拉箭头图标样式 */
|
||
.select-arrow {
|
||
font-size: 1.15rem !important; /* 稍微调小一点 */
|
||
right: 7.5px !important; /* 向右调整 */
|
||
top: calc(50% - 0.5px) !important; /* 微调上下位置，使其更精确垂直居中 */
|
||
transform: translateY(-50%) !important; /* 确保垂直居中 */
|
||
}
|
||
|
||
/* 确保任务筛选下拉框中的文本垂直居中显示 */
|
||
.task-filter-select {
|
||
padding-top: 0 !important;
|
||
padding-bottom: 0 !important;
|
||
display: flex !important;
|
||
align-items: center !important;
|
||
height: 32px !important;
|
||
padding-left: 8px !important;
|
||
text-indent: 0 !important;
|
||
text-align: left !important;
|
||
box-sizing: border-box !important;
|
||
border-top-left-radius: 0 !important; /* 移除左上角圆角 */
|
||
border-bottom-left-radius: 0 !important; /* 移除左下角圆角 */
|
||
border-top-right-radius: 0 !important; /* 移除右上角圆角 */
|
||
border-bottom-right-radius: 0 !important; /* 移除右下角圆角 */
|
||
}
|
||
|
||
/* 为确保输入组中select元素的边角正确 */
|
||
.input-group-prepend + div > select.form-control {
|
||
border-top-left-radius: 0 !important;
|
||
border-bottom-left-radius: 0 !important;
|
||
}
|
||
|
||
/* 下拉框选项的垂直居中 */
|
||
.task-filter-select option {
|
||
padding: 8px !important;
|
||
line-height: 1.5 !important;
|
||
}
|
||
|
||
/* 搜索图标样式 */
|
||
.bi-search {
|
||
color: var(--dark-text-color);
|
||
font-size: 0.98rem;
|
||
}
|
||
|
||
/* 链接图标样式 */
|
||
.bi-link-45deg {
|
||
color: var(--dark-text-color);
|
||
font-size: 1.2rem;
|
||
position: relative;
|
||
top: 0.5px;
|
||
}
|
||
|
||
/* 谷歌图标样式 */
|
||
.bi-google {
|
||
color: var(--dark-text-color);
|
||
font-size: 0.95rem;
|
||
}
|
||
|
||
/* 日历图标样式 */
|
||
.bi-calendar3 {
|
||
color: var(--dark-text-color);
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
/* 合并集切换按钮图标样式 */
|
||
.bi-file-break {
|
||
color: var(--dark-text-color);
|
||
font-size: 0.95rem;
|
||
}
|
||
|
||
.bi-file {
|
||
color: var(--dark-text-color);
|
||
font-size: 0.95rem;
|
||
}
|
||
|
||
/* 追剧日历视图切换按钮图标样式 */
|
||
.bi-grid-3x3-gap {
|
||
color: var(--dark-text-color);
|
||
font-size: 0.98rem;
|
||
position: relative;
|
||
top: 0.5px;
|
||
}
|
||
|
||
/* TMDB图标和豆瓣图标样式 */
|
||
.tmdb-icon {
|
||
width: 1.07rem;
|
||
height: auto; /* 保持图标等比缩放 */
|
||
filter: brightness(0) saturate(100%) invert(23%) sepia(0%) saturate(1%) hue-rotate(181deg) brightness(95%) contrast(86%); /* 使SVG图标颜色为var(--dark-text-color)，即#404040 */
|
||
}
|
||
|
||
.douban-icon {
|
||
width: 1rem; /* 18.4px equivalent */
|
||
height: auto; /* 保持图标等比缩放 */
|
||
filter: brightness(0) saturate(100%) invert(23%) sepia(0%) saturate(1%) hue-rotate(181deg) brightness(95%) contrast(86%); /* 使SVG图标颜色为var(--dark-text-color)，即#404040 */
|
||
}
|
||
|
||
.input-group-text:has(.tmdb-icon):hover img,
|
||
.input-group-text:has(.douban-icon):hover img {
|
||
filter: brightness(0) invert(1); /* 将SVG图标转换为白色 */
|
||
}
|
||
|
||
/* 图标按钮悬停样式 */
|
||
.btn-outline-secondary:hover .bi-x-lg,
|
||
.btn-outline-secondary:hover .bi-folder,
|
||
.btn-outline-secondary:hover .bi-search,
|
||
.btn-outline-secondary:hover .bi-link-45deg,
|
||
.btn-outline-secondary:hover .bi-google,
|
||
.btn-outline-secondary:hover .bi-calendar3,
|
||
.btn-outline-secondary:hover .bi-file-break,
|
||
.btn-outline-secondary:hover .bi-file,
|
||
.btn-outline-secondary:hover .bi-grid-3x3-gap,
|
||
.btn-outline-secondary:hover .bi-eye,
|
||
.btn-outline-secondary:hover .bi-eye-slash,
|
||
.btn-outline-secondary:hover .bi-reply,
|
||
.btn-primary:hover .bi-search,
|
||
.input-group-text:hover .bi-google,
|
||
.input-group-text:hover .bi-link-45deg,
|
||
.input-group-text:hover .tmdb-icon,
|
||
.input-group-text:hover .douban-icon {
|
||
color: #fff;
|
||
}
|
||
|
||
/* 按钮基本样式 */
|
||
.btn-outline-secondary {
|
||
border-color: var(--dark-text-color);
|
||
color: var(--dark-text-color);
|
||
border-radius: 6px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-color: transparent;
|
||
}
|
||
|
||
/* 带图标的按钮样式（正方形） */
|
||
.btn-outline-secondary:has(i.bi),
|
||
.filter-btn-square,
|
||
.input-group-append .btn:has(i.bi):not(.btn-primary),
|
||
.input-group-prepend .btn:has(i.bi):not(.btn-primary) {
|
||
width: 32px;
|
||
height: 32px;
|
||
padding: 0;
|
||
}
|
||
|
||
/* 按钮悬停时的背景色 */
|
||
.btn-outline-secondary:hover {
|
||
background-color: var(--dark-text-color);
|
||
border-color: var(--dark-text-color);
|
||
}
|
||
|
||
/* 添加按钮点击时的背景色，使其与悬停状态一致 */
|
||
.btn-outline-secondary:active {
|
||
background-color: var(--dark-text-color) !important;
|
||
border-color: var(--dark-text-color) !important;
|
||
color: #fff !important;
|
||
}
|
||
|
||
/* X按钮特殊样式 */
|
||
.btn-outline-secondary:has(.bi-x-lg) {
|
||
box-shadow: none !important;
|
||
transition: background-color 0.15s, box-shadow 0.05s;
|
||
}
|
||
|
||
.btn-outline-secondary:has(.bi-x-lg):hover {
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
.btn-outline-secondary:has(.bi-x-lg):focus {
|
||
box-shadow: none !important;
|
||
outline: none !important;
|
||
}
|
||
|
||
.btn-outline-secondary:has(.bi-x-lg):active {
|
||
box-shadow: none !important;
|
||
background-color: var(--dark-text-color) !important;
|
||
border-color: var(--dark-text-color) !important;
|
||
color: #fff !important;
|
||
transition: all 0.15s ease-out;
|
||
}
|
||
|
||
/* 确保X按钮点击后恢复到原始状态 */
|
||
.btn-outline-secondary:has(.bi-x-lg):not(:hover):not(:active) {
|
||
background-color: transparent !important;
|
||
border-color: var(--dark-text-color) !important;
|
||
color: var(--dark-text-color) !important;
|
||
transition: background-color 0.15s ease-out;
|
||
}
|
||
|
||
/* 带文本的按钮样式 */
|
||
.btn-outline-secondary:not(:has(i.bi)) {
|
||
padding: 0 8px;
|
||
height: 32px;
|
||
}
|
||
|
||
/* 确保按钮组中的按钮高度一致 */
|
||
.input-group-append .btn,
|
||
.input-group-prepend .btn {
|
||
height: 32px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
/* 修改搜索按钮样式，与其他按钮统一 */
|
||
.btn-primary:has(.bi-search) {
|
||
background-color: transparent;
|
||
border-color: var(--dark-text-color);
|
||
color: var(--dark-text-color);
|
||
width: 32px;
|
||
height: 32px;
|
||
padding: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.btn-primary:has(.bi-search):hover {
|
||
background-color: var(--dark-text-color);
|
||
border-color: var(--dark-text-color);
|
||
}
|
||
|
||
/* 修改谷歌和链接图标的容器样式 */
|
||
.input-group-text:has(.bi-google),
|
||
.input-group-text:has(.bi-link-45deg),
|
||
.input-group-text:has(.tmdb-icon),
|
||
.input-group-text:has(.douban-icon) {
|
||
background-color: transparent !important;
|
||
border-color: var(--dark-text-color) !important;
|
||
padding: 0;
|
||
width: 32px;
|
||
height: 32px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.input-group-text:has(.bi-google):hover,
|
||
.input-group-text:has(.bi-link-45deg):hover,
|
||
.input-group-text:has(.tmdb-icon):hover,
|
||
.input-group-text:has(.douban-icon):hover {
|
||
background-color: var(--dark-text-color) !important;
|
||
color: #fff;
|
||
}
|
||
|
||
.input-group-text:has(.bi-google) a,
|
||
.input-group-text:has(.bi-link-45deg) a,
|
||
.input-group-text:has(.tmdb-icon) a,
|
||
.input-group-text:has(.douban-icon) a {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
/* 自定义表单控件样式 */
|
||
.form-control {
|
||
height: 32px !important;
|
||
border-radius: 6px !important;
|
||
padding: 0 8px !important;
|
||
line-height: 1.5;
|
||
color: var(--dark-text-color);
|
||
border-color: var(--border-color) !important; /* 使用变量替代硬编码颜色 */
|
||
font-size: 0.95rem; /* 确保所有输入框字体大小一致 */
|
||
font-weight: normal; /* 标准字重 */
|
||
letter-spacing: normal; /* 标准字间距 */
|
||
}
|
||
|
||
textarea.form-control {
|
||
height: auto !important;
|
||
line-height: 1.5;
|
||
padding: 8px !important;
|
||
}
|
||
|
||
/* 确保输入组内的控件边角正确 */
|
||
.input-group .form-control:not(:last-child) {
|
||
border-top-right-radius: 0 !important;
|
||
border-bottom-right-radius: 0 !important;
|
||
}
|
||
|
||
.input-group .form-control:not(:first-child) {
|
||
border-top-left-radius: 0 !important;
|
||
border-bottom-left-radius: 0 !important;
|
||
}
|
||
|
||
/* 输入组前缀后缀样式 */
|
||
.input-group-text {
|
||
height: 32px;
|
||
border-radius: 6px;
|
||
padding: 0 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
color: var(--dark-text-color);
|
||
border-color: var(--border-color) !important; /* 使用变量替代硬编码颜色 */
|
||
background-color: #ededf0!important; /* 修改背景色为更浅的灰色 */
|
||
border-width: 1px !important; /* 确保边框宽度为1px */
|
||
}
|
||
|
||
.input-group-prepend .input-group-text {
|
||
border-top-right-radius: 0;
|
||
border-bottom-right-radius: 0;
|
||
border-right-width: 1px !important; /* 确保右侧边框宽度为1px */
|
||
}
|
||
|
||
/* 处理正则命名标签与前一个输入框的边框重叠 */
|
||
.input-group input + .input-group-prepend .input-group-text {
|
||
margin-left: -1px; /* 向左移动1px，使边框重叠 */
|
||
}
|
||
|
||
.input-group-append .input-group-text {
|
||
border-top-left-radius: 0;
|
||
border-bottom-left-radius: 0;
|
||
}
|
||
|
||
/* 输入组内按钮样式 */
|
||
.input-group-append .btn:first-child {
|
||
border-top-left-radius: 0;
|
||
border-bottom-left-radius: 0;
|
||
}
|
||
|
||
.input-group-prepend .btn:last-child {
|
||
border-top-right-radius: 0;
|
||
border-bottom-right-radius: 0;
|
||
}
|
||
|
||
/* --------------- 转存记录展开按钮样式 --------------- */
|
||
.expand-button {
|
||
position: absolute;
|
||
right: 5px;
|
||
top: 11px; /* 固定位置，不再使用百分比定位 */
|
||
transform: none; /* 移除垂直居中转换 */
|
||
cursor: pointer;
|
||
opacity: 0;
|
||
transition: opacity 0.2s;
|
||
background: #fff;
|
||
border-radius: 50%;
|
||
width: 18px;
|
||
height: 18px;
|
||
text-align: center;
|
||
line-height: 18px;
|
||
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); /* 保留阴影效果 */
|
||
z-index: 2; /* 保留更高的层级 */
|
||
}
|
||
|
||
.position-relative:hover .expand-button {
|
||
opacity: 1;
|
||
}
|
||
|
||
.expanded-text {
|
||
white-space: normal;
|
||
word-break: break-all;
|
||
display: block; /* 确保展开的内容是块级元素 */
|
||
line-height: 24px !important; /* 与表头保持一致的行高 */
|
||
margin-top: 0; /* 移除顶部边距 */
|
||
margin-bottom: 0; /* 移除底部边距 */
|
||
position: relative; /* 确保定位准确 */
|
||
padding-right: 25px; /* 为展开按钮预留空间 */
|
||
}
|
||
|
||
.expand-button .bi {
|
||
font-size: 0.7em;
|
||
vertical-align: middle;
|
||
position: relative;
|
||
top: -1px;
|
||
}
|
||
|
||
/* --------------- 表格样式 --------------- */
|
||
.table-responsive {
|
||
overflow-x: auto;
|
||
}
|
||
|
||
/* 表头样式调整 */
|
||
.table thead th,
|
||
table.table thead th {
|
||
vertical-align: middle;
|
||
border-bottom: 1px solid var(--border-color) !important; /* 修改底部边框为1px */
|
||
border-top: 1px solid var(--border-color) !important; /* 添加上边框线 */
|
||
padding: 8px 9px !important; /* 统一表头内边距 */
|
||
background-color: var(--button-gray-background-color) !important; /* 表头背景色 */
|
||
color: var(--dark-text-color) !important; /* 表头文字颜色 */
|
||
height: 40px !important; /* 确保表头高度为40px */
|
||
line-height: 24px !important; /* 设置行高以确保文字垂直居中 */
|
||
box-sizing: border-box !important; /* 确保边框包含在总高度内 */
|
||
}
|
||
|
||
/* 表头悬停样式 */
|
||
.table thead th.cursor-pointer:hover {
|
||
background-color: #f7f7f9; /* 表头悬停背景色 */
|
||
}
|
||
|
||
/* 表格单元格样式 */
|
||
.table td {
|
||
vertical-align: middle !important; /* 统一使用垂直居中对齐 */
|
||
height: 40px !important; /* 与表头保持一致的高度 */
|
||
max-width: 300px;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
padding: 8px 9px !important; /* 统一单元格内边距 */
|
||
border-bottom: 1px solid var(--border-color); /* 单元格分割线颜色 */
|
||
border-top: none !important; /* 确保没有上边框 */
|
||
box-sizing: border-box !important; /* 确保边框包含在总高度内 */
|
||
line-height: 24px !important; /* 与表头保持一致的行高 */
|
||
}
|
||
|
||
/* 表格行悬停样式 */
|
||
.table tbody tr:hover {
|
||
background-color: var(--button-gray-background-color); /* 行悬停背景色 */
|
||
}
|
||
|
||
/* 任务列表：悬停不改变新增信息颜色（集数统计/任务进度/节目状态） */
|
||
/* 任务列表新增信息样式，跟随最近转存文件/最近更新日期的风格与交互 */
|
||
.task-season-counts,
|
||
.task-progress,
|
||
.task-show-status {
|
||
color: var(--dark-text-color);
|
||
font-size: 0.95rem;
|
||
}
|
||
|
||
/* 仅调节两个位置的集数统计中的斜杠上移：
|
||
1) 任务列表里的 .task-season-counts */
|
||
.task-season-counts .count-slash,
|
||
.discovery-poster-overlay .count-slash {
|
||
position: relative;
|
||
top: -2px;
|
||
display: inline-block;
|
||
font-size: 0.8em; /* 单独缩小斜杠字号，仅影响这两处 */
|
||
font-weight: 600; /* 提高字重，抵消缩小字号带来的变细感 */
|
||
}
|
||
|
||
/* 仅调节两个位置的集数统计中的斜杠上移：
|
||
2) 内容管理海报悬停层里的 .calendar-poster-overlay（复用同一类名） */
|
||
.calendar-poster-overlay .count-slash,
|
||
.discovery-poster-overlay .count-slash {
|
||
position: relative;
|
||
top: -1.5px;
|
||
display: inline-block;
|
||
font-size: 0.8em; /* 单独缩小斜杠字号，仅影响这两处 */
|
||
font-weight: 600; /* 提高字重，抵消缩小字号带来的变细感 */
|
||
}
|
||
|
||
/* 悬停显示模式 - 与 task-latest-* 保持一致：默认隐藏，仅在悬停时显示，且不变色 */
|
||
.task-season-counts.hover-only,
|
||
.task-progress.hover-only,
|
||
.task-show-status.hover-only {
|
||
display: none;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.task .btn:hover .task-season-counts.hover-only,
|
||
.task .btn:hover .task-progress.hover-only,
|
||
.task .btn:hover .task-show-status.hover-only {
|
||
display: inline;
|
||
}
|
||
|
||
/* 长文本列的特殊处理 */
|
||
.table td.text-wrap {
|
||
white-space: normal;
|
||
word-break: break-word;
|
||
}
|
||
|
||
/* 设置表格单元格中的position-relative样式，以便正确定位内容 */
|
||
.table td.position-relative {
|
||
position: relative; /* 确保相对定位生效 */
|
||
padding: 8px 9px !important; /* 保持与其他单元格一致的内边距 */
|
||
vertical-align: top !important; /* 确保内容顶部对齐 */
|
||
}
|
||
|
||
/* 调整text-truncate在表格单元格中的布局 */
|
||
.table td .text-truncate {
|
||
display: block; /* 使其成为块级元素 */
|
||
max-width: 100%; /* 确保不超出单元格宽度 */
|
||
padding-right: 25px; /* 为展开按钮留出空间 */
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
line-height: 24px !important; /* 与表头保持一致的行高 */
|
||
}
|
||
|
||
/* --------------- 模态框样式 --------------- */
|
||
.modal-dialog {
|
||
max-width: 800px;
|
||
}
|
||
|
||
.modal-body {
|
||
/* 移除max-height限制，允许内容自由扩展 */
|
||
/* max-height: calc(100vh - 200px); */
|
||
overflow-y: auto;
|
||
}
|
||
|
||
/* 修复关闭按钮在点击时显示边框的问题 */
|
||
.close:focus,
|
||
button.close:focus,
|
||
.modal .close:focus {
|
||
outline: none !important;
|
||
box-shadow: none !important;
|
||
border: none !important;
|
||
}
|
||
|
||
/* --------------- 通用警告框样式 --------------- */
|
||
.alert-warning {
|
||
background-color: #fff3cd;
|
||
border-color: #ffeeba;
|
||
color: #856404;
|
||
font-size: 0.95rem;
|
||
padding: 10px 12px;
|
||
padding-left: 11px;
|
||
border-radius: 6px;
|
||
margin-bottom: 0px;
|
||
line-height: 1.5;
|
||
display: flex;
|
||
align-items: center;
|
||
border-width: 1px;
|
||
border-style: solid;
|
||
height: 36px;
|
||
min-height: 36px;
|
||
}
|
||
|
||
/* 任务列表中的警告框样式 */
|
||
.task .alert-warning {
|
||
font-size: 0.95rem;
|
||
margin-top: 0;
|
||
margin-bottom: 8px;
|
||
margin-left: 3.5px; /* 添加左边距 */
|
||
height: 32px !important; /* 设置固定高度 */
|
||
min-height: 32px !important;
|
||
max-height: 32px !important; /* 确保不超过指定高度 */
|
||
padding-top: 0 !important; /* 重置顶部内边距 */
|
||
padding-bottom: 0 !important; /* 重置底部内边距 */
|
||
display: flex !important; /* 确保flex布局 */
|
||
align-items: center !important; /* 确保垂直居中 */
|
||
justify-content: center !important; /* 水平居中内容 */
|
||
}
|
||
|
||
/* 警告框中的图标样式 */
|
||
.alert-warning .bi-exclamation-circle {
|
||
margin-right: 8px;
|
||
font-size: 1rem;
|
||
color: #856404;
|
||
}
|
||
|
||
/* 任务列表中的警告按钮框样式 */
|
||
.task .btn-warning {
|
||
background-color: transparent !important;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 6px !important;
|
||
border: 1px solid #efb30a !important;
|
||
}
|
||
|
||
/* 任务列表中的警告按钮图标样式 */
|
||
.task .btn-warning .bi-exclamation-circle {
|
||
font-size: 1.04rem;
|
||
color: #efb30a !important;
|
||
margin-right: 0;
|
||
}
|
||
|
||
.task .btn-warning:hover {
|
||
background-color: #ffe8a1;
|
||
border-color: #ffd97e;
|
||
color: #856404;
|
||
}
|
||
|
||
/* 确保禁用状态的按钮样式正确 */
|
||
.task .btn-warning:disabled {
|
||
background-color: #fff3cd;
|
||
border-color: #ffeeba;
|
||
color: #856404;
|
||
opacity: 1;
|
||
}
|
||
|
||
/* 添加定位样式以确保警告图标正确显示 */
|
||
.task .col-auto {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
/* --------------- 运行日志弹窗样式 --------------- */
|
||
/* 运行日志弹窗整体样式 */
|
||
#logModal .modal-dialog {
|
||
max-width: 1080px;
|
||
margin: 4rem auto;
|
||
width: calc(100% - 1.25rem); /* 左右各保留1.5rem的最小边距 */
|
||
}
|
||
|
||
#logModal .modal-content {
|
||
border-radius: 6px;
|
||
border: 1px solid var(--border-color);
|
||
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
/* 弹窗头部样式 */
|
||
#logModal .modal-header {
|
||
background-color: #fff;
|
||
border-bottom: 1px solid var(--border-color);
|
||
padding: 11px 16px;
|
||
border-top-left-radius: 6px;
|
||
border-top-right-radius: 6px;
|
||
}
|
||
|
||
#logModal .modal-title {
|
||
font-size: 1.2rem;
|
||
font-weight: 500;
|
||
color: var(--dark-text-color);
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
#logModal .modal-title b {
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 弹窗关闭按钮 */
|
||
#logModal .close {
|
||
font-size: 1.4rem;
|
||
padding: 8px;
|
||
margin: -8px -8px -8px auto;
|
||
opacity: 1;
|
||
color: var(--dark-text-color);
|
||
transition: opacity 0.15s;
|
||
}
|
||
|
||
/* 修改关闭按钮样式，使用 bi-x-lg 图标 */
|
||
#logModal .close .bi-x-lg {
|
||
font-size: 1.2rem;
|
||
color: var(--dark-text-color);
|
||
opacity: 1;
|
||
position: relative;
|
||
top: 2px;
|
||
right: -2px; /* 向左移动2px */
|
||
}
|
||
|
||
#logModal .close:hover {
|
||
opacity: 1;
|
||
color: var(--dark-text-color);
|
||
}
|
||
|
||
/* 弹窗主体样式 */
|
||
#logModal .modal-body {
|
||
padding: 16px;
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
/* 运行日志内容样式 */
|
||
#logModal pre {
|
||
margin: 0;
|
||
white-space: pre-wrap;
|
||
word-wrap: break-word;
|
||
color: var(--dark-text-color);
|
||
font-family: monospace;
|
||
font-size: 0.85rem;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* 加载状态图标样式 */
|
||
#logModal .spinner-border-sm {
|
||
width: 1rem;
|
||
height: 1rem;
|
||
border-width: 0.15em;
|
||
margin-left: 5px;
|
||
}
|
||
|
||
/* --------------- 文件选择弹窗样式 --------------- */
|
||
/* 文件选择弹窗整体样式 */
|
||
#fileSelectModal .modal-dialog,
|
||
#createTaskModal .modal-dialog,
|
||
#editMetadataModal .modal-dialog {
|
||
max-width: 1080px;
|
||
margin: 4rem auto;
|
||
width: calc(100% - 1.25rem); /* 左右各保留1.5rem的最小边距 */
|
||
}
|
||
|
||
#fileSelectModal .modal-content,
|
||
#createTaskModal .modal-content,
|
||
#editMetadataModal .modal-content {
|
||
border-radius: 6px;
|
||
border: 1px solid var(--border-color);
|
||
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
/* 弹窗头部样式 */
|
||
#fileSelectModal .modal-header,
|
||
#createTaskModal .modal-header,
|
||
#editMetadataModal .modal-header {
|
||
background-color: #fff;
|
||
border-bottom: 1px solid var(--border-color);
|
||
padding: 11px 16px;
|
||
border-top-left-radius: 6px;
|
||
border-top-right-radius: 6px;
|
||
}
|
||
|
||
#fileSelectModal .modal-title,
|
||
#createTaskModal .modal-title,
|
||
#editMetadataModal .modal-title {
|
||
font-size: 1.2rem;
|
||
font-weight: 500;
|
||
color: var(--dark-text-color);
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
#fileSelectModal .modal-title b,
|
||
#createTaskModal .modal-title b {
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 弹窗关闭按钮 */
|
||
#fileSelectModal .close,
|
||
#createTaskModal .close,
|
||
#editMetadataModal .close {
|
||
font-size: 1.4rem;
|
||
padding: 8px;
|
||
margin: -8px -8px -8px auto;
|
||
opacity: 1;
|
||
color: var(--dark-text-color);
|
||
transition: opacity 0.15s;
|
||
}
|
||
|
||
/* 修改关闭按钮样式，使用 bi-x-lg 图标 */
|
||
#fileSelectModal .close .bi-x-lg,
|
||
#createTaskModal .close .bi-x-lg,
|
||
#editMetadataModal .close .bi-x-lg,
|
||
.modal .close .bi-x-lg {
|
||
font-size: 1.2rem;
|
||
color: var(--dark-text-color);
|
||
opacity: 1;
|
||
position: relative;
|
||
top: 2px;
|
||
right: -2px; /* 向左移动2px */
|
||
}
|
||
|
||
#fileSelectModal .close:hover,
|
||
#createTaskModal .close:hover,
|
||
#editMetadataModal .close:hover {
|
||
opacity: 1;
|
||
color: var(--dark-text-color);
|
||
}
|
||
|
||
/* 弹窗主体样式 */
|
||
#fileSelectModal .modal-body,
|
||
#createTaskModal .modal-body,
|
||
#editMetadataModal .modal-body {
|
||
padding: 16px;
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
/* 创建任务模态框主内容区相对定位 */
|
||
#createTaskModal .modal-body,
|
||
#editMetadataModal .modal-body {
|
||
position: relative;
|
||
}
|
||
|
||
/* 创建任务模态框主内容区底部分割线 */
|
||
#createTaskModal .modal-body::after,
|
||
#editMetadataModal .modal-body::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 7px;
|
||
left: 16px;
|
||
right: 16px;
|
||
height: 1px;
|
||
background-color: var(--border-color);
|
||
}
|
||
|
||
/* 弹窗内警告框样式 */
|
||
#fileSelectModal .alert-warning {
|
||
font-size: 0.85rem; /* 保留特定的字体大小 */
|
||
}
|
||
|
||
/* 弹窗内面包屑导航样式 */
|
||
#fileSelectModal .breadcrumb {
|
||
background-color: var(--button-gray-background-color);
|
||
border-radius: 0px;
|
||
font-size: 0.85rem;
|
||
padding: 6.5px 12px 6px 12px; /* 上右下左内边距 */
|
||
margin-bottom: 8px;
|
||
border-top: 1px solid var(--border-color);
|
||
border-bottom: 1px solid var(--border-color);
|
||
display: flex; /* 使用flexbox布局 */
|
||
align-items: center; /* 垂直居中 */
|
||
flex-wrap: nowrap; /* 禁止换行，改为水平滚动 */
|
||
overflow-x: auto; /* 水平滚动 */
|
||
overflow-y: hidden; /* 隐藏垂直滚动 */
|
||
-webkit-overflow-scrolling: touch; /* iOS设备平滑滚动 */
|
||
-ms-overflow-style: none; /* IE 和 Edge 隐藏滚动条 */
|
||
scrollbar-width: none; /* Firefox 隐藏滚动条 */
|
||
width: 100%; /* 限制宽度为100% */
|
||
max-width: 100%; /* 限制最大宽度 */
|
||
}
|
||
/* 编辑元数据模态框：输入前标题灰底，统一输入高度与字体，与创建任务保持一致 */
|
||
#editMetadataModal .input-group-prepend .input-group-text {
|
||
background-color: var(--button-gray-background-color) !important;
|
||
}
|
||
#editMetadataModal .form-control,
|
||
#editMetadataModal .input-group-text,
|
||
#editMetadataModal .input-group .form-control::placeholder {
|
||
height: 32px;
|
||
font-size: 0.95rem; /* 与创建任务模态框的页面内容字号一致 */
|
||
}
|
||
#editMetadataModal .input-group-text,
|
||
#editMetadataModal .form-control,
|
||
#editMetadataModal .input-group-append .input-group-text {
|
||
border-color: var(--border-color);
|
||
}
|
||
|
||
/* 编辑模态：两列输入的横向间距 8px（每列左右各4px） */
|
||
#editMetadataModal .row > [class*="col-"] {
|
||
padding-right: 4px;
|
||
padding-left: 4px;
|
||
}
|
||
/* 抵消父级row默认的左右负margin，确保净间距为8px */
|
||
#editMetadataModal .row {
|
||
margin-right: -4px;
|
||
margin-left: -4px;
|
||
}
|
||
|
||
/* 灰底方块：第 / 季 统一尺寸并重叠边框 */
|
||
#editMetadataModal .input-group .input-group-text.square-append,
|
||
#editMetadataModal .input-group .input-group-prepend .input-group-text.square-append,
|
||
#editMetadataModal .input-group .input-group-append .input-group-text.square-append {
|
||
width: 32px;
|
||
height: 32px;
|
||
padding: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-color: var(--button-gray-background-color);
|
||
border-color: var(--border-color);
|
||
}
|
||
|
||
/* 重叠边框：后置灰块与输入之间、两端灰块与输入之间边框不重复 */
|
||
#editMetadataModal .input-group .input-group-prepend .input-group-text.square-append,
|
||
#editMetadataModal .input-group .input-group-append .input-group-text.square-append {
|
||
border-color: var(--border-color);
|
||
}
|
||
#editMetadataModal .input-group .input-group-prepend .input-group-text.square-append.season-left {
|
||
border-right: 0 !important; /* 取消右边框，由输入框左边框承担分隔线 */
|
||
width: 32px;
|
||
margin-right: 0;
|
||
}
|
||
#editMetadataModal .input-group .input-group-append .input-group-text.square-append.season-right {
|
||
border-left: 1px solid var(--border-color);
|
||
}
|
||
/* 修正：嵌入在 .form-control 内部的方块两侧边框不重复 */
|
||
#editMetadataModal .form-control .input-group-text.square-append {
|
||
border-left: none;
|
||
border-right: none;
|
||
}
|
||
|
||
/* 修正季数输入宽度默认值和展示 */
|
||
#editMetadataModal .edit-season-number {
|
||
box-sizing: border-box; /* 让边框计入总宽度 */
|
||
width: 32px; /* 基础宽度，允许内联样式按内容放大 */
|
||
min-width: 32px;
|
||
text-align: center;
|
||
padding: 0 8px; /* 提供足够内边距避免数字贴边被裁切 */
|
||
border-left: 1px solid var(--border-color); /* 使用输入框左边框作为唯一分隔线 */
|
||
margin-left: -1px; /* 将左边框与“第”的右侧对齐并覆盖，避免双线 */
|
||
}
|
||
|
||
/* 焦点态：与其他输入一致，仅边框变色，无阴影/扩展；左侧边线覆盖“第”的右边线 */
|
||
#editMetadataModal .edit-season-number:focus {
|
||
outline: none;
|
||
box-shadow: none !important;
|
||
border-color: var(--focus-border-color) !important;
|
||
border-left-color: var(--focus-border-color) !important;
|
||
margin-left: -1px; /* 焦点态保持覆盖，避免出现双线 */
|
||
}
|
||
|
||
/* 焦点态：保持四边高亮（左侧也显示蓝色），不改变布局 */
|
||
#editMetadataModal .edit-season-number:focus {
|
||
outline: none;
|
||
box-shadow: inset 0 0 0 1px #0d6efd, 0 0 0 0.2rem rgba(13,110,253,.25);
|
||
}
|
||
|
||
#fileSelectModal .breadcrumb-item {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-right: 10px; /* 为每个项目添加右边距 */
|
||
position: relative; /* 为伪元素定位提供参考 */
|
||
flex-shrink: 0; /* 防止项目被压缩 */
|
||
white-space: nowrap; /* 防止文本换行 */
|
||
}
|
||
|
||
/* 移除最后一个项目的右边距 */
|
||
#fileSelectModal .breadcrumb-item:last-child {
|
||
margin-right: 0;
|
||
}
|
||
|
||
#fileSelectModal .breadcrumb-item a {
|
||
color: var(--dark-text-color);
|
||
text-decoration: none;
|
||
padding: 0;
|
||
}
|
||
|
||
#fileSelectModal .breadcrumb-item a:hover {
|
||
color: var(--focus-border-color);
|
||
text-decoration: none;
|
||
}
|
||
|
||
#fileSelectModal .breadcrumb-item span {
|
||
padding: 0;
|
||
}
|
||
|
||
/* 首页图标右侧的特定斜杠样式 */
|
||
#fileSelectModal .breadcrumb > li:first-child:after {
|
||
content: "/";
|
||
color: var(--dark-text-color);
|
||
position: relative;
|
||
margin: 0 5px;
|
||
top: -1px; /* 调整第一个斜杠的垂直位置 */
|
||
left: 2px; /* 向右微调第一个斜杠的水平位置 */
|
||
margin-right: -9.5px; /* 使用margin-right负值代替padding-right负值 */
|
||
}
|
||
|
||
/* 隐藏Bootstrap默认的::before分隔符 */
|
||
#fileSelectModal .breadcrumb-item + .breadcrumb-item::before {
|
||
content: none; /* 禁用默认分隔符 */
|
||
display: none; /* 彻底隐藏元素 */
|
||
}
|
||
|
||
/* 重设分隔符的样式 */
|
||
#fileSelectModal .breadcrumb-item:not(:last-child):not(:first-child)::after {
|
||
content: "/";
|
||
color: var(--dark-text-color);
|
||
position: absolute;
|
||
right: -11px; /* 调整位置 */
|
||
margin: 0 auto;
|
||
top: -1px; /* 微调其他斜杠的垂直位置 */
|
||
}
|
||
|
||
#fileSelectModal .breadcrumb-item .bi-house-door {
|
||
font-size: 0.9rem;
|
||
position: relative;
|
||
top: 0px;
|
||
left: 0px;
|
||
}
|
||
|
||
#fileSelectModal .breadcrumb-item.cursor-pointer:hover {
|
||
background-color: transparent; /* 移除面包屑导航中home图标的悬停背景色 */
|
||
}
|
||
|
||
#fileSelectModal .breadcrumb-item .text-muted {
|
||
color: var(--dark-text-color) !important; /* 修改灰色文本颜色为更浅的灰色 */
|
||
}
|
||
|
||
/* 弹窗内表格样式 - 与主界面表格区分 */
|
||
#fileSelectModal .table {
|
||
margin-bottom: 0;
|
||
font-size: 0.85rem;
|
||
table-layout: fixed; /* 使用固定表格布局，确保列宽设置生效 */
|
||
width: 100%;
|
||
}
|
||
|
||
#fileSelectModal .table th {
|
||
background-color: var(--button-gray-background-color);
|
||
border-top: 1px solid var(--border-color);
|
||
border-bottom: 1px solid var(--border-color);
|
||
color: var(--dark-text-color);
|
||
font-weight: 600;
|
||
padding: 7px 12.5px 6.5px 12.5px !important; /* 表头上右下左内边距 */
|
||
font-size: 0.85rem;
|
||
white-space: nowrap;
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 5;
|
||
vertical-align: middle; /* 添加：垂直居中对齐 */
|
||
height: 40px !important; /* 添加：自动高度，确保与内容一致 */
|
||
}
|
||
|
||
/* 模态框表格列宽设置 - 基于内容类型 */
|
||
/* 文件名列 - 自动占用剩余空间 */
|
||
#fileSelectModal .table .col-filename {
|
||
width: auto; /* 自动分配剩余空间 */
|
||
min-width: 230px !important; /* 添加!important确保优先级 */
|
||
flex-shrink: 0; /* 防止在小屏幕上压缩 */
|
||
}
|
||
|
||
/* 重命名列 - 自动占用剩余空间 */
|
||
#fileSelectModal .table .col-rename {
|
||
width: auto; /* 自动分配剩余空间 */
|
||
min-width: 230px !important; /* 添加!important确保优先级 */
|
||
flex-shrink: 0; /* 防止在小屏幕上压缩 */
|
||
}
|
||
|
||
/* 大小列 - 固定宽度 */
|
||
#fileSelectModal .table .col-size {
|
||
width: 90px;
|
||
min-width: 90px;
|
||
max-width: 90px;
|
||
}
|
||
|
||
/* 修改日期列 - 固定宽度 */
|
||
#fileSelectModal .table .col-date {
|
||
width: 140px;
|
||
min-width: 140px;
|
||
max-width: 140px;
|
||
}
|
||
|
||
/* 操作列 - 固定宽度 */
|
||
#fileSelectModal .table .col-action {
|
||
width: 188px;
|
||
min-width: 188px;
|
||
max-width: 188px;
|
||
text-align: left;
|
||
padding-left: 12px !important;
|
||
}
|
||
|
||
/* 确保单元格内容溢出时正确显示 */
|
||
#fileSelectModal .table td {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
/* 添加模态框表格中的排序箭头样式，与主表格一致 */
|
||
#fileSelectModal .table th .bi-arrow-down,
|
||
#fileSelectModal .table th .bi-arrow-up {
|
||
font-size: 0.85rem;
|
||
position: relative;
|
||
top: 0px;
|
||
opacity: 1;
|
||
font-weight: normal !important;
|
||
}
|
||
|
||
#fileSelectModal .table td {
|
||
padding: 5.5px 12.5px 7px 12px !important; /* 单元格上右下左内边距 */
|
||
vertical-align: middle;
|
||
border-bottom: 1px solid var(--border-color);
|
||
color: var(--dark-text-color);
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
#fileSelectModal .table .text-success {
|
||
color: #28a745 !important;
|
||
}
|
||
|
||
#fileSelectModal .table .text-danger {
|
||
color: #dc3545 !important;
|
||
}
|
||
|
||
#fileSelectModal .table .text-warning {
|
||
color: #098eff !important;
|
||
}
|
||
|
||
/* 弹窗内表格行悬停效果 */
|
||
#fileSelectModal .table tr.cursor-pointer:hover {
|
||
background-color: var(--button-gray-background-color);
|
||
cursor: pointer;
|
||
}
|
||
|
||
#fileSelectModal .bi-file-earmark,
|
||
#fileSelectModal .bi-file-earmark-play,
|
||
#fileSelectModal .bi-file-earmark-music,
|
||
#fileSelectModal .bi-file-earmark-image,
|
||
#fileSelectModal .bi-file-earmark-text,
|
||
#fileSelectModal .bi-file-earmark-richtext,
|
||
#fileSelectModal .bi-file-earmark-zip,
|
||
#fileSelectModal .bi-file-earmark-font,
|
||
#fileSelectModal .bi-file-earmark-code,
|
||
#fileSelectModal .bi-file-earmark-pdf,
|
||
#fileSelectModal .bi-file-earmark-word,
|
||
#fileSelectModal .bi-file-earmark-excel,
|
||
#fileSelectModal .bi-file-earmark-ppt,
|
||
#fileSelectModal .bi-file-earmark-medical {
|
||
color: var(--dark-text-color);
|
||
font-size: 0.9rem;
|
||
margin-right: 5px;
|
||
position: relative;
|
||
top: 0px !important; /* 负值向上移动，正值向下移动 */
|
||
}
|
||
|
||
/* 弹窗删除链接样式 */
|
||
#fileSelectModal .table td a {
|
||
color: var(--dark-text-color);
|
||
text-decoration: none;
|
||
font-size: 0.85rem;
|
||
cursor: pointer;
|
||
}
|
||
|
||
#fileSelectModal .table td a:hover {
|
||
color: #dc3545;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* 弹窗底部样式 */
|
||
#fileSelectModal .modal-footer,
|
||
#createTaskModal .modal-footer,
|
||
#editMetadataModal .modal-footer {
|
||
border-top: none; /* 隐藏底部分割线 */
|
||
padding: 0px 16px 12px 16px; /* 上 右 下 左：设置上内边距为0 */
|
||
margin-top: -4px; /* 使用负margin使整个底部区域向上移动 */
|
||
justify-content: flex-end;
|
||
gap: 0px; /* 按钮之间的间距 */
|
||
flex-wrap: wrap;
|
||
padding-right: 12px; /* 右边距 */
|
||
}
|
||
|
||
/* 添加文件选择模态框左下角文件信息文本的左边距样式 */
|
||
#fileSelectModal .modal-footer .file-selection-info,
|
||
#createTaskModal .modal-footer .file-selection-info,
|
||
#editMetadataModal .modal-footer .file-selection-info {
|
||
margin-left: 0px; /* 与表格左边距保持一致 */
|
||
font-size: 0.85rem !important; /* 覆盖内联样式 */
|
||
}
|
||
|
||
#fileSelectModal .modal-footer span,
|
||
#createTaskModal .modal-footer span,
|
||
#editMetadataModal .modal-footer span {
|
||
font-size: 0.85rem;
|
||
color: var(--dark-text-color);
|
||
margin-right: auto;
|
||
}
|
||
|
||
/* 弹窗底部按钮样式 */
|
||
#fileSelectModal .btn-primary,
|
||
#createTaskModal .btn-primary,
|
||
#editMetadataModal .btn-primary {
|
||
background-color: var(--focus-border-color);
|
||
border-color: var(--focus-border-color);
|
||
font-size: 0.85rem;
|
||
height: 32px;
|
||
min-width: 32px;
|
||
padding: 0 8px;
|
||
border-radius: 6px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
/* 弹窗底部按钮内的标记样式 */
|
||
#fileSelectModal .btn-primary .badge,
|
||
#createTaskModal .btn-primary .badge,
|
||
#editMetadataModal .btn-primary .badge {
|
||
margin-left: 5px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
#fileSelectModal .btn-primary:hover,
|
||
#createTaskModal .btn-primary:hover,
|
||
#editMetadataModal .btn-primary:hover {
|
||
background-color: #0A42CC !important;
|
||
border-color: #0A42CC !important;
|
||
}
|
||
|
||
#fileSelectModal .btn-sm,
|
||
#createTaskModal .btn-sm {
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
/* 弹窗底部有文本内容的按钮样式 */
|
||
#fileSelectModal .btn-primary:has(span),
|
||
#createTaskModal .btn-primary:has(span) {
|
||
width: auto;
|
||
padding: 0 8px;
|
||
}
|
||
|
||
#fileSelectModal .btn-primary:not(:has(span)),
|
||
#createTaskModal .btn-primary:not(:has(span)) {
|
||
width: auto;
|
||
min-width: 32px;
|
||
padding: 0 8px;
|
||
}
|
||
|
||
#fileSelectModal .btn-sm,
|
||
#createTaskModal .btn-sm {
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
#fileSelectModal .badge-light {
|
||
background-color: #f8f9fa;
|
||
color: var(--dark-text-color);
|
||
font-size: 0.8rem;
|
||
font-weight: normal;
|
||
}
|
||
|
||
/* 按钮中任务名称标记样式 */
|
||
.btn-primary .badge-light {
|
||
background-color: transparent !important;
|
||
color: inherit !important;
|
||
font-size: inherit !important;
|
||
font-weight: normal !important;
|
||
padding: 0 !important;
|
||
margin: 0 !important;
|
||
display: inline-flex !important;
|
||
align-items: center !important;
|
||
height: auto !important;
|
||
line-height: 1 !important;
|
||
vertical-align: middle !important;
|
||
position: relative !important;
|
||
top: 0px !important;
|
||
}
|
||
|
||
/* 加载状态图标样式 */
|
||
#fileSelectModal .spinner-border-sm {
|
||
width: 1rem;
|
||
height: 1rem;
|
||
border-width: 0.15em;
|
||
margin-left: 5px;
|
||
}
|
||
|
||
/* 统一创建/编辑任务 与 编辑元数据 模态框的标题转圈样式 */
|
||
#createTaskModal .spinner-border-sm,
|
||
#editMetadataModal .spinner-border-sm {
|
||
width: 1rem;
|
||
height: 1rem;
|
||
border-width: 0.15em;
|
||
margin-left: 5px;
|
||
}
|
||
|
||
/* --------------- 深度搜索任务建议样式 --------------- */
|
||
.task-suggestions {
|
||
width: 100%;
|
||
max-height: 482px;
|
||
overflow-y: auto;
|
||
transform: translate(0, 0);
|
||
top: 100%;
|
||
margin-top: 8px;
|
||
margin-bottom: 8px;
|
||
border: 1px solid #0D53FF;
|
||
border-radius: 6px;
|
||
z-index: 1021;
|
||
padding: 0; /* 移除内部的内边距 */
|
||
min-height: 30px; /* 改为30px，加上1px上边框和1px下边框，总高度为32px */
|
||
box-sizing: border-box; /* 确保边框计入总高度 */
|
||
}
|
||
|
||
/* 移除下拉菜单项的内部空白 */
|
||
.task-suggestions .dropdown-item {
|
||
padding: 0 8px;
|
||
margin: 0;
|
||
height: 30px; /* 内容高度改为30px */
|
||
line-height: 30px; /* 行高同样调整 */
|
||
box-sizing: border-box;
|
||
color: var(--dark-text-color); /* 文本颜色 */
|
||
transition: background-color 0.2s, color 0.2s;
|
||
font-size: 14px !important; /* 文本字号 */
|
||
}
|
||
|
||
/* 下拉菜单项悬停状态 */
|
||
.task-suggestions .dropdown-item:hover {
|
||
background-color: var(--button-gray-background-color); /* 悬停背景色 */
|
||
color: var(--dark-text-color); /* 悬停文本颜色 */
|
||
}
|
||
|
||
/* 下拉菜单项点击状态 */
|
||
.task-suggestions .dropdown-item:active {
|
||
background-color: var(--focus-border-color) !important; /* 点击背景色 */
|
||
color: #fff !important; /* 点击文本颜色 */
|
||
}
|
||
|
||
/* 链接样式 */
|
||
.task-suggestions .dropdown-item small a {
|
||
color: var(--light-text-color); /* 链接颜色 */
|
||
text-decoration: none;
|
||
transition: color 0.2s;
|
||
font-size: 14px; /* 与前面文本大小一致 */
|
||
}
|
||
|
||
/* 链接悬停样式 */
|
||
.task-suggestions .dropdown-item:hover small a {
|
||
color: var(--dark-text-color); /* 悬停时链接颜色 */
|
||
}
|
||
|
||
/* 链接点击状态样式 */
|
||
.task-suggestions .dropdown-item:active small a {
|
||
color: #fff !important; /* 点击时链接颜色变为白色 */
|
||
}
|
||
|
||
/* "正在搜索中"状态的样式 */
|
||
.task-suggestions .dropdown-item.text-muted {
|
||
height: 30px; /* 高度为30px，与边框一起刚好32px */
|
||
line-height: 30px;
|
||
padding: 0 8px !important; /* 添加左右内边距 */
|
||
font-size: 14px !important; /* 与其他文本保持一致 */
|
||
box-sizing: border-box;
|
||
text-align: left !important; /* 左对齐 */
|
||
color: var(--light-text-color) !important;
|
||
}
|
||
|
||
.task-suggestions .dropdown-item.text-muted:hover {
|
||
color: var(--dark-text-color) !important; /* 悬停时链接颜色 */
|
||
}
|
||
|
||
/* "以下资源来自CloudSaver搜索"提示文本样式 */
|
||
.task-suggestions .dropdown-item.text-muted:not(.text-center) {
|
||
font-size: 14px !important; /* 与其他文本保持一致 */
|
||
text-align: left !important; /* 左对齐 */
|
||
padding-left: 8px !important; /* 添加左内边距 */
|
||
color: var(--light-text-color) !important;
|
||
}
|
||
|
||
.task-suggestions .dropdown-item.text-muted:hover {
|
||
color: var(--dark-text-color) !important; /* 悬停时链接颜色 */
|
||
}
|
||
|
||
/* "以下资源来自CloudSaver搜索"提示文本点击状态样式 */
|
||
.task-suggestions .dropdown-item.text-muted:active {
|
||
color: #fff !important; /* 点击时文本颜色变为白色 */
|
||
}
|
||
|
||
/* --------------- JSON编辑器样式 --------------- */
|
||
table.jsoneditor-tree>tbody>tr.jsoneditor-expandable:first-child {
|
||
display: none;
|
||
}
|
||
|
||
/* 自定义JSON编辑器样式 */
|
||
div.jsoneditor {
|
||
border: 1px solid #0D53FF !important;
|
||
border-radius: 6px !important;
|
||
}
|
||
|
||
div.jsoneditor-menu {
|
||
background-color: #0D53FF !important;
|
||
border-bottom: 1px solid #0D53FF !important;
|
||
border-top-left-radius: 5px !important;
|
||
border-top-right-radius: 5px !important;
|
||
height: 31px !important;
|
||
padding: 0 6px !important;
|
||
line-height: 31px !important;
|
||
}
|
||
|
||
div.jsoneditor-menu > button,
|
||
div.jsoneditor-menu > div.jsoneditor-modes > button {
|
||
height: 24px !important;
|
||
line-height: 24px !important;
|
||
margin-top: 0px !important;
|
||
position: relative !important;
|
||
top: 2px !important; /* 编辑器顶部图标高度 */
|
||
}
|
||
|
||
/* 上一步和下一步按钮单独下移 */
|
||
div.jsoneditor-menu > button.jsoneditor-undo,
|
||
div.jsoneditor-menu > button.jsoneditor-redo {
|
||
top: 3px !important;
|
||
}
|
||
|
||
div.jsoneditor-contextmenu ul li button.jsoneditor-selected,
|
||
div.jsoneditor-contextmenu ul li button.jsoneditor-selected:hover,
|
||
div.jsoneditor-contextmenu ul li button.jsoneditor-selected:focus {
|
||
background-color: #0D53FF !important;
|
||
color: white !important;
|
||
}
|
||
|
||
div.jsoneditor-tree button:focus {
|
||
background-color: #e6f1ff !important;
|
||
}
|
||
|
||
div.jsoneditor-tree button.jsoneditor-contextmenu:hover {
|
||
background-color: #e6f1ff !important;
|
||
}
|
||
|
||
div.jsoneditor-tree div.jsoneditor-show-more a:hover {
|
||
color: #0D53FF !important;
|
||
}
|
||
|
||
div.jsoneditor-tree div.jsoneditor-show-more {
|
||
background: linear-gradient(to right, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.8));
|
||
}
|
||
|
||
div.jsoneditor-statusbar {
|
||
border-top: 1px solid var(--border-color) !important;
|
||
background-color: #f5f5f5 !important;
|
||
}
|
||
|
||
button.jsoneditor-more {
|
||
background-color: #0D53FF !important;
|
||
}
|
||
|
||
button.jsoneditor-more:hover {
|
||
background-color: #0030cc !important;
|
||
}
|
||
|
||
div.jsoneditor-tree button.jsoneditor-button:focus {
|
||
background-color: #e6f1ff !important;
|
||
}
|
||
|
||
/* --------------- 登录页样式 --------------- */
|
||
/* 登录卡片容器 - 设置宽度和阴影效果 */
|
||
.login-card {
|
||
width: 340px;
|
||
background-color: white;
|
||
border-radius: 10px;
|
||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
|
||
padding: 0;
|
||
text-align: center;
|
||
overflow: hidden;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
/* 登录页标题区域 - 浅灰色背景 */
|
||
.login-header {
|
||
background-color: #f7f7f9;
|
||
padding: 30px;
|
||
margin-bottom: 0;
|
||
height: 100px; /* 设置固定高度 */
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center; /* 垂直居中内容 */
|
||
}
|
||
|
||
/* 登录页表单区域 - 白色背景 */
|
||
.login-body {
|
||
padding: 30px;
|
||
}
|
||
|
||
/* 登录页主标题样式 */
|
||
.login-title {
|
||
font-size: 28px;
|
||
color: var(--dark-text-color);
|
||
margin: 6px 0 5px 0;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 登录页主标题链接样式 */
|
||
.login-title a {
|
||
color: var(--dark-text-color);
|
||
text-decoration: none;
|
||
transition: color 0.3s;
|
||
}
|
||
|
||
/* 登录页主标题链接悬停样式 */
|
||
.login-title a:hover {
|
||
color: #0A42CC;
|
||
text-decoration: none;
|
||
}
|
||
|
||
/* 登录页副标题样式 */
|
||
.login-subtitle {
|
||
font-size: 16px;
|
||
color: #808080;
|
||
margin: -5px 0 5px 0;
|
||
font-weight: normal;
|
||
}
|
||
|
||
/* 登录页表单组样式 */
|
||
.login-page .form-group {
|
||
margin-bottom: 0;
|
||
position: relative;
|
||
}
|
||
|
||
/* 登录页输入框样式 */
|
||
.login-page .form-control {
|
||
width: 100%;
|
||
height: 48px;
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 6px;
|
||
padding: 0 15px;
|
||
font-size: 16px;
|
||
transition: all 0.3s;
|
||
box-sizing: border-box;
|
||
margin-bottom: 8px; /* 输入框之间的间距 */
|
||
}
|
||
|
||
/* 登录页输入框聚焦状态 */
|
||
.login-page .form-control:focus {
|
||
border-color: var(--focus-border-color);
|
||
outline: none;
|
||
box-shadow: none;
|
||
}
|
||
|
||
/* 登录按钮样式 */
|
||
.login-page .btn {
|
||
width: 100%;
|
||
height: 32px;
|
||
background-color: var(--focus-border-color);
|
||
color: white;
|
||
border: none;
|
||
border-radius: 6px;
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: background-color 0.3s;
|
||
margin-top: 0;
|
||
display: flex;
|
||
align-items: center; /* 垂直居中 */
|
||
justify-content: center; /* 水平居中 */
|
||
}
|
||
|
||
/* 登录按钮悬停状态 */
|
||
.login-page .btn:hover {
|
||
background-color: #0A42CC;
|
||
}
|
||
|
||
/* 登录页错误提示样式 */
|
||
.login-page .alert {
|
||
background-color: #ffebee;
|
||
color: #dc3545;
|
||
height: 32px;
|
||
padding: 0 10px;
|
||
border-radius: 6px;
|
||
margin-bottom: 8px;
|
||
display: flex;
|
||
align-items: center; /* 垂直居中 */
|
||
justify-content: center; /* 水平居中 */
|
||
font-size: 16px;
|
||
}
|
||
|
||
/* --------------- 图标样式 --------------- */
|
||
.navbar-action-btn .bi-check2 {
|
||
font-size: 1.4rem;
|
||
position: relative;
|
||
top: 1px;
|
||
}
|
||
|
||
.navbar-action-btn .bi-caret-right,
|
||
.navbar-action-btn .bi-chevron-expand {
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
/* 页面宽度图标样式 */
|
||
.navbar-action-btn .bi-arrows {
|
||
font-size: 1.09rem;
|
||
}
|
||
|
||
.navbar-toggler-square .bi-list {
|
||
color: #fff;
|
||
font-size: 1.3rem;
|
||
position: relative;
|
||
top: 0.5px; /* 向下微调 */
|
||
transition: color 0.2s; /* 添加颜色过渡效果 */
|
||
}
|
||
|
||
/* 侧边栏菜单项图标样式 */
|
||
.sidebar .nav-link .bi-list-ul {
|
||
font-size: 1.1rem;
|
||
position: relative;
|
||
top: 0.5px; /* 向下微调 */
|
||
}
|
||
|
||
.sidebar .nav-link .bi-gear {
|
||
font-size: 1.05rem;
|
||
position: relative;
|
||
top: 0.5px; /* 向下微调 */
|
||
}
|
||
|
||
.sidebar .nav-link .bi-clock-history {
|
||
font-size: 1.015rem;
|
||
}
|
||
|
||
.sidebar .nav-link .bi-archive {
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.sidebar .nav-link .bi-film {
|
||
font-size: 0.94rem;
|
||
}
|
||
|
||
.sidebar .nav-link .bi-calendar3-week {
|
||
font-size: 0.94rem;
|
||
}
|
||
|
||
.sidebar .nav-link .bi-power {
|
||
font-size: 1.27rem;
|
||
}
|
||
|
||
.bottom-links .nav-link .bi-book {
|
||
font-size: 0.95rem;
|
||
position: relative;
|
||
top: 0.5px; /* 向下微调 */
|
||
}
|
||
|
||
.bottom-links .nav-link .bi-wechat {
|
||
font-size: 1rem;
|
||
position: relative;
|
||
top: -0.5px; /* 向上微调 */
|
||
}
|
||
|
||
.bottom-links .nav-link .nav-text {
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
/* 侧边栏菜单项图标调整 */
|
||
.sidebar-collapsed .nav-link i {
|
||
margin-right: 0;
|
||
margin-left: 0;
|
||
width: auto;
|
||
display: flex;
|
||
justify-content: center;
|
||
position: static; /* 保持在中心位置，不要使用绝对定位 */
|
||
}
|
||
|
||
/* 侧边栏折叠时确保内容完全居中且背景色填充完整 */
|
||
.sidebar-collapsed .sidebar-sticky {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.sidebar-collapsed .nav.flex-column {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.sidebar-collapsed .nav-item {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
/* 确保选中状态背景色撑满 */
|
||
.sidebar-collapsed .nav-link,
|
||
.sidebar-collapsed .nav-link.active {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 侧边栏展开状态下的菜单项调整 */
|
||
.sidebar:not(.sidebar-collapsed) .nav-link {
|
||
padding-left: 8.5px; /* 原来是7px，向右移动2px */
|
||
}
|
||
|
||
.sidebar:not(.sidebar-collapsed) .nav-link i {
|
||
margin-left: 8.5px; /* 原来是7px，向右移动2px */
|
||
}
|
||
|
||
/* 底部链接样式调整，向右移动2px */
|
||
.sidebar:not(.sidebar-collapsed) .bottom-links .nav-link {
|
||
padding-left: 8.5px; /* 原来是7px，向右移动2px */
|
||
}
|
||
|
||
.sidebar:not(.sidebar-collapsed) .bottom-links .nav-link i {
|
||
margin-left: 8.5px; /* 原来是7px，向右移动2px */
|
||
}
|
||
|
||
.sidebar-collapsed .bottom-links .nav-link {
|
||
justify-content: center;
|
||
padding-left: 0;
|
||
padding-right: 0;
|
||
width: 100%;
|
||
}
|
||
|
||
.sidebar-collapsed .bottom-links .nav-item {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.sidebar-collapsed .bottom-links .nav-text {
|
||
opacity: 0;
|
||
width: 0;
|
||
margin: 0;
|
||
padding: 0;
|
||
display: block;
|
||
visibility: hidden;
|
||
max-width: 0;
|
||
}
|
||
|
||
.bottom-links .nav-link .bi-github {
|
||
font-size: 1rem;
|
||
}
|
||
|
||
/* 添加固定宽度容器保持图标位置 */
|
||
.sidebar .nav-link .icon-container {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 20px;
|
||
transition: none; /* 防止过渡动画影响图标位置 */
|
||
position: relative;
|
||
}
|
||
|
||
/* 确保侧边栏折叠/展开过程中图标位置固定 */
|
||
.sidebar .nav-link i {
|
||
position: static; /* 覆盖上面的relative设置 */
|
||
transition: none; /* 禁用图标的过渡动画，防止它跟随父容器移动 */
|
||
}
|
||
|
||
/* --------------- 统一页面字号 --------------- */
|
||
/* 页面标题统一字号 (适用于不在main中的标题) */
|
||
.row.title h2:not(main .row.title h2) {
|
||
font-size: 1.2rem !important;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
/* 页面内容字号 */
|
||
main .form-control,
|
||
main .input-group-text,
|
||
main p,
|
||
main label,
|
||
main .table td,
|
||
main .table th {
|
||
font-size: 0.95rem;
|
||
}
|
||
|
||
/* 表格头部字号 */
|
||
.table th {
|
||
font-size: 0.95rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* 按钮中的文字大小 */
|
||
.btn {
|
||
font-size: 0.95rem;
|
||
}
|
||
|
||
/* 菜单项字号 */
|
||
.sidebar .nav-link {
|
||
font-size: 0.95rem;
|
||
}
|
||
|
||
/* 设置任务列表页面中运行和删除按钮的布局 */
|
||
.task .col-auto {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
gap: 8px; /* 设置按钮之间的间距为8px */
|
||
}
|
||
|
||
/* 确保按钮大小一致 */
|
||
.task .btn-outline-primary,
|
||
.task .btn-outline-danger,
|
||
.task .btn-warning,
|
||
.task .btn-outline-plex,
|
||
.task .btn-outline-alist,
|
||
.row .btn-outline-primary {
|
||
width: 32px;
|
||
height: 32px;
|
||
padding: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 6px !important;
|
||
}
|
||
|
||
/* 播放按钮样式 */
|
||
.btn-outline-primary {
|
||
border-color: #0D53FF;
|
||
color: #0D53FF;
|
||
}
|
||
|
||
.btn-outline-primary:hover {
|
||
background-color: #0D53FF;
|
||
border-color: #0D53FF;
|
||
color: #fff;
|
||
}
|
||
|
||
/* 删除按钮样式 */
|
||
.btn-outline-danger {
|
||
border-color: #dc3545;
|
||
color: #dc3545;
|
||
}
|
||
|
||
.btn-outline-danger:hover {
|
||
background-color: #dc3545;
|
||
border-color: #dc3545;
|
||
color: #fff;
|
||
}
|
||
|
||
/* 播放和删除图标大小 */
|
||
.bi-caret-right {
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
.bi-trash3 {
|
||
font-size: 1rem;
|
||
}
|
||
|
||
/* 添加移除图标大小 */
|
||
.bi-plus-lg, .bi-dash-lg {
|
||
font-size: 1.15rem;
|
||
position: relative;
|
||
top: -0.2px; /* 将图标向上移动 */
|
||
}
|
||
|
||
/* 替换Bootstrap默认的深色文本 */
|
||
:root {
|
||
--dark-text-color: #404040;
|
||
--light-text-color: #b1b1b3;
|
||
--border-color: #e3e3e5; /* 统一边框颜色变量 */
|
||
--focus-border-color: #0D53FF; /* 输入框聚焦时的边框颜色 */
|
||
--shadow-spread: 0; /* 统一阴影扩散距离设为0 */
|
||
--button-gray-background-color: #ededf0; /* 按钮灰色背景颜色 */
|
||
}
|
||
|
||
/* 覆盖Bootstrap原生的按钮聚焦样式 */
|
||
.btn.focus, .btn:focus {
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
body {
|
||
color: var(--dark-text-color);
|
||
}
|
||
|
||
.text-body {
|
||
color: var(--dark-text-color) !important;
|
||
}
|
||
|
||
.table:not(.table-dark) {
|
||
color: var(--dark-text-color);
|
||
}
|
||
|
||
.dropdown-item,
|
||
.dropdown-header {
|
||
color: var(--dark-text-color);
|
||
}
|
||
|
||
.form-control,
|
||
.form-control:focus,
|
||
.custom-select,
|
||
.custom-file-label,
|
||
.custom-file-label::after {
|
||
color: var(--dark-text-color);
|
||
}
|
||
|
||
.input-group-text {
|
||
color: var(--dark-text-color);
|
||
}
|
||
|
||
.list-group-item-action,
|
||
.list-group-item-action:focus,
|
||
.list-group-item-action:hover {
|
||
color: var(--dark-text-color);
|
||
}
|
||
|
||
.nav-tabs .nav-link,
|
||
.nav-tabs .nav-link.active {
|
||
color: var(--dark-text-color);
|
||
}
|
||
|
||
.popover-body {
|
||
color: var(--dark-text-color);
|
||
}
|
||
|
||
/* 任务列表页面中的任务标题颜色 */
|
||
.task .btn.btn-block.text-left {
|
||
color: var(--dark-text-color);
|
||
transition: color 0.2s ease-in-out;
|
||
}
|
||
|
||
/* 历史记录页面的文本和表格内容 */
|
||
.table td,
|
||
.text-truncate,
|
||
.expanded-text,
|
||
.table th,
|
||
.cursor-pointer {
|
||
color: var(--dark-text-color);
|
||
}
|
||
|
||
/* 模态框和其他元素文本 */
|
||
.modal-title,
|
||
.modal-body,
|
||
.form-check-label,
|
||
.form-group label,
|
||
.breadcrumb-item,
|
||
.breadcrumb,
|
||
.small,
|
||
.col-form-label {
|
||
color: var(--dark-text-color);
|
||
}
|
||
|
||
/* 设置输入框占位符的颜色 */
|
||
.form-control::placeholder {
|
||
color: var(--light-text-color); /* 修改占位符颜色 */
|
||
}
|
||
|
||
/* 设置禁用状态下输入框的背景色 */
|
||
.form-control:disabled,
|
||
.form-control[readonly] {
|
||
background-color: #ededf0 !important;
|
||
opacity: 1;
|
||
}
|
||
|
||
/* 保持侧边栏激活状态的导航链接为白色 */
|
||
.sidebar .nav-link.active {
|
||
color: white !important;
|
||
}
|
||
|
||
/* 设置侧边栏背景色 */
|
||
.sidebar.bg-light {
|
||
background-color: #f7f7f9 !important;
|
||
}
|
||
|
||
/* 设置任务列表之间的分隔线颜色 */
|
||
.task hr {
|
||
border-color: var(--border-color); /* 使用变量替代硬编码颜色 */
|
||
margin-bottom: 8px; /* 分隔线与下方任务标题的距离 */
|
||
margin-top: 1px; /* 分隔线与上方任务标题的距离 */
|
||
}
|
||
|
||
/* 添加任务按钮上方的分割线样式 */
|
||
.task-divider {
|
||
border-color: var(--border-color); /* 使用变量替代硬编码颜色 */
|
||
margin-bottom: 8px; /* 分隔线与下方添加任务按钮的距离 */
|
||
margin-top: 1px; /* 分隔线与上方最后一个任务的距离 */
|
||
}
|
||
|
||
/* 设置任务标题行样式 */
|
||
.task .form-group.row[style*="align-items:center"] {
|
||
margin-bottom: 8px; /* 设置标题行与下方内容间距为8px */
|
||
padding-bottom: 0;
|
||
padding-top: 8px; /* 设置标题行与上方分隔线的间距为8px */
|
||
}
|
||
|
||
/* 设置任务标题按钮样式 */
|
||
.task .btn.btn-block.text-left {
|
||
color: var(--dark-text-color);
|
||
padding: 4px 8px; /* 调整内边距 */
|
||
padding-left: 6px; /* 桌面模式下任务标题左边距 */
|
||
font-size: 0.95rem; /* 与输入框字体大小一致 */
|
||
font-weight: normal; /* 标准字重 */
|
||
line-height: 1.5; /* 与输入框行高一致 */
|
||
letter-spacing: normal; /* 标准字间距 */
|
||
}
|
||
|
||
/* 任务行按钮样式 */
|
||
.task .col-auto .btn {
|
||
margin-top: 0; /* 确保按钮没有额外的上边距 */
|
||
}
|
||
|
||
/* 设置任务栏每一条的上下行距 */
|
||
.task .form-group.row {
|
||
margin-bottom: 8px; /* 设置行之间的间距为8px */
|
||
padding-top: 0;
|
||
padding-bottom: 0;
|
||
}
|
||
|
||
/* 任务列表内任务标题参数 */
|
||
.task .form-group.row .col-form-label {
|
||
padding-top: 4px;
|
||
padding-bottom: 4px;
|
||
font-size: 0.95rem; /* 与输入框字体大小一致 */
|
||
font-weight: normal; /* 标准字重 */
|
||
line-height: 1.5; /* 与输入框行高一致 */
|
||
letter-spacing: normal; /* 标准字间距 */
|
||
position: relative; /* 添加相对定位 */
|
||
top: 0.5px; /* 文本下移0.5px */
|
||
left: 3.5px;
|
||
}
|
||
|
||
/* 复位执行周期选项组（不受左偏移影响） */
|
||
.task .form-group.row .col-sm-10.col-form-label {
|
||
left: 0; /* 取消左偏移 */
|
||
}
|
||
|
||
/* 设置任务配置选项标签列的最大宽度（配置选项与配置框的距离） */
|
||
.task .form-group.row .col-sm-2 {
|
||
max-width: 104px; /* 设置最大宽度为150px */
|
||
min-width: 104px; /* 保持最小宽度一致 */
|
||
width: 104px; /* 固定宽度 */
|
||
}
|
||
|
||
/* 任务配置选项输入框列自适应 */
|
||
.task .form-group.row .col-sm-10 {
|
||
width: calc(100% - 104px); /* 计算剩余宽度 */
|
||
max-width: calc(100% - 104px); /* 最大宽度也应该计算 */
|
||
flex: 1; /* 允许伸缩 */
|
||
}
|
||
|
||
/* 表单输入框间距 */
|
||
.task .form-group.row .form-control,
|
||
.task .form-group.row .input-group {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
/* 添加任务列表的容器样式 */
|
||
.task.mb-3 {
|
||
margin-bottom: 8px !important; /* 统一任务项之间的间距为8px */
|
||
}
|
||
|
||
/* 设置输入框焦点状态样式 */
|
||
.form-control:focus {
|
||
border-color: var(--focus-border-color) !important;
|
||
border-width: 1px;
|
||
box-shadow: none;
|
||
outline: none;
|
||
}
|
||
|
||
/* 按钮通用点击效果 */
|
||
.btn:active,
|
||
.btn:focus {
|
||
box-shadow: none;
|
||
outline: none;
|
||
}
|
||
|
||
/* 给特定按钮类型添加特定颜色的阴影效果 */
|
||
.btn-outline-primary:active,
|
||
.btn-outline-primary:focus {
|
||
box-shadow: none;
|
||
outline: none;
|
||
}
|
||
|
||
.btn-outline-danger:active,
|
||
.btn-outline-danger:focus {
|
||
box-shadow: none;
|
||
outline: none;
|
||
}
|
||
|
||
.btn-warning:active,
|
||
.btn-warning:focus {
|
||
box-shadow: none;
|
||
outline: none;
|
||
}
|
||
|
||
.btn-primary:active,
|
||
.btn-primary:focus {
|
||
box-shadow: none;
|
||
outline: none;
|
||
}
|
||
|
||
.btn-outline-secondary:active,
|
||
.btn-outline-secondary:focus {
|
||
box-shadow: none;
|
||
outline: none;
|
||
}
|
||
|
||
/* 隐藏日期输入框的原生日历图标 */
|
||
.date-input-no-icon::-webkit-calendar-picker-indicator {
|
||
display: none;
|
||
-webkit-appearance: none;
|
||
}
|
||
|
||
/* 确保Firefox中也能隐藏日期选择器图标 */
|
||
.date-input-no-icon {
|
||
appearance: textfield;
|
||
-moz-appearance: textfield;
|
||
}
|
||
|
||
/* 防止鼠标悬停在日期输入框末尾时显示指针样式 */
|
||
.date-input-no-icon:hover {
|
||
cursor: text;
|
||
}
|
||
|
||
/* 修复日历按钮点击后背景色不恢复的问题 */
|
||
.btn-outline-secondary:has(.bi-calendar3):focus,
|
||
.btn-outline-secondary:has(.bi-calendar3):active,
|
||
.btn-outline-secondary:has(.bi-calendar3).focus,
|
||
.btn-outline-secondary:has(.bi-calendar3).active {
|
||
background-color: transparent !important;
|
||
border-color: var(--dark-text-color) !important;
|
||
color: var(--dark-text-color) !important;
|
||
box-shadow: none !important;
|
||
outline: none !important;
|
||
}
|
||
|
||
/* 确保日历图标按钮在获得焦点后，悬停时仍正确显示深色背景 */
|
||
.btn-outline-secondary:has(.bi-calendar3):hover,
|
||
.btn-outline-secondary:has(.bi-calendar3):hover:focus,
|
||
.btn-outline-secondary:has(.bi-calendar3):hover:active {
|
||
background-color: var(--dark-text-color) !important;
|
||
border-color: var(--dark-text-color) !important;
|
||
color: #fff !important;
|
||
}
|
||
|
||
/* 自定义JSON编辑器样式 */
|
||
/* 调整搜索框样式 */
|
||
div.jsoneditor-search {
|
||
height: 22px !important; /* 搜索输入框高度 */
|
||
border-radius: 4px !important; /* 搜索框整体圆角 */
|
||
overflow: hidden !important; /* 确保子元素不超出圆角边界 */
|
||
}
|
||
|
||
div.jsoneditor-search input {
|
||
height: 18px !important;
|
||
margin-top: 0 !important;
|
||
position: relative !important;
|
||
top: -5px !important; /* 搜索文本输入框高度 */
|
||
border-radius: 4px 0 0 4px !important; /* 左侧圆角 */
|
||
}
|
||
|
||
div.jsoneditor-search button {
|
||
height: 22px !important;
|
||
margin-top: -1px !important;
|
||
border-radius: 0 4px 4px 0 !important; /* 右侧圆角 */
|
||
}
|
||
|
||
/* 添加搜索按钮区域圆角 */
|
||
div.jsoneditor-search-results {
|
||
border-radius: 4px !important;
|
||
}
|
||
|
||
/* 修改Search图标所在的框为圆角 */
|
||
div.jsoneditor-search div.jsoneditor-frame {
|
||
border-radius: 4px !important;
|
||
}
|
||
|
||
/* 确保所有搜索相关组件具有圆角 */
|
||
div.jsoneditor-search > * {
|
||
border-radius: 4px !important;
|
||
}
|
||
|
||
div.jsoneditor div.jsoneditor-navigation-bar {
|
||
background-color: #ededf0 !important; /* 设置背景颜色 */
|
||
color: var(--dark-text-color) !important; /* 设置文本颜色 */
|
||
border-bottom: 1px solid var(--border-color) !important; /* 设置底部边框为蓝色 */
|
||
}
|
||
|
||
/* 修改选择一个节点的文本颜色 */
|
||
div.jsoneditor-navigation-bar .jsoneditor-treemode .jsoneditor-selection,
|
||
div.jsoneditor-treepath .jsoneditor-treemode,
|
||
div.jsoneditor-treepath {
|
||
color: var(--dark-text-color) !important;
|
||
}
|
||
|
||
/* 确保导航条中所有文本都是相同颜色 */
|
||
div.jsoneditor-treepath * {
|
||
color: var(--dark-text-color) !important;
|
||
}
|
||
|
||
/* --------------- 分页控制样式 --------------- */
|
||
.pagination-container {
|
||
margin-top: 24px !important;
|
||
padding: 0 0;
|
||
border-top: none;
|
||
transform: translateY(-20px);
|
||
position: relative;
|
||
z-index: 1;
|
||
display: flex !important;
|
||
justify-content: space-between !important;
|
||
align-items: center !important;
|
||
flex-wrap: wrap !important; /* 允许元素在需要时换行 */
|
||
gap: 0; /* 分页控制三行排列的行距 */
|
||
}
|
||
|
||
/* 桌面宽屏下的布局 */
|
||
@media (min-width: 992px) {
|
||
.pagination-controls {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: auto;
|
||
order: 2;
|
||
}
|
||
|
||
.page-info {
|
||
color: var(--dark-text-color);
|
||
font-size: 0.95rem;
|
||
line-height: 32px;
|
||
height: 32px;
|
||
display: flex;
|
||
align-items: center;
|
||
width: 33%; /* 为左侧文本区域预留固定宽度 */
|
||
order: 1;
|
||
}
|
||
|
||
.pagination-settings {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 33%;
|
||
justify-content: flex-end;
|
||
order: 3;
|
||
}
|
||
}
|
||
|
||
/* 平板和窄屏下的布局 */
|
||
@media (max-width: 991px) and (min-width: 768px) {
|
||
.pagination-container {
|
||
flex-direction: row;
|
||
justify-content: center !important;
|
||
}
|
||
|
||
.pagination-controls {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
left: auto;
|
||
transform: none;
|
||
width: 100%;
|
||
order: 2;
|
||
margin: 12px 0; /* 上下间距调整为12px，与整体间距一致 */
|
||
}
|
||
|
||
.page-info {
|
||
color: var(--dark-text-color);
|
||
font-size: 0.95rem;
|
||
line-height: 32px;
|
||
height: 32px;
|
||
display: flex;
|
||
align-items: center;
|
||
width: 100%;
|
||
justify-content: center;
|
||
order: 1;
|
||
text-align: center;
|
||
}
|
||
|
||
.pagination-settings {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 100%;
|
||
justify-content: center;
|
||
order: 3;
|
||
}
|
||
}
|
||
|
||
/* 移动端布局 */
|
||
@media (max-width: 767px) {
|
||
.pagination-container {
|
||
flex-direction: column;
|
||
align-items: center !important;
|
||
margin-top: 15px !important;
|
||
transform: translateY(-10px);
|
||
gap: 12px; /* 垂直间距调整为12px，与整体间距一致 */
|
||
}
|
||
|
||
.pagination-controls {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
left: auto;
|
||
transform: none;
|
||
width: 100%;
|
||
order: 2;
|
||
flex-wrap: wrap;
|
||
margin: 0; /* 移除额外的上下margin，因为已有gap控制间距 */
|
||
}
|
||
|
||
.page-info {
|
||
color: var(--dark-text-color);
|
||
font-size: 0.95rem;
|
||
line-height: 1.5;
|
||
height: auto;
|
||
display: flex;
|
||
align-items: center;
|
||
width: 100%;
|
||
justify-content: center;
|
||
order: 1;
|
||
text-align: center;
|
||
padding: 5px 0;
|
||
}
|
||
|
||
.pagination-settings {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 100%;
|
||
justify-content: center;
|
||
order: 3;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
/* 不修改按钮大小，与桌面版保持一致 */
|
||
.pagination-controls .btn-sm {
|
||
min-width: 32px;
|
||
height: 32px;
|
||
}
|
||
|
||
/* 保持与桌面版一致的跳页区域尺寸 */
|
||
.pagination-settings .form-control-sm {
|
||
height: 32px;
|
||
}
|
||
|
||
/* 保持与桌面版一致的下拉菜单按钮尺寸 */
|
||
.pagination-settings .dropdown-toggle {
|
||
height: 32px;
|
||
}
|
||
|
||
/* 移动端分页按钮优化：确保不换行 */
|
||
.pagination-controls {
|
||
flex-wrap: nowrap !important; /* 强制不换行 */
|
||
max-width: 100%;
|
||
overflow-x: auto;
|
||
scrollbar-width: none; /* Firefox */
|
||
-ms-overflow-style: none; /* IE and Edge */
|
||
}
|
||
|
||
.pagination-controls::-webkit-scrollbar {
|
||
display: none; /* Chrome, Safari and Opera */
|
||
}
|
||
}
|
||
|
||
.pagination-settings {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
/* 分页按钮样式 */
|
||
.pagination-controls .btn-sm {
|
||
min-width: 32px;
|
||
height: 32px;
|
||
padding: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 0.95rem;
|
||
border-radius: 6px;
|
||
}
|
||
|
||
/* 分页按钮悬停状态 */
|
||
.pagination-controls .btn-sm:hover {
|
||
background-color: var(--dark-text-color);
|
||
border-color: var(--dark-text-color);
|
||
color: #fff !important;
|
||
}
|
||
|
||
/* 分页按钮悬停状态下的图标 */
|
||
.pagination-controls .btn-sm:hover i {
|
||
color: #fff !important;
|
||
}
|
||
|
||
/* 分页按钮点击后恢复正常状态 */
|
||
.pagination-controls .btn-sm:not(:hover):not(.btn-primary) {
|
||
background-color: #fff;
|
||
border-color: var(--dark-text-color);
|
||
color: var(--dark-text-color);
|
||
transition: background-color 0.15s ease-out, color 0.15s ease-out;
|
||
}
|
||
|
||
/* 分页按钮点击后图标恢复正常状态 */
|
||
.pagination-controls .btn-sm:not(:hover):not(.btn-primary) i {
|
||
color: var(--dark-text-color);
|
||
transition: color 0.15s ease-out;
|
||
}
|
||
|
||
/* 当前选中页码按钮 */
|
||
.pagination-controls .btn-sm.btn-primary {
|
||
background-color: var(--focus-border-color) !important;
|
||
border-color: var(--focus-border-color) !important;
|
||
color: #fff !important;
|
||
}
|
||
|
||
/* 分页设置区域的间距调整 */
|
||
.pagination-settings .text-secondary.mr-1 {
|
||
margin-right: 7.5px !important; /* "跳到第"与输入框之间的距离 */
|
||
}
|
||
|
||
.pagination-settings .mx-1 {
|
||
margin-left: 0 !important;
|
||
margin-right: 7px !important; /* 输入框与"页"之间的距离 */
|
||
}
|
||
|
||
.pagination-settings .text-secondary.mr-2 {
|
||
margin-right: 7px !important; /* "页"与"确定"按钮之间的距离 */
|
||
}
|
||
|
||
/* 页码输入框样式 */
|
||
.pagination-settings .input-group[style*="width: 70px"] {
|
||
width: auto !important;
|
||
min-width: 64px !important;
|
||
display: inline-flex !important;
|
||
}
|
||
|
||
.pagination-settings .form-control-sm {
|
||
height: 32px;
|
||
width: 32px !important; /* 默认宽度为正方形 */
|
||
min-width: 32px; /* 最小宽度 */
|
||
text-align: center;
|
||
padding: 0 2px;
|
||
border-color: var(--dark-text-color);
|
||
border-radius: 6px;
|
||
-moz-appearance: textfield; /* Firefox */
|
||
transition: width 0.2s; /* 添加宽度过渡效果 */
|
||
}
|
||
|
||
/* 去掉输入框的上下箭头 */
|
||
.pagination-settings .form-control-sm::-webkit-outer-spin-button,
|
||
.pagination-settings .form-control-sm::-webkit-inner-spin-button {
|
||
-webkit-appearance: none;
|
||
margin: 0;
|
||
}
|
||
|
||
/* 当输入内容较多或获得焦点时自动扩展宽度 */
|
||
.pagination-settings .form-control-sm:focus,
|
||
.pagination-settings .form-control-sm:not(:placeholder-shown) {
|
||
width: auto !important;
|
||
min-width: 32px;
|
||
}
|
||
|
||
/* 分页文本样式 - 统一所有文本的样式 */
|
||
.pagination-settings .text-secondary,
|
||
.pagination-controls .text-secondary,
|
||
.pagination-container .text-secondary {
|
||
color: var(--dark-text-color) !important;
|
||
font-size: 0.95rem;
|
||
line-height: 32px;
|
||
height: 32px;
|
||
display: flex;
|
||
align-items: center;
|
||
white-space: nowrap;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.pagination-settings .btn {
|
||
white-space: nowrap;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* 分页下拉菜单样式 */
|
||
.pagination-settings .dropdown-toggle {
|
||
height: 32px;
|
||
padding: 0 8px; /* 调整左右内边距，与下拉项保持一致 */
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
/* 调整下拉按钮中文本和三角图标之间的距离 */
|
||
.pagination-settings .dropdown-toggle::after {
|
||
margin-left: 7px; /* 增加文本和三角图标之间的距离 */
|
||
}
|
||
|
||
/* 分页下拉菜单按钮激活状态 */
|
||
.pagination-settings .dropdown-toggle.show,
|
||
.pagination-settings .dropdown-toggle:active,
|
||
.pagination-settings .dropdown-toggle:focus {
|
||
background-color: var(--dark-text-color) !important;
|
||
border-color: var(--dark-text-color) !important;
|
||
color: #fff !important;
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
/* 调整分页大小下拉菜单的宽度 */
|
||
.pagination-settings .dropdown-menu {
|
||
min-width: 0;
|
||
width: 100%; /* 与按钮同宽 */
|
||
padding: 0; /* 移除菜单内边距 */
|
||
margin: 0; /* 移除菜单外边距 */
|
||
border-radius: 6px; /* 添加圆角 */
|
||
overflow: hidden; /* 确保内容不超出圆角 */
|
||
background-color: #fff; /* 设置默认背景颜色为灰色 */
|
||
border-color: var(--dark-text-color); /* 与按钮边框颜色相同 */
|
||
margin-top: 8px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.pagination-settings .dropdown-item {
|
||
font-size: 0.95rem;
|
||
padding: 0 8px; /* 调整左右内边距，与按钮文本边距保持一致 */
|
||
text-align: left; /* 文本左对齐 */
|
||
white-space: nowrap; /* 防止文本换行 */
|
||
border-bottom: none; /* 添加分隔线 */
|
||
height: 32px; /* 设置固定高度 */
|
||
line-height: 32px; /* 垂直居中文本 */
|
||
display: flex;
|
||
align-items: center; /* 垂直居中内容 */
|
||
background-color: #fff; /* 设置每个选项的默认背景颜色为灰色 */
|
||
}
|
||
|
||
/* 最后一个选项不需要底部边框 */
|
||
.pagination-settings .dropdown-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
/* 下拉菜单项的悬停效果 */
|
||
.pagination-settings .dropdown-item:hover {
|
||
background-color: var(--button-gray-background-color);
|
||
color: var(--dark-text-color);
|
||
}
|
||
|
||
/* 下拉菜单项的点击效果 */
|
||
.pagination-settings .dropdown-item:active,
|
||
.pagination-settings .dropdown-item:focus {
|
||
background-color: var(--button-gray-background-color) !important;
|
||
color: var(--dark-text-color) !important;
|
||
outline: none;
|
||
}
|
||
|
||
/* 省略号样式 */
|
||
.pagination-controls .mx-1 {
|
||
color: var(--dark-text-color);
|
||
font-size: 0.95rem;
|
||
margin: 0 5px;
|
||
line-height: 32px;
|
||
height: 32px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
/* 分页按钮中的箭头图标大小 */
|
||
.pagination-controls .btn-sm .bi-chevron-left {
|
||
font-size: 1.09rem;
|
||
position: relative;
|
||
top: 0px;
|
||
left: -1px; /* 向左移动左箭头 */
|
||
}
|
||
|
||
.pagination-controls .btn-sm .bi-chevron-right {
|
||
font-size: 1.09rem;
|
||
position: relative;
|
||
top: 0px;
|
||
right: -1px; /* 向右移动右箭头 */
|
||
}
|
||
|
||
/* --------------- 系统配置页面form-group间距统一 --------------- */
|
||
/* 系统配置页面中所有form-group的间距统一为8px，与其他模块保持一致 */
|
||
main .form-group.mb-2 {
|
||
margin-bottom: 8px !important;
|
||
}
|
||
|
||
/* 任务设置模块的form-group间距调整为8px */
|
||
main .form-group:not(.row) {
|
||
margin-bottom: 8px !important;
|
||
}
|
||
|
||
/* --------------- 魔法匹配输入框比例设置 --------------- */
|
||
/* 系统配置页面中魔法匹配的输入框比例 */
|
||
.form-group.mb-2 > .input-group {
|
||
position: relative; /* 为绝对定位的子元素提供参考 */
|
||
padding-right: 31px; /* 为删除按钮预留空间 */
|
||
}
|
||
|
||
.form-group.mb-2 > .input-group > input[data-oldkey] {
|
||
flex: 1 !important; /* 魔法名输入框占比 */
|
||
}
|
||
|
||
.form-group.mb-2 > .input-group > input[placeholder="匹配表达式"] {
|
||
flex: 4 !important; /* 匹配表达式输入框占比 */
|
||
}
|
||
|
||
.form-group.mb-2 > .input-group > input[placeholder="替换表达式"] {
|
||
flex: 2 !important; /* 替换表达式输入框占比 */
|
||
}
|
||
|
||
.form-group.mb-2 > .input-group > .input-group-append {
|
||
position: absolute; /* 使按钮组脱离文档流 */
|
||
right: 0; /* 靠右对齐 */
|
||
top: 0; /* 顶部对齐 */
|
||
height: 100%; /* 与父元素等高 */
|
||
}
|
||
|
||
.form-group.mb-2 > .input-group > .input-group-append > .btn-outline-primary {
|
||
position: absolute; /* 使增加按钮不占用布局空间 */
|
||
right: 31px; /* 位于删除按钮左侧，边框重叠 */
|
||
z-index: 2; /* 确保按钮显示在最上层 */
|
||
background-color: #fff; /* 添加白色背景色，避免文本重叠 */
|
||
}
|
||
|
||
/* 为增加按钮添加左侧白色空间，避免文本重叠 */
|
||
.form-group.mb-2 > .input-group > .input-group-append > .btn-outline-primary::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: -9px; /* 从-8px调整为-9px，往左移动1px */
|
||
top: 0;
|
||
height: 100%;
|
||
width: 8px;
|
||
background-color: #fff;
|
||
z-index: -1; /* 将z-index设为负值，确保在按钮下方 */
|
||
}
|
||
|
||
/* 当鼠标悬停在增加按钮上时，保持蓝色背景 */
|
||
.form-group.mb-2 > .input-group > .input-group-append > .btn-outline-primary:hover {
|
||
background-color: #0D53FF; /* 悬停时使用蓝色背景 */
|
||
color: #fff;
|
||
}
|
||
|
||
/* 当点击增加按钮时，保持蓝色背景 */
|
||
.form-group.mb-2 > .input-group > .input-group-append > .btn-outline-primary:active,
|
||
.form-group.mb-2 > .input-group > .input-group-append > .btn-outline-primary:focus {
|
||
background-color: #0D53FF !important; /* 点击时强制使用蓝色背景 */
|
||
color: white !important;
|
||
}
|
||
|
||
/* 点击或聚焦时也改变伪元素的背景色 */
|
||
.form-group.mb-2 > .input-group > .input-group-append > .btn-outline-primary:active::before,
|
||
.form-group.mb-2 > .input-group > .input-group-append > .btn-outline-primary:focus::before {
|
||
background-color: white !important; /* 保持白色背景 */
|
||
}
|
||
|
||
/* --------------- 插件区域样式 --------------- */
|
||
/* 插件标题与上方内容的间距 */
|
||
main .row.title[title*="插件的配置选项"] {
|
||
margin-top: 20px !important;
|
||
margin-bottom: 0px !important;
|
||
}
|
||
|
||
/* 调整插件选项容器的上边距（插件之间的距离） */
|
||
div[data-toggle="collapse"]:first-of-type {
|
||
margin-top: 0px !important;
|
||
}
|
||
|
||
/* 插件与魔法匹配之间的间距 */
|
||
main .row.title[title*="预定义的正则匹配规则"] {
|
||
margin-top: 19px !important;
|
||
}
|
||
|
||
/* 插件名称和展开图标的颜色 */
|
||
div[data-toggle="collapse"] .btn.text-left {
|
||
color: var(--dark-text-color);
|
||
cursor: pointer;
|
||
transition: color 0.2s;
|
||
font-size: 0.95rem; /* 与输入框字体大小一致 */
|
||
font-weight: normal; /* 标准字重 */
|
||
line-height: 1.5; /* 与输入框行高一致 */
|
||
letter-spacing: normal; /* 标准字间距 */
|
||
position: relative;
|
||
left: 0px;
|
||
}
|
||
|
||
div[data-toggle="collapse"] .btn.text-left:hover {
|
||
color: var(--focus-border-color);
|
||
}
|
||
|
||
/* 系统配置页面插件折叠按钮箭头图标样式 */
|
||
div[data-toggle="collapse"] .btn.text-left i.bi-caret-right-fill {
|
||
color: inherit;
|
||
transition: transform 0.2s;
|
||
position: relative;
|
||
top: 0; /* 调整箭头垂直对齐，使其与文本居中 */
|
||
font-size: 0.95rem; /* 调整箭头大小与文本比例协调 */
|
||
margin-right: 4px; /* 添加右侧间距使与文字有适当间距 */
|
||
}
|
||
|
||
div[data-toggle="collapse"][aria-expanded="true"] .btn.text-left i.bi-caret-right-fill {
|
||
transform: rotate(90deg);
|
||
}
|
||
|
||
/* 禁用折叠按钮的点击背景色变化 */
|
||
div[data-toggle="collapse"] .btn.text-left:focus,
|
||
div[data-toggle="collapse"] .btn.text-left:active {
|
||
outline: none;
|
||
box-shadow: none;
|
||
}
|
||
|
||
/* 修复插件区域展开抖动问题 */
|
||
/* 修复插件容器的负边距，防止抖动 */
|
||
div[v-for*="plugin"] {
|
||
margin-bottom: 0 !important; /* 去除负边距，防止抖动 */
|
||
}
|
||
|
||
/* 为折叠区域设置平滑过渡 - 基础规则 */
|
||
.collapse {
|
||
transition: height 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||
will-change: height;
|
||
}
|
||
|
||
/* 修复折叠内容容器的间距，使折叠动画更流畅 */
|
||
div[id^="collapse_"] {
|
||
margin-bottom: 8px; /* 为最后一个元素添加适当的底部间距 */
|
||
overflow: hidden; /* 防止内容溢出 */
|
||
}
|
||
|
||
/* 修复收起动画卡顿问题 */
|
||
.collapsing {
|
||
position: relative;
|
||
height: 0;
|
||
overflow: hidden;
|
||
transition: height 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||
will-change: height;
|
||
}
|
||
|
||
/* 确保折叠元素内的内容不添加额外的padding，避免动画抖动 */
|
||
div[id^="collapse_"] > div.input-group {
|
||
padding: 0 !important;
|
||
}
|
||
|
||
/* 调整折叠内容中输入框的边距，防止抖动 */
|
||
div[id^="collapse_"] .input-group.mb-2:last-child {
|
||
margin-bottom: 0 !important; /* 去除最后一个输入组的底部边距 */
|
||
}
|
||
|
||
/* 优化任务列表折叠动画 */
|
||
.task .collapse {
|
||
transition: height 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||
will-change: height;
|
||
}
|
||
|
||
/* 防止任务列表折叠内容中的元素添加额外padding，导致动画卡顿 */
|
||
.task .collapse > div {
|
||
padding-top: 0 !important;
|
||
padding-bottom: 0 !important;
|
||
}
|
||
|
||
/* 任务列表任务折叠箭头的动画，使旋转更平滑 */
|
||
.task div[data-toggle="collapse"] .btn.text-left i.bi-caret-right-fill {
|
||
transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||
top: 0; /* 调整箭头垂直对齐，使其与文本居中 */
|
||
font-size: 0.95rem; /* 调整箭头大小与文本比例协调 */
|
||
}
|
||
|
||
.task div[data-toggle="collapse"][aria-expanded="true"] .btn.text-left i.bi-caret-right-fill {
|
||
transform: rotate(90deg);
|
||
}
|
||
|
||
/* 优化侧边栏菜单的折叠动画 */
|
||
#sidebarMenu.collapse {
|
||
transition: height 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
|
||
will-change: height;
|
||
}
|
||
|
||
#sidebarMenu.collapsing {
|
||
position: fixed !important;
|
||
left: 0;
|
||
top: 54px; /* 考虑导航栏高度 */
|
||
height: 0;
|
||
overflow: hidden;
|
||
transition: height 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
|
||
will-change: height;
|
||
width: 100%;
|
||
z-index: 99;
|
||
}
|
||
|
||
/* 在移动设备上侧边栏菜单的特殊处理 */
|
||
@media (max-width: 767.98px) {
|
||
#sidebarMenu {
|
||
position: fixed !important;
|
||
left: 0;
|
||
right: 0;
|
||
top: 54px; /* 考虑导航栏高度 */
|
||
z-index: 99;
|
||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
|
||
width: 100%;
|
||
padding-top: 0 !important;
|
||
}
|
||
|
||
/* 确保侧边栏内容正确定位 */
|
||
#sidebarMenu .sidebar-sticky {
|
||
height: calc(100vh - 54px); /* 计算正确的高度 */
|
||
padding-top: 20px; /* 恢复内部上边距，与非移动版本保持一致 */
|
||
}
|
||
}
|
||
|
||
/* 特别优化插件折叠动画，解决收起时最后阶段的卡顿问题 */
|
||
div[id^="collapse_"][id*="plugin"] {
|
||
transition: height 0.15s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
|
||
will-change: height;
|
||
transform: translateZ(0);
|
||
backface-visibility: hidden;
|
||
}
|
||
|
||
div[id^="collapse_"][id*="plugin"].collapsing {
|
||
transition-duration: 0.12s !important;
|
||
transition-timing-function: cubic-bezier(0.5, 0, 0.75, 0) !important;
|
||
}
|
||
|
||
/* 确保插件区域内容不添加额外的外边距和内边距 */
|
||
div[id^="collapse_"][id*="plugin"] > .input-group {
|
||
margin: 0 !important;
|
||
padding: 0 !important;
|
||
min-height: 32px; /* 插件固定高度的初始值，防止布局计算延迟 */
|
||
}
|
||
|
||
/* 确保插件折叠箭头动画更平滑 */
|
||
div[data-toggle="collapse"] .btn.text-left i.bi-caret-right-fill {
|
||
transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
|
||
}
|
||
|
||
/* 优化完全收起过程，避免卡顿，特别是当高度接近0时 */
|
||
.collapsing[style*="height: 0"],
|
||
.collapsing[style*="height:0"] {
|
||
padding-top: 0 !important;
|
||
padding-bottom: 0 !important;
|
||
margin-top: 0 !important;
|
||
margin-bottom: 0 !important;
|
||
transition-timing-function: cubic-bezier(0.55, 0, 1, 0.45) !important;
|
||
transition-duration: 0.1s !important;
|
||
}
|
||
|
||
/* 插件固定高度的初始值，防止布局计算延迟 */
|
||
div[id^="collapse_"][id*="plugin"] .input-group {
|
||
min-height: 32px;
|
||
}
|
||
|
||
#fileSelectModal .btn-primary span,
|
||
#createTaskModal .btn-primary span {
|
||
background-color: transparent;
|
||
color: inherit;
|
||
font-size: inherit;
|
||
font-weight: inherit;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
|
||
#fileSelectModal .btn-primary .badge-light,
|
||
#createTaskModal .btn-primary .badge-light {
|
||
background-color: transparent;
|
||
color: inherit;
|
||
font-size: inherit;
|
||
font-weight: normal;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
|
||
/* --------------- 命名预览页样式 --------------- */
|
||
/* 命名预览表达式样式 */
|
||
#fileSelectModal .mb-3[v-if="fileSelect.previewRegex"] {
|
||
margin-top: 15px;
|
||
margin-bottom: 15px !important;
|
||
}
|
||
|
||
#fileSelectModal .mb-3[v-if="fileSelect.previewRegex"] > div {
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
/* 预览页面表达式标题样式 */
|
||
#fileSelectModal .mb-3[v-if="fileSelect.previewRegex"] b {
|
||
font-size: 0.85rem;
|
||
font-weight: 600;
|
||
color: var(--dark-text-color);
|
||
margin-right: 8px;
|
||
}
|
||
|
||
/* 预览页面表达式内容样式 */
|
||
#fileSelectModal .badge-info {
|
||
background-color: var(--focus-border-color) !important;
|
||
color: white !important;
|
||
font-size: 0.83rem !important;
|
||
padding: 6px 3px !important;
|
||
font-weight: normal !important;
|
||
border-radius: 4px !important;
|
||
line-height: 0.5 !important;
|
||
word-break: break-all !important;
|
||
text-align: left !important;
|
||
white-space: normal !important;
|
||
}
|
||
|
||
/* 预览表格的标题样式 */
|
||
#fileSelectModal table.table th {
|
||
font-weight: 600 !important;
|
||
font-size: 0.85rem !important;
|
||
}
|
||
|
||
/* 命名预览区域样式 */
|
||
#fileSelectModal div.mb-3 {
|
||
margin-top: 12.5px !important; /* 表达式上边距 */
|
||
margin-bottom: 0px !important;
|
||
}
|
||
|
||
/* 表达式组样式 - 应用于顺序命名、剧集命名和普通正则命名的容器 */
|
||
#fileSelectModal div.mb-3 > div {
|
||
margin-bottom: 12.3px !important; /* 表达式下边距 */
|
||
}
|
||
|
||
/* 匹配表达式和替换表达式容器 */
|
||
#fileSelectModal div.mb-3 > div > div[style*="display: flex"] {
|
||
margin-bottom: 0px !important;
|
||
margin-top: 6px !important;
|
||
padding-left: 12px !important; /* 表达式左边距 */
|
||
}
|
||
|
||
/* 多行表达式样式 - 缩小两行之间的间距 */
|
||
#fileSelectModal div.mb-3 > div > div[style*="display: flex"] + div[style*="display: flex"] {
|
||
margin-top: 1px !important; /* 减少同一组内表达式之间的间距 */
|
||
}
|
||
|
||
/* 多行表达式间距 - 针对预览区域显示的多行表达式 */
|
||
#fileSelectModal .mb-3[v-if="fileSelect.previewRegex"] > div > span.badge-info + span.badge-info {
|
||
margin-top: 5px !important; /* 减少多行表达式之间的间距 */
|
||
display: inline-block;
|
||
}
|
||
|
||
/* 顺序命名提示信息文本颜色，覆盖 Bootstrap .text-muted 类的颜色 */
|
||
.text-muted {
|
||
color: var(--light-text-color) !important;
|
||
}
|
||
|
||
/* --------------- 深度搜索按钮样式 --------------- */
|
||
.btn-primary:has(.spinner-border-sm) {
|
||
width: 32px !important;
|
||
height: 32px !important;
|
||
border-radius: 0px !important;
|
||
padding: 0 !important;
|
||
display: flex !important;
|
||
align-items: center !important;
|
||
justify-content: center !important;
|
||
background-color: var(--focus-border-color) !important;
|
||
border-color: var(--focus-border-color) !important;
|
||
}
|
||
|
||
/* 确保动画加载图标垂直居中 */
|
||
.btn-primary .spinner-border-sm {
|
||
margin: 0 !important;
|
||
width: 1rem !important;
|
||
height: 1rem !important;
|
||
border-width: 0.15em !important;
|
||
}
|
||
|
||
/* --------------- datalist 历史记录提示框样式 --------------- */
|
||
datalist {
|
||
display: none;
|
||
}
|
||
|
||
input::-webkit-calendar-picker-indicator {
|
||
display: none !important;
|
||
-webkit-appearance: none;
|
||
}
|
||
|
||
/* Chrome/Safari/Edge 下拉列表样式 */
|
||
input::-webkit-list-button {
|
||
display: none !important;
|
||
}
|
||
|
||
/* Firefox datalist下拉箭头样式 */
|
||
input::-moz-list-button {
|
||
display: none !important;
|
||
}
|
||
|
||
/* --------------- CloudSaver & WebUI 用户名和密码输入框样式 --------------- */
|
||
/* 清除所有默认内边距和外边距 */
|
||
.cloudsaver-username-col,
|
||
.cloudsaver-password-col,
|
||
.webui-username-col,
|
||
.webui-password-col {
|
||
padding: 0 !important;
|
||
margin: 0 !important;
|
||
}
|
||
|
||
/* 用户名列专用样式：左侧添加页边距，右侧留间隔 */
|
||
.cloudsaver-username-col,
|
||
.webui-username-col {
|
||
padding-left: 10px !important;
|
||
padding-right: 4px !important;
|
||
}
|
||
|
||
/* 密码列专用样式：右侧添加页边距，左侧留间隔 */
|
||
.cloudsaver-password-col,
|
||
.webui-password-col {
|
||
padding-left: 4px !important;
|
||
padding-right: 10px !important;
|
||
}
|
||
|
||
/* 确保移动模式下也有相同的边距 */
|
||
@media (max-width: 767.98px) {
|
||
.cloudsaver-username-col,
|
||
.webui-username-col {
|
||
padding-left: 15px !important;
|
||
padding-right: 4px !important;
|
||
}
|
||
|
||
.cloudsaver-password-col,
|
||
.webui-password-col {
|
||
padding-left: 4px !important;
|
||
padding-right: 15px !important;
|
||
}
|
||
}
|
||
|
||
/* --------------- 任务列表筛选框样式 --------------- */
|
||
@media (min-width: 768px) {
|
||
/* 调整名称筛选框与任务筛选框之间的间距，从20px减小到8px */
|
||
.col-lg-6.col-md-6.mb-2.mb-md-0 {
|
||
padding-right: 4px;
|
||
}
|
||
|
||
/* 匹配调整，确保任务筛选框左侧的间距 */
|
||
.col-lg-6.col-md-6:not(.mb-2) {
|
||
padding-left: 4px;
|
||
}
|
||
}
|
||
|
||
/* 在小屏设备上调整任务列表配置选项标题 */
|
||
@media (max-width: 767.98px) {
|
||
.task .form-group.row .col-sm-2 {
|
||
max-width: 100%; /* 在小屏上允许全宽 */
|
||
min-width: auto; /* 取消最小宽度限制 */
|
||
width: 100%; /* 宽度适应屏幕 */
|
||
padding-top: 0; /* 移除顶部内边距 */
|
||
padding-bottom: 2px; /* 减少底部内边距 */
|
||
padding-left: 10px;
|
||
top: 2.5px;
|
||
}
|
||
|
||
.task .form-group.row .col-sm-10 {
|
||
width: 100%; /* 全宽 */
|
||
max-width: 100%; /* 最大宽度全宽 */
|
||
margin-top: 0px; /* 减少顶部间距 */
|
||
padding-top: 0; /* 移除顶部内边距 */
|
||
padding-bottom: 0; /* 移除底部内边距 */
|
||
}
|
||
|
||
/* 确保移动模式下配置选项间距与桌面模式一致 */
|
||
.task .form-group.row {
|
||
margin-bottom: 8px; /* 与桌面模式保持一致的行间距 */
|
||
padding-top: 0; /* 移除顶部内边距 */
|
||
padding-bottom: 0; /* 移除底部内边距 */
|
||
}
|
||
|
||
/* 调整移动模式下表单控件的间距 */
|
||
.task .form-group.row .form-control,
|
||
.task .form-group.row .input-group {
|
||
margin-bottom: 0; /* 确保无底部边距 */
|
||
}
|
||
|
||
/* 避免在移动模式下有额外内边距 */
|
||
.task .collapse > div .form-group.row:last-child {
|
||
margin-bottom: 8px; /* 保持最后一个选项与其他选项有相同的间距 */
|
||
}
|
||
|
||
/* 调整任务配置标签的间距 */
|
||
.task .form-group.row .col-form-label {
|
||
padding-top: 2px; /* 减少顶部内边距 */
|
||
padding-bottom: 2px; /* 减少底部内边距 */
|
||
}
|
||
|
||
/* 专门针对配置选项标题在配置框上方的情况调整 */
|
||
.task .form-group.row:not(.align-items-center) .col-sm-2 {
|
||
margin-bottom: 4.5px; /* 设置标题与配置框之间的距离 */
|
||
padding-left: 15px; /* 左对齐与其他元素保持一致 */
|
||
font-size: 0.95rem; /* 保持字体大小一致 */
|
||
}
|
||
|
||
/* 标题在上方时配置框的左内边距调整 */
|
||
.task .form-group.row:not(.align-items-center) .col-sm-10 {
|
||
padding-left: 18.5px; /* 为标题在上方的配置框增加左内边距 */
|
||
}
|
||
|
||
/* 特别处理执行周期选项组等特殊情况 */
|
||
.task .form-group.row:not(.align-items-center) .form-check,
|
||
.task .form-group.row:not(.align-items-center) .form-group {
|
||
margin-top: 2px; /* 为表单组件添加顶部间距 */
|
||
padding-left: 0px; /* 左对齐一致 */
|
||
}
|
||
|
||
/* 移动模式下的任务标题左边距调整 */
|
||
@media (max-width: 767.98px) {
|
||
.task .btn.btn-block.text-left {
|
||
padding-left: 11px; /* 移动模式下标题左边距 */
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 确保在移动设备上表格可以水平滚动 */
|
||
@media (max-width: 767px) {
|
||
#fileSelectModal .table-responsive {
|
||
overflow-x: auto;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
/* 确保表格使用固定布局算法，保持列宽 */
|
||
#fileSelectModal .table {
|
||
table-layout: fixed;
|
||
width: max-content;
|
||
min-width: 100%;
|
||
margin-bottom: 0; /* 避免多余的底部间距 */
|
||
}
|
||
|
||
/* 移动模式下面包屑导航宽度与表格匹配 */
|
||
/* 针对选择需转存的文件夹/选择起始文件模式 - 4列表格 */
|
||
#fileSelectModal[data-modal-type="source"] .breadcrumb,
|
||
#fileSelectModal[data-modal-type="start-file"] .breadcrumb {
|
||
min-width: 690px; /* 4列表格总宽度: 230px + 230px + 90px + 140px */
|
||
}
|
||
|
||
#fileSelectModal[data-modal-type="source"] .table,
|
||
#fileSelectModal[data-modal-type="start-file"] .table {
|
||
width: 690px;
|
||
}
|
||
|
||
/* 针对选择保存到的文件夹模式 - 带操作列的表格 */
|
||
#fileSelectModal[data-modal-type="target"] .breadcrumb {
|
||
min-width: 648px; /* 4列表格总宽度: 230px + 90px + 140px + 188px */
|
||
}
|
||
|
||
#fileSelectModal[data-modal-type="target"] .table {
|
||
width: 648px;
|
||
}
|
||
|
||
/* 针对命名预览模式 - 2列表格 */
|
||
#fileSelectModal[data-modal-type="preview"] .breadcrumb {
|
||
min-width: 460px; /* 2列表格总宽度: 230px + 230px */
|
||
margin-right: 0;
|
||
padding-right: 16px !important; /* 强制设置右边距为16px */
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
#fileSelectModal[data-modal-type="preview"] .table {
|
||
width: 460px;
|
||
}
|
||
|
||
/* 针对文件整理页面命名预览模式 - 2列表格 */
|
||
#fileSelectModal[data-modal-type="preview-filemanager"] .breadcrumb {
|
||
min-width: 460px; /* 2列表格总宽度: 230px + 230px */
|
||
margin-right: 0;
|
||
padding-right: 16px !important; /* 强制设置右边距为16px */
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
#fileSelectModal[data-modal-type="preview-filemanager"] .table {
|
||
width: 460px;
|
||
}
|
||
|
||
/* 确保面包屑导航内容不被截断 */
|
||
#fileSelectModal .breadcrumb-item {
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* 修复模态框内边距问题 */
|
||
#fileSelectModal .modal-body {
|
||
padding-right: 16px !important;
|
||
padding-left: 16px !important;
|
||
-webkit-overflow-scrolling: touch; /* 在iOS设备上启用惯性滚动 */
|
||
overflow-x: hidden; /* 禁用整个modal-body的水平滚动，由内部元素单独控制 */
|
||
}
|
||
|
||
/* 修复表格和面包屑导航的边距问题 */
|
||
#fileSelectModal .table-responsive {
|
||
padding-right: 0;
|
||
margin-right: 0;
|
||
width: 100%;
|
||
}
|
||
|
||
/* 确保表格容器有正确的溢出行为 */
|
||
#fileSelectModal .modal-body > div:not(.alert-warning) {
|
||
overflow-x: auto;
|
||
width: 100%;
|
||
padding-bottom: 8px; /* 添加底部内边距，避免滚动条遮挡内容 */
|
||
}
|
||
|
||
/* 确保面包屑导航在滚动容器内有正确的空间 */
|
||
#fileSelectModal nav[aria-label="breadcrumb"] {
|
||
padding-right: 16px; /* 确保右侧有足够边距 */
|
||
margin-right: 0;
|
||
margin-bottom: 8px; /* 保持与表格的间距一致 */
|
||
}
|
||
|
||
/* 特别处理预览模式下的导航栏，防止双重内边距 */
|
||
#fileSelectModal[data-modal-type="preview"] .modal-body > div > nav[aria-label="breadcrumb"] {
|
||
padding-right: 0 !important; /* 清除可能的额外内边距 */
|
||
}
|
||
|
||
/* 确保模态框内的预览区域也有合适的边距和滚动行为 */
|
||
#fileSelectModal .mb-3[v-if="fileSelect.previewRegex"] {
|
||
padding-right: 16px;
|
||
overflow-x: auto;
|
||
width: 100%;
|
||
}
|
||
|
||
/* 优化表格的标题行在滚动时始终可见 */
|
||
#fileSelectModal .table th {
|
||
z-index: 5; /* 保证在滚动时标题行位于上层 */
|
||
}
|
||
|
||
/* 优化滚动条样式，使其更细小不占用过多空间 */
|
||
#fileSelectModal .modal-body > div::-webkit-scrollbar {
|
||
height: 8px; /* 较细的滚动条 */
|
||
}
|
||
|
||
#fileSelectModal .modal-body > div::-webkit-scrollbar-thumb {
|
||
background-color: var(--border-color); /* 滚动条滑块 */
|
||
border-radius: 4px; /* 圆角滚动条 */
|
||
}
|
||
|
||
#fileSelectModal .modal-body > div::-webkit-scrollbar-track {
|
||
background-color: #f7f7f9; /* 滚动条轨道 */
|
||
border-radius: 4px; /* 圆角滚动条 */
|
||
}
|
||
}
|
||
|
||
/* 针对命名预览模式特别处理表格容器的底部内边距 */
|
||
#fileSelectModal[data-modal-type="preview"] .modal-body > div:not(.alert-warning) {
|
||
padding-bottom: 0px !important; /* 命名预览模式下表格底部无滚动条时内边距设为0px */
|
||
}
|
||
|
||
/* 命名预览模式下，有滚动条时的底部内边距 */
|
||
#fileSelectModal[data-modal-type="preview"] .modal-body > div.has-scrollbar:not(.alert-warning) {
|
||
padding-bottom: 8px !important; /* 有滚动条时增加底部内边距 */
|
||
}
|
||
|
||
/* --------------- 模态框表格展开按钮样式 --------------- */
|
||
#fileSelectModal .expand-button {
|
||
position: absolute;
|
||
right: 5px;
|
||
top: 7.5px; /* 固定位置 */
|
||
transform: none; /* 移除垂直居中转换 */
|
||
cursor: pointer;
|
||
opacity: 0;
|
||
transition: opacity 0.2s;
|
||
background: #fff;
|
||
border-radius: 50%;
|
||
width: 18px;
|
||
height: 18px;
|
||
text-align: center;
|
||
line-height: 18px;
|
||
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
|
||
z-index: 2;
|
||
}
|
||
|
||
#fileSelectModal .position-relative:hover .expand-button {
|
||
opacity: 1;
|
||
}
|
||
|
||
#fileSelectModal .expand-button .bi {
|
||
font-size: 0.78em;
|
||
vertical-align: middle;
|
||
position: relative;
|
||
top: -0.5px;
|
||
}
|
||
|
||
/* 确保模态框中的表格单元格可以正确显示展开按钮 */
|
||
#fileSelectModal .table td.position-relative {
|
||
position: relative;
|
||
vertical-align: top !important; /* 确保内容顶部对齐 */
|
||
}
|
||
|
||
/* 当表格行被点击时，防止展开按钮的点击事件冒泡 */
|
||
#fileSelectModal .expand-button {
|
||
pointer-events: auto;
|
||
}
|
||
|
||
/* 确保展开状态下的文本可以正确换行 */
|
||
#fileSelectModal .table td [style*="white-space: normal"] {
|
||
display: block;
|
||
width: 100%;
|
||
margin-top: 0; /* 移除顶部边距 */
|
||
margin-bottom: 7px;
|
||
}
|
||
|
||
/* 确保表格行内容保持顶部对齐 */
|
||
#fileSelectModal .table tr {
|
||
vertical-align: top !important;
|
||
}
|
||
|
||
#fileSelectModal .table td {
|
||
vertical-align: top !important;
|
||
}
|
||
|
||
/* 移动设备插件折叠按钮左边距设置 */
|
||
@media (max-width: 767.98px) {
|
||
div[data-toggle="collapse"] .btn.text-left {
|
||
padding-left: 17px;
|
||
}
|
||
}
|
||
|
||
/* 模态框表头悬停样式 */
|
||
#fileSelectModal .table th.cursor-pointer:hover {
|
||
background-color: #f7f7f9; /* 表头悬停背景色 */
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* 移除number类型输入框的上下箭头 */
|
||
input.no-spinner::-webkit-outer-spin-button,
|
||
input.no-spinner::-webkit-inner-spin-button {
|
||
-webkit-appearance: none;
|
||
margin: 0;
|
||
}
|
||
|
||
/* Firefox也需要特别处理 */
|
||
input.no-spinner {
|
||
-moz-appearance: textfield;
|
||
}
|
||
|
||
/* 秒字框正方形样式 */
|
||
.square-append {
|
||
width: 32px;
|
||
height: 32px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 0 !important;
|
||
}
|
||
|
||
/* 确保Crontab和延迟执行框在移动端也保持一行 */
|
||
@media (max-width: 767.98px) {
|
||
.row.mb-2 .col-sm-6 {
|
||
flex: 0 0 50%;
|
||
max-width: 50%;
|
||
}
|
||
|
||
.row.mb-2 .col-sm-6.pr-1 {
|
||
padding-right: 4px !important;
|
||
padding-left: 15px !important;
|
||
}
|
||
|
||
.row.mb-2 .col-sm-6.pl-1 {
|
||
padding-left: 4px !important;
|
||
padding-right: 15px !important;
|
||
}
|
||
}
|
||
|
||
/* --------------- 转存记录相关样式 --------------- */
|
||
.selected-record {
|
||
background-color: var(--button-gray-background-color) !important;
|
||
}
|
||
|
||
/* 文件大小值的文本位置调整 */
|
||
.file-size-cell .file-size-value {
|
||
display: inline-block; /* 确保transform生效 */
|
||
transform: translateY(0px);
|
||
}
|
||
|
||
/* 删除按钮图标大小 */
|
||
.delete-record-btn .bi-trash3 {
|
||
font-size: 1rem;
|
||
}
|
||
|
||
/* 选中行或鼠标悬停行时显示删除按钮 */
|
||
tr.selected-record .delete-record-btn,
|
||
.selectable-records tbody tr:hover .delete-record-btn {
|
||
visibility: visible;
|
||
}
|
||
|
||
/* 表头中的删除按钮仅在有选中行时显示 */
|
||
table th .delete-record-btn {
|
||
visibility: hidden;
|
||
}
|
||
|
||
/* 禁止在表格中选择文本，以便更好地支持点击选择 */
|
||
table.selectable-records {
|
||
user-select: none;
|
||
-webkit-user-select: none;
|
||
-moz-user-select: none;
|
||
-ms-user-select: none;
|
||
}
|
||
|
||
table.selectable-records tbody tr {
|
||
cursor: pointer;
|
||
transition: none;
|
||
}
|
||
|
||
/* 修改表格行悬停样式，使用变量保持一致性 */
|
||
table.selectable-records tbody tr:hover {
|
||
background-color: var(--button-gray-background-color);
|
||
}
|
||
|
||
/* 确保展开按钮在选中状态下仍然可见 */
|
||
tr.selected-record .expand-button {
|
||
z-index: 2;
|
||
}
|
||
|
||
/* 当鼠标悬停在展开按钮上时，不改变按钮的背景色 */
|
||
table.selectable-records .expand-button:hover {
|
||
background-color: transparent !important;
|
||
}
|
||
|
||
/* 转存记录页面删除按钮悬停效果 */
|
||
table.selectable-records .delete-record-btn:hover {
|
||
color: #b02a37 !important;
|
||
}
|
||
|
||
/* 选中行或鼠标悬停行的大小列样式 */
|
||
tr.selected-record .file-size-cell .file-size-value,
|
||
.selectable-records tbody tr:hover .file-size-cell .file-size-value {
|
||
display: none; /* 隐藏文件大小信息 */
|
||
}
|
||
|
||
tr.selected-record .file-size-cell .delete-record-btn,
|
||
.selectable-records tbody tr:hover .file-size-cell .delete-record-btn {
|
||
display: flex;
|
||
justify-content: flex-start; /* 居左对齐 */
|
||
align-items: center;
|
||
width: auto;
|
||
height: 100%;
|
||
margin-left: 0; /* 确保没有左边距 */
|
||
padding-left: 0; /* 确保没有左内边距 */
|
||
left: 9px; /* 与大小值保持相同的左边距 */
|
||
position: absolute; /* 使用绝对定位 */
|
||
top: 8px; /* 固定位置 */
|
||
transform: none; /* 移除垂直居中转换 */
|
||
}
|
||
|
||
/* 当鼠标悬停在展开按钮或删除按钮上时，不改变按钮的背景色 */
|
||
table.selectable-records .expand-button:hover {
|
||
background-color: #fff !important; /* 保持展开按钮原有的白色背景 */
|
||
}
|
||
|
||
/* 模态框表格单元格文本垂直对齐调整 */
|
||
#fileSelectModal .table td {
|
||
transform: translateY(0.5px); /* 文本下移0.5px，不影响元素实际高度 */
|
||
}
|
||
|
||
/* 确保文件大小、修改日期和操作列的文本位置与文件名一致 */
|
||
#fileSelectModal .table td:not(.col-filename) {
|
||
transform: translateY(1.5px); /* 非文件名列文本下移1.5px */
|
||
}
|
||
|
||
/* 特别调整红色"×"符号的位置 */
|
||
#fileSelectModal .table td.col-rename.text-danger div:not(.expand-button) {
|
||
position: relative;
|
||
top: 2px !important; /* 将"×"标记上移1px */
|
||
}
|
||
|
||
#fileSelectModal[data-modal-type="preview"] .table td.col-rename > :not(.expand-button) {
|
||
position: relative;
|
||
top: 3px !important;
|
||
}
|
||
|
||
/* 文件整理页面命名预览模式下的重命名列通用样式 */
|
||
#fileSelectModal[data-modal-type="preview-filemanager"] .table td.col-rename > :not(.expand-button) {
|
||
position: relative;
|
||
top: 3px !important; /* 与任务配置页面保持一致 */
|
||
}
|
||
|
||
/* 确保文件整理页面命名预览模式下的重命名列文本截断样式正确应用 */
|
||
#fileSelectModal[data-modal-type="preview-filemanager"] .table td.col-rename div[style*="white-space: nowrap"] {
|
||
white-space: nowrap !important;
|
||
overflow: hidden !important;
|
||
text-overflow: ellipsis !important;
|
||
padding-right: 25px !important;
|
||
padding-top: 0.5px !important; /* 文本和超长省略号下移0.5px */
|
||
max-width: 100% !important;
|
||
display: block !important;
|
||
line-height: 19px !important;
|
||
box-sizing: border-box !important;
|
||
}
|
||
|
||
/* 强制文件整理页面重命名列的所有子元素使用inline显示，确保文本截断正常工作 */
|
||
#fileSelectModal[data-modal-type="preview-filemanager"] .table td.col-rename div[style*="white-space: nowrap"] * {
|
||
display: inline !important;
|
||
white-space: nowrap !important;
|
||
}
|
||
|
||
/* 命名预览模态框 - 重命名列展开按钮位置微调，仅作用于命名预览 */
|
||
#fileSelectModal[data-modal-type="preview"] .table td.col-rename .expand-button,
|
||
#fileSelectModal[data-modal-type="preview-filemanager"] .table td.col-rename .expand-button {
|
||
top: 6.5px !important; /* 单独上移 1px（基础为 7.5px） */
|
||
right: 8px !important; /* 略向左移，参考模态框其他列的间距 */
|
||
}
|
||
|
||
|
||
/* 模态框通用文件夹图标样式 */
|
||
#fileSelectModal .bi-folder-fill {
|
||
color: #098eff;
|
||
font-size: 0.95rem;
|
||
margin-right: 4px !important;
|
||
position: relative;
|
||
top: 0.5px !important; /* 负值向上移动，正值向下移动 */
|
||
left: -0.55px; /* 整体向左移动 */
|
||
}
|
||
|
||
/* 模态框通用文件图标样式 */
|
||
#fileSelectModal .bi-file-earmark,
|
||
#fileSelectModal .bi-file-earmark-play,
|
||
#fileSelectModal .bi-file-earmark-music,
|
||
#fileSelectModal .bi-file-earmark-image,
|
||
#fileSelectModal .bi-file-earmark-text,
|
||
#fileSelectModal .bi-file-earmark-richtext,
|
||
#fileSelectModal .bi-file-earmark-zip,
|
||
#fileSelectModal .bi-file-earmark-font,
|
||
#fileSelectModal .bi-file-earmark-code,
|
||
#fileSelectModal .bi-file-earmark-pdf,
|
||
#fileSelectModal .bi-file-earmark-word,
|
||
#fileSelectModal .bi-file-earmark-excel,
|
||
#fileSelectModal .bi-file-earmark-ppt,
|
||
#fileSelectModal .bi-file-earmark-medical {
|
||
color: var(--dark-text-color);
|
||
font-size: 0.95rem;
|
||
margin-right: 4px !important;
|
||
position: relative;
|
||
top: 0.5px !important; /* 负值向上移动，正值向下移动 */
|
||
left: -0.4px;
|
||
}
|
||
|
||
/* 添加选中文件的样式 */
|
||
.selected-file {
|
||
background-color: var(--button-gray-background-color);
|
||
}
|
||
|
||
/* 确保文件选择模态框中的表格行在选中状态下保持可见 */
|
||
#fileSelectModal .table tr.selected-file:hover {
|
||
background-color: var(--button-gray-background-color);
|
||
}
|
||
|
||
/* Plex按钮样式 */
|
||
.btn-outline-plex {
|
||
border-color: #EBAF00;
|
||
color: #EBAF00;
|
||
}
|
||
|
||
.btn-outline-plex:hover {
|
||
background-color: #EBAF00;
|
||
border-color: #EBAF00;
|
||
color: #fff;
|
||
}
|
||
|
||
.btn-outline-plex:hover .plex-icon {
|
||
filter: brightness(0) invert(1);
|
||
}
|
||
|
||
/* AList按钮样式 */
|
||
.btn-outline-alist {
|
||
border-color: #70C6BE;
|
||
color: #70C6BE;
|
||
}
|
||
|
||
.btn-outline-alist:hover {
|
||
background-color: #70C6BE;
|
||
border-color: #70C6BE;
|
||
color: #fff;
|
||
}
|
||
|
||
.btn-outline-alist:hover .alist-icon {
|
||
filter: brightness(0) invert(1);
|
||
}
|
||
|
||
/* Plex图标样式 */
|
||
.plex-icon {
|
||
width: 10.3px;
|
||
height: auto;
|
||
object-fit: contain;
|
||
}
|
||
|
||
/* AList图标样式 */
|
||
.alist-icon {
|
||
width: 18px;
|
||
height: auto;
|
||
object-fit: contain;
|
||
position: relative;
|
||
top: -0.5px;
|
||
}
|
||
|
||
/* 任务按钮悬停显示样式 */
|
||
.task-buttons .hover-only {
|
||
opacity: 0;
|
||
position: absolute;
|
||
right: 0;
|
||
visibility: hidden;
|
||
}
|
||
|
||
/* 修改悬停触发范围到整个任务单元 */
|
||
.task:hover .task-buttons .hover-only {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
position: static;
|
||
}
|
||
|
||
/* 确保按钮容器在悬停时保持宽度 - 桌面端 */
|
||
.task-buttons {
|
||
position: relative;
|
||
min-width: 160px; /* 根据按钮数量和间距调整 */
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
padding-right: 0;
|
||
margin-right: 0;
|
||
}
|
||
|
||
/* 确保按钮在悬停时可见 */
|
||
.task:hover .task-buttons {
|
||
z-index: 1;
|
||
}
|
||
|
||
/* 移动模式下的任务按钮容器样式 */
|
||
@media (max-width: 767.98px) {
|
||
.task .col-auto.task-buttons {
|
||
padding-right: 15px; /* 与添加任务按钮的右边距保持一致 */
|
||
}
|
||
|
||
/* 移动端优化：当所有按钮都是悬停显示时，减少按钮容器的最小宽度 */
|
||
.task-buttons {
|
||
min-width: 40px; /* 大幅减少最小宽度，从160px减少到40px */
|
||
}
|
||
|
||
/* 当任务不在悬停状态且所有按钮都是悬停显示时，完全隐藏按钮容器 */
|
||
.task:not(:hover):not(.task-expanded) .task-buttons {
|
||
display: none; /* 完全隐藏按钮容器，释放所有空间 */
|
||
}
|
||
|
||
/* 移动端任务列表显示优化 */
|
||
/* 默认状态：隐藏所有按钮，显示元数据信息 */
|
||
.task-buttons .btn {
|
||
display: none;
|
||
}
|
||
|
||
.task-latest-date,
|
||
.task-latest-file {
|
||
display: inline;
|
||
}
|
||
|
||
/* 悬停状态或展开状态：显示按钮，隐藏元数据信息 */
|
||
.task:hover .task-buttons .btn,
|
||
.task.task-expanded .task-buttons .btn {
|
||
display: flex !important;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
/* 悬停或展开状态下恢复按钮容器的显示和空间 */
|
||
.task:hover .task-buttons,
|
||
.task.task-expanded .task-buttons {
|
||
display: flex !important; /* 恢复显示 */
|
||
min-width: 40px !important;
|
||
padding-right: 15px !important;
|
||
padding-left: 0 !important; /* 移除左内边距 */
|
||
margin-left: 0 !important; /* 移除左外边距 */
|
||
justify-content: flex-end; /* 按钮右对齐 */
|
||
}
|
||
|
||
/* 针对移动端，覆盖Bootstrap col-auto的默认样式 */
|
||
.task:hover .col-auto.task-buttons,
|
||
.task.task-expanded .col-auto.task-buttons {
|
||
flex: 0 0 auto !important; /* 不伸缩，仅占用内容宽度 */
|
||
width: auto !important; /* 自动宽度 */
|
||
max-width: none !important; /* 移除最大宽度限制 */
|
||
}
|
||
|
||
.task:hover .task-latest-date,
|
||
.task:hover .task-latest-file,
|
||
.task.task-expanded .task-latest-date,
|
||
.task.task-expanded .task-latest-file,
|
||
/* 新增：移动端展开/悬停时隐藏 集数统计/任务进度/节目状态 */
|
||
.task:hover .task-season-counts,
|
||
.task:hover .task-progress,
|
||
.task:hover .task-show-status,
|
||
.task.task-expanded .task-season-counts,
|
||
.task.task-expanded .task-progress,
|
||
.task.task-expanded .task-show-status {
|
||
display: none;
|
||
}
|
||
|
||
/* 当日更新标识在所有状态下都显示 */
|
||
.task-today-indicator {
|
||
display: inline-block !important;
|
||
}
|
||
|
||
/* 确保移动端Plex和AList图标样式不受影响 */
|
||
.task-buttons .btn-outline-plex .plex-icon {
|
||
width: 10.3px;
|
||
height: auto;
|
||
object-fit: contain;
|
||
position: static;
|
||
top: auto;
|
||
}
|
||
|
||
.task-buttons .btn-outline-alist .alist-icon {
|
||
width: 18px;
|
||
height: auto;
|
||
object-fit: contain;
|
||
position: relative;
|
||
top: -0.5px;
|
||
}
|
||
}
|
||
|
||
/* 确保桌面端不受移动端优化影响 */
|
||
@media (min-width: 768px) {
|
||
.task-buttons .btn {
|
||
display: flex !important;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.task-latest-date:not(.hover-only),
|
||
.task-latest-file:not(.hover-only) {
|
||
display: inline !important;
|
||
}
|
||
|
||
/* 确保桌面端图标样式正常 */
|
||
.task-buttons .btn-outline-plex .plex-icon {
|
||
width: 10.3px;
|
||
height: auto;
|
||
object-fit: contain;
|
||
position: static;
|
||
top: auto;
|
||
}
|
||
|
||
.task-buttons .btn-outline-alist .alist-icon {
|
||
width: 18px;
|
||
height: auto;
|
||
object-fit: contain;
|
||
position: relative;
|
||
top: -0.5px;
|
||
}
|
||
}
|
||
|
||
/* 任务最近更新日期样式 */
|
||
.task-latest-date {
|
||
color: var(--dark-text-color);
|
||
font-size: 0.95rem;
|
||
font-weight: normal;
|
||
}
|
||
|
||
/* 任务最近转存文件样式 */
|
||
.task-latest-file {
|
||
color: var(--dark-text-color);
|
||
font-size: 0.95rem;
|
||
font-weight: normal;
|
||
}
|
||
|
||
/* 悬停显示模式 - 使用display来避免占用空间，同时保持平滑的悬停效果 */
|
||
.task-latest-date.hover-only,
|
||
.task-latest-file.hover-only {
|
||
display: none;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.task .btn:hover .task-latest-date.hover-only,
|
||
.task .btn:hover .task-latest-file.hover-only {
|
||
display: inline;
|
||
}
|
||
|
||
/* 显示设置行样式 */
|
||
.display-setting-row > [class*='col-'] {
|
||
padding-left: 4px !important;
|
||
padding-right: 4px !important;
|
||
}
|
||
|
||
/* 当天更新指示器样式 */
|
||
.task-today-indicator {
|
||
display: inline-block;
|
||
font-size: 0.92rem;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.task-today-indicator i {
|
||
background: linear-gradient(45deg, #03d5ff 25%, var(--focus-border-color) 60%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
color: var(--focus-border-color); /* 备用颜色，以防渐变不支持 */
|
||
}
|
||
|
||
/* iOS Safari兼容性修复 - 只针对iOS设备使用纯色 */
|
||
@supports (-webkit-touch-callout: none) {
|
||
@media (max-width: 767.98px) {
|
||
.task-today-indicator i {
|
||
/* 在iOS设备上使用纯色，确保可见性 */
|
||
-webkit-text-fill-color: var(--focus-border-color);
|
||
background: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 当日更新图标悬停显示样式 */
|
||
.task-today-indicator.hover-only {
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
}
|
||
|
||
/* 任务列表页面悬停显示 */
|
||
.task:hover .task-today-indicator.hover-only {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
}
|
||
|
||
/* 转存记录页面悬停显示 */
|
||
.table-hover tbody tr:hover .task-today-indicator.hover-only {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
}
|
||
|
||
/* 文件整理页面悬停显示 */
|
||
.selectable-files tbody tr:hover .task-today-indicator.hover-only {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
}
|
||
|
||
/* 日历（月视图）当日更新星标尺寸：日历剧名字号较小，星标相应缩小 */
|
||
.calendar-month-episode .task-today-indicator {
|
||
font-size: 0.95em;
|
||
}
|
||
|
||
.display-setting-row {
|
||
margin-left: -4px !important;
|
||
margin-right: -4px !important;
|
||
}
|
||
|
||
@media (min-width: 992px) {
|
||
.display-setting-row > .col-lg-3 {
|
||
padding-left: 4px !important;
|
||
padding-right: 4px !important;
|
||
}
|
||
}
|
||
|
||
/* 调整显示设置第二行的上边距，使其与第一行保持8px间距 */
|
||
.display-setting-row + .display-setting-row {
|
||
margin-top: -8px !important;
|
||
}
|
||
|
||
/* 文件整理性能设置样式 */
|
||
.performance-setting-row > [class*='col-'] {
|
||
padding-left: 4px !important;
|
||
padding-right: 4px !important;
|
||
}
|
||
.performance-setting-row {
|
||
margin-left: -4px !important;
|
||
margin-right: -4px !important;
|
||
}
|
||
|
||
/* 性能设置板块标题上移8px，统一与其他设置板块的间距 */
|
||
.row.title[title*="文件整理页面的请求参数"] {
|
||
margin-top: 12px !important; /* 从默认的20px减少到12px，上移8px */
|
||
}
|
||
|
||
/* 定时规则设置样式 */
|
||
.crontab-setting-row > [class*='col-'] {
|
||
padding-left: 4px !important;
|
||
padding-right: 4px !important;
|
||
}
|
||
.crontab-setting-row {
|
||
margin-left: -4px !important;
|
||
margin-right: -4px !important;
|
||
}
|
||
/* 修复定时规则选项下边距：当选项变为多行时，最后一个选项的mb-2不应叠加到row mb-2上 */
|
||
.crontab-setting-row > [class*='col-']:last-child {
|
||
margin-bottom: 0 !important;
|
||
}
|
||
/* 在中等屏幕和小屏幕上，确保行与行之间的间距正确 */
|
||
@media (max-width: 991.98px) {
|
||
.crontab-setting-row > [class*='col-'].mb-2 {
|
||
margin-bottom: 0.5rem !important;
|
||
}
|
||
.crontab-setting-row > [class*='col-']:last-child.mb-2 {
|
||
margin-bottom: 0 !important;
|
||
}
|
||
}
|
||
|
||
/* 任务单元基础样式 */
|
||
.task {
|
||
position: relative;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* 任务展开后的配置区域使用默认指针 */
|
||
.task .collapse {
|
||
cursor: default;
|
||
}
|
||
|
||
/* 确保按钮容器在悬停时保持宽度 */
|
||
.task-buttons {
|
||
position: relative;
|
||
min-width: 160px; /* 根据按钮数量和间距调整 */
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
padding-right: 0;
|
||
margin-right: 0;
|
||
}
|
||
|
||
/* 确保按钮在悬停时可见 */
|
||
.task:hover .task-buttons {
|
||
z-index: 1;
|
||
}
|
||
|
||
/* 添加伪元素扩展整个任务单元的可点击区域 */
|
||
.task::before,
|
||
.task::after {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 8px;
|
||
background: transparent;
|
||
z-index: 0;
|
||
pointer-events: auto;
|
||
}
|
||
|
||
.task::before {
|
||
top: 0;
|
||
}
|
||
|
||
.task::after {
|
||
bottom: -8px;
|
||
}
|
||
|
||
/* 当鼠标悬停在任务单元上时，任务标题变为蓝色 */
|
||
.task:hover .btn.btn-block.text-left {
|
||
color: var(--focus-border-color);
|
||
}
|
||
|
||
select.task-filter-select,
|
||
.task-filter-select {
|
||
border-top-right-radius: 0 !important;
|
||
border-bottom-right-radius: 0 !important;
|
||
}
|
||
|
||
.input-group .form-control:focus {
|
||
z-index: 3;
|
||
position: relative;
|
||
}
|
||
.input-group .form-control:focus + .input-group-append .btn,
|
||
.input-group .form-control:focus + .input-group-append .btn:focus {
|
||
border-left-color: #2563eb !important; /* 激活时的边框色 */
|
||
box-shadow: none !important;
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
|
||
/* 添加任务名称悬停样式 */
|
||
.task-name-hover {
|
||
cursor: pointer;
|
||
transition: color 0.2s ease-in-out;
|
||
}
|
||
|
||
.task-name-hover:hover {
|
||
color: var(--focus-border-color) !important;
|
||
}
|
||
|
||
/* 文件整理页面样式 */
|
||
.file-manager-card {
|
||
display: none; /* 隐藏卡片 */
|
||
}
|
||
|
||
.file-manager-card .card-body {
|
||
padding: 0; /* 移除内边距 */
|
||
}
|
||
|
||
.file-manager-input {
|
||
flex: 1;
|
||
}
|
||
|
||
/* 文件整理页面面包屑导航样式 */
|
||
.file-manager-breadcrumb {
|
||
margin-top: 20px;
|
||
overflow-x: auto;
|
||
overflow-y: hidden;
|
||
-webkit-overflow-scrolling: touch; /* iOS设备平滑滚动 */
|
||
-ms-overflow-style: none; /* IE 和 Edge 隐藏滚动条 */
|
||
scrollbar-width: none; /* Firefox 隐藏滚动条 */
|
||
}
|
||
|
||
.file-manager-breadcrumb .breadcrumb-item {
|
||
color: var(--dark-text-color);
|
||
padding: 0;
|
||
position: relative; /* 添加相对定位 */
|
||
flex-shrink: 0; /* 防止项目被压缩 */
|
||
white-space: nowrap; /* 防止文本换行 */
|
||
}
|
||
|
||
.file-manager-breadcrumb .breadcrumb-item a {
|
||
color: var(--dark-text-color);
|
||
text-decoration: none;
|
||
}
|
||
|
||
.file-manager-breadcrumb .breadcrumb-item a:hover {
|
||
color: var(--focus-border-color);
|
||
}
|
||
|
||
/* 文件整理页面面包屑导航当前目录样式 */
|
||
.file-manager-breadcrumb .breadcrumb-item .text-muted {
|
||
color: var(--dark-text-color) !important;
|
||
}
|
||
|
||
/* 隐藏Bootstrap默认的面包屑分隔符 */
|
||
.file-manager-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
|
||
color: var(--dark-text-color);
|
||
content: "/"; /* 使用斜杠作为分隔符 */
|
||
position: relative;
|
||
display: inline-block;
|
||
vertical-align: middle; /* 垂直居中 */
|
||
padding: 0 8px; /* 在斜杠两侧添加间距 */
|
||
top: -1px; /* 将分隔符上移1px */
|
||
}
|
||
|
||
.file-actions {
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.selectable-files tr.selected-file {
|
||
background-color: rgba(var(--primary-rgb), 0.1);
|
||
}
|
||
|
||
.batch-rename-btn {
|
||
width: 32px;
|
||
height: 32px;
|
||
min-width: 32px;
|
||
max-width: 32px;
|
||
padding: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 6px !important;
|
||
color: var(--dark-text-color) !important;
|
||
border-color: var(--dark-text-color) !important;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* 为相邻的batch-rename-btn按钮添加左边距 */
|
||
.batch-rename-btn + .batch-rename-btn {
|
||
margin-left: 8px;
|
||
}
|
||
|
||
/* 文件整理页面按钮与前面元素的间距 */
|
||
.file-manager-rule-bar .batch-rename-btn:first-of-type {
|
||
margin-left: 8px;
|
||
}
|
||
|
||
/* 移动端文件整理页面按钮与前面元素的间距 */
|
||
.file-manager-rule-bar-responsive .batch-rename-btn:first-of-type {
|
||
margin-left: 8px;
|
||
}
|
||
|
||
.batch-rename-btn:hover {
|
||
background-color: var(--dark-text-color) !important;
|
||
border-color: var(--dark-text-color) !important;
|
||
color: white !important;
|
||
}
|
||
|
||
/* 文件整理页面刷新当前目录缓存按钮图标大小 */
|
||
.batch-rename-btn .bi-arrow-clockwise {
|
||
font-size: 1.17rem;
|
||
}
|
||
|
||
/* 文件整理页面新建文件夹按钮图标大小 */
|
||
.batch-rename-btn .bi-folder-plus {
|
||
font-size: 1.01rem;
|
||
position: relative;
|
||
top: 0px;
|
||
}
|
||
|
||
/* 确保文件整理页面的Plex和AList按钮样式与任务列表一致 */
|
||
.batch-rename-btn.btn-outline-plex,
|
||
.batch-rename-btn.btn-outline-alist {
|
||
width: 32px;
|
||
height: 32px;
|
||
padding: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 6px !important;
|
||
}
|
||
|
||
/* 文件整理页面Plex按钮样式 */
|
||
.batch-rename-btn.btn-outline-plex {
|
||
border-color: #EBAF00 !important;
|
||
color: #EBAF00 !important;
|
||
}
|
||
|
||
.batch-rename-btn.btn-outline-plex:hover {
|
||
background-color: #EBAF00 !important;
|
||
border-color: #EBAF00 !important;
|
||
color: #fff !important;
|
||
}
|
||
|
||
.batch-rename-btn.btn-outline-plex:hover .plex-icon {
|
||
filter: brightness(0) invert(1);
|
||
}
|
||
|
||
/* 文件整理页面AList按钮样式 */
|
||
.batch-rename-btn.btn-outline-alist {
|
||
border-color: #70C6BE !important;
|
||
color: #70C6BE !important;
|
||
}
|
||
|
||
.batch-rename-btn.btn-outline-alist:hover {
|
||
background-color: #70C6BE !important;
|
||
border-color: #70C6BE !important;
|
||
color: #fff !important;
|
||
}
|
||
|
||
.batch-rename-btn.btn-outline-alist:hover .alist-icon {
|
||
filter: brightness(0) invert(1);
|
||
}
|
||
|
||
|
||
|
||
/* 文件表格中的展开按钮 */
|
||
.expand-button {
|
||
position: absolute;
|
||
right: 5px;
|
||
top: 11px; /* 固定位置，与其他表格保持一致 */
|
||
transform: none; /* 移除垂直居中转换 */
|
||
cursor: pointer;
|
||
opacity: 0;
|
||
transition: opacity 0.2s;
|
||
background: #fff;
|
||
border-radius: 50%;
|
||
width: 18px;
|
||
height: 18px;
|
||
text-align: center;
|
||
line-height: 18px;
|
||
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
|
||
z-index: 2;
|
||
}
|
||
|
||
.expand-button:hover {
|
||
opacity: 1;
|
||
}
|
||
|
||
/* 批量重命名模态框样式 */
|
||
#batchRenameModal .modal-dialog {
|
||
max-width: 80%;
|
||
}
|
||
|
||
#batchRenameModal .table {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
#batchRenameModal .badge {
|
||
font-size: 90%;
|
||
font-weight: 500;
|
||
word-break: break-all;
|
||
}
|
||
|
||
#batchRenameModal .alert {
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
#batchRenameModal .text-danger {
|
||
background-color: rgba(var(--danger-rgb), 0.05);
|
||
}
|
||
|
||
/* 响应式调整 */
|
||
@media (max-width: 768px) {
|
||
.file-manager-rule-bar {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.file-manager-rule-bar .input-group {
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.batch-rename-btn {
|
||
margin-top: 10px;
|
||
width: 32px;
|
||
height: 32px;
|
||
padding: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 6px !important;
|
||
}
|
||
|
||
/* 移动端按钮间距重置 */
|
||
.batch-rename-btn + .batch-rename-btn {
|
||
margin-left: 8px;
|
||
}
|
||
|
||
/* 移动端第一个按钮与前面元素的间距 */
|
||
.file-manager-rule-bar-responsive .batch-rename-btn:first-of-type {
|
||
margin-left: 8px;
|
||
}
|
||
|
||
#batchRenameModal .modal-dialog {
|
||
max-width: 95%;
|
||
}
|
||
}
|
||
|
||
/* 文件大小单元格样式 */
|
||
.file-size-cell {
|
||
position: relative;
|
||
}
|
||
|
||
.file-size-cell .file-size-value {
|
||
display: inline-block;
|
||
}
|
||
|
||
.delete-record-btn .bi-trash3 {
|
||
font-size: 1rem;
|
||
}
|
||
|
||
/* 当行被选中或鼠标悬停时显示删除按钮 */
|
||
tr:hover .delete-record-btn,
|
||
tr.selected-file .delete-record-btn {
|
||
display: inline-block;
|
||
}
|
||
|
||
/* 表格标题行不显示删除按钮 */
|
||
table th .delete-record-btn {
|
||
display: none !important;
|
||
}
|
||
|
||
/* 可选择的表格样式 */
|
||
table.selectable-files {
|
||
border-collapse: separate;
|
||
border-spacing: 0;
|
||
}
|
||
|
||
table.selectable-files tbody tr {
|
||
transition: none;
|
||
}
|
||
|
||
table.selectable-files tbody tr:hover {
|
||
background-color: rgba(var(--primary-rgb), 0.05);
|
||
}
|
||
|
||
/* 选中行时展开按钮的样式 */
|
||
tr.selected-file .expand-button {
|
||
background-color: var(--button-gray-background-color);
|
||
}
|
||
|
||
/* 展开按钮悬停样式 */
|
||
table.selectable-files .expand-button:hover,
|
||
tr.selected-file .expand-button:hover {
|
||
background-color: #fff;
|
||
opacity: 1;
|
||
}
|
||
|
||
/* 选中行时文件大小和删除按钮的样式 */
|
||
tr.selected-file .file-size-cell .file-size-value,
|
||
tr.selected-file .file-size-cell .delete-record-btn {
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
/* 文件整理页面表格样式 */
|
||
.selectable-files {
|
||
border-collapse: collapse !important;
|
||
}
|
||
|
||
.selectable-files td,
|
||
.selectable-files th {
|
||
border: none !important;
|
||
border-top: 1px solid var(--border-color) !important; /* 添加顶部边框线 */
|
||
border-bottom: 1px solid var(--border-color) !important; /* 添加底部分割线 */
|
||
}
|
||
|
||
.selectable-files tbody tr {
|
||
cursor: pointer;
|
||
transition: none;
|
||
}
|
||
|
||
.selectable-files tbody tr:hover {
|
||
background-color: var(--button-gray-background-color) !important;
|
||
}
|
||
|
||
/* 删除按钮样式调整 */
|
||
.selectable-files .delete-record-btn {
|
||
color: #dc3545;
|
||
cursor: pointer;
|
||
display: none;
|
||
align-items: center;
|
||
justify-content: flex-start; /* 居左对齐 */
|
||
width: 24px;
|
||
height: 24px;
|
||
border-radius: 4px;
|
||
transition: background-color 0.2s ease;
|
||
position: absolute;
|
||
right: auto; /* 移除右对齐 */
|
||
left: 9px; /* 与大小值保持相同的左边距 */
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
.selectable-files tr:hover .delete-record-btn,
|
||
.selectable-files tr.selected-file .delete-record-btn {
|
||
display: inline-flex;
|
||
}
|
||
|
||
.selectable-files tr:hover .file-size-value,
|
||
.selectable-files tr.selected-file .file-size-value {
|
||
visibility: hidden;
|
||
}
|
||
|
||
/* 确保选中行的样式正确 */
|
||
.selectable-files tr.selected-file {
|
||
background-color: var(--button-gray-background-color) !important;
|
||
}
|
||
|
||
/* 使面包屑导航样式与表头一致 */
|
||
.file-manager-breadcrumb .breadcrumb {
|
||
background-color: var(--button-gray-background-color) !important;
|
||
border-radius: 0px;
|
||
font-size: 0.95rem;
|
||
padding: 0 9px !important;
|
||
margin-bottom: 8px;
|
||
border-top: 1px solid var(--border-color) !important;
|
||
border-bottom: 1px solid var(--border-color) !important;
|
||
display: flex;
|
||
flex-wrap: nowrap; /* 禁止换行 */
|
||
align-items: center;
|
||
min-width: max-content; /* 确保内容不被压缩 */
|
||
height: 42px !important; /* 确保面包屑导航内容区域高度为42px（包含上下边框） */
|
||
line-height: 23px !important; /* 设置行高以确保文字垂直居中 */
|
||
box-sizing: border-box !important; /* 确保边框包含在总高度内 */
|
||
}
|
||
|
||
.file-manager-breadcrumb .breadcrumb-item {
|
||
color: var(--dark-text-color);
|
||
padding: 0;
|
||
position: relative; /* 添加相对定位 */
|
||
flex-shrink: 0; /* 防止项目被压缩 */
|
||
white-space: nowrap; /* 防止文本换行 */
|
||
}
|
||
|
||
.file-manager-breadcrumb .breadcrumb-item a {
|
||
color: var(--dark-text-color);
|
||
text-decoration: none;
|
||
}
|
||
|
||
.file-manager-breadcrumb .breadcrumb-item a:hover {
|
||
color: var(--focus-border-color);
|
||
}
|
||
|
||
/* 让"全部文件"链接悬停时文字变为蓝色 */
|
||
.file-manager-breadcrumb .breadcrumb-item.cursor-pointer:hover {
|
||
background-color: transparent; /* 移除背景色 */
|
||
color: var(--focus-border-color);
|
||
}
|
||
|
||
.file-manager-breadcrumb .breadcrumb-item.cursor-pointer:hover {
|
||
color: var(--focus-border-color);
|
||
}
|
||
|
||
/* 文件整理页面样式 */
|
||
.file-manager-input {
|
||
flex: 1;
|
||
}
|
||
|
||
|
||
/* 文件整理规则栏样式 */
|
||
.file-manager-rule-bar {
|
||
width: 100%;
|
||
}
|
||
|
||
/* 文件整理账号选择栏样式 */
|
||
.file-manager-account-selector {
|
||
margin-bottom: 8px !important;
|
||
}
|
||
|
||
/* 账号选择下拉框样式 */
|
||
.file-manager-account-select {
|
||
padding-left: 8px !important;
|
||
text-indent: 0 !important;
|
||
display: flex !important;
|
||
align-items: center !important;
|
||
line-height: 1.5 !important;
|
||
padding-right: 24px !important;
|
||
}
|
||
|
||
/* 账号选择框右侧圆角 - 需要更高优先级覆盖file-manager-input的圆角设置 */
|
||
.file-manager-rule-bar .file-manager-account-select,
|
||
.file-manager-rule-bar-responsive .file-manager-account-select {
|
||
border-top-right-radius: 6px !important;
|
||
border-bottom-right-radius: 6px !important;
|
||
}
|
||
|
||
/* 禁止在表格中选择文本，以便更好地支持点击选择 */
|
||
table.selectable-files {
|
||
user-select: none;
|
||
-webkit-user-select: none;
|
||
-moz-user-select: none;
|
||
-ms-user-select: none;
|
||
}
|
||
|
||
/* 确保展开按钮在选中状态下仍然可见 */
|
||
tr.selected-file .expand-button {
|
||
z-index: 2;
|
||
}
|
||
|
||
/* 当鼠标悬停在展开按钮上时，不改变按钮的背景色 */
|
||
table.selectable-files .expand-button:hover {
|
||
background-color: transparent !important;
|
||
}
|
||
|
||
/* 文件整理页面重命名按钮悬停效果 */
|
||
table.selectable-files .rename-record-btn:hover {
|
||
color: #0A42CC !important;
|
||
}
|
||
|
||
/* 文件整理页面移动按钮悬停效果 */
|
||
table.selectable-files .move-record-btn:hover {
|
||
color: #0A42CC !important;
|
||
}
|
||
|
||
/* 文件整理页面删除按钮悬停效果 */
|
||
table.selectable-files .delete-record-btn:hover {
|
||
color: #b02a37 !important;
|
||
}
|
||
|
||
/* 选中行或鼠标悬停行的大小列样式 */
|
||
tr.selected-file .file-size-cell .file-size-value,
|
||
.selectable-files tbody tr:hover .file-size-cell .file-size-value {
|
||
display: none; /* 隐藏文件大小信息 */
|
||
}
|
||
|
||
tr.selected-file .file-size-cell .delete-record-btn,
|
||
.selectable-files tbody tr:hover .file-size-cell .delete-record-btn {
|
||
display: flex;
|
||
justify-content: flex-start; /* 居左对齐 */
|
||
align-items: center;
|
||
width: auto;
|
||
height: 100%;
|
||
margin-left: 0; /* 确保没有左边距 */
|
||
padding-left: 0; /* 确保没有左内边距 */
|
||
left: 9px; /* 与大小值保持相同的左边距 */
|
||
position: absolute; /* 使用绝对定位 */
|
||
top: 50%; /* 垂直居中 */
|
||
transform: translateY(-50%); /* 确保垂直居中 */
|
||
}
|
||
|
||
/* 当鼠标悬停在展开按钮或删除按钮上时，不改变按钮的背景色 */
|
||
table.selectable-files .expand-button:hover {
|
||
background-color: #fff !important; /* 保持展开按钮原有的白色背景 */
|
||
}
|
||
|
||
/* 文件整理页面表头样式，与转存记录页面保持一致 */
|
||
.selectable-files th,
|
||
table.selectable-files th {
|
||
vertical-align: middle;
|
||
border-bottom: 1px solid var(--border-color) !important; /* 修改底部边框为1px */
|
||
border-top: 1px solid var(--border-color) !important; /* 添加上边框线 */
|
||
padding: 8px 9px !important; /* 统一表头内边距 */
|
||
background-color: var(--button-gray-background-color) !important; /* 表头背景色 */
|
||
color: var(--dark-text-color) !important; /* 表头文字颜色 */
|
||
height: 40px !important; /* 确保表头高度为40px */
|
||
line-height: 24px !important; /* 设置行高以确保文字垂直居中 */
|
||
box-sizing: border-box !important; /* 确保边框包含在总高度内 */
|
||
}
|
||
|
||
/* 文件整理页面表格单元格样式，与转存记录页面保持一致 */
|
||
.selectable-files td,
|
||
table.selectable-files td {
|
||
vertical-align: middle !important; /* 统一使用垂直居中对齐 */
|
||
height: 40px !important; /* 与表头保持一致的高度 */
|
||
max-width: 300px;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
padding: 8px 9px !important; /* 统一单元格内边距 */
|
||
border-bottom: 1px solid var(--border-color); /* 单元格分割线颜色 */
|
||
border-top: none !important; /* 确保没有上边框 */
|
||
box-sizing: border-box !important; /* 确保边框计入总高度 */
|
||
line-height: 24px !important; /* 与表头保持一致的行高 */
|
||
}
|
||
|
||
/* 确保文件大小列的垂直对齐保持一致 */
|
||
.table .file-size-cell,
|
||
.selectable-files .file-size-cell,
|
||
table.selectable-files .file-size-cell {
|
||
vertical-align: middle !important;
|
||
}
|
||
|
||
/* 表头悬停样式 */
|
||
.table thead th.cursor-pointer:hover {
|
||
background-color: #f7f7f9; /* 表头悬停背景色 */
|
||
}
|
||
|
||
/* 确保所有表格的表头悬停样式一致 */
|
||
.table th.cursor-pointer:hover,
|
||
.selectable-files th.cursor-pointer:hover,
|
||
table.selectable-files th.cursor-pointer:hover,
|
||
table.selectable-records th.cursor-pointer:hover {
|
||
background-color: #f7f7f9 !important; /* 表头悬停背景色 */
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* 添加表头排序列的鼠标指针样式 */
|
||
.table th.sortable,
|
||
.selectable-files th.sortable,
|
||
table.selectable-files th.sortable,
|
||
table.selectable-records th.sortable {
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* 确保展开后其他列（如转存日期、大小、修改日期）的内容保持在原始位置 */
|
||
.table tr td {
|
||
vertical-align: top !important; /* 确保所有单元格内容顶部对齐 */
|
||
}
|
||
|
||
/* 确保文件整理页面和模态框中的表格也应用相同的规则 */
|
||
#fileSelectModal .table tr td,
|
||
.selectable-files tr td,
|
||
table.selectable-files tr td,
|
||
table.selectable-records tr td {
|
||
vertical-align: top !important; /* 确保所有单元格内容顶部对齐 */
|
||
}
|
||
|
||
/* 确保展开后的行中所有单元格内容保持原位 */
|
||
.table tr:has(.expanded-text) td,
|
||
#fileSelectModal .table tr:has([style*="white-space: normal"]) td,
|
||
.selectable-files tr:has([style*="white-space: normal"]) td {
|
||
vertical-align: top !important; /* 确保展开后所有单元格内容顶部对齐 */
|
||
}
|
||
|
||
|
||
|
||
/* 文件大小列中展开行的重命名按钮特殊处理 */
|
||
tr:has(.expanded-text) .file-size-cell .rename-record-btn,
|
||
.selectable-records tbody tr:has(.expanded-text) .file-size-cell .rename-record-btn,
|
||
#fileSelectModal .table tr:has([style*="white-space: normal"]) .file-size-cell .rename-record-btn,
|
||
.selectable-files tr:has([style*="white-space: normal"]) .file-size-cell .rename-record-btn {
|
||
top: 8px !important; /* 强制固定位置 */
|
||
transform: none !important; /* 确保不使用任何转换 */
|
||
left: 5px !important; /* 确保左边距固定 */
|
||
/* 不设置display，保持默认的隐藏状态 */
|
||
}
|
||
|
||
/* 文件大小列中展开行的移动按钮特殊处理 */
|
||
tr:has(.expanded-text) .file-size-cell .move-record-btn,
|
||
.selectable-records tbody tr:has(.expanded-text) .file-size-cell .move-record-btn,
|
||
#fileSelectModal .table tr:has([style*="white-space: normal"]) .file-size-cell .move-record-btn,
|
||
.selectable-files tr:has([style*="white-space: normal"]) .file-size-cell .move-record-btn {
|
||
top: 8px !important; /* 强制固定位置 */
|
||
transform: none !important; /* 确保不使用任何转换 */
|
||
left: 32px !important; /* 确保左边距固定，在重命名按钮右侧 */
|
||
/* 不设置display，保持默认的隐藏状态 */
|
||
}
|
||
|
||
/* 文件大小列中展开行的删除按钮特殊处理 */
|
||
tr:has(.expanded-text) .file-size-cell .delete-record-btn,
|
||
.selectable-records tbody tr:has(.expanded-text) .file-size-cell .delete-record-btn,
|
||
#fileSelectModal .table tr:has([style*="white-space: normal"]) .file-size-cell .delete-record-btn,
|
||
.selectable-files tr:has([style*="white-space: normal"]) .file-size-cell .delete-record-btn {
|
||
top: 8px !important; /* 强制固定位置 */
|
||
transform: none !important; /* 确保不使用任何转换 */
|
||
left: 59px !important; /* 确保左边距固定，在移动按钮右侧 */
|
||
/* 不设置display，保持默认的隐藏状态 */
|
||
}
|
||
|
||
/* 修复删除按钮位置问题 - 使用更强制的方法 */
|
||
.delete-record-btn {
|
||
color: #dc3545;
|
||
cursor: pointer;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
width: 24px;
|
||
height: 24px;
|
||
border-radius: 4px;
|
||
transition: background-color 0.2s ease;
|
||
visibility: hidden;
|
||
position: absolute !important; /* 强制绝对定位 */
|
||
top: 8px !important; /* 强制固定位置 */
|
||
transform: none !important; /* 强制禁用任何转换 */
|
||
left: 0;
|
||
}
|
||
|
||
/* 删除按钮图标大小 */
|
||
.delete-record-btn .bi-trash3 {
|
||
font-size: 1rem;
|
||
}
|
||
|
||
/* 选中行或鼠标悬停行时显示删除按钮 */
|
||
tr.selected-record .delete-record-btn,
|
||
.selectable-records tbody tr:hover .delete-record-btn {
|
||
visibility: visible;
|
||
}
|
||
|
||
/* 表头中的删除按钮仅在有选中行时显示 */
|
||
table th .delete-record-btn {
|
||
visibility: hidden;
|
||
}
|
||
|
||
/* 选中行或鼠标悬停行的大小列样式 */
|
||
tr.selected-record .file-size-cell .file-size-value,
|
||
.selectable-records tbody tr:hover .file-size-cell .file-size-value {
|
||
display: none; /* 隐藏文件大小信息 */
|
||
}
|
||
|
||
/* 文件大小列中的删除按钮特殊处理 - 完全重写这部分规则 */
|
||
tr .file-size-cell .delete-record-btn,
|
||
tr.selected-record .file-size-cell .delete-record-btn,
|
||
.selectable-records tbody tr .file-size-cell .delete-record-btn,
|
||
.selectable-records tbody tr:hover .file-size-cell .delete-record-btn {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
width: auto;
|
||
height: 24px;
|
||
margin-left: 0;
|
||
padding-left: 0;
|
||
left: 9px !important; /* 强制固定左边距 */
|
||
position: absolute !important; /* 强制绝对定位 */
|
||
top: 8px !important; /* 强制固定位置 */
|
||
transform: none !important; /* 强制禁用任何转换 */
|
||
}
|
||
|
||
|
||
|
||
|
||
/* 文件整理页面表格行悬停样式 */
|
||
.selectable-files tbody tr:hover {
|
||
background-color: var(--button-gray-background-color);
|
||
}
|
||
|
||
/* --------------- 文件整理页面样式 --------------- */
|
||
|
||
/* 重命名按钮样式 */
|
||
.selectable-files .rename-record-btn {
|
||
color: var(--focus-border-color);
|
||
cursor: pointer;
|
||
display: none;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 24px;
|
||
height: 24px;
|
||
border-radius: 4px;
|
||
position: absolute;
|
||
left: 5px; /* 靠左放置 */
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* 文件整理页面的重命名文件按钮图标大小 */
|
||
.selectable-files .rename-record-btn .bi-pencil {
|
||
font-size: 0.99rem;
|
||
position: relative;
|
||
left: 0.5px;
|
||
}
|
||
|
||
/* 移动按钮样式 */
|
||
.selectable-files .move-record-btn {
|
||
color: var(--focus-border-color);
|
||
cursor: pointer;
|
||
display: none;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 24px;
|
||
height: 24px;
|
||
border-radius: 4px;
|
||
position: absolute;
|
||
left: 32px; /* 在重命名按钮右侧，调整间距 */
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* 文件整理页面的移动文件按钮图标大小 */
|
||
.selectable-files .move-record-btn .bi-arrow-up-right-circle {
|
||
font-size: 1.07rem;
|
||
position: relative;
|
||
}
|
||
|
||
/* 删除按钮样式调整 */
|
||
.selectable-files .delete-record-btn {
|
||
color: #dc3545;
|
||
cursor: pointer;
|
||
display: none;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 24px;
|
||
height: 24px;
|
||
border-radius: 4px;
|
||
position: absolute;
|
||
right: auto; /* 移除右对齐 */
|
||
left: 59px; /* 在移动按钮右侧，调整间距 */
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* 文件大小单元格需要相对定位以容纳绝对定位的按钮 */
|
||
.selectable-files .file-size-cell {
|
||
position: relative;
|
||
min-width: 80px;
|
||
}
|
||
|
||
/* 修复：确保在悬停和选中状态下重命名、移动和删除按钮显示 */
|
||
.selectable-files tr:hover .file-size-cell .rename-record-btn,
|
||
.selectable-files tr.selected-file .file-size-cell .rename-record-btn,
|
||
.selectable-files tr:hover .file-size-cell .move-record-btn,
|
||
.selectable-files tr.selected-file .file-size-cell .move-record-btn,
|
||
.selectable-files tr:hover .file-size-cell .delete-record-btn,
|
||
.selectable-files tr.selected-file .file-size-cell .delete-record-btn {
|
||
display: inline-flex !important;
|
||
visibility: visible !important;
|
||
}
|
||
|
||
/* 修复：确保在悬停和选中状态下文件大小值隐藏 */
|
||
.selectable-files tr:hover .file-size-cell .file-size-value,
|
||
.selectable-files tr.selected-file .file-size-cell .file-size-value {
|
||
display: none !important;
|
||
visibility: hidden !important;
|
||
}
|
||
|
||
/* 重命名输入框样式 - 使用更高优先级 */
|
||
.selectable-files .rename-input {
|
||
flex: 1 !important;
|
||
min-width: 0 !important;
|
||
font-size: 0.94rem !important;
|
||
padding: 4px 5.5px !important;
|
||
border: 1px solid var(--focus-border-color) !important;
|
||
border-radius: 6px !important;
|
||
outline: none !important;
|
||
background-color: #fff !important;
|
||
height: auto !important;
|
||
line-height: 1.2 !important;
|
||
box-sizing: border-box !important;
|
||
margin-top: -2px !important;
|
||
margin-bottom: -2px !important;
|
||
}
|
||
|
||
.selectable-files .rename-input:focus {
|
||
border-color: var(--focus-border-color) !important;
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
/* 确保文件整理页面的重命名按钮在悬停和选中状态下始终可见 - 最高优先级 */
|
||
body .selectable-files tbody tr:hover .file-size-cell .rename-record-btn,
|
||
body .selectable-files tr.selected-file .file-size-cell .rename-record-btn {
|
||
display: inline-flex !important;
|
||
visibility: visible !important;
|
||
position: absolute !important;
|
||
top: 50% !important;
|
||
transform: translateY(-50%) !important;
|
||
left: 5px !important;
|
||
width: 24px !important;
|
||
height: 24px !important;
|
||
align-items: center !important;
|
||
justify-content: center !important;
|
||
z-index: 5 !important;
|
||
opacity: 1 !important;
|
||
}
|
||
|
||
/* 确保文件整理页面的移动按钮在悬停和选中状态下始终可见 - 最高优先级 */
|
||
body .selectable-files tbody tr:hover .file-size-cell .move-record-btn,
|
||
body .selectable-files tr.selected-file .file-size-cell .move-record-btn {
|
||
display: inline-flex !important;
|
||
visibility: visible !important;
|
||
position: absolute !important;
|
||
top: 50% !important;
|
||
transform: translateY(-50%) !important;
|
||
left: 32px !important;
|
||
width: 24px !important;
|
||
height: 24px !important;
|
||
align-items: center !important;
|
||
justify-content: center !important;
|
||
z-index: 5 !important;
|
||
opacity: 1 !important;
|
||
}
|
||
|
||
/* 确保文件整理页面的删除按钮在悬停和选中状态下始终可见 - 最高优先级 */
|
||
body .selectable-files tbody tr:hover .file-size-cell .delete-record-btn,
|
||
body .selectable-files tr.selected-file .file-size-cell .delete-record-btn {
|
||
display: inline-flex !important;
|
||
visibility: visible !important;
|
||
position: absolute !important;
|
||
top: 50% !important;
|
||
transform: translateY(-50%) !important;
|
||
left: 59px !important;
|
||
width: 24px !important;
|
||
height: 24px !important;
|
||
align-items: center !important;
|
||
justify-content: center !important;
|
||
z-index: 5 !important;
|
||
opacity: 1 !important;
|
||
}
|
||
|
||
/* 展开状态下的重命名按钮悬停和选中状态 - 最高优先级 */
|
||
body .selectable-files tbody tr:hover:has([style*="white-space: normal"]) .file-size-cell .rename-record-btn,
|
||
body .selectable-files tr.selected-file:has([style*="white-space: normal"]) .file-size-cell .rename-record-btn {
|
||
display: inline-flex !important;
|
||
visibility: visible !important;
|
||
position: absolute !important;
|
||
top: 8px !important;
|
||
transform: none !important;
|
||
left: 5px !important;
|
||
width: 24px !important;
|
||
height: 24px !important;
|
||
align-items: center !important;
|
||
justify-content: center !important;
|
||
z-index: 5 !important;
|
||
opacity: 1 !important;
|
||
}
|
||
|
||
/* 展开状态下的移动按钮悬停和选中状态 - 最高优先级 */
|
||
body .selectable-files tbody tr:hover:has([style*="white-space: normal"]) .file-size-cell .move-record-btn,
|
||
body .selectable-files tr.selected-file:has([style*="white-space: normal"]) .file-size-cell .move-record-btn {
|
||
display: inline-flex !important;
|
||
visibility: visible !important;
|
||
position: absolute !important;
|
||
top: 8px !important;
|
||
transform: none !important;
|
||
left: 32px !important;
|
||
width: 24px !important;
|
||
height: 24px !important;
|
||
align-items: center !important;
|
||
justify-content: center !important;
|
||
z-index: 5 !important;
|
||
opacity: 1 !important;
|
||
}
|
||
|
||
/* 展开状态下的删除按钮悬停和选中状态 - 最高优先级 */
|
||
body .selectable-files tbody tr:hover:has([style*="white-space: normal"]) .file-size-cell .delete-record-btn,
|
||
body .selectable-files tr.selected-file:has([style*="white-space: normal"]) .file-size-cell .delete-record-btn {
|
||
display: inline-flex !important;
|
||
visibility: visible !important;
|
||
position: absolute !important;
|
||
top: 8px !important;
|
||
transform: none !important;
|
||
left: 59px !important;
|
||
width: 24px !important;
|
||
height: 24px !important;
|
||
align-items: center !important;
|
||
justify-content: center !important;
|
||
z-index: 5 !important;
|
||
opacity: 1 !important;
|
||
}
|
||
|
||
/* 文件整理页面的文件名单元格样式 */
|
||
.selectable-files td .text-truncate {
|
||
display: block;
|
||
max-width: 100%;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
padding-right: 25px; /* 为展开按钮预留空间 */
|
||
line-height: inherit; /* 使用继承的行高 */
|
||
}
|
||
|
||
/* 文件整理页面展开后的文本样式 */
|
||
.selectable-files td div:not(.text-truncate):not(.expand-button):not(.d-flex) {
|
||
white-space: normal;
|
||
word-break: break-all;
|
||
display: block;
|
||
line-height: inherit; /* 使用继承的行高 */
|
||
margin-top: 0;
|
||
margin-bottom: -1px;
|
||
position: relative;
|
||
padding-right: 25px;
|
||
max-width: 100%; /* 确保不超出单元格宽度 */
|
||
top: -1px;
|
||
}
|
||
|
||
/* 展开按钮悬停状态 */
|
||
.selectable-files .expand-button:hover {
|
||
background-color: #fff !important; /* 保持白色背景 */
|
||
opacity: 1 !important;
|
||
}
|
||
|
||
/* 展开按钮样式 */
|
||
.selectable-files .expand-button {
|
||
position: absolute;
|
||
right: 5px;
|
||
top: 11px; /* 固定位置，不使用垂直居中 */
|
||
transform: none; /* 移除垂直居中转换 */
|
||
cursor: pointer;
|
||
opacity: 0;
|
||
transition: opacity 0.2s;
|
||
background: #fff;
|
||
border-radius: 50%;
|
||
width: 18px;
|
||
height: 18px;
|
||
text-align: center;
|
||
line-height: 18px;
|
||
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
|
||
z-index: 2;
|
||
pointer-events: auto; /* 确保点击事件不被阻止 */
|
||
}
|
||
|
||
/* 展开按钮悬停时可见 */
|
||
.selectable-files .position-relative:hover .expand-button {
|
||
opacity: 1;
|
||
}
|
||
|
||
/* 展开按钮中的图标样式 */
|
||
.selectable-files .expand-button .bi {
|
||
font-size: 0.7em;
|
||
vertical-align: middle;
|
||
position: relative;
|
||
top: -1px;
|
||
}
|
||
|
||
/* 确保单元格垂直居中 */
|
||
.selectable-files td {
|
||
vertical-align: middle !important;
|
||
}
|
||
|
||
/* 确保图标与文本垂直对齐 */
|
||
.selectable-files .d-flex.align-items-center {
|
||
align-items: center !important;
|
||
}
|
||
|
||
/* 确保图标固定大小不变形 */
|
||
.selectable-files .d-flex.align-items-center i.bi {
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* 确保图标与文本垂直对齐 - 使用固定高度 */
|
||
.selectable-files .d-flex.align-items-center {
|
||
align-items: flex-start !important; /* 改为顶部对齐，使用固定高度 */
|
||
}
|
||
|
||
/* 确保图标固定大小不变形，使用固定位置 */
|
||
.selectable-files .d-flex.align-items-center i.bi {
|
||
flex-shrink: 0;
|
||
position: relative;
|
||
top: 0px; /* 固定图标位置，向下移动4px */
|
||
}
|
||
|
||
/* 修复文件整理页面展开后文件大小列的垂直对齐问题 */
|
||
/* 确保展开后的行中所有单元格都使用顶部对齐 */
|
||
.selectable-files tr:has([style*="white-space: normal"]) td,
|
||
.selectable-files tr:has(div:not(.text-truncate):not(.expand-button):not(.d-flex)) td {
|
||
vertical-align: top !important; /* 强制展开后所有单元格顶部对齐 */
|
||
}
|
||
|
||
/* 特别处理文件大小列，确保展开后也使用顶部对齐 */
|
||
.selectable-files tr:has([style*="white-space: normal"]) .file-size-cell,
|
||
.selectable-files tr:has(div:not(.text-truncate):not(.expand-button):not(.d-flex)) .file-size-cell {
|
||
vertical-align: top !important; /* 强制文件大小列顶部对齐 */
|
||
}
|
||
|
||
|
||
|
||
/* 确保选中状态下文件整理页面的展开按钮也保持白色背景 */
|
||
.selectable-files .expand-button {
|
||
background-color: #fff !important;
|
||
}
|
||
|
||
/* 文件整理页面重命名配置框输入框样式 - 去除圆角 */
|
||
.file-manager-rule-bar .file-manager-input {
|
||
border-radius: 0 !important; /* 去除圆角 */
|
||
}
|
||
|
||
/* 账号选择框例外 - 保持右侧圆角 */
|
||
.file-manager-rule-bar .file-manager-input.file-manager-account-select {
|
||
border-top-right-radius: 6px !important;
|
||
border-bottom-right-radius: 6px !important;
|
||
}
|
||
|
||
/* 文件整理页面重命名配置框输入框相邻边框重叠样式 */
|
||
.file-manager-rule-bar .file-manager-input:not(:first-child) {
|
||
margin-left: -1px; /* 向左移动1px，使边框重叠 */
|
||
}
|
||
|
||
/* 确保输入框在输入组中的边框重叠 */
|
||
.file-manager-rule-bar .input-group .file-manager-input:not(:first-child) {
|
||
border-left: 1px solid var(--border-color) !important; /* 确保左边框显示 */
|
||
margin-left: -1px; /* 向左移动1px，使边框重叠 */
|
||
}
|
||
|
||
/* 文件整理页面正则命名按钮样式 - 保持左边圆角，去除右边圆角 */
|
||
.file-manager-rule-bar .input-group-prepend .btn {
|
||
position: relative; /* 添加相对定位以应用z-index */
|
||
z-index: 2; /* 确保边框在顶层 */
|
||
border-top-left-radius: 6px !important; /* 保持左上角圆角 */
|
||
border-bottom-left-radius: 6px !important; /* 保持左下角圆角 */
|
||
border-top-right-radius: 0 !important; /* 去除右上角圆角 */
|
||
border-bottom-right-radius: 0 !important; /* 去除右下角圆角 */
|
||
border-right: 1px solid var(--dark-text-color) !important; /* 确保右边框显示 */
|
||
}
|
||
|
||
/* 文件整理页面匹配表达式输入框左边框与正则命名按钮右边框重叠 */
|
||
.file-manager-rule-bar .input-group-prepend + input.file-manager-input {
|
||
margin-left: 0px;
|
||
}
|
||
|
||
/* 文件整理页面激活的输入框边框置顶 */
|
||
.file-manager-rule-bar .file-manager-input:focus {
|
||
position: relative;
|
||
z-index: 3;
|
||
}
|
||
|
||
/* 仅影响文件选择模态框表格的表头和单元格高度，减少5px */
|
||
#fileSelectModal .table th {
|
||
padding-top: 4.5px !important; /* 原7px，减少2.5px */
|
||
padding-bottom: 4px !important; /* 原6.5px，减少2.5px */
|
||
height: 35px !important; /* 原40px，减少5px */
|
||
line-height: 19px !important; /* 原24px，减少5px */
|
||
}
|
||
|
||
#fileSelectModal .table td {
|
||
padding-top: 3px !important; /* 原5.5px，减少2.5px */
|
||
padding-bottom: 4.5px !important; /* 原7px，减少2.5px */
|
||
height: 35px !important; /* 原40px，减少5px */
|
||
line-height: 19px !important; /* 原24px，减少5px */
|
||
}
|
||
|
||
#fileSelectModal .table td {
|
||
vertical-align: middle !important;
|
||
position: relative;
|
||
}
|
||
|
||
#fileSelectModal .table td > *:not(.expand-button) {
|
||
position: relative;
|
||
top: 3.5px;
|
||
}
|
||
|
||
#fileSelectModal .table td.col-size,
|
||
#fileSelectModal .table td.col-date {
|
||
padding-top: 6px !important;
|
||
}
|
||
|
||
#fileSelectModal .table td.col-rename,
|
||
#fileSelectModal .table td.col-action {
|
||
padding-top: 2.5px !important;
|
||
}
|
||
|
||
#fileSelectModal[data-modal-type="preview"] .table td.col-rename {
|
||
padding-top: 3px !important;
|
||
}
|
||
|
||
/* 文件整理页面的文件图标样式 */
|
||
.selectable-files .bi-file-earmark,
|
||
.selectable-files .bi-file-earmark-play,
|
||
.selectable-files .bi-file-earmark-music,
|
||
.selectable-files .bi-file-earmark-image,
|
||
.selectable-files .bi-file-earmark-text,
|
||
.selectable-files .bi-file-earmark-richtext,
|
||
.selectable-files .bi-file-earmark-zip,
|
||
.selectable-files .bi-file-earmark-font,
|
||
.selectable-files .bi-file-earmark-code,
|
||
.selectable-files .bi-file-earmark-pdf,
|
||
.selectable-files .bi-file-earmark-word,
|
||
.selectable-files .bi-file-earmark-excel,
|
||
.selectable-files .bi-file-earmark-ppt,
|
||
.selectable-files .bi-file-earmark-medical {
|
||
font-size: 1.06rem; /* 比模态框的0.95rem大一些 */
|
||
margin-right: 7px !important; /* 图标距离文本的距离 */
|
||
position: relative;
|
||
top: 1px; /* 可微调垂直对齐 */
|
||
left: -1px; /* 可微调水平对齐 */
|
||
}
|
||
|
||
/* 文件整理页面的文件夹图标样式 */
|
||
.bi-folder-fill {
|
||
font-size: 1.06rem; /* 比模态框的0.95rem大一些 */
|
||
margin-right: 7px !important; /* 图标距离文本的距离 */
|
||
position: relative;
|
||
top: 1px; /* 可微调垂直对齐 */
|
||
left: -1px; /* 可微调水平对齐 */
|
||
color: #098eff; /* 55%接近深蓝色 */
|
||
}
|
||
|
||
/* 文件整理页面无法识别剧集编号样式 */
|
||
#fileSelectModal[data-modal-type="preview-filemanager"] .episode-number-text {
|
||
position: relative;
|
||
top: 1px; /* 上移0.5px，从1.5px改为1px */
|
||
display: inline-block;
|
||
}
|
||
|
||
/* 任务配置页面无法识别剧集编号样式 */
|
||
#fileSelectModal[data-modal-type="preview"] .episode-number-text {
|
||
position: relative;
|
||
top: 1px;
|
||
display: inline-block;
|
||
left: 2px;
|
||
}
|
||
|
||
/* 文件整理页面无法识别剧集编号前面的 × 样式 */
|
||
#fileSelectModal[data-modal-type="preview-filemanager"] .episode-x {
|
||
position: relative;
|
||
display: inline;
|
||
margin-right: 2px;
|
||
}
|
||
|
||
/* 确保文件整理页面重命名列中的episode-x在未展开状态下不影响文本截断 */
|
||
#fileSelectModal[data-modal-type="preview-filemanager"] .table td.col-rename div[style*="white-space: nowrap"] .episode-x {
|
||
display: inline !important;
|
||
white-space: nowrap !important;
|
||
}
|
||
|
||
/* 文件整理页面命名预览模式下的绿色重命名文本上移0.5px */
|
||
#fileSelectModal[data-modal-type="preview-filemanager"] .table td.col-rename.text-success > :not(.expand-button) {
|
||
position: relative;
|
||
top: 3px !important; /* 原来是3px，上移0.5px */
|
||
}
|
||
|
||
/* 文件整理页面命名预览模式下的取消按钮样式 */
|
||
#fileSelectModal[data-modal-type="preview-filemanager"] .modal-footer .btn-cancel {
|
||
background-color: var(--button-gray-background-color) !important;
|
||
border-color: var(--button-gray-background-color) !important;
|
||
color: var(--dark-text-color) !important;
|
||
}
|
||
|
||
|
||
#fileSelectModal[data-modal-type="preview-filemanager"] .modal-footer .btn-cancel:hover {
|
||
background-color: #e0e2e6 !important;
|
||
border-color: #e0e2e6 !important;
|
||
color: var(--dark-text-color) !important;
|
||
}
|
||
|
||
/* 移动文件模态框的取消按钮样式 */
|
||
#fileSelectModal[data-modal-type="move"] .modal-footer .btn-cancel {
|
||
background-color: var(--button-gray-background-color) !important;
|
||
border-color: var(--button-gray-background-color) !important;
|
||
color: var(--dark-text-color) !important;
|
||
}
|
||
#fileSelectModal[data-modal-type="move"] .modal-footer .btn-cancel:hover {
|
||
background-color: #e0e2e6 !important;
|
||
border-color: #e0e2e6 !important;
|
||
color: var(--dark-text-color) !important;
|
||
}
|
||
|
||
/* 创建任务模态框的取消按钮样式 */
|
||
#createTaskModal .modal-footer .btn-cancel,
|
||
#editMetadataModal .modal-footer .btn-cancel {
|
||
background-color: var(--button-gray-background-color) !important;
|
||
border-color: var(--button-gray-background-color) !important;
|
||
color: var(--dark-text-color) !important;
|
||
}
|
||
|
||
#createTaskModal .modal-footer .btn-cancel:hover,
|
||
#editMetadataModal .modal-footer .btn-cancel:hover {
|
||
background-color: #e0e2e6 !important;
|
||
border-color: #e0e2e6 !important;
|
||
color: var(--dark-text-color) !important;
|
||
}
|
||
|
||
/* --------------- 模态框层级管理 --------------- */
|
||
/* 当从创建任务模态框中打开文件选择模态框时，确保文件选择模态框显示在上层 */
|
||
#createTaskModal.show ~ #fileSelectModal {
|
||
z-index: 1060 !important;
|
||
}
|
||
|
||
#createTaskModal.show ~ #fileSelectModal .modal-backdrop {
|
||
z-index: 1055 !important;
|
||
}
|
||
|
||
/* --------------- 创建任务模态框使用任务列表样式 --------------- */
|
||
|
||
/* 创建任务模态框底部间距调整 */
|
||
#createTaskModal .modal-footer,
|
||
#editMetadataModal .modal-footer {
|
||
margin-top: 5px; /* 调整为5px，让分割线距离按钮16px */
|
||
}
|
||
|
||
/* 创建任务模态框中的搜索按钮样式 */
|
||
#createTaskModal .btn-primary:has(.bi-search) {
|
||
background-color: transparent;
|
||
border-color: var(--dark-text-color);
|
||
color: var(--dark-text-color);
|
||
width: 32px;
|
||
height: 32px;
|
||
padding: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 0; /* 去掉圆角 */
|
||
border-top-left-radius: 0;
|
||
border-bottom-left-radius: 0;
|
||
}
|
||
|
||
#createTaskModal .btn-primary:has(.bi-search):hover {
|
||
background-color: var(--dark-text-color) !important; /* 使用!important确保优先级 */
|
||
border-color: var(--dark-text-color) !important;
|
||
color: #fff !important;
|
||
}
|
||
|
||
#createTaskModal .btn-primary:hover .bi-search {
|
||
color: #fff !important;
|
||
}
|
||
|
||
/* 覆盖可能存在的其他btn-primary样式 */
|
||
#createTaskModal .input-group-append .btn-primary:has(.bi-search):hover {
|
||
background-color: var(--dark-text-color) !important;
|
||
border-color: var(--dark-text-color) !important;
|
||
color: #fff !important;
|
||
}
|
||
|
||
#createTaskModal .input-group-append .btn-primary:has(.bi-search) {
|
||
background-color: transparent !important;
|
||
border-color: var(--dark-text-color) !important;
|
||
color: var(--dark-text-color) !important;
|
||
}
|
||
|
||
/* 创建任务模态框中的输入组按钮样式 */
|
||
#createTaskModal .input-group-append .btn,
|
||
#createTaskModal .input-group-prepend .btn {
|
||
height: 32px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
#createTaskModal .input-group-append .btn:has(i.bi):not(.btn-primary),
|
||
#createTaskModal .input-group-prepend .btn:has(i.bi):not(.btn-primary) {
|
||
width: 32px;
|
||
height: 32px;
|
||
padding: 0;
|
||
}
|
||
|
||
/* 创建任务模态框中的图标悬停样式 */
|
||
#createTaskModal .btn-outline-secondary:hover .bi-folder,
|
||
#createTaskModal .btn-outline-secondary:hover .bi-calendar3,
|
||
#createTaskModal .btn-outline-secondary:hover .bi-reply,
|
||
#createTaskModal .btn-outline-secondary:hover .bi-folder-x,
|
||
#createTaskModal .input-group-text:hover .bi-google,
|
||
#createTaskModal .input-group-text:hover .bi-link-45deg,
|
||
#createTaskModal .input-group-text:hover .tmdb-icon,
|
||
#createTaskModal .input-group-text:hover .douban-icon {
|
||
color: #fff;
|
||
}
|
||
|
||
/* 创建任务模态框中的input-group-text样式 */
|
||
#createTaskModal .input-group-text {
|
||
background-color: #fff;
|
||
border-color: var(--border-color);
|
||
color: var(--dark-text-color);
|
||
height: 32px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 0 8px;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
#createTaskModal .input-group-text:hover {
|
||
background-color: var(--dark-text-color);
|
||
border-color: var(--dark-text-color);
|
||
color: #fff;
|
||
}
|
||
|
||
/* 忽略后缀文本不应该有悬停效果 */
|
||
#createTaskModal .input-group-text:has(input[type="checkbox"]) {
|
||
background-color: var(--button-gray-background-color) !important;
|
||
border-color: var(--border-color) !important;
|
||
color: var(--dark-text-color) !important;
|
||
}
|
||
|
||
#createTaskModal .input-group-text:has(input[type="checkbox"]):hover {
|
||
background-color: var(--button-gray-background-color) !important;
|
||
border-color: var(--border-color) !important;
|
||
color: var(--dark-text-color) !important;
|
||
}
|
||
|
||
/* 创建任务模态框中的按钮样式 - 完全复制任务列表样式 */
|
||
#createTaskModal .btn-outline-secondary:hover {
|
||
background-color: var(--dark-text-color) !important;
|
||
border-color: var(--dark-text-color) !important;
|
||
color: #fff !important;
|
||
}
|
||
|
||
#createTaskModal .btn-outline-secondary:active {
|
||
background-color: var(--dark-text-color) !important;
|
||
border-color: var(--dark-text-color) !important;
|
||
color: #fff !important;
|
||
}
|
||
|
||
/* 修复创建任务模态框中日历按钮点击后背景色不恢复的问题 */
|
||
#createTaskModal .btn-outline-secondary:has(.bi-calendar3):focus,
|
||
#createTaskModal .btn-outline-secondary:has(.bi-calendar3):active,
|
||
#createTaskModal .btn-outline-secondary:has(.bi-calendar3).focus,
|
||
#createTaskModal .btn-outline-secondary:has(.bi-calendar3).active {
|
||
background-color: transparent !important;
|
||
border-color: var(--dark-text-color) !important;
|
||
color: var(--dark-text-color) !important;
|
||
box-shadow: none !important;
|
||
outline: none !important;
|
||
}
|
||
|
||
/* 强制覆盖所有可能的日历按钮状态 */
|
||
#createTaskModal .input-group-append .btn-outline-secondary:has(.bi-calendar3):focus,
|
||
#createTaskModal .input-group-append .btn-outline-secondary:has(.bi-calendar3):active,
|
||
#createTaskModal .input-group-append .btn-outline-secondary:has(.bi-calendar3).focus,
|
||
#createTaskModal .input-group-append .btn-outline-secondary:has(.bi-calendar3).active {
|
||
background-color: transparent !important;
|
||
border-color: var(--dark-text-color) !important;
|
||
color: var(--dark-text-color) !important;
|
||
box-shadow: none !important;
|
||
outline: none !important;
|
||
}
|
||
|
||
/* 确保日历按钮悬停时正确显示 */
|
||
#createTaskModal .btn-outline-secondary:has(.bi-calendar3):hover,
|
||
#createTaskModal .input-group-append .btn-outline-secondary:has(.bi-calendar3):hover {
|
||
background-color: var(--dark-text-color) !important;
|
||
border-color: var(--dark-text-color) !important;
|
||
color: #fff !important;
|
||
}
|
||
|
||
/* 创建任务模态框中的图标样式 */
|
||
#createTaskModal .tmdb-icon,
|
||
#createTaskModal .douban-icon {
|
||
width: 16px;
|
||
height: 16px;
|
||
transition: filter 0.2s ease;
|
||
}
|
||
|
||
#createTaskModal .input-group-text:hover .tmdb-icon,
|
||
#createTaskModal .input-group-text:hover .douban-icon {
|
||
filter: brightness(0) invert(1); /* 将图标变为白色 */
|
||
}
|
||
|
||
/* 创建任务模态框中的输入组焦点样式 */
|
||
#createTaskModal .input-group .form-control:focus + .input-group-append .btn,
|
||
#createTaskModal .input-group .form-control:focus + .input-group-append .btn:focus {
|
||
border-left-color: #2563eb !important;
|
||
box-shadow: none !important;
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
|
||
/* 创建任务模态框中的表单组样式 */
|
||
#createTaskModal .form-group.row {
|
||
margin-bottom: 8px; /* 设置行之间的间距为8px */
|
||
padding-top: 0;
|
||
padding-bottom: 0;
|
||
}
|
||
|
||
/* 创建任务模态框中的标签样式 */
|
||
#createTaskModal .form-group.row .col-sm-2 {
|
||
max-width: 104px; /* 设置最大宽度为104px */
|
||
min-width: 104px; /* 保持最小宽度一致 */
|
||
width: 104px; /* 固定宽度 */
|
||
}
|
||
|
||
/* 创建任务模态框中的输入框列自适应 */
|
||
#createTaskModal .form-group.row .col-sm-10 {
|
||
width: calc(100% - 104px); /* 计算剩余宽度 */
|
||
max-width: calc(100% - 104px); /* 最大宽度也应该计算 */
|
||
flex: 1; /* 允许伸缩 */
|
||
}
|
||
|
||
/* 创建任务模态框中的标签样式 */
|
||
#createTaskModal .form-group.row .col-form-label {
|
||
padding-top: 4px;
|
||
padding-bottom: 4px;
|
||
font-size: 0.95rem; /* 与输入框字体大小一致 */
|
||
font-weight: normal; /* 标准字重 */
|
||
line-height: 1.5; /* 与输入框行高一致 */
|
||
}
|
||
|
||
/* 创建任务模态框中的表单控件样式 */
|
||
#createTaskModal .form-group.row .form-control,
|
||
#createTaskModal .form-group.row .input-group {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
/* 创建任务模态框中的任务建议样式 */
|
||
#createTaskModal .task-suggestions {
|
||
width: 100%;
|
||
max-height: 482px;
|
||
overflow-y: auto;
|
||
transform: translate(0, 0);
|
||
top: 100%;
|
||
}
|
||
|
||
#createTaskModal .task-suggestions .dropdown-item {
|
||
padding: 0 8px;
|
||
margin: 0;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
#createTaskModal .task-suggestions .dropdown-item:hover {
|
||
background-color: var(--button-gray-background-color);
|
||
color: var(--dark-text-color);
|
||
}
|
||
|
||
#createTaskModal .task-suggestions .dropdown-item:active {
|
||
background-color: var(--focus-border-color) !important;
|
||
color: #fff !important;
|
||
}
|
||
|
||
#createTaskModal .task-suggestions .dropdown-item small a {
|
||
color: var(--light-text-color);
|
||
text-decoration: none;
|
||
transition: color 0.2s;
|
||
font-size: 14px;
|
||
}
|
||
|
||
#createTaskModal .task-suggestions .dropdown-item:hover small a {
|
||
color: var(--dark-text-color);
|
||
}
|
||
|
||
#createTaskModal .task-suggestions .dropdown-item:active small a {
|
||
color: #fff !important;
|
||
}
|
||
|
||
#createTaskModal .task-suggestions .dropdown-item.text-muted {
|
||
height: 30px;
|
||
line-height: 30px;
|
||
padding: 0 8px !important;
|
||
font-size: 14px !important;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
#createTaskModal .task-suggestions .dropdown-item.text-muted:hover {
|
||
color: var(--dark-text-color) !important;
|
||
}
|
||
|
||
#createTaskModal .task-suggestions .dropdown-item.text-muted:not(.text-center) {
|
||
font-size: 14px !important;
|
||
text-align: left !important;
|
||
padding-left: 8px !important;
|
||
color: var(--light-text-color) !important;
|
||
}
|
||
|
||
#createTaskModal .task-suggestions .dropdown-item.text-muted:active {
|
||
color: #fff !important;
|
||
}
|
||
|
||
/* 调整模态框内“正在验证/搜索中”行的转圈图标左边距，仅影响图标本身 */
|
||
#createTaskModal .task-suggestions .dropdown-item.text-muted .spinner-border-sm {
|
||
margin-left: 0; /* 在不改变文本左距的情况下，将图标视觉左距校正至约8px */
|
||
margin-right: 0; /* 图标与文字间距 */
|
||
}
|
||
|
||
/* 创建任务模态框移动端响应式样式 */
|
||
@media (max-width: 767.98px) {
|
||
#createTaskModal .form-group.row .col-sm-2 {
|
||
max-width: 100%; /* 在小屏上允许全宽 */
|
||
min-width: auto; /* 取消最小宽度限制 */
|
||
width: 100%; /* 宽度适应屏幕 */
|
||
padding-top: 0; /* 移除顶部内边距 */
|
||
padding-bottom: 2px; /* 减少底部内边距 */
|
||
}
|
||
|
||
#createTaskModal .form-group.row .col-sm-10 {
|
||
width: 100%; /* 全宽 */
|
||
max-width: 100%; /* 最大宽度全宽 */
|
||
margin-top: 0px; /* 减少顶部间距 */
|
||
padding-top: 0; /* 移除顶部内边距 */
|
||
padding-bottom: 0; /* 移除底部内边距 */
|
||
}
|
||
|
||
/* 确保移动模式下配置选项间距与桌面模式一致 */
|
||
#createTaskModal .form-group.row {
|
||
margin-bottom: 8px; /* 与桌面模式保持一致的行间距 */
|
||
padding-top: 0; /* 移除顶部内边距 */
|
||
padding-bottom: 0; /* 移除底部内边距 */
|
||
}
|
||
|
||
/* 调整移动模式下表单控件的间距 */
|
||
#createTaskModal .form-group.row .form-control,
|
||
#createTaskModal .form-group.row .input-group {
|
||
margin-bottom: 0; /* 确保无底部边距 */
|
||
}
|
||
|
||
/* 调整任务配置标签的间距 */
|
||
#createTaskModal .form-group.row .col-form-label {
|
||
padding-top: 2px; /* 减少顶部内边距 */
|
||
padding-bottom: 2px; /* 减少底部内边距 */
|
||
}
|
||
|
||
/* 专门针对配置选项标题在配置框上方的情况调整 */
|
||
#createTaskModal .form-group.row:not(.align-items-center) .col-sm-2 {
|
||
margin-bottom: 4.5px; /* 设置标题与配置框之间的距离 */
|
||
padding-left: 15px; /* 左对齐与其他元素保持一致 */
|
||
font-size: 0.95rem; /* 保持字体大小一致 */
|
||
}
|
||
|
||
/* 标题在上方时配置框的左内边距调整 */
|
||
#createTaskModal .form-group.row:not(.align-items-center) .col-sm-10 {
|
||
padding-left: 15px; /* 为标题在上方的配置框增加左内边距 */
|
||
}
|
||
}
|
||
|
||
|
||
|
||
@media (max-width: 767.98px) {
|
||
.file-manager-rule-bar-responsive {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
width: 100%;
|
||
}
|
||
.file-manager-rule-bar-responsive .rule-row {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
margin-bottom: 8px;
|
||
gap: 8px;
|
||
width: 100%;
|
||
}
|
||
.file-manager-rule-bar-responsive .rule-row:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
.file-manager-rule-bar-responsive .rule-row input,
|
||
.file-manager-rule-bar-responsive .rule-row button,
|
||
.file-manager-rule-bar-responsive .rule-row .input-group-text,
|
||
.file-manager-rule-bar-responsive .rule-row label {
|
||
flex: 1 1 0;
|
||
min-width: 0;
|
||
}
|
||
.file-manager-rule-bar-responsive .rule-row .input-group-prepend,
|
||
.file-manager-rule-bar-responsive .rule-row .input-group-text {
|
||
flex: 0 0 auto;
|
||
}
|
||
.file-manager-rule-bar-responsive .filter-label {
|
||
flex: 0 0 auto;
|
||
margin-right: 4px;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
|
||
.file-manager-rule-bar-responsive { display: none; }
|
||
.file-manager-rule-bar { display: flex; }
|
||
@media (max-width: 767.98px) {
|
||
.file-manager-rule-bar { display: none !important; }
|
||
.file-manager-rule-bar-responsive { display: block !important; }
|
||
.file-manager-rule-bar-responsive .input-group { width: 100%; }
|
||
.file-manager-rule-bar-responsive .input-group + .input-group { margin-top: 8px; }
|
||
|
||
/* 移动端账号选择栏下边距 - 确保与命名规则栏有8px间距 */
|
||
.file-manager-account-selector {
|
||
margin-bottom: 8px !important;
|
||
}
|
||
|
||
.file-manager-account-selector .file-manager-rule-bar-responsive {
|
||
margin-bottom: 0 !important; /* 移除内部边距，使用外部容器的边距 */
|
||
}
|
||
/* 含文件夹样式调整 */
|
||
.file-manager-rule-bar-responsive .input-group-text.file-folder-rounded {
|
||
border-top-left-radius: 0 !important; /* 左侧不要圆角 */
|
||
border-bottom-left-radius: 0 !important; /* 左侧不要圆角 */
|
||
border-top-right-radius: 6px !important; /* 右侧圆角6px */
|
||
border-bottom-right-radius: 6px !important; /* 右侧圆角6px */
|
||
margin-left: -1px; /* 左边框与过滤规则输入框重叠 */
|
||
position: relative;
|
||
z-index: 1; /* 确保边框显示正确 */
|
||
}
|
||
|
||
/* 过滤规则输入框在含文件夹前面时去除右侧圆角 */
|
||
.file-manager-rule-bar-responsive .input-group .form-control + .input-group-text.file-folder-rounded {
|
||
border-left: 1px solid #ced4da; /* 确保左边框显示 */
|
||
}
|
||
|
||
/* 过滤规则输入框右侧圆角调整 */
|
||
.file-manager-rule-bar-responsive .input-group .form-control:not(:last-child) {
|
||
border-top-right-radius: 0 !important;
|
||
border-bottom-right-radius: 0 !important;
|
||
}
|
||
/* 预览并执行重命名按钮与含文件夹间距8px，且与上方input-group间距8px */
|
||
.file-manager-rule-bar-responsive .input-group-append .btn {
|
||
margin-left: 8px;
|
||
}
|
||
/* 只影响移动端的"预览并执行重命名"按钮上边距 */
|
||
.file-manager-rule-bar-responsive .batch-rename-btn {
|
||
margin-top: 0px; /* 你想要的上边距 */
|
||
width: 32px;
|
||
height: 32px;
|
||
padding: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 6px !important;
|
||
}
|
||
|
||
/* 移动端预览并执行重命名按钮与含文件夹间距 */
|
||
.file-manager-rule-bar-responsive .input-group .batch-rename-btn {
|
||
margin-left: 8px !important;
|
||
}
|
||
|
||
/* 移动端账号选择栏中的按钮间距 */
|
||
.file-manager-rule-bar-responsive .d-flex .batch-rename-btn:first-of-type {
|
||
margin-left: 8px !important;
|
||
}
|
||
|
||
.file-manager-rule-bar-responsive .d-flex .batch-rename-btn + .batch-rename-btn {
|
||
margin-left: 8px !important;
|
||
}
|
||
}
|
||
@media (min-width: 768px) {
|
||
.file-manager-rule-bar { display: flex !important; }
|
||
.file-manager-rule-bar-responsive { display: none !important; }
|
||
}
|
||
|
||
/* --------------- 影视发现页面样式 --------------- */
|
||
.discovery-controls {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.discovery-main-buttons {
|
||
margin-bottom: 8px;
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
gap: 8px;
|
||
overflow-x: auto;
|
||
scrollbar-width: none; /* Firefox */
|
||
-ms-overflow-style: none; /* IE and Edge */
|
||
}
|
||
|
||
.discovery-main-buttons::-webkit-scrollbar {
|
||
display: none; /* Chrome, Safari and Opera */
|
||
}
|
||
|
||
.discovery-sub-buttons {
|
||
margin-bottom: 20px;
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
gap: 8px;
|
||
overflow-x: auto;
|
||
scrollbar-width: none; /* Firefox */
|
||
-ms-overflow-style: none; /* IE and Edge */
|
||
}
|
||
|
||
.discovery-sub-buttons::-webkit-scrollbar {
|
||
display: none; /* Chrome, Safari and Opera */
|
||
}
|
||
|
||
.discovery-btn {
|
||
border-radius: 6px;
|
||
font-size: 0.95rem;
|
||
padding: 0 8px;
|
||
height: 32px;
|
||
border: 1px solid var(--dark-text-color);
|
||
background-color: transparent;
|
||
color: var(--dark-text-color);
|
||
transition: all 0.2s ease;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
white-space: nowrap;
|
||
flex-shrink: 0;
|
||
min-width: fit-content;
|
||
}
|
||
|
||
.discovery-btn:hover {
|
||
background-color: var(--dark-text-color);
|
||
border-color: var(--dark-text-color);
|
||
color: white;
|
||
}
|
||
|
||
.discovery-btn.active {
|
||
background-color: var(--focus-border-color) !important;
|
||
border-color: var(--focus-border-color) !important;
|
||
color: white !important;
|
||
}
|
||
|
||
.discovery-btn:focus {
|
||
box-shadow: none;
|
||
outline: none;
|
||
}
|
||
|
||
.discovery-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
||
column-gap: 20px;
|
||
row-gap: 14px;
|
||
padding: 0;
|
||
}
|
||
|
||
.discovery-poster {
|
||
position: relative;
|
||
width: 100%;
|
||
aspect-ratio: 2/3; /* 强制保持2:3比例 */
|
||
border-radius: 6px;
|
||
overflow: hidden;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
margin-bottom: 10px;
|
||
/* 默认占位背景，避免纯白闪烁 */
|
||
background: #f3f3f3 url('../images/no-poster.svg') center/contain no-repeat;
|
||
}
|
||
|
||
.discovery-poster img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
transition: filter 0.3s ease;
|
||
}
|
||
|
||
.discovery-poster:hover img {
|
||
opacity: 0;
|
||
transition: opacity 0.3s ease;
|
||
}
|
||
|
||
.discovery-poster-overlay {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: var(--dark-text-color);
|
||
color: white;
|
||
padding: 8px 8px 5px 8px;
|
||
font-size: 0.75rem;
|
||
font-weight: normal;
|
||
line-height: 1.4;
|
||
opacity: 0;
|
||
transition: opacity 0.3s ease;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-end;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.discovery-poster:hover .discovery-poster-overlay {
|
||
opacity: 1;
|
||
}
|
||
|
||
.discovery-poster-overlay .info-line {
|
||
margin-bottom: 5.5px;
|
||
padding-bottom: 5px;
|
||
word-wrap: break-word;
|
||
text-align: left;
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
.discovery-poster-overlay .info-line:first-child {
|
||
margin-top: 0;
|
||
}
|
||
|
||
.discovery-poster-overlay .info-line:last-child {
|
||
margin-bottom: 0;
|
||
padding-bottom: 0;
|
||
border-bottom: none;
|
||
}
|
||
|
||
.discovery-rating {
|
||
position: absolute;
|
||
top: 8px;
|
||
right: 8px;
|
||
background-color: rgba(0, 0, 0, 0.8);
|
||
color: #efb30a;
|
||
padding: 2px 6px;
|
||
border-radius: 6px;
|
||
font-size: 0.75rem;
|
||
font-weight: bold;
|
||
z-index: 10;
|
||
}
|
||
|
||
/* 转存进度徽标颜色：类名使用状态名称，便于直接调整 */
|
||
.discovery-rating.status-finale { color: #efb30a; } /* 黄色（评分同色） */
|
||
.discovery-rating.status-ended { color: #ff4d4f; } /* 红色 */
|
||
.discovery-rating.status-other { color: #00C853; } /* 绿色 */
|
||
|
||
/* 追剧日历 - 已转存标识 */
|
||
.calendar-transferred-badge { color: #00C853; padding: 2px 8px 2px 7.5px; }
|
||
.calendar-transferred-badge i {
|
||
line-height: 1;
|
||
display: inline-block;
|
||
transform: translateY(0.5px) scale(1.5);
|
||
/* 使用多向阴影模拟加粗（图标为字体，font-weight不生效） */
|
||
text-shadow:
|
||
0 0 0 currentColor,
|
||
0 0.45px 0 currentColor,
|
||
0 -0.45px 0 currentColor,
|
||
0.45px 0 0 currentColor,
|
||
-0.45px 0 0 currentColor;
|
||
}
|
||
|
||
.discovery-create-task {
|
||
position: absolute;
|
||
top: 8px;
|
||
left: 8px;
|
||
width: 22px;
|
||
height: 22px;
|
||
background-color: transparent;
|
||
border: 1px solid white;
|
||
border-radius: 6px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
opacity: 0;
|
||
transition: all 0.3s ease;
|
||
z-index: 10;
|
||
color: white;
|
||
font-size: 1rem;
|
||
font-weight: 210;
|
||
}
|
||
|
||
.discovery-create-task i {
|
||
font-size: 0.8em;
|
||
transform: translateX(0px) translateY(0px);
|
||
/* 使用多向阴影模拟加粗（图标为字体，font-weight不生效） */
|
||
text-shadow:
|
||
0 0 0 currentColor,
|
||
0 0.1px 0 currentColor,
|
||
0 -0.1px 0 currentColor,
|
||
0.1px 0 0 currentColor,
|
||
-0.1px 0 0 currentColor;
|
||
}
|
||
|
||
.discovery-poster:hover .discovery-create-task {
|
||
opacity: 1;
|
||
}
|
||
|
||
.discovery-create-task:hover {
|
||
background-color: var(--focus-border-color);
|
||
border-color: var(--focus-border-color);
|
||
color: white;
|
||
}
|
||
|
||
/* 追剧日历海报视图刷新按钮样式 */
|
||
.calendar-refresh-metadata {
|
||
position: absolute;
|
||
top: 8px;
|
||
left: 8px;
|
||
width: 22px;
|
||
height: 22px;
|
||
background-color: transparent;
|
||
border: 1px solid white;
|
||
border-radius: 6px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
opacity: 0;
|
||
transition: all 0.3s ease;
|
||
z-index: 10;
|
||
color: white;
|
||
font-size: 0.8rem;
|
||
/* 使用多向阴影模拟加粗（图标为字体，font-weight不生效） */
|
||
text-shadow:
|
||
0 0 0 currentColor,
|
||
0 0.1px 0 currentColor,
|
||
0 -0.1px 0 currentColor,
|
||
0.1px 0 0 currentColor,
|
||
-0.1px 0 0 currentColor;
|
||
}
|
||
|
||
.calendar-poster:hover .calendar-refresh-metadata {
|
||
opacity: 1;
|
||
}
|
||
|
||
.calendar-refresh-metadata:hover {
|
||
background-color: var(--focus-border-color);
|
||
border-color: var(--focus-border-color);
|
||
color: white;
|
||
}
|
||
|
||
/* 内容管理视图刷新元数据按钮样式 */
|
||
.discovery-refresh-metadata {
|
||
position: absolute;
|
||
top: 8px;
|
||
left: 8px;
|
||
width: 22px;
|
||
height: 22px;
|
||
background-color: transparent;
|
||
border: 1px solid white;
|
||
border-radius: 6px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
opacity: 0;
|
||
transition: all 0.3s ease;
|
||
z-index: 10;
|
||
color: white;
|
||
font-size: 0.82rem;
|
||
/* 使用多向阴影模拟加粗（图标为字体，font-weight不生效） */
|
||
text-shadow:
|
||
0 0 0 currentColor,
|
||
0 0.1px 0 currentColor,
|
||
0 -0.1px 0 currentColor,
|
||
0.1px 0 0 currentColor,
|
||
-0.1px 0 0 currentColor;
|
||
}
|
||
|
||
.discovery-poster:hover .discovery-refresh-metadata {
|
||
opacity: 1;
|
||
}
|
||
|
||
.discovery-refresh-metadata:hover {
|
||
background-color: var(--focus-border-color);
|
||
border-color: var(--focus-border-color);
|
||
color: white;
|
||
}
|
||
|
||
/* 内容管理视图编辑按钮样式（与刷新按钮一致，靠右一点） */
|
||
.discovery-edit-metadata {
|
||
position: absolute;
|
||
top: 8px;
|
||
left: 36px;
|
||
width: 22px;
|
||
height: 22px;
|
||
background-color: transparent;
|
||
border: 1px solid white;
|
||
border-radius: 6px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
opacity: 0;
|
||
transition: all 0.3s ease;
|
||
z-index: 10;
|
||
color: white;
|
||
/* 使用多向阴影模拟加粗（图标为字体，font-weight不生效） */
|
||
text-shadow:
|
||
0 0 0 currentColor,
|
||
0 0.1px 0 currentColor,
|
||
0 -0.1px 0 currentColor,
|
||
0.1px 0 0 currentColor,
|
||
-0.1px 0 0 currentColor;
|
||
}
|
||
|
||
/* 内容管理视图编辑元数据按钮图标样式 */
|
||
.discovery-edit-metadata i {
|
||
font-size: 0.67rem;
|
||
}
|
||
|
||
.discovery-poster:hover .discovery-edit-metadata {
|
||
opacity: 1;
|
||
}
|
||
|
||
.discovery-edit-metadata:hover {
|
||
background-color: var(--focus-border-color);
|
||
border-color: var(--focus-border-color);
|
||
color: white;
|
||
}
|
||
|
||
/* 新增：按钮行容器，使用相对定位+inline-flex保证自动补位 */
|
||
.discovery-actions-row {
|
||
position: absolute;
|
||
left: 8px;
|
||
right: 8px;
|
||
height: 22px;
|
||
display: inline-flex;
|
||
gap: 6px;
|
||
}
|
||
|
||
/* 行内部的按钮相对定位，使其不受按钮自身left样式影响（已覆盖） */
|
||
.discovery-actions-row > .discovery-refresh-metadata,
|
||
.discovery-actions-row > .discovery-edit-metadata {
|
||
position: relative;
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.discovery-info {
|
||
padding: 0 0px;
|
||
text-align: left;
|
||
}
|
||
|
||
.discovery-title {
|
||
font-size: 0.95rem;
|
||
font-weight: 500;
|
||
color: var(--dark-text-color);
|
||
margin-bottom: 0px;
|
||
line-height: 1.3;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
cursor: pointer;
|
||
transition: color 0.2s ease;
|
||
}
|
||
|
||
.discovery-title:hover {
|
||
color: var(--focus-border-color);
|
||
}
|
||
|
||
.discovery-genre {
|
||
font-size: 0.95rem;
|
||
color: #979799;
|
||
margin-bottom: 2px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.genre-slash {
|
||
position: relative;
|
||
top: -1px;
|
||
}
|
||
|
||
.discovery-year {
|
||
font-size: 0.75rem;
|
||
color: #666;
|
||
}
|
||
|
||
/* 响应式设计 */
|
||
@media (max-width: 576px) {
|
||
.discovery-grid {
|
||
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
||
column-gap: 20px;
|
||
row-gap: 14px;
|
||
}
|
||
|
||
.discovery-btn {
|
||
font-size: 0.95rem;
|
||
padding: 0 6px;
|
||
height: 28px;
|
||
}
|
||
|
||
.discovery-controls {
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.discovery-main-buttons {
|
||
margin-bottom: 8px;
|
||
gap: 8px;
|
||
}
|
||
|
||
.discovery-sub-buttons {
|
||
margin-bottom: 20px;
|
||
gap: 8px;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 1200px) {
|
||
.discovery-grid {
|
||
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
||
}
|
||
}
|
||
|
||
/* 文件整理页面命名预览模式下的展开状态文本位置调整 - 最高优先级 */
|
||
#fileSelectModal[data-modal-type="preview-filemanager"] .table td.col-rename > div[style*="white-space: normal"][style*="word-break: break-word"] {
|
||
position: relative !important;
|
||
top: 3.5px !important; /* 展开状态文本下移0.5px，覆盖所有其他设置 */
|
||
margin-bottom: 8px !important; /* 文件整理页面展开状态下边距增加1px */
|
||
}
|
||
|
||
/* 任务列表和影视发现页面命名预览模式下的展开状态文本下边距调整 */
|
||
#fileSelectModal[data-modal-type="preview"] .table td.col-rename > div[style*="white-space: normal"][style*="word-break: break-word"] {
|
||
margin-bottom: 7.5px !important; /* 任务列表页面展开状态下边距增加0.5px */
|
||
}
|
||
|
||
/* 选择需转存的文件夹模态框重命名列 × 样式 */
|
||
#fileSelectModal[data-modal-type="source"] .episode-x {
|
||
position: relative;
|
||
top: 0.5px; /* 下移0.5px */
|
||
display: inline;
|
||
margin-right: 2px;
|
||
}
|
||
|
||
/* 选择需转存的文件夹模态框重命名列无法识别剧集编号样式 */
|
||
#fileSelectModal[data-modal-type="source"] .episode-number-text {
|
||
position: relative;
|
||
top: 1.5px; /* 下移1.5px */
|
||
display: inline-block;
|
||
left: 0px; /* 右移2px */
|
||
}
|
||
|
||
/* 选择起始文件模态框重命名列 × 样式 */
|
||
#fileSelectModal[data-modal-type="start-file"] .episode-x {
|
||
position: relative;
|
||
top: 0.5px; /* 下移0.5px */
|
||
display: inline;
|
||
margin-right: 2px;
|
||
}
|
||
|
||
/* 选择起始文件模态框重命名列无法识别剧集编号样式 */
|
||
#fileSelectModal[data-modal-type="start-file"] .episode-number-text {
|
||
position: relative;
|
||
top: 1.5px; /* 下移1.5px */
|
||
display: inline-block;
|
||
left: 0px; /* 右移2px */
|
||
}
|
||
|
||
/* 任务列表、文件整理、影视发现页面的命名预览模态框表头样式 */
|
||
#fileSelectModal[data-modal-type="preview"] .table th.col-filename,
|
||
#fileSelectModal[data-modal-type="preview-filemanager"] .table th.col-filename {
|
||
/* 文件名列的表头样式 */
|
||
font-weight: 600 !important;
|
||
font-family: inherit !important;
|
||
letter-spacing: normal !important;
|
||
padding-top: 4px !important;
|
||
}
|
||
|
||
#fileSelectModal[data-modal-type="preview"] .table th.col-rename,
|
||
#fileSelectModal[data-modal-type="preview-filemanager"] .table th.col-rename {
|
||
/* 命名预览列的表头样式 */
|
||
font-weight: 600 !important;
|
||
font-family: inherit !important;
|
||
letter-spacing: normal !important;
|
||
padding-top: 4px !important;
|
||
}
|
||
|
||
/* 确保其他表头样式不受影响 */
|
||
#fileSelectModal .table th.col-size,
|
||
#fileSelectModal .table th.col-date,
|
||
#fileSelectModal .table th.col-action {
|
||
/* 保持原有的表头样式 */
|
||
font-weight: normal;
|
||
font-family: inherit;
|
||
letter-spacing: normal;
|
||
}
|
||
|
||
/* 仅在"搜索来源"前的最后一个插件折叠时，将间距减少 2px */
|
||
div:has(> .collapse:not(.show)):has(+ .row.title[title^="资源搜索"]) {
|
||
margin-bottom: -10px !important; /* override inline -8px only for collapsed state */
|
||
}
|
||
|
||
/* 修复系统配置页面性能设置与API接口模块间距问题 */
|
||
.row.mb-2.performance-setting-row + .row.title[title^="API接口"] {
|
||
margin-top: 0 !important; /* prevent unexpected collapse stacking */
|
||
padding-top: 4px !important; /* adds effective +4px spacing */
|
||
}
|
||
|
||
/* --------------- 来源标识样式 --------------- */
|
||
.source-badge {
|
||
display: inline-block;
|
||
margin-left: 1px;
|
||
font-size: 14px;
|
||
line-height: 1.2;
|
||
white-space: nowrap;
|
||
vertical-align: baseline;
|
||
color: var(--light-text-color);
|
||
background-color: transparent;
|
||
}
|
||
|
||
.source-badge::before {
|
||
content: " · ";
|
||
margin-right: 0;
|
||
color: var(--light-text-color);
|
||
}
|
||
|
||
.source-badge::after {
|
||
content: attr(data-publish-date);
|
||
margin-left: 0;
|
||
color: var(--light-text-color);
|
||
font-size: 14px;
|
||
line-height: 1.2;
|
||
white-space: nowrap;
|
||
vertical-align: baseline;
|
||
}
|
||
|
||
/* --------------- 追剧日历样式 --------------- */
|
||
/* 日历分类按钮样式 */
|
||
.calendar-category-buttons {
|
||
display: flex;
|
||
gap: 8px;
|
||
flex-wrap: wrap;
|
||
margin-top: -12px;
|
||
}
|
||
|
||
.calendar-category-btn {
|
||
border-radius: 6px;
|
||
padding: 6px 12px;
|
||
font-size: 0.95rem;
|
||
transition: all 0.2s ease;
|
||
border: 1px solid var(--dark-text-color);
|
||
background-color: transparent;
|
||
color: var(--dark-text-color);
|
||
height: 32px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.calendar-category-btn:hover {
|
||
background-color: var(--dark-text-color);
|
||
border-color: var(--dark-text-color);
|
||
color: white;
|
||
}
|
||
|
||
.calendar-category-btn.active {
|
||
background-color: var(--focus-border-color) !important;
|
||
border-color: var(--focus-border-color) !important;
|
||
color: white !important;
|
||
}
|
||
|
||
/* 日历控制按钮样式 */
|
||
.calendar-controls {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
margin-top: -12px;
|
||
flex-wrap: nowrap;
|
||
min-width: 0;
|
||
}
|
||
|
||
/* 移动端：追剧日历右上角按钮栏不换行并可横向滚动 */
|
||
@media (max-width: 767.98px) {
|
||
/* 追剧日历：顶部一行（分类 + 控制）不换行 */
|
||
.calendar-header-row {
|
||
flex-wrap: nowrap !important;
|
||
align-items: center;
|
||
overflow-x: auto !important; /* 整行作为滚动容器 */
|
||
-webkit-overflow-scrolling: touch;
|
||
scrollbar-width: none;
|
||
column-gap: 8px; /* 左右两组之间 8px 间距 */
|
||
margin-top: 8px !important; /* 与上方内容保持 8px 间距 */
|
||
/* 去除内边距，使用遮罩实现两侧 20px 的“硬遮挡”效果（无渐变） */
|
||
padding-left: 0;
|
||
padding-right: 0;
|
||
-webkit-mask-image: linear-gradient(to right,
|
||
transparent 0,
|
||
transparent 15px,
|
||
black 15px,
|
||
black calc(100% - 15px),
|
||
transparent calc(100% - 15px),
|
||
transparent 100%
|
||
);
|
||
mask-image: linear-gradient(to right,
|
||
transparent 0,
|
||
transparent 15px,
|
||
black 15px,
|
||
black calc(100% - 15px),
|
||
transparent calc(100% - 15px),
|
||
transparent 100%
|
||
);
|
||
}
|
||
.calendar-header-row::-webkit-scrollbar { display: none; }
|
||
/* 两列都按内容宽度，不允许被压缩到0，通过外层行滚动 */
|
||
.calendar-header-row > .col-lg-8.col-md-6,
|
||
.calendar-header-row > .col-lg-4.col-md-6 {
|
||
flex: 0 0 auto !important;
|
||
width: auto !important;
|
||
max-width: none !important;
|
||
}
|
||
/* 去除列内侧补白，避免视觉间距异常 */
|
||
.calendar-header-row > .col-lg-8.col-md-6 { padding-right: 0 !important; }
|
||
.calendar-header-row > .col-lg-4.col-md-6 { padding-left: 0 !important; }
|
||
|
||
/* 左侧分类按钮容器：保持单行（滚动交给外层行）*/
|
||
.calendar-category-buttons {
|
||
flex-wrap: nowrap !important;
|
||
margin-top: 0 !important; /* 覆盖全局 -12px，避免被遮挡 */
|
||
}
|
||
|
||
/* 按钮容器强制单行，超出部分横向滚动，隐藏滚动条 */
|
||
.calendar-controls {
|
||
width: auto !important;
|
||
max-width: 100% !important;
|
||
flex-wrap: nowrap !important;
|
||
overflow-x: auto !important;
|
||
white-space: nowrap; /* 兜底防止换行 */
|
||
justify-content: flex-start !important; /* 移动端从左对齐，便于滚动 */
|
||
margin-top: 0 !important; /* 覆盖全局 -12px，避免被上方遮挡 */
|
||
-webkit-overflow-scrolling: touch; /* 惯性滚动 */
|
||
scrollbar-width: none; /* Firefox 隐藏滚动条 */
|
||
touch-action: pan-x; /* 明确允许横向滑动 */
|
||
}
|
||
.calendar-controls::-webkit-scrollbar { /* WebKit 隐藏滚动条 */
|
||
display: none;
|
||
}
|
||
/* 防止子元素换行并被压缩 */
|
||
.calendar-controls > * {
|
||
flex: 0 0 auto !important; /* 不收缩，不换行 */
|
||
}
|
||
|
||
/* 移除先前对父级列的约束，交由外层行滚动 */
|
||
/* 压缩按钮间距为 8px（与PC一致，保证不再因为额外 margin 导致换行）*/
|
||
.calendar-controls .btn,
|
||
.calendar-controls .btn-group {
|
||
margin: 0; /* 由 gap 控制间距 */
|
||
}
|
||
}
|
||
|
||
/* 统一日历控制按钮的样式 */
|
||
.calendar-controls .btn {
|
||
height: 32px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
/* 移除按钮组的额外边距，使用gap统一控制间距 */
|
||
.calendar-controls .btn-group {
|
||
margin: 0;
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
}
|
||
|
||
/* 移除单独按钮的额外边距，使用gap统一控制间距 */
|
||
.calendar-controls .btn:not(.btn-group .btn) {
|
||
margin: 0;
|
||
}
|
||
|
||
/* 确保按钮组内部按钮重叠显示 */
|
||
.calendar-controls .btn-group .btn {
|
||
margin: 0;
|
||
border-radius: 0;
|
||
border-right-width: 0;
|
||
}
|
||
|
||
.calendar-controls .btn-group .btn:first-child {
|
||
border-top-left-radius: 6px;
|
||
border-bottom-left-radius: 6px;
|
||
}
|
||
|
||
.calendar-controls .btn-group .btn:last-child {
|
||
border-top-right-radius: 6px;
|
||
border-bottom-right-radius: 6px;
|
||
border-right-width: 1px;
|
||
}
|
||
|
||
/* 今天按钮样式统一 */
|
||
.calendar-controls .btn-primary {
|
||
background-color: transparent !important;
|
||
border-color: var(--dark-text-color) !important;
|
||
color: var(--dark-text-color) !important;
|
||
padding: 6px 8px !important;
|
||
}
|
||
|
||
.calendar-controls .btn-primary:hover {
|
||
background-color: var(--dark-text-color) !important;
|
||
border-color: var(--dark-text-color) !important;
|
||
color: white !important;
|
||
}
|
||
|
||
/* 海报模式样式 整体上边距调整 */
|
||
.calendar-poster-mode {
|
||
padding-top: 4px;
|
||
}
|
||
|
||
.calendar-date-navigation {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
||
column-gap: 20px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
/* 日历模式样式 整体上边距调整 */
|
||
.calendar-month-mode {
|
||
/* 在窄屏下，当内部表格达到最小宽度时，由本容器产生横向滚动，而不是页面溢出 */
|
||
padding-top: 4px;
|
||
overflow-x: auto; /* 横向滚动托管在日历容器 */
|
||
overflow-y: hidden; /* 纵向由页面滚动，避免双滚动条 */
|
||
/* 保留稳定的滚动条占位，让滚动条显示在表格下方不遮挡内容 */
|
||
scrollbar-gutter: stable both-edges; /* 支持的浏览器会在下方保留沟槽 */
|
||
padding-bottom: 16px; /* 为不支持 scrollbar-gutter 的浏览器腾出空间 */
|
||
padding-left: 0px;
|
||
padding-right: 0px;
|
||
}
|
||
|
||
.calendar-date-item {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 6px 8px;
|
||
border-radius: 6px;
|
||
background-color: transparent;
|
||
border: 1px solid var(--dark-text-color);
|
||
width: 100%;
|
||
height: 32px;
|
||
font-size: 0.95rem;
|
||
color: var(--dark-text-color);
|
||
cursor: default;
|
||
}
|
||
|
||
.calendar-date-item.today {
|
||
background-color: var(--focus-border-color);
|
||
border-color: var(--focus-border-color);
|
||
color: white;
|
||
}
|
||
|
||
.calendar-date-weekday {
|
||
font-size: 0.95rem;
|
||
font-weight: normal;
|
||
margin: 0;
|
||
}
|
||
|
||
.calendar-date-day {
|
||
font-size: 0.95rem;
|
||
font-weight: normal;
|
||
margin: 0;
|
||
}
|
||
|
||
.calendar-poster-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
||
column-gap: 20px;
|
||
row-gap: 14px;
|
||
padding: 0;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.calendar-poster-column {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 14px;
|
||
}
|
||
|
||
.calendar-poster-item {
|
||
width: 100%;
|
||
}
|
||
|
||
.calendar-poster {
|
||
position: relative;
|
||
width: 100%;
|
||
aspect-ratio: 2/3; /* 强制保持2:3比例 */
|
||
border-radius: 6px;
|
||
overflow: hidden;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.calendar-poster-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
transition: opacity 0.3s ease;
|
||
}
|
||
|
||
.calendar-poster-overlay {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: var(--dark-text-color);
|
||
color: white;
|
||
padding: 8px 8px 5px 8px;
|
||
font-size: 0.75rem;
|
||
font-weight: normal;
|
||
line-height: 1.4;
|
||
opacity: 0;
|
||
transition: opacity 0.3s ease;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-end;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.calendar-poster:hover .calendar-poster-overlay {
|
||
opacity: 1;
|
||
}
|
||
|
||
.calendar-poster:hover .calendar-poster-image {
|
||
opacity: 0;
|
||
transition: opacity 0.3s ease;
|
||
}
|
||
|
||
.calendar-poster-overlay .info-line {
|
||
margin-bottom: 5.5px;
|
||
padding-bottom: 5px;
|
||
word-wrap: break-word;
|
||
text-align: left;
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
.calendar-poster-overlay .info-line:first-child {
|
||
margin-top: 0;
|
||
}
|
||
|
||
.calendar-poster-overlay .info-line:last-child {
|
||
margin-bottom: 0;
|
||
padding-bottom: 0;
|
||
border-bottom: none;
|
||
}
|
||
|
||
/* 海报悬停简介按行数截断 */
|
||
.calendar-poster-overlay .info-line.overview {
|
||
overflow: hidden; /* 隐藏超出部分，JS 负责截断 */
|
||
position: relative;
|
||
display: block;
|
||
white-space: normal;
|
||
}
|
||
|
||
.calendar-episode-info {
|
||
padding: 0 0px;
|
||
text-align: left;
|
||
}
|
||
|
||
.calendar-show-name {
|
||
font-size: 0.95rem;
|
||
font-weight: 500;
|
||
color: var(--dark-text-color);
|
||
margin-bottom: 0px;
|
||
line-height: 1.3;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
cursor: pointer; /* 点击打开剧的TMDB页面 */
|
||
transition: color 0.2s ease;
|
||
}
|
||
|
||
.calendar-show-name:hover {
|
||
color: var(--focus-border-color);
|
||
}
|
||
|
||
.calendar-episode-number {
|
||
font-size: 0.95rem;
|
||
color: var(--secondary-text-color);
|
||
margin-bottom: 2px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
cursor: pointer; /* 点击打开集的TMDB页面 */
|
||
}
|
||
|
||
/* 已达到最近转存进度的集数颜色（用于海报视图集数） */
|
||
.calendar-episode-number.episode-number-reached {
|
||
color: var(--secondary-text-color);
|
||
}
|
||
|
||
/* 悬停时集数高亮为 focus-border-color */
|
||
.calendar-episode-number:hover {
|
||
color: var(--focus-border-color);
|
||
}
|
||
|
||
/* 取消对钩图标样式（已移除对应元素） */
|
||
|
||
/* 日历模式样式 */
|
||
.calendar-month-table {
|
||
border-radius: 6px;
|
||
overflow: hidden;
|
||
border: 1px solid var(--border-color);
|
||
/* 作为统一网格容器，表头与表体共享列宽 */
|
||
display: grid;
|
||
grid-template-columns: repeat(7, minmax(100px, 1fr));
|
||
min-width: 700px; /* 7列 × 100px = 700px 最小宽度，配合外层开启横向滚动 */
|
||
}
|
||
|
||
.calendar-month-header {
|
||
/* 让表头的单元格直接参与父级网格，保证与表体同步缩放 */
|
||
display: contents;
|
||
}
|
||
|
||
/* 星期导航栏样式 */
|
||
.calendar-month-header-cell {
|
||
/* 高度32px，垂直居中，左对齐左边距8px */
|
||
height: 32px;
|
||
padding: 0 14px;
|
||
text-align: left;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
font-weight: 400; /* 常规体 */
|
||
font-size: 0.95rem;
|
||
color: var(--dark-text-color);
|
||
border-right: 1px solid var(--border-color); /* 显示内部分割线 */
|
||
background-color: #f7f7f9;
|
||
/* 防止文本被挤压成竖排 */
|
||
min-width: 100px;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
/* 移除星期导航最后一列的右侧分割线，避免溢出 */
|
||
.calendar-month-header-cell:last-child {
|
||
border-right: none;
|
||
}
|
||
|
||
.calendar-month-body {
|
||
/* 表体同样作为父级网格的直接子项 */
|
||
display: contents;
|
||
}
|
||
|
||
.calendar-month-row {
|
||
/* 将行本身不渲染为容器，使单元格直接参与父级网格 */
|
||
display: contents;
|
||
}
|
||
|
||
.calendar-month-cell {
|
||
min-height: 101px; /* 调整日期单元格行高 */
|
||
padding: 8px;
|
||
border-right: 1px solid var(--border-color);
|
||
border-bottom: 1px solid var(--border-color);
|
||
position: relative;
|
||
}
|
||
|
||
.calendar-month-cell:nth-child(7n) {
|
||
border-right: none;
|
||
}
|
||
|
||
/* 移除最后一行（最后7个单元格）的底部边框，避免底部双线 */
|
||
.calendar-month-body .calendar-month-cell:nth-last-child(-n + 7) {
|
||
border-bottom: none;
|
||
}
|
||
|
||
/* 为首行（前7个单元格）添加顶部边框，形成与星期导航栏之间的单一分割线 */
|
||
.calendar-month-body .calendar-month-cell:nth-child(-n + 7) {
|
||
border-top: 1px solid var(--border-color);
|
||
}
|
||
|
||
.calendar-month-date {
|
||
/* 统一所有日期号的展示容器，避免"今天"与其他日期基线不一致 */
|
||
position: relative; /* 允许整体微调位置 */
|
||
top: -0.5px; /* 整体上移 0.5px，使号数与圆背景一同上移 */
|
||
left: 6px; /* 所有号数向右偏移6px */
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: flex-start; /* 默认居左对齐 */
|
||
width: 22px;
|
||
height: 22px;
|
||
line-height: 22px; /* 保障文本垂直居中且基线一致 */
|
||
vertical-align: middle; /* 与同行元素对齐 */
|
||
font-size: 1rem; /* 与集信息、按钮统一 */
|
||
font-weight: 600; /* 仅日期号数加粗 */
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.calendar-month-cell.other-month {
|
||
background-color: #f7f7f9; /* 非本月背景 */
|
||
color: var(--secondary-text-color);
|
||
}
|
||
|
||
.calendar-month-cell.today {
|
||
/* 取消整格背景色与白字，改为仅日期圆形高亮 */
|
||
background-color: transparent;
|
||
color: inherit;
|
||
}
|
||
|
||
/* 当天日期圆形高亮背景 */
|
||
.calendar-month-cell.today .calendar-month-date {
|
||
position: relative; /* 为伪元素定位 */
|
||
justify-content: flex-start; /* 今日与其他日期左对齐一致 */
|
||
color: var(--focus-border-color); /* 当天号数文本颜色改为focus-border-color */
|
||
}
|
||
|
||
.calendar-month-cell.today .calendar-month-date::before {
|
||
display: none; /* 隐藏蓝色圆形背景 */
|
||
}
|
||
|
||
.calendar-month-cell.has-episodes {
|
||
background-color: transparent !important; /* 去除有播出集背景色 */
|
||
}
|
||
|
||
.calendar-month-episodes {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 2px;
|
||
margin-top: 4px; /* 下移单集列表的最高位置 4px */
|
||
}
|
||
|
||
/* 日历模式单集卡片样式 */
|
||
.calendar-month-episode {
|
||
font-size: 0.85rem;
|
||
padding: 6px; /* 等距6px */
|
||
line-height: 1; /* 统一行高，消除上下视觉不等距 */
|
||
/* 日历视图：默认保持原按钮灰背景 */
|
||
background-color: #f7f7f9;
|
||
border-radius: 6px; /* 圆角6px */
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
}
|
||
|
||
/* 日历视图：仅当该集已达转存进度时，卡片背景改为导航悬停浅蓝色 */
|
||
.calendar-month-episode:has(.episode-number.episode-number-reached) {
|
||
background-color: #e6f1ff;
|
||
}
|
||
|
||
.episode-title {
|
||
font-weight: 400; /* 常规体 */
|
||
flex: 1;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
cursor: pointer; /* 点击打开剧的TMDB页面 */
|
||
}
|
||
|
||
.episode-number {
|
||
font-size: 0.85rem;
|
||
color: var(--secondary-text-color);
|
||
white-space: nowrap;
|
||
cursor: pointer; /* 点击打开集的TMDB页面 */
|
||
}
|
||
|
||
/* 日历视图：已转存与未转存集号不区分，统一保持原灰色 */
|
||
.calendar-month-episode .episode-number.episode-number-reached {
|
||
color: var(--secondary-text-color);
|
||
}
|
||
|
||
/* 悬停时，日历模式下的剧名与集数分别高亮 */
|
||
.calendar-month-episode .episode-title:hover,
|
||
.calendar-month-episode .episode-number:hover {
|
||
color: var(--focus-border-color);
|
||
}
|
||
|
||
/* 集号响应式显示：不同宽度下显示不同格式 */
|
||
|
||
/* 默认状态：显示完整格式 */
|
||
.calendar-month-episode .episode-number {
|
||
display: inline;
|
||
font-size: 0.85rem;
|
||
color: var(--secondary-text-color);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* 宽度 > 1280px：完整状态 S01E06, S01E34-E38 */
|
||
@media (min-width: 1281px) {
|
||
.calendar-month-episode .episode-number::before {
|
||
content: attr(data-full);
|
||
font-size: 0.85rem;
|
||
}
|
||
.calendar-month-episode .episode-number {
|
||
font-size: 0;
|
||
}
|
||
}
|
||
|
||
/* 宽度 1080px - 1280px：省略季 E06, E34-E38 */
|
||
@media (max-width: 1280px) and (min-width: 1081px) {
|
||
.calendar-month-episode .episode-number::before {
|
||
content: attr(data-episode-only);
|
||
font-size: 0.85rem;
|
||
}
|
||
.calendar-month-episode .episode-number {
|
||
font-size: 0;
|
||
}
|
||
}
|
||
|
||
/* 宽度 950px - 1080px：纯数字 06, 34-38 */
|
||
@media (max-width: 1080px) and (min-width: 951px) {
|
||
.calendar-month-episode .episode-number::before {
|
||
content: attr(data-number-only);
|
||
font-size: 0.85rem;
|
||
}
|
||
.calendar-month-episode .episode-number {
|
||
font-size: 0;
|
||
}
|
||
}
|
||
|
||
/* 宽度 < 950px：隐藏集号 */
|
||
@media (max-width: 950px) {
|
||
.calendar-month-episode .episode-number {
|
||
display: none;
|
||
}
|
||
|
||
/* 在集号隐藏时，为剧名提供更多空间，确保至少显示四个汉字 */
|
||
.episode-title {
|
||
min-width: 60px;
|
||
}
|
||
}
|
||
|
||
.episode-completed {
|
||
color: var(--success-color);
|
||
font-size: 10px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* 响应式调整 */
|
||
@media (max-width: 576px) {
|
||
.calendar-poster-grid {
|
||
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
||
column-gap: 20px;
|
||
row-gap: 14px;
|
||
}
|
||
|
||
.calendar-date-navigation {
|
||
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
||
column-gap: 20px;
|
||
row-gap: 14px;
|
||
}
|
||
|
||
.calendar-date-item {
|
||
padding: 6px 8px; /* 文本左右间距 8px */
|
||
height: 32px; /* 高度 32px */
|
||
}
|
||
|
||
.calendar-month-cell {
|
||
min-height: 42px;
|
||
padding: 6px;
|
||
}
|
||
|
||
/* 表格内部的紧凑卡片样式（仅作用于日历表格体内） */
|
||
.calendar-month-body .calendar-month-episode {
|
||
font-size: 10px;
|
||
padding: 1px 3px;
|
||
transform: translateY(-7.5px); /* 整体上移 */
|
||
}
|
||
|
||
/* 超小模式：仅在表格内部隐藏文本，下方选中日期列表需正常显示 */
|
||
.calendar-month-body .calendar-month-episode .episode-title,
|
||
.calendar-month-body .calendar-month-episode .episode-number,
|
||
.calendar-month-body .calendar-month-episode .calendar-transferred-badge,
|
||
.calendar-month-body .calendar-month-episode .episode-completed {
|
||
display: none !important; /* 隐藏文本与徽标 */
|
||
}
|
||
|
||
/* 超小模式：表格内部最后一张集卡片到底部边框的可视间距 = 6px
|
||
由于集卡片整体向上位移 7.5px，使用负的 margin-bottom 抵消，保持 6px */
|
||
.calendar-month-body .calendar-month-episodes {
|
||
margin-bottom: -7.5px;
|
||
}
|
||
|
||
/* 超小模式：取消日历表格最小宽度，按屏幕宽度自适应 */
|
||
.calendar-month-table {
|
||
min-width: 0 !important; /* 覆盖 700px 最小宽度 */
|
||
grid-template-columns: repeat(7, minmax(0, 1fr)) !important; /* 7 列严格等宽 */
|
||
width: 100% !important; /* 填满容器宽度 */
|
||
box-sizing: border-box; /* 边框计入宽度，避免产生水平溢出 */
|
||
}
|
||
|
||
/* 超小模式：父容器不再需要横向滚动，由表格自适应 */
|
||
.calendar-month-mode {
|
||
overflow-x: hidden !important;
|
||
}
|
||
|
||
/* 超小模式：允许网格子项收缩，杜绝由最小内容宽度导致的溢出 */
|
||
.calendar-month-cell,
|
||
.calendar-month-header-cell {
|
||
min-width: 0 !important;
|
||
}
|
||
/* 超小模式：选中单元格背景色 */
|
||
.calendar-month-cell.selected {
|
||
background-color: #e6f1ff !important;
|
||
}
|
||
|
||
/* 超小模式：星期导航文本左边距 8px */
|
||
.calendar-month-header-cell {
|
||
padding-left: 8px !important;
|
||
padding-right: 8px !important;
|
||
}
|
||
|
||
/* 超小模式：日期号数左边距 8px */
|
||
.calendar-month-date {
|
||
left: 2px !important;
|
||
top: -3.5px !important;
|
||
}
|
||
/* 超小模式：表格内部的卡片背景色覆盖（仅表格体内紧凑卡片） */
|
||
.calendar-month-body .calendar-month-episode {
|
||
background-color: var(--border-color) !important; /* 普通状态背景色 */
|
||
}
|
||
.calendar-month-body .calendar-month-episode:has(.episode-number.episode-number-reached) {
|
||
background-color: var(--focus-border-color) !important; /* 已转存背景色 */
|
||
}
|
||
|
||
}
|
||
|
||
/* 小屏手机：集卡片样式（仅小屏手机显示） */
|
||
@media (max-width: 576px) {
|
||
.calendar-selected-episodes .calendar-month-episodes {
|
||
gap: 2px;
|
||
margin-top: 4px;
|
||
}
|
||
.calendar-selected-episodes .calendar-month-episode {
|
||
font-size: 0.85rem;
|
||
padding: 6px;
|
||
line-height: 1;
|
||
transform: none; /* 还原不上移 */
|
||
background-color: #f7f7f9; /* 桌面端默认背景 */
|
||
border-radius: 6px;
|
||
}
|
||
.calendar-selected-episodes .calendar-month-episode:has(.episode-number.episode-number-reached) {
|
||
background-color: #e6f1ff; /* 桌面端已转存背景 */
|
||
}
|
||
|
||
/* 移动端：下方列表的集号样式与桌面端一致（显示完整 SxxExx） */
|
||
.calendar-selected-episodes .calendar-month-episode .episode-number {
|
||
display: inline;
|
||
font-size: 0; /* 由伪元素承载显示文本 */
|
||
color: var(--secondary-text-color);
|
||
white-space: nowrap;
|
||
}
|
||
.calendar-selected-episodes .calendar-month-episode .episode-number::before {
|
||
content: attr(data-full);
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
/* 移动端：日历与下方选中日期卡片的间距 */
|
||
.calendar-selected-episodes {
|
||
margin-top: 20px;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 1200px) {
|
||
.calendar-poster-grid {
|
||
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
||
}
|
||
|
||
.calendar-date-navigation {
|
||
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
||
}
|
||
}
|
||
|
||
/* 追剧日历页面日期导航按钮组中的按钮固定宽度32px（包含左右边框） */
|
||
.calendar-controls .btn-group .btn-sm:not(.btn-primary) {
|
||
width: 31px;
|
||
height: 32px;
|
||
min-width: 31px;
|
||
max-width: 31px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* 今天按钮固定宽度47.5px */
|
||
.calendar-controls .btn-group .btn-sm.btn-primary {
|
||
width: 47.5px;
|
||
height: 32px;
|
||
min-width: 47.5px;
|
||
max-width: 47.5px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* 为最后一个按钮单独设置32px宽度，确保总宽度正确 */
|
||
.calendar-controls .btn-group .btn-sm:last-child:not(.btn-primary) {
|
||
width: 32px;
|
||
min-width: 32px;
|
||
max-width: 32px;
|
||
}
|
||
|
||
/* 追剧日历页面单独按钮固定宽度32px */
|
||
.calendar-controls .btn:not(.btn-group .btn) {
|
||
width: 32px;
|
||
height: 32px;
|
||
min-width: 32px;
|
||
max-width: 32px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* 追剧日历页面日期导航按钮的箭头图标大小 */
|
||
.calendar-controls .btn-group .btn-sm .bi-chevron-double-left {
|
||
font-size: 1.09rem;
|
||
position: relative;
|
||
top: 0px;
|
||
left: 0.5px; /* 向左移动左箭头 */
|
||
}
|
||
|
||
.calendar-controls .btn-group .btn-sm .bi-chevron-left {
|
||
font-size: 1.09rem;
|
||
position: relative;
|
||
top: 0px;
|
||
left: -1px; /* 向左移动左箭头 */
|
||
}
|
||
|
||
.calendar-controls .btn-group .btn-sm .bi-chevron-double-right {
|
||
font-size: 1.09rem;
|
||
position: relative;
|
||
top: 0px;
|
||
right: 0.5px; /* 向右移动右箭头 */
|
||
}
|
||
|
||
.calendar-controls .btn-group .btn-sm .bi-chevron-right {
|
||
font-size: 1.09rem;
|
||
position: relative;
|
||
top: 0px;
|
||
right: -1px; /* 向右移动右箭头 */
|
||
}
|
||
|
||
/* 内容管理按钮的图标样式 */
|
||
.calendar-controls .btn .bi-reply {
|
||
font-size: 1.25rem;
|
||
position: relative;
|
||
top: -1.5px;
|
||
left: 0px;
|
||
}
|
||
|
||
.calendar-controls .btn .bi-tags {
|
||
font-size: 1.1rem;
|
||
position: relative;
|
||
top: 0px;
|
||
left: 0.5px;
|
||
}
|
||
|
||
/* 系统配置高亮链接颜色，使用主题 focus 边框颜色 */
|
||
.link-focus {
|
||
color: var(--focus-border-color);
|
||
}
|
||
.link-focus:hover,
|
||
.link-focus:focus {
|
||
color: var(--focus-border-color);
|
||
text-decoration: none;
|
||
}
|
||
|
||
#editMetadataModal .matched-result .input-group-text.square-append {
|
||
border-left: none;
|
||
border-right: none;
|
||
}
|
||
#editMetadataModal .matched-result .input-group-text.square-append:first-of-type {
|
||
border-right: 1px solid var(--border-color);
|
||
}
|
||
#editMetadataModal .matched-result .input-group-text.square-append:last-of-type {
|
||
border-left: 1px solid var(--border-color);
|
||
}
|
||
#editMetadataModal .matched-season-wrap {
|
||
margin-left: auto;
|
||
margin-right: -8px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
#editMetadataModal .matched-result .matched-season {
|
||
box-sizing: border-box; /* 宽高包含边框 */
|
||
width: 30px; /* 默认尺寸减小 2px：30x32（含边框）*/
|
||
min-width: 30px;
|
||
height: 32px;
|
||
display: inline-flex; /* 允许按内容自适应宽度 */
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 0 8px; /* 左右各 8px 内边距 */
|
||
border-top: 1px solid var(--border-color);
|
||
border-bottom: 1px solid var(--border-color);
|
||
border-left: 0; /* 左右边线由两侧方块承担，重叠不显示双线 */
|
||
border-right: 0;
|
||
}
|
||
/* 1) 去除“第”的四个圆角 */
|
||
#editMetadataModal .matched-season-wrap .input-group-text.square-append:first-of-type {
|
||
border-radius: 0 !important;
|
||
border-left: 1px solid var(--border-color) !important; /* 添加左侧边框线 */
|
||
}
|
||
/* 2) “季”固定尺寸，3) 去除其左侧圆角 */
|
||
#editMetadataModal .matched-season-wrap .input-group-text.square-append:last-of-type {
|
||
box-sizing: border-box; /* 含边框宽高 */
|
||
width: 31px !important;
|
||
height: 32px !important;
|
||
border-top-left-radius: 0 !important;
|
||
border-bottom-left-radius: 0 !important;
|
||
}
|
||
#editMetadataModal .matched-link {
|
||
color: var(--dark-text-color);
|
||
text-decoration: none;
|
||
}
|
||
#editMetadataModal .matched-link:hover {
|
||
color: var(--focus-border-color);
|
||
text-decoration: none;
|
||
}
|
||
|
||
/* 匹配结果主文本区域：防止换行，仅该区域横向滚动 */
|
||
#editMetadataModal .matched-result {
|
||
flex-wrap: nowrap !important; /* 整体不换行，季数固定在末尾 */
|
||
min-width: 0 !important;
|
||
}
|
||
|
||
#editMetadataModal .matched-result .matched-main {
|
||
overflow-x: auto !important; /* 主文本横向滚动 */
|
||
overflow-y: hidden !important;
|
||
white-space: nowrap !important; /* 主文本单行 */
|
||
flex: 1 1 auto !important; /* 占据剩余空间 */
|
||
min-width: 0 !important; /* 允许收缩以形成滚动 */
|
||
scrollbar-width: none; /* Firefox 隐藏滚动条 */
|
||
-ms-overflow-style: none; /* IE/Edge (旧版) 隐藏滚动条 */
|
||
}
|
||
|
||
/* WebKit 隐藏滚动条但保留滚动行为 */
|
||
#editMetadataModal .matched-result .matched-main::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
/* 主文本内部元素不换行且不被挤压 */
|
||
#editMetadataModal .matched-result .matched-main a,
|
||
#editMetadataModal .matched-result .matched-main span {
|
||
white-space: nowrap !important;
|
||
flex-shrink: 0 !important;
|
||
}
|
||
|
||
/* 编辑元数据底部提示内的 TMDB 链接样式 */
|
||
#editMetadataModal .tmdb-link {
|
||
color: var(--dark-text-color);
|
||
text-decoration: none;
|
||
}
|
||
#editMetadataModal .tmdb-link:hover {
|
||
color: var(--focus-border-color);
|
||
text-decoration: none;
|
||
}
|
||
|
||
/* 编辑元数据底部提示信息和按钮文本样式 */
|
||
#editMetadataModal .modal-footer .file-selection-info {
|
||
transform: translateY(0.5px);
|
||
}
|
||
#editMetadataModal .modal-footer .btn .btn-text {
|
||
display: inline-block;
|
||
transform: translateY(0.5px);
|
||
}
|
||
#editMetadataModal .modal-footer .btn.btn-primary .btn-text {
|
||
color: #fff;
|
||
}
|
||
/* 取消按钮维持原有深色文字，不随主按钮白色规则变化 */
|
||
#editMetadataModal .modal-footer .btn.btn-primary.btn-cancel .btn-text {
|
||
color: var(--dark-text-color);
|
||
}
|
||
|
||
/* 资源连续浏览按钮样式 */
|
||
.resource-navigation-buttons {
|
||
display: flex;
|
||
gap: 8px;
|
||
margin-right: 4px;
|
||
}
|
||
|
||
.resource-navigation-buttons .btn {
|
||
min-width: 60px;
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
/* 资源导航按钮样式（与模态框中的btn-primary保持一致） */
|
||
.resource-navigation-buttons .btn:not(:disabled) {
|
||
background-color: var(--focus-border-color);
|
||
border-color: var(--focus-border-color);
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
/* 资源导航按钮禁用状态样式（与文件整理页面保持一致） */
|
||
.resource-navigation-buttons .btn:disabled {
|
||
color: #fff !important;
|
||
background-color: var(--focus-border-color) !important;
|
||
border-color: var(--focus-border-color) !important;
|
||
opacity: 0.65;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* 资源导航按钮正常状态悬停样式 */
|
||
.resource-navigation-buttons .btn:not(:disabled):hover {
|
||
background-color: #0A42CC !important;
|
||
border-color: #0A42CC !important;
|
||
}
|
||
|
||
/* 显示设置：拖拽时显示“移动”而非“添加”视觉提示 */
|
||
.draggable-item {
|
||
cursor: move; /* 显示移动光标 */
|
||
}
|
||
|
||
.draggable-item:active {
|
||
opacity: 1;
|
||
}
|
||
|
||
/* 被拖起的原位置元素半透明，表示“占位/已被拖动” */
|
||
.draggable-item.drag-origin {
|
||
opacity: 0.4;
|
||
}
|
||
|
||
/* QASX API Token 显示框：不可编辑但显示文本指针 */
|
||
.token-display {
|
||
cursor: text;
|
||
}
|
||
|
||
/* TMDB 说明文本样式与链接样式（继承颜色、无下划线、悬停不变） */
|
||
.tmdb-attribution {
|
||
margin-top: 4px;
|
||
margin-bottom: 4px;
|
||
color: var(--light-text-color);
|
||
}
|
||
.tmdb-attribution a {
|
||
text-decoration: none;
|
||
color: inherit;
|
||
}
|
||
.tmdb-attribution a:hover,
|
||
.tmdb-attribution a:focus {
|
||
text-decoration: none;
|
||
color: inherit;
|
||
}
|
||
|
||
/* 任务列表：类型筛选按钮与上方名称筛选区域的间距 */
|
||
.tasklist-type-filter {
|
||
margin-top: 0px; /* 上移8px（从8px调整为0px） */
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
/* 排序模块内部的行容器，承载三段控件 */
|
||
.tasklist-sort-wrapper {
|
||
display: flex;
|
||
align-items: center;
|
||
position: relative;
|
||
}
|
||
|
||
/* spacer：撑开空间以将控件推至右侧 */
|
||
.tasklist-sort-spacer {
|
||
flex: 1 0 auto;
|
||
}
|
||
|
||
/* 三段胶囊通用样式（灰底、统一高度/字号） */
|
||
.tasklist-sort-pill {
|
||
background-color: var(--button-gray-background-color) !important;
|
||
color: var(--dark-text-color);
|
||
border: none !important;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
height: 32px;
|
||
line-height: 32px;
|
||
margin: 0 !important;
|
||
font-size: 0.95rem; /* 与左侧类型按钮一致 */
|
||
}
|
||
|
||
/* 左侧“按”按钮：保留边框，去右边框，与中间边框重叠 */
|
||
.tasklist-sort-pill-icon {
|
||
width: 31px;
|
||
min-width: 31px;
|
||
justify-content: center;
|
||
border: 1px solid var(--border-color) !important;
|
||
border-right: none !important;
|
||
border-radius: 6px 0 0 6px;
|
||
background-color: var(--button-gray-background-color);
|
||
}
|
||
|
||
/* 中间下拉：白底，负责显示唯一可见边框（上下左右均有） */
|
||
.tasklist-sort-select {
|
||
padding: 0 8px;
|
||
border: 1px solid var(--border-color) !important;
|
||
border-radius: 0;
|
||
appearance: none;
|
||
-webkit-appearance: none;
|
||
-moz-appearance: none;
|
||
background: #fff !important;
|
||
cursor: pointer;
|
||
background-image: none;
|
||
height: 32px;
|
||
line-height: 30px;
|
||
padding-top: 0 !important;
|
||
padding-bottom: 0 !important;
|
||
box-sizing: border-box !important;
|
||
vertical-align: middle;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
font-size: 0.95rem; /* 与左侧类型按钮一致 */
|
||
}
|
||
|
||
/* 隐藏 IE 默认下拉箭头 */
|
||
.tasklist-sort-select::-ms-expand {
|
||
display: none;
|
||
}
|
||
|
||
/* 聚焦高亮，保持与任务筛选一致 */
|
||
.tasklist-sort-select:focus {
|
||
outline: none;
|
||
box-shadow: none;
|
||
border-color: var(--focus-border-color) !important; /* 聚焦时四边统一为主题色 */
|
||
background: #fff;
|
||
}
|
||
|
||
/* 下拉聚焦时，右侧按钮与其接缝的左边框采用同色，视觉连贯 */
|
||
.tasklist-sort-select:focus + .tasklist-sort-order {
|
||
border-left-color: var(--focus-border-color) !important; /* 接缝同色，视觉连贯 */
|
||
}
|
||
|
||
/* 右侧"升/降序排列"按钮：保留边框，去左边框，与中间重叠 */
|
||
.tasklist-sort-order {
|
||
padding: 0 8px;
|
||
cursor: pointer;
|
||
border: 1px solid var(--border-color) !important;
|
||
border-left: none !important;
|
||
border-radius: 0 6px 6px 0;
|
||
background: var(--button-gray-background-color) !important;
|
||
font-size: 0.95rem; /* 与左侧类型按钮一致 */
|
||
white-space: nowrap;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* 兼容旧结构：若存在下拉菜单 DOM，最小宽度不小于 160px */
|
||
.tasklist-sort-dropdown .dropdown-menu {
|
||
min-width: 160px;
|
||
}
|
||
|
||
/* 任务列表：移动端样式优化（复用追剧日历样式） */
|
||
@media (max-width: 768px) {
|
||
/* 任务列表：顶部一行（类型筛选 + 排序）不换行 */
|
||
.tasklist-header-row {
|
||
flex-wrap: nowrap !important;
|
||
align-items: center;
|
||
overflow-x: auto !important; /* 整行作为滚动容器 */
|
||
-webkit-overflow-scrolling: touch;
|
||
scrollbar-width: none;
|
||
column-gap: 8px; /* 左右两组之间 8px 间距 */
|
||
margin-top: 0px !important;
|
||
/* 去除内边距，使用遮罩实现两侧 20px 的"硬遮挡"效果（无渐变） */
|
||
padding-left: 0;
|
||
padding-right: 0;
|
||
-webkit-mask-image: linear-gradient(to right,
|
||
transparent 0,
|
||
transparent 15px,
|
||
black 15px,
|
||
black calc(100% - 15px),
|
||
transparent calc(100% - 15px),
|
||
transparent 100%
|
||
);
|
||
mask-image: linear-gradient(to right,
|
||
transparent 0,
|
||
transparent 15px,
|
||
black 15px,
|
||
black calc(100% - 15px),
|
||
transparent calc(100% - 15px),
|
||
transparent 100%
|
||
);
|
||
}
|
||
.tasklist-header-row::-webkit-scrollbar { display: none; }
|
||
|
||
/* 两列都按内容宽度，不允许被压缩到0，通过外层行滚动 */
|
||
.tasklist-header-row > .col-lg-8.col-md-6,
|
||
.tasklist-header-row > .col-lg-4.col-md-6 {
|
||
flex: 0 0 auto !important;
|
||
width: auto !important;
|
||
max-width: none !important;
|
||
}
|
||
|
||
/* 去除列内侧补白，避免视觉间距异常 */
|
||
.tasklist-header-row > .col-lg-8.col-md-6 { padding-right: 0 !important; }
|
||
.tasklist-header-row > .col-lg-4.col-md-6 { padding-left: 0 !important; }
|
||
|
||
/* 左侧类型筛选按钮容器：保持单行（滚动交给外层行）*/
|
||
.tasklist-header-row .calendar-category-buttons {
|
||
flex-wrap: nowrap !important;
|
||
margin-top: 0 !important; /* 覆盖全局 -12px，避免被遮挡 */
|
||
}
|
||
|
||
/* 右侧排序组件容器：强制单行，超出部分横向滚动，隐藏滚动条 */
|
||
.tasklist-sort-controls {
|
||
width: auto !important;
|
||
max-width: 100% !important;
|
||
flex-wrap: nowrap !important;
|
||
overflow-x: auto !important;
|
||
-webkit-overflow-scrolling: touch;
|
||
scrollbar-width: none;
|
||
margin-top: -4px !important;
|
||
}
|
||
.tasklist-sort-controls::-webkit-scrollbar { display: none; }
|
||
|
||
/* 排序组件内部容器：保持紧凑布局 */
|
||
.tasklist-sort-controls .tasklist-sort-wrapper {
|
||
flex-shrink: 0;
|
||
}
|
||
}
|
||
|
||
/* 海报卡片：悬停时隐藏带有 hide-on-hover 类的徽标（如任务编号/进度） */
|
||
.discovery-poster:hover .hide-on-hover { opacity: 0; transition: opacity 0.15s ease-in-out; }
|
||
.discovery-poster .hide-on-hover { opacity: 1; transition: opacity 0.15s ease-in-out; }
|
||
|
||
/* 任务列表海报视图：操作按钮图标大小可定制 */
|
||
.tasklist-run-btn i {
|
||
font-size: 0.94rem;
|
||
}
|
||
|
||
/* 任务列表删除此任务按钮图标大小 */
|
||
.tasklist-delete-btn i {
|
||
font-size: 0.73rem;
|
||
position: relative;
|
||
top: 0.5px;
|
||
}
|
||
|
||
/* 任务列表编辑元数据按钮图标大小 */
|
||
.tasklist-edit-metadata-btn i {
|
||
font-size: 0.81rem;
|
||
position: relative;
|
||
top: 0.5px;
|
||
left: 0.5px;
|
||
}
|
||
|
||
/* 任务列表编辑此任务按钮图标大小 */
|
||
.tasklist-edit-task-btn i {
|
||
font-size: 0.69rem;
|
||
position: relative;
|
||
top: 0.5px;
|
||
}
|
||
|
||
/* 任务列表：顶部筛选框列间距改为 8px */
|
||
.tasklist-filter-row {
|
||
margin-left: -4px;
|
||
margin-right: -4px;
|
||
row-gap: 8px;
|
||
}
|
||
.tasklist-filter-row > [class*="col-"] {
|
||
padding-left: 4px;
|
||
padding-right: 4px;
|
||
margin-bottom: 0 !important;
|
||
}
|
||
|
||
.tasklist-filter-row > [class*="col-"]:last-child {
|
||
margin-bottom: 0 !important;
|
||
}
|
||
|
||
@media (min-width: 768px) {
|
||
.tasklist-filter-row {
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
}
|
||
.tasklist-filter-row > [class*="col-"] {
|
||
flex: 1 1 0;
|
||
max-width: 33.3333%;
|
||
min-width: 0;
|
||
}
|
||
.tasklist-filter-row .input-group {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
/* 任务列表视图切换按钮的图标大小，统一为与追剧日历相同 */
|
||
.tasklist-view-toggle-btn i.bi-grid-3x3-gap { /* 切换至海报视图图标 */
|
||
color: var(--dark-text-color);
|
||
font-size: 0.98rem; /* 与 .bi-grid-3x3-gap 统一 */
|
||
}
|
||
.tasklist-view-toggle-btn i.bi-list-ol { /* 切换至列表视图图标 */
|
||
color: var(--dark-text-color);
|
||
font-size: 1.1rem; /* 与网格图标保持一致的视觉尺寸 */
|
||
position: relative;
|
||
top: 0.5px;
|
||
}
|
||
.tasklist-view-toggle-btn.btn.btn-outline-secondary:hover i.bi-grid-3x3-gap,
|
||
.tasklist-view-toggle-btn.btn.btn-outline-secondary:hover i.bi-list-ol {
|
||
color: #fff; /* 与日历按钮 hover 一致 */
|
||
}
|
||
|
||
/* 任务列表创建任务按钮样式，与视图切换按钮保持一致 */
|
||
.tasklist-create-task-btn i.bi-plus-lg {
|
||
color: var(--dark-text-color);
|
||
font-size: 1.15rem; /* 与添加任务按钮图标大小一致 */
|
||
position: relative;
|
||
top: -0.2px; /* 与添加任务按钮图标位置一致 */
|
||
}
|
||
.tasklist-create-task-btn.btn.btn-outline-secondary:hover i.bi-plus-lg {
|
||
color: #fff; /* 与视图切换按钮 hover 一致 */
|
||
}
|
||
|
||
/* 任务列表海报视图：统一集数“/”分隔符的上移微调，与列表视图一致 */
|
||
.tasklist-poster-mode .discovery-genre .count-slash {
|
||
position: relative;
|
||
top: -2px;
|
||
display: inline-block;
|
||
font-size: 0.8em; /* 与任务列表相同的斜杠缩小比例 */
|
||
font-weight: 600; /* 适度加粗，与列表视觉一致 */
|
||
}
|
||
|
||
/* 任务列表删除按钮悬停颜色 */
|
||
.tasklist-delete-btn:hover {
|
||
background-color: #dc3545 !important;
|
||
border-color: #dc3545 !important;
|
||
color: white !important;
|
||
}
|
||
|
||
/* 编辑任务模态框警告信息底部边距 */
|
||
#createTaskModal .alert-warning {
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
/* 创建与编辑任务模态框：插件配置与下方分割线间距 16px */
|
||
#createTaskModal .form-group .jsoneditor,
|
||
#createTaskModal .form-group .jsoneditor-vue {
|
||
margin-bottom: 16px !important;
|
||
}
|
||
|
||
/* 海报视图资源失效警告按钮样式 */
|
||
.discovery-warning-btn {
|
||
position: relative;
|
||
top: 0;
|
||
left: 0;
|
||
width: 22px;
|
||
height: 22px;
|
||
background-color: rgba(0, 0, 0, 0.8);
|
||
border: none;
|
||
border-radius: 6px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #efb30a;
|
||
cursor: default;
|
||
opacity: 1;
|
||
z-index: 10;
|
||
/* 使用多向阴影模拟加粗（图标为字体，font-weight不生效） */
|
||
text-shadow:
|
||
0 0 0 currentColor,
|
||
0 0.2px 0 currentColor,
|
||
0 -0.2px 0 currentColor,
|
||
0.2px 0 0 currentColor,
|
||
-0.2px 0 0 currentColor;
|
||
}
|
||
|
||
/* 资源失效警告按钮图标样式 */
|
||
.discovery-warning-btn i {
|
||
font-size: 0.68rem;
|
||
position: relative;
|
||
top: 0.5px;
|
||
}
|
||
|
||
/* 任务列表Plex按钮图标样式 */
|
||
.tasklist-plex-btn .plex-icon {
|
||
position: relative;
|
||
top: 0px;
|
||
opacity: 1 !important;
|
||
visibility: visible !important;
|
||
/* 使用与其他Plex按钮相同的尺寸设置 */
|
||
width: 7.2px;
|
||
height: auto;
|
||
object-fit: contain;
|
||
/* 移除可能导致加粗效果的阴影 */
|
||
text-shadow: none;
|
||
box-shadow: none;
|
||
/* 恢复简单的滤镜 */
|
||
filter: brightness(0) invert(1);
|
||
-webkit-filter: brightness(0) invert(1);
|
||
}
|
||
|
||
/* 任务列表AList按钮图标样式 */
|
||
.tasklist-alist-btn .alist-icon {
|
||
position: relative;
|
||
top: -0.5px;
|
||
opacity: 1 !important;
|
||
visibility: visible !important;
|
||
/* 使用与其他AList按钮相同的尺寸设置 */
|
||
width: 12.6px;
|
||
height: auto;
|
||
object-fit: contain;
|
||
/* 移除可能导致加粗效果的阴影 */
|
||
text-shadow: none;
|
||
box-shadow: none;
|
||
/* 恢复简单的滤镜 */
|
||
filter: brightness(0) invert(1);
|
||
-webkit-filter: brightness(0) invert(1);
|
||
}
|
||
|
||
/* 海报视图Plex按钮悬停样式 */
|
||
.tasklist-plex-btn:hover {
|
||
background-color: #EBAF00 !important;
|
||
border-color: #EBAF00 !important;
|
||
color: #fff !important;
|
||
}
|
||
|
||
.tasklist-plex-btn:hover .plex-icon {
|
||
filter: brightness(0) invert(1) !important;
|
||
-webkit-filter: brightness(0) invert(1) !important;
|
||
}
|
||
|
||
/* 海报视图AList按钮悬停样式 */
|
||
.tasklist-alist-btn:hover {
|
||
background-color: #70C6BE !important;
|
||
border-color: #70C6BE !important;
|
||
color: #fff !important;
|
||
}
|
||
|
||
.tasklist-alist-btn:hover .alist-icon {
|
||
filter: brightness(0) invert(1) !important;
|
||
-webkit-filter: brightness(0) invert(1) !important;
|
||
}
|
||
|
||
/* 强制确保SVG图标在所有状态下都保持白色和可见 */
|
||
.discovery-poster:hover .tasklist-plex-btn .plex-icon,
|
||
.discovery-poster:hover .tasklist-alist-btn .alist-icon,
|
||
.discovery-poster .tasklist-plex-btn .plex-icon,
|
||
.discovery-poster .tasklist-alist-btn .alist-icon {
|
||
filter: brightness(0) invert(1) !important;
|
||
-webkit-filter: brightness(0) invert(1) !important;
|
||
opacity: 1 !important;
|
||
visibility: visible !important;
|
||
display: block !important;
|
||
}
|
||
|
||
/* 面包屑导航滚动条隐藏样式 */
|
||
/* 文件整理页面面包屑导航滚动条隐藏 */
|
||
.file-manager-breadcrumb::-webkit-scrollbar {
|
||
display: none; /* 隐藏滚动条 */
|
||
}
|
||
|
||
/* 模态框面包屑导航滚动条隐藏 */
|
||
#fileSelectModal .breadcrumb::-webkit-scrollbar {
|
||
display: none; /* 隐藏滚动条 */
|
||
}
|
||
|
||
/* 任务列表海报视图 - 可点击的任务名称样式 */
|
||
.discovery-title[style*="cursor: pointer"] {
|
||
color: var(--dark-text-color);
|
||
transition: color 0.2s ease;
|
||
}
|
||
|
||
.discovery-title[style*="cursor: pointer"]:hover {
|
||
color: var(--focus-border-color);
|
||
}
|
||
|
||
/* 修复：发现/任务列表海报悬停时不应显示半透明 no-poster
|
||
原因：.discovery-poster 设有默认背景图 no-poster.svg，悬停时 img 透明度为 0，导致背景图透出
|
||
处理：悬停状态下移除背景图，仅保留底色，避免 no-poster 露出 */
|
||
.discovery-poster:hover {
|
||
background-image: none !important;
|
||
}
|
||
|
||
/* 任务列表海报视图：悬停时隐藏右上角的任务进度徽标，不影响其他页面 */
|
||
.tasklist-poster-mode .discovery-poster .discovery-rating {
|
||
opacity: 1;
|
||
transition: opacity 0.2s ease;
|
||
}
|
||
|
||
.tasklist-poster-mode .discovery-poster:hover .discovery-rating {
|
||
opacity: 0;
|
||
}
|
||
|
||
/* 任务列表海报视图：悬停时让进度徽标完全“不可交互” */
|
||
.tasklist-poster-mode .discovery-poster:hover .discovery-rating {
|
||
pointer-events: none !important; /* 不响应鼠标事件 */
|
||
cursor: default !important; /* 指针恢复为默认 */
|
||
}
|
||
|
||
/* --------------- 模态框标题栏统一高度微调（总高度 -1px） --------------- */
|
||
#logModal .modal-header,
|
||
#fileSelectModal .modal-header,
|
||
#createTaskModal .modal-header,
|
||
#editMetadataModal .modal-header {
|
||
padding-top: 10.5px;
|
||
padding-bottom: 10.5px;
|
||
}
|
||
|
||
/* --------------- 创建/编辑任务模态框：警告提示专属样式 --------------- */
|
||
/* 仅作用于 #createTaskModal 内的警告提示，不影响其他位置 */
|
||
#createTaskModal .alert-warning {
|
||
height: 32px; /* 固定提示栏高度 */
|
||
min-height: 32px; /* 覆盖全局 36px */
|
||
max-height: 32px; /* 防止内容撑高 */
|
||
display: flex; /* 垂直/水平居中文本 */
|
||
align-items: center;
|
||
justify-content: center;
|
||
text-align: center; /* 文本居中 */
|
||
margin-bottom: 8px; /* 与周边间距保持一致 */
|
||
padding-top: 0; /* 严格控制视觉高度为 32px */
|
||
padding-bottom: 0;
|
||
box-sizing: border-box; /* 高度包含内边距与边框，避免被额外撑高 */
|
||
}
|
||
|
||
/* 定时规则 Crontab 标题链接样式 */
|
||
.crontab-link {
|
||
color: inherit;
|
||
text-decoration: none;
|
||
transition: color 0.2s ease;
|
||
}
|
||
|
||
.crontab-link:hover {
|
||
color: var(--focus-border-color);
|
||
text-decoration: none;
|
||
}
|
||
|
||
/* 任务列表：任务数量指示器 */
|
||
.tasklist-count-indicator {
|
||
min-width: 32px;
|
||
height: 32px;
|
||
border-radius: 6px;
|
||
border: 1px solid var(--border-color);
|
||
background-color: var(--button-gray-background-color);
|
||
color: var(--dark-text-color);
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 0 8px;
|
||
font-size: 0.95rem;
|
||
line-height: 32px;
|
||
user-select: none;
|
||
cursor: default;
|
||
flex-shrink: 0;
|
||
white-space: nowrap;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 任务数量指示器悬停时显示文本光标，和其他标题框一致 */
|
||
.tasklist-count-single-digit {
|
||
width: 32px;
|
||
padding: 0;
|
||
}
|
||
|
||
.tasklist-count-number {
|
||
cursor: text;
|
||
user-select: text;
|
||
}
|
||
|
||
.calendar-filter-row {
|
||
margin-bottom: 20px; /* 桌面端保持与下方组件净间距 8px（抵消分类与控制按钮的 -12px 上移） */
|
||
} |