intake/web/html/intake.css

main {
	max-width: 700px;
	margin: 0 auto;
}
article, nav {
	border: 1px solid black; border-radius: 6px;
	padding: 5px;
	margin-bottom: 20px;
	word-break: break-word;
	display: flow-root;
}
.feed-controls {
	font-size: 1.2em;
}
.flex-between {
	display: flex;
	justify-content: space-between;
}
.item-title {
	font-size: 1.4em;
}
.item-title::before, details[open] summary .item-title::before {
	content: "= ";
	opacity: 0.3;
}
summary .item-title::before {
	content: "> ";
}
.item-button {
	font-size: 1em;
	float:right;
	margin-left: 2px;
}
.item-link {
	text-decoration: none;
	float:right;
	font-size: 1em;
	padding: 2px 7px;
	border: 1px solid;
	border-radius: 2px;
}
.item-info {
	opacity: 0.7;
}
details[open] > summary > .item-button, details[open] > summary > .item-link {
	display: none;
}
details ~ .item-button, details ~ .item-link {
	display: none;
}
details[open] ~ .item-button, details[open] ~ .item-link {
	display: inline;
}
article img {
	max-width: 100%;
	height: auto;
}
button, summary {
	cursor: pointer;
}
summary {
	display: block;
}
summary:focus {
	outline: 1px dotted gray;
}
.strikethru span, .strikethru p {
	text-decoration: line-through;
}
.wide {
	width: 100%;
	resize: vertical;
	box-sizing: border-box;
}
.fade > * {
	opacity: 0.2;
}
pre {
	white-space: pre-wrap;
}
table.feed-control td {
	font-family: monospace; padding: 5px 10px;
}
.intake-sources td {
	padding-block: 0.4em;
}
.intake-sources form {
	margin: 0
}
.center {
	text-align: center;
}
article textarea {
	width: 100%;
	resize: vertical;
}
span.error-message {
	color: red;
}