/*
Theme Name: Lite Qidian
Description: 一个自用的小说站主题。
Author: testu
Author URI: https://tsz.me
Version: 1.1.0
Text Domain: lite-qidian
*/

/*

配色主要参考： https://github.com/altercation/solarized

 */

:root {
  color-scheme: light dark;
  /* 通用 */
  --background-color-main: #fcf5df;
  /* 主背景颜色，base3 */
  --background-color-highlight: #ebe5d0;
  /* 高亮背景颜色，base2 */
  --text-color-main: #5b7078;
  /* 主要文字颜色，base00 */
  --text-color-secondary: #889797;
  /* 次要文字颜色，base1 */
  --text-color-emphasized: #4e636a;
  /* 强调文字颜色 base01 */
  /* 导航 */
  --header-menu-background: #d3ccbb;
  /* 头部菜单背景颜色 vc 头部颜色 */
  --nav-link-hover-background: #eee9dd;
  /* 导航链接悬停背景颜色 来源不明 */
  /* 图书页 */
  --default-link-color: #287fca;
  /* 默认链接颜色 */
  /* 进度条 */
  --progress-bar-background: #007bff;
  /* 进度条背景颜色 primary-color */
  /* 首页，排名 */
  --ranking-list-border: 1px solid #ddd;
  /* 排名列表边框 */
  --ranking-list-hover-background: #dae1fb;
  /* 排名列表悬停背景颜色 */
  /* 暂未使用 */
  --color-reserve-1: #d8d0ba;
  /* 备用颜色 */
  --color-reserve-2: #faeac0;
  /* 备用颜色 */
}

body.dark-mode {
  /* 通用 */
  --background-color-main: #05262f;
  /* 主背景颜色，base3 ok */
  --background-color-highlight: #0d2f3a;
  /* 高亮背景颜色，base2 ok */
  --text-color-main: #78898b;
  /* 主要文字颜色，base0 ok */
  --text-color-secondary: #4e636a;
  /* 次要文字颜色，base01 ok */
  --text-color-emphasized: #889797;
  /* 强调文字颜色 base1 ok */
  /* 导航 */
  --header-menu-background: #083848;
  /* 头部菜单背景颜色 ok */
  --nav-link-hover-background: #4D6976;
  /* 导航链接悬停背景颜色，这是对上面颜色提高了亮度得到的 */
  /* 图书页 */
  --default-link-color: #c34317;
  /* 默认链接颜色 */
  /* 进度条 */
  --progress-bar-background: #007bff;
  /* 进度条背景颜色 primary-color */
  /* 首页，排名 */
  --ranking-list-border: 1px solid #ddd;
  /* 排名列表边框 */
  --ranking-list-hover-background: #dae1fb;
  /* 排名列表悬停背景颜色 */
  /* 暂未使用 */
  --color-reserve-1: #d8d0ba;
  /* 备用颜色 */
  --color-reserve-2: #faeac0;
  /* 备用颜色 */

  color-scheme: dark;
}

a {
  color: var(--default-link-color);
}

/*
 * 共用样式 
 */
body.paper-like {
  background-color: var(--background-color-main);
  transition: background-color 0.3s, color 0.3s;
  color: var(--text-color-main);
  line-height: 1.75;
}

/* 主区域 */
.main-area {
  /* 圆角改小 */
  /* border-radius: 0.5rem; */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

/*
 * 头部
 */
.search-input {
  height: 48px;
  font-size: 1.1rem;
}

/*
 * WordPress 菜单
 */
.header-menu {
  background-color: var(--header-menu-background);
  /* background-color: var(--background-color-highlight); */
}

/* 二级和三级菜单定位 */
.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
}

.dropdown:hover>.dropdown-menu {
  display: block;
}

/* 防止点击一级菜单展开下级菜单 */
.nav-link {
  pointer-events: auto;
}

/* 一级菜单 hover 时添加背景色 */
.navbar-nav .nav-link:hover {
  background-color: var(--nav-link-hover-background);
  /* Bootstrap 默认浅灰色，可自行替换颜色 */
  border-radius: 0.15rem;
}

