Lucas Scala
90892fd236
* group add * make button not wide * make single and batch add to folder use the same style popup * prevent stuck UI, allow scrolling, prevent ::after conflicts * extremely large commit, beware * clear everything after performing bulk actions * Unify bulk selection design language --------- Co-authored-by: Cohee <18619528+Cohee1207@users.noreply.github.com>
570 lines
12 KiB
CSS
570 lines
12 KiB
CSS
/* Main Page Backgrounds */
|
|
#bg1 {
|
|
background-repeat: no-repeat;
|
|
background-attachment: fixed;
|
|
background-size: cover;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
transition: background-image var(--animation-duration-3x) ease-in-out;
|
|
z-index: -1;
|
|
}
|
|
|
|
/* Fitting options */
|
|
#background_fitting {
|
|
max-width: 8em;
|
|
}
|
|
|
|
/* Fill/Cover - scales to fill width while maintaining aspect ratio */
|
|
#bg1.cover {
|
|
background-size: cover;
|
|
background-position: center;
|
|
}
|
|
|
|
/* Fit/Contain - shows entire image maintaining aspect ratio */
|
|
#bg1.contain {
|
|
background-size: contain;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
/* Stretch - stretches to fill entire space */
|
|
#bg1.stretch {
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
/* Center - centers without scaling */
|
|
#bg1.center {
|
|
background-size: auto;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
/* This is the main flex container for the entire drawer */
|
|
.drawer-content.openDrawer.bg-drawer-layout {
|
|
display: flex;
|
|
}
|
|
|
|
.bg-drawer-layout {
|
|
flex-direction: column;
|
|
padding: 0;
|
|
}
|
|
|
|
#bg-header-fixed {
|
|
flex-shrink: 0;
|
|
padding: 5px;
|
|
background-color: var(--SmartThemeBlurTintColor);
|
|
border-bottom: 1px solid var(--SmartThemeBorderColor);
|
|
width: 100%;
|
|
}
|
|
|
|
.bg-header-row-1,
|
|
.bg-header-row-2 {
|
|
display: flex;
|
|
gap: 5px;
|
|
width: 100%;
|
|
align-items: baseline;
|
|
}
|
|
|
|
/* Control buttons in header */
|
|
.heading-container-with-controls {
|
|
position: relative;
|
|
}
|
|
|
|
.heading-container-with-controls .heading-text {
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.heading-container-with-controls .heading-controls {
|
|
position: absolute;
|
|
right: 5px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
display: flex;
|
|
gap: 5px;
|
|
}
|
|
|
|
#bg_menu_content,
|
|
#bg_custom_content {
|
|
display: grid;
|
|
gap: 5px;
|
|
width: 100%;
|
|
grid-template-columns: repeat(var(--bg-thumb-columns, 5), 1fr);
|
|
}
|
|
|
|
#bg-filter {
|
|
font-size: calc(var(--mainFontSize) * 0.95);
|
|
}
|
|
|
|
#bg-sort {
|
|
width: auto;
|
|
max-width: 6em;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Thumbnails */
|
|
.bg_example:hover .BGSampleTitle {
|
|
opacity: 1;
|
|
}
|
|
|
|
.bg_example .mobile-only-menu-toggle,
|
|
.bg_folder_tile .mobile-only-menu-toggle {
|
|
display: none;
|
|
}
|
|
|
|
.bg_example {
|
|
cursor: pointer;
|
|
box-shadow: 0 0 7px var(--black50a);
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-radius: 8px;
|
|
border: 0px solid transparent;
|
|
outline: 2px solid var(--SmartThemeBorderColor);
|
|
outline-offset: -1px;
|
|
|
|
height: auto;
|
|
aspect-ratio: 16 / 9;
|
|
}
|
|
|
|
.bg_example:focus-visible {
|
|
outline-offset: inherit;
|
|
outline-color: var(--interactable-outline-color);
|
|
}
|
|
|
|
.bg_example.locked-background {
|
|
outline: 2px solid var(--golden);
|
|
outline-offset: 0;
|
|
}
|
|
|
|
.bg_example.locked-background::after,
|
|
.bg_example.selected-background::before,
|
|
#Backgrounds.bg-selection-mode #bg_menu_content .bg_example.folder-group-selected::before {
|
|
font-family: 'Font Awesome 6 Free';
|
|
font-weight: 900;
|
|
position: absolute;
|
|
z-index: 4;
|
|
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.8));
|
|
pointer-events: none;
|
|
}
|
|
|
|
.bg_example.selected-background::before,
|
|
#Backgrounds.bg-selection-mode #bg_menu_content .bg_example.folder-group-selected::before {
|
|
content: '\f00c';
|
|
top: 5px;
|
|
color: var(--white100);
|
|
font-size: calc(var(--mainFontSize) * 0.9);
|
|
}
|
|
|
|
.bg_example.locked-background::after {
|
|
content: '\f023';
|
|
bottom: 5px;
|
|
right: 5px;
|
|
color: var(--golden);
|
|
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
|
|
font-size: calc(var(--mainFontSize) * 0.8);
|
|
}
|
|
|
|
.bg_example:not(.locked-background) .jg-unlock,
|
|
.bg_example.locked-background .jg-lock {
|
|
display: none;
|
|
}
|
|
|
|
.bg_example.selected-background {
|
|
outline: 2px solid white;
|
|
outline-offset: 0;
|
|
}
|
|
|
|
.bg_example.selected-background::before {
|
|
left: 5px;
|
|
}
|
|
|
|
#bg_selection_mode_button.active {
|
|
color: var(--golden);
|
|
}
|
|
|
|
#bg_group_select_count {
|
|
font-weight: 700;
|
|
}
|
|
|
|
#Backgrounds.bg-selection-mode #bg_menu_content .bg_example .jg-menu {
|
|
display: none;
|
|
}
|
|
|
|
#Backgrounds.bg-selection-mode #bg_menu_content .bg_example.folder-group-selected {
|
|
outline: 2px solid var(--interactable-outline-color);
|
|
outline-offset: 0;
|
|
}
|
|
|
|
#Backgrounds.bg-selection-mode #bg_menu_content .bg_example.folder-group-selected::before {
|
|
right: 5px;
|
|
}
|
|
|
|
.bg_example .jg-menu {
|
|
display: flex;
|
|
position: absolute;
|
|
top: 2px;
|
|
right: 2px;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
border-radius: 5px;
|
|
padding: 3px 3px;
|
|
z-index: 3;
|
|
backdrop-filter: blur(4px);
|
|
border: 1px solid var(--SmartThemeBorderColor);
|
|
justify-items: center;
|
|
align-items: center;
|
|
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transform: scale(0.9);
|
|
transform-origin: center;
|
|
transition: opacity var(--animation-duration) ease-out, visibility var(--animation-duration) ease-out, transform var(--animation-duration) ease-out;
|
|
}
|
|
|
|
.bg_example:hover .jg-menu,
|
|
.bg_example:focus-within .jg-menu {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transform: scale(1);
|
|
}
|
|
|
|
.bg_example .jg-button {
|
|
display: flex;
|
|
width: 24px;
|
|
height: 24px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
padding: 5px;
|
|
font-size: 1.1em;
|
|
border-radius: 5px;
|
|
transition: background-color var(--animation-duration) ease;
|
|
}
|
|
|
|
.bg_example .jg-button:hover {
|
|
background-color: rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
/* Scroll-to-Top Button */
|
|
#bg-scroll-top {
|
|
position: absolute;
|
|
bottom: 20px;
|
|
right: 20px;
|
|
width: 42px;
|
|
height: 42px;
|
|
background: var(--SmartThemeBlurTintColor);
|
|
color: var(--SmartThemeBodyColor);
|
|
border: 1px solid var(--SmartThemeBorderColor);
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
z-index: 10;
|
|
font-size: 18px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
opacity: 0;
|
|
transition: opacity var(--animation-duration) ease;
|
|
pointer-events: none;
|
|
}
|
|
|
|
#bg-scroll-top.visible {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
#bg-scroll-top:hover {
|
|
filter: brightness(150%);
|
|
outline: 1px solid var(--interactable-outline-color);
|
|
}
|
|
|
|
#bg-scroll-top .fa-solid {
|
|
margin: 0;
|
|
padding: 0;
|
|
line-height: 1;
|
|
}
|
|
|
|
.thumbnail-clipper {
|
|
position: absolute;
|
|
top: -2px;
|
|
left: -2px;
|
|
right: -2px;
|
|
bottom: -2px;
|
|
overflow: hidden;
|
|
border-radius: inherit;
|
|
background-size: cover;
|
|
background-position: center;
|
|
}
|
|
|
|
.bg_example:not([custom="true"]) .jg-copy,
|
|
.bg_example[custom="true"] .jg-edit {
|
|
display: none;
|
|
}
|
|
|
|
/* Thumbnail Title */
|
|
.bg_example .BGSampleTitle {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
|
|
color: var(--SmartThemeBodyColor);
|
|
font-size: 0.9em;
|
|
font-weight: 600;
|
|
padding: 0px 6px 2px;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
opacity: 0;
|
|
transition: opacity var(--animation-duration) ease-in-out;
|
|
pointer-events: none;
|
|
border-radius: 0 0 8px 8px;
|
|
}
|
|
|
|
.bg_example:hover .BGSampleTitle,
|
|
.bg_example:focus-within .BGSampleTitle {
|
|
opacity: 1;
|
|
}
|
|
|
|
#bg_tabs {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
height: 100%;
|
|
overflow-y: hidden;
|
|
gap: 5px;
|
|
}
|
|
|
|
#bg_tabs .bg_tabs_list {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 5px;
|
|
background: none;
|
|
border: none;
|
|
margin: 5px 0;
|
|
padding: 0;
|
|
padding-right: 4em;
|
|
position: relative;
|
|
}
|
|
|
|
#bg_tabs .bg_tabs_list .bg_tab_button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
min-width: 8em;
|
|
list-style: none;
|
|
color: var(--SmartThemeBodyColor);
|
|
background-color: var(--SmartThemeBlurTintColor);
|
|
border: 1px solid var(--SmartThemeBorderColor);
|
|
border-radius: 5px;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
font-weight: 600;
|
|
margin: 0 !important;
|
|
filter: none;
|
|
opacity: 0.8;
|
|
transition: opacity var(--animation-duration-2x);
|
|
}
|
|
|
|
#bg_tabs .bg_tabs_list .bg_tab_button:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
#bg_tabs .bg_tabs_list .bg_tab_button.ui-tabs-active {
|
|
background-color: color-mix(in srgb, var(--SmartThemeQuoteColor) 33%, var(--SmartThemeBlurTintColor) 66%);
|
|
}
|
|
|
|
#bg_tabs.ui-widget-content {
|
|
border: none !important;
|
|
}
|
|
|
|
#bg_tabs .bg_tabs_list::before,
|
|
#bg_tabs .bg_tabs_list::after {
|
|
display: none;
|
|
}
|
|
|
|
#bg_tabs .bg_tabs_list .bg_tab_button a {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 3px 5px;
|
|
cursor: pointer;
|
|
color: var(--SmartThemeBodyColor);
|
|
}
|
|
|
|
#bg_tabs .bg_tab_panel {
|
|
flex-grow: 1;
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
padding: 10px;
|
|
}
|
|
|
|
#bg_custom_content:not(:empty)~#bg_chat_hint {
|
|
display: none;
|
|
}
|
|
|
|
.bg_folder_grid.bg_list {
|
|
display: grid;
|
|
gap: 5px;
|
|
width: 100%;
|
|
grid-template-columns: repeat(calc(var(--bg-thumb-columns, 5) + 2), 1fr);
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.bg_folder_grid:empty {
|
|
display: none;
|
|
}
|
|
|
|
.bg_folder_tile {
|
|
cursor: pointer;
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-radius: 8px;
|
|
height: auto;
|
|
aspect-ratio: 1 / 1;
|
|
outline: 2px solid var(--SmartThemeBorderColor);
|
|
outline-offset: -1px;
|
|
box-shadow: 0 0 7px var(--black50a);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: var(--SmartThemeBlurTintColor);
|
|
transition: filter var(--animation-duration) ease;
|
|
}
|
|
|
|
.bg_folder_tile:hover {
|
|
filter: brightness(1.1);
|
|
}
|
|
|
|
.bg_folder_tile_cover {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-size: cover;
|
|
background-position: center;
|
|
border-radius: inherit;
|
|
}
|
|
|
|
.bg_folder_tile_overlay {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
|
|
color: var(--SmartThemeBodyColor);
|
|
padding: 6px 8px 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
font-size: 0.85em;
|
|
font-weight: 600;
|
|
pointer-events: none;
|
|
border-radius: 0 0 8px 8px;
|
|
}
|
|
|
|
.bg_folder_tile_overlay i {
|
|
font-size: 0.9em;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.bg_folder_tile_name {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
/* Folder tile action menu */
|
|
.bg_folder_tile .bg_folder_tile_menu {
|
|
display: flex;
|
|
position: absolute;
|
|
top: 2px;
|
|
right: 2px;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
border-radius: 5px;
|
|
padding: 3px;
|
|
z-index: 3;
|
|
backdrop-filter: blur(4px);
|
|
border: 1px solid var(--SmartThemeBorderColor);
|
|
align-items: center;
|
|
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transform: scale(0.9);
|
|
transform-origin: center;
|
|
transition: opacity var(--animation-duration) ease-out, visibility var(--animation-duration) ease-out, transform var(--animation-duration) ease-out;
|
|
}
|
|
|
|
.bg_folder_tile:hover .bg_folder_tile_menu,
|
|
.bg_folder_tile:focus-within .bg_folder_tile_menu {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transform: scale(1);
|
|
}
|
|
|
|
.bg_folder_tile .jg-button {
|
|
display: flex;
|
|
width: 24px;
|
|
height: 24px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
padding: 5px;
|
|
font-size: 1.1em;
|
|
border-radius: 5px;
|
|
transition: background-color var(--animation-duration) ease;
|
|
}
|
|
|
|
.bg_folder_tile .jg-button:hover {
|
|
background-color: rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
/* New Folder placeholder tile */
|
|
.bg_new_folder_tile {
|
|
border: 2px dashed var(--SmartThemeBorderColor);
|
|
outline: none;
|
|
color: var(--SmartThemeBodyColor);
|
|
opacity: 0.6;
|
|
gap: 6px;
|
|
font-size: 0.85em;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.bg_new_folder_tile:hover {
|
|
opacity: 1;
|
|
transform: scale(1.03);
|
|
}
|
|
|
|
/* Breadcrumb bar */
|
|
.bg_folder_breadcrumb {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 5px 0;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.bg_current_folder_name {
|
|
font-weight: 600;
|
|
font-size: 1em;
|
|
color: var(--SmartThemeBodyColor);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
#Backgrounds:not(.in-folder-view) .jg-set-cover {
|
|
display: none !important;
|
|
}
|
|
|
|
#Backgrounds.in-folder-view .jg-set-cover {
|
|
display: flex !important;
|
|
}
|
|
|
|
/* Hide folder actions on custom (chat-specific) backgrounds */
|
|
.bg_example[custom="true"] .jg-folder,
|
|
.bg_example[custom="true"] .jg-set-cover {
|
|
display: none !important;
|
|
}
|