components.css
No OneTemporary
Actions

Size

1 KB

Referenced Files

None

Subscribers

None

components.css
View Options

	.title--components {
	body {
	max-width: none;
	}

	.two-column {
	display: grid;
	grid-template-columns: 1fr 15px min-content;
	}

	.resize-gutter {
	background-color: gray;
	cursor: ew-resize;
	height: 100%;
	}

	.resizable {
	overflow-x: auto;
	}

	transition: transform 200ms, opacity 200ms;
	&.restarting {
	transform: scale(0.99);
	opacity: 0.6;
	}

	.component-preview {
	width: var(--resizable-column-width);

	& > fieldset {
	min-width: 0; /* default is min-content and that causes overflow*/
	max-height: calc(100vh - 75px);
	overflow-x: auto;
	}
	}
	.component-arguments {
	max-height: calc(100vh - 80px);
	overflow-y: auto;
	}
	}

	.component-preview-parameters {
	fieldset {
	background-color: #80808024;

	table {
	td,
	th {
	outline: 0.5px solid #0000006b;

	&.subdued > * {
	opacity: 50%;
	}

	&.subdued:hover > * {
	opacity: 100%;
	}

	&.sticky {
	position: sticky;
	background-color: #ececec;
	}

	&.sticky--left {
	left: 0;
	box-shadow: 5px 0px 10px -4px #00000047;
	}

	&.sticky--top {
	top: 0;
	box-shadow: 0px 5px 10px -4px #00000047;
	}
	}
	}
	}
	}

	.component-preview {
	* {
	transition: all 150ms;
	}
	container-type: inline-size;
	}

	@media (scripting: none) {
	body {
	min-width: max-content;
	}
	}

	.component-preview-size-select {
	margin-left: 10px;
	}