Styling the files and editor
This commit is contained in:
parent
b73c401ff4
commit
9f1e6b9e2d
|
|
@ -21,7 +21,7 @@ namespace Seenginx.Models
|
|||
|
||||
public void Hide() { IsVisible = "is-hidden"; }
|
||||
public void Unhide() { IsVisible = string.Empty; }
|
||||
public void Select() { IsSelected = "is-active"; }
|
||||
public void Select() { IsSelected = "isSelected"; }
|
||||
public void Deselect() { IsSelected = string.Empty; }
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
@inherits FileItemBase
|
||||
|
||||
<a class="@File.IsSelected" @onclick="SelectFile">
|
||||
<p class="subtitle is-6"><sub>@File.Folder</sub></p>
|
||||
<h6 class="title is-6 @(File.CanBeDeleted ? null : "has-text-danger")">@File.Name</h6>
|
||||
<h6 class="is-7"><sub>@File.Folder</sub></h6>
|
||||
<h5 class="title is-6 @(File.CanBeDeleted ? null : "has-text-danger")">@File.Name</h5>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -2,9 +2,8 @@
|
|||
|
||||
<div class="filesWithEditor">
|
||||
|
||||
<div class="files">
|
||||
|
||||
<div class="field has-addons sameMarginBottom">
|
||||
<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...">
|
||||
<span class="icon is-small is-left">
|
||||
|
|
@ -25,49 +24,12 @@
|
|||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filesList neomorphInsetSmall borderRSmall sameMarginBottom">
|
||||
<aside class="menu">
|
||||
<ul class="menu-list">
|
||||
@foreach (var file in Files)
|
||||
{
|
||||
<li @onclick="e => OnFileClick(e,file)" @key="file" class="@file.IsVisible">
|
||||
<FileItem File="file" @key="file"></FileItem>
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<div class="buttons are-small">
|
||||
<button class="button is-rounded is-primary" @onclick="OnAddDialog">
|
||||
<span class="icon is-small">
|
||||
<i class="mdi mdi-plus-box-outline"></i>
|
||||
</span>
|
||||
<span>Add</span>
|
||||
</button>
|
||||
<button class="button is-rounded is-warning" @onclick="OnUpdateDialog">
|
||||
<span class="icon is-small">
|
||||
<i class="mdi mdi-pencil-box-outline"></i>
|
||||
</span>
|
||||
<span>Update</span>
|
||||
</button>
|
||||
<button class="button is-rounded is-danger" @onclick="OnDeleteDialog">
|
||||
<span class="icon is-small">
|
||||
<i class="mdi mdi-minus-box-outline"></i>
|
||||
</span>
|
||||
<span>Delete</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="tile is-parent is-vertical">
|
||||
<div class="fileTitle">
|
||||
@if (IsAnyFileSelected)
|
||||
{
|
||||
|
||||
<nav class="level">
|
||||
|
||||
<div class="level">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<p class="subtitle is-5">
|
||||
|
|
@ -75,30 +37,80 @@
|
|||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<div class="buttons has-addons-right">
|
||||
<button class="button is-rounded is-light is-small has-icon-left"><span class="icon is-small is-left"><i class="mdi mdi-content-save-alert-outline"></i></span> <span>Save draft</span></button>
|
||||
<button class="button is-rounded is-dark is-small has-icon-left"><span class="icon is-small is-left"><i class="mdi mdi-undo-variant"></i></span> <span>Undo changes</span></button>
|
||||
<button class="button is-rounded is-success is-small has-icon-left"><span class="icon is-small is-left"><i class="mdi mdi-content-save-all-outline"></i></span> <span>Save</span></button>
|
||||
<button class="button is-rounded is-warning is-small has-icon-left"><span class="icon is-small is-left"><i class="mdi mdi-alert-outline"></i></span> <span>Test</span></button>
|
||||
</div>
|
||||
<button class="button is-small is-rounded neoBtn" @onclick="OnFileClick">
|
||||
<span class="icon is-medium">
|
||||
<i class="mdi mdi-close"></i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<p>Select any file to start editing...</p>
|
||||
}
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
<div class="files">
|
||||
<div class="filesList neomorphInsetSmall borderR sameMarginBottom">
|
||||
@foreach (var file in Files)
|
||||
{
|
||||
<div @onclick="e => OnFileClick(e,file)" @key="file" class="confFile borderRSmall 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>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="codeEditor">
|
||||
@if (IsAnyFileSelected)
|
||||
{
|
||||
<div class="content">
|
||||
<textarea class="textarea" placeholder="Uhu" rows="20" @bind="SelectedFile.OriginalBody"></textarea>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<p class="title">Select any file to start editing...</p>
|
||||
<span></span>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="filesActions">
|
||||
<div class="buttons is-centered">
|
||||
<button class="button is-rounded neoBtn is-small noBottomMargin" @onclick="OnAddDialog">
|
||||
<span class="icon is-small has-text-success">
|
||||
<i class="mdi mdi-plus-box-outline"></i>
|
||||
</span>
|
||||
<span>Add</span>
|
||||
</button>
|
||||
<button class="button is-rounded neoBtn is-small noBottomMargin @IsSelectedFileDeletable" @onclick="OnDeleteDialog">
|
||||
<span class="icon is-small has-text-danger">
|
||||
<i class="mdi mdi-minus-box-outline"></i>
|
||||
</span>
|
||||
<span>Delete</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="editorActions">
|
||||
@if (IsAnyFileSelected)
|
||||
{
|
||||
<div class="buttons is-centered">
|
||||
<button class="button is-rounded neoBtn is-small has-icon-left noBottomMargin"><span class="icon is-left has-text-light"><i class="mdi mdi-content-save-outline"></i></span> <span>Save draft</span></button>
|
||||
<button class="button is-rounded neoBtn is-small has-icon-left noBottomMargin"><span class="icon is-left has-text-dark"><i class="mdi mdi-undo-variant"></i></span> <span>Undo changes</span></button>
|
||||
<button class="button is-rounded neoBtn is-small has-icon-left noBottomMargin"><span class="icon is-left has-text-success"><i class="mdi mdi-content-save-all-outline"></i></span> <span>Save</span></button>
|
||||
<button class="button is-rounded neoBtn is-small has-icon-left noBottomMargin"><span class="icon is-left has-text-danger"><i class="mdi mdi-alert-outline"></i></span> <span>Test</span></button>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<span></span>
|
||||
}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -43,6 +43,16 @@ namespace Seenginx.Components
|
|||
protected string SearchInput { get; set; }
|
||||
|
||||
protected bool IsAnyFileSelected => SelectedFile != default;
|
||||
protected string IsSelectedFileDeletable
|
||||
{
|
||||
get
|
||||
{
|
||||
if (SelectedFile != null && SelectedFile.CanBeDeleted)
|
||||
return string.Empty;
|
||||
else
|
||||
return "is-hidden";
|
||||
}
|
||||
}
|
||||
|
||||
[Parameter]
|
||||
public EventCallback<CFile> SelectedFileChanged { get; set; }
|
||||
|
|
@ -128,17 +138,21 @@ namespace Seenginx.Components
|
|||
|
||||
protected async Task OnFileClick(MouseEventArgs e, CFile file)
|
||||
{
|
||||
Files.ForEach(f => f.Deselect());
|
||||
file.Select();
|
||||
await SelectedFileChanged.InvokeAsync(file);
|
||||
}
|
||||
|
||||
protected async Task OnFileClick()
|
||||
{
|
||||
Files.ForEach(f => f.Deselect());
|
||||
SelectedFile = null;
|
||||
}
|
||||
|
||||
protected async Task OnAddDialog()
|
||||
{
|
||||
await AddFile.InvokeAsync(null);
|
||||
}
|
||||
protected async Task OnUpdateDialog()
|
||||
{
|
||||
await UpdateFile.InvokeAsync(SelectedFile);
|
||||
}
|
||||
protected async Task OnDeleteDialog()
|
||||
{
|
||||
await UpdateFile.InvokeAsync(SelectedFile);
|
||||
|
|
|
|||
|
|
@ -16,3 +16,19 @@
|
|||
top: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
button::-moz-focus-inner, input::-moz-focus-inner {
|
||||
border: 0
|
||||
}
|
||||
|
||||
html {
|
||||
scrollbar-color: $dark-shadow $light-shadow;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-arrow-color: $light-shadow;
|
||||
scrollbar-base-color: $background;
|
||||
scrollbar-darkshadow-color: $dark-shadow;
|
||||
}
|
||||
|
||||
* {
|
||||
scrollbar-width: inherit;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,24 +21,56 @@
|
|||
}
|
||||
}
|
||||
|
||||
.filesWithEditor {
|
||||
display: grid;
|
||||
grid-template-areas: "filterFiles fileTitle" "files codeEditor" "filesActions editorActions";
|
||||
grid-gap: 20px;
|
||||
height: 100%;
|
||||
grid-template-rows: 30px calc(100% - 60px) 30px;
|
||||
grid-template-columns: 30% auto;
|
||||
|
||||
& .filterFiles {
|
||||
grid-area: filterFiles
|
||||
}
|
||||
|
||||
& .fileTitle {
|
||||
grid-area: fileTitle
|
||||
}
|
||||
|
||||
& .files {
|
||||
grid-area: files;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
height: 100%;
|
||||
|
||||
& .confFile {
|
||||
padding: 4% 6%;
|
||||
margin-bottom: 2%;
|
||||
}
|
||||
}
|
||||
|
||||
& .codeEditor {
|
||||
grid-area: codeEditor
|
||||
}
|
||||
|
||||
& .filesActions {
|
||||
grid-area: filesActions
|
||||
}
|
||||
|
||||
& .editorActions {
|
||||
grid-area: editorActions
|
||||
}
|
||||
}
|
||||
|
||||
.files {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
|
||||
&WithEditor {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
& .buttons {
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
&List {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 8%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,6 +18,12 @@
|
|||
align-items: center
|
||||
}
|
||||
|
||||
.no {
|
||||
&BottomMargin {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.is {
|
||||
&NoWrap {
|
||||
white-space: nowrap
|
||||
|
|
@ -50,6 +56,44 @@
|
|||
}
|
||||
}
|
||||
|
||||
.neo {
|
||||
&Btn {
|
||||
box-shadow: -3px -3px 6px rgba($light-shadow, .5), 3px 3px 6px rgba($dark-shadow, .5);
|
||||
background: none !important;
|
||||
border: none !important;
|
||||
transition: all .2s linear;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
|
||||
&:focus {
|
||||
box-shadow: -3px -3px 6px rgba($light-shadow, .5), 3px 3px 6px rgba($dark-shadow, .5) !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: -6px -6px 12px rgba($light-shadow, .5), 6px 6px 12px rgba($dark-shadow, .5);
|
||||
background: none !important;
|
||||
border: none !important;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
&File {
|
||||
box-shadow: 0px 0px 0px rgba($light-shadow, .5), 0px 0px 0px rgba($dark-shadow, .5);
|
||||
transition: all .2s linear;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
background: $background;
|
||||
|
||||
&:hover {
|
||||
box-shadow: -3px -3px 6px rgba($light-shadow, .5), 3px 3px 6px rgba($dark-shadow, .5);
|
||||
}
|
||||
|
||||
&.isSelected {
|
||||
box-shadow: -3px -3px 6px rgba($light-shadow, .5), 3px 3px 6px rgba($dark-shadow, .5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gradientBackground {
|
||||
background: linear-gradient(to right bottom,$background-light,$background-dark)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,6 +21,19 @@
|
|||
right: 0.75rem;
|
||||
top: 0.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) {
|
||||
|
|
@ -35,6 +48,9 @@
|
|||
align-content: center;
|
||||
align-items: center; }
|
||||
|
||||
.noBottomMargin {
|
||||
margin-bottom: 0 !important; }
|
||||
|
||||
.isNoWrap {
|
||||
white-space: nowrap; }
|
||||
|
||||
|
|
@ -54,6 +70,32 @@
|
|||
.neomorphInsetSmall {
|
||||
box-shadow: inset 6px 6px 12px rgba(241, 185, 65, 0.5), inset -6px -6px 12px 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);
|
||||
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, 0.5), 3px 3px 6px rgba(241, 185, 65, 0.5) !important; }
|
||||
.neoBtn:hover {
|
||||
box-shadow: -6px -6px 12px rgba(251, 238, 208, 0.5), 6px 6px 12px rgba(241, 185, 65, 0.5);
|
||||
background: none !important;
|
||||
border: none !important;
|
||||
transform: scale(1.1); }
|
||||
|
||||
.neoFile {
|
||||
box-shadow: 0px 0px 0px rgba(251, 238, 208, 0.5), 0px 0px 0px rgba(241, 185, 65, 0.5);
|
||||
transition: all .2s linear;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
background: #f6d287; }
|
||||
.neoFile:hover {
|
||||
box-shadow: -3px -3px 6px rgba(251, 238, 208, 0.5), 3px 3px 6px rgba(241, 185, 65, 0.5); }
|
||||
.neoFile.isSelected {
|
||||
box-shadow: -3px -3px 6px rgba(251, 238, 208, 0.5), 3px 3px 6px rgba(241, 185, 65, 0.5); }
|
||||
|
||||
.gradientBackground {
|
||||
background: linear-gradient(to right bottom, #f7d794, #f5cd79); }
|
||||
|
||||
|
|
@ -114,17 +156,38 @@ html {
|
|||
width: calc(83% - 40px);
|
||||
align-self: stretch; }
|
||||
|
||||
.filesWithEditor {
|
||||
display: grid;
|
||||
grid-template-areas: "filterFiles fileTitle" "files codeEditor" "filesActions editorActions";
|
||||
grid-gap: 20px;
|
||||
height: 100%;
|
||||
grid-template-rows: 30px calc(100% - 60px) 30px;
|
||||
grid-template-columns: 30% auto; }
|
||||
.filesWithEditor .filterFiles {
|
||||
grid-area: filterFiles; }
|
||||
.filesWithEditor .fileTitle {
|
||||
grid-area: fileTitle; }
|
||||
.filesWithEditor .files {
|
||||
grid-area: files;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
height: 100%; }
|
||||
.filesWithEditor .files .confFile {
|
||||
padding: 4% 6%;
|
||||
margin-bottom: 2%; }
|
||||
.filesWithEditor .codeEditor {
|
||||
grid-area: codeEditor; }
|
||||
.filesWithEditor .filesActions {
|
||||
grid-area: filesActions; }
|
||||
.filesWithEditor .editorActions {
|
||||
grid-area: editorActions; }
|
||||
|
||||
.files {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch; }
|
||||
.filesWithEditor {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
height: 100%; }
|
||||
.files .buttons {
|
||||
justify-content: space-between;
|
||||
align-items: stretch; }
|
||||
.filesList {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 8%;
|
||||
overflow-y: auto; }
|
||||
|
|
|
|||
|
|
@ -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;}.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;}.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);}.gradientBackground{background:linear-gradient(to right bottom,#f7d794,#f5cd79);}.borderR{border-radius:14px;}.borderRSmall{border-radius:7px;}.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;}.pure-menu-heading{text-transform:none;font-family:Ubuntu-Mono,'Noto Mono';}.menu-list li a{font-family:Ubuntu-Mono,'Noto Mono';}.menu-list a.active{background-color:#3273dc;color:#fff;}.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;}.files{display:flex;flex-direction:column;align-items:stretch;}.filesWithEditor{display:flex;align-items:stretch;height:100%;}.files .buttons{justify-content:space-between;align-items:stretch;}.filesList{height:100%;overflow-y:auto;}
|
||||
#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);transition:all .2s linear;-webkit-backface-visibility:hidden;backface-visibility:hidden;background:#f6d287;}.neoFile:hover{box-shadow:-3px -3px 6px rgba(251,238,208,.5),3px 3px 6px rgba(241,185,65,.5);}.neoFile.isSelected{box-shadow:-3px -3px 6px rgba(251,238,208,.5),3px 3px 6px rgba(241,185,65,.5);}.gradientBackground{background:linear-gradient(to right bottom,#f7d794,#f5cd79);}.borderR{border-radius:14px;}.borderRSmall{border-radius:7px;}.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;}.pure-menu-heading{text-transform:none;font-family:Ubuntu-Mono,'Noto Mono';}.menu-list li a{font-family:Ubuntu-Mono,'Noto Mono';}.menu-list a.active{background-color:#3273dc;color:#fff;}.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%;grid-template-rows:30px calc(100% - 60px) 30px;grid-template-columns:30% auto;}.filesWithEditor .filterFiles{grid-area:filterFiles;}.filesWithEditor .fileTitle{grid-area:fileTitle;}.filesWithEditor .files{grid-area:files;display:flex;flex-flow:row;height:100%;}.filesWithEditor .files .confFile{padding:4% 6%;margin-bottom:2%;}.filesWithEditor .codeEditor{grid-area:codeEditor;}.filesWithEditor .filesActions{grid-area:filesActions;}.filesWithEditor .editorActions{grid-area:editorActions;}.files{display:flex;flex-direction:column;align-items:stretch;}.filesList{height:100%;width:100%;padding:8%;overflow-y:auto;}
|
||||
Loading…
Reference in New Issue