filestash/public/assets/pages/filespage/ctrl_submenu.css

.component_submenu.sticky {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--bg-color);
    opacity: 0.95;
}

.component_submenu {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    margin-bottom: -10px;
}
.component_submenu .menubar {
    font-size: 15px;
    line-height: 15px;
    height: 15px;
    margin-top: 5px;
    color: var(--light);
    margin: 5px 0 10px 0;
    /* Create Buttons */
}
.component_submenu .menubar > span, .component_submenu .menubar form label {
    display: inline-block;
    margin-top: -5px;
    border-radius: 2px;
    cursor: pointer;
    background-position: center;
}
.component_submenu .menubar > span:active, .component_submenu .menubar > span:hover, .component_submenu .menubar form label:active, .component_submenu .menubar form label:hover {
    color: var(--color);
}
.component_submenu .menubar > span:hover, .component_submenu .menubar form label:hover {
    transition: background 0.4s;
    background: #ffffff00 radial-gradient(circle, transparent 1%, var(--bg-color) 1%) center/15000%;
}
.component_submenu .menubar > span:active, .component_submenu .menubar form label:active {
    background-color: #00000033;
    background-size: 100%;
    transition: background 0s;
}
.component_submenu .menubar > span {
    padding: 5px 8px;
    letter-spacing: 0.06em;
    display: inline-block;
    text-transform: uppercase;
    font-size: 12px;
    color: var(--light);
    vertical-align: text-bottom;
}
.component_submenu .menubar > div {
    cursor: pointer;
    margin-right: 15px;
}
.component_submenu .menubar .view {
    float: right;
    padding: 2px;
    transition: 0.15s ease-out background;
    margin-right: 0px;
    margin-left: 0px;
}
.component_submenu .menubar .view .search, .component_submenu .menubar .view.list-grid, .component_submenu .menubar .view > .dropdown_button, .component_submenu .menubar .view form > label {
    min-width: inherit;
    border-radius: 2px;
    padding: 5px;
    margin: 2px 0 2px 0;
}
.component_submenu .menubar .view.list-grid, .component_submenu .menubar .view .dropdown_button, .component_submenu .menubar .view .search {
    background-position: center;
}
.component_submenu .menubar .view.list-grid:hover, .component_submenu .menubar .view .dropdown_button:hover, .component_submenu .menubar .view .search:hover {
    transition: background 0.4s;
    background: #ffffff00 radial-gradient(circle, transparent 1%, var(--bg-color) 1%) center/15000%;
}
.component_submenu .menubar .view.list-grid:active, .component_submenu .menubar .view .dropdown_button:active, .component_submenu .menubar .view .search:active {
    background-color: #00000033;
    background-size: 100%;
    transition: background 0s;
}
.component_submenu .menubar .view .dropdown_container .component_icon {
    box-sizing: border-box;
    border: 2px solid rgba(0, 0, 0, 0);
}
.component_submenu .menubar .view.list-grid, .component_submenu .menubar .view .search {
    margin-top: -5px !important;
}
.component_submenu .menubar .view.component_dropdown {
    margin-top: -10px;
}
.component_submenu .menubar .view.component_dropdown.active .dropdown_button {
    box-shadow: none;
}
.component_submenu .menubar.search_focus form input {
    transition: 0.2s width ease-in;
    opacity: 1;
}
.component_submenu .menubar form {
    float: right;
    margin-top: -3px;
}
.component_submenu .menubar form input {
    opacity: 0;
    font-size: 1em;
    margin-top: -3px;
    border: none;
    background: inherit;
    border-bottom: 2px solid var(--light);
    color: var(--color);
}
.component_submenu .menubar.search_focus > span {
    display: none;
}
.component_submenu .menubar .component_icon {
    height: 15px;
    width: 15px;
}

.component_submenu .submenuwithSelection-appear {
    display: inline-block;
    opacity: 0;
    transform: translateY(3px);
    transition: opacity 0.2s ease, transform 0.4s ease;
}

.component_submenu .submenuwithSelection-appear.submenuwithSelection-appear-active {
    opacity: 1;
    transform: translateY(0px);
}

.dark-mode .component_submenu input#search {
    color: rgba(255, 255, 255, 0.8);
}