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/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;
+                        }
+                    });
+                })();
+