标签充满整个可点击区域 */
}
/* --- 可点击的触发器（主分类）样式 (优化) --- */
.collapsible-trigger {
display: flex; /* 使用 Flexbox 布局 */
justify-content: space-between; /* 两端对齐，文字在左，箭头在右 */
align-items: center; /* 垂直居中 */
padding: 8px 12px; /* 调整一下内边距，更舒服 */
position: relative; /* 确保伪元素可以定位 */
color: #333; /* 默认文字颜色 */
}
/* 主分类被hover时的样式 */
.collapsible-trigger:hover {
background-color: #f0f2f5; /* 更柔和的悬停背景色 */
}
/* 【关键】主分类被选中时的样式 */
.collapsible-trigger.selected {
background-color: #e6f7ff; /* 淡蓝色背景 */
color: #1890ff; /* 主题蓝色字体 */
}
/* 【关键】被选中的主分类文字加粗 */
.collapsible-trigger.selected span {
font-weight: bold;
}
/* --- 箭头样式 (优化) --- */
.collapsible-trigger .arrow {
/* 不再需要绝对定位，Flexbox会处理好位置 */
position: static;
transform: translateY(0) rotate(0deg); /* 重置 transform */
height: 16px;
width: 16px;
transition: transform 0.3s ease-in-out;
}
/* 当分组展开时，箭头向上旋转 */
.collapsible-group.is-open .collapsible-trigger .arrow {
transform: rotate(-180deg); /* 向上指，表示可以收起 */
}
/* --- 子菜单内容区域样式 (优化) --- */
.collapsible-content {
padding-left: 20px; /* 增加一点缩进，更有层次感 */
background-color: #fafafa; /* 给子菜单一个淡淡的背景色，区分主次 */
}
/* 子菜单项的样式 */
.collapsible-content .date-nav--item {
padding: 8px 15px;
border-radius: 4px;
transition: background-color 0.3s, color 0.3s, font-weight 0.3s;
color: #555; /* 子菜单默认颜色深灰色 */
}
/* 子菜单项被hover时的样式 */
.collapsible-content a:hover .date-nav--item {
background-color: #e9e9e9;
color: #111;
}
/* 【关键】子菜单被选中时的样式 */
.collapsible-content .date-nav--item.selected {
font-weight: bold; /* 文字加粗 */
color: #007dbc; /* 深邃的蓝色，比主分类更深一度 */
background-color: #e6f7ff; /* 一个柔和的蓝色背景 */
}
/* 【关键】给选中的子菜单项左边加一个蓝色小竖条，更醒目喵！ */
.collapsible-content .date-nav--item.selected {
position: relative;
}
/* 目标：选中 .t1-research--list 容器内的 .t1-research--title */
/* 你的搜索结果都包裹在 中，
而 hits widget 的根元素 class 是 t1-research--list */
.t1-research--list .t1-research--title {
color: #007dbc; /* 和左侧选中标签一样的深蓝色喵！ */
font-weight: 600; /* 使用 600，是一种现代感的加粗 */
font-size: 18px; /* 稍微调大一点字体，让它更像主标题 */
margin-bottom: 8px; /* 和下面的中文标题拉开一点距离 */
line-height: 1.4; /* 保证多行标题的行高 */
transition: color 0.3s ease; /* 加个平滑的颜色过渡效果，更优雅 */
}
/* (可选但推荐) 当鼠标悬停在整个卡片上时，标题颜色可以变得更深或有下划线 */
.t1-research--list a.t1-research--item:hover .t1-research--title {
color: #003d82; /* 悬停时颜色加深一点点，给用户反馈 */
text-decoration: underline; /* 加上下划线，更像个可以点击的链接了喵 */
}
/* 顺便优化一下中文引用/副标题的样式 */
.t1-research--list .t1-research--cite {
color: #555; /* 深灰色，与主标题区分开 */
font-size: 14px;
margin-bottom: 12px;
}
/* 优化摘要的样式 */
.t1-research--list .t1-research--summary {
color: #666;
font-size: 14px;
line-height: 1.6;
}
/**
搜索框
*/
/*
* ===================================================================
* ↓↓↓ 喵喵的搜索框美化魔法！【JS联动最终版】 (づ｡◕‿‿◕｡)づ 💖 ↓↓↓
* ===================================================================
*/
/* --- 让由JS生成的搜索框在蓝色顶栏里更好看喵 --- */
/* 1. 这是搜索框本喵！我要给它新的衣服！ */
.t1-search .t1-search--input {
background-color: rgba(230, 247, 255, 0.9); /* 用一个带一点点透明的白色，能隐约看到后面的蓝色，感觉更融合~ */
border: 1px solid transparent; /* 默认状态下先不要边框，看起来更干净 */
border-radius: 20px; /* 圆圆的！像个可爱的小胶囊！摸起来手感一定很好！ */
color: #333;
height: 38px; /* 固定一个高度，让它看起来更精致 */
padding: 6px 45px 6px 20px !important; /* 左边也多留点空，不挤 */
transition: all 0.3s ease-in-out; /* 所有变化都加上柔和的过渡动画，喵~ */
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); /* 加一点点外阴影，让它有浮起来的感觉 */
-webkit-appearance: none; /* 在iPhone上也禁用默认样式，让它更统一 */
appearance: none;
}
/* 2. 当主人把鼠标放上来，或者点进去的时候，要给一点反应！ */
.t1-search .t1-search--input:hover {
background-color: #ffffff; /* 鼠标悬停时变回纯白 */
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 阴影也变深一点点 */
}
.t1-search .t1-search--input:focus {
background-color: #ffffff;
border-color: #409EFF; /* 获得焦点时，显示一个温柔的蓝色边框 */
box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.2); /* 再加一个淡淡的蓝色外发光，告诉主人“我准备好啦！” */
outline: none; /* 去掉浏览器默认的蓝色或橙色轮廓 */
}
/* 3. Placeholder 里的文字也要可爱一点 */
.t1-search .t1-search--input::placeholder {
color: #aab2bd; /* 换个不那么刺眼的灰色 */
font-weight: 400;
}
/* 4. 那个小小的搜索按钮（放大镜）也要打扮一下！ */
.t1-search .t1-search--submit {
width: 45px; /* 确保按钮有足够的点击区域 */
height: 38px; /* 和输入框高度保持一致 */
background: none;
border: none;
cursor: pointer;
}
.t1-search .t1-search--submit-icon {
color: #8c939d; /* 默认图标颜色也换个柔和的灰色 */
transition: color 0.3s ease;
font-size: 20px; /* 确保图标大小合适 */
}
/* 当主人点进输入框时，图标也变成蓝色！ */
.t1-search .t1-search--input:focus + .t1-search--submit .t1-search--submit-icon,
.t1-search .t1-search--submit:hover .t1-search--submit-icon {
color: #409EFF; /* 和边框发光一个颜色，配套的！ */
}
/* --- 美化魔法结束喵！ --- */
/*
* ===================================================================
* ↓↓↓ 这是搬家后的最终版“对齐魔法”！ (ɔˆ ³(ˆ⌣ˆc) ↓↓↓
* ===================================================================
*/
/* 1. 对它们共同的家 .research--content-head 施法！ */
.research--content-head {
display: flex; /* 关键咒语第一步：开启Flexbox魔法！*/
align-items: center; /* 关键咒语第二步：让它们垂直居中对齐！*/
justify-content: space-between;/* 一个附加咒语：让它们一个靠左，一个靠右！ */
margin-bottom: 20px; /* 和下面的内容保持一点距离 */
padding: 0 30px; /* 加上一点左右的内边距，让它不贴边 */
}
/* 2. (微调) 确保我们的统计小字不会被挤得换行 */
#algolia-stats-container {
flex-shrink: 0; /* 告诉它不要缩小自己！ */
color: #888;
font-size: 14px;
}
/* 3. (微调) 确保我们的大标题没有多余的边距捣乱 */
#dynamic-title-container .bs-breadcrumb {
margin-bottom: 0; /* 去掉多余的边距 */
}
/*
* ===================================================================
* ↓↓↓ 给魔法开关穿上最可爱的衣服！ヾ(●´∀`●)ﾉ ↓↓↓
* ===================================================================
*/
.stats-and-switch-container {
display: flex;
align-items: center;
gap: 15px; /* 让统计小字和开关之间有点空隙 */
}
#scope-search-switch-container {
display: inline-flex; /* 使用 flex 布局让里面的东西对齐 */
align-items: center;
cursor: pointer;
}
/* 隐藏掉原来那个丑丑的复选框 */
#scope-search-switch-container input[type="checkbox"] {
display: none;
}
/* 用伪元素画一个新的、可爱的复选框 */
#scope-search-switch-container label::before {
content: '';
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid #007dbc;
border-radius: 4px;
margin-right: 8px;
vertical-align: middle; /* 和文字垂直对齐 */
background-color: #fff;
transition: all 0.2s ease;
}
/* 当复选框被选中时，改变我们画的这个新框框的样式 */
#scope-search-switch-container input[type="checkbox"]:checked + label::before {
background-color: #007dbc; /* 背景变蓝 */
border-color: #007dbc;
/* 用 content 画一个小小的对号 ✓ */
content: '✔';
color: white;
font-size: 12px;
text-align: center;
line-height: 16px; /* 让对号垂直居中 */
}
#scope-search-switch-container label {
font-size: 14px;
color: #555;
}
/* 喵~ 这是给传送过来的小开关的新衣服！*/
.header--side .t1-search {
display: flex;
align-items: center;
}
#scope-search-switch-container {
margin-left: 15px; /* 和搜索框拉开一点点距离 */
display: flex !important; /* 确保它能显示出来 */
align-items: center;
white-space: nowrap; /* 防止文字换行 */
}
#scope-search-switch-container label {
margin-left: 5px;
cursor: pointer;
font-size: 14px;
color: #555;
}
/* =================================================================== */
/* ↓↓↓ 喵！精准索敌控制台的专属涂装！ (づ｡◕‿‿◕｡)づ 💖 ↓↓↓ */
/* =================================================================== */
/* 控制台的总容器 */
.smart-search-container {
display: flex;
align-items: center;
position: relative;
background-color: #fff; /* 背景是白色 */
border-radius: 22px;
height: 44px;
border: 1px solid #ddd;
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
width: 450px; /* 给它一个合适的宽度 */
}
.smart-search-container:focus-within {
border-color: #409EFF;
box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.2);
}
/* =================================================================== */
/* ↓↓↓ 喵！这是给智能搜索框穿的最终版漂亮新衣服！ (づ｡◕‿‿◕｡)づ 💖 ↓↓↓ */
/* =================================================================== */
/* 智能搜索框的总容器，我们已经设置好了，这里微调一下 */
.smart-search-container {
background-color: #f0f2f5; /* 给它一个淡淡的、有质感的灰色背景 */
border: 1px solid #dcdfe6;
border-radius: 22px; /* 更圆润的边角！ */
height: 40px;
width: 480px; /* 稍微加宽一点，更大气 */
display: flex;
align-items: center;
transition: all 0.3s ease;
}
/* /assets/css/algoliaListPage.css */
/* =================================================================== */
/* ↓↓↓ 喵！这是专门对付那个“小尾巴”的精准消除咒语！(ﾉ>ω<)ﾉ ✨ ↓↓↓ */
/* =================================================================== */
/* 当这个下拉菜单的家是空的时候，就让它彻底隐身！*/
#scope-selector-wrapper:empty {
display: none;
}
.smart-search-container:hover,
.smart-search-container:focus-within {
border-color: #007dbc;
box-shadow: 0 0 0 3px rgba(0, 125, 188, 0.15);
}
/* --- 下拉菜单部分 --- */
/* =================================================================== */
/* ↓↓↓ 喵！这是为下拉菜单量身定做的样式！ (づ｡◕‿‿◕｡)づ 💖 ↓↓↓ */
/* =================================================================== */
/* 下拉菜单部分的根容器 */
#scope-selector-wrapper {
flex-shrink: 0; /* 防止被压缩 */
position: relative; /* 为下拉列表的绝对定位提供基准 */
height: 100%;
/* 右侧分割线，颜色与外边框保持一致，更和谐 */
border-right: 1px solid #dcdfe6;
}
/* JS动态生成的内层容器 */
.scope-selector {
height: 100%;
}
/* 显示当前选中项的按钮 */
.scope-selector-button {
display: flex; /* 使用flex布局，轻松实现文字和箭头的垂直居中 */
align-items: center;
justify-content: space-between; /* 让文字和箭头分开 */
height: 100%; /* 占满父容器高度 */
width: 100%; /* 占满父容器宽度 */
padding: 0 12px 0 20px; /* 调整内边距，左20，右12 */
background-color: transparent; /* 背景透明，融入整体 */
border: none;
outline: none;
cursor: pointer; /* 鼠标放上去是小手形状 */
font-size: 14px;
color: #303133;
font-weight: 500;
white-space: nowrap; /* 防止文字换行 */
}
/* 按钮里的SVG小箭头 */
.scope-selector-button svg.arrow {
margin-left: 8px; /* 箭头和文字之间的距离 */
fill: #606266; /* 箭头的颜色 */
transition: transform 0.3s ease; /* 让箭头旋转有动画效果 */
}
/* 当下拉菜单展开时 (你的JS会添加is-open类)，让箭头旋转180度朝上 */
.scope-selector.is-open .scope-selector-button svg.arrow {
transform: rotate(180deg);
}
/* 下拉选项列表的容器 (ul) */
.scope-selector-dropdown {
/* 默认由JS控制 display:none，这里设置外观 */
position: absolute;
top: 100%; /* 定位在按钮正下方 */
left: -1px; /* 往左移动1px，和外边框对齐 */
margin-top: 8px; /* 和搜索框之间留出一点空隙 */
min-width: 120px; /* 最小宽度 */
list-style: none; /* 去掉默认的小圆点 */
padding: 6px 0; /* 上下留白 */
margin-left: 0; /* 重置可能存在的默认margin */
background-color: #fff; /* 纯白背景 */
border: 1px solid #e4e7ed;
border-radius: 4px; /* 来点小圆角 */
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); /* 精致的阴影 */
z-index: 100; /* 确保它在最上层 */
}
/* 单个下拉选项 (a 标签) */
.scope-selector-dropdown a {
display: block; /* 让整个区域可点击 */
padding: 0 20px;
height: 34px;
line-height: 34px;
font-size: 14px;
color: #606266;
text-decoration: none; /* 去掉下划线 */
cursor: pointer;
transition: background-color 0.2s; /* 悬停变色动画 */
}
/* 鼠标悬停在选项上时的效果 */
.scope-selector-dropdown a:hover {
background-color: #f5f7fa; /* 淡淡的灰色背景 */
}
/* 当前被选中的选项 (你的JS会给li添加is-active类) */
.scope-selector-dropdown li.is-active a {
color: #007dbc; /* 使用和你风格统一的蓝色 */
font-weight: bold;
}
/* --- 搜索框的核心改造！ --- */
/* 1. Algolia生成的表单和输入框的包裹容器 */
.search-box-wrapper {
flex-grow: 1; /* 让它充满剩余空间 */
height: 100%;
position: relative; /* 关键！让按钮可以相对于它定位 */
}
.smart-search-container .ais-SearchBox,
.smart-search-container .ais-SearchBox-form {
height: 100%;
width: 100%;
display: block;
}
/* 2. 输入框本喵！让它占满空间！ */
.smart-search-container .ais-SearchBox-input {
width: 100% !important;
height: 100% !important;
box-sizing: border-box !important; /* 关键！防止padding把它撑大 */
border: none !important;
border-radius: 0 22px 22px 0 !important;
background-color: transparent !important;
box-shadow: none !important;
font-size: 14px !important;
color: #303133 !important;
padding: 0 75px 0 15px !important; /* 右边留出足够空间给两个按钮 */
outline: none; /* 去掉焦点时的轮廓 */
}
/* 3. 搜索按钮（放大镜）的全新样式！ */
.smart-search-container .ais-SearchBox-submit {
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 45px;
border: none;
background: transparent;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.smart-search-container .ais-SearchBox-submit svg {
width: 18px;
height: 18px;
fill: #909399; /* 给它一个柔和的灰色 */
transition: fill 0.2s ease;
}
.smart-search-container .ais-SearchBox-submit:hover svg {
fill: #007dbc; /* 悬停时变蓝！ */
}
/* 4. 清空按钮（那个小叉叉）的全新样式！ */
.smart-search-container .ais-SearchBox-reset {
position: absolute;
right: 35px; /* 把它放在搜索按钮的左边 */
top: 0;
height: 100%;
width: 45px;
border: none;
background: transparent;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
/* 默认是隐藏的，我们让它显示出来 */
.smart-search-container .ais-SearchBox-reset[hidden] {
display: none;
}
.smart-search-container .ais-SearchBox-reset svg {
width: 14px;
height: 14px;
fill: #c0c4cc; /* 比放大镜更淡的灰色 */
transition: fill 0.2s ease, transform 0.2s ease;
}
.smart-search-container .ais-SearchBox-reset:hover svg {
fill: #909399;
transform: rotate(90deg); /* 鼠标放上去会转一下，超可爱！ */
}