malchata · July 14, 2017 15:40
diff --git a/atom-stylesheet.less b/atom-stylesheet.less
 /*
 * Your Stylesheet
 *
 * This stylesheet is loaded when Atom starts up and is reloaded automatically
 * when it is changed and saved.
 *
 * Add your own CSS or Less to fully customize Atom.
 * If you are unfamiliar with Less, you can read more about it here:
 * http://lesscss.org
 */

 // <html> element settings
 html{
 	 font-size: 16px !important;
 }

 // style the background color of the tree view
 .tree-view{
 	.list-item{
 		font-size: .75rem;
 	}
 }

 // Basic editor configuration
 atom-pane.pane{
 	.status-ignored{
 		display: none;
 	}
 	
 	atom-text-editor.editor{
 		background: #0d1321;
 		font-size: 1.25rem;
 		color: #fdfffc;

 		// Line number styling
 		.line-number{
 			color: #3aadff;
 			opacity: .375;

 			&.cursor-line{
 				color: #3aadff;
 				opacity: 1;
 				font-weight: 700;
 			}
 		}

 		.cursor-line{
 			background: fade(#7ac7ff, 15%);
 		}

 		// Comment colors
 		.line{
 			&.cursor-line{
 			}

 			.syntax--punctuation,
 			.syntax--comma{
 				color: #fdfffc;
 			}

 			.syntax--tag,
 			.syntax--class,
 			.syntax--variable,
 			.syntax--constant{
 				color: #3aadff;
 			}

 			.syntax--property-name,
 			.syntax--function,
 			.syntax--attribute-name{
 				color: #7ac7ff;
 			}

 			.syntax--definition{
 				color: #9ef2ff;
 			}

 			.syntax--important,
 			.syntax--unit{
 				color: #91a6ff;
 			}

 			.syntax--numeric,
 			.syntax--rgb-value,
 			.syntax--property-value,
 			.syntax--pseudo-element,
 			.syntax--keyword,
 			.syntax--storage{
 				color: #5e7ce2;
 			}

 			.syntax--string{
 				color: #8977ff;
 			}

 			.invisible-character{
 				color: #fdfffc;
 				opacity: .2;
 			}

 			.syntax--comment{
 				color: #f79256;
 			}
 		}
 	}
 }

 // To style other content in the text editor's shadow DOM, use the ::shadow expression
 atom-text-editor::shadow .cursor{
 	border-left: .125rem solid #f79256;
 	transition: opacity .125s ease-in-out;

 	&.blink-off{
 		opacity: 0;
 	}
 }

 // Hide the wrap guide
 .wrap-guide{
 	display: none !important;
 }

 @media (min-width: 90rem){
 	.tree-view{
 		.list-item{
 			font-size: .8125rem;
 		}
 	}

 	atom-pane.pane{
 		atom-text-editor.editor{
 			font-size: 1.3125rem;
 		}
 	}
 }

 @media (min-width: 120rem){
 	.tree-view{
 		.list-item{
 			font-size: .875rem;
 		}
 	}

 	atom-pane.pane{
 		atom-text-editor.editor{
 			font-size: 1.375rem;
 		}
 	}
 }
	/*
	* Your Stylesheet
	*
	* This stylesheet is loaded when Atom starts up and is reloaded automatically
	* when it is changed and saved.
	*
	* Add your own CSS or Less to fully customize Atom.
	* If you are unfamiliar with Less, you can read more about it here:
	* http://lesscss.org
	*/

	// <html> element settings
	html{
	font-size: 16px !important;
	}

	// style the background color of the tree view
	.tree-view{
	.list-item{
	font-size: .75rem;
	}
	}

	// Basic editor configuration
	atom-pane.pane{
	.status-ignored{
	display: none;
	}

	atom-text-editor.editor{
	background: #0d1321;
	font-size: 1.25rem;
	color: #fdfffc;

	// Line number styling
	.line-number{
	color: #3aadff;
	opacity: .375;

	&.cursor-line{
	color: #3aadff;
	opacity: 1;
	font-weight: 700;
	}
	}

	.cursor-line{
	background: fade(#7ac7ff, 15%);
	}

	// Comment colors
	.line{
	&.cursor-line{
	}

	.syntax--punctuation,
	.syntax--comma{
	color: #fdfffc;
	}

	.syntax--tag,
	.syntax--class,
	.syntax--variable,
	.syntax--constant{
	color: #3aadff;
	}

	.syntax--property-name,
	.syntax--function,
	.syntax--attribute-name{
	color: #7ac7ff;
	}

	.syntax--definition{
	color: #9ef2ff;
	}

	.syntax--important,
	.syntax--unit{
	color: #91a6ff;
	}

	.syntax--numeric,
	.syntax--rgb-value,
	.syntax--property-value,
	.syntax--pseudo-element,
	.syntax--keyword,
	.syntax--storage{
	color: #5e7ce2;
	}

	.syntax--string{
	color: #8977ff;
	}

	.invisible-character{
	color: #fdfffc;
	opacity: .2;
	}

	.syntax--comment{
	color: #f79256;
	}
	}
	}
	}

	// To style other content in the text editor's shadow DOM, use the ::shadow expression
	atom-text-editor::shadow .cursor{
	border-left: .125rem solid #f79256;
	transition: opacity .125s ease-in-out;

	&.blink-off{
	opacity: 0;
	}
	}

	// Hide the wrap guide
	.wrap-guide{
	display: none !important;
	}

	@media (min-width: 90rem){
	.tree-view{
	.list-item{
	font-size: .8125rem;
	}
	}

	atom-pane.pane{
	atom-text-editor.editor{
	font-size: 1.3125rem;
	}
	}
	}

	@media (min-width: 120rem){
	.tree-view{
	.list-item{
	font-size: .875rem;
	}
	}

	atom-pane.pane{
	atom-text-editor.editor{
	font-size: 1.375rem;
	}
	}
	}