Skip to content

Commit 8376bc2

Browse files
bloveblove
committed
feat: unify docs and cockpit control planes
1 parent 1856ac5 commit 8376bc2

36 files changed

Lines changed: 3482 additions & 759 deletions

‎apps/cockpit/src/app/cockpit.css‎

Lines changed: 338 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -346,3 +346,341 @@ pre.shiki {
346346
color: var(--ds-text-muted);
347347
font-size: 0.875rem;
348348
}
349+
350+
/* Unified sidebar control plane */
351+
.cockpit-shell {
352+
display: grid;
353+
grid-template-columns: minmax(0, 1fr);
354+
}
355+
@media (min-width: 48rem) {
356+
.cockpit-shell { grid-template-columns: 328px minmax(0, 1fr); }
357+
}
358+
.cockpit-control-plane {
359+
display: grid;
360+
grid-template-columns: 56px minmax(0, 272px);
361+
height: 100%;
362+
min-width: 0;
363+
color: var(--ds-text-secondary);
364+
background: var(--ds-surface);
365+
}
366+
.cockpit-control-plane [data-control-plane-rail] {
367+
min-width: 0;
368+
padding: 10px 6px;
369+
border-right: 1px solid var(--ds-border);
370+
background: var(--ds-surface-tinted);
371+
display: flex;
372+
flex-direction: column;
373+
}
374+
.cockpit-control-plane [data-control-plane-rail-group] {
375+
display: flex;
376+
flex-direction: column;
377+
gap: 4px;
378+
}
379+
.cockpit-control-plane [data-control-plane-rail-group="utilities"] { margin-top: auto; }
380+
.cockpit-control-plane-utility-anchor { display: contents; }
381+
.cockpit-control-plane [data-control-plane-rail-item] {
382+
position: relative;
383+
min-height: 48px;
384+
padding: 6px 2px;
385+
border: 0;
386+
border-radius: 8px;
387+
display: flex;
388+
flex-direction: column;
389+
align-items: center;
390+
justify-content: center;
391+
gap: 4px;
392+
color: var(--ds-text-muted);
393+
background: transparent;
394+
text-decoration: none;
395+
cursor: pointer;
396+
transition: background 120ms ease, color 120ms ease;
397+
}
398+
.cockpit-control-plane [data-control-plane-rail-item]:hover {
399+
color: var(--ds-text-primary);
400+
background: var(--ds-surface);
401+
}
402+
.cockpit-control-plane [data-control-plane-rail-item][data-control-plane-active] {
403+
color: var(--ds-accent);
404+
background: var(--ds-accent-surface);
405+
}
406+
.cockpit-control-plane [data-control-plane-rail-label] {
407+
font-size: 10px;
408+
line-height: 1;
409+
font-weight: 600;
410+
}
411+
.cockpit-control-plane [data-control-plane-pane] {
412+
min-width: 0;
413+
overflow-y: auto;
414+
border-right: 1px solid var(--ds-border-strong);
415+
}
416+
[data-cockpit-context-content] {
417+
display: flex;
418+
flex-direction: column;
419+
gap: 2px;
420+
padding: 12px 10px 20px;
421+
}
422+
[data-cockpit-context-content] [data-control-plane-section] { padding: 3px 0; }
423+
[data-cockpit-context-content] [data-control-plane-section-trigger] {
424+
width: 100%;
425+
min-height: 34px;
426+
padding: 6px 8px;
427+
border: 0;
428+
border-radius: 7px;
429+
display: flex;
430+
align-items: center;
431+
justify-content: space-between;
432+
color: var(--ds-text-muted);
433+
background: transparent;
434+
cursor: pointer;
435+
font-size: 12px;
436+
font-weight: 600;
437+
text-align: left;
438+
}
439+
[data-cockpit-context-content] [data-control-plane-section-trigger]:hover {
440+
color: var(--ds-text-primary);
441+
background: var(--ds-surface-tinted);
442+
}
443+
[data-cockpit-context-content] [data-control-plane-section-chevron] {
444+
flex: none;
445+
transition: transform 150ms ease;
446+
}
447+
[data-cockpit-context-content] [data-control-plane-section-trigger][aria-expanded="true"] [data-control-plane-section-chevron] {
448+
transform: rotate(90deg);
449+
}
450+
[data-cockpit-context-content] [data-control-plane-section-heading] {
451+
margin: 0;
452+
padding: 8px;
453+
color: var(--ds-text-muted);
454+
font-size: 12px;
455+
line-height: 1.2;
456+
font-weight: 600;
457+
}
458+
[data-cockpit-context-content] [data-control-plane-section-content] { padding: 2px 0 8px; }
459+
.cockpit-control-plane-scope {
460+
margin: 0 8px;
461+
padding: 10px;
462+
border-radius: 8px;
463+
background: var(--ds-surface-tinted);
464+
display: grid;
465+
gap: 3px;
466+
color: var(--ds-text-muted);
467+
font-size: 11px;
468+
}
469+
.cockpit-control-plane-scope strong {
470+
color: var(--ds-text-primary);
471+
font-size: 13px;
472+
font-weight: 600;
473+
}
474+
.cockpit-nav-group-label {
475+
color: var(--ds-text-secondary);
476+
font-size: 12px;
477+
font-weight: 600;
478+
}
479+
[data-cockpit-context-content] [aria-label^="Collapse"],
480+
[data-cockpit-context-content] [aria-label^="Expand"] {
481+
border-radius: 7px;
482+
min-height: 32px;
483+
}
484+
[data-cockpit-context-content] [aria-label^="Collapse"]:hover,
485+
[data-cockpit-context-content] [aria-label^="Expand"]:hover { background: var(--ds-surface-tinted) !important; }
486+
.cockpit-nav-item {
487+
padding: 7px 9px;
488+
margin: 1px 8px;
489+
border-radius: 7px;
490+
font-size: 13px;
491+
}
492+
[data-cockpit-context-content] [data-control-plane-environment-list] {
493+
display: grid;
494+
gap: 2px;
495+
margin: 0 8px;
496+
}
497+
[data-cockpit-context-content] [data-control-plane-environment-row] {
498+
min-height: 32px;
499+
padding: 6px 8px;
500+
border-radius: 7px;
501+
display: grid;
502+
grid-template-columns: 18px minmax(0, 1fr) auto;
503+
align-items: center;
504+
gap: 6px;
505+
font-size: 11px;
506+
}
507+
[data-cockpit-context-content] [data-control-plane-environment-row]:hover { background: var(--ds-surface-tinted); }
508+
[data-cockpit-context-content] [data-control-plane-environment-row] dt { color: var(--ds-text-muted); }
509+
[data-cockpit-context-content] [data-control-plane-environment-row] dd {
510+
margin: 0;
511+
color: var(--ds-text-primary);
512+
font-family: var(--ds-font-mono);
513+
font-size: 10px;
514+
}
515+
[data-cockpit-context-content] [data-control-plane-environment-icon] {
516+
display: inline-flex;
517+
color: var(--ds-text-muted);
518+
}
519+
[data-cockpit-context-content] [data-control-plane-action-bar] {
520+
display: flex;
521+
gap: 4px;
522+
margin: 0 8px;
523+
}
524+
[data-cockpit-context-content] [data-control-plane-action] {
525+
position: relative;
526+
width: 34px;
527+
height: 34px;
528+
border: 0;
529+
border-radius: 8px;
530+
display: inline-flex;
531+
align-items: center;
532+
justify-content: center;
533+
color: var(--ds-text-muted);
534+
background: transparent;
535+
}
536+
[data-cockpit-context-content] [data-control-plane-action]:hover {
537+
color: var(--ds-text-primary);
538+
background: var(--ds-surface-tinted);
539+
}
540+
.cockpit-control-plane [data-control-plane-tooltip] {
541+
position: absolute;
542+
z-index: 60;
543+
padding: 5px 7px;
544+
border-radius: 6px;
545+
color: var(--ds-surface);
546+
background: var(--ds-text-primary);
547+
box-shadow: var(--ds-shadow-sm);
548+
font-size: 11px;
549+
font-weight: 500;
550+
line-height: 1;
551+
white-space: nowrap;
552+
pointer-events: none;
553+
opacity: 0;
554+
visibility: hidden;
555+
transition: opacity 120ms ease, visibility 120ms ease;
556+
}
557+
.cockpit-control-plane [data-control-plane-rail-item] [data-control-plane-tooltip] {
558+
left: calc(100% + 8px);
559+
top: 50%;
560+
transform: translateY(-50%);
561+
}
562+
.cockpit-control-plane [data-control-plane-action] [data-control-plane-tooltip] {
563+
left: 50%;
564+
bottom: calc(100% + 6px);
565+
transform: translateX(-50%);
566+
}
567+
.cockpit-control-plane [data-control-plane-rail-item]:is(:hover, :focus-visible) [data-control-plane-tooltip],
568+
.cockpit-control-plane [data-control-plane-action]:is(:hover, :focus-visible) [data-control-plane-tooltip] {
569+
opacity: 1;
570+
visibility: visible;
571+
}
572+
.cockpit-control-plane [data-control-plane-utility-panel] { padding: 14px 12px; }
573+
.cockpit-control-plane [data-control-plane-utility-header] {
574+
min-height: 36px;
575+
display: flex;
576+
align-items: center;
577+
justify-content: space-between;
578+
}
579+
.cockpit-control-plane [data-control-plane-utility-header] h2 {
580+
margin: 0;
581+
color: var(--ds-text-primary);
582+
font-size: 14px;
583+
font-weight: 600;
584+
}
585+
.cockpit-control-plane [data-control-plane-utility-header] button,
586+
.cockpit-control-plane-theme {
587+
width: 34px;
588+
height: 34px;
589+
border: 0;
590+
border-radius: 8px;
591+
display: inline-flex;
592+
align-items: center;
593+
justify-content: center;
594+
color: var(--ds-text-muted);
595+
background: transparent;
596+
cursor: pointer;
597+
}
598+
.cockpit-control-plane [data-control-plane-utility-header] button:hover,
599+
.cockpit-control-plane-theme:hover { background: var(--ds-surface-tinted); color: var(--ds-text-primary); }
600+
.cockpit-control-plane-setting {
601+
min-height: 48px;
602+
padding: 8px 0;
603+
border-bottom: 1px solid var(--ds-border);
604+
display: flex;
605+
align-items: center;
606+
justify-content: space-between;
607+
gap: 12px;
608+
color: var(--ds-text-muted);
609+
font-size: 12px;
610+
}
611+
.cockpit-control-plane button:focus-visible,
612+
.cockpit-control-plane a:focus-visible,
613+
.cockpit-mobile-control-plane button:focus-visible,
614+
.cockpit-mobile-control-plane a:focus-visible {
615+
outline: 2px solid var(--ds-accent);
616+
outline-offset: 2px;
617+
}
618+
619+
/* Adaptive mobile drawer */
620+
.cockpit-mobile-control-plane {
621+
background: color-mix(in srgb, var(--ds-text-primary) 18%, transparent);
622+
opacity: 1;
623+
transition: opacity 150ms ease;
624+
}
625+
.cockpit-mobile-control-plane[data-state="closing"] { opacity: 0; }
626+
.cockpit-mobile-control-plane-panel {
627+
width: 100%;
628+
max-width: 360px;
629+
height: 100%;
630+
min-width: 0;
631+
display: grid;
632+
grid-template-rows: auto minmax(0, 1fr);
633+
background: var(--ds-surface);
634+
transform: translateY(0);
635+
transition: transform 200ms ease-out;
636+
}
637+
.cockpit-mobile-control-plane[data-state="closing"] .cockpit-mobile-control-plane-panel {
638+
transform: translateY(8px);
639+
}
640+
.cockpit-mobile-control-plane-header {
641+
min-height: 48px;
642+
padding: 8px 12px 8px 16px;
643+
border-bottom: 1px solid var(--ds-border);
644+
display: flex;
645+
align-items: center;
646+
justify-content: space-between;
647+
color: var(--ds-text-secondary);
648+
font-size: 13px;
649+
font-weight: 600;
650+
}
651+
.cockpit-mobile-control-plane-header button {
652+
width: 40px;
653+
height: 40px;
654+
border: 0;
655+
border-radius: 8px;
656+
display: inline-flex;
657+
align-items: center;
658+
justify-content: center;
659+
color: var(--ds-text-muted);
660+
background: transparent;
661+
}
662+
.cockpit-control-plane[data-mobile] {
663+
grid-template-columns: 56px minmax(0, 1fr);
664+
min-height: 0;
665+
}
666+
.cockpit-control-plane[data-mobile] [data-control-plane-pane] { border-right: 0; }
667+
@media (pointer: coarse) {
668+
.cockpit-control-plane [data-control-plane-rail-item],
669+
.cockpit-control-plane [data-control-plane-section-trigger],
670+
.cockpit-control-plane [data-control-plane-action],
671+
.cockpit-nav-item,
672+
.cockpit-mobile-control-plane-header button { min-height: 44px; }
673+
.cockpit-control-plane [data-control-plane-action] {
674+
width: 44px;
675+
height: 44px;
676+
}
677+
}
678+
@media (prefers-reduced-motion: reduce) {
679+
.cockpit-control-plane *,
680+
.cockpit-mobile-control-plane,
681+
.cockpit-mobile-control-plane-panel {
682+
scroll-behavior: auto !important;
683+
transition-duration: 0.01ms !important;
684+
animation-duration: 0.01ms !important;
685+
}
686+
}

0 commit comments

Comments
 (0)