@browser.style/gui-panel/index.css

GUI Panel

:host, gui-panel {
	--gui-panel-gap: .5rem;
	--gui-panel-m: 1rem;
	--gui-panel-w: 265px;
	--gui-panel-popover-w: 265;
	--gui-panel-docked-w: 220;
	--gui-panel-icon-sz: 1.25rem;
	--gui-panel-rz-touch: 12px;
	--gui-panel-rz-area: 6px;

	background: var(--gui-panel-bg, Canvas);
	border: 0;
	color: var(--gui-panel-c, CanvasText);
	color-scheme: light dark;
	container-type: inline-size;
	font-family: var(--gui-panel-ff, system-ui, sans-serif);
	font-size: var(--gui-panel-fs, 1rem);
	grid-template-columns: var(--_rzis, var(--gui-panel-rz-area)) 1fr var(--_rzie, var(--gui-panel-rz-area));
	grid-template-rows: var(--_rzbs, var(--gui-panel-rz-area)) min-content minmax(0, 1fr) var(--_rzbe, var(--gui-panel-rz-area));
	inset-block: var(--gui-panel-y, var(--gui-panel-m)) auto;
	inset-inline: var(--gui-panel-x, calc(100% - var(--gui-panel-w) - var(--gui-panel-m))) auto;
	padding: 0;
	max-height: calc(100dvh - (2 * var(--gui-panel-m)));
	min-height: max-content;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
	width: var(--gui-panel-w);
}

:host(:popover-open), gui-panel:popover-open { display: grid }

:host([popover]), gui-panel[popover] {
	border-radius: var(--gui-panel-bdrs, 10px);
	box-shadow: var(--gui-panel-bxsh, 0px 8px 56px 0px color-mix(in srgb, CanvasText, transparent 70%));
	height: var(--gui-panel-h, auto);
	touch-action: none;
}

[hidden] { display: none !important;}
:where(:host([popover]), gui-panel[popover]) slot[name="externalend"],
:where(:host(:not([popover])), gui-panel:not([popover])) slot[name="sidebarend"],
:where(:host([popover]), gui-panel[popover]) slot[name="externalstart"],
:where(:host(:not([popover])), gui-panel:not([popover])) slot[name="sidebarstart"] {
	display: none;
}

/* docked */
:host(:not([popover])[dock]), gui-panel:not([popover])[dock] {
	display: grid;
	header { 
		display: flex;
		[part~="close"],
		[part~="reset"],
		[part="title"] { 
			display: none; 
		}
	}
	[part~="icon-group"] {
		display: contents;
	}
	[part~="resize-block-start"],
	[part~="resize-block-end"] { 
		display: none; 
	}
}

:host(:not([popover])[dock="end"]) header, 
gui-panel:not([popover])[dock="end"] header {
  justify-content: end;
}

/* parts */
[part~="content"] {
	grid-area: 3 / 1 / 4 / 4;
	overflow: auto;
	scrollbar-color: #CCC8 #0000;
	scrollbar-width: thin;
}
[part~="header"] {
	align-items: center;
	display: grid;
	grid-area: 2 / 2 / 3 / 3;
	grid-template-columns: 1fr 2fr 1fr;
	min-height: min-content;
	[part~="icon-group"]:last-of-type {
		justify-content: end;
	}
}
[part~="icon"] {
	fill: none;
	height: var(--gui-panel-icon-sz);
	pointer-events: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2;
	width: var(--gui-panel-icon-sz);
}
[part~="icon-button"] {
	display: inline-grid;
	background: #0000;
	color: inherit;
	border: none;
	border-radius: 50%;
	padding: calc(var(--gui-panel-rz-area) / 2);
}
[part~="icon-group"] {
	display: flex;
	padding-inline: calc(var(--gui-panel-rz-area) / 2);
}
/* [part~="jc-end"] {
	justify-content: end;
} */
[part~="title"] {
	cursor: move;
	font-size: var(--gui-panel-title-fs, 0.875rem);
	font-weight: 500;
	text-align: center;
	transition: all .16s ease;
}

