main.user.css

/* ==UserStyle==
@name         Kowbell's Swarm Dark (LOCAL) TODO RENAME
@description  Dark theme for P4 Swarm
@version      0.2.0
@license      MIT-0

@namespace    https://github.com/Kowbell/
@author       DJ Schilens foo@bar.com (foobar.com)
@homepageURL  https://github.com/Kowbell/Userstyle-SwarmDark
@supportURL   https://github.com/Kowbell/Userstyle-SwarmDark/issues
@updateURL    https://raw.githubusercontent.com/Kowbell/Userstyle-SwarmDark/master/main.user.css

@preprocessor stylus

@var color bkgCol    "Default Background Color" #1e1e1e
@var color txtCol    "Default Text Color"       #bababa

@var color bkgColHdr "Headers Background Color"  #181818
@var color txtColHdr "Headers Text Color"        #bababa

@var color bkgColInt "Interactives Background Color (buttons, dropdowns, ...)" #2e2e2e
@var color txtColInt "Interactives Text Color (buttons, dropdowns, ...)"       #cacaca
@var color bkgColIntHov "Interactives Background Color - Hovered" #5e5e5e
@var color txtColIntHov "Interactives Text Color - Hovered"        #efefef
@var color bkgColIntAct "Interactives Background Color - Active"  #63a70a
@var color txtColIntAct "Interactives Text Color - Active"        #efefef


@var color bkgColAlt "Alternating Background Color (e.g. for every other item in a sequence)" #2e2e2e
@var color txtColAlt "Alternating Text Color (e.g. for every other item in a sequence)"       #cacaca



@var color bkgColHiC "High-Contrast Background Color (editable text areas)" #101010
@var color txtColHiC "High-Contrast Text Color (editable text areas)"       #f0f0f0

@var color bkgColCode "Default Code Background" #151515
@var color txtColCode "Default Code Color" #c0c0c0



@var color bkgColCodeAdd "Reviews: Added Code Background"   #4b5632
@var color txtColCodeAdd "Reviews: Added Code Color"        #c0c0c0
@var color bkgColCodeRmv "Reviews: Removed Code Background" #6f1313
@var color txtColCodeRmv "Reviews: Removed Code Color"      #c0c0c0


@var color diffAdd-BkgCol     "Diff View: Add: Background"             #4b5632
@var color diffAddLeft-BkgCol "Diff View: Add: Background (left side)" #373d29

@var color diffDel-BkgCol     "Diff View: Deleted: Background"             #6f1313
@var color diffDelLeft-BkgCol "Diff View: Deleted: Background (left side)" #4b1818

==/UserStyle== */

/** * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * Color scheme based on VS Code's default Dark+ theme
 * 
 * Adapted from arvatarox's "Swarm Dark" (https://userstyles.org/styles/166448/swarm-dark)
 * For editing tips see https://github.com/openstyles/stylus/wiki/UserCSS-authors
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

@-moz-document regexp(".*swarm\\..*\\.com.*") { /* apply to all swarm.whatever.com pages */
	/* #region generic ================================================================================ #region generic */
	body {
		background-color: bkgCol;
		color: txtCol;
	}

	.login-panel {
		background-color: #222C;
	}

	/** 
	 * Most icons are dark gray, so they're hard to see on the dark background.
	 * This doesn't work in IE or Opera, but should work in FF/Chrome/Safari.
	 *
	 * .swarm-icon covers MOST icons, though not all, hence the extra .icon classes here
	 */
	i {
		-webkit-filter: invert(1);
		filter: invert(1);
	} /* invert all icons */

	
	/** Colored icons, like the upvote/downvotes & flagged-as-task icons, should NOT be inverted! */
	.icon-task-open, .icon-task-addressed, .icon-task-verified,
	.icon-file-add, .icon-file-edit, .icon-file-delete, 
	.icon-post-review, .icon-pre-review, .icon-comment-unread,
	.icon-vote-up, .icon-vote-down, .icon-required-reviewer,
	.icon-vote-up-stale, icon-vote-down-stale,
	.icon-white
	{
		-webkit-filter: invert(0);
		filter: invert(0);
	} /* dont invert colored icons */

	.btn, .input-prepend .add-on {
		background-color: bkgColInt;
		color: txtColInt;
		text-shadow: #222 0px 1px 1px;
	}
	.btn.active, .btn:active {
		background-color: bkgColIntAct;
		color: txtColIntAct;
		box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(bkgColIntAct, 0.6) !important;
	}
	.btn:hover, .btn:focus {
		background-color: bkgColIntHov;
		color: txtColIntHov;
		box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(bkgColIntAct, 0.6) !important;
	}
	.btn-group.open .btn.dropdown-toggle {
		background-color: bkgColIntAct !important;
		box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(bkgColIntAct, 0.6) !important;
	}

	.dropdown-menu,
	.dropdown-menu > li > a {
		background-color: bkgcolInt;
		color: txtcolInt;
	}
	/** Hovered/selected dropdown items should use the 'interactive highlight' col */
	.dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover {
		background-color: bkgColIntAct !important;
	}

	/** Interactive text fields (comment entries, search boxes) */
	textarea, input[type="text"] {
		background-color: bkgColHiC;
		color: txtColHiC;
	}
	/** The glow around selected text inputs */
	textarea:focus, input:focus {
		border-color: bkgColIntAct !important;
		box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(bkgColIntAct, 0.6) !important;
	}
	/** Also set the nav bar stripe color */
	.navbar-inverse .navbar-inner, .navbar-inverse .navbar-inner, .navbar-site .nav .active > a {
		border-bottom: solid 4px bkgColIntAct;
	}
	

	/* #endregion generic ========================================================================== #endregion generic */

	/* #region dashboard ============================================================================ #region dashboard */

	/* Alternating colors for the list of reviews in the dashboard */
	.table-striped tbody > tr:nth-child(2n+1) > td, .table-striped tbody > tr:nth-child(2n+1) > th {
		background-color: bkgColAlt; 
	}

	/** Table header colors need to be specifically overridden */
	th, .table th {
		color: txtColHdr;
	}

	/** "There are no reviews currently visible" */
	.dashboard .table-striped tr.empty td {
		background-color: bkgColAlt;
	}

	/** "My Projects" widget on the left */
	.projects-sidebar tbody {
		background-color: bkgColAlt;
		color: txtColAlt;
	}

	/* #endregion dashboard ====================================================================== #endregion dashboard */


	/* #region reviews ================================================================================ #region reviews */

	/** Header/footer for the review summary box at the top of the page
	 * e.g. "Review requested x minutes ago, last updated x minutes ago */
	.popover.change-info .popover-title, .popover.change-info .popover-footer {
		background-color: bkgColHdr;
		color: txtColHdr;
	}

	/** Nested review comments should have alternating colors */
	.comments-container .comment-replies .comment-replies-wrapper.odd {
		background-color: bkgColAlt;
	}
	.comments-container .comment-replies .comment-replies-wrapper.even {
		background-color: bkgCol;
	}

	/** Selected Files/Comments/History tab */
	.nav-tabs > .active > a, 
	.nav-tabs > .active > a:hover, 
	.nav-tabs > .active > a:focus,
	.nav-tabs > a, .nav-tabs > a:hover,
	.nav-tabs > a:focus {
		background-color: inherit;
		color: inherit;
		border-bottom: 1px bkgCol solid; /* hack; disable this to see why */
	}

	/** Commit popup (TODO COULDNT TEST THIS WHEN I WAS TIDYING UP) */
	.modal {
		background-color: #444;
	}
	.modal-footer { 
		background-color: #333;
	}
	/* .textarea, .input {
		background-color: bkgCol !important;
		color: #CCC;
	} */

	/* #region reviews: files tab ======================================== #region reviews: files tab */

	/** The header for the file-preview-dropdown area
	 * This will say something like "Change 12345 shelved into mystream/" */
	.review-wrapper .version-summary, 
	.file-metrics b /* those numbers by the edit/add/remove icons on the right */
	{
		background-color: bkgColHdr;
		color: txtColHdr;
	}

	/** The header/footer "frames" around open files */
	.diff-body .context-controls .context-icon-container, /* buttons for e.g. show-one-more-line-above */
	.diff-body tr.diff-type-meta, /* filler space between the buttons */
	.diff-footer
	{
		background-color: bkgColHdr;
	}

	/** Per-file seperator lines in the changelist view */
	.diff-wrapper .diff-header, .diff-wrapper .filename, 
	.diff-wrapper .diff-header-affix > .swarm-icon, 
	.diff-wrapper .btn-file-read.active
	{
		border-top-color: #444;
	}

	/* #endregion reviews: files tab ================================== #endregion reviews: files tab */


	/* #region reviews: comments tab ================================= #region reviews: comments tab */
	
	/** inlined code in review comments,
	 * e.g. "this is my comment text `code code code` blah" */
	code {
		border: 1px solid #666;
		background-color: bkgColCode;
		color: txtColCode;
		padding: 1px 4px;
		font-size: 11px; /* there's some padding, so shrink the text */
	}
	pre { /* I've only seen <pre> used for multiline code blocks */
		background-color: bkgColCode;
		color: txtColCode;
	}

	/** Comments marked read */
	.comments-container .comments-table tr.read:not(.closed) td.comment-summary {
		background-color: inherit;
	}

	/** archived comments header/button */
	.comments-container .closed-comments-header {
		background-color: bkgColHdr;
		color: txtColHdr;
	}

	/** Comments Entry */
	.comments-container .comment-form .textarea-wrapper, 
	.comments-container .comment-form textarea {
		background-color: bkgColHiC;
		color: txtColHiC;
	}

	/** Previews of the code around inline comments */
	.content-line-value,
	.comments-container .content-context .content-line-value {
		background-color: bkgColCode;
		color: txtColCode;
	}
	.content-line-add {
		background-color: bkgColCodeAdd!important; 
		color: txtColCodeAdd !important; 
	}
	.content-line-delete {
		background-color: bkgColCodeRmv !important; 
		color: txtColCodeRmv !important; 
	}

	/* #endregion reviews: comments tab =========================== #endregion reviews: comments tab */



	/** Diff View content */                                          /** Diff View content */
	.diff-body.diff-sideways .diff-table {                            /** Code lines */
		background-color: bkgCol;
		color: txtColCode;
	}
	.diff-body .line-num {                                            /** Line numbers */
		background-color: bkgCol;
	}
	.table .table {                                                   /** inline review comments */
		background-color: bkgCol;
	}
	/** Diff View content */                                          /** Diff View content */

	/** Highlight lines when you mouse over them */                   /** Mouse-Over Highlights */
	.diff-body table tr.diff.diff-content:hover td {                  /** Code lines */
		background-color: #111 !important; /** MUST BE !important */
	}
	.diff-body table tr.diff.diff-content:hover td.line-num {         /** Line numbers */
		color: #DDD;
	}
	/** Highlight lines when you mouse over them */                   /** Mouse-Over Highlights */

	/** COLORED LINES FOR ADD/DELETE */
	/** TODO THESE COLORS SUCK */
	.diff-body .diff-type-delete .line-value {
		background-color: diffDelLeft-BkgCol;
	}
	.diff-body .diff-type-delete.diff-type-edit .line-value, 
	.diff-body.right-side .diff-type-delete .line-value {
		background-color: diffDel-BkgCol;
	}
	/** Lines marked as add */
	.diff-body .diff-type-add .line-value {
		background-color: diffAdd-BkgCol;
	}
	/** Lines marked as add - left side (lighter) */
	.diff-body .diff-type-add.diff-type-edit .line-value, 
	.diff-body.left-side .diff-type-add .line-value {
		background-color: diffAddLeft-BkgCol;
	}
	/** This is the additional highlighting for text in modified lines */
	/** TODO there's some potential for some nice styling here, check this out! */
	.diff-body.diff-sideways tr.diff-type-edit .line-value span.delete, 
	.diff-body.diff-sideways tr.diff-type-edit .line-value span.insert, 
	.diff-body.diff-sideways tr.diff-type-edit.line-end-changed .line-value::after {
		background-color: inherit;
	}
	/** COLORED LINES FOR ADD/DELETE */

	/* #endregion reviews ========================================================================== #endregion reviews */

	/** TODO DOCUMENT, I think this is showing code in comments */
	/* .content-context {
		color: #f0f;
	} */

	/** TODO DOCUMENT, this came with the style */
	.diff-scroll {
		color: #f0f;
	}
} /* @-moz-document domain("swarm.*.com") */