2022-04-23 17:49:24 +00:00
|
|
|
a,
|
|
|
|
button {
|
2023-02-28 05:29:48 +00:00
|
|
|
cursor: default !important;
|
2022-04-24 04:22:58 +00:00
|
|
|
}
|
|
|
|
|
2022-05-23 04:24:43 +00:00
|
|
|
body {
|
2024-05-01 14:35:09 +00:00
|
|
|
@apply cursor-default;
|
2023-07-03 07:12:13 +00:00
|
|
|
-webkit-user-select: none;
|
2022-10-21 11:45:53 +00:00
|
|
|
// font-family: 'InterVariable', sans-serif;
|
2022-05-23 04:24:43 +00:00
|
|
|
}
|
2022-04-26 07:20:09 +00:00
|
|
|
|
2022-10-21 11:45:53 +00:00
|
|
|
.app-background {
|
2022-10-21 05:49:15 +00:00
|
|
|
@apply bg-app;
|
|
|
|
}
|
|
|
|
|
2023-08-15 08:23:41 +00:00
|
|
|
.frame::before {
|
|
|
|
@apply bg-app-frame;
|
|
|
|
content: '';
|
|
|
|
pointer-events: none;
|
|
|
|
user-select: none;
|
|
|
|
position: absolute;
|
|
|
|
inset: 0px;
|
|
|
|
border-radius: inherit;
|
|
|
|
padding: 1px;
|
2023-08-29 10:47:04 +00:00
|
|
|
mask:
|
|
|
|
linear-gradient(black, black) content-box content-box,
|
|
|
|
linear-gradient(black, black);
|
2023-08-15 08:23:41 +00:00
|
|
|
mask-composite: xor;
|
|
|
|
z-index: 9999;
|
|
|
|
}
|
|
|
|
|
2022-10-21 05:49:15 +00:00
|
|
|
.has-blur-effects {
|
2022-10-21 11:45:53 +00:00
|
|
|
.app-background {
|
2022-10-22 04:50:47 +00:00
|
|
|
// adjust macOS blur intensity here
|
2022-10-22 06:21:22 +00:00
|
|
|
// @apply bg-app/[0.88];
|
|
|
|
@apply bg-app;
|
2022-10-21 05:49:15 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-04-26 07:20:09 +00:00
|
|
|
.no-scrollbar {
|
2022-05-23 07:54:46 +00:00
|
|
|
-ms-overflow-style: none; /* for Internet Explorer, Edge */
|
|
|
|
scrollbar-width: none; /* for Firefox */
|
|
|
|
overflow-y: scroll;
|
2022-04-26 07:20:09 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.no-scrollbar::-webkit-scrollbar {
|
2022-05-23 07:54:46 +00:00
|
|
|
display: none;
|
2022-04-26 07:20:09 +00:00
|
|
|
}
|
2022-04-27 17:50:49 +00:00
|
|
|
|
2023-05-17 20:34:05 +00:00
|
|
|
.no-scrollbar::-webkit-scrollbar {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
|
2023-09-15 13:39:58 +00:00
|
|
|
/*Tooltip*/
|
|
|
|
|
|
|
|
.TooltipContent {
|
2023-09-21 11:10:56 +00:00
|
|
|
animation-duration: 0.6s;
|
|
|
|
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
|
2023-09-15 13:39:58 +00:00
|
|
|
}
|
|
|
|
.TooltipContent[data-side='top'] {
|
2023-09-21 11:10:56 +00:00
|
|
|
animation-name: slideUp;
|
2023-09-15 13:39:58 +00:00
|
|
|
}
|
|
|
|
.TooltipContent[data-side='bottom'] {
|
2023-09-21 11:10:56 +00:00
|
|
|
animation-name: slideDown;
|
2023-09-15 13:39:58 +00:00
|
|
|
}
|
|
|
|
|
2023-10-05 14:16:56 +00:00
|
|
|
.TooltipContent[data-side='right'] {
|
|
|
|
animation-name: slideRight;
|
2023-10-21 11:57:04 +00:00
|
|
|
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
|
2023-10-05 14:16:56 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes slideRight {
|
|
|
|
from {
|
|
|
|
opacity: 0;
|
|
|
|
transform: translateX(-10px);
|
|
|
|
}
|
|
|
|
to {
|
|
|
|
opacity: 1;
|
|
|
|
transform: translateX(0);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2023-09-15 13:39:58 +00:00
|
|
|
@keyframes slideDown {
|
2023-09-21 11:10:56 +00:00
|
|
|
from {
|
|
|
|
opacity: 0;
|
|
|
|
transform: translateY(-10px);
|
|
|
|
}
|
|
|
|
to {
|
|
|
|
opacity: 1;
|
|
|
|
transform: translateY(0);
|
|
|
|
}
|
2023-09-15 13:39:58 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes slideUp {
|
2023-09-21 11:10:56 +00:00
|
|
|
from {
|
|
|
|
opacity: 0;
|
|
|
|
transform: translateY(10px);
|
|
|
|
}
|
|
|
|
to {
|
|
|
|
opacity: 1;
|
|
|
|
transform: translateY(0);
|
|
|
|
}
|
2023-09-15 13:39:58 +00:00
|
|
|
}
|
|
|
|
|
2022-04-27 17:50:49 +00:00
|
|
|
.custom-scroll {
|
2022-05-23 07:54:46 +00:00
|
|
|
-ms-overflow-style: none; /* for Internet Explorer, Edge */
|
|
|
|
overflow-y: scroll;
|
2022-04-27 17:50:49 +00:00
|
|
|
}
|
|
|
|
|
2023-08-29 10:47:04 +00:00
|
|
|
::-webkit-scrollbar-corner {
|
|
|
|
background-color: transparent;
|
|
|
|
}
|
|
|
|
|
2022-04-24 08:02:35 +00:00
|
|
|
.explorer-scroll {
|
2022-05-23 07:54:46 +00:00
|
|
|
&::-webkit-scrollbar {
|
|
|
|
height: 6px;
|
2022-12-30 16:53:24 +00:00
|
|
|
width: 6px;
|
2022-05-23 07:54:46 +00:00
|
|
|
}
|
|
|
|
&::-webkit-scrollbar-track {
|
2023-09-27 14:49:01 +00:00
|
|
|
@apply rounded-[6px] bg-transparent;
|
|
|
|
margin-top: var(--scrollbar-margin-top);
|
|
|
|
margin-bottom: var(--scrollbar-margin-bottom);
|
2022-05-23 07:54:46 +00:00
|
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb {
|
2023-09-11 15:34:18 +00:00
|
|
|
@apply rounded-[6px] bg-app-explorerScrollbar;
|
2022-12-30 16:53:24 +00:00
|
|
|
}
|
2022-04-24 04:22:58 +00:00
|
|
|
}
|
2023-08-29 10:47:04 +00:00
|
|
|
|
2022-04-27 17:50:49 +00:00
|
|
|
.default-scroll {
|
2022-05-23 07:54:46 +00:00
|
|
|
&::-webkit-scrollbar {
|
|
|
|
height: 6px;
|
|
|
|
width: 8px;
|
|
|
|
}
|
|
|
|
&::-webkit-scrollbar-track {
|
2023-02-16 07:04:19 +00:00
|
|
|
@apply rounded-[6px] bg-transparent;
|
2022-05-23 07:54:46 +00:00
|
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb {
|
2023-04-04 05:39:07 +00:00
|
|
|
@apply rounded-[6px] bg-app-box;
|
2022-05-23 07:54:46 +00:00
|
|
|
}
|
2022-04-27 17:50:49 +00:00
|
|
|
}
|
|
|
|
.page-scroll {
|
2022-05-23 07:54:46 +00:00
|
|
|
&::-webkit-scrollbar {
|
|
|
|
height: 6px;
|
|
|
|
width: 8px;
|
|
|
|
}
|
|
|
|
&::-webkit-scrollbar-track {
|
2023-06-23 16:39:13 +00:00
|
|
|
@apply rounded-[6px] bg-transparent;
|
|
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
|
|
@apply rounded-[6px] bg-app-box;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.topbar-page-scroll {
|
|
|
|
&::-webkit-scrollbar {
|
|
|
|
height: 6px;
|
|
|
|
width: 8px;
|
|
|
|
}
|
|
|
|
&::-webkit-scrollbar-track {
|
|
|
|
@apply mt-[46px] rounded-[6px] bg-transparent;
|
2022-05-23 07:54:46 +00:00
|
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb {
|
2023-04-04 05:39:07 +00:00
|
|
|
@apply rounded-[6px] bg-app-box;
|
2022-05-23 07:54:46 +00:00
|
|
|
}
|
2022-04-27 17:50:49 +00:00
|
|
|
}
|
2023-11-16 13:16:29 +00:00
|
|
|
.quick-preview-images-scroll {
|
|
|
|
&::-webkit-scrollbar {
|
|
|
|
height: 6px;
|
|
|
|
width: 8px;
|
|
|
|
}
|
|
|
|
&::-webkit-scrollbar-track {
|
|
|
|
@apply rounded-[6px] bg-transparent;
|
|
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb {
|
2023-11-25 01:49:52 +00:00
|
|
|
@apply rounded-[6px] bg-white/20;
|
2023-11-16 13:16:29 +00:00
|
|
|
}
|
|
|
|
}
|
2023-06-16 03:49:02 +00:00
|
|
|
.job-manager-scroll {
|
|
|
|
&::-webkit-scrollbar {
|
|
|
|
height: 6px;
|
|
|
|
width: 8px;
|
|
|
|
}
|
|
|
|
&::-webkit-scrollbar-track {
|
|
|
|
@apply my-[2px] rounded-[6px] bg-transparent;
|
|
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
|
|
@apply rounded-[6px] bg-app-shade/20;
|
|
|
|
}
|
|
|
|
}
|
2022-06-21 08:23:14 +00:00
|
|
|
.inspector-scroll {
|
|
|
|
// overflow: overlay;
|
|
|
|
&::-webkit-scrollbar {
|
|
|
|
height: 6px;
|
|
|
|
width: 5px;
|
|
|
|
}
|
|
|
|
&::-webkit-scrollbar-track {
|
2023-02-16 07:04:19 +00:00
|
|
|
@apply my-[8px] bg-transparent;
|
2022-06-21 08:23:14 +00:00
|
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb {
|
2023-04-04 05:39:07 +00:00
|
|
|
@apply rounded-[6px] bg-app/70 opacity-0;
|
2022-06-21 08:23:14 +00:00
|
|
|
}
|
|
|
|
&:hover {
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
|
|
@apply opacity-100;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2022-05-04 09:12:20 +00:00
|
|
|
|
2022-10-16 04:40:10 +00:00
|
|
|
.overlay-scroll {
|
|
|
|
// overflow: overlay;
|
|
|
|
&::-webkit-scrollbar {
|
|
|
|
height: 6px;
|
|
|
|
width: 5px;
|
|
|
|
}
|
|
|
|
&::-webkit-scrollbar-track {
|
2023-02-16 07:04:19 +00:00
|
|
|
@apply my-[5px] bg-transparent;
|
2022-10-16 04:40:10 +00:00
|
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb {
|
2023-02-16 07:04:19 +00:00
|
|
|
@apply w-[5px] rounded-[6px] bg-black/70 opacity-0;
|
2022-10-16 04:40:10 +00:00
|
|
|
}
|
|
|
|
&:hover {
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
|
|
@apply opacity-100;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2023-08-29 10:47:04 +00:00
|
|
|
.textviewer-scroll {
|
|
|
|
&::-webkit-scrollbar {
|
|
|
|
height: 6px;
|
|
|
|
width: 8px;
|
|
|
|
}
|
|
|
|
&::-webkit-scrollbar-track {
|
|
|
|
@apply bg-transparent;
|
|
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb {
|
2023-09-21 11:10:56 +00:00
|
|
|
@apply rounded-md bg-app-box;
|
2023-08-29 10:47:04 +00:00
|
|
|
}
|
|
|
|
}
|
2022-10-16 04:40:10 +00:00
|
|
|
|
2022-05-04 09:12:20 +00:00
|
|
|
@keyframes fadeIn {
|
2022-05-23 07:54:46 +00:00
|
|
|
from {
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
to {
|
|
|
|
opacity: 1;
|
|
|
|
}
|
2022-05-04 09:12:20 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes fadeOut {
|
2022-05-23 07:54:46 +00:00
|
|
|
from {
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
to {
|
|
|
|
opacity: 0;
|
|
|
|
}
|
2022-05-04 09:12:20 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
@-webkit-keyframes slide-top {
|
2022-05-23 07:54:46 +00:00
|
|
|
0% {
|
|
|
|
-webkit-transform: translateY(0);
|
|
|
|
transform: translateY(0);
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
-webkit-transform: translateY(-50px);
|
|
|
|
transform: translateY(-50px);
|
|
|
|
}
|
2022-05-04 09:12:20 +00:00
|
|
|
}
|
|
|
|
@keyframes slide-top {
|
2022-05-23 07:54:46 +00:00
|
|
|
0% {
|
|
|
|
-webkit-transform: translateY(0);
|
|
|
|
transform: translateY(0);
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
-webkit-transform: translateY(-50px);
|
|
|
|
transform: translateY(-50px);
|
|
|
|
}
|
2022-05-04 09:12:20 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.dialog-overlay[data-state='open'] {
|
2022-05-23 07:54:46 +00:00
|
|
|
animation: fadeIn 200ms ease-out forwards;
|
2022-05-04 09:12:20 +00:00
|
|
|
}
|
|
|
|
.dialog-overlay[data-state='closed'] {
|
2022-05-23 07:54:46 +00:00
|
|
|
animation: fadeIn 200ms ease-out forwards;
|
2022-05-04 09:12:20 +00:00
|
|
|
}
|
|
|
|
.dialog-content[data-state='open'] {
|
2022-05-23 07:54:46 +00:00
|
|
|
-webkit-animation: slide-top 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) both;
|
|
|
|
animation: slide-top 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) both;
|
2022-05-04 09:12:20 +00:00
|
|
|
}
|
|
|
|
.dialog-content[data-state='closed'] {
|
2022-05-23 07:54:46 +00:00
|
|
|
animation: bounceDown 100ms ease-in forwards;
|
2022-05-23 04:24:43 +00:00
|
|
|
}
|
2022-07-18 03:45:04 +00:00
|
|
|
|
|
|
|
.picker {
|
2022-10-06 23:45:15 +00:00
|
|
|
position: relative;
|
2022-07-18 03:45:04 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.swatch {
|
2022-10-06 23:45:15 +00:00
|
|
|
width: 28px;
|
|
|
|
height: 28px;
|
|
|
|
border-radius: 8px;
|
|
|
|
border: 3px solid #fff;
|
2023-08-29 10:47:04 +00:00
|
|
|
box-shadow:
|
|
|
|
0 0 0 1px rgba(0, 0, 0, 0.1),
|
|
|
|
inset 0 0 0 1px rgba(0, 0, 0, 0.1);
|
2022-10-06 23:45:15 +00:00
|
|
|
cursor: pointer;
|
2022-07-18 03:45:04 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.popover {
|
2022-10-06 23:45:15 +00:00
|
|
|
position: absolute;
|
|
|
|
top: calc(100% + 2px);
|
|
|
|
left: 0;
|
|
|
|
border-radius: 9px;
|
|
|
|
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
|
|
|
|
}
|
2023-03-30 02:49:19 +00:00
|
|
|
|
|
|
|
.react-colorful__saturation {
|
|
|
|
border-radius: 4px !important;
|
|
|
|
}
|
|
|
|
|
|
|
|
.react-colorful__saturation-pointer {
|
|
|
|
width: 12px !important;
|
|
|
|
height: 12px !important;
|
|
|
|
}
|
|
|
|
|
|
|
|
.react-colorful__hue,
|
|
|
|
.react-colorful__alpha {
|
|
|
|
margin-top: 12px !important;
|
|
|
|
height: 8px !important;
|
|
|
|
border-radius: 4px !important;
|
|
|
|
}
|
|
|
|
|
|
|
|
.react-colorful__hue-pointer,
|
|
|
|
.react-colorful__alpha-pointer {
|
|
|
|
height: 18px !important;
|
|
|
|
width: 8px !important;
|
|
|
|
border-radius: 3px !important;
|
|
|
|
}
|
2023-06-06 06:55:56 +00:00
|
|
|
|
|
|
|
.selecto-selection {
|
|
|
|
@apply rounded;
|
|
|
|
border-color: hsla(var(--color-accent));
|
|
|
|
background-color: hsla(var(--color-accent), 0.2) !important;
|
|
|
|
z-index: 10 !important;
|
|
|
|
}
|
2023-06-24 07:23:30 +00:00
|
|
|
|
|
|
|
.indeterminate-progress-bar {
|
|
|
|
/* Rounded border */
|
|
|
|
border-radius: 9999px;
|
|
|
|
|
|
|
|
/* Size */
|
|
|
|
height: 4px;
|
|
|
|
|
|
|
|
position: relative;
|
|
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
|
|
|
|
.indeterminate-progress-bar__progress {
|
|
|
|
/* Rounded border */
|
|
|
|
border-radius: 9999px;
|
|
|
|
|
|
|
|
/* Absolute position */
|
|
|
|
position: absolute;
|
|
|
|
bottom: 0;
|
|
|
|
top: 0;
|
|
|
|
width: 50%;
|
|
|
|
|
|
|
|
/* Move the bar infinitely */
|
|
|
|
animation-duration: 2s;
|
|
|
|
animation-iteration-count: infinite;
|
|
|
|
animation-name: indeterminate-progress-bar;
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes indeterminate-progress-bar {
|
|
|
|
from {
|
|
|
|
left: -50%;
|
|
|
|
}
|
|
|
|
to {
|
|
|
|
left: 100%;
|
|
|
|
}
|
|
|
|
}
|
2023-11-17 06:58:44 +00:00
|
|
|
|
|
|
|
.react-slidedown.search-options-slide {
|
|
|
|
transition-duration: 300ms;
|
|
|
|
transition-timing-function: cubic-bezier(0.85, 0, 0.15, 1);
|
|
|
|
}
|
2024-01-08 06:42:17 +00:00
|
|
|
|
2024-01-16 12:15:03 +00:00
|
|
|
.icon-with-shadow {
|
|
|
|
filter: url(#svg-shadow-filter);
|
|
|
|
}
|
|
|
|
|
2024-01-08 06:42:17 +00:00
|
|
|
@keyframes wiggle {
|
2024-02-13 18:26:19 +00:00
|
|
|
0%,
|
|
|
|
100% {
|
|
|
|
transform: rotate(-1deg);
|
|
|
|
}
|
|
|
|
50% {
|
|
|
|
transform: rotate(1deg);
|
|
|
|
}
|
2024-01-08 06:42:17 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.wiggle {
|
2024-02-13 18:26:19 +00:00
|
|
|
animation: wiggle 200ms infinite;
|
2024-01-08 06:42:17 +00:00
|
|
|
}
|
2024-03-26 13:05:46 +00:00
|
|
|
|
|
|
|
// sparkles
|
|
|
|
|
|
|
|
@keyframes comeInOut {
|
|
|
|
0% {
|
|
|
|
transform: scale(0);
|
|
|
|
}
|
|
|
|
50% {
|
|
|
|
transform: scale(1);
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
transform: scale(0);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes spin {
|
|
|
|
0% {
|
|
|
|
transform: rotate(0deg);
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
transform: rotate(180deg);
|
|
|
|
}
|
|
|
|
}
|