opensource/Cli-Proxy-API-Management-Center
3
0
Fork 0
mirror of https://github.com/router-for-me/Cli-Proxy-API-Management-Center.git synced 2026-09-24 16:04:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

style(sidebar-toggle): update positioning, size, and styles for improved usability

Browse Source
This commit is contained in:
LTbinglingfeng
2026-05-26 02:00:29 +08:00
parent 4d6a5da5c7
commit 432438e99b
1 changed files with 22 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/layout.scss
+22 -19
View File
@@ -83,27 +83,25 @@
border: 0;
.sidebar-toggle-floating {
position: absolute;
top: var(--shell-gutter);
left: calc(var(--sidebar-active-width) + 16px);
width: 44px;
height: 44px;
position: fixed;
top: 50%;
left: calc(var(--sidebar-active-width) - 12px);
width: 24px;
height: 52px;
padding: 0;
border: 1px solid color-mix(in srgb, var(--border-color) 68%, transparent);
border-radius: 12px;
background: color-mix(in srgb, var(--bg-primary) 70%, transparent);
color: var(--text-secondary);
border: 1px solid color-mix(in srgb, var(--border-color) 78%, transparent);
border-radius: 14px;
background: var(--bg-primary);
color: color-mix(in srgb, var(--text-secondary) 88%, transparent);
box-shadow:
0 16px 38px rgb(0 0 0 / 0.16),
inset 0 1px 0 rgb(255 255 255 / 0.04);
--glass-blur: 14px;
backdrop-filter: var(--glass-backdrop-filter);
-webkit-backdrop-filter: var(--glass-backdrop-filter);
4px 0 14px rgb(0 0 0 / 0.18),
inset 0 1px 0 rgb(255 255 255 / 0.03);
cursor: pointer;
pointer-events: auto;
display: inline-flex;
align-items: center;
justify-content: center;
transform: translateY(-50%);
transition:
background $transition-fast,
border-color $transition-fast,
@@ -111,22 +109,27 @@
transform $transition-fast,
left $transition-normal;
svg {
width: 14px;
height: 14px;
}
&:hover {
background: color-mix(in srgb, var(--bg-primary) 86%, transparent);
border-color: color-mix(in srgb, var(--border-hover) 80%, transparent);
background: color-mix(in srgb, var(--bg-primary) 90%, var(--text-primary) 10%);
border-color: color-mix(in srgb, var(--border-hover) 86%, transparent);
color: var(--text-primary);
transform: translateY(-1px);
transform: translateY(-50%) translateX(2px);
}
&:active {
transform: translateY(0);
transform: translateY(-50%) translateX(0);
}
&:focus-visible {
outline: none;
box-shadow:
0 0 0 2px color-mix(in srgb, var(--primary-color) 24%, transparent),
0 16px 38px rgb(0 0 0 / 0.16);
4px 0 14px rgb(0 0 0 / 0.18);
}
}