@charset "utf-8";
* {
  margin: 0;
  padding: 0;
}

/* html 和 body 默认不可见 不可以滚动*/
body,
html {
  opacity: 0;
  scroll-behavior: smooth;
  height: 100%;
  overflow-x: hidden; /* 关闭水平滚动 */
  background-color: #f5f5f5;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif; /* 使用现代字体 */
}

.nav {
  display: flex;
  justify-content: center;
  line-height: 45px;
  margin: 10px 0 20px 0;
}

.text {
  text-align: center;
  width: 60%;
  height: 700px;
  overflow: auto;
}

.box,
.title {
  display: flex;
  justify-content: center;
}

.box > #audio {
  width: 560px;
}

.title > h1 {
  padding: 10px;
  color: #1e6cb9;
}

/* 搜索部分 */
.search-container {
  position: relative;
  width: 100%; /* 输入框容器宽度自适应 */
  max-width: 100%; /* 确保不会超出父容器 */
  height: 50px; /* 设置一个固定高度，可以根据需要调整 */
}

#searchInput {
  padding-right: 30px; /* 为图标留出空间 */
  width: 100%; /* 输入框宽度自适应 */
  height: 100%; /* 输入框高度自适应 */
  padding: 20px;
  border: 0px;
  box-sizing: border-box; /* 确保内边距不会影响总宽度 */
  font-size: 16px; /* 根据需要调整字体大小 */
  background-color: #fff3cd; /* 设置背景颜色 */
  color: #0c9debca; /* 文字颜色，根据需要调整 */
  letter-spacing: 2px; /* 增加字符间的间距 */
}
#searchInput:focus {
  border: 0px; /* 获得焦点时去掉边框 */
  color: #0c9debca; /* 获得焦点时的文字颜色 */
  outline: none; /* 再次确保没有默认的聚焦轮廓 */
  box-shadow: 0 2px 10px #dcdcdc; /* 下阴影 */
}

.search-icon {
  position: absolute;
  right: 10px; /* 图标显示时的位置 */
  top: 50%;
  transform: translateY(-50%);
  transition: opacity 0.3s ease; /* 添加过渡效果 */
  background: none;
  border: none;
  cursor: pointer;
  outline: none;
  color: #7cb0d8;
  font-size: 16px; /* 根据需要调整大小 */
  opacity: 0; /* 初始状态为透明 */
  pointer-events: none; /* 防止默认情况下点击图标 */
}

.search-icon:hover {
  color: #4eafff;
}

.search-icon.show {
  opacity: 1; /* 显示时变为不透明 */
  pointer-events: auto; /* 允许点击 */
}

/* 播放列表里面的span的默认样式 */
.playSong,
.playArtist {
  text-align: center;
  width: 50%;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  word-wrap: break-word;
  white-space: normal;
  padding: 10px;
  border-radius: 8px;
  font-weight: 600; /* 增加字体粗细 */
}

/* 播放列表的默认样式 */
.playList > .content > ul {
  overflow: auto;
  background: #fff3cd; /* 稍微深一点的米黄色 */
  height: 100%;
  overflow-x: hidden;
}

.playList > .content > ul > li {
  display: flex;
  align-items: center;
  padding: 10px;
  font-size: 20px;
  overflow-wrap: break-word;
  list-style-type: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transform: translateZ(0); /* 开启GPU加速 */
  transition: transform 0.3s ease, box-shadow 0.3s ease,
    background-color 0.3s ease;
}

.playList > .content > ul > li:nth-child(odd) {
  border-bottom: 3px solid #ecdfdf; /* 添加下边框 */
  background: #f5f5dc;
}

.playList > .content > ul > li:nth-child(even) {
  border-bottom: 3px solid #dcdcdc; /* 添加下边框 */
  background-color: #fff3cd;
}

/* 单数 */
.playList > .content > ul > li:nth-child(odd) .playSong {
  color: #0c9debca;
}

.playList > .content > ul > li:nth-child(odd) .playArtist {
  color: #f19494ca;
}

/* 双数 */
.playList > .content > ul > li:nth-child(even) .playSong {
  color: #ffab40;
}

.playList > .content > ul > li:nth-child(even) .playArtist {
  color: #b39ddb;
}

.playList > .content > ul > li:hover {
  background: linear-gradient(
    to bottom,
    #b2ebf2,
    #d4f0f7
  ); /* 使用浅蓝到更浅的蓝 */
  box-shadow: inset 0 -4px 8px rgba(220, 220, 220, 0.7); /* 更柔和的内阴影 */
  transform: scale(1.02) translateZ(0); /* 轻微放大并保持GPU加速 */
}

