bc39c2caa8
Replace border-based left indicator with inset box-shadow to prevent unwanted layout shifts when focusing or marking fields as dirty. The solution reserves 4px space with transparent shadow in default state and transitions to colored shadow on focus/dirty without affecting the box model. Update all form components (input, textarea, select, datalist) for consistency. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
290 lines
10 KiB
CSS
290 lines
10 KiB
CSS
@utility apexcharts-tooltip {
|
|
@apply dark:text-white! dark:border-coolgray-300! dark:bg-coolgray-200! shadow-none!;
|
|
}
|
|
|
|
@utility apexcharts-tooltip-title {
|
|
@apply hidden!;
|
|
}
|
|
|
|
@utility apexcharts-grid-borders {
|
|
@apply dark:hidden!;
|
|
}
|
|
|
|
@utility apexcharts-xaxistooltip {
|
|
@apply hidden!;
|
|
}
|
|
|
|
@utility apexcharts-tooltip-custom {
|
|
@apply bg-white dark:bg-coolgray-100 border border-neutral-200 dark:border-coolgray-300 rounded-lg shadow-lg p-3 text-sm;
|
|
min-width: 160px;
|
|
}
|
|
|
|
@utility apexcharts-tooltip-custom-value {
|
|
@apply text-neutral-700 dark:text-neutral-300 mb-1;
|
|
}
|
|
|
|
@utility apexcharts-tooltip-value-bold {
|
|
@apply font-bold text-black dark:text-white;
|
|
}
|
|
|
|
@utility apexcharts-tooltip-custom-title {
|
|
@apply text-xs text-neutral-500 dark:text-neutral-400 font-medium;
|
|
}
|
|
|
|
@utility input-sticky {
|
|
@apply block py-1.5 w-full text-sm text-black rounded-sm border-0 dark:bg-coolgray-100 dark:text-white disabled:bg-neutral-200 disabled:text-neutral-500 dark:disabled:bg-coolgray-100/40 focus-visible:outline-none;
|
|
box-shadow: inset 4px 0 0 transparent, inset 0 0 0 1px #e5e5e5;
|
|
|
|
&:where(.dark, .dark *) {
|
|
box-shadow: inset 4px 0 0 transparent, inset 0 0 0 1px #242424;
|
|
}
|
|
|
|
&:focus-visible {
|
|
box-shadow: inset 4px 0 0 #6b16ed, inset 0 0 0 1px #e5e5e5;
|
|
}
|
|
|
|
&:where(.dark, .dark *):focus-visible {
|
|
box-shadow: inset 4px 0 0 #fcd452, inset 0 0 0 1px #242424;
|
|
}
|
|
}
|
|
|
|
@utility input-sticky-active {
|
|
@apply text-black border-2 border-coollabs dark:text-white focus:bg-neutral-200 dark:focus:bg-coolgray-400 focus:border-coollabs;
|
|
}
|
|
|
|
/* Focus */
|
|
@utility input-focus {
|
|
@apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-coollabs dark:focus-visible:ring-warning focus-visible:ring-offset-2 dark:focus-visible:ring-offset-base;
|
|
}
|
|
|
|
/* input, select before */
|
|
@utility input-select {
|
|
@apply block py-1.5 w-full text-sm text-black rounded-sm border-0 dark:bg-coolgray-100 dark:text-white disabled:bg-neutral-200 disabled:text-neutral-500 dark:disabled:bg-coolgray-100/40;
|
|
box-shadow: inset 4px 0 0 transparent, inset 0 0 0 2px #e5e5e5;
|
|
|
|
&:where(.dark, .dark *) {
|
|
box-shadow: inset 4px 0 0 transparent, inset 0 0 0 2px #242424;
|
|
}
|
|
|
|
&:disabled {
|
|
box-shadow: none;
|
|
}
|
|
|
|
&:where(.dark, .dark *):disabled {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
/* Readonly */
|
|
@utility input {
|
|
@apply dark:read-only:text-neutral-500 dark:read-only:bg-coolgray-100/40 placeholder:text-neutral-300 dark:placeholder:text-neutral-700 read-only:text-neutral-500 read-only:bg-neutral-200;
|
|
@apply input-select;
|
|
@apply focus-visible:outline-none;
|
|
|
|
&:focus-visible {
|
|
box-shadow: inset 4px 0 0 #6b16ed, inset 0 0 0 2px #e5e5e5;
|
|
}
|
|
|
|
&:where(.dark, .dark *):focus-visible {
|
|
box-shadow: inset 4px 0 0 #fcd452, inset 0 0 0 2px #242424;
|
|
}
|
|
|
|
&:read-only {
|
|
box-shadow: none;
|
|
}
|
|
|
|
&:where(.dark, .dark *):read-only {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
@utility select {
|
|
@apply w-full;
|
|
@apply input-select;
|
|
@apply focus-visible:outline-none;
|
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23000000'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9'/%3e%3c/svg%3e");
|
|
background-position: right 0.5rem center;
|
|
background-repeat: no-repeat;
|
|
background-size: 1rem 1rem;
|
|
padding-right: 2.5rem;
|
|
|
|
&:where(.dark, .dark *) {
|
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23ffffff'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9'/%3e%3c/svg%3e");
|
|
}
|
|
|
|
&:focus-visible {
|
|
box-shadow: inset 4px 0 0 #6b16ed, inset 0 0 0 2px #e5e5e5;
|
|
}
|
|
|
|
&:where(.dark, .dark *):focus-visible {
|
|
box-shadow: inset 4px 0 0 #fcd452, inset 0 0 0 2px #242424;
|
|
}
|
|
}
|
|
|
|
@utility button {
|
|
@apply flex gap-2 justify-center items-center px-2 h-8 text-sm text-black normal-case rounded-sm border-2 outline-0 cursor-pointer font-medium bg-white border-neutral-200 hover:bg-neutral-100 dark:bg-coolgray-100 dark:text-white dark:hover:text-white dark:hover:bg-coolgray-200 dark:border-coolgray-300 hover:text-black disabled:cursor-not-allowed min-w-fit dark:disabled:text-neutral-600 disabled:border-transparent disabled:hover:bg-transparent disabled:bg-transparent disabled:text-neutral-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-coollabs dark:focus-visible:ring-warning focus-visible:ring-offset-2 dark:focus-visible:ring-offset-base;
|
|
}
|
|
|
|
@utility alert-success {
|
|
@apply flex gap-2 items-center text-success;
|
|
}
|
|
|
|
@utility alert-error {
|
|
@apply flex gap-2 items-center text-error;
|
|
}
|
|
|
|
@utility tag {
|
|
@apply px-2 py-1 cursor-pointer box-description dark:bg-coolgray-100 dark:hover:bg-coolgray-300 bg-neutral-100 hover:bg-neutral-200;
|
|
}
|
|
|
|
@utility add-tag {
|
|
@apply flex items-center px-2 text-xs cursor-pointer dark:text-neutral-500/20 text-neutral-500 group-hover:text-neutral-700 dark:group-hover:text-white dark:hover:bg-coolgray-300 hover:bg-neutral-200;
|
|
}
|
|
|
|
@utility dropdown-item {
|
|
@apply flex relative gap-2 justify-start items-center py-1 pr-4 pl-2 w-full text-xs transition-colors cursor-pointer select-none dark:text-white hover:bg-neutral-100 dark:hover:bg-coollabs outline-none data-disabled:pointer-events-none data-disabled:opacity-50 focus-visible:bg-neutral-100 dark:focus-visible:bg-coollabs;
|
|
}
|
|
|
|
@utility dropdown-item-no-padding {
|
|
@apply flex relative gap-2 justify-start items-center py-1 w-full text-xs transition-colors cursor-pointer select-none dark:text-white hover:bg-neutral-100 dark:hover:bg-coollabs outline-none data-disabled:pointer-events-none data-disabled:opacity-50 focus-visible:bg-neutral-100 dark:focus-visible:bg-coollabs;
|
|
}
|
|
|
|
@utility badge {
|
|
@apply inline-block w-3 h-3 text-xs font-bold rounded-full leading-none border border-neutral-200 dark:border-black;
|
|
}
|
|
|
|
@utility badge-dashboard {
|
|
@apply absolute top-0 right-0 w-2.5 h-2.5 rounded-bl-full text-xs font-bold leading-none border border-neutral-200 dark:border-black;
|
|
}
|
|
|
|
@utility badge-success {
|
|
@apply bg-success;
|
|
}
|
|
|
|
@utility badge-warning {
|
|
@apply bg-warning;
|
|
}
|
|
|
|
@utility badge-error {
|
|
@apply bg-error;
|
|
}
|
|
|
|
@utility menu {
|
|
@apply flex gap-1 items-center;
|
|
}
|
|
|
|
@utility menu-item {
|
|
@apply flex gap-3 items-center px-2 py-1 w-full text-sm sm:pr-0 dark:hover:bg-coolgray-100 dark:hover:text-white hover:bg-neutral-300 min-w-fit sm:min-w-64;
|
|
}
|
|
|
|
@utility menu-item-active {
|
|
@apply text-black rounded-none dark:bg-coolgray-200 dark:text-warning bg-neutral-200;
|
|
}
|
|
|
|
@utility heading-item-active {
|
|
@apply text-black rounded-none dark:bg-coolgray-200 dark:text-warning;
|
|
}
|
|
|
|
@utility icon {
|
|
@apply w-6 h-6 dark:hover:text-white;
|
|
}
|
|
|
|
@utility scrollbar {
|
|
@apply scrollbar-thumb-coollabs-100 scrollbar-track-neutral-200 dark:scrollbar-track-coolgray-200 scrollbar-thin;
|
|
}
|
|
|
|
@utility main {
|
|
@apply pt-4 pr-10 pl-24 lg:pr-32 lg:pl-44;
|
|
}
|
|
|
|
@utility custom-modal {
|
|
@apply flex z-50 flex-col gap-2 px-8 py-4 border dark:bg-coolgray-100 dark:border-coolgray-200;
|
|
}
|
|
|
|
@utility navbar-main {
|
|
@apply flex flex-col gap-4 justify-items-start pb-2 border-b-2 border-solid h-fit md:flex-row sm:justify-between dark:border-coolgray-200 border-neutral-200 md:items-center text-neutral-700 dark:text-neutral-400;
|
|
}
|
|
|
|
@utility loading {
|
|
@apply w-4 dark:text-warning text-coollabs;
|
|
}
|
|
|
|
@utility kbd-custom {
|
|
@apply px-2 text-xs rounded-sm border border-dashed border-neutral-700 dark:text-warning;
|
|
}
|
|
|
|
@utility box {
|
|
@apply relative flex lg:flex-row flex-col p-2 transition-colors cursor-pointer min-h-[4rem] dark:bg-coolgray-100 shadow-sm bg-white border text-black dark:text-white hover:text-black border-neutral-200 dark:border-coolgray-300 hover:bg-neutral-100 dark:hover:bg-coollabs-100 dark:hover:text-white hover:no-underline rounded-sm;
|
|
}
|
|
|
|
@utility box-boarding {
|
|
@apply flex lg:flex-row flex-col p-2 transition-colors cursor-pointer min-h-[4rem] dark:bg-coolgray-100 dark:text-white bg-neutral-50 border border-neutral-200 dark:border-coolgray-300 hover:bg-neutral-100 dark:hover:bg-coollabs-100 dark:hover:text-white hover:text-black hover:no-underline text-black rounded-sm;
|
|
}
|
|
|
|
@utility box-without-bg {
|
|
@apply flex p-2 transition-colors dark:hover:text-white hover:no-underline min-h-[4rem] border border-neutral-200 dark:border-coolgray-300 rounded-sm;
|
|
}
|
|
|
|
@utility box-without-bg-without-border {
|
|
@apply flex p-2 transition-colors dark:hover:text-white hover:no-underline min-h-[4rem];
|
|
}
|
|
|
|
@utility on-box {
|
|
@apply rounded-sm hover:bg-neutral-300 dark:hover:bg-coolgray-500/20;
|
|
}
|
|
|
|
@utility box-title {
|
|
@apply font-bold text-black dark:text-white dark:group-hover:text-white;
|
|
}
|
|
|
|
@utility box-description {
|
|
@apply text-xs font-bold text-neutral-500 dark:group-hover:text-white group-hover:text-black;
|
|
}
|
|
|
|
@utility description {
|
|
@apply text-xs font-bold text-neutral-500 dark:group-hover:text-white group-hover:text-black;
|
|
}
|
|
|
|
@utility bg-coollabs-gradient {
|
|
@apply from-purple-500 via-pink-500 to-red-500 bg-linear-to-r;
|
|
}
|
|
|
|
@utility text-helper {
|
|
@apply inline-block font-bold text-coollabs dark:text-warning;
|
|
}
|
|
|
|
@utility info-helper {
|
|
@apply cursor-pointer text-coollabs dark:text-warning;
|
|
}
|
|
|
|
@utility info-helper-popup {
|
|
@apply hidden absolute z-40 text-xs rounded-sm text-neutral-700 group-hover:block dark:border-coolgray-500 border-neutral-900 dark:bg-coolgray-400 bg-neutral-200 dark:text-neutral-300 max-w-xs whitespace-normal break-words;
|
|
}
|
|
|
|
@utility buyme {
|
|
@apply block px-3 py-2 mt-10 text-sm font-semibold leading-6 text-center text-white rounded-md shadow-xs hover:text-white bg-coolgray-200 hover:bg-coolgray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-coolgray-200 hover:no-underline;
|
|
}
|
|
|
|
@utility title {
|
|
@apply hidden pb-0 lg:block lg:pb-8;
|
|
}
|
|
|
|
@utility subtitle {
|
|
@apply pt-2 pb-9;
|
|
}
|
|
|
|
@utility fullscreen {
|
|
@apply overflow-y-auto fixed top-0 left-0 w-full h-full bg-white z-[9999] dark:bg-coolgray-100 scrollbar;
|
|
}
|
|
|
|
@utility toast {
|
|
@apply z-[1];
|
|
}
|
|
|
|
@utility dz-button {
|
|
@apply p-4 py-10 my-4 w-full font-bold bg-white border dark:border-coolgray-400 dark:text-white dark:bg-transparent dark:hover:bg-coolgray-400;
|
|
}
|
|
|
|
@utility xterm {
|
|
@apply p-2;
|
|
}
|