custom dark theme i actually like...finally; various frontend tweaks;

- footer: full-width to match header; remove bottom border
- extraneous padding removed from some tx lists
- fix some card-body wrapping issues for paginations at bottom

public/css/dark-touchups.css

@@ -0,0 +1,15 @@
+hr {
+	background-color: #555555;
+}
+
+.hljs-attr {
+	color: #eeeeee;
+}
+
+.hljs, .hljs-subst {
+	color: #dddddd;
+}
+
+.hljs-type, .hljs-string, .hljs-number, .hljs-selector-id, .hljs-selector-class, .hljs-quote, .hljs-template-tag, .hljs-deletion {
+	color: #95dbc6;
+}

public/css/styling.css

@@ -240,3 +240,7 @@ footer a:hover {
 .table-striped>tbody>tr:nth-child(odd)>th {
 	/*background-color: #fbfbfb;*/
 }
+
+.hljs-type, .hljs-string, .hljs-number, .hljs-selector-id, .hljs-selector-class, .hljs-quote, .hljs-template-tag, .hljs-deletion {
+	color: #3aa54f;
+}

views/address.pug

@@ -75,7 +75,7 @@ block content
 
 			if (false)
 				pre
-					code(class="json") #{JSON.stringify(addressObj, null, 4)}
+					code(class="json bg-light") #{JSON.stringify(addressObj, null, 4)}
 			
 			ul(class='nav nav-tabs mb-3')
 				li(class="nav-item")
@@ -152,7 +152,7 @@ block content
 												
 												if (false)
 													pre
-														code(class="json") #{JSON.stringify(firstSeenTransaction)}
+														code(class="json bg-light") #{JSON.stringify(firstSeenTransaction)}
 
 									if (balance)
 										if (balance.conflictedResults)
@@ -287,8 +287,8 @@ block content
 
 								each tx, txIndex in transactions
 									//pre
-									//	code(class="json") #{JSON.stringify(tx, null, 4)}
+									//	code(class="json bg-light") #{JSON.stringify(tx, null, 4)}
-									div(class="xcard mb-3")
+									div(class=("xcard bg-light rounded shadow-sm " + ((txIndex < (transactions.length - 1) || txids.length > limit) ? "mb-4" : "")))
 										div(class="card-header monospace clearfix")
 											div(class="float-left", style="margin-right: 0px;")
 												if (sort == "desc")
@@ -345,7 +345,7 @@ block content
 							
 							if (false)
 								pre
-									code(class="json") #{JSON.stringify(transactions, null, 4)}
+									code(class="json bg-light") #{JSON.stringify(transactions, null, 4)}
 
 							if (!crawlerBot && txids && txids.length > limit)
 								- var pageNumber = offset / limit + 1;
@@ -368,15 +368,15 @@ block content
 					div(class="highlight")
 						h4 Node.ValidateAddress
 						pre
-							code(class="json", data-lang="json") #{JSON.stringify(result.validateaddress, null, 4)}
+							code(class="json bg-light", data-lang="json") #{JSON.stringify(result.validateaddress, null, 4)}
 
 						if (config.electrumXServers && config.electrumXServers.length > 0)
 							h4 Electrum.Balance
 							pre
-								code(class="json", data-lang="json") #{JSON.stringify(electrumBalance, null, 4)}
+								code(class="json bg-light", data-lang="json") #{JSON.stringify(electrumBalance, null, 4)}
 
 							h4 Electrum.History
 							pre
-								code(class="json", data-lang="json") #{JSON.stringify(electrumHistory, null, 4)}
+								code(class="json bg-light", data-lang="json") #{JSON.stringify(electrumHistory, null, 4)}
 
 		

views/browser.pug

@@ -43,7 +43,7 @@ block content
 									h5(class="mt-3") Result
 
 									pre(style="border: solid 1px #ccc;")
-										code(class="json", data-lang="json") #{JSON.stringify(methodResult, null, 4)}
+										code(class="json bg-light", data-lang="json") #{JSON.stringify(methodResult, null, 4)}
 
 								hr
 
@@ -86,11 +86,11 @@ block content
 
 						div(id="tab-help-content", class="tab-pane", role="tabpanel")
 							pre
-								code(data-lang="txt", class="json") #{methodhelp.string}
+								code(data-lang="txt", class="json bg-light") #{methodhelp.string}
 
 						div(id="tab-parsed-args", class="tab-pane", role="tabpanel")
 							pre
-								code(data-lang="json", class="json") #{JSON.stringify(methodhelp.args, null, 4)}
+									code(data-lang="json", class="json bg-light") #{JSON.stringify(methodhelp.args, null, 4)}
 
 					
 							

views/includes/block-content.pug

@@ -210,8 +210,8 @@ div(class="tab-content")
 			div(class="card-body")
 				each tx, txIndex in result.transactions
 					//pre
-					//	code(class="json") #{JSON.stringify(tx, null, 4)}
+					//	code(class="json bg-light") #{JSON.stringify(tx, null, 4)}
-					div(class="xcard mb-4 bg-light rounded shadow-sm")
+					div(class=("xcard bg-light rounded shadow-sm " + ((txIndex < (result.transactions.length - 1) || txCount > limit) ? "mb-4" : "")))
 						div(class="card-header monospace")
 							if (tx && tx.txid)
 								span ##{(txIndex + offset + 1).toLocaleString()}
@@ -225,7 +225,7 @@ div(class="tab-content")
 									
 						div(class="card-body px-lg-3 px-2")
 							//pre
-							//	code(class="json") #{JSON.stringify(result.txInputsByTransaction[tx.txid], null, 4)}
+							//	code(class="json bg-light") #{JSON.stringify(result.txInputsByTransaction[tx.txid], null, 4)}
 							if (true)
 								- var txInputs = result.txInputsByTransaction[tx.txid];
 								- var blockHeight = result.getblock.height;
@@ -233,21 +233,21 @@ div(class="tab-content")
 								include ./transaction-io-details.pug
 								
 					//pre
-					//	code(class="json") #{JSON.stringify(tx, null, 4)}
+					//	code(class="json bg-light") #{JSON.stringify(tx, null, 4)}
 
-			if (!crawlerBot && txCount > limit)
+				if (!crawlerBot && txCount > limit)
-				- var pageNumber = offset / limit + 1;
+					- var pageNumber = offset / limit + 1;
-				- var pageCount = Math.floor(txCount / limit);
+					- var pageCount = Math.floor(txCount / limit);
-				- if (pageCount * limit < txCount) {
+					- if (pageCount * limit < txCount) {
-					- pageCount++;
+						- pageCount++;
-				- }
+					- }
-				- var paginationUrlFunction = function(x) {
+					- var paginationUrlFunction = function(x) {
-					- return paginationBaseUrl + "?limit=" + limit + "&offset=" + ((x - 1) * limit);
+						- return paginationBaseUrl + "?limit=" + limit + "&offset=" + ((x - 1) * limit);
-				- }
+					- }
 					
-				hr
+					hr
 
-				include ./pagination.pug
+					include ./pagination.pug
 					
 	div(id="tab-json", class="tab-pane", role="tabpanel")
 		- var blockDetails = JSON.parse(JSON.stringify(result.getblock));
@@ -262,9 +262,9 @@ div(class="tab-content")
 		div(class="tab-content")
 			div(id="tab-json-block-summary", class="tab-pane active", role="tabpanel")
 				pre
-					code(class="json") #{JSON.stringify(blockDetails, null, 4)}
+					code(class="json bg-light") #{JSON.stringify(blockDetails, null, 4)}
 
 			div(id="tab-json-tx-ids", class="tab-pane", role="tabpanel")
 				pre
-					code(class="json") #{JSON.stringify(result.getblock.tx, null, 4)}
+					code(class="json bg-light") #{JSON.stringify(result.getblock.tx, null, 4)}
 

views/includes/blocks-list.pug

@@ -30,7 +30,7 @@ div(class="table-responsive")
 						td(class="data-cell monospace text-right") #{timeAgo.format()}
 						td(class="data-cell monospace")
 							if (block.miner && block.miner.name)
-								span(data-toggle="tooltip", title=("Identified by: " + block.miner.identifiedBy), class="rounded bg-primary text-light px-2 py-1") #{block.miner.name}
+								span(data-toggle="tooltip", title=("Identified by: " + block.miner.identifiedBy), class="rounded bg-primary px-2 py-1") #{block.miner.name}
 							else
 								span ?
 

views/includes/donation-modal.pug

@@ -12,7 +12,7 @@
 					h6
 						span(class="mr-2") Donate via  
 						img(src="/img/logo/btcpay.png", alt="BTCPay", style="height: 30px;", class="mr-2")
-						a(class="text-dark", href="https://github.com/btcpayserver/btcpayserver") BTCPay
+						a(href="https://github.com/btcpayserver/btcpayserver") BTCPay
 					- var amounts = [1, 5, 10, 25, 100];
 					- var icons = [ "thumbs-up", "beer", "hamburger", "utensils", "grin-hearts" ];
 					div(class="mb-2")

views/includes/line-graph.pug

@@ -2,6 +2,14 @@ script(src="/js/chart.bundle.min.js", integrity="sha384-e4YKd0O/y4TmH7qskMQzKnOr
 
 canvas(id=graphData.id, class="mb-4")
 
+if (session.uiTheme && session.uiTheme == "dark")
+	script.
+		Chart.defaults.global.defaultFontColor='white';
+else
+	script.
+		Chart.defaults.global.defaultFontColor='black';
+
+
 script.
 	Chart.defaults.global.elements.point.radius = 1;
 	var ctx = document.getElementById("#{graphData.id}").getContext('2d');

views/includes/transaction-io-details.pug

@@ -39,7 +39,7 @@ div(class="row monospace")
 							div(class="row pr-3")
 								div(class="tx-io-desc")
 									if (txVin.coinbase)
-										span(class="rounded bg-primary text-light px-2 py-1 mr-2") coinbase
+										span(class="rounded bg-primary text-white px-2 py-1 mr-2") coinbase
 										span Newly minted coins
 									else
 										if (vout && vout.scriptPubKey && vout.scriptPubKey.addresses)
@@ -163,7 +163,7 @@ div(class="row monospace")
 
 									else if (vout.scriptPubKey.hex && vout.scriptPubKey.hex.startsWith('6a24aa21a9ed'))
 										span(class="monospace")
-											span(class="rounded bg-dark text-light px-2 py-1 mr-2") OP_RETURN
+											span(class="rounded bg-primary text-white px-2 py-1 mr-2") OP_RETURN
 											span(title="Segregated Witness", data-toggle="tooltip") SegWit 
 											span committment 
 
@@ -172,7 +172,7 @@ div(class="row monospace")
 
 									else if (vout.scriptPubKey.asm && vout.scriptPubKey.asm.startsWith('OP_RETURN '))
 										span(class="monospace")
-											span(class="rounded bg-dark text-light px-2 py-1 mr-2") OP_RETURN
+											span(class="rounded bg-primary text-white px-2 py-1 mr-2") OP_RETURN
 											span #{utils.hex2ascii(vout.scriptPubKey.asm.substring("OP_RETURN ".length))}
 
 									else

views/layout.pug

@@ -5,17 +5,19 @@ html(lang="en")
 		meta(name="csrf-token", content=csrfToken)
 		meta(name="viewport", content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, shrink-to-fit=no")
 		
+		link(rel="stylesheet", href="/css/fonts.css", integrity="sha384-XOmmu8j3C2MFUXRVGg8VWYNwlhEkSNb0rW/4e7bi3F56S6PejEmBUQDGZofQyjbL")
+		link(rel="stylesheet", href="/css/highlight.min.css", integrity="sha384-zhIsEafzyQWHSoMCQ4BfT8ZlRXQyIFwAHAJn32PNdsb8n6tVysGZSLpEEIvCskw4")
+		link(rel="stylesheet", href="/css/radial-progress.css", type="text/css", integrity="sha384-rVsl/jqFJiDta9jRFygvgOlJOMkXmhlPQa0+JRofBRdvy/mWU2ZPovkF6cCXzcjl")
+
+
 		if (session.uiTheme && session.uiTheme == "dark")
-			link(rel="stylesheet", href="/css/bootstrap-dark.css", integrity="sha384-FBPbZPVh+7ks5JJ70RJmIaqyGnvMbeJ5JQfEbW0Ac6ErfvEg9yG56JQJuMNptWsH")
+			link(rel="stylesheet", href="/css/bootstrap-dark-2.css", integrity="")
+			link(rel="stylesheet", href="/css/dark-touchups.css", integrity="")
 				
-			style.
-				hr { background-color: #555555; }
 		else
 			link(rel="stylesheet", href="/css/bootstrap.min.css", integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T")
 
-		link(rel="stylesheet", href="/css/fonts.css", integrity="sha384-XOmmu8j3C2MFUXRVGg8VWYNwlhEkSNb0rW/4e7bi3F56S6PejEmBUQDGZofQyjbL")
+		
-		link(rel="stylesheet", href="/css/highlight.min.css", integrity="sha384-zhIsEafzyQWHSoMCQ4BfT8ZlRXQyIFwAHAJn32PNdsb8n6tVysGZSLpEEIvCskw4")
-		link(rel="stylesheet", href="/css/radial-progress.css", type="text/css", integrity="sha384-rVsl/jqFJiDta9jRFygvgOlJOMkXmhlPQa0+JRofBRdvy/mWU2ZPovkF6cCXzcjl")
 		link(rel='stylesheet', href='/css/styling.css')
 
 		link(rel="icon", type="image/png", href=("/img/logo/" + config.coin.toLowerCase() + ".png"))
@@ -122,44 +124,44 @@ html(lang="en")
 			if (config.demoSite)
 				include ./includes/donation-modal.pug
 
-			footer(class="footer border-top border-bottom border-primary bg-dark text-light pt-3 pb-1 px-3", style="margin-top: 50px; border-width: 5px !important;")
+		footer(class="footer border-top border-primary bg-dark pt-3 pb-1 px-3 text-white", style="margin-top: 50px; border-width: 5px !important;")
-				div(class="container")
+			div(class="container")
-					div(class="row")
+				div(class="row")
-						div(class="col-md-5")
+					div(class="col-md-5")
-							dl
+						dl
-								dt Source
+							dt Source
+							dd
+								a(href="https://github.com/janoside/btc-rpc-explorer") github.com/janoside/btc-rpc-explorer
+
+							if (sourcecodeVersion)
+								dt Running Version
 								dd
-									a(href="https://github.com/janoside/btc-rpc-explorer") github.com/janoside/btc-rpc-explorer
+									a(href=("https://github.com/janoside/btc-rpc-explorer/commit/" + sourcecodeVersion)) #{sourcecodeVersion}
-
+									span(style="color: #ccc;")  (#{sourcecodeDate})
-								if (sourcecodeVersion)
+
-									dt Running Version
+							if (config.demoSite)
-									dd
+								dt Public Demos
-										a(href=("https://github.com/janoside/btc-rpc-explorer/commit/" + sourcecodeVersion)) #{sourcecodeVersion}
-										span(style="color: #ccc;")  (#{sourcecodeDate})
-
-								if (config.demoSite)
-									dt Public Demos
-									dd
-										if (coinConfig.demoSiteUrl)
-											a(href=coinConfig.demoSiteUrl) #{coinConfig.demoSiteUrl}
-										else
-											a(href="https://btc-explorer.chaintools.io") https://btc-explorer.chaintools.io
-										
-										div(class="mt-2")
-											- var demoSiteCoins = ["BTC", "LTC"];
-											each demoSiteCoin in demoSiteCoins
-												a(href=coinConfigs[demoSiteCoin].demoSiteUrl, class="mr-2", title=coinConfigs[demoSiteCoin].siteTitle)
-													img(src=("/img/logo/" + demoSiteCoin.toLowerCase() + ".svg"), alt=demoSiteCoin.toLowerCase())
-
-											a(href="https://lightning.chaintools.io", class="mr-2", title="Lightning Explorer")
-												img(src=("/img/logo/lightning.svg"), style="width: 32px; height: 32px;", alt="lightning")
-
-						div(class="col-md-7 text-md-right")
-							dl
 								dd
-									button.btn.btn-primary(type="button", class="btn btn-primary", data-toggle="modal", data-target="#exampleModalCenter")
+									if (coinConfig.demoSiteUrl)
-										i(class="fas fa-heart mr-2")
+										a(href=coinConfig.demoSiteUrl) #{coinConfig.demoSiteUrl}
-										span Support Development
+									else
+										a(href="https://btc-explorer.chaintools.io") https://btc-explorer.chaintools.io
+									
+									div(class="mt-2")
+										- var demoSiteCoins = ["BTC", "LTC"];
+										each demoSiteCoin in demoSiteCoins
+											a(href=coinConfigs[demoSiteCoin].demoSiteUrl, class="mr-2", title=coinConfigs[demoSiteCoin].siteTitle)
+												img(src=("/img/logo/" + demoSiteCoin.toLowerCase() + ".svg"), alt=demoSiteCoin.toLowerCase())
+
+										a(href="https://lightning.chaintools.io", class="mr-2", title="Lightning Explorer")
+											img(src=("/img/logo/lightning.svg"), style="width: 32px; height: 32px;", alt="lightning")
+
+					div(class="col-md-7 text-md-right")
+						dl
+							dd
+								button.btn.btn-primary(type="button", class="btn btn-primary", data-toggle="modal", data-target="#exampleModalCenter")
+									i(class="fas fa-heart mr-2")
+									span Support Development
 		
 		script(src="/js/jquery.min.js", integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=")
 		script(src="/js/popper.min.js", integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut")

views/mempool-summary.pug

@@ -9,7 +9,7 @@ block content
 
 	if (false)
 		pre
-			code(class="json") #{JSON.stringify(mempoolstats, null, 4)}
+			code(class="json bg-light") #{JSON.stringify(mempoolstats, null, 4)}
 
 	if (true)
 		div(class="card mb-3 shadow-sm")

views/node-status.pug

@@ -18,7 +18,7 @@ block content
 
 		if (false)
 			pre
-				code(class="json") #{JSON.stringify(getblockchaininfo, null, 4)}
+				code(class="json bg-light") #{JSON.stringify(getblockchaininfo, null, 4)}
 
 		ul(class='nav nav-tabs mb-3')
 			li(class="nav-item")
@@ -123,14 +123,14 @@ block content
 				div(class="tab-content")
 					div(id="tab-getblockchaininfo", class="tab-pane active", role="tabpanel")
 						pre
-							code(class="json", data-lang="json") #{JSON.stringify(getblockchaininfo, null, 4)}
+							code(class="json bg-light", data-lang="json") #{JSON.stringify(getblockchaininfo, null, 4)}
 
 					div(id="tab-getnettotals", class="tab-pane", role="tabpanel")
 						pre
-							code(class="json", data-lang="json") #{JSON.stringify(getnettotals, null, 4)}
+							code(class="json bg-light", data-lang="json") #{JSON.stringify(getnettotals, null, 4)}
 
 					div(id="tab-getnetworkinfo", class="tab-pane", role="tabpanel")
 						pre
-							code(class="json", data-lang="json") #{JSON.stringify(getnetworkinfo, null, 4)}
+							code(class="json bg-light", data-lang="json") #{JSON.stringify(getnetworkinfo, null, 4)}
 							
 										

views/peers.pug

@@ -141,14 +141,14 @@ block content
 				div(style="display: none;", id=("peerinfo_" + index), class="p-3")
 					h6 Peer Details
 					pre
-						code(class="json") #{JSON.stringify(item, null, 4)}
+						code(class="json bg-light") #{JSON.stringify(item, null, 4)}
 
 					if (peerIpSummary && peerIpSummary.detailsByIp && peerIpSummary.detailsByIp[item.addr.substring(0, item.addr.lastIndexOf(":"))])
 						hr
 
 						h6 IP Geo-Location Info
 						pre
-							code(class="json") #{JSON.stringify(peerIpSummary.detailsByIp[item.addr.substring(0, item.addr.lastIndexOf(":"))], null, 4)}
+							code(class="json bg-light") #{JSON.stringify(peerIpSummary.detailsByIp[item.addr.substring(0, item.addr.lastIndexOf(":"))], null, 4)}
 
 	
 block endOfBody

views/transaction.pug

@@ -199,11 +199,11 @@ block content
 							h2(class="h6 mb-0") Coinbase
 						div(class="card-body")
 							h6 Hex
-							div(style="background-color: #f0f0f0; padding: 5px 10px;", class="mb-3")
+							div(class="bg-light px-4 py-3 mb-3")
 								span(class="monospace word-wrap") #{result.getrawtransaction.vin[0].coinbase}
 
 							h6 Decoded
-							div(style="background-color: #f0f0f0; padding: 5px 10px;", class="mb-3")
+							div(class="bg-light px-4 py-3 mb-3")
 								span(class="monospace word-wrap") #{utils.hex2ascii(result.getrawtransaction.vin[0].coinbase)}
 
 				div(class="card mb-3 shadow-sm")
@@ -259,7 +259,7 @@ block content
 
 											else if (vin.coinbase)
 												div(class="monospace", style="line-height: 1.75em;")
-													span(class="rounded bg-primary text-light px-2 py-1 mr-2") coinbase
+													span(class="rounded bg-primary text-white px-2 py-1 mr-2") coinbase
 													br
 													span(class="word-wrap") #{vin.coinbase}
 													br
@@ -292,7 +292,7 @@ block content
 			div(id="tab-json", class="tab-pane", role="tabpanel")
 				div(class="highlight")
 					pre
-						code(class="json", data-lang="json") #{JSON.stringify(result.getrawtransaction, null, 4)}
+						code(class="json bg-light", data-lang="json") #{JSON.stringify(result.getrawtransaction, null, 4)}
 
 				//pre #{JSON.stringify(result.txInputs, null, 4)}
 

views/tx-stats.pug

@@ -9,7 +9,7 @@ block content
 
 	if (false)
 		pre
-			code(class="json") #{JSON.stringify(txStatResults, null, 4)}
+			code(class="json bg-light") #{JSON.stringify(txStatResults, null, 4)}
 
 	if (true)
 		if (false)

views/unconfirmed-transactions.pug

@@ -24,7 +24,7 @@ block content
 
 			div(class="card-body")
 				each tx, txIndex in mempoolDetails.transactions
-					div(class="xcard mb-4 bg-light rounded shadow-sm")
+					div(class="xcard bg-light rounded shadow-sm mb-4")
 						div(class="card-header monospace")
 							if (tx && tx.txid)
 								strong ##{(txIndex + offset).toLocaleString()}