/* Georges Tabbar(georges-tabbar.php):底部按钮栏。11-03 22:4x 起选中 = 按钮本身变主题黄(原来是按钮上方一条滑动短线) */
/* 去掉插件的浅蓝圆形波纹和系统点按高亮 */
.mobile-bottom-menu .mobile-bottom-menu-item::before{display:none!important}
.mobile-bottom-menu .mobile-bottom-menu-item{-webkit-tap-highlight-color:transparent}
/* 有了会滑的线,插件原来挂在「当前页」上的那条就不画了 */
.mobile-bottom-menu.has-gtab .mobile-bottom-menu-item.active::after{display:none!important}
.mobile-bottom-menu.has-gtab .mobile-bottom-menu-container{position:relative}
/* 平时和插件原来那条一样:灰 #606060、40×3、下边两角 3px */
.gtab-line{position:absolute;left:0;z-index:2;width:40px;height:3px;border-radius:0 0 3px 3px;background:rgba(0,0,0,.62);pointer-events:none;opacity:0;
  transition:transform .2s cubic-bezier(.2,.7,.2,1),background-color .3s ease,opacity .12s}
.gtab-line.is-on{opacity:1}
.gtab-line.is-press{background:#c19100;transition:transform .2s cubic-bezier(.2,.7,.2,1),background-color .08s ease,opacity .12s}
.gtab-line.no-anim{transition:none}
/* 10-26 Georges「小黄线 滑动起来 有点卡卡的 为啥 还不如菜单下的下划线丝滑」:点下去约 0.11 秒局部切换就开始(底栏的页面都预取好了),
   视图过渡给页面拍快照时线才滑到一半,于是「定在半路的旧线」和「还在滑的新线」交叉淡入、叠成重影。
   给线单独的过渡名:不要旧快照、不做过渡动画,一直显示真的那条线接着滑 */
.mobile-bottom-menu.has-gtab .gtab-line{view-transition-name:gtab-line;will-change:transform}
::view-transition-group(gtab-line){animation:none}
::view-transition-old(gtab-line){display:none}
::view-transition-new(gtab-line){animation:none}
@media(prefers-reduced-motion:reduce){.gtab-line{transition:background-color .3s ease,opacity .12s}}
/* 11-03 15:59 Georges「把全站的底部TAB也改为磨砂玻璃，但透明度更低一点」/ 16:30「底栏几乎没有模糊度，要加一点」:
   底栏白底换成磨砂玻璃:白 .72、磨砂 20px(Spectra 墙下那块是 .62 / 12px),上沿一线暗 + 其下一线亮(都是内阴影,在盒子里),原来 10px 的灰影去掉。
   磨砂必须加在底栏自己身上:底栏有页面切换用的 view-transition-name,浏览器把它当「磨砂的取景边界」,
   放在它的 ::before 里只能糊到底栏自己(15:59 那版就是这样,所以几乎看不出糊)。盒外用实心遮罩裁掉(GPU 合成会把磨砂漏到盒外)。
   插件按后台配色生成的 .theme-custom{background:#fff!important} 排在后面,这里多一级 body 压过它。不支持磨砂的浏览器还是原来的白底
   16:36 他「底栏的模拟厚度的亮边，太亮了一点，然后模糊度，减少一点」:暗线下那道亮线 .85 → .45,磨砂 20 → 14px(saturate 1.15 → 1.12)
   16:45「底栏的模糊度再减少一些」:磨砂 14 → 10px(saturate 1.12 → 1.1)(时间 22:4x 按香港备份目录改正,原来写成了 18:10 / 18:35) */
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
 body .mobile-bottom-menu.theme-custom{background:rgba(255,255,255,.72)!important;-webkit-backdrop-filter:blur(10px) saturate(1.1);backdrop-filter:blur(10px) saturate(1.1);box-shadow:inset 0 1px 0 rgba(20,20,20,.09),inset 0 2px 0 rgba(255,255,255,.45)!important;-webkit-mask-image:linear-gradient(#000,#000);mask-image:linear-gradient(#000,#000)}
}
/* 11-03 17:09 Georges「底栏的图标文字，改为黑色，并且增加透明度，使得看起来依然是灰色，但是有了半透明效果」:
   插件后台配色是 #606060(带 !important),改成黑色 62% —— 白底上正好还是 #606060,压在磨砂上会透出一点底下的颜色;
   滑动的那条指示线(上面 .gtab-line)同样改了,按下变黄不变。以后只调这里的 .62 */
body .mobile-bottom-menu.theme-custom .mobile-bottom-menu-item,body .mobile-bottom-menu.theme-custom .mobile-bottom-menu-item:hover,body .mobile-bottom-menu.theme-custom .mobile-bottom-menu-item:focus,body .mobile-bottom-menu.theme-custom .mobile-bottom-menu-item.active{color:rgba(0,0,0,.62)!important}
/* 11-03 23:0x 他「不要黄色了，改为更浅的灰色」:选中的按钮从主题黄改成浅灰 —— 黑 36%(其余按钮是黑 62%),以后只调最下面那条规则里的 .36。
   22:4x Georges「底栏改为玻璃后，上面的小黑条不合适了，改为选中的，把黑色图标和文字改为黄色」:
   上方那条短线不显示;改成「线原来在哪个按钮上,哪个按钮的图标和文字就变色(先是主题黄 #c19100,23:0x 起浅灰)」(tabbar.v2.js 给它加 .gtab-on):
   平时 = 当前页那个;手指按下 = 按住的那个(没点成会回去);换好页 = 新的当前页;不属于底栏的页面(登录等)一个都不亮。
   脚本还没跑的第一眼,按 <body> 的 gtab-xxx 先把对的那个染黄(插件自己的 .active 遇到认不出的网址会错标第一个,不用它) */
.mobile-bottom-menu .gtab-line{display:none!important}
body .mobile-bottom-menu.theme-custom .mobile-bottom-menu-item{transition:color .18s ease}
body .mobile-bottom-menu.theme-custom .mobile-bottom-menu-item.gtab-on,body .mobile-bottom-menu.theme-custom .mobile-bottom-menu-item.gtab-on:hover,body .mobile-bottom-menu.theme-custom .mobile-bottom-menu-item.gtab-on:focus,
body.gtab-spectra .mobile-bottom-menu.theme-custom:not(.has-gtab) .mobile-bottom-menu-item[href$="/spectra"],
body.gtab-journal .mobile-bottom-menu.theme-custom:not(.has-gtab) .mobile-bottom-menu-item[href$="/archives/category/journal"],
body.gtab-explore .mobile-bottom-menu.theme-custom:not(.has-gtab) .mobile-bottom-menu-item[href$="/explore"],
body.gtab-corner .mobile-bottom-menu.theme-custom:not(.has-gtab) .mobile-bottom-menu-item[href$="/corner"],
body.gtab-app .mobile-bottom-menu.theme-custom:not(.has-gtab) .mobile-bottom-menu-item[href$="/download"]{color:rgba(0,0,0,.36)!important}
@media(prefers-reduced-motion:reduce){body .mobile-bottom-menu.theme-custom .mobile-bottom-menu-item{transition:none}}
/* 11-03 23:2x 他「选中的图标 再浅一点点」:只调选中按钮的图标(黑 36% → 30%),文字仍是 36%。实心图标同样颜色看着比细笔画的字重一点 */
body .mobile-bottom-menu.theme-custom .mobile-bottom-menu-item.gtab-on .mobile-bottom-menu-icon,
body.gtab-spectra .mobile-bottom-menu.theme-custom:not(.has-gtab) .mobile-bottom-menu-item[href$="/spectra"] .mobile-bottom-menu-icon,
body.gtab-journal .mobile-bottom-menu.theme-custom:not(.has-gtab) .mobile-bottom-menu-item[href$="/archives/category/journal"] .mobile-bottom-menu-icon,
body.gtab-explore .mobile-bottom-menu.theme-custom:not(.has-gtab) .mobile-bottom-menu-item[href$="/explore"] .mobile-bottom-menu-icon,
body.gtab-corner .mobile-bottom-menu.theme-custom:not(.has-gtab) .mobile-bottom-menu-item[href$="/corner"] .mobile-bottom-menu-icon,
body.gtab-app .mobile-bottom-menu.theme-custom:not(.has-gtab) .mobile-bottom-menu-item[href$="/download"] .mobile-bottom-menu-icon{color:rgba(0,0,0,.3)!important;transition:color .18s ease}