rosslh
6db1c5e9e4
Replace #6b16ed (Coolify purple) with #d52b1e (MapleDeploy red) and form focus states, dirty indicators, chart colors, and theme tokens. Also fix warning color scale to use standard Tailwind yellow values.
342 lines
12 KiB
CSS
342 lines
12 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 #d52b1e, inset 0 0 0 1px #e5e5e5;
|
|
}
|
|
|
|
&:where(.dark, .dark *):focus-visible {
|
|
box-shadow: inset 4px 0 0 #fde047, inset 0 0 0 1px #242424;
|
|
}
|
|
}
|
|
|
|
@utility input-sticky-active {
|
|
@apply text-black border-2 border-coollabs dark:border-warning dark:text-white focus:bg-neutral-200 dark:focus:bg-coolgray-400 focus:border-coollabs dark:focus:border-warning;
|
|
}
|
|
|
|
/* 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 #d52b1e, inset 0 0 0 2px #e5e5e5;
|
|
}
|
|
|
|
&:where(.dark, .dark *):focus-visible {
|
|
box-shadow: inset 4px 0 0 #fde047, 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 #d52b1e, inset 0 0 0 2px #e5e5e5;
|
|
}
|
|
|
|
&:where(.dark, .dark *):focus-visible {
|
|
box-shadow: inset 4px 0 0 #fde047, 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-1 right-1 w-2.5 h-2.5 rounded-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 dark:hover:bg-coolgray-100 dark:hover:text-white hover:bg-neutral-300 rounded-sm truncate min-w-0;
|
|
}
|
|
@utility menu-item-icon {
|
|
@apply flex-shrink-0 w-6 h-6 dark:hover:text-white;
|
|
}
|
|
|
|
@utility menu-item-label {
|
|
@apply min-w-0 flex-1 truncate;
|
|
}
|
|
|
|
@utility menu-item-active {
|
|
@apply text-black rounded-sm dark:bg-coolgray-200 dark:text-warning bg-neutral-200 overflow-hidden;
|
|
}
|
|
|
|
@utility sub-menu-wrapper {
|
|
@apply flex flex-col items-start gap-2 min-w-40 sm:min-w-48 w-auto max-w-full sm:flex-shrink;
|
|
}
|
|
|
|
@utility sub-menu-item {
|
|
@apply flex gap-2 items-center px-2 py-1 w-full text-sm dark:hover:bg-coolgray-100 dark:hover:text-white hover:bg-neutral-300 rounded-sm truncate min-w-0;
|
|
}
|
|
|
|
@utility sub-menu-item-icon {
|
|
@apply flex-shrink-0 w-4 h-4 dark:hover:text-white;
|
|
}
|
|
|
|
@utility heading-item-active {
|
|
@apply text-black rounded-sm 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 coolbox {
|
|
@apply relative flex transition-all duration-150 dark:bg-coolgray-100 bg-white p-2 rounded border border-neutral-200 dark:border-coolgray-400 hover:ring-2 dark:hover:ring-warning hover:ring-coollabs cursor-pointer 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 {
|
|
/* MapleDeploy branding */
|
|
@apply from-red-700 via-red-500 to-red-400 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-sm 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;
|
|
}
|
|
|
|
/* Log line optimization - uses content-visibility for lazy rendering of off-screen log lines */
|
|
@utility log-line {
|
|
content-visibility: auto;
|
|
contain-intrinsic-size: auto 1.5em;
|
|
}
|
|
|
|
/* Search highlight styling for logs */
|
|
@utility log-highlight {
|
|
@apply bg-warning/40 dark:bg-warning/30;
|
|
}
|
|
|
|
/* Log level color classes */
|
|
@utility log-error {
|
|
@apply bg-red-500/10 dark:bg-red-500/15;
|
|
}
|
|
|
|
@utility log-warning {
|
|
@apply bg-yellow-500/10 dark:bg-yellow-500/15;
|
|
}
|
|
|
|
@utility log-debug {
|
|
@apply bg-stone-500/10 dark:bg-stone-500/15;
|
|
}
|
|
|
|
@utility log-info {
|
|
@apply bg-blue-500/10 dark:bg-blue-500/15;
|
|
}
|