base
This commit is contained in:
DCCONSTRUCTIONS
@@ -0,0 +1,53 @@
|
||||
@layer components {
|
||||
.EmojiPickerReact {
|
||||
--epr-category-navigation-button-size: 1.25rem !important;
|
||||
--epr-category-label-height: 1.5rem !important;
|
||||
--epr-emoji-size: 1.25rem !important;
|
||||
--epr-picker-border-radius: 0.25rem !important;
|
||||
--epr-horizontal-padding: 0.5rem !important;
|
||||
--epr-emoji-padding: 0.5rem !important;
|
||||
@apply bg-surface-1!;
|
||||
}
|
||||
|
||||
.epr-main {
|
||||
border: none !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
.epr-emoji-category-label {
|
||||
font-size: 0.7875rem !important;
|
||||
@apply bg-surface-1/80! text-tertiary!;
|
||||
}
|
||||
|
||||
.epr-category-nav,
|
||||
.epr-header-overlay {
|
||||
padding: 0.5rem !important;
|
||||
}
|
||||
|
||||
button.epr-emoji:hover > *,
|
||||
button.epr-emoji:focus > * {
|
||||
@apply bg-layer-2!;
|
||||
}
|
||||
|
||||
input.epr-search {
|
||||
font-size: 0.7875rem !important;
|
||||
height: 2rem !important;
|
||||
background: transparent !important;
|
||||
@apply border-subtle!;
|
||||
border-radius: 0.25rem !important;
|
||||
}
|
||||
|
||||
input.epr-search::placeholder {
|
||||
@apply text-placeholder!;
|
||||
}
|
||||
|
||||
button.epr-btn-clear-search:hover {
|
||||
@apply bg-layer-2!;
|
||||
@apply text-tertiary!;
|
||||
}
|
||||
|
||||
.epr-emoji-variation-picker {
|
||||
@apply bg-surface-1!;
|
||||
@apply border-subtle-1!;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,200 @@
|
||||
@import "@plane/tailwind-config/index.css";
|
||||
@import "@plane/editor/styles";
|
||||
@import "@plane/propel/styles/react-day-picker.css";
|
||||
@import "./power-k.css";
|
||||
@import "./emoji.css";
|
||||
@plugin "@tailwindcss/typography";
|
||||
|
||||
/* 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 400ms ease-out forwards;
|
||||
}
|
||||
|
||||
.animate-text-fade-out {
|
||||
animation: textFadeOut 600ms ease-in 300ms forwards;
|
||||
}
|
||||
|
||||
.animate-lock-icon {
|
||||
animation: lockIconAnimation 600ms 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;
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
@layer components {
|
||||
[cmdk-group] {
|
||||
@apply mt-2 px-[0.45rem];
|
||||
}
|
||||
|
||||
[cmdk-group-heading] {
|
||||
@apply text-tertiary text-12 font-medium mb-2 px-[0.45rem];
|
||||
}
|
||||
|
||||
[cmdk-item] {
|
||||
@apply flex items-center justify-between cursor-pointer bg-layer-transparent text-body-xs-regular p-2 rounded-md;
|
||||
|
||||
&:focus,
|
||||
&[aria-selected="true"] {
|
||||
@apply bg-layer-transparent-active;
|
||||
}
|
||||
|
||||
&[aria-disabled="true"],
|
||||
&[data-disabled="true"] {
|
||||
@apply bg-layer-transparent opacity-50 cursor-not-allowed;
|
||||
|
||||
&:focus {
|
||||
@apply bg-layer-1/70;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user