@font-face { font-family: "custom-navbar-font"; src: url('//s1.hdslb.com/bfs/seed/jinkela/header/asserts/iconfont.ttf') format('truetype'); } @font-face { font-family: "custom-navbar-font-extended"; src: url('//s1.hdslb.com/bfs/static/jinkela/video/asserts/iconfont.4bab144.ttf') format('truetype'); } .custom-navbar-iconfont { color: inherit; font-family: "custom-navbar-font" !important; font-size: 24px; font-style: normal; } .custom-navbar-iconfont-extended { color: inherit; font-family: "custom-navbar-font-extended" !important; font-size: 24px; font-style: normal; } .custom-navbar-icon-logo::before { content: "\E725"; } .custom-navbar-icon-coin::before { content: "\E6E4"; } .custom-navbar-icon-lv0::before { content: "\E6CB"; color: #9A9A9A; } .custom-navbar-icon-lv1::before { content: "\E6CC"; color: #646464; } .custom-navbar.dark .custom-navbar-icon-lv0::before { color: #777; } .custom-navbar.dark .custom-navbar-icon-lv1::before { color: #ddd; } .custom-navbar-icon-lv2::before { content: "\E6CD"; color: #1BC861; } .custom-navbar-icon-lv3::before { content: "\E6CE"; color: #22BAEA; } .custom-navbar-icon-lv4::before { content: "\E6CF"; color: #EAA722; } .custom-navbar-icon-lv5::before { content: "\E6D0"; color: #FF7631; } .custom-navbar-icon-lv6::before { content: "\E6D1"; color: #FF3131; } [class^='custom-navbar-icon-lv']::before { font-size: 24px; } body { --navbar-height: 50px; --navbar-foreground: #555; --navbar-background: white; --navbar-bounds-padding: 0 5%; --navbar-blur-opacity: 0.7; --navbar-icon-size: 24px; } 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; } .round-corner .custom-navbar .popup { border-radius: 0 0 var(--corner-radius) var(--corner-radius); } .custom-navbar.dark .popup { color: #eee; background: #222; } .custom-navbar *, .custom-navbar, .custom-navbar-settings, .custom-navbar-settings * { transition: all .2s ease-out; -webkit-tap-highlight-color: transparent; outline: none !important; margin-inline-start: 0; margin-inline-end: 0; padding-inline-start: 0; padding-inline-end: 0; } .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: var(--navbar-bounds-padding); height: 100%; flex-grow: 1; } .custom-navbar ul { list-style: none; color: inherit; } .custom-navbar li { color: inherit; list-style: none; } .custom-navbar>ul>li { position: relative; height: 100%; display: flex; align-items: center; color: inherit; } .custom-navbar li .active-bar { position: absolute; left: 0; bottom: 0; background-color: var(--theme-color); width: 100%; height: 3px; display: none; } .custom-navbar.fill li .active-bar { background-color: rgba(0,0,0,0.3); } .custom-navbar li.active .active-bar { display: flex; } .custom-navbar>ul>li.view-border::before { content: ""; width: 94%; height: 94%; border: 2px dashed #888a; position: absolute; top: 3%; left: 3%; box-sizing: border-box; } .custom-navbar>ul>li:not(.disabled) { cursor: pointer; } .custom-navbar>ul>li.disabled a { cursor: default; } .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; color: var(--navbar-foreground); user-select: none; } .custom-navbar .main-content:hover { color: var(--navbar-foreground) !important; } .custom-navbar .popup { position: absolute; top: 100%; left: 50%; padding: 8px; box-shadow: rgba(0,0,0,0.2) 0 4px 8px 0px; 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.compact li:not([data-name='userInfo']) .popup { padding: 8px; } */ .custom-navbar.dark .popup { box-shadow: rgba(0,0,0,0.3) 0 4px 8px 0px; } .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 !important; text-decoration: none; } #custom-navbar-home-popup { max-height: 80vh; display: flex; flex-direction: column; flex-wrap: wrap; width: 350px; } @media screen and (min-height: 1000px) { #custom-navbar-home-popup { flex-wrap: nowrap; width: 250px; } } #custom-navbar-home-popup .category-item { font-size: 12pt; padding: 8px 16px; cursor: pointer; position: relative; } .round-corner #custom-navbar-home-popup .category-item { border-radius: var(--corner-radius); } .custom-navbar.compact #custom-navbar-home-popup .category-item { padding: 6px; } #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.compact #custom-navbar-home-popup .category-item.main { min-width: 110px; } #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; } .round-corner #custom-navbar-home-popup .category-item .popup { border-radius: var(--corner-radius); } #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; line-height: 16pt; } .custom-navbar.compact #custom-navbar-home-popup .category-item .popup a { padding: 6px; } #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 .circle { position: relative; width: var(--navbar-icon-size); height: var(--navbar-icon-size); opacity: 0.7; } .user-info-panel .circle .mdi { position: absolute; top: 0; left: 0; } .user-info-panel .mdi-circle ~ .mdi { filter: invert(1); font-size: calc(var(--navbar-icon-size) - 10px); line-height: calc(var(--navbar-icon-size) - 10px); transform: translate(5px, 5px); } .user-info-panel i { font-size: var(--navbar-icon-size); font-style: normal; line-height: var(--navbar-icon-size); } .user-info-panel .logged-in { display: flex; flex-direction: column; align-items: center; justify-content: space-between; } .user-info-panel .row, .user-info-panel .items { align-self: stretch; display: flex; justify-content: space-between; align-items: center; } .user-info-panel .row { margin: 0 10px; } .user-info-panel .row.level-info { margin-bottom: -5px; } .user-info-panel .operation { height: 36px; display: flex; align-items: center; justify-content: center; position: relative; align-self: stretch; } .user-info-panel .operation:hover { background-color: rgba(0,0,0,0.1); } .user-info-panel .operation .icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); background: none; } .user-info-panel .item > i { opacity: .7; } .user-info-panel .item { display: flex; flex-direction: column; justify-content: space-around; align-items: center; height: 56px; width: 60px; } .user-info-panel .item span { font-size: 14px; } .user-info-panel .item > i:nth-child(2) { font-size: 18px; line-height: 18px; } .user-info-panel .welcome, .user-info-panel .name { font-size: 16px; font-weight: bold; margin: 46px 0 16px 0; text-align: center; } .user-info-panel .name { margin: 62px 0 0 0; } .user-info-panel .type { font-size: 11px; opacity: 0.5; margin: 6px 0; } .user-info-panel .separator { height: 1px; align-self: stretch; margin: 5px 10px; background: rgba(0,0,0,0.1); } .user-info-panel .logout { margin-top: 5px; } .round-corner .user-info-panel .logout { border-radius: 0 0 var(--corner-radius) var(--corner-radius); } .user-info-panel .logout:hover { color: inherit !important; } .custom-navbar.dark .user-info-panel .separator { background: rgba(255,255,255,.1); } .user-info-panel .level-progress-thumb { width: 100%; height: 100%; background: var(--theme-color); transform-origin: left; } .user-info-panel .level-progress-label { font-size: 11px; } .user-info-panel .grey-button, .user-info-panel .theme-button { align-self: stretch; height: 36px; display: flex; align-items: center; justify-content: center; } .user-info-panel .grey-button { background: #ededed; color: inherit !important; } .user-info-panel .grey-button:hover { background: #ddd; } .custom-navbar.dark .user-info-panel .grey-button { background: #444; } .custom-navbar.dark .user-info-panel .grey-button:hover { background: #333; } .custom-navbar .user-info-panel .theme-button { background: var(--theme-color); color: var(--foreground-color); } .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-bottom: 2px solid var(--theme-color-30); } .custom-navbar .video-list li:not(.more) a { padding: 12px 16px; margin: 0; box-sizing: border-box; transition: all .2s ease-out .1s; display: block; width: 100%; height: 100%; line-height: 1.5; } .custom-navbar.compact .video-list li:not(.more) a { padding: 6px 8px; } .custom-navbar .video-list li:hover { background: rgba(0,0,0,0.1); /* border-left-width: 8px; */ border-color: var(--theme-color); } .round-corner .custom-navbar .video-list li.more { /* border-bottom: 2px solid transparent; */ border-radius: 0 0 var(--corner-radius) var(--corner-radius); } .custom-navbar .video-list li.more a { width: 100%; padding: 8px 0; display: flex; justify-content: center; font-weight: bold; } .custom-navbar.compact .video-list li.more a { padding: 6px 0; } .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.compact .video-list.history .history-item .title, .custom-navbar.compact .video-list li:not(.more) a { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .custom-navbar .video-list.history li:not(.more) a { justify-content: space-between; position: relative; display: flex; padding: 13px 16px !important; } .custom-navbar.compact .video-list.history li:not(.more) a { padding: 7px 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; white-space: nowrap; } .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: flex; flex-direction: column; pointer-events: none; opacity: 0; width: 370px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -46%); z-index: 10001; background: var(--navbar-background); padding-top: 16px; box-shadow: #0002 0 1px 10px 1px; font-size: 16px; line-height: 1.5; } .round-corner .custom-navbar-settings { border-radius: var(--large-corner-radius); } .custom-navbar-settings.dark { box-shadow: #0004 0px 2px 10px 1px; } .custom-navbar-settings h1 { color: var(--navbar-foreground); font-size: 16pt; font-weight: bold; } .custom-navbar-settings.show { pointer-events: initial; opacity: 1; } .custom-navbar-settings .header, .custom-navbar-settings .orders { display: flex; justify-content: space-between; align-items: center; } .custom-navbar-settings .header { padding: 0 24px; font-size: 9pt; } .custom-navbar-settings .header .header-blank { flex-grow: 1; } .custom-navbar-settings .orders { flex-grow: 1; } .custom-navbar-settings .order-list { padding: 0 24px; max-height: 60vh; overflow: auto; overscroll-behavior: contain; } .custom-navbar-settings button { border: none; background-color: transparent; color: var(--navbar-foreground); padding: 8px; cursor: pointer; } .custom-navbar-settings button { font-size: 14pt; } .custom-navbar-settings button:hover { color: var(--theme-color); } .custom-navbar-settings .order-list { list-style: none; width: 100%; margin: 16px 0; } .custom-navbar-settings .order-list li .mdi-menu { padding: 8px; } .custom-navbar-settings .order-list i { font-size: 14pt; } .custom-navbar-settings .order-list i.mdi-menu { cursor: move; } .custom-navbar-settings .order-list li { color: var(--navbar-foreground); font-size: 12pt; display: flex !important; justify-content: space-between; align-items: center; user-select: none; transition: opacity .2s ease-out; } .custom-navbar-settings .order-list li.hidden { opacity: 0.5; } .custom-navbar-settings .paddings { display: flex; align-items: center; justify-content: space-between; padding: 16px 32px; color: var(--navbar-foreground); } .custom-navbar-settings .paddings span { min-width: 40px; } .custom-navbar-settings .paddings input { flex-grow: 1; margin-right: 16px; -webkit-appearance: none; background: transparent; width: 100%; } .custom-navbar-settings .paddings input::-webkit-slider-thumb { -webkit-appearance: none; height: 18px; width: 18px; background: var(--theme-color); border-radius: 50%; box-shadow: 0 2px 8px 0 var(--theme-color-50); cursor: pointer; border: none; transform: translateY(-7px); } .custom-navbar-settings .paddings input::-moz-range-thumb { -webkit-appearance: none; height: 18px; width: 18px; background: var(--theme-color); border-radius: 50%; box-shadow: 0 2px 8px 0 var(--theme-color-50); cursor: pointer; border: none; } .custom-navbar-settings .paddings input::-webkit-slider-runnable-track { width: 100%; background: #8884; height: 4px; } .custom-navbar-settings .paddings input::-moz-range-track { width: 100%; background: #8884; height: 4px; } .custom-navbar .blur-layer-container { overflow: hidden; display: none; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .custom-navbar.blur .blur-layer-container { display: flex; } .custom-navbar .blur-layer { width: 100%; height: 100%; background-position: center 0; background-repeat: no-repeat; filter: blur(36px); opacity: var(--navbar-blur-opacity); } .custom-navbar .blur-layer.left-pad { position: absolute; left: 0; top: 0; transform: translateX(-100%) scaleX(-1); width: 100%; height: 100%; } .custom-navbar .blur-layer.right-pad { position: absolute; left: 0; top: 0; transform: translateX(100%) scaleX(-1); width: 100%; height: 100%; } .custom-navbar.dark .blur-layer { filter: blur(54px); } .custom-navbar ol { color: black; } .custom-navbar.dark ol { color: #eee; } body.all-navbar-fill .link-navbar, body.all-navbar-fill .nav-header-wrapper, body.all-navbar-fill .link-navbar .main-ctnr .nav-items-ctnr { background-color: var(--theme-color) !important; } body.all-navbar-fill .link-navbar .nav-item:first-child::before, body.all-navbar-fill .nav-header-wrapper .nav-header .nav-header-logo, body.all-navbar-fill .nav-header-wrapper .nav-header .nav-header-tv-icon, body.all-navbar-fill .nav-header-wrapper .nav-header .search-icon, body.all-navbar-fill .link-navbar .main-ctnr .nav-logo::before, body.all-navbar-fill .link-navbar .main-ctnr .nav-switcher.open-btn { filter: brightness(0) invert(1) !important; opacity: 0.8666666; } body.all-navbar-fill .link-navbar .nav-item .label, body.all-navbar-fill .link-navbar .nav-item:hover .nav-link .label, body.all-navbar-fill .shortcuts-ctnr .shortcut-item .label-wrapper .text, body.all-navbar-fill .shortcuts-ctnr .shortcut-item .label-wrapper .text:hover, body.all-navbar-fill .link-navbar .publish-btn, body.all-navbar-fill .link-navbar .publish-btn:hover, body.all-navbar-fill .search-bar-ctnr .search-bar .placeholder, body.all-navbar-fill .search-bar-ctnr .search-bar .search-btn, body.all-navbar-fill .nav-header-wrapper .nav-header .nav-header-mainsite, body.all-navbar-fill .nav-header-wrapper .nav-header .order-center, body.all-navbar-fill .link-navbar .main-ctnr .nav-logo, body.all-navbar-fill .shortcuts-ctnr .shortcut-item, body.all-navbar-fill .my-link-btn, body.all-navbar-fill .link-navbar .main-ctnr .nav-switcher i, body.all-navbar-fill .link-navbar .main-ctnr .nav-switcher i:hover, body.all-navbar-fill .link-navbar.black .my-link-btn .label { color: var(--foreground-color-d) !important; } body.all-navbar-fill .link-navbar .search-bar-ctnr .search-bar input, body.all-navbar-fill .nav-header-wrapper .nav-header .nav-header-search-bar, body.all-navbar-fill .link-navbar .search-bar-ctnr .search-bar input::placeholder, body.all-navbar-fill .nav-header-wrapper .nav-header .nav-header-search-bar::placeholder { color: white !important; } body.all-navbar-fill .link-navbar .search-bar-ctnr .search-bar input::placeholder, body.all-navbar-fill .nav-header-wrapper .nav-header .nav-header-search-bar::placeholder { opacity: 0.7 !important; } body.all-navbar-fill .nav-header-wrapper .nav-header .nav-header-search-bar, body.all-navbar-fill .link-navbar .search-bar-ctnr .search-bar { box-shadow: 0px 1px 4px 0 #0004; } body.all-navbar-fill .link-navbar .nav-item:hover, body.all-navbar-fill .link-navbar .shortcuts-ctnr .shortcut-item:hover, body.all-navbar-fill .link-navbar .publish-btn, body.all-navbar-fill .link-navbar .publish-btn:hover:after, body.all-navbar-fill .link-navbar .search-bar-ctnr .search-bar, body.all-navbar-fill .link-navbar .search-bar-ctnr .search-bar:hover, body.all-navbar-fill .nav-header-wrapper .nav-header .nav-header-search-bar { background-color: transparent !important; } body.all-navbar-fill .link-navbar .search-bar-ctnr .search-bar { border-color: transparent !important; } body.all-navbar-fill .link-navbar .publish-btn { background-image: none !important; box-shadow: none !important; } body.all-navbar-fill .link-navbar .nav-item:hover .nav-link .label, body.all-navbar-fill .link-navbar .shortcuts-ctnr .shortcut-item .label-wrapper .text:hover, body.all-navbar-fill .link-navbar .my-link-btn .label:hover, body.all-navbar-fill :not(.app-ctnr) .link-navbar .nav-item:hover, body.all-navbar-fill .link-navbar .shortcuts-ctnr .shortcut-item:hover { background-color: transparent !important; } body.all-navbar-fill .link-navbar .shortcuts-ctnr .shortcut-item, body.all-navbar-fill .link-navbar .nav-item { transition: all .2s ease-out; } @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; } }