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

/* General design */
[is="component_submenu"] {
    margin-top: 10px;
    position: sticky;
    top: 0;
    z-index: 3;
    padding: 4px 0;
    backdrop-filter: blur(20px) saturate(2);
    transition: 0.2s ease box-shadow;
}
.scrolling [is="component_submenu"] {
    box-shadow: 0 5px 10px rgba(100,100,100,.05);
    background: rgba(245,245,245,0.9);
}
[is="component_submenu"] .component_submenu {
    display: flex;
    justify-content: space-between;
    padding: 0 15px;
}
[is="component_submenu"] .component_submenu .action button {
    padding: 6px 10px;
    background: transparent;
    text-transform: uppercase;
    font-size: 0.8rem;
    color: var(--light);
    letter-spacing: 0;
    border-radius: 5px;
    line-height: 15px;
}
[is="component_submenu"] .component_submenu .action button img {
    width: 15px;
    height: 15px;
    margin-left: -3px;
    margin-right: -3px;
}
.touch-yes [is="component_submenu"] .component_submenu .action button img {
    width: 16px;
    height: 16px;
}
[is="component_submenu"] .component_submenu .action.left {
    margin-right: 2px;
    display: flex;
}
[is="component_submenu"] .component_submenu .action.left button {
    min-width: 50px;
}
.touch-no [is="component_submenu"] .component_submenu .action.right:hover,
[is="component_submenu"] .component_submenu .action.right.hover{
    background: var(--border);
}
.touch-no [is="component_submenu"] .component_submenu .action button:hover {
    filter: brightness(0.9);
    background: var(--border);
}
[is="component_submenu"] .component_submenu .action button:active {
    filter: brightness(0.75);
    background: var(--border);
}
[is="component_submenu"] .component_submenu .action.right {
    border-radius: 5px;
    white-space: nowrap;
}
[is="component_submenu"] .component_submenu .action.right button[data-bind="clear"] {
    display: flex;
    align-items: center;
    background: var(--border);
    font-weight: bold;
}
[is="component_submenu"] .component_submenu .action.right button[data-bind="clear"] img {
    padding-left: 2px;
}

/* dark mode */
.dark-mode [is="component_submenu"] .component_submenu .action button img {
    filter: brightness(70%) invert(1);
}
.dark-mode [is="component_submenu"] .component_submenu .action button {
    color: var(--light);
    font-weight: bold;
}
.dark-mode .scrolling [is="component_submenu"] {
    background: var(--bg-color);
}

/* search */
/* img[alt="search"]:hover ~ input { */
/*     background: red; */
/*     display: block; */
/* } */

/* .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); */
/* } */