mirror of
https://github.com/documenso/documenso.git
synced 2026-07-15 07:17:09 +10:00
Lucas Smith
336 lines
9.0 KiB
CSS
336 lines
9.0 KiB
CSS
/* biome-ignore-all lint/suspicious/noDuplicateProperties: twv3-space-* lists both --value(number) and --value([length]) forms; v4 keeps only one per class. */
|
|
|
|
@import "tailwindcss";
|
|
|
|
@config "../tailwind.config.cjs";
|
|
|
|
@custom-variant dark (&:is(.dark:not(.dark-mode-disabled) *));
|
|
|
|
/* `print:` variant; defining it as a JS `screen` breaks the `container` utility under v4. */
|
|
@custom-variant print (@media print);
|
|
|
|
/* Safelist for the runtime recipient color classes (v4 ignores the JS config `safelist`). */
|
|
@source inline("{ring,bg,border,text}-recipient-{green,blue,purple,orange,yellow,pink}");
|
|
@source inline("hover:bg-recipient-{green,blue,purple,orange,yellow,pink}/{15,30}");
|
|
@source inline("active:bg-recipient-{green,blue,purple,orange,yellow,pink}/15");
|
|
@source inline("hover:border-recipient-{green,blue,purple,orange,yellow,pink}");
|
|
@source inline("group-hover:text-recipient-{green,blue,purple,orange,yellow,pink}");
|
|
@source inline("group-hover/field-item:bg-recipient-{green,blue,purple,orange,yellow,pink}");
|
|
|
|
/* Restore the v3 `ring` defaults (v4 changed them to 1px / currentColor). */
|
|
@theme {
|
|
--default-ring-width: 3px;
|
|
--default-ring-color: hsl(var(--ring));
|
|
}
|
|
|
|
/*
|
|
* v3-compatible `space-*` utilities. v4's built-in `space-*` uses a zero-specificity
|
|
* `:where()` selector that lets child margins collapse the gaps; these reproduce the v3
|
|
* selector/edges so existing layouts keep working. Pair with `twv3-space-{x,y}-reverse`.
|
|
*/
|
|
@utility twv3-space-y-* {
|
|
& > :not([hidden]) ~ :not([hidden]) {
|
|
--tw-space-y-reverse: 0;
|
|
margin-top: calc(--spacing(--value(number)) * calc(1 - var(--tw-space-y-reverse)));
|
|
margin-top: calc(--value([length]) * calc(1 - var(--tw-space-y-reverse)));
|
|
margin-bottom: calc(--spacing(--value(number)) * var(--tw-space-y-reverse));
|
|
margin-bottom: calc(--value([length]) * var(--tw-space-y-reverse));
|
|
}
|
|
}
|
|
|
|
@utility twv3-space-x-* {
|
|
& > :not([hidden]) ~ :not([hidden]) {
|
|
--tw-space-x-reverse: 0;
|
|
margin-left: calc(--spacing(--value(number)) * calc(1 - var(--tw-space-x-reverse)));
|
|
margin-left: calc(--value([length]) * calc(1 - var(--tw-space-x-reverse)));
|
|
margin-right: calc(--spacing(--value(number)) * var(--tw-space-x-reverse));
|
|
margin-right: calc(--value([length]) * var(--tw-space-x-reverse));
|
|
}
|
|
}
|
|
|
|
/* Reverse companions for the twv3-space-* utilities above (built-in ones use a different selector). */
|
|
@utility twv3-space-y-reverse {
|
|
& > :not([hidden]) ~ :not([hidden]) {
|
|
--tw-space-y-reverse: 1;
|
|
}
|
|
}
|
|
|
|
@utility twv3-space-x-reverse {
|
|
& > :not([hidden]) ~ :not([hidden]) {
|
|
--tw-space-x-reverse: 1;
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
:root,
|
|
.dark-mode-disabled {
|
|
--background: 0 0% 100%;
|
|
--foreground: 222.2 47.4% 11.2%;
|
|
|
|
--muted: 210 40% 96.1%;
|
|
--muted-foreground: 215.4 16.3% 46.9%;
|
|
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 222.2 47.4% 11.2%;
|
|
|
|
--card: 0 0% 100%;
|
|
--card-border: 214.3 31.8% 91.4%;
|
|
--card-border-tint: 112 205 159;
|
|
--card-foreground: 222.2 47.4% 11.2%;
|
|
|
|
--field-card: 95 74% 90%;
|
|
--field-card-border: 95.08 71.08% 67.45%;
|
|
--field-card-foreground: 222.2 47.4% 11.2%;
|
|
|
|
--widget: 0 0% 97%;
|
|
--widget-foreground: 0 0% 95%;
|
|
|
|
--border: 214.3 31.8% 91.4%;
|
|
--input: 214.3 31.8% 91.4%;
|
|
|
|
--primary: 95.08 71.08% 67.45%;
|
|
--primary-foreground: 95.08 71.08% 10%;
|
|
|
|
--secondary: 210 40% 96.1%;
|
|
--secondary-foreground: 222.2 47.4% 11.2%;
|
|
|
|
--accent: 210 40% 96.1%;
|
|
--accent-foreground: 222.2 47.4% 11.2%;
|
|
|
|
--destructive: 0 100% 50%;
|
|
--destructive-foreground: 210 40% 98%;
|
|
|
|
--ring: 95.08 71.08% 67.45%;
|
|
|
|
--radius: 0.5rem;
|
|
|
|
--warning: 54 96% 45%;
|
|
|
|
--gold: 47.9 95.8% 53.1%;
|
|
|
|
--recipient-green: 100 48% 55%;
|
|
--recipient-blue: 212 56% 50%;
|
|
--recipient-purple: 266 100% 64%;
|
|
--recipient-orange: 36 92% 54%;
|
|
--recipient-yellow: 51 100% 43%;
|
|
--recipient-pink: 313 65% 57%;
|
|
|
|
/* Base - Neutral */
|
|
--new-neutral-50: 0, 0%, 96%;
|
|
--new-neutral-100: 0, 0%, 91%;
|
|
--new-neutral-200: 0, 0%, 82%;
|
|
--new-neutral-300: 0, 0%, 69%;
|
|
--new-neutral-400: 0, 0%, 53%;
|
|
--new-neutral-500: 0, 0%, 43%;
|
|
--new-neutral-600: 0, 0%, 36%;
|
|
--new-neutral-700: 0, 0%, 31%;
|
|
--new-neutral-800: 0, 0%, 27%;
|
|
--new-neutral-900: 0, 0%, 24%;
|
|
--new-neutral-950: 0, 0%, 9%;
|
|
|
|
/* Base - White */
|
|
--new-white-50: 0, 0%, 5%;
|
|
--new-white-60: 0, 0%, 6%;
|
|
--new-white-100: 0, 0%, 10%;
|
|
--new-white-200: 0, 0%, 20%;
|
|
--new-white-300: 0, 0%, 30%;
|
|
--new-white-400: 0, 0%, 40%;
|
|
--new-white-500: 0, 0%, 50%;
|
|
--new-white-600: 0, 0%, 60%;
|
|
--new-white-700: 0, 0%, 80%;
|
|
--new-white-800: 0, 0%, 90%;
|
|
--new-white-900: 0, 0%, 100%;
|
|
|
|
/* Primary - Green */
|
|
--new-primary-50: 98, 73%, 97%;
|
|
--new-primary-100: 95, 73%, 94%;
|
|
--new-primary-200: 94, 70%, 87%;
|
|
--new-primary-300: 95, 71%, 81%;
|
|
--new-primary-400: 95, 71%, 74%;
|
|
--new-primary-500: 95, 71%, 67%;
|
|
--new-primary-600: 95, 71%, 54%;
|
|
--new-primary-700: 95, 71%, 41%;
|
|
--new-primary-800: 95, 71%, 27%;
|
|
--new-primary-900: 95, 72%, 14%;
|
|
--new-primary-950: 95, 72%, 7%;
|
|
|
|
/* Secondary - Info */
|
|
--new-info-50: 210, 54%, 95%;
|
|
--new-info-100: 211, 57%, 90%;
|
|
--new-info-200: 212, 55%, 80%;
|
|
--new-info-300: 212, 56%, 70%;
|
|
--new-info-400: 212, 56%, 60%;
|
|
--new-info-500: 212, 56%, 50%;
|
|
--new-info-600: 212, 56%, 40%;
|
|
--new-info-700: 212, 56%, 30%;
|
|
--new-info-800: 212, 55%, 20%;
|
|
--new-info-900: 211, 57%, 10%;
|
|
--new-info-950: 214, 54%, 5%;
|
|
|
|
/* Secondary - Error */
|
|
--new-error-50: 4, 80%, 96%;
|
|
--new-error-100: 3, 78%, 91%;
|
|
--new-error-200: 3, 79%, 83%;
|
|
--new-error-300: 3, 79%, 74%;
|
|
--new-error-400: 3, 79%, 66%;
|
|
--new-error-500: 4, 79%, 57%;
|
|
--new-error-600: 3, 79%, 46%;
|
|
--new-error-700: 3, 79%, 34%;
|
|
--new-error-800: 3, 79%, 23%;
|
|
--new-error-900: 3, 79%, 11%;
|
|
--new-error-950: 3, 80%, 6%;
|
|
|
|
/* Secondary - Warning */
|
|
--new-warning-50: 39, 100%, 96%;
|
|
--new-warning-100: 40, 100%, 93%;
|
|
--new-warning-200: 39, 100%, 86%;
|
|
--new-warning-300: 39, 100%, 79%;
|
|
--new-warning-400: 39, 100%, 71%;
|
|
--new-warning-500: 39, 100%, 64%;
|
|
--new-warning-600: 39, 100%, 57%;
|
|
--new-warning-700: 39, 100%, 43%;
|
|
--new-warning-800: 39, 100%, 29%;
|
|
--new-warning-900: 39, 100%, 14%;
|
|
--new-warning-950: 38, 100%, 7%;
|
|
|
|
/* Surface */
|
|
--new-surface-black: 0, 0%, 0%;
|
|
--new-surface-white: 0, 0%, 91%;
|
|
|
|
--envelope-editor-background: 210 40% 98.04%;
|
|
}
|
|
|
|
.dark:not(.dark-mode-disabled) {
|
|
--background: 0 0% 14.9%;
|
|
--foreground: 0 0% 97%;
|
|
|
|
--muted: 0 0% 23.4%;
|
|
--muted-foreground: 0 0% 85%;
|
|
|
|
--popover: 0 0% 14.9%;
|
|
--popover-foreground: 0 0% 90%;
|
|
|
|
--card: 0 0% 14.9%;
|
|
--card-border: 0 0% 27.9%;
|
|
--card-border-tint: 112 205 159;
|
|
--card-foreground: 0 0% 95%;
|
|
|
|
--widget: 0 0% 14.9%;
|
|
--widget-foreground: 0 0% 18%;
|
|
|
|
--border: 0 0% 27.9%;
|
|
--input: 0 0% 27.9%;
|
|
|
|
--field-border: 214.3 31.8% 91.4%;
|
|
|
|
--primary: 95.08 71.08% 67.45%;
|
|
--primary-foreground: 95.08 71.08% 10%;
|
|
|
|
--secondary: 0 0% 23.4%;
|
|
--secondary-foreground: 95.08 71.08% 67.45%;
|
|
|
|
--accent: 0 0% 27.9%;
|
|
--accent-foreground: 95.08 71.08% 67.45%;
|
|
|
|
--destructive: 0 87% 62%;
|
|
--destructive-foreground: 0 87% 19%;
|
|
|
|
--ring: 95.08 71.08% 67.45%;
|
|
|
|
--radius: 0.5rem;
|
|
|
|
--warning: 54 96% 45%;
|
|
|
|
--gold: 47.9 95.8% 53.1%;
|
|
|
|
--envelope-editor-background: 0 0% 14.9%;
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border;
|
|
}
|
|
|
|
/* Restore v3 preflight defaults that v4 changed. */
|
|
button:not(:disabled),
|
|
[role="button"]:not(:disabled) {
|
|
cursor: pointer;
|
|
}
|
|
|
|
input::placeholder,
|
|
textarea::placeholder {
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
font-feature-settings:
|
|
"rlig" 1,
|
|
"calt" 1;
|
|
}
|
|
}
|
|
|
|
/*
|
|
* Custom CSS for printing reports
|
|
* - Sets page margins to 0.5 inches
|
|
* - Hides the header and footer
|
|
* - Hides the print button
|
|
* - Sets page size to A4
|
|
* - Sets the font size to 12pt
|
|
*/
|
|
@page {
|
|
margin: 1in;
|
|
size: A4;
|
|
}
|
|
|
|
.gradient-border-mask::before {
|
|
mask:
|
|
linear-gradient(#fff 0 0) content-box,
|
|
linear-gradient(#fff 0 0);
|
|
-webkit-mask:
|
|
linear-gradient(#fff 0 0) content-box,
|
|
linear-gradient(#fff 0 0);
|
|
mask-composite: exclude;
|
|
-webkit-mask-composite: xor;
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar {
|
|
width: 6px;
|
|
background: transparent;
|
|
border-radius: 10px;
|
|
scrollbar-gutter: stable;
|
|
}
|
|
|
|
.scrollbar-hidden {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.scrollbar-hidden::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
/* .custom-scrollbar::-webkit-scrollbar-track {
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-thumb {
|
|
background: rgb(100 116 139 / 1);
|
|
border-radius: 10px;
|
|
width: 8px;
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
|
background: rgb(100 116 139 / 0.5);
|
|
} */
|
|
|
|
/* Custom Swagger Dark Theme */
|
|
.swagger-dark-theme .swagger-ui {
|
|
filter: invert(88%) hue-rotate(180deg);
|
|
}
|
|
|
|
.swagger-dark-theme .swagger-ui .microlight {
|
|
filter: invert(100%) hue-rotate(180deg);
|
|
}
|