fix: keep sidebar icons stable during collapse

This commit is contained in:
WonderAliceUwU committed 2026-09-07 18:16:43 +02:00
1 parent 0d86c6e91c
commit a6b9ed197a
1 file changed
+12 -57
+12 -57
View File
@@ -196,6 +196,8 @@ img {
.sidebar-profile-copy,
.sidebar-link > span:last-child,
.sidebar-settings > span:last-child {
position: absolute;
left: 3.75rem;
white-space: nowrap;
opacity: 0;
max-width: 0;
@@ -215,16 +217,8 @@ img {
.omniarr-sidebar:hover .sidebar-profile,
.omniarr-sidebar:hover .sidebar-link,
.omniarr-sidebar:hover .sidebar-settings {
justify-content: flex-start;
}
.omniarr-sidebar:hover .sidebar-profile,
.omniarr-sidebar:hover .sidebar-link,
.omniarr-sidebar:hover .sidebar-settings {
width: 100%;
min-width: 0;
max-width: none;
padding: 0.75rem;
justify-content: center;
overflow: visible;
}
.omniarr-sidebar:not(:hover) .sidebar-profile,
@@ -334,6 +328,8 @@ img {
}
.sidebar-disk-copy {
position: absolute;
left: 3.75rem;
display: grid;
gap: 0.15rem;
min-width: 0;
@@ -361,11 +357,8 @@ img {
}
.omniarr-sidebar:hover .sidebar-disk {
width: 100%;
min-width: 0;
max-width: none;
justify-content: flex-start;
padding: 0.75rem;
justify-content: center;
overflow: visible;
}
.omniarr-sidebar:hover .sidebar-disk-copy {
@@ -411,7 +404,7 @@ img {
}
.omniarr-sidebar:hover .sidebar-settings {
justify-content: flex-start;
justify-content: center;
}
.sidebar-settings-icon {
@@ -509,11 +502,7 @@ img {
.omniarr-sidebar:hover .sidebar-footer > .sidebar-disk,
.omniarr-sidebar:hover .sidebar-footer > .sidebar-settings {
width: 100%;
min-width: 0;
max-width: none;
justify-content: flex-start;
padding: 0.75rem;
justify-content: center;
}
.omniarr-sidebar:not(:hover) .sidebar-footer > .sidebar-disk,
@@ -524,11 +513,6 @@ img {
padding-right: 0;
}
.omniarr-sidebar:not(:hover) .sidebar-link.active {
background: transparent;
box-shadow: none;
}
.content-shell {
height: 100%;
min-width: 0;
@@ -1384,37 +1368,6 @@ img {
box-shadow: -3px 6px 13px rgba(0, 0, 0, 0.2);
}
.omniarr-sidebar:not(:hover) .sidebar-link.active {
width: 2.9rem;
min-width: 2.9rem;
max-width: 2.9rem;
justify-self: center;
align-self: center;
background: transparent;
box-shadow: none;
overflow: visible;
}
.omniarr-sidebar:not(:hover) .sidebar-link.active::before {
content: "";
position: absolute;
inset: 50% auto auto 50%;
width: 2.9rem;
height: 2.9rem;
transform: translate(-50%, -50%);
border-radius: 0.8rem;
background: rgba(255, 255, 255, 0.12);
box-shadow: -2px 4px 10px rgba(0, 0, 0, 0.18);
z-index: 0;
}
.omniarr-sidebar:not(:hover) .sidebar-link.active .sidebar-link-short {
background: rgba(255, 255, 255, 0.18);
box-shadow: -2px 4px 10px rgba(0, 0, 0, 0.24);
position: relative;
z-index: 1;
}
.omniarr-sidebar:not(:hover) .sidebar-settings {
background: transparent;
box-shadow: none;
@@ -4225,6 +4178,7 @@ img {
.omniarr-sidebar:not(:hover) .sidebar-profile-copy,
.omniarr-sidebar:not(:hover) .sidebar-link > span:last-child,
.omniarr-sidebar:not(:hover) .sidebar-settings > span:last-child {
position: static;
width: auto;
opacity: 1;
transform: none;
@@ -4247,6 +4201,7 @@ img {
.sidebar-disk-copy,
.omniarr-sidebar:not(:hover) .sidebar-disk-copy {
position: static;
width: auto;
opacity: 1;
transform: none;