@charset "utf-8";
/*
 * handsome9-hack.css: custom look of Nyaasu 研究所 on Handsome 9.2.1.
 *
 * Rewrite of "Modifi-css for handsome 4.4.x" by JindaiKirin (https://moe.best/), adapted to the
 * Handsome 9 markup on 2026-10-21. It replaces usr/addons/handsome-hack.css and the rules that used
 * to live in the theme option "customCss".
 *
 * Rules that tint panels white are scoped to html:not(.theme-dark), because Handsome adds
 * .theme-dark to <html> in night mode and the white panels would look wrong there.
 */

/* ---------- scrollbar ---------- */
*::-webkit-scrollbar { width: 8px !important; height: 8px !important; }
*::-webkit-scrollbar-thumb { border-radius: 4px; background-color: #999 !important; }
*::-webkit-scrollbar-thumb:hover { background-color: #777 !important; }
*::-webkit-scrollbar-thumb:active { background-color: #555 !important; }
*::-webkit-scrollbar-track-piece { background: #eee !important; }

/* ---------- header bar ---------- */
.navbar-header { box-shadow: -2px 2px 2px rgba(0, 0, 0, .05), 0 1px 0 rgba(0, 0, 0, .05); }
#header > .collapse { box-shadow: 2px 2px 2px rgba(0, 0, 0, .05), 0 1px 0 rgba(0, 0, 0, .05); }

/* ---------- full-page background ----------
 * The old theme had a hand-added <div id="bg"> in component/headnav.php. A fixed pseudo-element
 * does the same job without touching theme files. It starts right of the left sidebar
 * (220px, or 60px when folded) and below the 50px header bar. */
html:not(.theme-dark) #alllayout::before {
  content: "";
  position: fixed;
  z-index: -1;
  top: 50px;
  right: 0;
  bottom: 0;
  left: 0;
  background: #39a7d9 url(/usr/addons/bg.webp) center bottom / cover no-repeat;
  transition: left .3s;
}
@media (min-width: 768px) {
  html:not(.theme-dark) #alllayout::before { left: 220px; }
  html:not(.theme-dark) #alllayout.app-aside-folded::before { left: 60px; }
}
html:not(.theme-dark) #post-panel { background-color: transparent; }

/* ---------- page title area (a <header> on most pages, a <div> on the links page):
 * white text straight on the background ---------- */
html:not(.theme-dark) #post-panel > .bg-light.lter.wrapper-md {
  margin-top: 30px;
  border: 0;
  background-color: transparent !important;
  text-align: center;
  text-shadow: 0 0 3px #000;
}
html:not(.theme-dark) #post-panel > .bg-light.lter.wrapper-md * { color: #fff !important; }
html:not(.theme-dark) #post-panel > .bg-light.lter.wrapper-md h1 { font-size: 32px; font-weight: bold !important; }

/* ---------- 800px reading column ---------- */
#post-panel .wrapper-md > .blog-post,
#post-panel .wrapper-md > .breadcrumb,
#post-panel .wrapper-md > #comments,
#post-panel .wrapper-md > nav,
#post-panel .wrapper-md > .no_search_result {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- see-through panels ---------- */
html:not(.theme-dark) .blog-post > .panel,
html:not(.theme-dark) #post-panel .wrapper-md > .breadcrumb,
html:not(.theme-dark) #post-panel .wrapper-md > #comments,
html:not(.theme-dark) .bg-white,
html:not(.theme-dark) .tab-container .tab-content { background-color: rgba(255, 255, 255, .9); }
html:not(.theme-dark) .list-group-item,
html:not(.theme-dark) #toc,
html:not(.theme-dark) .tocify-item,
html:not(.theme-dark) .time-machine.panel { background-color: rgba(255, 255, 255, .8); }
html:not(.theme-dark) .panel-footer { background-color: rgba(255, 255, 255, .3); }
html:not(.theme-dark) #footer .footer_wrapper { background-color: rgba(237, 241, 242, .8); }
html:not(.theme-dark) .nav-tabs,
html:not(.theme-dark) .bg-white,
html:not(.theme-dark) .tab-container .tab-content { border-color: rgba(255, 255, 255, .9); }
html:not(.theme-dark) .nav > li > a:hover { background-color: rgba(255, 255, 255, .3); }

/* Right sidebar: its background is painted by .bg-auto:before, which inherits this colour. */
html:not(.theme-dark) #rightAside { background-color: rgba(255, 255, 255, .8); }
@media (min-width: 992px) {
  html:not(.theme-dark) #rightAside { background-color: rgba(255, 255, 255, .55); transition: background-color .3s; }
  html:not(.theme-dark) #rightAside:hover { background-color: rgba(255, 255, 255, .72); }
}

/* ---------- post cards ---------- */
.blog-post > .panel {
  border: 0;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, .2) !important;
  transition: box-shadow .2s;
}
.post-list > .panel:hover { box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, .3) !important; }
.post-list .index-post-img { overflow: hidden; }
.post-list .index-post-img .item-thumb { transition: transform .2s, filter .2s; }
.post-list > .panel:hover .index-post-img .item-thumb { transform: scale(1.05); }
.index-post-title a { transition: color .2s; }
.index-post-title a:hover { color: #2ebaae; }
.panel .post-meta.wrapper-lg { padding: 20px; }

/* Wide screens: the title sits on the cover; hovering darkens and blurs the cover and slides in
 * the summary and the meta line. Clicks on the cover still reach the post link underneath. */
@media (min-width: 1200px) {
  .post-list > .panel-large:has(.index-post-img) { position: relative; }
  .post-list > .panel-large .index-post-img,
  .post-list > .panel-large .index-post-img .item-thumb { height: 300px; }
  .post-list > .panel-large:has(.index-post-img) .post-meta {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 40px !important;
    background-color: rgba(0, 0, 0, .3);
    pointer-events: none;
    transition: background-color .3s;
  }
  .post-list > .panel-large:has(.index-post-img) .post-meta a { pointer-events: auto; }
  .post-list > .panel-large:has(.index-post-img) .post-meta,
  .post-list > .panel-large:has(.index-post-img) .post-meta * { color: #fff !important; }
  .post-list > .panel-large:has(.index-post-img) .post_title_wrapper {
    display: flex;
    justify-content: center;
    text-align: center;
    transition: transform .3s;
  }
  .post-list > .panel-large:has(.index-post-img) .index-post-title {
    display: block;
    font-size: 24px;
    text-shadow: 0 0 3px #fff;
  }
  .post-list > .panel-large:has(.index-post-img) .summary,
  .post-list > .panel-large:has(.index-post-img) .post-item-foot {
    position: absolute;
    left: 40px;
    right: 40px;
    margin: 0;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity .3s, transform .3s;
  }
  .post-list > .panel-large:has(.index-post-img) .summary { bottom: 56px; }
  .post-list > .panel-large:has(.index-post-img) .post-item-foot { bottom: 16px; background: transparent !important; }
  .post-list > .panel-large:has(.index-post-img):hover .post-meta { background-color: rgba(0, 0, 0, .6); }
  .post-list > .panel-large:has(.index-post-img):hover .post_title_wrapper { transform: translateY(-40px); }
  .post-list > .panel-large:has(.index-post-img):hover .summary,
  .post-list > .panel-large:has(.index-post-img):hover .post-item-foot { opacity: 1; transform: translateY(0); }
  .post-list > .panel-large:has(.index-post-img):hover .index-post-img .item-thumb { filter: blur(3px); }
}
@media (max-width: 767px) {
  .post-list > .panel:hover .index-post-img .item-thumb { transform: none; }
}

/* ---------- comments ---------- */
html:not(.theme-dark) #post-panel .wrapper-md > #comments {
  border: 1px solid #fff;
  border-radius: 5px;
  padding: 10px 30px 20px;
}
.comment-list .comment-parent,
.comment-list .comment-children { border-top: 1px solid #ddd; padding-top: 10px; }

/* ---------- table of contents ---------- */
#toc { max-height: calc(100vh - 120px) !important; }
.tocify-item.active { color: #1199c4; font-weight: 700; }

/* ---------- sidebar avatar: large, spins on hover ----------
 * Needs the theme switch "左侧边栏竖排头像样式" (BigAvatar) so the name sits centred below it. */
#alllayout:not(.app-aside-folded) #aside-user .thumb-lg { width: 130px; }
#aside-user span.avatar {
  border: 0 solid;
  transition: transform .5s cubic-bezier(0, 0, .07, 1), border-width .5s;
}
#alllayout:not(.app-aside-folded) #aside-user span.avatar:hover {
  transform: rotate(360deg) scale(1.2);
  border-width: 5px;
}

/* ---------- links page: keep only the "申请友链" and "全站链接" tabs ---------- */
#post-panel .tab-container.post_tab > .nav > li:has(> a[data-target="#tab_2"]),
#post-panel .tab-container.post_tab > .nav > li:has(> a[data-target="#tab_3"]) { display: none; }

/* ---------- time machine ---------- */
a.btn.btn-sm.btn-bg.btn-rounded.btn-default.btn-icon { display: none; }
/* The like/"发自" line is opaque white and shows up as a white strip inside the see-through card. */
html:not(.theme-dark) .time-machine .say_footer { background-color: transparent; }
/* "说说 / 标签" counters sit on the light cover image; give them the same shadow as the page titles. */
#post-panel .pull-right.pull-none-xs.text-center > a { text-shadow: 0 0 3px #000; }
/* Red "新" badge on the 时光机 button in the header bar. */
.badge.notify_talk { display: none !important; }