.playList > .content > ul > .now_gq:hover {
  /* 当前音乐触碰默认没效果 */
  transform: none; /* 移除缩放效果 */
  box-shadow: none;
  background: linear-gradient(to bottom, #b2ebf2, #b2ebf2);
}

/* 最后一个li不给底边框 */
.playList > .content > ul > li:last-child {
  border-bottom: none;
}

/* 当前音乐的样式 （解决搜索不显示的问题）*/
.playList > .content > ul .now_gq,
.fixed-at-top {
  transition: all 0.3s ease;
  background-color: #b2ebf2 !important; /* 淡雅的青绿色 */
  z-index: 1;
}

.playList > .content > ul .now_gq > .playSong {
  color: #007bf6 !important; /* 深蓝色，强调重要信息 */
}

.playList > .content > ul .now_gq > .playArtist {
  color: #ff5722 !important; /* 明亮的珊瑚色，吸引注意力 */
}

/* 当前播放音乐的条形动画 */
.chart {
  display: flex;
  justify-content: center;
  align-items: flex-end; /* 对齐到底部 */
  margin-left: 2em;
  width: 40px;
}
.bar {
  width: 8px;
  border-radius: 5px 5px 0 0; /* 圆角 */
  background-color: #ffc107; /* 使用黄色 */
  height: 40px; /* 初始高度为40px */
  margin: 0 3px; /* 调整条形之间的间距 */
  transform-origin: bottom; /* 设置变换原点为底部 */
  animation-timing-function: ease; /* 让动画速度变化更加自然 */
  transform: translateZ(0); /* 开启GPU加速 */
}
.bar:nth-child(1) {
  animation: grow 1s infinite;
}
.bar:nth-child(2) {
  animation: grow 1s infinite 0.33s; /* 延迟0.33秒开始 */
}
.bar:nth-child(3) {
  animation: grow 1s infinite 0.66s; /* 延迟0.66秒开始 */
}

@keyframes grow {
  0%,
  100% {
    transform: scaleY(0) translateZ(0); /* 结合scaleY和translateZ */
  }
  50% {
    transform: scaleY(1) translateZ(0); /* 结合scaleY和translateZ */
  }
}

/* 当前播放音乐的暂停动画 */
.pause-icon {
  display: inline-block;
  font-style: normal;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 25px;
  color: #ffc107 !important;
  padding: 0 10px;
}

.pause-icon::before {
  content: "\f04b"; /* FontAwesome 暂停图标的 Unicode */
}

/* 当 .pause-icon 被悬停或激活时，改变 ::before 伪元素的颜色 */
.pause-icon:hover::before,
.pause-icon:active::before {
  color: #4eafff !important; /* 改变颜色 */
  transition: all 0.5s ease, ease-out 0.5s, ease-in-out 0.5s;
}

/* foot 底部固定 */
/* 确保 .content 高度自动 */
.playList > .content {
  overflow: auto; /* 如果内容过多，可以滚动 */
  position: relative; /* 使 .content 成为 .foot 的定位上下文 */
}

/* foot 样式 */
.playList .foot {
  margin: 0 auto;
  z-index: 1; /* 确保它位于其他内容之上 */
  box-shadow: 0 -2px 10px #dcdcdc;
  background-color: #ffbd5ae7; /* 背景颜色 */
  padding: 10px 0 15px 0;
  text-align: center; /* 文本水平居中 */
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直居中 */
  align-items: center; /* 水平居中 */
  position: absolute; /* 使用绝对定位 */
  width: 100%; /* 确保宽度占满整个父容器 */
}

.playList .foot h1 {
  margin-bottom: 10px; /* 下边距，使标题与下方内容有一定间隔 */
  color: #fff; /* 标题颜色 */
  font-size: 1.8em; /* 标题字体大小 */
}

.playList .foot .footer-content {
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
  gap: 10px; /* 设置元素之间的间距 */
  align-items: center; /* 垂直居中对齐 */
}

.playList .foot .footer-info {
  margin: 0; /* 移除默认外边距 */
  color: #fff; /* 信息文本颜色 */
  font-size: 1em; /* 信息文本字体大小 */
  white-space: nowrap; /* 防止文字换行 */
}

.playList .foot .footer-link {
  color: #fff; /* 链接颜色 */
  text-decoration: none; /* 移除默认下划线 */
  transition: color 0.3s ease; /* 添加颜色过渡效果 */
}

.playList .foot .footer-link:hover {
  color: #4eafff; /* 鼠标悬停时改变链接颜色 */
  text-decoration: underline; /* 鼠标悬停时显示下划线 */
}

/* 使用 Flexbox 布局来平分 .playList 的高度 */
.playList {
  display: flex;
  flex-direction: column;
  overflow-x: hidden; /* 确保此容器内部也没有水平滚动 */
  position: relative; /* 创建一个相对定位的上下文 */
}

/* 大盒子的样式 */
.bigBox {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.title,
.box {
  flex: 1; /* 让这两个元素各自占据相同的比例空间 */
  display: flex;
  align-items: center;
  justify-content: center;
}
.box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.box button,
.box audio {
  margin: 0 5px; /* 给按钮和音频控件之间添加一些间距 */
}

.lyricsList {
  flex: 3; /* 剩下的位置扑满 */
  background: #fff3cd;
}

/* 大盒子的部分全部都不能选择 */
.bigBox {
  user-select: none; /* 禁止选择文本 */
  -webkit-user-select: none; /* Safari 和 Chrome */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer 和 Edge */
}

.playList {
  flex: 5; /* 让.playList占据5份空间 */
}

/* 高亮 */
/* 歌词行的基本样式 */
.text p {
  padding: 10px 0;
  font-size: 20px;
  color: #5b9bd5;
  word-wrap: break-word;
  transition: transform 0.2s ease, box-shadow 0.2s ease; /* 只对transform和box-shadow应用过渡效果 */
  width: 100%; /* 确保 p 标签占满父容器宽度 */
  box-sizing: border-box; /* 包括 padding 和 border 在内的总宽度 */
}

/* 单个 span 的样式 */
.text p span:only-child {
  margin: 8px 0;
}

.text p span {
  display: inline-block; /* 将span设置为内联块级元素 */
  max-width: 100%; /* 确保span不会超出父元素的宽度 */
  overflow: hidden; /* 隐藏溢出的内容 */
  word-wrap: break-word; /* 或者使用 overflow-wrap: break-word; */
  white-space: normal; /* 默认值，允许文本在单词之间换行 */
  line-height: 2.2em;
}

/* 高亮样式 */
.text .highlight {
  color: #4eafff;
  font-weight: bold;
  /* transform: scale(1.1) translateZ(0); 使用 GUP 加速 放大歌词 */
  font-size: 22px; /* 调整字体大小 */
  transition: transform 0.2s ease, box-shadow 0.2s ease; /* 只对transform和box-shadow应用过渡效果 */
  padding: 5px 10px; /* 调整内边距 */
  width: 666px; /* 设置固定宽度 */
  box-sizing: border-box; /* 包括padding和border在内的总宽度 */
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 处理溢出 */
  text-overflow: ellipsis; /* 溢出文本用省略号表示 */
  margin: 0 auto; /* 居中对齐 */
}

.text > p > span:nth-child(1),
.text > p > span:nth-child(2) {
  display: block;
  line-height: 2.2em;
}

audio {
  width: 100%;
  margin: 10px 0;
}

.title {
  position: relative; /* 确保子元素可以相对于这个元素进行绝对定位 */
  text-align: center; /* 歌名居中 */
  width: 100%; /* 宽度可以根据需要调整 */
  padding-top: 15px;
  background-color: transparent; /* 使背景完全透明 */
}

.title > p {
  position: relative; /* 确保艺术家名字可以相对于这个p标签进行绝对定位 */
  width: 80%;
  margin: 0 auto; /* 确保p标签内容居中 */
  display: flex;
  flex-direction: column; /* 使内部元素垂直排列 */
  justify-content: space-between; /* 垂直方向上分散对齐 */
  align-items: center; /* 水平居中对齐 */
  min-height: 50px; /* 设置最小高度，以便有足够的空间放置艺术家名字 */
}

.song-lyrics {
  display: block; /* 确保歌名占据一行 */
  width: 80%;
  font-size: 2em; /* 字体大小可以根据需要调整 */
  margin-bottom: auto; /* 将歌名推到顶部 */
  color: #50a4f6;
}

.song-lyrics,
.artist {
  display: block;
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏溢出的文本 */
  text-overflow: ellipsis; /* 使用省略号表示被截断的文本 */
}

.artist {
  font-size: 1em; /* 歌手字体大小略小 */
  color: #50a4f6; /* 可以根据设计调整颜色 */
  width: 300px;
  align-self: flex-end; /* 让艺术家名字在水平方向上对齐到右侧 */
  margin-right: 11em;
}

/* 确保 .playList .content 有相对定位 */
.playList,
.content {
  position: relative; /* 相对于自身定位 */
}

.bigBox {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.lyricsList {
  flex-grow: 1;
  overflow-y: auto;
  padding: 10px;
  display: none;
}

.listTop {
  z-index: 1; /* 确保它位于其他内容之上 */
  box-shadow: 0 2px 10px #dcdcdc;
}

.playList {
  flex-grow: 1;
  overflow-y: auto;
  display: none;
}

.box {
  z-index: 1; /* 确保它位于其他内容之上 */
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 100px;
  background-color: #f9e7b3;
}

/* 歌词加载提示 */
.loadingPrompts {
  position: fixed;
  top: 45%;
  left: 50%;
  letter-spacing: 2px;
  transform: translate(-50%, -50%);
  padding: 20px; /* 根据需要调整 */
  z-index: 1000; /* 确保它位于其他内容之上 */
  text-align: center; /* 让文本居中 */
}

/* 定位到当前歌曲的位置 */
#backToTop {
  position: fixed; /* 使用fixed定位使按钮固定在视窗中 */
  bottom: 28%; /* 距离底部的距离 */
  right: 2em; /* 距离右边的距离 */
  z-index: 1; /* 确保它位于其他内容之上 */
}

.back-to-top-link {
  display: inline-block;
  padding: 10px;
  font-size: 25px;
  background-color: transparent; /* 按钮背景颜色 */
  color: #7cb0d8; /* 图标颜色 */
  border-radius: 50%; /* 圆形按钮 */
  text-decoration: none; /* 移除默认的下划线 */
  opacity: 0.6;
  transition: opacity 0.3s; /* 添加平滑过渡效果 */
}

.back-to-top-link:hover {
  color: #4eafff; /* 鼠标悬停时的背景颜色 */
}

/* 当前音乐定位 */
.fixed-at-top {
  position: sticky;
  top: 0; /* 确保它贴在容器的顶部 */
  z-index: 5; /* 确保它位于其他内容之上 */
}

/* 未查询到结果的样式 */
.isNore {
  letter-spacing: 2px;
  padding: 10px;
  font-weight: 600;
  font-size: 18px;
  color: #ffab40;
  width: 100%;
  text-align: center;
}

/* 针对所有设备的基础滚动条样式 */
::-webkit-scrollbar {
  width: 10px; /* 设置滚动条宽度 */
}

::-webkit-scrollbar-track {
  background: #fff3cd; /* 轨道背景色 */
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #888; /* 滑块颜色 */
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555; /* 鼠标悬停时滑块颜色 */
}

.comment-form h2 {
  width: 100%;
  padding: 0 5px;
  display: block;
  color: #ff7b26;
  margin-bottom: 10px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Layout and Structure */
.message {
  background-color: #f9e8a4;
  padding: 20px;
  display: none;
}

.comment-container {
  border-color: #f9e8a4;
  background-color: #fff3cd;
  box-shadow: 0 0 5px #fff;
  border-radius: 8px;
  padding: 16px;
  margin: 0 20px;
  margin-bottom: 25px;
}

.comment-container #no-comment {
  padding: 20px;
  margin: 0 auto;
}

.comment-container #no-comment span {
  color: #87b0d5;
  font-size: 16px;
  letter-spacing: 2px;
}

.comment-container {
  display: flex;
  align-items: flex-start;
}

.comment-header,
.comment-actions {
  display: flex;
  align-items: center;
}

.comment-mid {
  flex: 1;
  margin-left: 10px;
}

.comment-avatar {
  margin-top: 1.3em;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 10px;
}

.comment-author {
  display: block;
  font-weight: bold;
  margin-bottom: 10px;
  color: #7cb0d8;
}

.comment-date {
  font-size: 0.9em;
  color: #87b0d5;
}

.comment-content {
  margin-bottom: 5px;
  line-height: 30px;
  color: #5b9bd5;
}

.comment-author:hover {
  color: #4eafff;
}

.comment-actions {
  justify-content: space-between;
}

#songId {
  display: none; /* 隐藏元素 */
}

