AlgerMusicPlayer/src/renderer/index.css

/* ./src/index.css */

/*! @import */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* 页面内容区域统一边距工具类 */
.page-padding {
  padding-left: var(--page-pl);
  padding-right: var(--page-pr);
}

/* 左右对称边距（用于 hero 区域等需要两侧都有边距的场景） */
.page-padding-x {
  padding-left: var(--page-pr);
  padding-right: var(--page-pr);
}

.n-image img {
  background-color: #111111;
  width: 100%;
}

.n-slider-handle-indicator--top {
  background-color: transparent;
  font-size: 1.5rem;
  padding: 0.25rem 0.5rem;
  box-shadow: none;
  margin-bottom: 0;
  color: white;
  background-color: rgb(31 41 55 / 0.8);
  border-radius: 0.5rem;
  mix-blend-mode: difference !important;
}

.v-binder-follower-container:has(.n-slider-handle-indicator--top) {
  z-index: 999999999 !important;
}

.text-el {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.theme-dark {
  --bg-color: #000;
  --text-color: #fff;
  --bg-color-100: #161616;
  --bg-color-200: #2d2d2d;
  --bg-color-300: #3d3d3d;
  --text-color: #f8f9fa;
  --text-color-100: #e9ecef;
  --text-color-200: #dee2e6;
  --text-color-300: #dde0e3;
  --primary-color: #22c55e;
}

.theme-light {
  --bg-color: #fff;
  --text-color: #000;
  --bg-color-100: #f8f9fa;
  --bg-color-200: #e9ecef;
  --bg-color-300: #dee2e6;
  --text-color: #000;
  --text-color-100: #161616;
  --text-color-200: #2d2d2d;
  --text-color-300: #3d3d3d;
  --primary-color: #22c55e;
}

.theme-gray {
  --bg-color: #f8f9fa;
  --text-color: #000;
  --bg-color-100: #e9ecef;
  --bg-color-200: #dee2e6;
  --bg-color-300: #dde0e3;
  --text-color: #000;
  --text-color-100: #161616;
  --text-color-200: #2d2d2d;
  --text-color-300: #3d3d3d;
  --primary-color: #22c55e;
}

:root {
  --text-color: #000000dd;
  --safe-area-inset-top: 0px;
  --safe-area-inset-right: 0px;
  --safe-area-inset-bottom: 10px;
  --safe-area-inset-left: 0px;

  /* 页面内容区域统一边距 */
  --page-px: 1rem; /* 默认 16px，对应 px-4 */
  --page-pl: 1rem; /* 左边距，PC 端有菜单时为 0 */
  --page-pr: 1rem; /* 右边距 */
}

/* PC 端：有左侧菜单，左边距为 0 */
.pc {
  --page-pl: 0px;
}

/* 响应式边距 */
@media (min-width: 640px) {
  :root {
    --page-px: 1.5rem; /* 24px，对应 sm:px-6 */
    --page-pr: 1.5rem;
  }
  .mobile {
    --page-pl: 1.5rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --page-px: 2rem; /* 32px，对应 lg:px-8 */
    --page-pr: 2rem;
  }
}

:root[class='dark'] {
  --text-color: #ffffffdd;
}

.section-title {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.025em;

  @media (min-width: 768px) {
    font-size: 1.875rem;
  }

  @media (min-width: 1024px) {
    font-size: 2.25rem;
  }
}

/* 骨架屏 shimmer 动画 */
.skeleton-shimmer {
  position: relative;
  overflow: hidden;
  background: #e5e7eb;
}

.skeleton-shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 100%
  );
  animation: shimmer 1.5s infinite;
  transform: translateX(-100%);
}

:root.dark .skeleton-shimmer {
  background: #262626;
}

:root.dark .skeleton-shimmer::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.06) 50%,
    transparent 100%
  );
}

@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}