Styling the editor and progressing with design

Seenginx/Components/FilesWithEditor.razor

@@ -5,21 +5,21 @@
 	<div class="filterFiles">
 		<div class="field has-addons">
 			<div class="control has-icons-left is-expanded">
-				<input formnovalidate @oninput="e => SearchInputChanged(e.Value.ToString())" class="input is-rounded is-small" type="text" placeholder="Search...">
+				<input formnovalidate @oninput="e => SearchInputChanged(e.Value.ToString())" class="input is-rounded is-small neoInput" type="text" placeholder="Search...">
-				<span class="icon is-small is-left">
+				<span class="icon is-small is-left has-text-dark">
 					<i class="mdi mdi-search-web"></i>
 				</span>
 			</div>
 			<div class="control has-icons-left">
 				<div class="select is-small is-rounded">
-					<select @onchange="e => OnFilterClick(e.Value.ToString())">
+					<select class="neoInput" @onchange="e => OnFilterClick(e.Value.ToString())">
 						@foreach (var filter in Filters)
 						{
 							<option value="@filter">@filter</option>
 						}
 					</select>
 				</div>
-				<span class="icon is-small is-left">
+				<span class="icon is-small is-left has-text-dark">
 					<i class="mdi mdi-folder-cog-outline"></i>
 				</span>
 			</div>
@@ -29,28 +29,24 @@
 	<div class="fileTitle">
 		@if (IsAnyFileSelected)
 		{
-			<div class="level">
+			<div class="field is-grouped">
-				<div class="level-left">
+				<div class="control is-expanded borderRBig neoInput has-text-centered">
-					<div class="level-item">
+					<input class="input is-5 is-rounded is-small neoInput" type="text" placeholder="Search..." value="@SelectedFile.Name" disabled>
-						<p class="subtitle is-5">
-							@SelectedFile.Name
-						</p>
-					</div>
 				</div>
-				<div class="level-right">
+				<div class="control">
-					<div class="level-item">
+					<button class="button is-small is-rounded neoBtn" @onclick="OnFileCloseClick">
-						<button class="button is-small is-rounded neoBtn" @onclick="OnFileCloseClick">
+						<span class="icon is-medium">
-							<span class="icon is-medium">
+							<i class="mdi mdi-close"></i>
-								<i class="mdi mdi-close"></i>
+						</span>
-							</span>
+					</button>
-						</button>
-					</div>
 				</div>
 			</div>
 		}
 		else
 		{
-			<p>Select any file to start editing...</p>
+			<div class="field">
+				<div class="control is-expanded borderRBig neoInput has-text-centered"><span>...</span></div>
+			</div>
 		}
 	</div>
 
@@ -66,9 +62,12 @@
 		</div>
 	</div>
 
-	<div class="codeEditor">
+	<div class="codeEditor neomorphInsetSmall borderR">
-		<pre id="editor" class="@(IsAnyFileSelected ? string.Empty : "is-hidden")">
+		<pre id="editor" class="borderR @(IsAnyFileSelected ? string.Empty : "is-hidden")">
 		</pre>
+		<div class="stripe borderR @(IsAnyFileSelected ? "is-hidden" : string.Empty)">
+			<div class="stripe_inner">Select a file</div>
+		</div>
 	</div>
 
 	<div class="filesActions">

Seenginx/SCSS/main.scss

@@ -3,4 +3,5 @@
 @import "base.scss";
 @import "utility.scss";
 @import "override-framework.scss";
+@import "stripeAnimation.scss";
 @import "template.scss";

Seenginx/SCSS/override-framework.scss

@@ -26,4 +26,21 @@ html {
 	right: 0;
 	bottom: 0;
 	left: 0;
-}
+	margin: 3%;
+}
+
+.select:not(.is-multiple):not(.is-loading)::after {
+	border-color: $dark-shadow;
+}
+
+.select:not(.is-multiple):not(.is-loading):hover::after {
+	border-color: darken($dark-shadow, 20%);
+}
+
+.ace-solarized-light {
+	background: $background-light;
+
+	& .ace_gutter {
+		background: $background-dark;
+	}
+}

Seenginx/SCSS/stripeAnimation.scss