.left,
.right {
  display: flex;
  gap: 10px;
}

.comment-action {
  color: #6c757d;
  cursor: pointer;
  transition: color 0.2s;
}

.comment-action:hover {
  color: #007bff;
}

/* Buttons */
button {
  cursor: pointer;
  transition: background-color 0.2s;
}

#postCommentButton {
  background-color: #ff7b26;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  border-radius: 16px;
  border: none;
  padding: 20px;
  position: fixed;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
}

.post-comment-button {
  background-color: #3a3e46;
  border: none;
  border-radius: 20px;
  padding: 10px 20px;
  color: #fff;
  position: fixed;
  bottom: 20px;
  right: 20px;
}

.post-comment-button:hover {
  background-color: #4a505b;
}

#push {
  border: none;
  padding: 8px 18px;
  border-radius: 20px;
  font-weight: bold;
  background-color: #ff7b26;
  color: white;
}

#push:hover {
  background-color: #e66a1a;
}

.comment-form textarea::-webkit-scrollbar-track {
  background: #ffbd5ae7; /* 轨道背景色 */
}

.comment-form {
  width: 400px;
  background-color: #ffbd5ae7;
  border-radius: 16px;
  padding: 20px 40px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  /* 默认隐藏 */
  visibility: hidden;
  opacity: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* 占位符颜色 */
.comment-form textarea::placeholder,
.comment-form input::placeholder {
  color: #ff7b26;
}
#searchInput::placeholder {
  color: #7cb0d8;
}

