@font-face { font-family: "custom-navbar-font"; src: url('//s1.hdslb.com/bfs/seed/jinkela/header/asserts/iconfont.ttf') format('truetype'); } .custom-navbar-iconfont { color: inherit; font-family: "custom-navbar-font" !important; font-size: 24px; font-style: normal; } .custom-navbar-icon-logo::before { content: "\\E725"; } body { --navbar-height: 50px; --navbar-foreground: #555; --navbar-background: white; } body.no-banner #banner_link, body.no-banner .z-top-container.has-banner>.header, .bili-header-m>#banner_link .search, li.nav-item[report-id='playpage_dynamic'] iframe, li.nav-item[report-id='playpage_dynamic'] .i-frame, .i_menu_login { display: none !important; } .bili-header-m>.nav-menu, .z_top { visibility: hidden !important; height: var(--navbar-height) !important; } .link-top-container#tab-container { top: var(--navbar-height) !important; } .custom-navbar { position: absolute; top: 0; left: 0; height: var(--navbar-height); width: 100%; background-color: var(--navbar-background); color: var(--navbar-foreground); z-index: 10001; display: flex; justify-content: center; } .custom-navbar:not(.fill) .custom-navbar-iconfont { color: var(--theme-color); } .custom-navbar path { fill: var(--navbar-foreground); } .custom-navbar.fill path { fill: var(--foreground-color-d); } .custom-navbar.shadow { box-shadow: #0002 0 1px 10px 1px; } .custom-navbar.dark.shadow { box-shadow: #0004 0px 2px 10px 1px; } .custom-navbar.dark:not(.fill), .custom-navbar-settings.dark { --navbar-background: #222; --navbar-foreground: #eee; } .custom-navbar .popup { color: black; background: white; transition: all .2s ease-out .2s; } .custom-navbar.dark .popup { color: #eee; background: #222; } .custom-navbar *, .custom-navbar, .custom-navbar-settings, .custom-navbar-settings * { transition: all .2s ease-out; } .custom-navbar.fill { --navbar-background: var(--theme-color); --navbar-foreground: var(--foreground-color-d); } .custom-navbar.fill.shadow { box-shadow: var(--theme-color-30) 0px 2px 10px 1px; } .custom-navbar>ul { display: flex; align-items: center; justify-content: space-between; margin: 0 5%; height: 100%; flex-grow: 1; } .custom-navbar ul { list-style: none; color: inherit; } .custom-navbar li { color: inherit; } .custom-navbar>ul>li { position: relative; height: 100%; display: flex; align-items: center; color: inherit; } .custom-navbar>ul>li:not(.disabled) { cursor: pointer; } .custom-navbar>ul>li:not(.disabled):hover { background: rgba(0,0,0,0.1); } .custom-navbar .main-content { font-size: 10pt; height: 100%; display: flex; align-items: center; padding: 0 16px; } .custom-navbar .popup { position: absolute; top: 100%; left: 50%; padding: 16px; box-shadow: rgba(0,0,0,0.1) 0 4px 40px 20px; pointer-events: none; opacity: 0; transform: translateX(-50%); /* transform-origin: top; */ /* transition: all 0.15s cubic-bezier(0.18, 0.89, 0.38, 1.15) .2s; */ } .custom-navbar.dark .popup { box-shadow: rgba(0,0,0,0.3) 0 4px 40px 20px; } .custom-navbar .popup.no-padding { padding: 0; } .custom-navbar .popup.transparent { background-color: transparent !important; box-shadow: none; } .custom-navbar>ul>li:not(.disabled):hover>.popup, #custom-navbar-home-popup .category-item:hover .popup { /* transform: translateX(-50%) scale(1); */ pointer-events: initial; opacity: 1; } .custom-navbar a, .custom-navbar a:hover { color: inherit; text-decoration: none; } #custom-navbar-home-popup { max-height: 80vh; display: flex; flex-direction: column; flex-wrap: wrap; width: 300px; } #custom-navbar-home-popup .category-item { font-size: 12pt; padding: 8px 16px; cursor: pointer; position: relative; } #custom-navbar-home-popup .category-item:hover { background-color: #0001; } #custom-navbar-home-popup .category-item a { display: flex; justify-content: space-between; align-items: center; } #custom-navbar-home-popup .category-item svg { width: 25px; height: 25px; fill: currentColor; margin-right: 10px; } #custom-navbar-home-popup .category-item div { flex: 1 0 auto; } #custom-navbar-home-popup .category-item.main { min-width: 150px; } #custom-navbar-home-popup .category-item .popup { z-index: 10002; width: max-content; transform: scaleX(0); transform-origin: left; padding: 8px; left: 100%; top: 0; transition-delay: .3s; pointer-events: initial; } #custom-navbar-home-popup .category-item:hover .popup { transform: scaleX(1); } #custom-navbar-home-popup .category-item .popup a, #upload-actions a, #message-list a { padding: 8px; display: flex; justify-content: start; border-bottom: 2px solid transparent; font-size: 11pt; } #custom-navbar-home-popup .category-item .popup a:hover, #upload-actions a:hover, #message-list a:hover { border-bottom: 2px solid var(--theme-color); } #custom-navbar-home-popup .category-item span { opacity: 0.5; } .im-list-box { border-radius: 0 !important; } #upload-button { padding-left: 4px; font-size: 12pt; font-weight: bold; } #upload-actions, #message-list { width: max-content; } .custom-navbar form { height: 100%; display: flex; align-items: center; position: relative; --submit-button-size: 30px; opacity: 0.4; } .custom-navbar.fill form { opacity: 0.8; } .custom-navbar form:focus-within, .custom-navbar form:hover, .custom-navbar.fill form:focus-within, .custom-navbar.fill form:hover { opacity: 1; } .custom-navbar form input { border: none; height: 60%; background: transparent; border-bottom: 1.5px solid var(--navbar-foreground) !important; color: var(--navbar-foreground); box-sizing: border-box; width: 250px; padding-right: var(--submit-button-size); padding-left: 4px; } .custom-navbar form input:focus { border-bottom-color: var(--navbar-foreground) !important; outline: none !important; } .custom-navbar form button[type="submit"] { background: transparent; border: none; padding: 4px; cursor: pointer; height: var(--submit-button-size); width: var(--submit-button-size); position: absolute; right: 0; top: 50%; transform: translateY(-50%);; } .custom-navbar form input[type="text"]::placeholder { color: var(--navbar-foreground) !important; opacity: 0.9; } .custom-navbar .user-face-container { position: relative; height: calc(var(--navbar-height) - 16px); width: calc(var(--navbar-height) - 16px); } .custom-navbar .user-face, .custom-navbar .user-pendant { position: absolute; width: 100%; height: 100%; } .custom-navbar .user-face { background-color: transparent; background-size: contain; border-radius: 50%; } .custom-navbar .user-pendant { background-color: transparent; background-size: cover; width: 170%; height: 170%; top: -12px; left: -12px; opacity: 0; pointer-events: none; } .user-info-panel { width: 240px; font-size: 12px; } .user-info-panel>* { display: flex; flex-direction: column; align-items: center; justify-content: space-between; height: 300px; } .user-info-panel .not-logged-in { height: auto; margin-top: 40px; flex-direction: row; justify-content: space-evenly; } .user-info-panel .row { display: flex; justify-content: space-between; align-items: center; width: 100%; position: relative; } .user-info-panel .name { font-size: 14pt; margin-top: 40px; color: inherit; } .user-info-panel .name:hover { color: var(--theme-color); } .user-info-panel .type { padding: 4px; background: var(--theme-color) !important; color: var(--foreground-color) !important; margin-bottom: 8px; } .user-info-panel .coins, .user-info-panel .b-coins, .user-info-panel .coins-container, .user-info-panel .verifications { display: flex; justify-content: center; align-items: center; flex: 1 0 50%; } .user-info-panel .coins-container, .user-info-panel .verifications { justify-content: space-evenly; } .user-info-panel .verifications i { opacity: 0.6; font-size: 16px; } .user-info-panel .verifications i.verified { opacity: 1; color: var(--theme-color); } .user-info-panel .coins::before { content: "硬币"; color: var(--theme-color); margin-right: 4px; } .user-info-panel .b-coins::before { content: "B币"; color: var(--theme-color); margin-right: 4px; } .user-info-panel .level, .user-info-panel .level:hover { color: var(--theme-color); } .custom-navbar .level strong { font-size: 14pt; font-weight: normal; margin-left: 2px; } .user-info-panel .level, .user-info-panel .level-progress-label { margin-bottom: 8px; } .user-info-panel .level-progress { width: 100%; height: 2px; background-color: #8884; position: absolute; bottom: 0; left: 0; } .user-info-panel .level-progress-thumb { width: 100%; height: 100%; transform-origin: left; background-color: var(--theme-color); } .user-info-panel .row.operations { transform: translateX(5%); } .user-info-panel .operations a { display: flex; justify-content: start; align-items: center; flex: 1 0 50%; } .user-info-panel .operations a:hover, .user-info-panel .operations a:hover i { color: var(--theme-color) !important; } .user-info-panel .operations i { font-size: 16px; margin-right: 4px; } .custom-navbar .not-logged-in .login, .custom-navbar .not-logged-in .sign-up { padding: 8px 16px; } .custom-navbar .not-logged-in .login, .custom-navbar .not-logged-in .login:hover { background-color: var(--theme-color); color: var(--foreground-color); } .custom-navbar .not-logged-in .sign-up, .custom-navbar .not-logged-in .sign-up:hover { background-color: #8884; } .custom-navbar li:hover .user-face, .custom-navbar li:hover .user-pendant { transform: scale(2) translateY(10px); z-index: 100; opacity: 1; } .custom-navbar .video-list { width: 280px; font-size: 12px; } .custom-navbar .video-list li:not(.more) { border-left: 2px solid var(--theme-color-30); } .custom-navbar .video-list li:not(.more) a { padding: 6px 16px; margin: 6px 0; box-sizing: border-box; transition: all .2s ease-out .1s; display: flex; width: 100%; height: 100%; } .custom-navbar .video-list li:hover { background: rgba(0,0,0,0.1); /* border-left-width: 8px; */ border-color: var(--theme-color); } .custom-navbar .video-list li.more { border-bottom: 2px solid transparent; } .custom-navbar .video-list li.more a { width: 100%; padding: 8px 0; display: flex; justify-content: center; } .custom-navbar .video-list li.more:hover { border-color: var(--theme-color); } .custom-navbar .video-list .loading { display: flex; justify-content: center; border-color: transparent !important; } .custom-navbar .video-list.loaded .loading { display: none; } .custom-navbar .video-list.history .history-item { border: none !important; } .custom-navbar .video-list.history li:not(.more) a { justify-content: space-between; position: relative; padding: 6px 8px !important; } .custom-navbar .video-list.history a .description { opacity: 0.6; margin-left: 4px; white-space: nowrap; } .custom-navbar .video-list.history a .progress { position: absolute; bottom: 0; left: 0; height: 2px; width: 100%; background-color: var(--theme-color); transform-origin: left; opacity: 0.3; } .custom-navbar .video-list.history a:hover .progress { opacity: 1; } .custom-navbar .notify-count { position: absolute; left: 50%; top: 0; background-color: var(--theme-color); color: var(--foreground-color); padding: 0 8px; display: flex; justify-content: center; font-size: 11px; transform: translateX(-50%); border-radius: 0 0 8px 8px; opacity: 0; line-height: 14px; } .custom-navbar.fill .notify-count { background-color: rgba(0,0,0,0.3); } .custom-navbar .notify-count:not(:empty) { opacity: 1; } #message-list a { position: relative; } #message-list a[data-count]::after { content: attr(data-count); position: absolute; left: 100%; top: 50%; transform: translateY(-50%); background-color: var(--theme-color); padding: 0 10px; display: flex; justify-content: center; font-size: 11pt; border-radius: 6px; } .custom-navbar-settings { display: none; width: 500px; height: 400px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10001; background: var(--navbar-background); padding: 16px 24px; box-shadow: #0002 0 1px 10px 1px; } .custom-navbar-settings.dark { box-shadow: #0004 0px 2px 10px 1px; } .custom-navbar-settings h1 { color: var(--navbar-foreground); font-size: 16pt; } .custom-navbar-settings.show { display: flex; } .custom-navbar-settings .style { width: 50%; height: 100%; display: flex; flex-direction: column; justify-content: stretch; align-items: stretch; } .custom-navbar-settings .style input { display: none; width: 0; height: 0; } .custom-navbar-settings .style-label { font-size: 12pt; padding: 8px 0; display: flex; align-items: center; cursor: pointer; } .custom-navbar-settings .style input ~ span { color: var(--navbar-foreground); } .custom-navbar-settings .style input:checked ~ span { color: var(--theme-color); } .custom-navbar-settings .style input ~ i { color: var(--theme-color); font-size: 20px; margin-right: 8px; opacity: 0; } .custom-navbar-settings .style input:checked ~ i { opacity: 1; } @media screen and (max-width: 1400px) { .custom-navbar .main-content { padding: 0 10px; } } @media screen and (max-width: 1300px) { .custom-navbar .main-content { padding: 0 8px; } .custom-navbar form input { width: 200px; } }