diff --git a/src/styles.css b/src/styles.css index a02b133..0edd8bf 100644 --- a/src/styles.css +++ b/src/styles.css @@ -45,7 +45,8 @@ button { font: inherit; color: inherit; } .menubar { display: flex; padding: 2px 6px; background: var(--bg); border-bottom: 1px solid var(--border); user-select: none; position: relative; z-index: 40; } .menu { position: relative; } .menu-title { border: 0; background: transparent; padding: 4px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; } -.menu-title:hover, .menu-title.open { background: var(--hover); } +.menu-title:hover { background: var(--hover); } +.menu-title.open { background: var(--accent-weak); } .menu-dropdown { position: absolute; top: 100%; left: 0; min-width: 250px; background: var(--bg-editor); border: 1px solid var(--border); border-radius: 8px; padding: 5px; box-shadow: 0 8px 24px rgba(0,0,0,0.13); } .menu-item { display: flex; align-items: center; width: 100%; border: 0; background: transparent; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 13px; text-align: left; } .menu-item:hover:not(:disabled) { background: var(--accent-weak); } @@ -70,8 +71,8 @@ button { font: inherit; color: inherit; } .context-menu { position: fixed; z-index: 90; background: var(--bg-editor); border: 1px solid var(--border); border-radius: 8px; padding: 5px; box-shadow: 0 8px 24px rgba(0,0,0,0.13); display: flex; flex-direction: column; min-width: 170px; } .context-menu button:disabled { opacity: 0.45; cursor: default; } .context-menu button:disabled:hover { background: transparent; } -.sidebar-collapse { margin-left: auto; background: transparent; border: 0; color: var(--text-dim); cursor: pointer; display: flex; align-items: center; padding: 4px 6px; border-radius: 6px; } -.sidebar-collapse:hover { color: var(--text); background: var(--accent-weak); } +.sidebar-tabs .sidebar-collapse { flex: none; width: 26px; height: 26px; margin-left: auto; background: transparent; border: 0; color: var(--text-dim); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; border-radius: 6px; } +.sidebar-tabs .sidebar-collapse:hover { color: var(--text); background: var(--hover); } .sidebar-expand { position: absolute; left: 10px; top: 10px; z-index: 35; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 7px; color: var(--text-dim); cursor: pointer; } .sidebar-expand:hover { color: var(--text); border-color: var(--accent); } .source-toggle { position: absolute; right: 14px; bottom: 14px; z-index: 35; background: var(--bg-panel); color: var(--text-dim); border: 1px solid var(--border); border-radius: 999px; padding: 5px 13px; font-size: 12.5px; cursor: pointer; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.10); } @@ -84,7 +85,7 @@ button { font: inherit; color: inherit; } .main { flex: 1; display: flex; min-height: 0; } .sidebar { flex: 1; display: flex; flex-direction: column; background: var(--bg-panel); border-right: 1px solid var(--border); min-width: 0; } .sidebar-tabs { display: flex; gap: 4px; padding: 8px 10px 4px; } -.sidebar-tabs button { flex: 1; border: 0; background: transparent; padding: 5px 0; border-radius: 999px; cursor: pointer; font-size: 13px; color: var(--text-dim); } +.sidebar-tabs button { flex: 1; border: 0; background: transparent; padding: 5px 0; border-radius: 6px; cursor: pointer; font-size: 13px; color: var(--text-dim); } .sidebar-tabs button.active { background: var(--accent-weak); color: var(--text); } .outline, .filetree { overflow-y: auto; padding: 6px 8px 16px; } .outline-item { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 4px 6px; border-radius: 6px; cursor: pointer; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }