289 lines
7.7 KiB
CSS
289 lines
7.7 KiB
CSS
/*$breakpoint argument choices:
|
|
- phone
|
|
- tab-port
|
|
- tab-land
|
|
- desk
|
|
- big-desktop
|
|
*/
|
|
#blazor-error-ui {
|
|
background: lightyellow;
|
|
bottom: 0;
|
|
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
|
|
display: none;
|
|
left: 0;
|
|
padding: 0.6rem 1.25rem 0.7rem 1.25rem;
|
|
position: fixed;
|
|
width: 100%;
|
|
z-index: 1000; }
|
|
#blazor-error-ui .dismiss {
|
|
cursor: pointer;
|
|
position: absolute;
|
|
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) {
|
|
.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: 0px 0px 4px 4px rgba($background, 1), -8px -8px 16px rgba($light-shadow, 1), 8px 8px 16px rgba($dark-shadow, 1);*/
|
|
box-shadow: -8px -8px 16px rgba(251, 238, 208, 0.5), 8px 8px 16px rgba(241, 185, 65, 0.5); }
|
|
.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); }
|
|
.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); }
|
|
|
|
.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) !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, 0.5), 3px 3px 6px rgba(241, 185, 65, 0.5) !important; }
|
|
.neoFile.isSelected {
|
|
box-shadow: inset 3px 3px 6px rgba(241, 185, 65, 0.5), inset -3px -3px 6px rgba(251, 238, 208, 0.5) !important; }
|
|
.neoFile.is-active, .neoFile.active {
|
|
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); }
|
|
|
|
.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-weight: 300;*/
|
|
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%;
|
|
/*overflow-x: auto;*/
|
|
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%; }
|