feat: add tabbed container layout mode with tab bar UI

Adds a third layout mode (TABBED) alongside HORIZONTAL and VERTICAL accordion modes.
In tabbed mode, only the active tab window is visible and a slim tab bar at the top
of the container shows all windows with click-to-switch. Keybinding: Ctrl+/ to toggle.
This commit is contained in:
Lucas Oskorep
2026-02-26 02:26:00 -05:00
parent 93516b31fb
commit 0cc35c95b4
9 changed files with 538 additions and 42 deletions

View File

@@ -1,37 +1,33 @@
/* Add your custom extension styling here */
.active-window-border {
/*border: 2px solid rgba(191, 0, 255, 0.8);*/
/*border-radius: 3px;*/
/* border-image-source: linear-gradient(to left, #743ad5, #d53a9d);*/
/* !*border: 4px solid transparent;*!*/
/* !*border-radius: 5px;*!*/
/* !*!* Gradient border using border-image *!*/
/* border-image: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet) 1;*/
/* ─── Tab Bar ─────────────────────────────────────────────────────────────── */
.aerospike-tab-bar {
background-color: rgba(30, 30, 30, 0.95);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
spacing: 1px;
padding: 2px 2px 0 2px;
}
/*.border-gradient-purple {*/
/* border-image-source: linear-gradient(to left, #743ad5, #d53a9d);*/
/*}*/
.aerospike-tab {
background-color: rgba(50, 50, 50, 0.8);
border-radius: 6px 6px 0 0;
padding: 2px 12px;
margin: 0 1px;
color: rgba(255, 255, 255, 0.5);
font-size: 11px;
font-weight: 400;
}
/*@keyframes rainbow-border {*/
/* 0% {*/
/* border-image: linear-gradient(0deg, red, orange, yellow, green, blue, indigo, violet, red) 1;*/
/* }*/
/* 100% {*/
/* border-image: linear-gradient(360deg, red, orange, yellow, green, blue, indigo, violet, red) 1;*/
/* }*/
/*}*/
.aerospike-tab:hover {
background-color: rgba(70, 70, 70, 0.9);
color: rgba(255, 255, 255, 0.8);
}
/*.active-window-border {*/
/* border: 4px solid transparent;*/
/* border-radius: 5px;*/
.aerospike-tab-active {
background-color: rgba(80, 80, 80, 1);
color: rgba(255, 255, 255, 1);
font-weight: 500;
}
/* !* Initial gradient border *!*/
/* border-image: linear-gradient(0deg, red, orange, yellow, green, blue, indigo, violet, red) 1;*/
/* !* Apply animation *!*/
/* animation: rainbow-border 5s linear infinite;*/
/*}*/
.aerospike-tab-label {
font-size: 11px;
}