Update BG header layout (#4519)
* init * cleanup * logic changes and some styling * set z index to a reasonable value * remove pointless animation * cleanup * restore animation * checkmark icon on selected background * drop shadow * tweak size slightly * Apply suggestion from @Cohee1207 condense Co-authored-by: Cohee <18619528+Cohee1207@users.noreply.github.com> * more of the above * make lock indicator use a class like the selection indicator * make backgroundHighlight run on page load * cleanup * html restructure and display: contents. only issue left is slightly wonky desktop buttons order * yellow lock icon for consistancy * Update layout * Restore fitting logic * Styles clean-up * Remove duplicate class * Restore button titles * Fix return types of slash commands * Update locked background on select if lock status is on * Force header to 100% width * Clean-up styles * Fix locked highlight on custom backgrounds * Revert global lock button --------- Co-authored-by: Cohee <18619528+Cohee1207@users.noreply.github.com>
This commit is contained in:
L
+60
-50
@@ -1,6 +1,5 @@
|
||||
/* Main Page Backgrounds */
|
||||
#bg1,
|
||||
#bg_custom {
|
||||
#bg1 {
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
@@ -8,70 +7,46 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: background-image var(--animation-duration-3x) ease-in-out;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* Fitting options */
|
||||
#background_fitting {
|
||||
max-width: 6em;
|
||||
max-width: 8em;
|
||||
}
|
||||
|
||||
/* Fill/Cover - scales to fill width while maintaining aspect ratio */
|
||||
#bg1.cover,
|
||||
#bg_custom.cover {
|
||||
#bg1.cover {
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
/* Fit/Contain - shows entire image maintaining aspect ratio */
|
||||
#bg1.contain,
|
||||
#bg_custom.contain {
|
||||
#bg1.contain {
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
/* Stretch - stretches to fill entire space */
|
||||
#bg1.stretch,
|
||||
#bg_custom.stretch {
|
||||
#bg1.stretch {
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
/* Center - centers without scaling */
|
||||
#bg1.center,
|
||||
#bg_custom.center {
|
||||
#bg1.center {
|
||||
background-size: auto;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
body.reduced-motion #bg1,
|
||||
body.reduced-motion #bg_custom {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
#bg1 {
|
||||
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=');
|
||||
z-index: -3;
|
||||
}
|
||||
|
||||
#bg_custom {
|
||||
background-image: none;
|
||||
z-index: -2;
|
||||
}
|
||||
|
||||
.bg_example.flex-container.locked:not(:focus-visible) {
|
||||
outline-color: var(--golden);
|
||||
}
|
||||
|
||||
/* This is the main flex container for the entire drawer */
|
||||
#Backgrounds.drawer-content.openDrawer.bg-drawer-layout {
|
||||
.drawer-content.openDrawer.bg-drawer-layout {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.bg-drawer-layout {
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
height: calc-size(auto, size);
|
||||
overflow: hidden;
|
||||
width: var(--sheldWidth);
|
||||
max-width: var(--sheldWidth);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@@ -80,12 +55,14 @@ body.reduced-motion #bg_custom {
|
||||
padding: 5px;
|
||||
background-color: var(--SmartThemeBlurTintColor);
|
||||
border-bottom: 1px solid var(--SmartThemeBorderColor);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#bg-header-fixed>.flex-container {
|
||||
.bg-header-row-1,
|
||||
.bg-header-row-2 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Control buttons in header */
|
||||
@@ -150,6 +127,51 @@ body.reduced-motion #bg_custom {
|
||||
|
||||
.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 {
|
||||
content: '\f023';
|
||||
font-family: 'Font Awesome 6 Free';
|
||||
font-weight: 900;
|
||||
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
right: 5px;
|
||||
z-index: 4;
|
||||
color: var(--golden);
|
||||
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
|
||||
font-size: calc(var(--mainFontSize) * 0.8);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.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 {
|
||||
content: '\f00c';
|
||||
font-family: 'Font Awesome 6 Free';
|
||||
font-weight: 900;
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
z-index: 4;
|
||||
color: var(--white100);
|
||||
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.8));
|
||||
font-size: calc(var(--mainFontSize) * 0.9);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.bg_example .jg-menu {
|
||||
@@ -197,18 +219,6 @@ body.reduced-motion #bg_custom {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.bg_example .jg-unlock {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.bg_example.locked .jg-lock {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.bg_example.locked .jg-unlock {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.thumbnail-clipper {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
|
||||
@@ -88,48 +88,8 @@
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
#bg-header-controls {
|
||||
flex-wrap: wrap;
|
||||
row-gap: 10px;
|
||||
}
|
||||
|
||||
#bg-header-fixed>.flex-container {
|
||||
flex-wrap: wrap;
|
||||
row-gap: 0px;
|
||||
}
|
||||
|
||||
#Backgrounds:not(.selection-mode-active) #bg-header-fixed>.flex-container::after {
|
||||
content: '';
|
||||
order: 1;
|
||||
flex-basis: 100%;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/* --- Row 1 Item --- */
|
||||
#bg-header-fixed #bg-header-title {
|
||||
order: 1;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
#bg-header-fixed #background_fitting,
|
||||
#bg-header-fixed #auto_background {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
/* --- Row 2 Item --- */
|
||||
#bg-header-fixed #bg-filter {
|
||||
order: 2;
|
||||
flex-grow: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* --- Row 3 Item --- */
|
||||
#bg-header-fixed #add_background_button_top {
|
||||
order: 3;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding-top: 0.5em;
|
||||
padding-bottom: 0.5em;
|
||||
#background_fitting {
|
||||
max-width: 6em;
|
||||
}
|
||||
|
||||
#Backgrounds.drawer-content.openDrawer.bg-drawer-layout {
|
||||
|
||||
Reference in New Issue
Block a user