threed-garden
Version:
ThreeD Garden: WebGL 3D Environment Interface for Next.JS React TypeScript Three.JS React-Three Physics, 2D Paper.JS; APIs: Apollo GraphQL, WordPress; CSS: Tailwind, Radix-UI; Libraries: FarmBot 3D; AI: OpenAI, DeepSeek
920 lines (798 loc) • 17.2 kB
CSS
/* CUSTOM THREED CSS */
/*
** RADIX-UI CSS
*/
@import '@radix-ui/colors/black-alpha.css';
@import '@radix-ui/colors/gray.css';
@import '@radix-ui/colors/gray-dark.css';
@import "@radix-ui/colors/mauve.css";
@import "@radix-ui/colors/indigo.css";
@import "@radix-ui/colors/purple.css";
@import '@radix-ui/colors/violet.css';
@import "@radix-ui/colors/green.css";
@import '@radix-ui/colors/grass.css';
/* resets ??? */
/*
button,
h3,
p,
fieldset,
{
all: unset;
}
*/
/* NAVIGATION MENUS (MAIN-NAV-2) */
.NavigationMenuRoot {
position: relative;
/* display: inline-flex;
justify-content: start;
align-items: center; */
width: 80vw;
z-index: 1;
}
.NavigationMenuList {
list-style: none;
display: inline-flex;
justify-content: start;
align-items: center;
/* background-color: var(--black-a9); */
/* padding: 4px; */
padding: 0;
margin: 0;
margin-left: 16px;
/* border-radius: 6px; */
/* box-shadow: 0 2px 10px var(--black-a7); */
}
.NavigationMenuTrigger,
.NavigationMenuLink {
/* padding: 4px 8px; */
padding: 0;
margin: 0;
margin-top: 8px;
/* margin-bottom: 5px; */
outline: none;
user-select: none;
/* font-weight: 500; */
font-size: 14px;
/* line-height: 1.0; */
color: var(--violet-11);
/* background-color: var(--black-a9); */
background-color: transparent;
border-color: transparent;
/* border-radius: 4px; */
}
.NavigationMenuTrigger:focus,
.NavigationMenuLink:focus {
/* box-shadow: 0 0 0 2px var(--violet-7); */
}
.NavigationMenuTrigger:hover,
.NavigationMenuLink:hover {
/* background-color: var(--violet-3); */
/* background-color: var(--gray-11); */
background-color: var(--black-a9);
}
.NavigationMenuTrigger {
display: inline-flex;
align-items: center;
justify-content: space-between;
/* gap: 2px; */
}
.NavigationMenuLink {
display: inline-flex;
align-items: center;
justify-content: space-between;
text-decoration: none;
/* font-size: 14px; */
/* line-height: 1.5; */
}
.NavigationMenuContent {
position: absolute;
top: 0;
left: 0;
width: 100%;
animation-duration: 250ms;
animation-timing-function: ease;
/* background-color: var(--gray-11); */
/* background-color: var(--black-a9); */
background-color: var(--black-a11);
padding: 16px;
}
.NavigationMenuContent[data-motion="from-start"] {
animation-name: enterFromLeft;
}
.NavigationMenuContent[data-motion="from-end"] {
animation-name: enterFromRight;
}
.NavigationMenuContent[data-motion="to-start"] {
animation-name: exitToLeft;
}
.NavigationMenuContent[data-motion="to-end"] {
animation-name: exitToRight;
}
@media only screen and (min-width: 600px) {
.NavigationMenuContent {
width: auto;
}
}
.NavigationMenuIndicator {
display: flex;
align-items: flex-end;
justify-content: center;
height: 10px;
top: 100%;
overflow: hidden;
z-index: 1;
transition:
width,
transform 250ms ease;
}
.NavigationMenuIndicator[data-state="visible"] {
animation: fadeIn 200ms ease;
}
.NavigationMenuIndicator[data-state="hidden"] {
animation: fadeOut 200ms ease;
}
.NavigationMenuViewport {
position: relative;
transform-origin: top center;
/* margin-top: 10px; */
width: 100%;
/* background-color: var(--black-a9); */
/* border-radius: 6px; */
overflow: hidden;
box-shadow:
hsl(206 22% 7% / 35%) 0px 10px 38px -10px,
hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
height: var(--radix-navigation-menu-viewport-height);
transition:
width,
height,
300ms ease;
}
.NavigationMenuViewport[data-state="open"] {
animation: scaleIn 200ms ease;
}
.NavigationMenuViewport[data-state="closed"] {
animation: scaleOut 200ms ease;
}
@media only screen and (min-width: 600px) {
.NavigationMenuViewport {
width: var(--radix-navigation-menu-viewport-width);
}
}
.List {
display: grid;
padding: 0;
margin: 0;
column-gap: 16px;
list-style: none;
}
@media only screen and (min-width: 800px) {
.List.one {
width: 600px;
grid-template-columns: 0.75fr 1fr;
}
.List.two {
width: 600px;
grid-auto-flow: column;
grid-template-rows: repeat(3, 1fr);
}
}
.ListItemLink {
/* display: block; */
outline: none;
text-decoration: none;
user-select: none;
/* padding: 12px; */
/* border-radius: 6px; */
/* font-size: 14px; */
/* line-height: 1.0; */
}
.ListItemLink:focus {
/* box-shadow: 0 0 0 2px var(--violet-7); */
}
.ListItemLink:hover {
/* background-color: var(--mauve-3); */
background-color: var(--black-a9);
}
.ListItemHeading {
font-weight: 500;
line-height: 1.2;
/* margin-bottom: 5px; */
color: var(--violet-9);
}
.ListItemText {
color: var(--gray-6);
line-height: 1.4;
font-weight: initial;
}
.Callout {
display: flex;
/* justify-content: flex-end; */
justify-content: flex-start;
flex-direction: column;
width: 100%;
height: 100%;
/* background: linear-gradient(135deg, var(--purple-9) 0%, var(--indigo-9) 100%); */
border-radius: 6px;
padding: 16px;
text-decoration: none;
outline: none;
user-select: none;
}
.Callout:focus {
box-shadow: 0 0 0 2px var(--violet-7);
}
.CalloutHeading {
color: white;
font-size: 18px;
font-weight: 500;
line-height: 1.2;
margin-top: 16px;
margin-bottom: 8px;
}
.CalloutText {
color: var(--mauve-4);
font-size: 14px;
line-height: 1.2;
margin-right: 32px;
/* margin-bottom: 8px; */
}
.ViewportPosition {
position: absolute;
display: flex;
/* justify-content: center; */
width: 100%;
top: 100%;
left: 0;
perspective: 2000px;
}
.CaretDown {
position: relative;
color: var(--violet-10);
top: 1px;
transition: transform 250ms ease;
}
[data-state="open"] > .CaretDown {
transform: rotate(-180deg);
}
.Arrow {
position: relative;
top: 70%;
background-color: var(--black-a9);
width: 10px;
height: 10px;
transform: rotate(45deg);
border-top-left-radius: 2px;
}
@keyframes enterFromRight {
from {
opacity: 0;
transform: translateX(200px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes enterFromLeft {
from {
opacity: 0;
transform: translateX(-200px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes exitToRight {
from {
opacity: 1;
transform: translateX(0);
}
to {
opacity: 0;
transform: translateX(200px);
}
}
@keyframes exitToLeft {
from {
opacity: 1;
transform: translateX(0);
}
to {
opacity: 0;
transform: translateX(-200px);
}
}
@keyframes scaleIn {
from {
opacity: 0;
transform: rotateX(-30deg) scale(0.9);
}
to {
opacity: 1;
transform: rotateX(0deg) scale(1);
}
}
@keyframes scaleOut {
from {
opacity: 1;
transform: rotateX(0deg) scale(1);
}
to {
opacity: 0;
transform: rotateX(-10deg) scale(0.95);
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
/* ACCORDIONS (TESTING) */
.AccordionRoot {
/* display: flex; */
/* flexDirection: row; */
/* height: 60vh; */
/* width: auto; */
/* background-color: var(--grass-6); */
/* box-shadow: 0 2px 10px var(--black-a4); */
/* border-radius: 6px; */
/* border: 2px solid red; */
/* border: 4px solid blue; */
/* padding: 16px; */
/* margin: 0 !important; */
}
.AccordionItem {
/* overflow: hidden; */
margin-top: 1px;
/* border: 1px solid orange; */
}
.AccordionItem:first-child {
margin-top: 0;
/* border-top-left-radius: 4px;
border-top-right-radius: 4px; */
/* border: 1px solid orange; */
}
.AccordionItem:last-child {
/* border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px; */
/* border: 1px solid yellow; */
}
.AccordionItem:focus-within {
position: relative;
z-index: 1;
box-shadow: 0 0 0 2px var(--gray-12);
/* border: 1px solid lightblue; */
}
.AccordionHeader {
display: flex;
/* border: 1px solid dodgerblue; */
}
.AccordionTrigger {
/* font-family: inherit; */
/* background-color: transparent; */
/* padding: 0 20px; */
/* height: 45px; */
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
/* font-size: 15px; */
/* line-height: 1; */
color: var(--violet-11);
/* box-shadow: 0 1px 0 var(--gray-6); */
background-color: var(--black-a9);
}
.AccordionTrigger:hover {
background-color: var(--black-a9);
}
.AccordionContent {
overflow: hidden;
font-size: 15px;
color: var(--gray-11);
background-color: var(--black-a9);
}
.AccordionContent[data-state='open'] {
animation: slideDown 300ms cubic-bezier(0.87, 0, 0.13, 1);
}
.AccordionContent[data-state='closed'] {
animation: slideUp 300ms cubic-bezier(0.87, 0, 0.13, 1);
}
.AccordionContentText {
padding: 15px 20px;
}
.AccordionChevron {
color: var(--violet-10);
transition: transform 300ms cubic-bezier(0.87, 0, 0.13, 1);
}
.AccordionTrigger[data-state='open'] > .AccordionChevron {
transform: rotate(180deg);
}
@keyframes slideDown {
from {
height: 0;
}
to {
height: var(--radix-accordion-content-height);
}
}
@keyframes slideUp {
from {
height: var(--radix-accordion-content-height);
}
to {
height: 0;
}
}
/* RADIX-UI.primitive.COLLAPSIBLE */
/* @import '@radix-ui/colors/black-alpha.css'; */
/* @import '@radix-ui/colors/violet.css'; */
/* reset */
/* button {
all: unset;
} */
.CollapsibleRoot {
/* width: 100%; */
width: 480px;
}
.CollapsibleContent {
overflow: hidden;
}
.CollapsibleContent[data-state='open'] {
animation: slideDown 300ms ease-out;
}
.CollapsibleContent[data-state='closed'] {
animation: slideUp 300ms ease-out;
}
@keyframes slideDown {
from {
height: 0;
}
to {
height: var(--radix-collapsible-content-height);
}
}
@keyframes slideUp {
from {
height: var(--radix-collapsible-content-height);
}
to {
height: 0;
}
}
.Heading {
/* color: var(--violet-11); */
color: white;
/* font-size: 15px; */
/* line-height: 25px; */
}
.Text {
/* color: var(--violet-11); */
color: white;
font-size: 15px;
line-height: 25px;
}
.Repository {
background-color: black;
border-radius: 4px;
margin: 10px 0;
padding: 10px;
box-shadow: 0 2px 10px var(--black-a7);
}
.ProgressRoot {
position: relative;
overflow: hidden;
background: var(--gray-a9);
border-radius: 99999px;
width: 300px;
height: 25px;
/* Fix overflow clipping in Safari */
/* https://gist.github.com/domske/b66047671c780a238b51c51ffde8d3a0 */
transform: translateZ(0);
}
.ProgressIndicator {
background-color: var(--grass-9);
width: 100%;
height: 100%;
transition: transform 660ms cubic-bezier(0.65, 0, 0.35, 1);
}
/* DIALOG (MODALS) */
.DialogOverlay {
background-color: var(--black-a9);
position: fixed;
inset: 0;
animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
}
.DialogContent {
background-color: white;
border-radius: 6px;
box-shadow:
hsl(206 22% 7% / 35%) 0px 10px 38px -10px,
hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90vw;
max-width: 450px;
max-height: 85vh;
padding: 25px;
animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
}
.DialogContent:focus {
outline: none;
}
.DialogTitle {
margin: 0;
font-weight: 500;
color: var(--mauve-12);
font-size: 17px;
}
.DialogDescription {
margin: 10px 0 20px;
color: var(--mauve-11);
font-size: 15px;
line-height: 1.5;
}
@keyframes overlayShow {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes contentShow {
from {
opacity: 0;
transform: translate(-50%, -48%) scale(0.96);
}
to {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
}
/* BUTTONS */
.Button {
display: inherit;
/* display: inline-flex; */
/* align-items: center; */
/* justify-content: center; */
border: 0;
/* border-width: 0; */
/* border-color: var(--black-a9); */
/* border-radius: 4px; */
background-color: var(--black-a9);
color: var(--violet-11);
box-shadow: 0 2px 10px var(--black-a7);
/* padding: 0 15px; */
/* font-size: 14px; */
/* font-weight: 500; */
/* line-height: 1; */
/* height: 35px; */
}
.Button.violet {
background-color: var(--black-a9);
color: var(--violet-11);
box-shadow: 0 2px 10px var(--black-a7);
}
.Button.violet:hover {
background-color: var(--gray-11);
}
.Button.violet:focus {
box-shadow: 0 0 0 2px black;
}
.Button.green {
background-color: var(--green-4);
color: var(--green-11);
}
.Button.green:hover {
background-color: var(--green-5);
}
.Button.green:focus {
box-shadow: 0 0 0 2px var(--green-7);
}
.IconButton {
font-family: inherit;
border: 0;
border-radius: 100%;
/* border-width: 0; */
/* height: 24px; */
/* width: 24px; */
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--violet-11);
background-color: #131418;
box-shadow: 0 2px 10px var(--black-a7);
}
.IconButton:hover {
/* background-color: var(--violet-4); */
background-color: #131418;
}
.IconButton:focus {
/* box-shadow: 0 0 0 2px var(--violet-7); */
}
/* FORMS */
.Fieldset {
display: flex;
gap: 20px;
align-items: center;
margin-bottom: 15px;
}
.Label {
font-size: 15px;
color: var(--violet-11);
width: 90px;
text-align: right;
}
.Input {
width: 100%;
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 4px;
padding: 0 10px;
font-size: 15px;
line-height: 1;
color: var(--violet-11);
box-shadow: 0 0 0 1px var(--violet-7);
height: 35px;
}
.Input:focus {
box-shadow: 0 0 0 2px var(--violet-8);
}
/* DROPDOWN MENUS */
.DropdownMenuContent,
.DropdownMenuSubContent {
min-width: 220px;
background-color: black;
border-radius: 6px;
padding: 5px;
box-shadow:
0px 10px 38px -10px rgba(22, 23, 24, 0.35),
0px 10px 20px -15px rgba(22, 23, 24, 0.2);
animation-duration: 400ms;
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
will-change: transform, opacity;
}
.DropdownMenuContent[data-side="top"],
.DropdownMenuSubContent[data-side="top"] {
animation-name: slideDownAndFade;
}
.DropdownMenuContent[data-side="right"],
.DropdownMenuSubContent[data-side="right"] {
animation-name: slideLeftAndFade;
}
.DropdownMenuContent[data-side="bottom"],
.DropdownMenuSubContent[data-side="bottom"] {
animation-name: slideUpAndFade;
}
.DropdownMenuContent[data-side="left"],
.DropdownMenuSubContent[data-side="left"] {
animation-name: slideRightAndFade;
}
.DropdownMenuItem,
.DropdownMenuCheckboxItem,
.DropdownMenuRadioItem,
.DropdownMenuSubTrigger {
font-size: 13px;
line-height: 1;
text-decoration: none;
/* background-color: var(--violet-11); */
color: var(--violet-11);
border-radius: 3px;
display: flex;
align-items: center;
height: 25px;
padding: 0 5px;
position: relative;
padding-left: 25px;
user-select: none;
outline: none;
}
.DropdownMenuSubTrigger[data-state="open"] {
/* background-color: var(--violet-4); */
color: var(--violet-11);
}
.DropdownMenuItem[data-disabled],
.DropdownMenuCheckboxItem[data-disabled],
.DropdownMenuRadioItem[data-disabled],
.DropdownMenuSubTrigger[data-disabled] {
color: var(--mauve-8);
pointer-events: none;
}
.DropdownMenuItem[data-highlighted],
.DropdownMenuCheckboxItem[data-highlighted],
.DropdownMenuRadioItem[data-highlighted],
.DropdownMenuSubTrigger[data-highlighted] {
background-color: var(--violet-2);
color: var(--violet-1);
}
.DropdownMenuLabel {
padding-left: 25px;
font-size: 12px;
line-height: 25px;
color: var(--mauve-11);
}
.DropdownMenuSeparator {
height: 1px;
background-color: var(--violet-6);
margin: 5px;
}
.DropdownMenuItemIndicator {
position: absolute;
left: 0;
width: 25px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.DropdownMenuArrow {
fill: white;
}
.RightSlot {
margin-left: auto;
padding-left: 20px;
color: var(--mauve-11);
}
[data-highlighted] > .RightSlot {
color: white;
}
[data-disabled] .RightSlot {
color: var(--mauve-8);
}
@keyframes slideUpAndFade {
from {
opacity: 0;
transform: translateY(2px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideRightAndFade {
from {
opacity: 0;
transform: translateX(-2px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideDownAndFade {
from {
opacity: 0;
transform: translateY(-2px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideLeftAndFade {
from {
opacity: 0;
transform: translateX(2px);
}
to {
opacity: 1;
transform: translateX(0);
}
}