.title-bar { z-index: 10; position: sticky; top: -4em; left: 0; width: 100%; height: 7em; background-color: rgba(255, 255, 255, 0.8); box-shadow: 0 0 25px rgba(0, 0, 0, 0.4); margin-bottom: 1em; backdrop-filter: blur(5px); } .root-dark-mode .title-bar { background-color: hsla(0, 0%, 12%, 0.8); box-shadow: 0 0 5px rgba(255, 255, 255, 0.1); } .control-bar { display: flex; margin-top: 0.5em; line-height: 2em; } .control-btn { flex: 0 0 4.5em; text-align: center; color: black; border-radius: 5px; } .control-btn:hover { background-color: #666666; color: white; } .control-btn-label { margin-left: 0.25rem; font-size: 0.9em; vertical-align: 0.05em; } @media screen and (max-width: 900px) { .control-btn { flex: 0 0 2.5em; } .control-btn-label { display: none; } .control-search { padding: 0 0.5em; } } .root-dark-mode .control-btn { color: var(--foreground-dark); opacity: 0.9; } .root-dark-mode .control-btn:hover { color: var(--foreground-dark); opacity: 1; } .control-search { flex: auto; color: black; background-color: rgba(255, 255, 255, 0.3) !important; margin: 0 0.5em; min-width: 8em; } .control-search:focus { background-color: white !important; } .root-dark-mode .control-search { background-color: hsla(0, 0%, 35%, 0.6) !important; color: var(--foreground-dark); } .root-dark-mode .control-search:focus { background-color: hsl(0, 0%, 80%) !important; color: black !important; } .list-menu { text-align: center; } .help-desc-box p { margin: 0.5em; }