From c1f5f82329cb3ecbe360b83fc3f4d0cad6815690 Mon Sep 17 00:00:00 2001 From: ThePra Date: Mon, 27 Apr 2020 22:29:45 +0200 Subject: [PATCH] Better styling of editor and updating file draft name on change --- Seenginx/Components/FilesWithEditor.razor | 11 +++++---- Seenginx/SCSS/override-framework.scss | 12 ++++++++-- Seenginx/SCSS/stripeAnimation.scss | 4 ++-- Seenginx/SCSS/template.scss | 8 +++++-- Seenginx/SCSS/utility.scss | 18 ++++++++++++++- Seenginx/wwwroot/css/main.css | 28 ++++++++++++++++++----- Seenginx/wwwroot/css/main.min.css | 2 +- 7 files changed, 65 insertions(+), 18 deletions(-) diff --git a/Seenginx/Components/FilesWithEditor.razor b/Seenginx/Components/FilesWithEditor.razor index adce779..a7e96e1 100644 --- a/Seenginx/Components/FilesWithEditor.razor +++ b/Seenginx/Components/FilesWithEditor.razor @@ -31,7 +31,10 @@ {
- +
-
+
@foreach (var file in Files) {

@file.Folder

-

@file.Name

+

@file.Name

}
-
+
diff --git a/Seenginx/SCSS/override-framework.scss b/Seenginx/SCSS/override-framework.scss index b9c12aa..8e6e3b5 100644 --- a/Seenginx/SCSS/override-framework.scss +++ b/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; + } } + diff --git a/Seenginx/SCSS/stripeAnimation.scss b/Seenginx/SCSS/stripeAnimation.scss index 818ace8..c77b26e 100644 --- a/Seenginx/SCSS/stripeAnimation.scss +++ b/Seenginx/SCSS/stripeAnimation.scss @@ -11,8 +11,8 @@ justify-content: center; align-items: center; justify-items: center; - width: 93%; - height: 90%; + width: 100%; + height: 100%; overflow: hidden; &_inner { diff --git a/Seenginx/SCSS/template.scss b/Seenginx/SCSS/template.scss index 99addd2..3352f62 100644 --- a/Seenginx/SCSS/template.scss +++ b/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 { diff --git a/Seenginx/SCSS/utility.scss b/Seenginx/SCSS/utility.scss index 7223763..82b6b76 100644 --- a/Seenginx/SCSS/utility.scss +++ b/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; +} diff --git a/Seenginx/wwwroot/css/main.css b/Seenginx/wwwroot/css/main.css index 850b1a9..3397b14 100644 --- a/Seenginx/wwwroot/css/main.css +++ b/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; - margin: 3%; } + left: 0; } .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%; - height: 90%; + width: 100%; + 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; diff --git a/Seenginx/wwwroot/css/main.min.css b/Seenginx/wwwroot/css/main.min.css index a9cac5e..2ef4f57 100644 --- a/Seenginx/wwwroot/css/main.min.css +++ b/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;}.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: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;display:flex;justify-content:center;align-items:center;}.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%;} \ No newline at end of file +#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);}.neomorphXSmall{box-shadow:-3px -3px 6px rgba(251,238,208,.5),3px 3px 6px 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);}.neomorphInsetXSmall{box-shadow:inset 3px 3px 6px rgba(241,185,65,.5),inset -3px -3px 6px 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;}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}@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;}.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:#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;--color1:#f6d287;--color2:#f1b941;--duration:10s;}.stripe{position:relative;display:flex;justify-content:center;align-items:center;justify-items:center;width:100%;height:100%;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:28px;width:calc(83% - 40px);align-self:stretch;}.filesWithEditor{display:grid;grid-template-areas:"filterFiles fileTitle" "files codeEditor" "filesActions editorActions";grid-gap:25px;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 .fileTitle .field,.filesWithEditor .fileTitle .control{height:100%;}.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;display:flex;justify-content:center;align-items:center;}.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%;} \ No newline at end of file