mirror of
https://github.com/WonderAliceUwU/OmniArr.git
synced 2026-11-11 04:01:01 +00:00
fix: keep sidebar icons stable during collapse
This commit is contained in:
1 parent
0d86c6e91c
commit
a6b9ed197a
1 file changed
+12
-57
+12
-57
@@ -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;
|
||||
|
||||
Reference in new issue
Block a user