Better styling of editor and updating file draft name on change

Seenginx/Components/FilesWithEditor.razor

@@ -31,7 +31,10 @@
 		{
 			<div class="field is-grouped">
 				<div class="control is-expanded borderRBig neoInput has-text-centered">
-					<input class="input is-5 is-rounded is-small neoInput" type="text" placeholder="Search..." value="@SelectedFile.Name" disabled>
+					<input class="input is-5 is-rounded is-small neoInput" 
+								 type="text" placeholder="Search..." 
+								 value="@SelectedFile.Name" disabled="@(SelectedFile.CanBeDeleted ? null : "disabled")"
+								 @onchange="e => SelectedFile.DraftName = e.Value.ToString()">
 				</div>
 				<div class="control">
 					<button class="button is-small is-rounded neoBtn" @onclick="OnFileCloseClick">
@@ -50,19 +53,19 @@
 		}
 	</div>
 
-	<div class="files neomorphInsetSmall borderR">
+	<div class="files neomorphInsetXSmall borderR">
 		<div class="filesList">
 			@foreach (var file in Files)
 			{
 				<div @onclick="e => OnFileClick(e,file)" @key="file" class="confFile borderRSmall isFinger neoFile @file.IsVisible @file.IsSelected">
 					<p class="is-7">@file.Folder</p>
-					<p class="has-text-weight-bold @(file.CanBeDeleted ? null : "has-text-danger")">@file.Name</p>
+					<p class="has-text-weight-bold ellipsis @(file.CanBeDeleted ? null : "has-text-danger")">@file.Name</p>
 				</div>
 			}
 		</div>
 	</div>
 
-	<div class="codeEditor neomorphInsetSmall borderR">
+	<div class="codeEditor neomorphXSmall borderR">
 		<pre id="editor" class="borderR @(IsAnyFileSelected ? string.Empty : "is-hidden")">
 		</pre>
 		<div class="stripe borderR @(IsAnyFileSelected ? "is-hidden" : string.Empty)">

Seenginx/SCSS/override-framework.scss

@@ -26,7 +26,6 @@ html {
 	right: 0;
 	bottom: 0;
 	left: 0;
-	margin: 3%;
 }
 
 .select:not(.is-multiple):not(.is-loading)::after {
@@ -38,9 +37,18 @@ html {
 }
 
 .ace-solarized-light {
-	background: $background-light;
+	background: $background;
 
 	& .ace_gutter {
 		background: $background-dark;
 	}
+
+	& .ace_gutter-active-line {
+		border-radius: 50px 0 0 50px;
+	}
+
+	& .ace_marker-layer .ace_active-line {
+		border-radius: 0 50px 50px 0;
+	}
 }
+

Seenginx/SCSS/stripeAnimation.scss

@@ -11,8 +11,8 @@
 	justify-content: center;
 	align-items: center;
 	justify-items: center;
-	width: 93%;
+	width: 100%;
-	height: 90%;
+	height: 100%;
 	overflow: hidden;
 
 	&_inner {

Seenginx/SCSS/template.scss

@@ -24,7 +24,7 @@
 .filesWithEditor {
 	display: grid;
 	grid-template-areas: "filterFiles fileTitle" "files codeEditor" "filesActions editorActions";
-	grid-gap: 20px;
+	grid-gap: 25px;
 	height: 100%;
 	max-height: 100%;
 	min-height: 10%;
@@ -37,7 +37,11 @@
 	}
 
 	& .fileTitle {
-		grid-area: fileTitle
+		grid-area: fileTitle;
+
+		& .field, & .control {
+			height: 100%
+		}
 	}
 
 	& .files {

Seenginx/SCSS/utility.scss

@@ -43,6 +43,11 @@
 		box-shadow: -6px -6px 12px rgba($light-shadow, .5), 6px 6px 12px rgba($dark-shadow, .5);
 	}
 
+	&XSmall {
+		/*box-shadow: 0px 0px 3px 3px rgba($background, 1), -6px -6px 12px rgba($light-shadow, 1), 6px 6px 12px rgba($dark-shadow, 1);*/
+		box-shadow: -3px -3px 6px rgba($light-shadow, .5), 3px 3px 6px rgba($dark-shadow, .5);
+	}
+
 	&Bottom {
 		filter: drop-shadow(8px 8px 14px rgba($dark-shadow, 1));
 	}
@@ -53,6 +58,11 @@
 		&Small {
 			box-shadow: inset 6px 6px 12px rgba($dark-shadow, .5), inset -6px -6px 12px rgba($light-shadow, .5);
 		}
+
+		&XSmall {
+			/*box-shadow: 0px 0px 3px 3px rgba($background, 1), -6px -6px 12px rgba($light-shadow, 1), 6px 6px 12px rgba($dark-shadow, 1);*/
+			box-shadow: inset 3px 3px 6px rgba($dark-shadow, .5), inset -3px -3px 6px rgba($light-shadow, .5);
+		}
 	}
 }
 
