@quilltap/theme-storybook 1.0.80 → 1.0.81
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.css +111 -0
- package/package.json +1 -1
- package/src/css/qt-components.css +121 -0
- package/src/css/quilltap-defaults.css +14 -0
package/dist/index.css
CHANGED
|
@@ -155,6 +155,16 @@
|
|
|
155
155
|
--qt-left-sidebar-overlay-bg: rgb(0 0 0 / 0.4);
|
|
156
156
|
--qt-left-sidebar-overlay-z: 40;
|
|
157
157
|
--qt-left-sidebar-z: 50;
|
|
158
|
+
--qt-floating-layer-z: 1000;
|
|
159
|
+
--qt-brahma-launcher-size: 2.75rem;
|
|
160
|
+
--qt-brahma-launcher-offset: 0.75rem;
|
|
161
|
+
--qt-brahma-launcher-bg: var(--color-primary);
|
|
162
|
+
--qt-brahma-launcher-fg: var(--color-primary-foreground);
|
|
163
|
+
--qt-brahma-launcher-hover-bg: color-mix(in srgb, var(--color-primary) 88%, black);
|
|
164
|
+
--qt-brahma-launcher-active-bg: var(--color-background);
|
|
165
|
+
--qt-brahma-launcher-active-fg: var(--color-primary);
|
|
166
|
+
--qt-brahma-launcher-ring: var(--color-primary);
|
|
167
|
+
--qt-brahma-launcher-shadow: 0 6px 18px -4px rgb(0 0 0 / 0.35);
|
|
158
168
|
--qt-app-header-height: 3.5rem;
|
|
159
169
|
--qt-app-header-bg: var(--color-background);
|
|
160
170
|
--qt-app-header-border: var(--color-border);
|
|
@@ -1121,6 +1131,107 @@ body {
|
|
|
1121
1131
|
.qt-dialog-wide {
|
|
1122
1132
|
max-width: min(var(--qt-page-max-width, 75rem), calc(100vw - 2rem));
|
|
1123
1133
|
}
|
|
1134
|
+
.qt-floating-dialog {
|
|
1135
|
+
position: fixed;
|
|
1136
|
+
z-index: 58;
|
|
1137
|
+
border-radius: var(--qt-dialog-radius, var(--radius-lg, 0.5rem));
|
|
1138
|
+
background: var(--qt-dialog-bg, var(--color-background));
|
|
1139
|
+
border: 1px solid var(--qt-dialog-border, var(--color-border));
|
|
1140
|
+
box-shadow: var(--qt-dialog-shadow, 0 24px 48px -12px rgb(0 0 0 / 0.18));
|
|
1141
|
+
resize: both;
|
|
1142
|
+
overflow: hidden;
|
|
1143
|
+
display: flex;
|
|
1144
|
+
flex-direction: column;
|
|
1145
|
+
}
|
|
1146
|
+
.qt-floating-dialog-topmost {
|
|
1147
|
+
z-index: var(--qt-floating-layer-z);
|
|
1148
|
+
}
|
|
1149
|
+
.qt-floating-dialog-header {
|
|
1150
|
+
padding: 0.5rem 1rem;
|
|
1151
|
+
display: flex;
|
|
1152
|
+
align-items: center;
|
|
1153
|
+
justify-content: space-between;
|
|
1154
|
+
cursor: grab;
|
|
1155
|
+
-webkit-user-select: none;
|
|
1156
|
+
-moz-user-select: none;
|
|
1157
|
+
user-select: none;
|
|
1158
|
+
border-bottom: 1px solid var(--qt-dialog-border, var(--color-border));
|
|
1159
|
+
background: var(--qt-dialog-bg, var(--color-background));
|
|
1160
|
+
flex-shrink: 0;
|
|
1161
|
+
}
|
|
1162
|
+
.qt-floating-dialog-header:active {
|
|
1163
|
+
cursor: grabbing;
|
|
1164
|
+
}
|
|
1165
|
+
.qt-floating-dialog-title {
|
|
1166
|
+
font-size: 0.875rem;
|
|
1167
|
+
line-height: 1.25rem;
|
|
1168
|
+
font-weight: 600;
|
|
1169
|
+
color: var(--color-foreground);
|
|
1170
|
+
overflow: hidden;
|
|
1171
|
+
text-overflow: ellipsis;
|
|
1172
|
+
white-space: nowrap;
|
|
1173
|
+
}
|
|
1174
|
+
.qt-floating-dialog-actions {
|
|
1175
|
+
display: flex;
|
|
1176
|
+
align-items: center;
|
|
1177
|
+
gap: 0.25rem;
|
|
1178
|
+
flex-shrink: 0;
|
|
1179
|
+
}
|
|
1180
|
+
.qt-floating-dialog-close {
|
|
1181
|
+
padding: 0.25rem;
|
|
1182
|
+
border-radius: 0.25rem;
|
|
1183
|
+
color: var(--color-muted-foreground);
|
|
1184
|
+
transition: color 150ms, background-color 150ms;
|
|
1185
|
+
}
|
|
1186
|
+
.qt-floating-dialog-close:hover {
|
|
1187
|
+
background: var(--color-accent);
|
|
1188
|
+
color: var(--color-foreground);
|
|
1189
|
+
}
|
|
1190
|
+
.qt-floating-dialog-body {
|
|
1191
|
+
flex: 1 1 0%;
|
|
1192
|
+
display: flex;
|
|
1193
|
+
flex-direction: column;
|
|
1194
|
+
position: relative;
|
|
1195
|
+
min-height: 0;
|
|
1196
|
+
overflow: hidden;
|
|
1197
|
+
}
|
|
1198
|
+
.qt-brahma-launcher {
|
|
1199
|
+
position: fixed;
|
|
1200
|
+
left: calc(var(--qt-left-sidebar-collapsed-width) + var(--qt-brahma-launcher-offset));
|
|
1201
|
+
bottom: var(--qt-brahma-launcher-offset);
|
|
1202
|
+
z-index: var(--qt-floating-layer-z);
|
|
1203
|
+
width: var(--qt-brahma-launcher-size);
|
|
1204
|
+
height: var(--qt-brahma-launcher-size);
|
|
1205
|
+
display: inline-flex;
|
|
1206
|
+
align-items: center;
|
|
1207
|
+
justify-content: center;
|
|
1208
|
+
border-radius: 9999px;
|
|
1209
|
+
background: var(--qt-brahma-launcher-bg);
|
|
1210
|
+
color: var(--qt-brahma-launcher-fg);
|
|
1211
|
+
border: 2px solid var(--qt-brahma-launcher-ring);
|
|
1212
|
+
box-shadow: var(--qt-brahma-launcher-shadow);
|
|
1213
|
+
transition:
|
|
1214
|
+
background-color 150ms ease,
|
|
1215
|
+
color 150ms ease,
|
|
1216
|
+
transform 150ms ease;
|
|
1217
|
+
}
|
|
1218
|
+
.qt-brahma-launcher:hover {
|
|
1219
|
+
background: var(--qt-brahma-launcher-hover-bg);
|
|
1220
|
+
transform: scale(1.06);
|
|
1221
|
+
}
|
|
1222
|
+
.qt-brahma-launcher:focus-visible {
|
|
1223
|
+
outline: 2px solid var(--qt-brahma-launcher-ring);
|
|
1224
|
+
outline-offset: 3px;
|
|
1225
|
+
}
|
|
1226
|
+
.qt-brahma-launcher-active,
|
|
1227
|
+
.qt-brahma-launcher-active:hover {
|
|
1228
|
+
background: var(--qt-brahma-launcher-active-bg);
|
|
1229
|
+
color: var(--qt-brahma-launcher-active-fg);
|
|
1230
|
+
}
|
|
1231
|
+
.qt-brahma-launcher-icon {
|
|
1232
|
+
width: 60%;
|
|
1233
|
+
height: 60%;
|
|
1234
|
+
}
|
|
1124
1235
|
.qt-slide-over-overlay {
|
|
1125
1236
|
position: fixed;
|
|
1126
1237
|
inset: 0;
|
package/package.json
CHANGED
|
@@ -1290,6 +1290,127 @@
|
|
|
1290
1290
|
max-width: min(var(--qt-page-max-width, 75rem), calc(100vw - 2rem));
|
|
1291
1291
|
}
|
|
1292
1292
|
|
|
1293
|
+
/* ==========================================================================
|
|
1294
|
+
FLOATING DIALOG - Movable, resizable floating panel
|
|
1295
|
+
z 58 places it between panels (z 55) and modals (z 60)
|
|
1296
|
+
========================================================================== */
|
|
1297
|
+
|
|
1298
|
+
.qt-floating-dialog {
|
|
1299
|
+
position: fixed;
|
|
1300
|
+
z-index: 58;
|
|
1301
|
+
border-radius: var(--qt-dialog-radius, var(--radius-lg, 0.5rem));
|
|
1302
|
+
background: var(--qt-dialog-bg, var(--color-background));
|
|
1303
|
+
border: 1px solid var(--qt-dialog-border, var(--color-border));
|
|
1304
|
+
box-shadow: var(--qt-dialog-shadow, 0 24px 48px -12px rgb(0 0 0 / 0.18));
|
|
1305
|
+
resize: both;
|
|
1306
|
+
overflow: hidden;
|
|
1307
|
+
display: flex;
|
|
1308
|
+
flex-direction: column;
|
|
1309
|
+
}
|
|
1310
|
+
|
|
1311
|
+
/* Topmost floating dialog — lifted above every portal modal (Brahma Console) */
|
|
1312
|
+
.qt-floating-dialog-topmost {
|
|
1313
|
+
z-index: var(--qt-floating-layer-z);
|
|
1314
|
+
}
|
|
1315
|
+
|
|
1316
|
+
.qt-floating-dialog-header {
|
|
1317
|
+
padding: 0.5rem 1rem;
|
|
1318
|
+
display: flex;
|
|
1319
|
+
align-items: center;
|
|
1320
|
+
justify-content: space-between;
|
|
1321
|
+
cursor: grab;
|
|
1322
|
+
user-select: none;
|
|
1323
|
+
border-bottom: 1px solid var(--qt-dialog-border, var(--color-border));
|
|
1324
|
+
background: var(--qt-dialog-bg, var(--color-background));
|
|
1325
|
+
flex-shrink: 0;
|
|
1326
|
+
}
|
|
1327
|
+
|
|
1328
|
+
.qt-floating-dialog-header:active {
|
|
1329
|
+
cursor: grabbing;
|
|
1330
|
+
}
|
|
1331
|
+
|
|
1332
|
+
.qt-floating-dialog-title {
|
|
1333
|
+
font-size: 0.875rem;
|
|
1334
|
+
line-height: 1.25rem;
|
|
1335
|
+
font-weight: 600;
|
|
1336
|
+
color: var(--color-foreground);
|
|
1337
|
+
overflow: hidden;
|
|
1338
|
+
text-overflow: ellipsis;
|
|
1339
|
+
white-space: nowrap;
|
|
1340
|
+
}
|
|
1341
|
+
|
|
1342
|
+
.qt-floating-dialog-actions {
|
|
1343
|
+
display: flex;
|
|
1344
|
+
align-items: center;
|
|
1345
|
+
gap: 0.25rem;
|
|
1346
|
+
flex-shrink: 0;
|
|
1347
|
+
}
|
|
1348
|
+
|
|
1349
|
+
.qt-floating-dialog-close {
|
|
1350
|
+
padding: 0.25rem;
|
|
1351
|
+
border-radius: 0.25rem;
|
|
1352
|
+
color: var(--color-muted-foreground);
|
|
1353
|
+
transition: color 150ms, background-color 150ms;
|
|
1354
|
+
}
|
|
1355
|
+
|
|
1356
|
+
.qt-floating-dialog-close:hover {
|
|
1357
|
+
background: var(--color-accent);
|
|
1358
|
+
color: var(--color-foreground);
|
|
1359
|
+
}
|
|
1360
|
+
|
|
1361
|
+
.qt-floating-dialog-body {
|
|
1362
|
+
flex: 1 1 0%;
|
|
1363
|
+
display: flex;
|
|
1364
|
+
flex-direction: column;
|
|
1365
|
+
position: relative;
|
|
1366
|
+
min-height: 0;
|
|
1367
|
+
overflow: hidden;
|
|
1368
|
+
}
|
|
1369
|
+
|
|
1370
|
+
/* ==========================================================================
|
|
1371
|
+
BRAHMA CONSOLE LAUNCHER - The always-on button beside the left rail
|
|
1372
|
+
Sits in the topmost floating layer so it stays reachable over any modal.
|
|
1373
|
+
========================================================================== */
|
|
1374
|
+
|
|
1375
|
+
.qt-brahma-launcher {
|
|
1376
|
+
position: fixed;
|
|
1377
|
+
left: calc(var(--qt-left-sidebar-collapsed-width) + var(--qt-brahma-launcher-offset));
|
|
1378
|
+
bottom: var(--qt-brahma-launcher-offset);
|
|
1379
|
+
z-index: var(--qt-floating-layer-z);
|
|
1380
|
+
width: var(--qt-brahma-launcher-size);
|
|
1381
|
+
height: var(--qt-brahma-launcher-size);
|
|
1382
|
+
display: inline-flex;
|
|
1383
|
+
align-items: center;
|
|
1384
|
+
justify-content: center;
|
|
1385
|
+
border-radius: 9999px;
|
|
1386
|
+
background: var(--qt-brahma-launcher-bg);
|
|
1387
|
+
color: var(--qt-brahma-launcher-fg);
|
|
1388
|
+
border: 2px solid var(--qt-brahma-launcher-ring);
|
|
1389
|
+
box-shadow: var(--qt-brahma-launcher-shadow);
|
|
1390
|
+
transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
|
|
1391
|
+
}
|
|
1392
|
+
|
|
1393
|
+
.qt-brahma-launcher:hover {
|
|
1394
|
+
background: var(--qt-brahma-launcher-hover-bg);
|
|
1395
|
+
transform: scale(1.06);
|
|
1396
|
+
}
|
|
1397
|
+
|
|
1398
|
+
.qt-brahma-launcher:focus-visible {
|
|
1399
|
+
outline: 2px solid var(--qt-brahma-launcher-ring);
|
|
1400
|
+
outline-offset: 3px;
|
|
1401
|
+
}
|
|
1402
|
+
|
|
1403
|
+
.qt-brahma-launcher-active,
|
|
1404
|
+
.qt-brahma-launcher-active:hover {
|
|
1405
|
+
background: var(--qt-brahma-launcher-active-bg);
|
|
1406
|
+
color: var(--qt-brahma-launcher-active-fg);
|
|
1407
|
+
}
|
|
1408
|
+
|
|
1409
|
+
.qt-brahma-launcher-icon {
|
|
1410
|
+
width: 60%;
|
|
1411
|
+
height: 60%;
|
|
1412
|
+
}
|
|
1413
|
+
|
|
1293
1414
|
/* ==========================================================================
|
|
1294
1415
|
SLIDE-OVER PANELS
|
|
1295
1416
|
========================================================================== */
|
|
@@ -196,6 +196,20 @@
|
|
|
196
196
|
--qt-left-sidebar-overlay-z: 40;
|
|
197
197
|
--qt-left-sidebar-z: 50;
|
|
198
198
|
|
|
199
|
+
/* Topmost floating layer — above every portal modal, below the startup gates */
|
|
200
|
+
--qt-floating-layer-z: 1000;
|
|
201
|
+
|
|
202
|
+
/* Brahma Console launcher — the always-on button beside the left rail */
|
|
203
|
+
--qt-brahma-launcher-size: 2.75rem;
|
|
204
|
+
--qt-brahma-launcher-offset: 0.75rem;
|
|
205
|
+
--qt-brahma-launcher-bg: var(--color-primary);
|
|
206
|
+
--qt-brahma-launcher-fg: var(--color-primary-foreground);
|
|
207
|
+
--qt-brahma-launcher-hover-bg: color-mix(in srgb, var(--color-primary) 88%, black);
|
|
208
|
+
--qt-brahma-launcher-active-bg: var(--color-background);
|
|
209
|
+
--qt-brahma-launcher-active-fg: var(--color-primary);
|
|
210
|
+
--qt-brahma-launcher-ring: var(--color-primary);
|
|
211
|
+
--qt-brahma-launcher-shadow: 0 6px 18px -4px rgb(0 0 0 / 0.35);
|
|
212
|
+
|
|
199
213
|
/* App Header Variables */
|
|
200
214
|
--qt-app-header-height: 3.5rem;
|
|
201
215
|
--qt-app-header-bg: var(--color-background);
|