.comment-form textarea {
  width: 95%;
  height: 100px;
  padding: 10px;
  border: 1px solid #ff7b26;
  border-radius: 8px;
  resize: none;
  margin-bottom: 20px;
  background-color: #ffbd5ae7;
  color: #ff7b26;
  font-size: 16px;
  letter-spacing: 2px;
}

.comment-form input {
  width: 95%;
  height: 50px;
  padding: 2px 10px;
  border: 1px solid #ff7b26;
  border-radius: 8px;
  resize: none;
  margin-bottom: 20px;
  background-color: #ffbd5ae7;
  color: #ff7b26;
  font-size: 15px;
  letter-spacing: 5px;
}

.comment-form textarea:focus,
.comment-form input:focus {
  outline: none; /* 再次确保没有默认的聚焦轮廓 */
}

#postCommentButton:hover {
  background-color: #e66a1a;
}

#postCommentButton {
  background-color: #ff7b26;
}

.close-button {
  position: absolute;
  color: #ff7b26;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 25px;
}

#detail {
  position: fixed;
  top: 50%; /* 垂直居中 */
  left: 0;
  transform: translateY(-50%); /* 辅助垂直居中 */
  z-index: 1; /* 确保在其他元素之上 */
}

#detail button {
  background-color: #f9e8a4;
  color: #4eafff;
  font-size: 20px;
  font-weight: bold;
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
  border: none;
  padding: 15px;
  display: none;
}

