/*$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 transparent; scrollbar-width: thin; scrollbar-arrow-color: #fbeed0; scrollbar-base-color: #f6d287; scrollbar-darkshadow-color: #f1b941; overflow-x: auto; overflow-y: auto; } * { 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); } .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); 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); } .neoBtnSmall { box-shadow: -2px -2px 4px rgba(251, 238, 208, 0.5), 2px 2px 4px rgba(241, 185, 65, 0.5); background: none !important; border: none !important; transition: all .2s linear; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .neoBtnSmall:focus { box-shadow: -2px -2px 4px rgba(251, 238, 208, 0.5), 2px 2px 4px rgba(241, 185, 65, 0.5) !important; } .neoBtnSmall:hover { box-shadow: -4px -4px 8px rgba(251, 238, 208, 0.5), 4px 4px 8px 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; } .neoSelect > select { 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; } .neoSelect > select: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; } .fullwidth { width: 100%; } @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; } .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; } .modal-content { border-radius: 28px; } .modal-card-head, .modal-card-foot { background: #f6d287; } .modal-card-head { border: none; border-radius: 0; } .modal-card-body { background: #f6d287; } .modal-card-foot { border: none; border-radius: 0; } .blazored-modal { background-color: transparent; border-radius: 0; border: none; padding: 0; box-shadow: none; } .blazored-modal-container { left: 0; top: 0; } .blazored-modal-overlay { background: #f6d287; } .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: 28% 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 .filesList { display: flex; flex-direction: column; align-items: stretch; height: 100%; min-height: 10%; width: auto; padding: 4% 7% 4% 8%; overflow-y: auto; margin-right: 4%; } .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%; } .confFile { padding: 4% 6%; margin-bottom: 3%; } .confFile:last-child { margin-bottom: 0; } .stripe { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; font-size: 300%; background: radial-gradient(90% 90%, #f7d794, #f5cd79); }