Streamline studio layout: remove navigation sidebar and empty mockup buttons
Browse files- index.html +15 -128
index.html
CHANGED
|
@@ -61,42 +61,29 @@
|
|
| 61 |
background-color: var(--bg-color);
|
| 62 |
}
|
| 63 |
|
| 64 |
-
/* 1.
|
| 65 |
-
.
|
| 66 |
-
width: 240px;
|
| 67 |
-
height: 100%;
|
| 68 |
-
background-color: var(--sidebar-bg);
|
| 69 |
-
border-right: 1px solid var(--panel-border);
|
| 70 |
-
display: flex;
|
| 71 |
-
flex-direction: column;
|
| 72 |
-
padding: 24px 16px;
|
| 73 |
-
flex-shrink: 0;
|
| 74 |
-
z-index: 101;
|
| 75 |
-
transition: var(--transition);
|
| 76 |
-
}
|
| 77 |
-
|
| 78 |
-
.nav-logo {
|
| 79 |
display: flex;
|
| 80 |
align-items: center;
|
| 81 |
gap: 8px;
|
| 82 |
-
margin-bottom: 32px;
|
| 83 |
-
padding-left: 8px;
|
| 84 |
}
|
| 85 |
|
| 86 |
.logo-emoji {
|
| 87 |
-
font-size: 1.
|
|
|
|
| 88 |
}
|
| 89 |
|
| 90 |
.logo-text {
|
| 91 |
font-family: 'Outfit', sans-serif;
|
| 92 |
-
font-size: 1.
|
| 93 |
font-weight: 700;
|
| 94 |
color: var(--text-primary);
|
| 95 |
letter-spacing: -0.2px;
|
|
|
|
| 96 |
}
|
| 97 |
|
| 98 |
.brand-badge-mini {
|
| 99 |
-
font-size: 0.
|
| 100 |
font-weight: 600;
|
| 101 |
background: var(--accent-resemble-glow);
|
| 102 |
color: var(--accent-resemble);
|
|
@@ -106,69 +93,7 @@
|
|
| 106 |
text-transform: uppercase;
|
| 107 |
letter-spacing: 0.2px;
|
| 108 |
margin-left: 2px;
|
| 109 |
-
|
| 110 |
-
|
| 111 |
-
.nav-menu {
|
| 112 |
-
display: flex;
|
| 113 |
-
flex-direction: column;
|
| 114 |
-
gap: 4px;
|
| 115 |
-
}
|
| 116 |
-
|
| 117 |
-
.nav-item {
|
| 118 |
-
display: flex;
|
| 119 |
-
align-items: center;
|
| 120 |
-
gap: 12px;
|
| 121 |
-
padding: 10px 14px;
|
| 122 |
-
color: var(--text-secondary);
|
| 123 |
-
font-size: 0.9rem;
|
| 124 |
-
font-weight: 500;
|
| 125 |
-
border-radius: var(--radius-md);
|
| 126 |
-
cursor: pointer;
|
| 127 |
-
transition: var(--transition);
|
| 128 |
-
text-decoration: none;
|
| 129 |
-
}
|
| 130 |
-
|
| 131 |
-
.nav-item:hover {
|
| 132 |
-
background-color: var(--bg-color);
|
| 133 |
-
color: var(--text-primary);
|
| 134 |
-
}
|
| 135 |
-
|
| 136 |
-
.nav-item.active {
|
| 137 |
-
background-color: var(--accent-resemble-glow);
|
| 138 |
-
color: var(--accent-resemble);
|
| 139 |
-
font-weight: 600;
|
| 140 |
-
}
|
| 141 |
-
|
| 142 |
-
.nav-icon {
|
| 143 |
-
font-size: 1.1rem;
|
| 144 |
-
display: inline-block;
|
| 145 |
-
width: 20px;
|
| 146 |
-
text-align: center;
|
| 147 |
-
}
|
| 148 |
-
|
| 149 |
-
.nav-divider {
|
| 150 |
-
height: 1px;
|
| 151 |
-
background-color: var(--panel-border);
|
| 152 |
-
margin: 20px 8px;
|
| 153 |
-
}
|
| 154 |
-
|
| 155 |
-
.nav-section-title {
|
| 156 |
-
font-size: 0.72rem;
|
| 157 |
-
font-weight: 700;
|
| 158 |
-
color: var(--text-muted);
|
| 159 |
-
text-transform: uppercase;
|
| 160 |
-
letter-spacing: 0.8px;
|
| 161 |
-
margin-bottom: 8px;
|
| 162 |
-
padding-left: 14px;
|
| 163 |
-
}
|
| 164 |
-
|
| 165 |
-
.nav-item.active-pinned {
|
| 166 |
-
background-color: #f1f5f9;
|
| 167 |
-
color: var(--text-primary);
|
| 168 |
-
font-weight: 600;
|
| 169 |
-
border-left: 3px solid var(--accent-resemble);
|
| 170 |
-
border-radius: 0 var(--radius-md) var(--radius-md) 0;
|
| 171 |
-
padding-left: 11px;
|
| 172 |
}
|
| 173 |
|
| 174 |
|
|
@@ -1229,9 +1154,6 @@
|
|
| 1229 |
}
|
| 1230 |
|
| 1231 |
@media (max-width: 768px) {
|
| 1232 |
-
.nav-sidebar {
|
| 1233 |
-
display: none; /* Hide nav sidebar on smaller mobile screens */
|
| 1234 |
-
}
|
| 1235 |
.workspace-header {
|
| 1236 |
padding: 0 20px;
|
| 1237 |
}
|
|
@@ -1243,42 +1165,6 @@
|
|
| 1243 |
<body>
|
| 1244 |
<div class="app-layout">
|
| 1245 |
|
| 1246 |
-
<!-- Left Navigation Sidebar (ElevenLabs layout) -->
|
| 1247 |
-
<aside class="nav-sidebar">
|
| 1248 |
-
<div class="nav-logo">
|
| 1249 |
-
<span class="logo-emoji">🎭</span>
|
| 1250 |
-
<span class="logo-text">DramaBox</span>
|
| 1251 |
-
<span class="brand-badge-mini">by Resemble</span>
|
| 1252 |
-
</div>
|
| 1253 |
-
|
| 1254 |
-
<div class="nav-menu">
|
| 1255 |
-
<div class="nav-item">
|
| 1256 |
-
<span class="nav-icon">🏠</span> Home
|
| 1257 |
-
</div>
|
| 1258 |
-
<div class="nav-item">
|
| 1259 |
-
<span class="nav-icon">🎙️</span> Voices
|
| 1260 |
-
</div>
|
| 1261 |
-
<div class="nav-item active">
|
| 1262 |
-
<span class="nav-icon">🎨</span> Studio
|
| 1263 |
-
</div>
|
| 1264 |
-
<div class="nav-item">
|
| 1265 |
-
<span class="nav-icon">⚡</span> Flows
|
| 1266 |
-
</div>
|
| 1267 |
-
<div class="nav-item">
|
| 1268 |
-
<span class="nav-icon">📁</span> Files
|
| 1269 |
-
</div>
|
| 1270 |
-
</div>
|
| 1271 |
-
|
| 1272 |
-
<div class="nav-divider"></div>
|
| 1273 |
-
|
| 1274 |
-
<div class="nav-section-title">Pinned</div>
|
| 1275 |
-
<div class="nav-menu">
|
| 1276 |
-
<div class="nav-item active-pinned">
|
| 1277 |
-
<span class="nav-icon">🔊</span> Text to Speech
|
| 1278 |
-
</div>
|
| 1279 |
-
</div>
|
| 1280 |
-
</aside>
|
| 1281 |
-
|
| 1282 |
<!-- Sidebar backdrop overlay (mobile viewports) -->
|
| 1283 |
<div id="sidebar-overlay" class="sidebar-overlay"></div>
|
| 1284 |
|
|
@@ -1286,9 +1172,13 @@
|
|
| 1286 |
<div class="workspace-area">
|
| 1287 |
<header class="workspace-header">
|
| 1288 |
<div class="header-left">
|
| 1289 |
-
<
|
| 1290 |
-
|
| 1291 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1292 |
</div>
|
| 1293 |
|
| 1294 |
<div class="header-right">
|
|
@@ -1297,9 +1187,6 @@
|
|
| 1297 |
<span class="toggle-icon">🎛️</span>
|
| 1298 |
<span class="toggle-text">Show Settings</span>
|
| 1299 |
</button>
|
| 1300 |
-
<button class="header-btn">Feedback</button>
|
| 1301 |
-
<button class="header-btn">Docs</button>
|
| 1302 |
-
<button class="header-btn">Ask</button>
|
| 1303 |
</div>
|
| 1304 |
</header>
|
| 1305 |
|
|
|
|
| 61 |
background-color: var(--bg-color);
|
| 62 |
}
|
| 63 |
|
| 64 |
+
/* 1. Header Logo & Brand Accents */
|
| 65 |
+
.header-logo {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 66 |
display: flex;
|
| 67 |
align-items: center;
|
| 68 |
gap: 8px;
|
|
|
|
|
|
|
| 69 |
}
|
| 70 |
|
| 71 |
.logo-emoji {
|
| 72 |
+
font-size: 1.35rem;
|
| 73 |
+
line-height: 1;
|
| 74 |
}
|
| 75 |
|
| 76 |
.logo-text {
|
| 77 |
font-family: 'Outfit', sans-serif;
|
| 78 |
+
font-size: 1.15rem;
|
| 79 |
font-weight: 700;
|
| 80 |
color: var(--text-primary);
|
| 81 |
letter-spacing: -0.2px;
|
| 82 |
+
line-height: 1;
|
| 83 |
}
|
| 84 |
|
| 85 |
.brand-badge-mini {
|
| 86 |
+
font-size: 0.6rem;
|
| 87 |
font-weight: 600;
|
| 88 |
background: var(--accent-resemble-glow);
|
| 89 |
color: var(--accent-resemble);
|
|
|
|
| 93 |
text-transform: uppercase;
|
| 94 |
letter-spacing: 0.2px;
|
| 95 |
margin-left: 2px;
|
| 96 |
+
line-height: 1.2;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 97 |
}
|
| 98 |
|
| 99 |
|
|
|
|
| 1154 |
}
|
| 1155 |
|
| 1156 |
@media (max-width: 768px) {
|
|
|
|
|
|
|
|
|
|
| 1157 |
.workspace-header {
|
| 1158 |
padding: 0 20px;
|
| 1159 |
}
|
|
|
|
| 1165 |
<body>
|
| 1166 |
<div class="app-layout">
|
| 1167 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1168 |
<!-- Sidebar backdrop overlay (mobile viewports) -->
|
| 1169 |
<div id="sidebar-overlay" class="sidebar-overlay"></div>
|
| 1170 |
|
|
|
|
| 1172 |
<div class="workspace-area">
|
| 1173 |
<header class="workspace-header">
|
| 1174 |
<div class="header-left">
|
| 1175 |
+
<div class="header-logo">
|
| 1176 |
+
<span class="logo-emoji">🎭</span>
|
| 1177 |
+
<span class="logo-text">DramaBox</span>
|
| 1178 |
+
<span class="brand-badge-mini">by Resemble</span>
|
| 1179 |
+
</div>
|
| 1180 |
+
<span class="header-chevron" style="margin-left: 12px; margin-right: 12px; color: var(--text-muted);">/</span>
|
| 1181 |
+
<span class="header-current" style="font-weight: 600; color: var(--text-secondary);">Studio</span>
|
| 1182 |
</div>
|
| 1183 |
|
| 1184 |
<div class="header-right">
|
|
|
|
| 1187 |
<span class="toggle-icon">🎛️</span>
|
| 1188 |
<span class="toggle-text">Show Settings</span>
|
| 1189 |
</button>
|
|
|
|
|
|
|
|
|
|
| 1190 |
</div>
|
| 1191 |
</header>
|
| 1192 |
|