my styles.less for Atom

styles.less

/*
 * Your Stylesheet
 *
 * This stylesheet is loaded when Atom starts up and is reloaded automatically
 * when it is changed.
 *
 * If you are unfamiliar with LESS, you can read more about it here:
 * http://www.lesscss.org
 */

// i use this stylesheet in conjunction with the Atom Dark UI & Syntax themes

.tree-view {

}

// style the background and foreground colors on the atom-text-editor-element
// itself
atom-text-editor {
	padding-top: 10px;
	padding-bottom: 10px;
}

// To style other content in the text editor's shadow DOM, use the ::shadow
// expression
atom-text-editor::shadow {

	.comment {
		font-style: normal;
	}

	.jshint-line {
		background-color: rgba(255,204,204,0.1);
	}
	.gutter .jshint-line-number {
		border-color: red !important;
	}

	// foldable line number icons
	.gutter .line-number.foldable .icon-right {
		opacity: 0.5;
		visibility: visible;
	}
	.gutter .line-number.foldable.folded .icon-right {
		opacity: 1;
	}

	.gutter .line-number.foldable .icon-right:before {
		font-size: 90%;
		content: "\f05b";
		position: relative;
		top: -0em;
	}
	.gutter .line-number.foldable.folded .icon-right:before {
		opacity: 1;
		content: "\f05a";
		left: 0;
		top: 0em;
	}
	.fold-marker:after {
		font-size: 135%;
		position: relative;
		top: 0.1em;
	}

	.wrap-guide {
		display: none;
		height: 0;
		overflow: hidden;
	}

}

// tree view icons
.list-tree.has-collapsable-children .list-nested-item > .list-item::before {
	content: "\f05b";
}
.list-tree.has-collapsable-children .list-nested-item.collapsed > .list-item::before {
	content: "\f05a";
}


atom-workspace {
	.tab-bar {
		white-space: nowrap;
		xpadding-left: 36px;
		.tab {
			border-top-left-radius: 2px;
			border-top-right-radius: 2px;
			flex: 2;
			border-image: none;
			background-color: rgba(0, 0, 0, 0.2);
			xwhite-space: nowrap;
			margin-right: 1px;
			.xtitle {
				margin-left: 1.5em;
				margin-right: 2em;
				/*-webkit-mask: none;*/
			}
			.xclose-icon {
				padding: 0 0.5em;
			}
		}
		.tab.active {
			flex: 3;
		}
		.tab.active:before {
			opacity: 0;
		}
	}
}

.tooltip.bottom {
	font-size: 12px;
	margin-top: 8px;
}

.tooltip .tooltip-arrow {
	display: none;
}
.tooltip .tooltip-inner {
	background-color: rgba(255,255,255, 0.9);
	box-shadow: 0 0 5px 5px rgba(0,0,0,0.1);
	color: black;
}