/* GWindows 资源站 - 公共样式 */

html {
  scroll-behavior: smooth;
}

/* 应用式布局：整站铺满视口，内容区自己滚动 */
/* mdui-layout 的 height:100% 依赖这条链，缺了侧边栏就会缩成一小块 */
html,
body {
  height: 100%;
  margin: 0;
}

mdui-layout {
  height: 100%;
}

/* 顶栏和标题别挤在一起 */
.example-top-app-bar {
  padding-left: 16px;
  padding-right: 16px;
}

.example-top-app-bar mdui-top-app-bar-title {
  margin-right: auto;
}

/* 汉堡按钮：只在手机上显示 */
#nav-toggle {
  display: none;
}

/* 侧边栏列表 */
.example-navigation-drawer {
  padding-top: 8px;
}

.example-navigation-drawer mdui-list-item {
  --mdui-shape-corner: 8px;
}

/* 主内容区：宽屏上限宽并居中，超出部分自己滚 */
.example-layout-main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px;
  overflow-y: auto;
}

.mdui-prose h1 {
  margin-top: 0;
}

/* 卡片之间留点空隙 */
.example-layout-main s-card {
  display: inline-block;
  vertical-align: top;
  margin: 0 16px 16px 0;
  min-width: 260px;
}

/* 下载页的按钮列表 */
.link-list mdui-button {
  margin: 0 12px 12px 0;
}

/* 页脚 */
.site-footer {
  margin-top: 48px;
  padding: 16px 0;
  color: rgba(0, 0, 0, .45);
  font-size: 13px;
}

/* 内嵌的网盘页面撑满 */
.example-layout-main iframe {
  width: 100%;
  max-width: 100%;
  border: none;
}

/* 电脑配置那张图 */
.example-layout-main img {
  max-width: 100%;
  height: auto;
}

/* ================= 动画 ================= */

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* 进页面时主内容淡入上移 */
.example-layout-main {
  animation: fade-up .4s ease-out;
}

/* 侧边栏逐项滑入，一层比一层晚一点 */
.example-navigation-drawer mdui-list-item {
  animation: fade-up .35s ease-out backwards;
}

.example-navigation-drawer mdui-list-item:nth-child(1)  { animation-delay: .03s; }
.example-navigation-drawer mdui-list-item:nth-child(2)  { animation-delay: .06s; }
.example-navigation-drawer mdui-list-item:nth-child(3)  { animation-delay: .09s; }
.example-navigation-drawer mdui-list-item:nth-child(4)  { animation-delay: .12s; }
.example-navigation-drawer mdui-list-item:nth-child(5)  { animation-delay: .15s; }
.example-navigation-drawer mdui-list-item:nth-child(6)  { animation-delay: .18s; }
.example-navigation-drawer mdui-list-item:nth-child(7)  { animation-delay: .21s; }
.example-navigation-drawer mdui-list-item:nth-child(8)  { animation-delay: .24s; }
.example-navigation-drawer mdui-list-item:nth-child(9)  { animation-delay: .27s; }
.example-navigation-drawer mdui-list-item:nth-child(10) { animation-delay: .30s; }

/* 卡片悬停轻轻浮起来 */
.example-layout-main s-card {
  transition: transform .2s ease, box-shadow .2s ease;
}

.example-layout-main s-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
}

/* 用户开了"减少动态效果"就别演了 */
@media (prefers-reduced-motion: reduce) {
  .example-layout-main,
  .example-navigation-drawer mdui-list-item {
    animation: none;
  }

  .example-layout-main s-card {
    transition: none;
  }

  .example-layout-main s-card:hover {
    transform: none;
    box-shadow: none;
  }
}

/* ================= 手机适配 ================= */
@media (max-width: 768px) {

  #nav-toggle {
    display: inline-flex;
  }

  .example-layout-main {
    padding: 16px;
  }

  /* 内嵌网盘别用桌面高度，矮一点防溢出 */
  .example-layout-main iframe {
    height: 520px;
  }

  /* 卡片在手机上占满一行 */
  .example-layout-main s-card {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0 0 16px 0;
  }

  /* 按钮在手机上占满一行，方便点 */
  .link-list mdui-button {
    width: 100%;
    margin: 0 0 12px 0;
  }

  /* 配置截图跟着缩放 */
  .example-layout-main img {
    width: 100%;
  }
}