@@ -103,7 +113,7 @@
 		background: $background !important;
 		border: none !important;
 
-		&:focus{
+		&:focus {
 			border: none !important;
 		}
 	}
@@ -132,3 +142,9 @@
 .sameMarginBottom {
 	margin-bottom: 1rem !important
 }
+
+.ellipsis {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}

Seenginx/wwwroot/css/main.css

@@ -63,12 +63,18 @@ html {
   .neomorphSmall {
     /*box-shadow: 0px 0px 3px 3px rgba($background, 1), -6px -6px 12px rgba($light-shadow, 1), 6px 6px 12px rgba($dark-shadow, 1);*/
     box-shadow: -6px -6px 12px rgba(251, 238, 208, 0.5), 6px 6px 12px rgba(241, 185, 65, 0.5); }
+  .neomorphXSmall {
+    /*box-shadow: 0px 0px 3px 3px rgba($background, 1), -6px -6px 12px rgba($light-shadow, 1), 6px 6px 12px rgba($dark-shadow, 1);*/
+    box-shadow: -3px -3px 6px rgba(251, 238, 208, 0.5), 3px 3px 6px rgba(241, 185, 65, 0.5); }
   .neomorphBottom {
     filter: drop-shadow(8px 8px 14px #f1b941); }
   .neomorphInset {
     box-shadow: inset 8px 8px 16px rgba(241, 185, 65, 0.5), inset -8px -8px 16px rgba(251, 238, 208, 0.5); }
     .neomorphInsetSmall {
       box-shadow: inset 6px 6px 12px rgba(241, 185, 65, 0.5), inset -6px -6px 12px rgba(251, 238, 208, 0.5); }
+    .neomorphInsetXSmall {
+      /*box-shadow: 0px 0px 3px 3px rgba($background, 1), -6px -6px 12px rgba($light-shadow, 1), 6px 6px 12px rgba($dark-shadow, 1);*/
+      box-shadow: inset 3px 3px 6px rgba(241, 185, 65, 0.5), inset -3px -3px 6px rgba(251, 238, 208, 0.5); }
 
 .neoBtn {
   box-shadow: -3px -3px 6px rgba(251, 238, 208, 0.5), 3px 3px 6px rgba(241, 185, 65, 0.5);
@@ -122,6 +128,11 @@ html {
 .sameMarginBottom {
   margin-bottom: 1rem !important; }
 
+.ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis; }
+
 @font-face {
   font-family: 'Ubuntu';
   src: url(/fonts/ubuntu-light-webfont.woff2) format("woff2");
@@ -145,8 +156,7 @@ html {
   top: 0;
   right: 0;
   bottom: 0;
-  left: 0;
+  left: 0; }
-  margin: 3%; }
 
 .select:not(.is-multiple):not(.is-loading)::after {
   border-color: #f1b941; }
@@ -155,9 +165,13 @@ html {
   border-color: #be860e; }
 
 .ace-solarized-light {
-  background: #f7d794; }
+  background: #f6d287; }
   .ace-solarized-light .ace_gutter {
     background: #f5cd79; }
+  .ace-solarized-light .ace_gutter-active-line {
+    border-radius: 50px 0 0 50px; }
+  .ace-solarized-light .ace_marker-layer .ace_active-line {
+    border-radius: 0 50px 50px 0; }
 
 :root {
   --stripe-size: 200px;
@@ -171,8 +185,8 @@ html {
   justify-content: center;
   align-items: center;
   justify-items: center;
-  width: 93%;
+  width: 100%;
-  height: 90%;
+  height: 100%;
   overflow: hidden; }
   .stripe_inner {
     position: relative;
@@ -238,7 +252,7 @@ html {
 .filesWithEditor {
   display: grid;
   grid-template-areas: "filterFiles fileTitle" "files codeEditor" "filesActions editorActions";
-  grid-gap: 20px;
+  grid-gap: 25px;
   height: 100%;
   max-height: 100%;
   min-height: 10%;
@@ -249,6 +263,8 @@ html {
     grid-area: filterFiles; }
   .filesWithEditor .fileTitle {
     grid-area: fileTitle; }
+    .filesWithEditor .fileTitle .field, .filesWithEditor .fileTitle .control {
+      height: 100%; }
   .filesWithEditor .files {
     grid-area: files;
     display: block;