@@ -0,0 +1,73 @@
+:root {
+	--stripe-size: 200px;
+	--color1: $background;
+	--color2: $dark-shadow;
+	--duration: 10s;
+}
+
+.stripe {
+	position: relative;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	justify-items: center;
+	width: 93%;
+	height: 90%;
+	overflow: hidden;
+
+	&_inner {
+		position: relative;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 100%;
+		height: 100%;
+		font-size: 8rem;
+		text-align: center;
+		font-family: 'Anton', sans-serif;
+		color: rgba(#fff, 0);
+		background: repeating-linear-gradient( 45deg, var(--color1) 25%, var(--color1) 50%, var(--color2) 50%, var(--color2) 75% );
+		background-size: var(--stripe-size) var(--stripe-size);
+		background-clip: text;
+		animation: stripeBackgroundPosition var(--duration) linear infinite;
+	}
+
+	&::before {
+		content: '';
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: calc(100% + var(--stripe-size));
+		height: 100%;
+		background: repeating-linear-gradient( 45deg, var(--color2) 25%, var(--color2) 50%, var(--color1) 50%, var(--color1) 75% );
+		background-size: var(--stripe-size) var(--stripe-size);
+		animation: stripeTransform var(--duration) linear infinite;
+	}
+
+	&::after {
+		content: '';
+		position: absolute;
+		width: 100%;
+		height: 100%;
+	}
+}
+
+@keyframes stripeTransform {
+	0% {
+		transform: translateX(0);
+	}
+
+	100% {
+		transform: translateX(calc(var(--stripe-size) * -1));
+	}
+}
+
+@keyframes stripeBackgroundPosition {
+	0% {
+		background-position: 0 0;
+	}
+
+	100% {
+		background-position: calc(var(--stripe-size) * -1) 0;
+	}
+}

Seenginx/SCSS/template.scss

@@ -69,6 +69,9 @@
 		height: 100%;
 		/*overflow-x: auto;*/
 		position: relative;
+		display: flex;
+		justify-content: center;
+		align-items: center;
 
 		& .editor {
 			height: 100%;

Seenginx/SCSS/utility.scss

@@ -97,6 +97,16 @@
 			color: $color-black !important;
 		}
 	}
