mirror of
https://github.com/InvoiceShelf/InvoiceShelf.git
synced 2026-04-15 09:14:08 +00:00
a10d4d2de9
Add global webkit and Firefox scrollbar styling using semantic color tokens. Fix component scrollbar classes in GlobalSearchBar and CompanySwitcher from hardcoded gray to theme-aware colors. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
242 lines
8.1 KiB
CSS
Vendored
242 lines
8.1 KiB
CSS
Vendored
@import "tailwindcss";
|
|
@import "./themes.css";
|
|
@import "./components/animation.css";
|
|
@import "./components/pace-loader.css";
|
|
@import "./components/v-tooltips.css";
|
|
|
|
@plugin "@tailwindcss/typography";
|
|
@plugin "tailwind-scrollbar";
|
|
|
|
@source "../scripts/**/*.vue";
|
|
@source "../scripts/**/*.js";
|
|
@source "../../resources/views/**/*.php";
|
|
|
|
@theme inline {
|
|
--color-primary-50: var(--color-primary-50);
|
|
--color-primary-100: var(--color-primary-100);
|
|
--color-primary-200: var(--color-primary-200);
|
|
--color-primary-300: var(--color-primary-300);
|
|
--color-primary-400: var(--color-primary-400);
|
|
--color-primary-500: var(--color-primary-500);
|
|
--color-primary-600: var(--color-primary-600);
|
|
--color-primary-700: var(--color-primary-700);
|
|
--color-primary-800: var(--color-primary-800);
|
|
--color-primary-900: var(--color-primary-900);
|
|
--color-primary-950: var(--color-primary-950);
|
|
--color-black: #040405;
|
|
|
|
/* Semantic theme tokens */
|
|
--color-surface: var(--color-surface);
|
|
--color-surface-secondary: var(--color-surface-secondary);
|
|
--color-surface-tertiary: var(--color-surface-tertiary);
|
|
--color-surface-muted: var(--color-surface-muted);
|
|
--color-heading: var(--color-heading);
|
|
--color-body: var(--color-body);
|
|
--color-muted: var(--color-muted);
|
|
--color-subtle: var(--color-subtle);
|
|
--color-line-light: var(--color-line-light);
|
|
--color-line-default: var(--color-line-default);
|
|
--color-line-strong: var(--color-line-strong);
|
|
--color-hover: var(--color-hover);
|
|
--color-hover-strong: var(--color-hover-strong);
|
|
--color-header-from: var(--color-header-from);
|
|
--color-header-to: var(--color-header-to);
|
|
|
|
/* Status badge text */
|
|
--color-status-yellow: var(--color-status-yellow);
|
|
--color-status-green: var(--color-status-green);
|
|
--color-status-blue: var(--color-status-blue);
|
|
--color-status-red: var(--color-status-red);
|
|
--color-status-purple: var(--color-status-purple);
|
|
|
|
/* Alert colors */
|
|
--color-alert-warning-bg: var(--color-alert-warning-bg);
|
|
--color-alert-warning-text: var(--color-alert-warning-text);
|
|
--color-alert-error-bg: var(--color-alert-error-bg);
|
|
--color-alert-error-text: var(--color-alert-error-text);
|
|
--color-alert-success-bg: var(--color-alert-success-bg);
|
|
--color-alert-success-text: var(--color-alert-success-text);
|
|
}
|
|
|
|
@theme {
|
|
--spacing-88: 22rem;
|
|
--font-base: Poppins, sans-serif;
|
|
}
|
|
|
|
@utility bg-multiselect-caret {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
@utility bg-multiselect-spinner {
|
|
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' fill='%234a3dff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M456.433 371.72l-27.79-16.045c-7.192-4.152-10.052-13.136-6.487-20.636 25.82-54.328 23.566-118.602-6.768-171.03-30.265-52.529-84.802-86.621-144.76-91.424C262.35 71.922 256 64.953 256 56.649V24.56c0-9.31 7.916-16.609 17.204-15.96 81.795 5.717 156.412 51.902 197.611 123.408 41.301 71.385 43.99 159.096 8.042 232.792-4.082 8.369-14.361 11.575-22.424 6.92z'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
@utility bg-multiselect-remove {
|
|
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 320 512' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Poppins";
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
src: url("$fonts/Poppins-Black.ttf") format("truetype");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Poppins";
|
|
font-style: normal;
|
|
font-weight: 300;
|
|
font-display: swap;
|
|
src: url("$fonts/Poppins-Light.ttf") format("truetype");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Poppins";
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
font-display: swap;
|
|
src: url("$fonts/Poppins-Medium.ttf") format("truetype");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Poppins";
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
src: url("$fonts/Poppins-Regular.ttf") format("truetype");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Poppins";
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
font-display: swap;
|
|
src: url("$fonts/Poppins-SemiBold.ttf") format("truetype");
|
|
}
|
|
|
|
/* Form base styles (replaces @tailwindcss/forms) */
|
|
@layer base {
|
|
[type='text'],
|
|
[type='email'],
|
|
[type='url'],
|
|
[type='password'],
|
|
[type='number'],
|
|
[type='date'],
|
|
[type='datetime-local'],
|
|
[type='month'],
|
|
[type='search'],
|
|
[type='tel'],
|
|
[type='time'],
|
|
[type='week'],
|
|
[multiple],
|
|
textarea,
|
|
select {
|
|
@apply appearance-none bg-surface border border-line-default rounded-lg px-3 py-2 text-sm leading-6 text-heading;
|
|
}
|
|
|
|
[type='text']:focus,
|
|
[type='email']:focus,
|
|
[type='url']:focus,
|
|
[type='password']:focus,
|
|
[type='number']:focus,
|
|
[type='date']:focus,
|
|
[type='datetime-local']:focus,
|
|
[type='month']:focus,
|
|
[type='search']:focus,
|
|
[type='tel']:focus,
|
|
[type='time']:focus,
|
|
[type='week']:focus,
|
|
[multiple]:focus,
|
|
textarea:focus,
|
|
select:focus {
|
|
@apply outline-2 outline-transparent outline-offset-2 border-primary-500 ring-1 ring-primary-500;
|
|
}
|
|
|
|
select {
|
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
|
|
@apply bg-no-repeat pr-10;
|
|
background-position: right 0.5rem center;
|
|
background-size: 1.5em 1.5em;
|
|
}
|
|
|
|
[type='checkbox'],
|
|
[type='radio'] {
|
|
@apply appearance-none p-0 text-primary-500 bg-surface border border-line-strong inline-block align-middle select-none shrink-0 h-4 w-4;
|
|
background-origin: border-box;
|
|
print-color-adjust: exact;
|
|
}
|
|
|
|
[type='checkbox'] {
|
|
@apply rounded;
|
|
}
|
|
|
|
[type='radio'] {
|
|
@apply rounded-full;
|
|
}
|
|
|
|
[type='checkbox']:focus,
|
|
[type='radio']:focus {
|
|
@apply outline-2 outline-transparent outline-offset-2;
|
|
box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-primary-500);
|
|
}
|
|
|
|
[type='checkbox']:checked,
|
|
[type='radio']:checked {
|
|
@apply border-transparent bg-current bg-center bg-no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
[type='checkbox']:checked {
|
|
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
|
|
}
|
|
|
|
[type='radio']:checked {
|
|
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
|
|
}
|
|
|
|
[type='checkbox']:indeterminate {
|
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
|
|
@apply border-transparent bg-current bg-center bg-no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
::placeholder {
|
|
@apply text-subtle opacity-100;
|
|
}
|
|
} /* end @layer base */
|
|
|
|
body {
|
|
min-height: 100vh;
|
|
min-height: -webkit-fill-available;
|
|
color: var(--color-heading);
|
|
scrollbar-color: var(--color-surface-muted) var(--color-surface-secondary);
|
|
}
|
|
|
|
/* Webkit scrollbars */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: var(--color-surface-secondary);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--color-surface-muted);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--color-line-strong);
|
|
}
|
|
|
|
html {
|
|
height: -webkit-fill-available;
|
|
}
|
|
|
|
.h-screen-ios {
|
|
height: -webkit-fill-available;
|
|
}
|