@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"; } .custom-navbar { --navbar-height: 50px; --navbar-foreground: black; --navbar-background: white; position: absolute; top: 0; left: 0; height: var(--navbar-height); width: 100%; background-color: var(--navbar-background); color: var(--navbar-foreground); z-index: 10001; } .custom-navbar:not(.fill) .custom-navbar-iconfont { color: var(--theme-color); } .custom-navbar path { fill: black; } .custom-navbar.dark:not(.fill) path { fill: #eee; } .custom-navbar.fill path { fill: #fffd; } .custom-navbar.shadow { box-shadow: #0004 0px 2px 10px 1px; } .custom-navbar.dark:not(.fill) { --navbar-background: #222; --navbar-foreground: #eee; } .custom-navbar .popup { color: #eee; background: #222; } .custom-navbar *, .custom-navbar { transition: all .2s ease-out; } .custom-navbar.fill { --navbar-background: var(--theme-color); --navbar-foreground: #fffd; } .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%; } .custom-navbar ul { list-style: none; } .custom-navbar>ul>li { position: relative; height: 100%; display: flex; align-items: center; } .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: #0002 0 4px 8px 8px; 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 .popup.no-padding { padding: 0; } .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; } #custom-navbar-home-popup { max-height: 50vh; 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; } #custom-navbar-home-popup .category-item .popup { z-index: 10002; width: max-content; } #custom-navbar-home-popup .category-item .popup a, #upload-actions a { padding: 8px 16px; display: flex; justify-content: center; border-bottom: 2px solid transparent; font-size: 11pt; } #custom-navbar-home-popup .category-item .popup a:hover, #upload-actions 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; } li.nav-item[report-id='playpage_dynamic'] iframe, li.nav-item[report-id='playpage_dynamic'] .i-frame { display: none !important; } #upload-button { padding-left: 4px; font-size: 12pt; font-weight: bold; } #upload-actions { width: max-content; } .custom-navbar form { height: 100%; display: flex; align-items: center; position: relative; --submit-button-size: 30px; } .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; } .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; }