/* 当屏幕宽度小于等于768px时应用 */
@media (max-width: 768px) {
  #detail {
    top: 82%; /* 垂直居中 */
  }

  .comment-form {
    width: 333px;
    padding: 20px 30px;
  }

  #detail button {
    font-size: 18px;
    padding: 10px;
  }

  .lyricsList {
    padding: 0px;
  }

  .playList > .content > ul > li {
    font-size: 18px;
  }

  .text {
    width: 100%;
    overflow-x: hidden;
  }

  .text p {
    padding: 10px; /* 增加左右内边距 */
    font-size: 18px; /* 调整字体大小 */
  }

  .text .highlight {
    width: 100%;
    margin: 0 auto; /* 居中对齐 */
    display: block; /* 使高亮部分占满整行 */
    /* transform: scale(1.05) translateZ(0); 使用 GUP 加速 放大歌词 */
    font-size: 19px; /* 调整字体大小 */
  }

  .chart {
    margin-left: 0;
  }

  .song-lyrics,
  .title > p {
    width: 90%;
  }
  .title {
    padding-bottom: 15px;
  }

  .artist {
    margin-right: 0.6em;
  }
  /* 完全隐藏滚动条 */
  ::-webkit-scrollbar {
    display: none; /* 对于WebKit浏览器 */
  }

  /* 确保内容可以滚动 */
  html,
  body,
  .scrollable-element-class {
    -ms-overflow-style: none; /* IE 和 Edge */
    scrollbar-width: none; /* Firefox */
    overflow-y: auto; /* 允许滚动 */
  }

  #backToTop {
    right: 10px; /* 距离右边的距离 */
  }

  /* 移动端 foot */
  .playList .foot {
    padding: 10px 10px 15px 10px;
  }

  .playList .foot h1 {
    margin-right: 10px;
  }
}

/* 当屏幕宽度小于等于480px时应用 */
@media (max-width: 480px) {
}

/* 平板端样式 */
@media (min-width: 768px) and (max-width: 1024px) {
  .playList > .content > ul > li {
    font-size: 18px;
  }

  .text p {
    padding: 10px; /* 调整内边距 */
    font-size: 18px; /* 调整字体大小 */
  }

  .text .highlight {
    width: 90%; /* 设置一个适合平板的宽度 */
    margin: 0 auto; /* 确保居中 */
    display: block; /* 使高亮部分占满整行 */
    font-size: 19px; /* 调整字体大小 */
  }

  .chart {
    margin-left: 1em;
  }
}