Labs, Demos, Experiences

I really enjoy creating weird and not very meaningful projects...

...for fun or learning

.MuiTouchRipple-root { top: 0; left: 0; right: 0; bottom: 0; z-index: 0; overflow: hidden; position: absolute; border-radius: inherit; pointer-events: none; } .MuiTouchRipple-ripple { opacity: 0; position: absolute; } .MuiTouchRipple-rippleVisible { opacity: 0.3; animation: MuiTouchRipple-keyframes-enter 550ms cubic-bezier(0.4, 0, 0.2, 1); transform: scale(1); } .MuiTouchRipple-ripplePulsate { animation-duration: 200ms; } .MuiTouchRipple-child { width: 100%; height: 100%; display: block; opacity: 1; border-radius: 50%; background-color: currentColor; } .MuiTouchRipple-childLeaving { opacity: 0; animation: MuiTouchRipple-keyframes-exit 550ms cubic-bezier(0.4, 0, 0.2, 1); } .MuiTouchRipple-childPulsate { top: 0; left: 0; position: absolute; animation: MuiTouchRipple-keyframes-pulsate 2500ms cubic-bezier(0.4, 0, 0.2, 1) 200ms infinite; } @-webkit-keyframes MuiTouchRipple-keyframes-enter { 0% { opacity: 0.1; transform: scale(0); } 100% { opacity: 0.3; transform: scale(1); } } @-webkit-keyframes MuiTouchRipple-keyframes-exit { 0% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes MuiTouchRipple-keyframes-pulsate { 0% { transform: scale(1); } 50% { transform: scale(0.92); } 100% { transform: scale(1); } } .MuiButtonBase-root { color: inherit; border: 0; cursor: pointer; margin: 0; display: inline-flex; outline: 0; padding: 0; position: relative; align-items: center; user-select: none; border-radius: 0; vertical-align: middle; -moz-appearance: none; justify-content: center; text-decoration: none; background-color: transparent; -webkit-appearance: none; -webkit-tap-highlight-color: transparent; } .MuiButtonBase-root::-moz-focus-inner { border-style: none; } .MuiButtonBase-root.Mui-disabled { cursor: default; pointer-events: none; } @media print { .MuiButtonBase-root { -webkit-print-color-adjust: exact; } } .MuiButton-root { color: #fff; padding: 6px 16px; font-size: 0.875rem; min-width: 64px; box-sizing: border-box; transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-weight: 500; line-height: 1.75; border-radius: 4px; letter-spacing: 0.02857em; text-transform: uppercase; } .MuiButton-root:hover { text-decoration: none; background-color: rgba(255, 255, 255, 0.08); } .MuiButton-root.Mui-disabled { color: rgba(255, 255, 255, 0.3); } @media (hover: none) { .MuiButton-root:hover { background-color: transparent; } } .MuiButton-root:hover.Mui-disabled { background-color: transparent; } .MuiButton-label { width: 100%; display: inherit; align-items: inherit; justify-content: inherit; } .MuiButton-text { padding: 6px 8px; } .MuiButton-textPrimary { color: #3f51b5; } .MuiButton-textPrimary:hover { background-color: rgba(63, 81, 181, 0.08); } @media (hover: none) { .MuiButton-textPrimary:hover { background-color: transparent; } } .MuiButton-textSecondary { color: #f50057; } .MuiButton-textSecondary:hover { background-color: rgba(245, 0, 87, 0.08); } @media (hover: none) { .MuiButton-textSecondary:hover { background-color: transparent; } } .MuiButton-outlined { border: 1px solid rgba(255, 255, 255, 0.23); padding: 5px 15px; } .MuiButton-outlined.Mui-disabled { border: 1px solid rgba(255, 255, 255, 0.12); } .MuiButton-outlinedPrimary { color: #3f51b5; border: 1px solid rgba(63, 81, 181, 0.5); } .MuiButton-outlinedPrimary:hover { border: 1px solid #3f51b5; background-color: rgba(63, 81, 181, 0.08); } @media (hover: none) { .MuiButton-outlinedPrimary:hover { background-color: transparent; } } .MuiButton-outlinedSecondary { color: #f50057; border: 1px solid rgba(245, 0, 87, 0.5); } .MuiButton-outlinedSecondary:hover { border: 1px solid #f50057; background-color: rgba(245, 0, 87, 0.08); } .MuiButton-outlinedSecondary.Mui-disabled { border: 1px solid rgba(255, 255, 255, 0.3); } @media (hover: none) { .MuiButton-outlinedSecondary:hover { background-color: transparent; } } .MuiButton-contained { color: rgba(0, 0, 0, 0.87); box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); background-color: #e0e0e0; } .MuiButton-contained:hover { box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12); background-color: #d5d5d5; } .MuiButton-contained.Mui-focusVisible { box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12); } .MuiButton-contained:active { box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12); } .MuiButton-contained.Mui-disabled { color: rgba(255, 255, 255, 0.3); box-shadow: none; background-color: rgba(255, 255, 255, 0.12); } @media (hover: none) { .MuiButton-contained:hover { box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); background-color: #e0e0e0; } } .MuiButton-contained:hover.Mui-disabled { background-color: rgba(255, 255, 255, 0.12); } .MuiButton-containedPrimary { color: #fff; background-color: #3f51b5; } .MuiButton-containedPrimary:hover { background-color: #303f9f; } @media (hover: none) { .MuiButton-containedPrimary:hover { background-color: #3f51b5; } } .MuiButton-containedSecondary { color: #fff; background-color: #f50057; } .MuiButton-containedSecondary:hover { background-color: #c51162; } @media (hover: none) { .MuiButton-containedSecondary:hover { background-color: #f50057; } } .MuiButton-disableElevation { box-shadow: none; } .MuiButton-disableElevation:hover { box-shadow: none; } .MuiButton-disableElevation.Mui-focusVisible { box-shadow: none; } .MuiButton-disableElevation:active { box-shadow: none; } .MuiButton-disableElevation.Mui-disabled { box-shadow: none; } .MuiButton-colorInherit { color: inherit; border-color: currentColor; } .MuiButton-textSizeSmall { padding: 4px 5px; font-size: 0.8125rem; } .MuiButton-textSizeLarge { padding: 8px 11px; font-size: 0.9375rem; } .MuiButton-outlinedSizeSmall { padding: 3px 9px; font-size: 0.8125rem; } .MuiButton-outlinedSizeLarge { padding: 7px 21px; font-size: 0.9375rem; } .MuiButton-containedSizeSmall { padding: 4px 10px; font-size: 0.8125rem; } .MuiButton-containedSizeLarge { padding: 8px 22px; font-size: 0.9375rem; } .MuiButton-fullWidth { width: 100%; } .MuiButton-startIcon { display: inherit; margin-left: -4px; margin-right: 8px; } .MuiButton-startIcon.MuiButton-iconSizeSmall { margin-left: -2px; } .MuiButton-endIcon { display: inherit; margin-left: 8px; margin-right: -4px; } .MuiButton-endIcon.MuiButton-iconSizeSmall { margin-right: -2px; } .MuiButton-iconSizeSmall > *:first-child { font-size: 18px; } .MuiButton-iconSizeMedium > *:first-child { font-size: 20px; } .MuiButton-iconSizeLarge > *:first-child { font-size: 22px; } .MuiDrawer-docked { flex: 0 0 auto; } .MuiDrawer-paper { top: 0; flex: 1 0 auto; height: 100%; display: flex; outline: 0; z-index: 1200; position: fixed; overflow-y: auto; flex-direction: column; -webkit-overflow-scrolling: touch; } .MuiDrawer-paperAnchorLeft { left: 0; right: auto; } .MuiDrawer-paperAnchorRight { left: auto; right: 0; } .MuiDrawer-paperAnchorTop { top: 0; left: 0; right: 0; bottom: auto; height: auto; max-height: 100%; } .MuiDrawer-paperAnchorBottom { top: auto; left: 0; right: 0; bottom: 0; height: auto; max-height: 100%; } .MuiDrawer-paperAnchorDockedLeft { border-right: 1px solid rgba(255, 255, 255, 0.12); } .MuiDrawer-paperAnchorDockedTop { border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .MuiDrawer-paperAnchorDockedRight { border-left: 1px solid rgba(255, 255, 255, 0.12); } .MuiDrawer-paperAnchorDockedBottom { border-top: 1px solid rgba(255, 255, 255, 0.12); } .jss5 { margin-left: 12px; margin-right: 20px; } .jss6 { display: none; } .jss7 { top: 64px; width: 100px; height: calc(100% - 64px); } .jss8 { display: flex; padding: 0 8px; min-height: 56px; align-items: center; justify-content: flex-end; } @media (min-width:0px) and (orientation: landscape) { .jss8 { min-height: 48px; } } @media (min-width:600px) { .jss8 { min-height: 64px; } } @media print { .MuiDialog-root { position: absolute !important; } } .MuiDialog-scrollPaper { display: flex; align-items: center; justify-content: center; } .MuiDialog-scrollBody { overflow-x: hidden; overflow-y: auto; text-align: center; } .MuiDialog-scrollBody:after { width: 0; height: 100%; content: ""; display: inline-block; vertical-align: middle; } .MuiDialog-container { height: 100%; outline: 0; } @media print { .MuiDialog-container { height: auto; } } .MuiDialog-paper { margin: 32px; position: relative; overflow-y: auto; } @media print { .MuiDialog-paper { box-shadow: none; overflow-y: visible; } } .MuiDialog-paperScrollPaper { display: flex; max-height: calc(100% - 64px); flex-direction: column; } .MuiDialog-paperScrollBody { display: inline-block; text-align: left; vertical-align: middle; } .MuiDialog-paperWidthFalse { max-width: calc(100% - 64px); } .MuiDialog-paperWidthXs { max-width: 444px; } @media (max-width:507.95px) { .MuiDialog-paperWidthXs.MuiDialog-paperScrollBody { max-width: calc(100% - 64px); } } .MuiDialog-paperWidthSm { max-width: 600px; } @media (max-width:663.95px) { .MuiDialog-paperWidthSm.MuiDialog-paperScrollBody { max-width: calc(100% - 64px); } } .MuiDialog-paperWidthMd { max-width: 960px; } @media (max-width:1023.95px) { .MuiDialog-paperWidthMd.MuiDialog-paperScrollBody { max-width: calc(100% - 64px); } } .MuiDialog-paperWidthLg { max-width: 1280px; } @media (max-width:1343.95px) { .MuiDialog-paperWidthLg.MuiDialog-paperScrollBody { max-width: calc(100% - 64px); } } .MuiDialog-paperWidthXl { max-width: 1920px; } @media (max-width:1983.95px) { .MuiDialog-paperWidthXl.MuiDialog-paperScrollBody { max-width: calc(100% - 64px); } } .MuiDialog-paperFullWidth { width: calc(100% - 64px); } .MuiDialog-paperFullScreen { width: 100%; height: 100%; margin: 0; max-width: 100%; max-height: none; border-radius: 0; } .MuiDialog-paperFullScreen.MuiDialog-paperScrollBody { margin: 0; max-width: 100%; } .jss3 { position: relative; background-color: rgba(40,40,40, .8); } .jss4 { flex: 1; color: #323232; margin-left: 16px; } .jss1 { padding: 0; } .jss2 { background-color: #303030; } html { box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } *, *::before, *::after { box-sizing: inherit; } strong, b { font-weight: 700; } body { color: #fff; margin: 0; font-size: 0.875rem; font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-weight: 400; line-height: 1.43; letter-spacing: 0.01071em; background-color: #303030; } @media print { body { background-color: #fff; } } body::backdrop { background-color: #303030; }

Labs, Demos, Experiences

I really enjoy creating weird and not very meaningful projects...

...for fun or learning

Recon(vert)

Mes recettes

Re-Toaster

React ARC

Do-noth'

Snowflake

Ape

Unreleased Game