SS64 / EMW3 Dark Theme Stylesheet

[Qendolin]

Made my own dark theme stylesheet and wanted to share .

Code: Select all

/**
 *  SS64 / EMW3 Dark Theme by Qendolin
 *  v 1.1
 */

/***************************************/
/*          ss64.com/emw3.com          */
/***************************************/

:root {
	--col-text: #dfdfdf;
	--col-text-dim: #999;
	
	--col-bg: #2f3136;
	--col-bg-box: #3c3e43;
	
	--col-btn: #255f80;
	--col-btn-armed: #346682;
	--col-btn-select: #476d8e;
	
	--col-fx-darker: #00000020;
	--col-fx-lighter: #ffffff20;
	
	--col-quote: #56c389;
	
	--col-link: #00b0f4;
	--col-link-visited: #8797d0;
	
	--nav-height: 52px;
}

html {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: var(--nav-height);
	min-height: 100vh;
	background-image: linear-gradient(166deg, #264452, #2c2644);
	background-attachment: fixed;
	overflow: auto;
}

body {
	background: var(--col-bg);
	padding: 1rem;
	display: flex;
	flex-direction: column;
	color: var(--col-text);
	margin: unset;
	width: max-content;
	height: 100%;
	min-height: calc(100vh - var(--nav-height));
	max-width: 100%;
	overflow: auto;
}

* {
	box-sizing: border-box;
	outline: none;
}

::selection {  
	background: slategray;
}

pre {
	padding-inline: 1rem;
	padding-block: 0.25rem;
	width: fit-content;
}

pre, tt, code, .code {
	color: var(--col-text);
	font-family: Monospace;
	font-size: 16.25px; /* 1.25rem; rem behaves strangely with <pre> */
	line-height: 1.2rem;
	background: var(--col-bg-box);
}

i, .quote {
	color: var(--col-quote);
}

.Limited {
	color: var(--col-text-dim);
}

h2 {
	display: inline-block;
	font-family: "Calibri light";
	border-bottom: 2px solid;
}

hr {
	width: 100%;
}

a:link {
	color: var(--col-link);
	display: inline-table;
}

a:link:focus, a:focus:visited {
	outline: 1px dotted gray;
}

a:visited:link, a:visited, a:visited:hover {
	color: var(--col-link-visited);
}

.footer, #br {
	margin-top: auto;
	color: var(--col-text-dim);
}

#search {
	display: contents;
}

#search form {
	display: flex;
	gap: 0.5rem;
	align-content: center;
}

#q, .in, .cleo, input:not([type="submit"]):not([type="button"]):not([type="color"]) {
	border: 1px solid #616266;
	border-radius: 3px;
	background: var(--col-bg-box);
	box-shadow: none;
	color: var(--col-text);
	height: initial;
	left: unset;
	position: initial;
	top: unset;
	z-index: unset;
	caret-color: var(--col-text);
	padding-inline: 1rem;
	padding-block: 0.5rem;
}

#q:focus, .in:focus, .cleo:focus, 
input:not([type="submit"]):not([type="button"]):not([type="color"]):focus {
	border: 1px solid #9e9fa1;
	box-shadow: none;
}

/* https://ss64.com/pass/ */
.mainpw, .pass, .sitebox {
	transition: none;
	margin: unset;
}
.websites {
	display: grid;
	grid-template-columns: max-content max-content max-content 0;
	gap: 0.5rem;
	align-items: center;
}

/* https://ss64.com/pass/pass15.html */
.num {
	background: unset;
}


/* https://ss64.com/pass/ */
/* https://ss64.com/pass/pass15.html */
#ot.callout {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

#btn, .btn1, .btn {
	top: unset;
	left: unset;
	width: initial;
	background: unset;
}

#tnav, .tnav {
	height: unset;
	padding: 0.5em;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	overflow: auto;
}

.tnav {
	overflow: initial;
	flex-wrap: wrap;
}

