Clean up other CSS styles that apply to elements without a class

[simonw]

Following:

• Opt-in mechanism for CSS on form inputs and buttons #2415

There are still some selectors in app.css that apply to everything in a way that could interfere with what plugins need to do.

• Sort out labels
• Sort out header / footer
• Sort out that a img thing
• Sort out table styles

[simonw]

Form-specific:

datasette/datasette/static/app.css

Lines 517 to 520 in 2170269

	form label {
	font-weight: bold;
	display: inline-block;
	}

What's this about?

datasette/datasette/static/app.css

Lines 225 to 229 in 2170269

	a img {
	display: block;
	max-width: 100%;
	border: 0;
	}

Also notable: header and footer are much less likely to be used separately by a plugin but they do currently carry styles:

datasette/datasette/static/app.css

Lines 268 to 277 in 2170269

	header,
	footer {
	padding: 0.6rem 1rem 0.5rem 1rem;
	background-color: #276890;
	background: linear-gradient(180deg, rgba(96,144,173,1) 0%, rgba(39,104,144,1) 50%);
	color: rgba(255,255,244,0.9);
	overflow: hidden;
	box-sizing: border-box;
	min-height: 2.6rem;
	}

datasette/datasette/static/app.css

Lines 333 to 335 in 2170269

	footer {
	margin-top: 1rem;
	}

[simonw]

Also tables carry some default styles:

datasette/datasette/static/app.css

Lines 455 to 478 in 2170269

	table {
	border-collapse: collapse;
	}
	td {
	border-top: 1px solid #aaa;
	border-right: 1px solid #eee;
	padding: 4px;
	vertical-align: top;
	white-space: pre-wrap;
	}
	td.type-pk {
	font-weight: bold;
	}
	td em {
	font-style: normal;
	font-size: 0.8em;
	color: #aaa;
	}
	th {
	padding-right: 1em;
	}
	table a:link {
	text-decoration: none;
	}

That white-space: pre-wrap; on <td> has caught me out multiple times before.

[simonw]

I'm going to have those table styles only apply to table.rows-and-columns.