+
+	&Input {
+		box-shadow: inset 2px 2px 4px rgba($dark-shadow, .5),inset -2px -2px 4px rgba($light-shadow, .5) !important;
+		background: $background !important;
+		border: none !important;
+
+		&:focus{
+			border: none !important;
+		}
+	}
 }
 
 .gradientBackground {

Seenginx/wwwroot/css/main.css

@@ -99,6 +99,13 @@ html {
     box-shadow: inset 3px 3px 6px rgba(241, 185, 65, 0.5), inset -3px -3px 6px rgba(251, 238, 208, 0.5) !important;
     color: #181515 !important; }
 
+.neoInput {
+  box-shadow: inset 2px 2px 4px rgba(241, 185, 65, 0.5), inset -2px -2px 4px rgba(251, 238, 208, 0.5) !important;
+  background: #f6d287 !important;
+  border: none !important; }
+  .neoInput:focus {
+    border: none !important; }
+
 .gradientBackground {
   background: linear-gradient(to right bottom, #f7d794, #f5cd79); }
 
@@ -138,7 +145,77 @@ html {
   top: 0;
   right: 0;
   bottom: 0;
-  left: 0; }
+  left: 0;
+  margin: 3%; }
+
+.select:not(.is-multiple):not(.is-loading)::after {
+  border-color: #f1b941; }
+
+.select:not(.is-multiple):not(.is-loading):hover::after {
+  border-color: #be860e; }
+
+.ace-solarized-light {
+  background: #f7d794; }
+  .ace-solarized-light .ace_gutter {
+    background: #f5cd79; }
+
+:root {
+  --stripe-size: 200px;
+  --color1: #f6d287;
+  --color2: #f1b941;
+  --duration: 10s; }
+
+.stripe {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  justify-items: center;
+  width: 93%;
+  height: 90%;
+  overflow: hidden; }
+  .stripe_inner {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    font-size: 8rem;
+    text-align: center;
+    font-family: 'Anton', sans-serif;
+    color: rgba(255, 255, 255, 0);
+    background: repeating-linear-gradient(45deg, var(--color1) 25%, var(--color1) 50%, var(--color2) 50%, var(--color2) 75%);
+    background-size: var(--stripe-size) var(--stripe-size);
+    background-clip: text;
+    animation: stripeBackgroundPosition var(--duration) linear infinite; }
+  .stripe::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: calc(100% + var(--stripe-size));
+    height: 100%;
+    background: repeating-linear-gradient(45deg, var(--color2) 25%, var(--color2) 50%, var(--color1) 50%, var(--color1) 75%);
+    background-size: var(--stripe-size) var(--stripe-size);
+    animation: stripeTransform var(--duration) linear infinite; }
+  .stripe::after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%; }
+
+@keyframes stripeTransform {
+  0% {
+    transform: translateX(0); }
+  100% {
+    transform: translateX(calc(var(--stripe-size) * -1)); } }
+
+@keyframes stripeBackgroundPosition {
+  0% {
+    background-position: 0 0; }
+  100% {
+    background-position: calc(var(--stripe-size) * -1) 0; } }
 
 .main {
   display: flex;
@@ -194,7 +271,10 @@ html {
     min-height: 0;
     height: 100%;
     /*overflow-x: auto;*/
-    position: relative; }
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center; }
     .filesWithEditor .codeEditor .editor {
       height: 100%;
       margin: 0;

Seenginx/wwwroot/css/main.min.css

@@ -1 +1 @@
-#blazor-error-ui{background:#ffffe0;bottom:0;box-shadow:0 -1px 2px rgba(0,0,0,.2);display:none;left:0;padding:.6rem 1.25rem .7rem 1.25rem;position:fixed;width:100%;z-index:1000;}#blazor-error-ui .dismiss{cursor:pointer;position:absolute;right:.75rem;top:.5rem;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;}html{scrollbar-color:#f1b941 #fbeed0;scrollbar-width:thin;scrollbar-arrow-color:#fbeed0;scrollbar-base-color:#f6d287;scrollbar-darkshadow-color:#f1b941;}*{scrollbar-width:inherit;}.isHidden{display:none;}@media only screen and (max-width:37.5em){.isHiddenMobile{display:none;}}.petiteCaps{font-variant:petite-caps;}.flexCenter{display:flex;align-content:center;align-items:center;}.noBottomMargin{margin-bottom:0 !important;}.isNoWrap{white-space:nowrap;}.isFinger{cursor:pointer;}.neomorph{box-shadow:-8px -8px 16px rgba(251,238,208,.5),8px 8px 16px rgba(241,185,65,.5);}.neomorphSmall{box-shadow:-6px -6px 12px rgba(251,238,208,.5),6px 6px 12px rgba(241,185,65,.5);}.neomorphBottom{filter:drop-shadow(8px 8px 14px #f1b941);}.neomorphInset{box-shadow:inset 8px 8px 16px rgba(241,185,65,.5),inset -8px -8px 16px rgba(251,238,208,.5);}.neomorphInsetSmall{box-shadow:inset 6px 6px 12px rgba(241,185,65,.5),inset -6px -6px 12px rgba(251,238,208,.5);}.neoBtn{box-shadow:-3px -3px 6px rgba(251,238,208,.5),3px 3px 6px rgba(241,185,65,.5);background:none !important;border:none !important;transition:all .2s linear;-webkit-backface-visibility:hidden;backface-visibility:hidden;}.neoBtn:focus{box-shadow:-3px -3px 6px rgba(251,238,208,.5),3px 3px 6px rgba(241,185,65,.5) !important;}.neoBtn:hover{box-shadow:-6px -6px 12px rgba(251,238,208,.5),6px 6px 12px rgba(241,185,65,.5);background:none !important;border:none !important;transform:scale(1.1);}.neoFile{box-shadow:0 0 0 rgba(251,238,208,.5),0 0 0 rgba(241,185,65,.5) !important;transition:all .2s linear;-webkit-backface-visibility:hidden !important;backface-visibility:hidden !important;background:#f6d287 !important;}.neoFile:hover{box-shadow:-3px -3px 6px rgba(251,238,208,.5),3px 3px 6px rgba(241,185,65,.5) !important;}.neoFile.isSelected{box-shadow:inset 3px 3px 6px rgba(241,185,65,.5),inset -3px -3px 6px rgba(251,238,208,.5) !important;}.neoFile.is-active,.neoFile.active{box-shadow:inset 3px 3px 6px rgba(241,185,65,.5),inset -3px -3px 6px rgba(251,238,208,.5) !important;color:#181515 !important;}.gradientBackground{background:linear-gradient(to right bottom,#f7d794,#f5cd79);}.borderR{border-radius:14px;}.borderRSmall{border-radius:7px !important;}.borderRBig{border-radius:28px;}.bg{background:#f6d287;}.sameMarginBottom{margin-bottom:1rem !important;}@font-face{font-family:'Ubuntu';src:url(/fonts/ubuntu-light-webfont.woff2) format("woff2");font-weight:300;font-style:normal;}@font-face{font-family:'Ubuntu-Mono';src:url(/fonts/ubuntumono-regular-webfont.woff2) format("woff2");font-style:normal;}html{font-family:Ubuntu,sans-serif;}.menu-list li a{font-family:Ubuntu-Mono,'Noto Mono';}#editor{position:absolute;top:0;right:0;bottom:0;left:0;}.main{display:flex;flex-wrap:nowrap;align-items:start;width:100%;height:100vh;padding:2.5%;}.mainNav{overflow-y:auto;padding:14px;width:17%;margin-right:40px;}.mainPage{overflow-y:auto;padding:28px;width:calc(83% - 40px);align-self:stretch;}.filesWithEditor{display:grid;grid-template-areas:"filterFiles fileTitle" "files codeEditor" "filesActions editorActions";grid-gap:20px;height:100%;max-height:100%;min-height:10%;grid-template-rows:30px auto 30px;grid-template-columns:30% auto;width:100%;}.filesWithEditor .filterFiles{grid-area:filterFiles;}.filesWithEditor .fileTitle{grid-area:fileTitle;}.filesWithEditor .files{grid-area:files;display:block;min-height:10%;padding:4% 0;}.filesWithEditor .files .confFile{padding:4% 6%;margin-bottom:3%;}.filesWithEditor .filesList{display:flex;flex-direction:column;align-items:stretch;height:100%;min-height:10%;width:100%;padding:4% 8%;overflow-y:auto;}.filesWithEditor .codeEditor{grid-area:codeEditor;min-height:0;height:100%;position:relative;}.filesWithEditor .codeEditor .editor{height:100%;margin:0;width:100%;}.filesWithEditor .filesActions{grid-area:filesActions;}.filesWithEditor .editorActions{grid-area:editorActions;}.menu-list>li>.neoFile{margin-bottom:4%;}
+#blazor-error-ui{background:#ffffe0;bottom:0;box-shadow:0 -1px 2px rgba(0,0,0,.2);display:none;left:0;padding:.6rem 1.25rem .7rem 1.25rem;position:fixed;width:100%;z-index:1000;}#blazor-error-ui .dismiss{cursor:pointer;position:absolute;right:.75rem;top:.5rem;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;}html{scrollbar-color:#f1b941 #fbeed0;scrollbar-width:thin;scrollbar-arrow-color:#fbeed0;scrollbar-base-color:#f6d287;scrollbar-darkshadow-color:#f1b941;}*{scrollbar-width:inherit;}.isHidden{display:none;}@media only screen and (max-width:37.5em){.isHiddenMobile{display:none;}}.petiteCaps{font-variant:petite-caps;}.flexCenter{display:flex;align-content:center;align-items:center;}.noBottomMargin{margin-bottom:0 !important;}.isNoWrap{white-space:nowrap;}.isFinger{cursor:pointer;}.neomorph{box-shadow:-8px -8px 16px rgba(251,238,208,.5),8px 8px 16px rgba(241,185,65,.5);}.neomorphSmall{box-shadow:-6px -6px 12px rgba(251,238,208,.5),6px 6px 12px rgba(241,185,65,.5);}.neomorphBottom{filter:drop-shadow(8px 8px 14px #f1b941);}.neomorphInset{box-shadow:inset 8px 8px 16px rgba(241,185,65,.5),inset -8px -8px 16px rgba(251,238,208,.5);}.neomorphInsetSmall{box-shadow:inset 6px 6px 12px rgba(241,185,65,.5),inset -6px -6px 12px rgba(251,238,208,.5);}.neoBtn{box-shadow:-3px -3px 6px rgba(251,238,208,.5),3px 3px 6px rgba(241,185,65,.5);background:none !important;border:none !important;transition:all .2s linear;-webkit-backface-visibility:hidden;backface-visibility:hidden;}.neoBtn:focus{box-shadow:-3px -3px 6px rgba(251,238,208,.5),3px 3px 6px rgba(241,185,65,.5) !important;}.neoBtn:hover{box-shadow:-6px -6px 12px rgba(251,238,208,.5),6px 6px 12px rgba(241,185,65,.5);background:none !important;border:none !important;transform:scale(1.1);}.neoFile{box-shadow:0 0 0 rgba(251,238,208,.5),0 0 0 rgba(241,185,65,.5) !important;transition:all .2s linear;-webkit-backface-visibility:hidden !important;backface-visibility:hidden !important;background:#f6d287 !important;}.neoFile:hover{box-shadow:-3px -3px 6px rgba(251,238,208,.5),3px 3px 6px rgba(241,185,65,.5) !important;}.neoFile.isSelected{box-shadow:inset 3px 3px 6px rgba(241,185,65,.5),inset -3px -3px 6px rgba(251,238,208,.5) !important;}.neoFile.is-active,.neoFile.active{box-shadow:inset 3px 3px 6px rgba(241,185,65,.5),inset -3px -3px 6px rgba(251,238,208,.5) !important;color:#181515 !important;}.neoInput{box-shadow:inset 2px 2px 4px rgba(241,185,65,.5),inset -2px -2px 4px rgba(251,238,208,.5) !important;background:#f6d287 !important;border:none !important;}.neoInput:focus{border:none !important;}.gradientBackground{background:linear-gradient(to right bottom,#f7d794,#f5cd79);}.borderR{border-radius:14px;}.borderRSmall{border-radius:7px !important;}.borderRBig{border-radius:28px;}.bg{background:#f6d287;}.sameMarginBottom{margin-bottom:1rem !important;}@font-face{font-family:'Ubuntu';src:url(/fonts/ubuntu-light-webfont.woff2) format("woff2");font-weight:300;font-style:normal;}@font-face{font-family:'Ubuntu-Mono';src:url(/fonts/ubuntumono-regular-webfont.woff2) format("woff2");font-style:normal;}html{font-family:Ubuntu,sans-serif;}.menu-list li a{font-family:Ubuntu-Mono,'Noto Mono';}#editor{position:absolute;top:0;right:0;bottom:0;left:0;margin:3%;}.select:not(.is-multiple):not(.is-loading)::after{border-color:#f1b941;}.select:not(.is-multiple):not(.is-loading):hover::after{border-color:#be860e;}.ace-solarized-light{background:#f7d794;}.ace-solarized-light .ace_gutter{background:#f5cd79;}:root{--stripe-size:200px;--color1:#f6d287;--color2:#f1b941;--duration:10s;}.stripe{position:relative;display:flex;justify-content:center;align-items:center;justify-items:center;width:93%;height:90%;overflow:hidden;}.stripe_inner{position:relative;display:flex;justify-content:center;align-items:center;width:100%;height:100%;font-size:8rem;text-align:center;font-family:'Anton',sans-serif;color:rgba(255,255,255,0);background:repeating-linear-gradient(45deg,var(--color1) 25%,var(--color1) 50%,var(--color2) 50%,var(--color2) 75%);background-size:var(--stripe-size) var(--stripe-size);background-clip:text;animation:stripeBackgroundPosition var(--duration) linear infinite;}.stripe::before{content:'';position:absolute;top:0;left:0;width:calc(100% + var(--stripe-size));height:100%;background:repeating-linear-gradient(45deg,var(--color2) 25%,var(--color2) 50%,var(--color1) 50%,var(--color1) 75%);background-size:var(--stripe-size) var(--stripe-size);animation:stripeTransform var(--duration) linear infinite;}.stripe::after{content:'';position:absolute;width:100%;height:100%;}@keyframes stripeTransform{0%{transform:translateX(0);}100%{transform:translateX(calc(var(--stripe-size)*-1));}}@keyframes stripeBackgroundPosition{0%{background-position:0 0;}100%{background-position:calc(var(--stripe-size)*-1) 0;}}.main{display:flex;flex-wrap:nowrap;align-items:start;width:100%;height:100vh;padding:2.5%;}.mainNav{overflow-y:auto;padding:14px;width:17%;margin-right:40px;}.mainPage{overflow-y:auto;padding:28pLine truncated

Seenginx/wwwroot/js/index.js

@@ -9,23 +9,23 @@ window.InitEditor = () => {
 		highlightActiveLine: true,
 		highlightSelectedWord: true,
 		readOnly: false,
-		cursorStyle: "smooth",
+		cursorStyle: "smooth slim",
 		mergeUndoDeltas: true,
 		behavioursEnabled: true,
 		wrapBehavioursEnabled: true,
 		copyWithEmptySelection: true,
 		navigateWithinSoftTabs: true,
 		printMargin: false,
-		scrollPastEnd: 0.1,
+		scrollPastEnd: 0.2,
-		theme: "ace/theme/merbivore_soft",
+		theme: "ace/theme/solarized_light",
 		mode: "ace/mode/nginx",
 		fixedWidthGutter: true,
 		firstLineNumber: 1,
 		newLineMode: "auto",
 		tabSize: 2,
-		//keybinding: "ace/keyboard/vscode",
+		keyboardHandler: "ace/keyboard/vscode",
 		//enableBasicAutocompletion: true,
-		//enableLiveAutocompletion: true,
+		enableLiveAutocompletion: true,
 		//enableSnippets: true
 	})
 }

Seenginx/wwwroot/js/theme-solarized_light.js

@@ -0,0 +1,8 @@
+ace.define("ace/theme/solarized_light",["require","exports","module","ace/lib/dom"],function(e,t,n){t.isDark=!1,t.cssClass="ace-solarized-light",t.cssText=".ace-solarized-light .ace_gutter {background: #fbf1d3;color: #333}.ace-solarized-light .ace_print-margin {width: 1px;background: #e8e8e8}.ace-solarized-light {background-color: #FDF6E3;color: #586E75}.ace-solarized-light .ace_cursor {color: #000000}.ace-solarized-light .ace_marker-layer .ace_selection {background: rgba(7, 54, 67, 0.09)}.ace-solarized-light.ace_multiselect .ace_selection.ace_start {box-shadow: 0 0 3px 0px #FDF6E3;}.ace-solarized-light .ace_marker-layer .ace_step {background: rgb(255, 255, 0)}.ace-solarized-light .ace_marker-layer .ace_bracket {margin: -1px 0 0 -1px;border: 1px solid rgba(147, 161, 161, 0.50)}.ace-solarized-light .ace_marker-layer .ace_active-line {background: #EEE8D5}.ace-solarized-light .ace_gutter-active-line {background-color : #EDE5C1}.ace-solarized-light .ace_marker-layer .ace_selected-word {border: 1px solid #7f9390}.ace-solarized-light .ace_invisible {color: rgba(147, 161, 161, 0.50)}.ace-solarized-light .ace_keyword,.ace-solarized-light .ace_meta,.ace-solarized-light .ace_support.ace_class,.ace-solarized-light .ace_support.ace_type {color: #859900}.ace-solarized-light .ace_constant.ace_character,.ace-solarized-light .ace_constant.ace_other {color: #CB4B16}.ace-solarized-light .ace_constant.ace_language {color: #B58900}.ace-solarized-light .ace_constant.ace_numeric {color: #D33682}.ace-solarized-light .ace_fold {background-color: #268BD2;border-color: #586E75}.ace-solarized-light .ace_entity.ace_name.ace_function,.ace-solarized-light .ace_entity.ace_name.ace_tag,.ace-solarized-light .ace_support.ace_function,.ace-solarized-light .ace_variable,.ace-solarized-light .ace_variable.ace_language {color: #268BD2}.ace-solarized-light .ace_storage {color: #073642}.ace-solarized-light .ace_string {color: #2AA198}.ace-solarized-light .ace_string.ace_regexp {color: #D30102}.ace-solarized-light .ace_comment,.ace-solarized-light .ace_entity.ace_other.ace_attribute-name {color: #93A1A1}.ace-solarized-light .ace_indent-guide {background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWNgYGBgYHjy8NJ/AAjgA5fzQUmBAAAAAElFTkSuQmCC) right repeat-y}";var r=e("../lib/dom");r.importCssString(t.cssText,t.cssClass)});                (function() {
+                    ace.require(["ace/theme/solarized_light"], function(m) {
+                        if (typeof module == "object" && typeof exports == "object" && module) {
+                            module.exports = m;
+                        }
+                    });
+                })();
+