mirror of
https://github.com/nestriness/nestri.git
synced 2025-12-12 08:45:38 +02:00
361 lines
9.0 KiB
CSS
361 lines
9.0 KiB
CSS
@tailwind components;
|
|
@tailwind base;
|
|
@tailwind utilities;
|
|
|
|
|
|
@layer base {
|
|
|
|
html {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
html,
|
|
html * {
|
|
scrollbar-color: theme("colors.gray.700") theme("colors.gray.300");
|
|
scrollbar-width: thin;
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
*::selection {
|
|
background-color: theme("colors.gray.400");
|
|
color: theme("colors.gray.800");
|
|
}
|
|
|
|
*::-moz-selection {
|
|
background-color: theme("colors.gray.400");
|
|
color: theme("colors.gray.800");
|
|
}
|
|
|
|
html.dark *::selection {
|
|
background-color: theme("colors.gray.400");
|
|
color: theme("colors.gray.800");
|
|
}
|
|
|
|
html.dark *::-moz-selection {
|
|
background-color: theme("colors.gray.400");
|
|
color: theme("colors.gray.800");
|
|
}
|
|
|
|
html.dark,
|
|
html.dark * {
|
|
scrollbar-color: theme("colors.gray.300") theme("colors.gray.700");
|
|
scrollbar-width: thin;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
*::selection {
|
|
background-color: theme("colors.gray.400");
|
|
color: theme("colors.gray.800");
|
|
}
|
|
|
|
*::-moz-selection {
|
|
background-color: theme("colors.gray.400");
|
|
color: theme("colors.gray.800");
|
|
}
|
|
|
|
html,
|
|
html * {
|
|
scrollbar-color: theme("colors.gray.300") theme("colors.gray.700");
|
|
scrollbar-width: thin;
|
|
}
|
|
}
|
|
|
|
input:-webkit-autofill,
|
|
input:-webkit-autofill:focus {
|
|
transition: background-color 0s 600000s, color 0s 600000s !important;
|
|
}
|
|
|
|
}
|
|
|
|
.marquee-container {
|
|
width: 100%;
|
|
padding: 1rem;
|
|
scale: var(--scale);
|
|
}
|
|
|
|
.marquee-container[data-spill=true]::after {
|
|
--padding-x: 1rem;
|
|
--padding-y: 1rem;
|
|
content: "";
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
background: hsl(10 80% 0% / 0.25);
|
|
width: calc(var(--scale) * 10000vw);
|
|
height: calc(var(--scale) * 10000vh);
|
|
pointer-events: none;
|
|
translate: -50% -50%;
|
|
mask:
|
|
linear-gradient(white, white) 50% 50% / 100% 100% no-repeat,
|
|
linear-gradient(white, white) 50% 50% / calc(100cqi + (var(--padding-x) * 2)) calc(100cqh + (var(--padding-y) * 2)) no-repeat;
|
|
mask-composite: exclude;
|
|
}
|
|
|
|
.marquee-container:not([data-spill=true]) {
|
|
overflow: hidden;
|
|
}
|
|
|
|
[data-direction=horizontal] {
|
|
height: 100%;
|
|
}
|
|
|
|
[data-direction=vertical] {
|
|
width: 100%;
|
|
}
|
|
|
|
.marquee-container ul {
|
|
display: flex;
|
|
padding: 0;
|
|
margin: 0;
|
|
list-style-type: none;
|
|
}
|
|
|
|
[data-reverse=true] * {
|
|
animation-direction: reverse !important;
|
|
}
|
|
|
|
[data-translate=track][data-direction=horizontal] ul {
|
|
--destination-x: -100%;
|
|
animation: track-translate calc(var(--speed) * 1s) infinite linear;
|
|
}
|
|
|
|
[data-translate=track][data-direction=vertical] ul {
|
|
--destination-y: -100%;
|
|
animation: track-translate calc(var(--speed) * 1s) infinite linear;
|
|
}
|
|
|
|
[data-translate=track][data-direction=horizontal][data-pad=true] ul {
|
|
--destination-x: calc((100% / -3) * 2);
|
|
translate: calc(100% / -3) 0;
|
|
}
|
|
|
|
[data-translate=track][data-direction=vertical][data-pad=true] ul {
|
|
--destination-y: calc((100% / -3) * 2);
|
|
translate: 0 calc(100% / -3);
|
|
}
|
|
|
|
|
|
[data-pad-diff=true] .pad {
|
|
background: hsl(0 0% 10%);
|
|
color: hsl(0 0% 98%);
|
|
}
|
|
|
|
@keyframes track-translate {
|
|
to {
|
|
translate: var(--destination-x, 0) var(--destination-y, 0);
|
|
}
|
|
}
|
|
|
|
[data-direction=horizontal] ul {
|
|
height: max-content;
|
|
width: fit-content;
|
|
align-items: center;
|
|
}
|
|
|
|
[data-direction=vertical] ul {
|
|
width: 100%;
|
|
height: fit-content;
|
|
justify-items: center;
|
|
flex-direction: column;
|
|
}
|
|
|
|
[data-play-state=running] :is(ul, li) {
|
|
animation-play-state: running !important;
|
|
}
|
|
|
|
[data-play-state=paused] :is(ul, li) {
|
|
animation-play-state: paused !important;
|
|
}
|
|
|
|
|
|
/* The animation stuff */
|
|
@media(prefers-reduced-motion: no-preference) {
|
|
[data-translate=items] ul {
|
|
gap: 0;
|
|
}
|
|
|
|
[data-translate=items][data-direction=horizontal].marquee-container {
|
|
padding-inline: 0;
|
|
}
|
|
|
|
[data-translate=items][data-direction=vertical].marquee-container {
|
|
padding-block: 0;
|
|
}
|
|
|
|
[data-translate=items][data-spill=true][data-direction=horizontal].marquee-container::after {
|
|
--padding-x: 0rem;
|
|
}
|
|
|
|
[data-translate=items][data-direction=vertical][data-spill=true].marquee-container::after {
|
|
--padding-y: 0rem;
|
|
}
|
|
|
|
[data-pause-on-hover=true]:hover li {
|
|
animation-play-state: paused !important;
|
|
}
|
|
|
|
[data-translate=items] li {
|
|
--duration: calc(var(--speed) * 1s);
|
|
--delay: calc((var(--duration) / var(--count)) * (var(--index, 0) - (var(--count) * 0.5)));
|
|
animation: slide var(--duration) calc(var(--delay) - (var(--count) * 0.5s)) infinite linear paused;
|
|
translate: var(--origin-x) var(--origin-y);
|
|
}
|
|
|
|
[data-translate=items][data-direction=horizontal] li {
|
|
--origin-x: calc(((var(--count) - var(--index)) + var(--inset, 0)) * 100%);
|
|
--origin-y: 0;
|
|
--destination-x: calc(calc((var(--index) + 1 + var(--outset, 0)) * -100%));
|
|
--destination-y: 0;
|
|
}
|
|
|
|
[data-translate=items][data-direction=vertical] li {
|
|
--origin-x: 0;
|
|
--origin-y: calc(((var(--count) - var(--index)) + var(--inset, 0)) * 100%);
|
|
--destination-x: 0;
|
|
--destination-y: calc(calc((var(--index) + 1 + var(--outset, 0)) * -100%));
|
|
}
|
|
|
|
@keyframes slide {
|
|
100% {
|
|
translate: var(--destination-x) var(--destination-y);
|
|
}
|
|
}
|
|
}
|
|
|
|
.marquee-animation {
|
|
-webkit-animation: loop-animate 60s linear infinite;
|
|
animation: loop-animate 60s linear infinite;
|
|
}
|
|
|
|
@keyframes loop-animate {
|
|
0% {
|
|
-webkit-transform: translateX(0);
|
|
-ms-transform: translateX(0);
|
|
transform: translateX(0);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translateX(-50%);
|
|
-ms-transform: translateX(-50%);
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
|
|
.digit_timing {
|
|
transition: translate 1s linear(0, 0.0009 8.51%, -0.0047 19.22%, 0.0016 22.39%, 0.023 27.81%,
|
|
0.0237 30.08%, 0.0144 31.81%, -0.0051 33.48%, -0.1116 39.25%, -0.1181 40.59%,
|
|
-0.1058 41.79%, -0.0455, 0.0701 45.34%, 0.9702 55.19%, 1.0696 56.97%,
|
|
1.0987 57.88%, 1.1146 58.82%, 1.1181 59.83%, 1.1092 60.95%, 1.0057 66.48%,
|
|
0.986 68.14%, 0.9765 69.84%, 0.9769 72.16%, 0.9984 77.61%, 1.0047 80.79%,
|
|
0.9991 91.48%, 1);
|
|
translate: 0 calc((var(--v) + 1) * (var(--line-height) * -1));
|
|
}
|
|
|
|
.modal-sheet {
|
|
animation-duration: 0.5s;
|
|
animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
|
|
touch-action: none;
|
|
will-change: transform;
|
|
transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
|
|
animation-name: slideFromRight;
|
|
}
|
|
.modal::backdrop,
|
|
.modal-sheet::backdrop {
|
|
animation-duration: 0.5s;
|
|
animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
|
|
touch-action: none;
|
|
will-change: transform;
|
|
transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
|
|
animation-name: fadeIn;
|
|
}
|
|
|
|
.modal-sheet[data-closing] {
|
|
animation-duration: 0.5s;
|
|
animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
|
|
touch-action: none;
|
|
will-change: transform;
|
|
transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
|
|
animation-name: slideToRight;
|
|
}
|
|
|
|
.modal[data-closing]::backdrop,
|
|
.modal-sheet[data-closing]::backdrop{
|
|
animation-duration: 0.5s;
|
|
animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
|
|
touch-action: none;
|
|
will-change: transform;
|
|
transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
|
|
animation-name: fadeOut;
|
|
}
|
|
|
|
.modal {
|
|
animation-duration: 0.5s;
|
|
animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
|
|
touch-action: none;
|
|
will-change: transform;
|
|
transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
|
|
animation-name: modalIn;
|
|
}
|
|
|
|
.modal[data-closing]{
|
|
animation-duration: 0.5s;
|
|
animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
|
|
touch-action: none;
|
|
will-change: transform;
|
|
transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
|
|
animation-name: modalOut;
|
|
}
|
|
|
|
@keyframes slideFromRight {
|
|
from {
|
|
transform: translate3d(var(--initial-transform, 100%), 0, 0);
|
|
}
|
|
|
|
to {
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes slideToRight {
|
|
to {
|
|
transform: translate3d(var(--initial-transform, 100%), 0, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeOut {
|
|
to {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes modalIn {
|
|
from {
|
|
opacity: 0;
|
|
scale: 0.9;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
scale: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes modalOut {
|
|
to {
|
|
opacity: 0;
|
|
scale: 0.9;
|
|
}
|
|
}
|
|
|
|
/* button, a {
|
|
@apply outline-none hover:[box-shadow:0_0_0_2px_#fcfcfc,0_0_0_4px_#8f8f8f] dark:hover:[box-shadow:0_0_0_2px_#161616,0_0_0_4px_#707070] focus:[box-shadow:0_0_0_2px_#fcfcfc,0_0_0_4px_#8f8f8f] dark:focus:[box-shadow:0_0_0_2px_#161616,0_0_0_4px_#707070] [transition:all_0.3s_cubic-bezier(0.4,0,0.2,1)]
|
|
} */ |