diff --git a/src/components/sidebar/AppSidebar.vue b/src/components/sidebar/AppSidebar.vue
index ab49038..b74634c 100644
--- a/src/components/sidebar/AppSidebar.vue
+++ b/src/components/sidebar/AppSidebar.vue
@@ -23,8 +23,11 @@ const emit = defineEmits<{
@@ -46,7 +49,6 @@ const emit = defineEmits<{
{{ browser.browserName }}
- {{ browser.dataRoot }}
@@ -66,12 +68,7 @@ const emit = defineEmits<{
Configuration
- Manage custom scan sources and paths
-
-
diff --git a/src/styles/app.css b/src/styles/app.css
index 377dfa0..d94392f 100644
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -16,8 +16,8 @@
.sidebar {
display: flex;
flex-direction: column;
- gap: 12px;
- padding: 20px 16px;
+ gap: 10px;
+ padding: 16px 14px;
min-height: 0;
border: 1px solid var(--panel-border);
border-radius: 22px;
@@ -37,7 +37,7 @@
.sidebar-toolbar {
display: flex;
- align-items: flex-start;
+ align-items: center;
justify-content: space-between;
gap: 12px;
padding: 2px 2px 8px;
@@ -48,18 +48,11 @@
}
.sidebar-toolbar h1 {
- font-size: 1.52rem;
- line-height: 1.02;
+ font-size: 1.34rem;
+ line-height: 1.04;
letter-spacing: -0.04em;
}
-.sidebar-title-group p {
- margin: 6px 0 0;
- color: var(--muted);
- font-size: 0.84rem;
- line-height: 1.35;
-}
-
.state-panel p,
.meta-line,
.profile-email,
@@ -90,22 +83,77 @@
transform: translateY(-1px);
}
+.refresh-icon-button {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 36px;
+ height: 36px;
+ border: 1px solid rgba(148, 163, 184, 0.24);
+ border-radius: 12px;
+ background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(241, 245, 249, 0.92));
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
+ cursor: pointer;
+ transition:
+ transform 160ms ease,
+ border-color 160ms ease,
+ box-shadow 160ms ease;
+}
+
+.refresh-icon-button:hover {
+ transform: translateY(-1px);
+ border-color: rgba(100, 116, 139, 0.36);
+}
+
+.refresh-icon {
+ width: 13px;
+ height: 13px;
+ border: 1.8px solid #334155;
+ border-right-color: transparent;
+ border-radius: 50%;
+ position: relative;
+}
+
+.refresh-icon::after {
+ content: "";
+ position: absolute;
+ top: -2px;
+ right: -3px;
+ width: 6px;
+ height: 6px;
+ border-top: 1.8px solid #334155;
+ border-right: 1.8px solid #334155;
+ transform: rotate(18deg);
+}
+
+.sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border: 0;
+}
+
.browser-nav {
display: flex;
flex-direction: column;
- gap: 8px;
+ gap: 6px;
min-height: 0;
overflow: auto;
- padding-right: 2px;
+ padding: 2px 2px 0 0;
}
.browser-nav-item {
display: flex;
align-items: center;
- gap: 14px;
+ gap: 12px;
width: 100%;
- padding: 11px;
- border-radius: 16px;
+ padding: 9px 10px;
+ border-radius: 14px;
text-align: left;
cursor: pointer;
background: rgba(255, 255, 255, 0.54);
@@ -153,12 +201,12 @@
}
.browser-nav-icon {
- width: 42px;
- height: 42px;
+ width: 34px;
+ height: 34px;
border-radius: 0;
color: #fff;
font-weight: 700;
- font-size: 0.86rem;
+ font-size: 0.78rem;
letter-spacing: 0.08em;
background: transparent;
overflow: visible;
@@ -173,8 +221,8 @@
}
.browser-nav-icon img {
- max-width: 38px;
- max-height: 38px;
+ max-width: 30px;
+ max-height: 30px;
}
.config-icon img {
@@ -197,6 +245,8 @@
.browser-nav-body strong {
display: block;
color: var(--text);
+ font-size: 0.94rem;
+ line-height: 1.25;
}
.browser-nav-body span {
@@ -837,11 +887,6 @@
padding: 28px;
}
-.sidebar-refresh {
- margin-top: 10px;
- align-self: stretch;
-}
-
.browser-nav,
.content-scroll-area {
scrollbar-width: thin;