← All changes | assets/css/openstation-layout.css +44 -24 1.1.5 → 1.1.13 View file →

		@@ -27,8 +27,9 @@
27	27	}
28	28
29	29	.os-constellation {
30	30	position: fixed;
	31	+ font-family: var( --os-cn-font, inherit );
31	32	z-index: var( --os-cn-z, 2147483000 );
32	33	/*
33	34	* `--os-cn-shift` is written by the clamp when the panel would
34	35	* have overflowed a viewport edge; the beam compensates with
		@@ -214,10 +215,10 @@
214	215	*/
215	216	padding: 6px;
216	217	border-radius: var( --os-cn-radius, 14px );
217	218	background-color: var( --os-cn-surface, rgba( 26, 23, 33, 0.82 ) );
218		- backdrop-filter: blur( 28px ) saturate( 170% );
219		- -webkit-backdrop-filter: blur( 28px ) saturate( 170% );
	219	+ backdrop-filter: var( --os-cn-backdrop, blur( 28px ) saturate( 170% ) );
	220	+ -webkit-backdrop-filter: var( --os-cn-backdrop, blur( 28px ) saturate( 170% ) );
220	221	box-shadow: var(
221	222	--os-cn-shadow,
222	223	0 24px 64px rgba( 0, 0, 0, 0.62 ),
223	224	0 2px 8px rgba( 0, 0, 0, 0.4 )
		@@ -240,12 +241,16 @@
240	241	content: "";
241	242	position: absolute;
242	243	inset: 0;
243	244	border-radius: inherit;
244		- background: radial-gradient(
245		- 220px circle at var( --os-cn-x, 50% ) var( --os-cn-y, 0% ),
246		- hsl( var( --os-cn-hue, 300 ) 90% 70% / 0.14 ) 0%,
247		- transparent 70%
	245	+ /* `--os-cn-spotlight: none` for a flat panel. */
	246	+ background: var(
	247	+ --os-cn-spotlight,
	248	+ radial-gradient(
	249	+ 220px circle at var( --os-cn-x, 50% ) var( --os-cn-y, 0% ),
	250	+ hsl( var( --os-cn-hue, 300 ) 90% 70% / 0.14 ) 0%,
	251	+ transparent 70%
	252	+ )
248	253	);
249	254	mix-blend-mode: screen;
250	255	pointer-events: none;
251	256	}
		@@ -309,13 +314,17 @@
309	314	.os-constellation__sheen::before {
310	315	content: "";
311	316	position: absolute;
312	317	inset: -40% -120%;
313		- background: linear-gradient(
314		- 104deg,
315		- transparent 42%,
316		- rgba( 255, 253, 255, 0.42 ) 50%,
317		- transparent 58%
	318	+ /* `--os-cn-sheen: none` for a panel that opens without the sweep. */
	319	+ background: var(
	320	+ --os-cn-sheen,
	321	+ linear-gradient(
	322	+ 104deg,
	323	+ transparent 42%,
	324	+ rgba( 255, 253, 255, 0.42 ) 50%,
	325	+ transparent 58%
	326	+ )
318	327	);
319	328	transform: translateX( -60% );
320	329	}
321	330
		@@ -418,13 +427,13 @@
418	427	* before the scrollable group in the middle gave way. */
419	428	flex: 0 0 auto;
420	429	padding: 8px 10px;
421	430	border: none;
422		- border-radius: 9px;
	431	+ border-radius: var( --os-cn-row-radius, 9px );
423	432	background: transparent;
424	433	color: inherit;
425	434	font: inherit;
426		- font-size: 13px;
	435	+ font-size: var( --os-cn-font-size, 13px );
427	436	line-height: 1.3;
428	437	text-align: start;
429	438	cursor: pointer;
430	439	/*
		@@ -534,9 +543,9 @@
534	543	justify-content: center;
535	544	flex: 0 0 auto;
536	545	width: 34px;
537	546	height: 34px;
538		- border-radius: 10px;
	547	+ border-radius: var( --os-cn-head-icon-radius, 10px );
539	548	color: var( --os-ui-holo-ink, #0c0b0f );
540	549	/*
541	550	* The head's icon is the panel's second identity moment — the
542	551	* menu, stated. It wears the mesh permanently (unlike the rows,
		@@ -543,15 +552,21 @@
543	552	* which earn it under the pointer) because there is exactly one
544	553	* head per panel and it is the thing the panel is about.
545	554	*/
546	555	background-image: var(
547		- --os-cn-row-fill,
548		- var( --os-ui-holo-fill, linear-gradient( 124deg, #afa2e8, #c3b8ef ) )
	556	+ --os-cn-head-icon-fill,
	557	+ var(
	558	+ --os-cn-row-fill,
	559	+ var( --os-ui-holo-fill, linear-gradient( 124deg, #afa2e8, #c3b8ef ) )
	560	+ )
549	561	);
550	562	box-shadow: var(
551		- --os-ui-holo-glow,
552		- 0 0 0 1px rgba( 217, 46, 227, 0.2 ),
553		- 0 2px 10px rgba( 217, 46, 227, 0.15 )
	563	+ --os-cn-head-icon-shadow,
	564	+ var(
	565	+ --os-ui-holo-glow,
	566	+ 0 0 0 1px rgba( 217, 46, 227, 0.2 ),
	567	+ 0 2px 10px rgba( 217, 46, 227, 0.15 )
	568	+ )
554	569	);
555	570	}
556	571
557	572	.os-constellation__head-icon .dashicons {
		@@ -599,10 +614,10 @@
599	614	.os-constellation__head-title {
600	615	overflow: hidden;
601	616	text-overflow: ellipsis;
602	617	white-space: nowrap;
603		- font-size: 14px;
604		- font-weight: 600;
	618	+ font-size: var( --os-cn-title-size, 14px );
	619	+ font-weight: var( --os-cn-title-weight, 600 );
605	620	}
606	621
607	622
608	623	/* ---- Groups ------------------------------------------------------ */
		@@ -655,10 +670,15 @@
655	670	width: 8px;
656	671	height: 8px;
657	672	margin-inline-start: 3px;
658	673	border-radius: 50%;
659		- background: hsl( var( --os-cn-row-hue, 300 ) 80% 70% );
660		- box-shadow: 0 0 0 3px hsl( var( --os-cn-row-hue, 300 ) 80% 70% / 0.16 );
	674	+ /* `currentColor` makes every dot the row's own ink, which follows
	675	+ * the row into its highlighted state. */
	676	+ background: var( --os-cn-orbit, hsl( var( --os-cn-row-hue, 300 ) 80% 70% ) );
	677	+ box-shadow: var(
	678	+ --os-cn-orbit-halo,
	679	+ 0 0 0 3px hsl( var( --os-cn-row-hue, 300 ) 80% 70% / 0.16 )
	680	+ );
661	681	transition: box-shadow var( --os-ui-motion-fast, 140ms ) ease-out;
662	682	}
663	683
664	684	.os-constellation__row--sub:hover .os-constellation__orbit,
		@@ -663,9 +683,9 @@
663	683
664	684	.os-constellation__row--sub:hover .os-constellation__orbit,
665	685	.os-constellation__row--sub:focus-visible .os-constellation__orbit {
666	686	/* On the mesh the halo would disappear; a Void ring reads instead. */
667		- box-shadow: 0 0 0 3px rgba( 12, 11, 15, 0.25 );
	687	+ box-shadow: var( --os-cn-orbit-halo-hover, 0 0 0 3px rgba( 12, 11, 15, 0.25 ) );
668	688	}
669	689
670	690	/* ---- Live-window rows -------------------------------------------- */
671	691