mirror of
https://github.com/BetterSEQTA/BetterSEQTA-Plus.git
synced 2026-08-28 17:21:05 +00:00
feat: sidebar customisaitons and settings fixes
This commit is contained in:
+42
-13
@@ -13,6 +13,7 @@
|
||||
}
|
||||
|
||||
@include meta.load-css("injected/sidebar-animation.scss");
|
||||
@include meta.load-css("injected/sidebar-styles.scss");
|
||||
@include meta.load-css("injected/theme.scss");
|
||||
@include meta.load-css("injected/transparency.scss");
|
||||
|
||||
@@ -565,21 +566,26 @@ ul.magicDelete > li.deleting {
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
/* Edit rows should match normal custom-sidebar item size (not shrunk). */
|
||||
#menu.bsplus-sidebar-edit-mode > #bsplus-sidebar-root > li.item.draggable,
|
||||
#menu.bsplus-sidebar-edit-mode .item.draggable {
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
width: calc(100% - 12px) !important;
|
||||
align-items: center !important;
|
||||
width: auto !important;
|
||||
max-width: none !important;
|
||||
box-sizing: border-box !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 6px 8px !important;
|
||||
}
|
||||
|
||||
#menu.bsplus-sidebar-edit-mode .item.draggable > label:not(.toggle) {
|
||||
flex: 1 1 0 !important;
|
||||
width: 0 !important;
|
||||
flex: 1 1 auto !important;
|
||||
width: auto !important;
|
||||
min-width: 0 !important;
|
||||
max-width: none !important;
|
||||
padding: 12px !important;
|
||||
padding-left: 4px !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
#menu.bsplus-sidebar-edit-mode .item.draggable .label {
|
||||
@@ -587,6 +593,14 @@ ul.magicDelete > li.deleting {
|
||||
overflow: hidden !important;
|
||||
text-overflow: ellipsis !important;
|
||||
overflow-wrap: normal !important;
|
||||
font-size: inherit !important;
|
||||
line-height: 1.2 !important;
|
||||
}
|
||||
|
||||
#menu.bsplus-sidebar-edit-mode .item.draggable > label:not(.toggle) > svg {
|
||||
width: 24px !important;
|
||||
height: 24px !important;
|
||||
flex-shrink: 0 !important;
|
||||
}
|
||||
|
||||
#menu.bsplus-sidebar-edit-mode .item.draggable > .toggle,
|
||||
@@ -594,7 +608,7 @@ ul.magicDelete > li.deleting {
|
||||
pointer-events: auto !important;
|
||||
flex: 0 0 auto !important;
|
||||
width: auto !important;
|
||||
margin: 0 10px 0 0 !important;
|
||||
margin: 0 12px 0 0 !important;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
@@ -631,7 +645,7 @@ ul.magicDelete > li.deleting {
|
||||
}
|
||||
|
||||
#menu {
|
||||
width: 270px;
|
||||
width: var(--bsplus-sidebar-width, 270px);
|
||||
z-index: 19;
|
||||
background: var(--better-main) !important;
|
||||
color: var(--text-color);
|
||||
@@ -907,7 +921,9 @@ body.icon-only-sidebar:not(:has(#menu li.hasChildren.active)) {
|
||||
margin-bottom: 8px !important;
|
||||
width: 85% !important;
|
||||
}
|
||||
.item.draggable {
|
||||
/* Keep width scoped to #menu — fallback drag clones append to body, and
|
||||
width:100% there stretches across the viewport. */
|
||||
#menu .item.draggable {
|
||||
width: 100% !important;
|
||||
cursor: grab;
|
||||
|
||||
@@ -921,6 +937,19 @@ body.icon-only-sidebar:not(:has(#menu li.hasChildren.active)) {
|
||||
}
|
||||
}
|
||||
|
||||
/* Sortable forceFallback clone (on body) — match source row size. */
|
||||
body > .bsplus-sortable-drag,
|
||||
body > .sortable-fallback.bsplus-sortable-drag,
|
||||
.bsplus-sortable-drag.sortable-fallback {
|
||||
width: var(--bsplus-drag-width, 240px) !important;
|
||||
max-width: var(--bsplus-drag-width, 240px) !important;
|
||||
min-width: 0 !important;
|
||||
box-sizing: border-box !important;
|
||||
margin: 0 !important;
|
||||
pointer-events: none !important;
|
||||
list-style: none !important;
|
||||
}
|
||||
|
||||
#menu {
|
||||
li.active > .sub > ul > .item:not(.hasChildren) {
|
||||
position: relative;
|
||||
@@ -1340,7 +1369,7 @@ html.transparencyEffects
|
||||
|
||||
#content {
|
||||
transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s ease;
|
||||
left: 270px;
|
||||
left: var(--bsplus-sidebar-width, 270px);
|
||||
background: unset;
|
||||
}
|
||||
|
||||
@@ -1368,8 +1397,8 @@ html.transparencyEffects
|
||||
display: none;
|
||||
}
|
||||
#menu {
|
||||
-webkit-transform: translatex(-270px);
|
||||
transform: translatex(-270px);
|
||||
-webkit-transform: translatex(calc(-1 * var(--bsplus-sidebar-width, 270px)));
|
||||
transform: translatex(calc(-1 * var(--bsplus-sidebar-width, 270px)));
|
||||
}
|
||||
.menuShown #menu {
|
||||
-webkit-transform: translatex(0);
|
||||
@@ -1379,8 +1408,8 @@ html.transparencyEffects
|
||||
left: 0;
|
||||
}
|
||||
.menuShown #content {
|
||||
-webkit-transform: translatex(270px);
|
||||
transform: translatex(270px);
|
||||
-webkit-transform: translatex(var(--bsplus-sidebar-width, 270px));
|
||||
transform: translatex(var(--bsplus-sidebar-width, 270px));
|
||||
}
|
||||
|
||||
body.icon-only-sidebar:not(:has(#menu li.hasChildren.active)) {
|
||||
|
||||
@@ -0,0 +1,220 @@
|
||||
/* Custom sidebar style presets + Look (density / radius / indicator). */
|
||||
|
||||
$sidebar-motion: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
@mixin accent-bar($shadow: 0.55) {
|
||||
content: "" !important;
|
||||
position: absolute !important;
|
||||
left: 0 !important;
|
||||
top: 10px !important;
|
||||
bottom: 10px !important;
|
||||
width: 4px !important;
|
||||
border-radius: 2px !important;
|
||||
background: #fff !important;
|
||||
box-shadow: 0 0 10px rgba(255, 255, 255, $shadow) !important;
|
||||
pointer-events: none !important;
|
||||
z-index: 3 !important;
|
||||
opacity: 1 !important;
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
#menu.bsplus-custom-sidebar {
|
||||
$item: "> #bsplus-sidebar-root > li.item:not(.bsplus-sidebar-edit-header):not(.bsplus-sidebar-edit-actions)";
|
||||
$label: "> #bsplus-sidebar-root > li.item > label:not(.toggle)";
|
||||
$active: "> #bsplus-sidebar-root > li.item.active:not(.hasChildren)";
|
||||
|
||||
/* Look: base radius (pill / sharp / strip override).
|
||||
Density/radius animate with the same easing as sidebar width. */
|
||||
#{$item} {
|
||||
border-radius: var(--bsplus-sidebar-radius, 12px) !important;
|
||||
transition:
|
||||
padding $sidebar-motion,
|
||||
margin $sidebar-motion,
|
||||
border-radius $sidebar-motion,
|
||||
background-color 0.2s ease,
|
||||
box-shadow 0.2s ease,
|
||||
opacity 0.2s ease;
|
||||
}
|
||||
|
||||
#{$label} {
|
||||
transition:
|
||||
font-size $sidebar-motion,
|
||||
line-height $sidebar-motion,
|
||||
padding $sidebar-motion,
|
||||
margin $sidebar-motion;
|
||||
|
||||
> svg {
|
||||
transition:
|
||||
width $sidebar-motion,
|
||||
height $sidebar-motion,
|
||||
margin $sidebar-motion;
|
||||
}
|
||||
}
|
||||
|
||||
/* —— Style presets —— */
|
||||
&.bsplus-sidebar-style-soft {
|
||||
#{$item} {
|
||||
margin: 0 8px 10px !important;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
#{$active} {
|
||||
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
|
||||
background: rgba(0, 0, 0, 0.38) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.bsplus-sidebar-style-pill {
|
||||
#{$item} {
|
||||
margin: 0 10px 8px !important;
|
||||
border-radius: 999px !important;
|
||||
}
|
||||
#{$active} {
|
||||
background: rgba(0, 0, 0, 0.4) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.bsplus-sidebar-style-glass {
|
||||
#{$item} {
|
||||
margin: 0 8px 8px !important;
|
||||
background: rgba(255, 255, 255, 0.1) !important;
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
|
||||
}
|
||||
#{$active} {
|
||||
background: rgba(255, 255, 255, 0.2) !important;
|
||||
box-shadow:
|
||||
inset 0 0 0 1px rgba(255, 255, 255, 0.28),
|
||||
0 8px 20px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
&.bsplus-sidebar-style-sharp {
|
||||
#{$item},
|
||||
#{$active} {
|
||||
border-radius: 4px !important;
|
||||
}
|
||||
#{$item} {
|
||||
margin: 0 4px 4px !important;
|
||||
}
|
||||
#{$active} {
|
||||
background: rgba(0, 0, 0, 0.42) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.bsplus-sidebar-style-strip {
|
||||
#{$item} {
|
||||
margin: 0 0 2px !important;
|
||||
border-radius: 0 !important;
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
#{$active} {
|
||||
position: relative !important;
|
||||
background: rgba(255, 255, 255, 0.12) !important;
|
||||
box-shadow: none !important;
|
||||
&::after {
|
||||
@include accent-bar(0.55);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.bsplus-sidebar-style-neon #{$active} {
|
||||
background: rgba(255, 255, 255, 0.1) !important;
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(255, 255, 255, 0.55),
|
||||
0 0 14px rgba(255, 255, 255, 0.4),
|
||||
0 0 28px rgba(255, 255, 255, 0.22) !important;
|
||||
}
|
||||
|
||||
&.bsplus-sidebar-style-neon #{$item} {
|
||||
margin: 0 8px 8px !important;
|
||||
}
|
||||
|
||||
/* —— Density (comfortable = no class / no overrides) —— */
|
||||
&.bsplus-sidebar-density-compact {
|
||||
#{$item},
|
||||
#{$active} {
|
||||
padding: 6px 8px !important;
|
||||
min-height: 0 !important;
|
||||
}
|
||||
#{$item} {
|
||||
margin: 0 6px 4px !important;
|
||||
height: auto !important;
|
||||
}
|
||||
#{$label} {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
font-size: 13px !important;
|
||||
line-height: 1.2 !important;
|
||||
min-height: 0 !important;
|
||||
height: auto !important;
|
||||
white-space: nowrap !important;
|
||||
|
||||
> svg {
|
||||
width: 20px !important;
|
||||
height: 20px !important;
|
||||
margin: 0 8px 0 2px !important;
|
||||
flex-shrink: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.bsplus-sidebar-density-large {
|
||||
#{$item} {
|
||||
margin: 0 8px 10px !important;
|
||||
padding: 14px 12px !important;
|
||||
}
|
||||
#{$label} {
|
||||
padding: 0 !important;
|
||||
font-size: 17px !important;
|
||||
line-height: 1.25 !important;
|
||||
|
||||
> svg {
|
||||
width: 30px !important;
|
||||
height: 30px !important;
|
||||
margin: 0 10px 0 4px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* —— Active indicator (fill = default, no class) —— */
|
||||
&.bsplus-sidebar-indicator-bar:not(.bsplus-sidebar-style-strip) #{$active} {
|
||||
position: relative !important;
|
||||
background: rgba(255, 255, 255, 0.1) !important;
|
||||
box-shadow: none !important;
|
||||
&::after {
|
||||
@include accent-bar(0.45);
|
||||
}
|
||||
}
|
||||
|
||||
&.bsplus-sidebar-indicator-outline #{$active} {
|
||||
background: transparent !important;
|
||||
box-shadow:
|
||||
inset 0 0 0 2px rgba(255, 255, 255, 0.55),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.12) !important;
|
||||
}
|
||||
|
||||
&.bsplus-sidebar-indicator-underline:not(.bsplus-sidebar-style-strip) #{$active} {
|
||||
position: relative !important;
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
&::after {
|
||||
content: "" !important;
|
||||
position: absolute !important;
|
||||
left: 14px !important;
|
||||
right: 14px !important;
|
||||
bottom: 6px !important;
|
||||
top: auto !important;
|
||||
width: auto !important;
|
||||
height: 3px !important;
|
||||
border-radius: 999px !important;
|
||||
background: #fff !important;
|
||||
box-shadow: 0 0 8px rgba(255, 255, 255, 0.4) !important;
|
||||
pointer-events: none !important;
|
||||
z-index: 3 !important;
|
||||
opacity: 1 !important;
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -51,7 +51,10 @@ html.transparencyEffects {
|
||||
backdrop-filter: blur(10px) !important;
|
||||
}
|
||||
|
||||
#menu,
|
||||
#menu {
|
||||
backdrop-filter: blur(var(--bsplus-sidebar-blur, 50px));
|
||||
}
|
||||
|
||||
.kanban-column,
|
||||
.whatsnewContainer,
|
||||
[class*="Message__Message___"] {
|
||||
|
||||
Reference in New Issue
Block a user