Pinboard Dark

Dark theme for Pinboard with some other QOL tweaks

/* ==UserStyle==
@name        Pinboard Dark
@description Dark theme for Pinboard with some other QOL tweaks
@version     1.1.2
@namespace   https://codeberg.org/locrian/userstyles
==/UserStyle== */

@-moz-document domain("pinboard.in") {

	body#pinboard,
	body[onload="init();"],
	div#banner {
		background: #222 !important;
		color: #fff !important;
		font-size: 1em;
		max-width: 95% !important;
	}
	
	textarea {
		max-width: 40% !important;
		color: #000 !important;
	}
	
	div.description {
		color: #fff !important;
		padding: 7px;
	}
	
	div.footer {
		padding-bottom: 5px !important;
	}
	
	img.pin_logo {
		width: 0 !important;
		height: 0 !important;
		background: none !important;
		background-repeat: no-repeat !important;
		padding: 16px 16px 0px 0px !important;
		vertical-align: text-top !important;
		background-image: url(https://pinboard.in/bluepin.gif) !important; 
	}
	
	a {
		color: #90c8f1 !important;
	}
	
	a.tag {
		line-height: 100% !important;
	}
	
	div.display a {
		line-height: 20px;
	}
	
	div.display a.tag,
	a.rss_link,
	div#bundle_names a.bundle,
	a[onclick="cancel_form()"],
	div[id^="delete"] a {
		color: #f64848 !important;
	}
	
	div#banner a,
	div.settings_tab a,
	div.display a.url_display,
	div.display a.when,
	div.display a.edit,
	div.display a.delete_link,
	a.tag_heading_selected,
	a[onclick="bun.select_all()"],
	a[onclick="bun.select_none()"],
	a[onclick="tp.selectAll()"],
	a[onclick="tp.selectNone()"],
	a#show_all_link,
	a#show_unbundled_link,
	a[href="/bundles/create/"],
	div#popup_header a {
		color: #CCC !important;
	}
	
	a.per_page_selected {
		background: none !important;
		font-weight: bold !important;
	}
	
	div.bookmark,
	div.private,
	div.display,
	div#profile_main_column {
		background: #333 !important;
		color: #fff;
	}
	
	div.bookmark,
	div#profile_main_column {
		box-shadow: 1px 1px #555;
		padding: 5px !important;
	}
	
	div#settings_panel {
		background: #333 !important;
		color: #fff;
	}
	
	div#settings_tab_panes {
		border: none !important;
	}
	
	div.settings_tab {
		background: #2a2a2a;
		border: none !important;
		border-left: 2px solid #222 !important;
	}
	
	div.settings_tab_selected {
		background: #000 !important;
		border: none !important;
	}
	
	div.settings_tab_spacer {
		display: none;
	}
	
	h2.settings_heading {
		max-width: 70%;
		background: #222 !important;
		text-align: center;
		padding: 3px;
	}
	
	table {
		max-width: 400px !important;
	}
	
	a.help {
		background: #555 !important;
		color: #2F2 !important;
		padding: 0 3px 0 2px !important;
		font-weight: bold;
		border-radius: 20px;
	}
	
	div#tag_cloud_header p,
	p[style="font-size:1.4em;color:#33a"] {
		color: #ddd !important;
	}
	
	a[style^="background:#"] {
		background: #ab1515 !important;
		color: #fff !important;
		padding: 1px 4px 1px 3px !important;
		border-right: 1px solid #480000 !important;
		border-bottom: 1px solid #480000 !important;
		border-left: 1px solid #d54a4a !important;
		border-top: 1px solid #d54a4a !important;
	}
	
	tt {
		background: #ab1515 !important;
		color: #fff !important;
		padding: 1px 4px 1px 3px !important;
		font-family: monospace !important;
	}
	
	pre {
		color: #CCC !important;
		font-family: monospace !important;
	}
	
	div.help_box,
	div#bundle,
	div#right_column {
		background: #333 !important;
		border: none !important;
		box-shadow: 1px 1px #555;
	}
	
	span.tagNode,
	span.unbundled {
		background: #525 !important;
		border: none !important;
		padding: 1px 3px !important;
		color: #fff !important;
	}
	
	span.tagNode.unbundled {
		color: #a89 !important;
		background: none !important;
	}
	
	span.tagNode.tagSelected {
		background: #255 !important;
		border: none !important;
	}
	
	table[style="width:830px"] {
		width: 100% !important;
		margin: auto;
		background: #333 !important;
		border: none !important;
	}
	
	table[style="width:830px"] td {
		padding: 10px 20px !important;
		margin: 0;
	}
	
	table[style="width:830px"] tr:nth-child( odd ) {
		background: #2a2a2a !important;
	}
	
	body[onload="init();"] table {
		color: #fff !important;
	}
	
	input {
		max-width: 50% !important;
		color: #000;
	}
	
	#searchbox input {
		max-width: 275px !important;
	}
	
	#edit_bookmark_form input,
	#edit_bookmark_form textarea {
		max-width: 750px !important
	}
	
	@media screen and (max-width:640px) {
	
			/* If something looks weird here, it's because 
			 this part of the style is optimized for 
			 SeaMonkey's sidebar. It has also been tested 
			 in Vivaldi's sidebar and works just fine 
			 there. */
	
		body {
			font-size: 18px !important;
		}
	
		.hideable,
		.user_navbar,
		#bmarks_page_nav {
			display: inline !important;
		}
		
		.hidebig {
			display: none !important;
		}
		
		div#content,
		body[onload="init();"] {
			max-width: 99% !important;
		}
		
		body[onload="init();"] table {
			max-width: 200px !important;
		}
		
		body[onload="init();"] table tr,
		body[onload="init();"] table tbody,
		body[onload="init();"] table td,
		body[onload="init();"] table input,
		body[onload="init();"] table textarea {
			max-width: 190px !important;
		}
		
		div.display {
			max-width: 100% !important;
		}
		
		div#edit_bookmark_form {
			background: #333 !important;
		}
	
		#edit_bookmark_form input,
		#edit_bookmark_form textarea {
			max-width: 285px !important;
			margin: 3px 0 !important;
		}
		
		td input {
			display: block !important;
		}
		
		div#note_right_column {
			display: none !important;
		}
	
	}

}