#tnav {
	background-color: #292b2f;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: var(--nav-height);
	box-shadow: 0 0 12px 0 black;
}

#tnav ul, .tnav ul {
	display: contents;
}

#tnav ul li {
	height: unset;
	line-height: unset;
	width: unset;
	min-width: 140px;
	margin: unset;
}

.tnav ul li {
	height: unset;
	line-height: unset;
	width: unset;
	min-width: 140px;
	margin: unset;
	display: inline-flex;
	flex-basis: 140px;
	flex-grow: 1;
	flex-shrink: 1;
	justify-content: center;
}

.tnav ul li {
	padding: 1rem;
	min-width: 180px;
	flex-basis: 180px;
}

#tnav .tbtn a, .tnav .tbtn a {
	display: inline-flex;
	justify-content: center;
	gap: 0.5rem;
}

#tnav .tbtn a {
	align-items: center;
}

#tnav ul li:last-child {
	margin-left: auto;
}

#searchnav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	min-width: unset;
}

#searchnav #logo {
	flex-grow: 0;
}
#searchnav ul li:not(#logo) {
	min-width: unset;
}

.tbtn, .tbtn a, .tflat, input[type="submit"], input[type="button"], #btn, .btn1, .btn, 
.buttons, .buttons1, .buttons2, #button {
	background: var(--col-btn);
	color: var(--col-text);
	border: none;
	border-radius: 3px;
	box-shadow: none;
	height: unset;
	line-height: unset;
	margin: unset;
	transition: unset;
	font-size: 1.1rem;
	font-family: Helvetica,Arial,Helmet,FreeSans,sans-serif;
	padding-inline: 1rem;
	padding-block: 0.5rem;
}

.tbtn a {
	margin-inline: -1rem;
	margin-block: -0.5rem;
	background: transparent;
}

.tbtn a, #tnav .tbtn a, .tbtn a:visited, #tnav .tbtn a:visited {
	color: var(--col-text);
}

.tbtn a:focus {
	border: unset;
	background: var(--col-btn-armed);
}

.tbtn svg, .tbtn:hover svg, .tflat svg, .tflat:hover svg {
	fill: var(--col-text);
}

.tbtn:hover, .tflat:hover, #btn:hover, .btn1:hover, .btn:hover, 
.buttons:hover, .buttons1:hover, .buttons2:hover, #button:hover
input[type="submit"]:hover, input[type="button"]:hover,
.tbtn:focus, .tflat:focus, #btn:focus, .btn1:focus, .btn:focus, 
.buttons:focus, .buttons1:focus, .buttons2:focus, #button:hover
input[type="submit"]:focus, input[type="button"]:focus {
	outline: none;
	border: none;
	background: var(--col-btn-armed);
	color: var(--col-text);
	transition: background-color 0.3s;
}

.tbtn:active, .tflat:active, #btn:active, .btn1:active, #button:active
input[type="submit"]:active, input[type="button"]:active {
	outline: none;
	border: none;
	background: var(--col-btn-select);
	color: var(--col-text);
	transition: unset;
}

.tflat {
	background: var(--col-btn-select);
}

/* general list / table class, e.g.: https://ss64.com/bash/ */
.az {
	width: 100%;
}
.az tr {
	border: none;
}
.az tr:nth-child(even), table tr:nth-child(even) {
	background: var(--col-bg-box);
}
.az tr:nth-child(odd), table tr:nth-child(odd) {
	background: var(--col-bg);
}

/* https://ss64.com/convert.html */
table#example tr {
	background: unset;
}

#rowhover tr:hover td {
	background: var(--col-fx-lighter);
}

/* https://ss64.com/ascii.html */
:root tr td, table {
	background: unset;
	border: none;
}

th, table.sortable th {
	border: none;
	background: #606373;
	color: var(--col-text);
}

.tblbody tr td {
	border: 1.5px solid #777;
	color: var(--col-text);
}