/*
 * footer
 */
.site-footer {
  background-color: var(--background-color-highlight);
  text-align: left;
  color: var(--text-color-secondary);
}

/*
 * 文章列表页面
 */

.chapter-link {
  display: block;
  /* 行间距减小 */
  padding: 0.5rem;
  border-radius: 0.25rem;
  transition: background-color 0.2s;
  /* 禁止换行 */
  white-space: nowrap;
  /* 溢出省略号 */
  overflow: hidden;
  text-overflow: ellipsis;
  /* 链接颜色 */
  color: var(--default-link-color);
}

.chapter-link:hover {
  background-color: var(--background-color-highlight);
}

/* 访问过的链接变灰色 */
.chapter-link:visited {
  color: var(--text-color-secondary);
}

.toggle-button {
  cursor: pointer;
  font-weight: 500;
}

/* 
 * single 页面
 */

/* 阅读进度条 */
#progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  background-color: var(--progress-bar-background);
  width: 0%;
  z-index: 9999;
  transition: width 0.1s ease-out;
}

.chapter-menu {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
}

.reading-time {
  font-size: 0.9rem;
  margin-top: -10px;
  margin-bottom: 10px;
  text-align: center;
}

.chapter-content {
  font-size: 1.3rem;
  transition: font-size 0.2s;

  line-height: 2.3;
  font-family: 'Noto Serif SC', sans-serif, serif;
}

.chapter-content p {
  margin-bottom: 1.5rem;
}

/* 平板或更大屏幕（≥768px）才应用 */
@media (min-width: 768px) {
  .chapter-content p {
    line-height: 2.3;
    margin-bottom: 1.5rem;
  }
}

/* .chapter-content p:hover {
  background-color: var(--background-color-highlight);
  cursor: pointer;
  color: var(--text-color-emphasized);
} */

/* 阅读小说按钮 */
#start-read-btn {
  position: fixed;
  bottom: 40px;
  right: 50px;
  display: none;
  z-index: 999;
}

#stop-read-btn {
  position: fixed;
  bottom: 40px;
  right: 50px;
  display: none;
  z-index: 999;
}

/* 返回顶部按钮 */
#back-to-top {
  position: fixed;
  bottom: 80px;
  right: 50px;
  display: none;
  z-index: 999;
}

.emphasized-content {
  color: var(--text-color-emphasized);
}

.primary-content {
  color: var(--text-color-main);
}

.secondary-content {
  color: var(--text-color-secondary);
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
  /* min-height: 100vh; */
}

main {
  flex-grow: 1;
}

/*
 * Home 页面
 */

.ranking-list-title {
  font-weight: bold;
  font-size: 1.2rem;
}

.ranking-list li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--ranking-list-border);
  transition: background-color 0.2s;
  cursor: pointer;
  /* 鼠标手型 */
}

.ranking-list a.type-link {
  /* secondary-content */
  color: var(--text-color-secondary);
}

.ranking-list a.book-link {
  /* primary-content */
  color: var(--text-color-main);
  text-decoration: none;
}

.ranking-list li:hover {
  background-color: var(--ranking-list-hover-background);
}

.ranking-list a.type-link:hover,
.ranking-list a.book-link:hover {
  text-decoration: underline;
}

/*
* 图书列表页使用
*/

/* 文字截断处理 */
.text-truncate-multiline {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  /* 限制最多显示 n 行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/*
* 以下内容未经审查
*/

/* 书名截断处理 */
.book-title-truncate {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  /* 默认桌面端 */
  max-width: 220px;
}

/* 平板 (768px ~ 991px) */
@media (max-width: 991.98px) {
  .book-title-truncate {
    max-width: 160px;
  }
}

/* 
    single 页面
*/

footer {
  background-color: #f0f0f0;
  padding: 1rem 0;
  font-size: 0.9rem;
  text-align: center;
  color: #666;
  margin-top: 4rem;
}