151 lines
3.5 KiB
CSS
151 lines
3.5 KiB
CSS
/**
|
|
* START --- TAILWIND GENERATOR EDIT
|
|
*
|
|
* `yarn rw generate util tailwind` placed these imports here
|
|
* to inject Tailwind's styles into your CSS.
|
|
* For more information, see: https://tailwindcss.com/docs/installation#add-tailwind-to-your-css
|
|
*/
|
|
@import "tailwindcss/base";
|
|
@import "tailwindcss/components";
|
|
@import "tailwindcss/utilities";
|
|
|
|
/**
|
|
* END --- TAILWIND GENERATOR EDIT
|
|
*/
|
|
|
|
@layer base {
|
|
body {
|
|
font-family: 'Fira Sans', ui-sans-serif, system-ui, -apple-system, system-ui, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
}
|
|
|
|
/* https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/ */
|
|
.visually-hidden {
|
|
clip: rect(0 0 0 0);
|
|
clip-path: inset(50%);
|
|
height: 1px;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
white-space: nowrap;
|
|
width: 1px;
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.tabToggle {
|
|
@apply text-ch-gray-300 p-3 mb-1 flex justify-center;
|
|
}
|
|
.tabToggle.active {
|
|
@apply bg-ch-pink-800 text-ch-pink-300 bg-opacity-30;
|
|
}
|
|
.tabToggle.disabled {
|
|
@apply text-ch-gray-550 cursor-not-allowed;
|
|
}
|
|
}
|
|
|
|
.three-debug-panel-1 {
|
|
position: fixed;
|
|
padding-top: 300px;
|
|
}
|
|
.three-debug-panel-2 {
|
|
position: fixed;
|
|
padding-top: 300px;
|
|
padding-left: 100px;
|
|
}
|
|
|
|
.markdown-overrides h4 {
|
|
@apply text-lg font-bold;
|
|
}
|
|
.markdown-overrides {
|
|
@apply bg-transparent;
|
|
}
|
|
.markdown-overrides div {
|
|
@apply text-ch-gray-300 bg-transparent;
|
|
}
|
|
.markdown-overrides div a {
|
|
@apply text-ch-pink-500 underline bg-transparent;
|
|
}
|
|
|
|
.markdown-overrides div h3 {
|
|
@apply text-xl;
|
|
}
|
|
.markdown-overrides div h2 {
|
|
@apply text-2xl;
|
|
}
|
|
.markdown-overrides div h1 {
|
|
@apply text-3xl;
|
|
}
|
|
.markdown-overrides ol {
|
|
@apply list-decimal;
|
|
}
|
|
.markdown-overrides ul {
|
|
@apply list-disc;
|
|
}
|
|
|
|
#cadhub-ide.mosaic-toolbar-overrides .mosaic-blueprint-theme {
|
|
background-color: #0D0D13;
|
|
}
|
|
#cadhub-ide.mosaic-toolbar-overrides .mosaic-root {
|
|
top: 0;
|
|
}
|
|
.mosaic-toolbar-overrides .mosaic-window .mosaic-window-toolbar {
|
|
/* makes the height of the toolbar based off the content inside instead of hardcoded to 30px */
|
|
height: unset;
|
|
}
|
|
/* used in IdeContainer component */
|
|
#cadhub-ide .mosaic-window.console .mosaic-window-body {
|
|
overflow-y: auto;
|
|
}
|
|
|
|
|
|
/* Used for LandingSection.js, if it's gone or these class isn't used there you can probably delete it */
|
|
.svg-shadow {
|
|
filter: drop-shadow(0 15px 10px #00000036) drop-shadow(0 4px 6px #00000036);
|
|
}
|
|
|
|
/* Used for LandingSection.js, if it's gone or these class isn't used there you can probably delete it */
|
|
.landing-bg-clip-path {
|
|
clip-path: polygon(0 0, 100% 62%, 100% 100%, 0% 100%);
|
|
}
|
|
|
|
/* Used for LandingSection.js, if it's gone or these class isn't used there you can probably delete it */
|
|
@media only screen and (max-width: 1600px) {
|
|
.landing-bg-clip-path {
|
|
clip-path: polygon(0 10%, 100% 55%, 100% 100%, 0% 100%);
|
|
}
|
|
}
|
|
/* Used for LandingSection.js, if it's gone or these class isn't used there you can probably delete it */
|
|
@media only screen and (max-width: 800px) {
|
|
.landing-bg-clip-path {
|
|
clip-path: polygon(0 12%, 100% 70%, 100% 100%, 0% 100%);
|
|
}
|
|
}
|
|
|
|
.material-ui-overrides,.MuiPopover-paper {
|
|
/* stop pop over from scrolling */
|
|
overflow: visible !important;
|
|
}
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
body {
|
|
/* TODO can I use a tailwind class here? */
|
|
background-color: #f7fafc;
|
|
}
|
|
|
|
button, input, label, textarea {
|
|
display: block;
|
|
outline: none;
|
|
}
|
|
|
|
label {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.error {
|
|
color: red;
|
|
}
|
|
|
|
input.error, textarea.error {
|
|
border: 1px solid red;
|
|
}
|