svelte-generic-crud-table/dist/global.css

<crud-table> renders object-arrays with options-panel and inline edit per row. Dispatches events for ongoing data handling. As self-containing webcomponent or for Svelte in 60KB

html, body {
	position: relative;
	width: 100%;
	height: 100%;
}

body {
	color: #333;
	margin: 0;
	padding: 8px;
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

a {
	color: rgb(0,100,200);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

a:visited {
	color: rgb(0,80,160);
}

pre {
    background: #f4f4f4;
    border-left: 3px solid #f36d33;
    color: #666;
    page-break-inside: avoid;
    font-family: monospace;
    overflow: auto;
    padding: 1em;
    display: block;
    word-wrap: break-word;
    width: fit-content;
}


/* crud-table from here */
:root {
	--lightgrey1: #f4f4f4;
	--lightgrey2: #efefef;
	--lightgrey3: #e1e1e1;
	--grey1: #bfbfbf;
	--grey2: #999999;
	--grey3: #666666;
	--darkgrey1: #555555;
	--darkgrey2: #333333;
	--darkgrey3: #1f1f1f;
	--button1: #004666;
	--button2: #4A849F;
	--button3: #A4C8D8;
	--textarea-font-size: 1em;
	--textarea-background-color: white;
}

main {
	position: inherit;
}

.handle-detail {
	cursor: pointer;
}

.no-entries {
	width: 100%;
	color: var(--grey3);
	text-align: center;
}

.red:hover {
	fill: red;
	fill-opacity: 80%;
}

.green:hover {
	fill: limegreen;
	fill-opacity: 80%;
}

.blue:hover {
	fill: dodgerblue;
	fill-opacity: 80%;
}

.table {
	display: inline-grid;
	text-align: left;
	border-bottom: 1px solid var(--grey1);
	border-radius: .3em;
}

.thead {
	display: inline-flex;
	padding: 0 2em;
	border-radius: inherit;
	border-bottom: 1px solid var(--grey1);
	min-height: 2em;
}

.row {
	display: inline-flex;
	padding: .5em 2em .5em;
	resize: vertical;
	border-radius: inherit;
	border: 1px solid var(--lightgrey3);
}

.dark {
	background-color: var(--lightgrey2);
}

.row:hover {
	transition: all .1s linear;
	background-color: rgba(0, 0, 0, 0.1);
	border: 1px solid var(--grey1);
}

.td {
	color: var(--darkgrey1);
	border: none;
	font-weight: 100;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	resize: none;
	height: inherit;
}

.td-disabled {
	vertical-align: middle;
	color: var(--darkgrey1);
	font-weight: 200;
	float: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width: calc(100% - 1em);
	padding-left: .5em;
	cursor: auto;
	border: none;
}

.td-disabled:hover {
	background-color: var(--lightgrey1);
}

.headline {
	font-weight: 300;
	resize: horizontal;
	border-radius: inherit;
	line-height: .8em;
}

.headline-name:hover {
	color: var(--darkgrey3);
	font-weight: bolder;
	border-top: 1px solid var(--grey1);
	height: 2em;
}

.headline-name {
	cursor: pointer;
	padding: .5em;
	border-radius: .2em;
	border-top: 1px solid transparent;
}

.options-field {
	width: max-content;
	opacity: 60%;
	resize: inherit;
}

.options {
	float: left;
	position: relative;
	width: fit-content;
	height: 16px;
	cursor: pointer;
	fill: var(--grey2);
	stroke: var(--grey2);
	color: var(--grey2);
	padding-left: .5em;
}

.options:hover {
	color: var(--darkgrey2);
	text-decoration: underline;
}

.options:focus {
	border: none;
	outline: none;
	opacity: 100%;
}

.hidden {
	display: none;
}

.shown {
	display: block;
}

textarea {
	position: relative;
	resize: vertical;
	overflow: hidden;
	width: calc(100% - 1em);
	height: calc(100% - .5em);
	padding-left: .5em;
	background-color: var(--textarea-background-color);
	font-size: var(--textarea-font-size);
	font-weight: 300;
	font-family: inherit;
	text-overflow: ellipsis;
	white-space: pre;
	overflow-y: scroll;
	border: 1px solid var(--lightgrey3);
}

textarea:focus {
	outline: none;
	font-weight: 200;
	white-space: normal;
	overflow: auto;
}

textarea:not(:focus) {
	height: calc(100% - .5em);
}