/* position */
:host([position~="bottom"]), gui-panel[position~="bottom"] { 
	inset-block: var(--gui-panel-y, calc(100dvh - var(--gui-panel-h) - var(--gui-panel-m))) auto;
}
:host([position~="center"]), gui-panel[position~="center"] {
	inset-inline: var(--gui-panel-x, calc(50vw - (var(--gui-panel-w) / 2))) auto;
}
:host([position~="left"]), gui-panel[position~="left"] {
	inset-inline: var(--gui-panel-x, var(--gui-panel-m)) auto;
}

/* resize */
[part*="resize-"] {
	display: grid;
}
[part~="resize-block-start"] {
	grid-area: 1 / 1 / 2 / 4;
	place-self: start center;
}
[part~="resize-block-end"] {
	grid-area: 4 / 1 / 5 / 4;
	place-self: end center;
}
:where(:host([resize~="block-start"]), gui-panel[resize~="block-start"]) [part~="resize-block-start"] {
	height: 100%;
	cursor: ns-resize;
	width: 100%;
}
:where(:host([resize~="block-end"]), gui-panel[resize~="block-end"]) [part~="resize-block-end"] {
	height: 100%;
	cursor: ns-resize;
	width: 100%;
}
[part~="resize-inline-start"] {
	grid-area: 1 / 1 / 4 / 2;
}
[part~="resize-inline-end"] {
	grid-area: 1 / 3 / 4 / 4;
}
:where(:host([resize~="inline-start"]), gui-panel[resize~="inline-start"]) [part~="resize-inline-start"],
:where(:host([resize~="inline-end"]), gui-panel[resize~="inline-end"]) [part~="resize-inline-end"] {
	cursor: ew-resize;
}

/* media */
@media (prefers-color-scheme: light) {
	:host(.cs),
	gui-panel.cs { color-scheme: dark; }
}
@media (prefers-color-scheme: dark) {
	:host(.cs),
	gui-panel.cs { color-scheme: light; }
}
@media (hover:hover) {
	[part~="icon-button"]:hover { background: #CCC8; }
	[part~="title"]:hover { font-weight: 700; scale: 1.025; } 
}
@media (pointer: coarse) {
	/* Touch-specific styles */
	:where(:host([resize~="block-start"]), gui-panel[resize~="block-start"]) { --_rzbs: var(--gui-panel-rz-touch); }
	:where(:host([resize~="block-end"]), gui-panel[resize~="block-end"]) { --_rzbe: var(--gui-panel-rz-touch); }
	:where(:host([resize~="inline-start"]), gui-panel[resize~="inline-start"]) { --_rzis: var(--gui-panel-rz-touch); }
	:where(:host([resize~="inline-end"]), gui-panel[resize~="inline-end"]) { --_rzie: var(--gui-panel-rz-touch); }

	:where(:host([resize~="block-start"]), gui-panel[resize~="block-start"]) [part~="resize-block-start"]::before,
	:where(:host([resize~="block-end"]), gui-panel[resize~="block-end"]) [part~="resize-block-end"]::before,
	:where(:host([resize~="inline-start"]), gui-panel[resize~="inline-start"]) [part~="resize-inline-start"]::before,
	:where(:host([resize~="inline-end"]), gui-panel[resize~="inline-end"]) [part~="resize-inline-end"]::before {
		background: #CCC6;
		border-radius: 40px;
		content: '';
		display: block;
	}

	:where(:host([resize~="block-start"]), gui-panel[resize~="block-start"]) [part~="resize-block-start"]::before {
		height: var(--gui-panel-rz-area);
		place-self: end center;
		width: 80px;
	}
	:where(:host([resize~="block-end"]), gui-panel[resize~="block-end"]) [part~="resize-block-end"]::before {
		height: var(--gui-panel-rz-area);
		place-self: start center;
		width: 80px;
	}
	:where(:host([resize~="inline-start"]), gui-panel[resize~="inline-start"]) [part~="resize-inline-start"]::before {
		height: 80px;
		place-self: center end;
		width: var(--gui-panel-rz-area);
	}
	:where(:host([resize~="inline-end"]), gui-panel[resize~="inline-end"]) [part~="resize-inline-end"]::before {
		height: 80px;
		place-self: center start;
		width: var(--gui-panel-rz-area);
	}
}