593 lines
12 KiB
CSS
593 lines
12 KiB
CSS
@import "@plane/tailwind-config/index.css";
|
|
@import "@plane/editor/styles";
|
|
@import "@plane/propel/styles/react-day-picker.css";
|
|
@import "./animations.css";
|
|
@import "./power-k.css";
|
|
@import "./emoji.css";
|
|
@plugin "@tailwindcss/typography";
|
|
|
|
/* Scan web app source files for Tailwind classes */
|
|
@source "../app/**/*.{ts,tsx}";
|
|
@source "../core/**/*.{ts,tsx}";
|
|
@source "../ce/**/*.{ts,tsx}";
|
|
@source "../ee/**/*.{ts,tsx}";
|
|
@source "../helpers/**/*.{ts,tsx}";
|
|
|
|
/* stickies and editor colors */
|
|
:root {
|
|
/* text colors */
|
|
--editor-colors-gray-text: #5c5e63;
|
|
--editor-colors-peach-text: #ff5b59;
|
|
--editor-colors-pink-text: #f65385;
|
|
--editor-colors-orange-text: #fd9038;
|
|
--editor-colors-green-text: #0fc27b;
|
|
--editor-colors-light-blue-text: #17bee9;
|
|
--editor-colors-dark-blue-text: #266df0;
|
|
--editor-colors-purple-text: #9162f9;
|
|
/* end text colors */
|
|
|
|
/* background colors */
|
|
--editor-colors-gray-background: #d6d6d8;
|
|
--editor-colors-peach-background: #ffd5d7;
|
|
--editor-colors-pink-background: #fdd4e3;
|
|
--editor-colors-orange-background: #ffe3cd;
|
|
--editor-colors-green-background: #c3f0de;
|
|
--editor-colors-light-blue-background: #c5eff9;
|
|
--editor-colors-dark-blue-background: #c9dafb;
|
|
--editor-colors-purple-background: #e3d8fd;
|
|
/* end background colors */
|
|
}
|
|
/* background colors */
|
|
[data-theme*="light"] {
|
|
--editor-colors-gray-background: #d6d6d8;
|
|
--editor-colors-peach-background: #ffd5d7;
|
|
--editor-colors-pink-background: #fdd4e3;
|
|
--editor-colors-orange-background: #ffe3cd;
|
|
--editor-colors-green-background: #c3f0de;
|
|
--editor-colors-light-blue-background: #c5eff9;
|
|
--editor-colors-dark-blue-background: #c9dafb;
|
|
--editor-colors-purple-background: #e3d8fd;
|
|
}
|
|
[data-theme*="dark"] {
|
|
--editor-colors-gray-background: #404144;
|
|
--editor-colors-peach-background: #593032;
|
|
--editor-colors-pink-background: #562e3d;
|
|
--editor-colors-orange-background: #583e2a;
|
|
--editor-colors-green-background: #1d4a3b;
|
|
--editor-colors-light-blue-background: #1f495c;
|
|
--editor-colors-dark-blue-background: #223558;
|
|
--editor-colors-purple-background: #3d325a;
|
|
}
|
|
/* end background colors */
|
|
|
|
.shadow-custom {
|
|
box-shadow: 2px 2px 8px 2px rgba(234, 231, 250, 0.3); /* Convert #EAE7FA4D to rgba */
|
|
}
|
|
/* backdrop filter */
|
|
.backdrop-blur-custom {
|
|
@apply backdrop-filter blur-[9px];
|
|
}
|
|
|
|
.epr-search-container > input {
|
|
@apply bg-surface-2! text-primary!;
|
|
border: none !important;
|
|
}
|
|
|
|
.epr-search-container > input::placeholder {
|
|
@apply text-placeholder!;
|
|
}
|
|
|
|
.epr-search-container > .epr-icn-search {
|
|
@apply text-placeholder!;
|
|
}
|
|
|
|
/* Lock icon animations */
|
|
@keyframes textSlideIn {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(-8px);
|
|
max-width: 0px;
|
|
}
|
|
40% {
|
|
opacity: 0.7;
|
|
max-width: 60px;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
max-width: 60px;
|
|
}
|
|
}
|
|
|
|
@keyframes textFadeOut {
|
|
0% {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateX(8px);
|
|
}
|
|
}
|
|
|
|
@keyframes lockIconAnimation {
|
|
0% {
|
|
transform: rotate(-5deg) scale(1);
|
|
}
|
|
25% {
|
|
transform: rotate(0deg) scale(1.15);
|
|
}
|
|
50% {
|
|
transform: rotate(5deg) scale(1.08);
|
|
}
|
|
100% {
|
|
transform: rotate(0deg) scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes unlockIconAnimation {
|
|
0% {
|
|
transform: rotate(0deg) scale(1);
|
|
}
|
|
40% {
|
|
transform: rotate(-8deg) scale(1.15);
|
|
}
|
|
80% {
|
|
transform: rotate(3deg) scale(1.05);
|
|
}
|
|
100% {
|
|
transform: rotate(0deg) scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeOut {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.animate-text-slide-in {
|
|
animation: textSlideIn 600ms ease-out forwards;
|
|
}
|
|
|
|
.animate-text-fade-out {
|
|
animation: textFadeOut 600ms ease-in 300ms forwards;
|
|
}
|
|
|
|
.animate-lock-icon {
|
|
animation: lockIconAnimation 1000ms ease-out forwards;
|
|
}
|
|
|
|
.animate-unlock-icon {
|
|
animation: unlockIconAnimation 600ms ease-out forwards;
|
|
}
|
|
|
|
.animate-fade-out {
|
|
animation: fadeOut 500ms ease-in 100ms forwards;
|
|
}
|
|
|
|
@keyframes highlight {
|
|
0% {
|
|
background-color: var(--background-color-layer-2);
|
|
border-radius: 4px;
|
|
}
|
|
100% {
|
|
background-color: transparent;
|
|
border-radius: 4px;
|
|
}
|
|
}
|
|
|
|
/* Progress Bar Styles */
|
|
:root {
|
|
--bprogress-color: var(--background-color-accent-primary);
|
|
--bprogress-height: 2.5px !important;
|
|
}
|
|
|
|
.bprogress {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.bprogress .bar {
|
|
background: linear-gradient(
|
|
90deg,
|
|
--alpha(var(--background-color-accent-primary) / 80%) 0%,
|
|
--alpha(var(--background-color-accent-primary) / 100%) 100%
|
|
) !important;
|
|
will-change: width, opacity;
|
|
}
|
|
|
|
.bprogress .peg {
|
|
display: block;
|
|
box-shadow:
|
|
0 0 8px --alpha(var(--background-color-accent-primary) / 60%),
|
|
0 0 4px --alpha(var(--background-color-accent-primary) / 40%) !important;
|
|
will-change: transform, opacity;
|
|
}
|
|
|
|
/* Desktop application */
|
|
html.todesktop body {
|
|
height: 100vh;
|
|
width: 100%;
|
|
}
|
|
|
|
html.todesktop .desktop-app-container {
|
|
height: 100%;
|
|
width: 100%;
|
|
overflow: unset;
|
|
contain: layout style size;
|
|
contain-intrinsic-size: 100%;
|
|
position: relative; /* Ensure it's the containing block */
|
|
}
|
|
|
|
html.todesktop .desktop-header {
|
|
-webkit-app-region: drag;
|
|
}
|
|
|
|
html.todesktop .desktop-header button,
|
|
html.todesktop .desktop-header a,
|
|
html.todesktop .desktop-header .desktop-header-actions {
|
|
-webkit-app-region: no-drag;
|
|
}
|
|
|
|
.pi-chat-root {
|
|
* {
|
|
margin: revert;
|
|
font-size: revert;
|
|
font-weight: revert;
|
|
color: revert;
|
|
text-decoration: revert;
|
|
text-indent: revert;
|
|
border-collapse: revert;
|
|
}
|
|
li,
|
|
ui {
|
|
display: list-item;
|
|
list-style-type: disc;
|
|
margin-left: 0.9rem;
|
|
}
|
|
table,
|
|
tr,
|
|
td,
|
|
th {
|
|
border-width: revert;
|
|
}
|
|
pre {
|
|
@apply bg-layer-1;
|
|
width: 100%;
|
|
overflow-x: auto;
|
|
border-radius: 10px;
|
|
padding: 20px;
|
|
font-family: inherit;
|
|
}
|
|
}
|
|
|
|
/* react-grid-layout */
|
|
.react-grid-item {
|
|
.react-resizable-handle {
|
|
position: absolute;
|
|
height: 8px !important;
|
|
width: 8px !important;
|
|
background: var(--border-color-strong-1) !important;
|
|
border-radius: 50%;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 0.2s ease;
|
|
|
|
&.react-resizable-handle-nw {
|
|
top: 2px !important;
|
|
left: 2px !important;
|
|
transform: translate(-50%, -50%) !important;
|
|
cursor: nwse-resize !important;
|
|
}
|
|
&.react-resizable-handle-ne {
|
|
top: 2px !important;
|
|
right: 2px !important;
|
|
transform: translate(50%, -50%) !important;
|
|
cursor: nesw-resize !important;
|
|
}
|
|
&.react-resizable-handle-se {
|
|
bottom: 2px !important;
|
|
right: 2px !important;
|
|
transform: translate(50%, 50%) !important;
|
|
cursor: nwse-resize !important;
|
|
}
|
|
&.react-resizable-handle-sw {
|
|
bottom: 2px !important;
|
|
left: 2px !important;
|
|
transform: translate(-50%, 50%) !important;
|
|
cursor: nesw-resize !important;
|
|
}
|
|
|
|
&::after {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
.react-resizable-handle {
|
|
opacity: 1;
|
|
pointer-events: all;
|
|
}
|
|
|
|
&:not(.resizing) .dashboard-widget-item:not(.selected):not(.disabled) {
|
|
border-color: var(--border-color-strong-1) !important;
|
|
}
|
|
}
|
|
|
|
&.resizing {
|
|
.react-resizable-handle {
|
|
opacity: 1;
|
|
pointer-events: all;
|
|
background: var(--background-color-accent-primary) !important;
|
|
}
|
|
|
|
.dashboard-widget-item {
|
|
border-color: var(--border-color-accent-primary) !important;
|
|
}
|
|
}
|
|
|
|
.dashboard-widget-item.selected ~ .react-resizable-handle {
|
|
opacity: 1;
|
|
pointer-events: all;
|
|
background: var(--background-color-accent-primary) !important;
|
|
}
|
|
}
|
|
|
|
.react-grid-placeholder {
|
|
background: --alpha(var(--background-color-accent-primary) / 30%) !important;
|
|
border-radius: 4px;
|
|
transition: 0.2s all ease;
|
|
}
|
|
/* end react-grid-layout */
|
|
|
|
input.hide-arrows {
|
|
&[type="number"] {
|
|
-moz-appearance: textfield;
|
|
appearance: textfield;
|
|
}
|
|
|
|
&::-webkit-outer-spin-button,
|
|
&::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
input[type="color"].custom-color-picker {
|
|
appearance: none;
|
|
--moz-appearance: none;
|
|
--webkit-appearance: none;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
|
|
&::-webkit-color-swatch-wrapper {
|
|
padding: 0;
|
|
}
|
|
|
|
&::-webkit-color-swatch {
|
|
border: 0;
|
|
border-radius: 0;
|
|
}
|
|
|
|
&::-moz-color-swatch,
|
|
&::-moz-focus-inner {
|
|
border: 0;
|
|
}
|
|
|
|
&::-moz-focus-inner {
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
.is-dragging:not(:has(.is-dragging)) {
|
|
background-color: --alpha(var(--background-color-accent-primary) / 20%);
|
|
}
|
|
|
|
@layer utilities {
|
|
@keyframes quickFadeIn {
|
|
0% {
|
|
opacity: 0.5;
|
|
transform: translateX(-5px);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
.animate-quickFadeIn {
|
|
animation: quickFadeIn 0.2s var(--ease-out-circ) forwards;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(5px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes editorFadeIn {
|
|
from {
|
|
opacity: 0.8;
|
|
margin-top: 20px;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeTransition {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes pulseSoft {
|
|
0% {
|
|
opacity: 0.6;
|
|
transform: scale(0.85);
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
100% {
|
|
opacity: 0.6;
|
|
transform: scale(0.85);
|
|
}
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
0% {
|
|
background-position: 200% 0;
|
|
}
|
|
100% {
|
|
background-position: -200% 0;
|
|
}
|
|
}
|
|
|
|
@keyframes pulse-subtle {
|
|
0% {
|
|
transform: scale(0.85);
|
|
opacity: 0.9;
|
|
box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
|
|
}
|
|
|
|
50% {
|
|
transform: scale(1.1);
|
|
opacity: 1;
|
|
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0);
|
|
}
|
|
|
|
100% {
|
|
transform: scale(0.85);
|
|
opacity: 0.9;
|
|
box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes grow-shrink-vertically {
|
|
0%,
|
|
100% {
|
|
transform: scaleY(0.5);
|
|
}
|
|
50% {
|
|
transform: scaleY(1);
|
|
}
|
|
}
|
|
|
|
.animate-vertical-scale {
|
|
transform-origin: center; /* ensures it grows from both ends */
|
|
animation: grow-shrink-vertically 0.8s ease-in-out infinite;
|
|
}
|
|
|
|
.animate-scale-up-down {
|
|
animation: scale-up-down 2s ease-in-out infinite;
|
|
}
|
|
|
|
.animate-fade-in {
|
|
animation: fadeIn 200ms var(--ease-out-quad) forwards;
|
|
}
|
|
|
|
.animate-fade-transition {
|
|
animation: fadeTransition 200ms var(--ease-out-cubic) forwards;
|
|
}
|
|
|
|
.animate-editorFadeIn {
|
|
animation: editorFadeIn 0.3s var(--ease-out-cubic) forwards;
|
|
}
|
|
|
|
.animate-pulse-subtle {
|
|
animation: pulseSoft 1.5s var(--ease-in-out-quad) infinite;
|
|
}
|
|
|
|
.animate-fade-in {
|
|
animation: fadeIn 200ms var(--ease-out-quad) forwards;
|
|
}
|
|
|
|
.animate-fade-transition {
|
|
animation: fadeTransition 200ms var(--ease-out-cubic) forwards;
|
|
}
|
|
|
|
.animate-shimmer {
|
|
animation: shimmer 2s linear infinite;
|
|
}
|
|
|
|
:root {
|
|
--ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
|
|
--ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
|
--ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
|
|
--ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
|
|
--ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
|
|
--ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
|
|
|
|
--ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
--ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
--ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
|
|
--ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
|
|
--ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
|
|
--ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
|
|
|
|
--ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
|
|
--ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
--ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
|
|
--ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
|
|
--ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
|
|
--ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
|
|
}
|
|
|
|
@keyframes highlight {
|
|
0% {
|
|
background-color: var(--background-color-surface-2);
|
|
border-radius: 4px;
|
|
}
|
|
100% {
|
|
background-color: transparent;
|
|
border-radius: 4px;
|
|
}
|
|
}
|
|
|
|
.shimmer {
|
|
display: inline-block;
|
|
background-color: var(--text-color-primary);
|
|
background-image: linear-gradient(to left, transparent 0%, var(--text-color-placeholder) 50%, transparent 100%);
|
|
background-position: -4rem top;
|
|
background-repeat: no-repeat;
|
|
background-clip: text; /* non-prefixed fallback */
|
|
-webkit-background-clip: text; /* required for Safari/WebKit */
|
|
-webkit-text-fill-color: transparent;
|
|
|
|
-webkit-animation: shimmer-ltr 2.2s linear infinite;
|
|
animation: shimmer-ltr 2.2s linear infinite;
|
|
|
|
-webkit-background-size: 60% 100%;
|
|
background-size: 60% 100%; /* unprefixed too */
|
|
}
|
|
|
|
@keyframes shimmer-ltr {
|
|
0% {
|
|
background-position: -4rem top; /*50px*/
|
|
}
|
|
|
|
70% {
|
|
background-position: 200% top; /*200px*/
|
|
}
|
|
|
|
100% {
|
|
background-position: 200% top; /*200px*/
|
|
}
|
|
}
|