/*$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); 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: inset 3px 3px 6px rgba(241, 185, 65, 0.5), inset -3px -3px 6px rgba(251, 238, 208, 0.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-weight: 300;*/ 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%; max-height: 100%; min-height: 10%; grid-template-rows: 30px auto 30px; grid-template-columns: 30% auto; } .filesWithEditor .filterFiles { grid-area: filterFiles; } .filesWithEditor .fileTitle { grid-area: fileTitle; } .filesWithEditor .files { grid-area: files; display: block; min-height: 10%; } .filesWithEditor .files .confFile { padding: 4% 6%; margin-bottom: 3%; } .filesWithEditor .codeEditor { grid-area: codeEditor; } .filesWithEditor .codeEditor .textarea { height: 100%; } .filesWithEditor .filesActions { grid-area: filesActions; } .filesWithEditor .editorActions { grid-area: editorActions; } .filesList { display: flex; flex-direction: column; align-items: stretch; height: 100%; min-height: 10%; width: 100%; padding: 8%; overflow-y: auto; }