col.character {
	background: var(--col-fx-darker);
	border-right: 15px solid transparent;
}

col.first {
	border-left: none;
}

/* ss64 main page icons */
a[href="/bash/"]::before {
	content: '';
	padding-right: 5px;
	display: table-cell;
	width: 1rem;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url(https://upload.wikimedia.org/wikipedia/commons/3/35/Tux.svg);
}
a[href="/osx/"]::before {
	content: '';
	padding-right: 5px;
	display: table-cell;
	width: 1rem;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url(https://upload.wikimedia.org/wikipedia/commons/f/fa/Apple_logo_black.svg);
}
a[href="/ps/"]::before {
	content: '';
	padding-right: 5px;
	display: table-cell;
	width: 1rem;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url(https://upload.wikimedia.org/wikipedia/commons/2/2f/PowerShell_5.0_icon.png);
}
a[href="/nt/"]::before {
	content: '';
	padding-right: 5px;
	display: table-cell;
	width: 1rem;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url(https://upload.wikimedia.org/wikipedia/en/e/ef/Command_prompt_icon_%28windows%29.png);
}
a[href="databases.html"]::before {
	content: '';
	padding-right: 5px;
	display: table-cell;
	width: 1rem;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url(https://www.svgrepo.com/show/97472/database.svg);
}
a[href="/vb/"]::before {
	content: '';
	padding-right: 5px;
	display: table-cell;
	width: 1rem;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url(https://upload.wikimedia.org/wikipedia/commons/4/40/VB.NET_Logo.svg);
}
a[href="ascii.html"]::before {
	content: 'T';
	padding-right: 5px;
	display: table-cell;
	width: 1rem;
	font-family: "Times New Roman", serif;
}

/******************************/
/*          emw3.com          */
/******************************/

/* https://emw3.com/colour.html */
#swatchResult {
	border-width: 0.5rem 0;
	margin: unset;
	text-shadow: 0px 0px 2px black, 0px 0px 2px black;
}
.colorwell {
	-webkit-appearance: none;
	margin: unset;
	border-width: 0.5rem 0;
	width: 100%;
}
.colorwell::-webkit-color-swatch-wrapper {
	padding: 0;
}
.colorwell::-webkit-color-swatch {
	border: none;
}
table#colour tr {
	background: unset;
}

/* https://emw3.com/js/howto-flip.html */
#formid {
	display: contents;
}
#button {
	margin: 0 auto;
}

/* https://emw3.com/js/howto-phonetic.html */
#nato {
	background: var(--col-bg-box);
}

/* https://emw3.com/css/color-names.html */
#colournames tr {
	background: unset;
}
#colournames tr td:nth-child(3) {
	background: var(--col-bg) !important;
}

/* main page slug */
#strapline {
	color: var(--col-text);
}

Main_Page.jpg (33.66 KiB) Viewed 14784 times

Index.jpg (160.2 KiB) Viewed 14798 times

Manual.jpg (136.86 KiB) Viewed 14798 times

Changes

• v 1.1
  • Fixed main page navigation layout
  • Fixed emw3 color names background color
  • Improved emw3 color mix ui
• v 1.0 Initial Release

[Simon Sheppard]

Very nice, the 'databases' and 'convert' buttons look a little squashed for space so I would make all the buttons just a little wider.

Also on EMW3/color the reason for the alternate black and white top/bottom borders is to show the generated colour against the most common background/foreground colours.

[Manna5]

Good, but I see that you are using CSS3 that may result in very ugly look under older browsers. I suggest trying to convert it into CSS2.

[Simon Sheppard]

Good, but I see that you are using CSS3 that may result in very ugly look under older browsers. I suggest trying to convert it into CSS2.

I kind of consider that a feature rather than a bug, if someone is still using IE 7 they maybe need a prod to upgrade to something that's more up to date and will have security holes patched.