Add to Roam UI CSS?

Troubleshooting
1

Someone forgot the CSS definition for tables. Is there a place where I can fix that manually and still be able to update Roam normally? I’ve only found the custom theme value where I can set a couple of colours.

2

How about trying these files?

3

I was hoping to have something that would survive an update. For now I added this to the one in the repos folder that isn’t the font setup.

@import url("/_next/static/css/roam-ui.css");

body,html{padding:0 . . .

That file is then in the directory where everything else is aliased. In my case the 27.2. Didn’t work aliased and be in the repo folder with the actual files.

At least that way I have something I can easily get back. It’s getting kinda nice, I now have like back and forward buttons to navigate my graph :slight_smile:

Caveat, needs a cache wipe from the developer menu, NOT the one that wipes everything, otherwise the tag setups in localStorage are gone too.

4

If someone wants to experiment, I have a DL starting my nodes, followed by a table where the previous / next documents are linked from, the table headings serve as labels. It has a setting for cleaning up normal tables as well.

Here’s my CSS.

:root {
	--accent1: #FFAA61;
}

dl {
	margin-bottom: 2em;
}

dt {
	color: var(--accent1);
	font-weight: bold;
}

.org table {
	width: 100%;
	margin: 1em auto 2em auto;
	table-layout: fixed;
}

dl + table td {
	text-align: center;
	width: 50%;
}

dl + table thead th {
	color: var(--accent1);
	text-transform: uppercase;
	font-size: 0.75em;
}

dl + table tbody td a {
	text-decoration: none;
	text-decoration-line: none !important;
	border: 2pt solid var(--accent1);
	padding: .25em 1em;
	border-radius: 1em;
}

.org .sec h1 {
	color: var(--accent1);
	font-size: 1.25em;
}

.org .sec .headingFlex {
	min-height: 24pt;
	align-items: center;
}

.org .sec button > svg {
	width: 24pt;
	height: 24pt;
	align-self: center;
}
1 Like