mirror of
https://github.com/Dvorinka/Trackeep.git
synced 2026-06-03 12:03:00 +00:00
Tomas Dvorak
893 lines
29 KiB
CSS
893 lines
29 KiB
CSS
/* Complete Papra CSS - 1:1 match */
|
|
|
|
/* Animation utilities */
|
|
.data-\[expanded\]\:animate-in[data-expanded] {
|
|
animation: una-in;
|
|
animation-name: una-in;
|
|
animation-duration: .15s;
|
|
--una-enter-opacity: initial;
|
|
--una-enter-scale: initial;
|
|
--una-enter-rotate: initial;
|
|
--una-enter-translate-x: initial;
|
|
--una-enter-translate-y: initial
|
|
}
|
|
|
|
.data-\[closed\]\:animate-out[data-closed] {
|
|
animation: una-out;
|
|
animation-name: una-out;
|
|
animation-duration: .15s;
|
|
--una-exit-opacity: initial;
|
|
--una-exit-scale: initial;
|
|
--una-exit-rotate: initial;
|
|
--una-exit-translate-x: initial;
|
|
--una-exit-translate-y: initial
|
|
}
|
|
|
|
/* Complete Inter Font Faces - Exact Papra */
|
|
@font-face {
|
|
font-family: Inter;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-stretch: 100%;
|
|
font-display: swap;
|
|
src: url(https://fonts.bunny.net/inter/files/inter-latin-400-normal.woff2) format("woff2"),url(https://fonts.bunny.net/inter/files/inter-latin-400-normal.woff) format("woff");
|
|
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
|
|
}
|
|
|
|
@font-face {
|
|
font-family: Inter;
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
font-stretch: 100%;
|
|
font-display: swap;
|
|
src: url(https://fonts.bunny.net/inter/files/inter-latin-500-normal.woff2) format("woff2"),url(https://fonts.bunny.net/inter/files/inter-latin-500-normal.woff) format("woff");
|
|
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
|
|
}
|
|
|
|
@font-face {
|
|
font-family: Inter;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
font-stretch: 100%;
|
|
font-display: swap;
|
|
src: url(https://fonts.bunny.net/inter/files/inter-latin-600-normal.woff2) format("woff2"),url(https://fonts.bunny.net/inter/files/inter-latin-600-normal.woff) format("woff");
|
|
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
|
|
}
|
|
|
|
@font-face {
|
|
font-family: Inter;
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
font-stretch: 100%;
|
|
font-display: swap;
|
|
src: url(https://fonts.bunny.net/inter/files/inter-latin-700-normal.woff2) format("woff2"),url(https://fonts.bunny.net/inter/files/inter-latin-700-normal.woff) format("woff");
|
|
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
|
|
}
|
|
|
|
/* Exact Papra CSS Variables and Base Styles */
|
|
:root,:host {
|
|
--colors-border: hsl(var(--border));
|
|
--colors-background: hsl(var(--background));
|
|
--colors-foreground: hsl(var(--foreground));
|
|
--font-sans: "Inter",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
|
|
--radius-lg: .5rem;
|
|
--spacing: .25rem;
|
|
--fontWeight-semibold: 600;
|
|
--radius-xl: .75rem;
|
|
--fontWeight-bold: 700;
|
|
--fontWeight-medium: 500;
|
|
--leading-tight: 1.25;
|
|
--font-mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
|
|
--container-xl: 36rem;
|
|
--radius-md: .375rem;
|
|
--container-sm: 24rem;
|
|
--container-xs: 20rem;
|
|
--leading-none: 1;
|
|
--container-md: 28rem;
|
|
--default-transition-timingFunction: cubic-bezier(.4, 0, .2, 1);
|
|
--default-transition-duration: .15s;
|
|
--container-7xl: 80rem;
|
|
--container-5xl: 64rem;
|
|
--fontWeight-normal: 400;
|
|
--fontWeight-light: 300;
|
|
--colors-primary-DEFAULT: hsl(var(--primary));
|
|
--radius-DEFAULT: .25rem;
|
|
--radius-sm: .25rem;
|
|
--tracking-widest: .1em;
|
|
--container-lg: 32rem;
|
|
--colors-card-DEFAULT: hsl(var(--card));
|
|
--ease-DEFAULT: cubic-bezier(.4, 0, .2, 1);
|
|
--ease-out: cubic-bezier(0, 0, .2, 1);
|
|
--tracking-tight: -.025em;
|
|
--colors-secondary-DEFAULT: hsl(var(--secondary));
|
|
--ease-linear: linear;
|
|
--ease-in-out: cubic-bezier(.4, 0, .2, 1);
|
|
--colors-ring: hsl(var(--ring));
|
|
--container-2xl: 42rem;
|
|
--colors-destructive-DEFAULT: hsl(var(--destructive));
|
|
--colors-muted-foreground: hsl(var(--muted-foreground));
|
|
--colors-red-500: oklch(63.7% .237 25.331);
|
|
--colors-red-DEFAULT: oklch(70.4% .191 22.216);
|
|
--colors-primary-foreground: hsl(var(--primary-foreground));
|
|
--colors-muted-DEFAULT: hsl(var(--muted));
|
|
--colors-warning-DEFAULT: hsl(var(--warning));
|
|
--colors-popover-DEFAULT: hsl(var(--popover));
|
|
--colors-popover-foreground: hsl(var(--popover-foreground));
|
|
--colors-destructive-foreground: hsl(var(--destructive-foreground));
|
|
--colors-input: hsl(var(--input));
|
|
--colors-secondary-foreground: hsl(var(--secondary-foreground));
|
|
--colors-card-foreground: hsl(var(--card-foreground));
|
|
--colors-accent-DEFAULT: hsl(var(--accent));
|
|
--text-sm-fontSize: .875rem;
|
|
--text-sm-lineHeight: 1.25rem;
|
|
--text-xs-fontSize: .75rem;
|
|
--text-xs-lineHeight: 1rem;
|
|
--text-2xl-fontSize: 1.5rem;
|
|
--text-2xl-lineHeight: 2rem;
|
|
--text-lg-fontSize: 1.125rem;
|
|
--text-lg-lineHeight: 1.75rem;
|
|
--text-xl-fontSize: 1.25rem;
|
|
--text-xl-lineHeight: 1.75rem;
|
|
--text-base-fontSize: 1rem;
|
|
--text-base-lineHeight: 1.5rem;
|
|
--text-3xl-fontSize: 1.875rem;
|
|
--text-3xl-lineHeight: 2.25rem;
|
|
--colors-accent-foreground: hsl(var(--accent-foreground));
|
|
--text-4xl-fontSize: 2.25rem;
|
|
--text-4xl-lineHeight: 2.5rem;
|
|
--text-6xl-fontSize: 3.75rem;
|
|
--text-6xl-lineHeight: 1;
|
|
--colors-red-600: oklch(57.7% .245 27.325);
|
|
--leading-relaxed: 1.625;
|
|
--default-font-family: var(--font-sans);
|
|
--default-monoFont-family: var(--font-mono)
|
|
}
|
|
|
|
/* Papra color system - improved light theme */
|
|
:root {
|
|
--background: 0 0% 100%;
|
|
--foreground: 0 0% 3.9%;
|
|
--card: 0 0% 98.5%;
|
|
--card-foreground: 0 0% 3.9%;
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 0 0% 3.9%;
|
|
--primary: 199 89% 67%;
|
|
--primary-foreground: 0 0% 3.9%;
|
|
--secondary: 0 0% 95%;
|
|
--secondary-foreground: 0 0% 8%;
|
|
--muted: 0 0% 95%;
|
|
--muted-foreground: 0 0% 42%;
|
|
--accent: 0 0% 95%;
|
|
--accent-foreground: 0 0% 8%;
|
|
--destructive: 0 84.2% 60.2%;
|
|
--destructive-foreground: 0 0% 0%;
|
|
--warning: 31 98% 50%;
|
|
--warning-foreground: 0 0% 0%;
|
|
--border: #e2e8f0;
|
|
--input: #e2e8f0;
|
|
--ring: 199 89% 67%;
|
|
}
|
|
|
|
/* Light mode enhancements */
|
|
:root {
|
|
/* Better shadows for light mode */
|
|
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
|
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
|
}
|
|
|
|
/* Light mode specific styles */
|
|
:root .card {
|
|
box-shadow: var(--shadow-sm);
|
|
border: 1px solid hsl(var(--border));
|
|
}
|
|
|
|
:root .hover\:shadow-md:hover {
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
:root .hover\:shadow-lg:hover {
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
/* Better button styling in light mode */
|
|
:root button {
|
|
transition: all 0.15s ease-in-out;
|
|
}
|
|
|
|
:root .bg-primary {
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
:root .bg-primary:hover {
|
|
box-shadow: var(--shadow-md);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
/* Improved input styling in light mode */
|
|
:root input, :root textarea, :root select {
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
:root input:focus, :root textarea:focus, :root select:focus {
|
|
box-shadow: 0 0 0 3px hsl(var(--primary) / 0.1);
|
|
}
|
|
|
|
/* Light mode scrollbar */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: #f8fafc;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: #cbd5e1;
|
|
border-radius: 4px;
|
|
border: 1px solid #e2e8f0;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #94a3b8;
|
|
}
|
|
|
|
/* Firefox scrollbar */
|
|
* {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: #cbd5e1 #f8fafc;
|
|
}
|
|
|
|
/* Papra dark theme - exact match */
|
|
[data-kb-theme=dark] {
|
|
--background: 240 4% 10%;
|
|
--foreground: 0 0% 98%;
|
|
--card: 240 4% 8%;
|
|
--card-foreground: 0 0% 98%;
|
|
--popover: 240 4% 8%;
|
|
--popover-foreground: 0 0% 98%;
|
|
--primary: 199 89% 67%;
|
|
--primary-foreground: 0 0% 9%;
|
|
--secondary: 0 0% 14.9%;
|
|
--secondary-foreground: 0 0% 98%;
|
|
--muted: 0 0% 14.9%;
|
|
--muted-foreground: 0 0% 63.9%;
|
|
--accent: 0 0% 14.9%;
|
|
--accent-foreground: 0 0% 98%;
|
|
--destructive: 0 62.8% 30.6%;
|
|
--destructive-foreground: 0 0% 98%;
|
|
--warning: 31 98% 50%;
|
|
--warning-foreground: 0 0% 0%;
|
|
--border: #262626;
|
|
--input: #262626;
|
|
--ring: 0 0% 83.1%;
|
|
}
|
|
|
|
/* Ensure all borders are #262626 in dark mode only */
|
|
[data-kb-theme=dark] * {
|
|
border-color: #262626 !important;
|
|
}
|
|
|
|
/* Override all border utilities in dark mode */
|
|
[data-kb-theme=dark] .border,
|
|
[data-kb-theme=dark] .border-t,
|
|
[data-kb-theme=dark] .border-b,
|
|
[data-kb-theme=dark] .border-l,
|
|
[data-kb-theme=dark] .border-r,
|
|
[data-kb-theme=dark] .border-x,
|
|
[data-kb-theme=dark] .border-y,
|
|
[data-kb-theme=dark] .border-0,
|
|
[data-kb-theme=dark] .border-2,
|
|
[data-kb-theme=dark] .border-4,
|
|
[data-kb-theme=dark] .border-8,
|
|
[data-kb-theme=dark] .border-input,
|
|
[data-kb-theme=dark] .border-border,
|
|
[data-kb-theme=dark] .border-destructive,
|
|
[data-kb-theme=dark] .border-primary,
|
|
[data-kb-theme=dark] .border-secondary,
|
|
[data-kb-theme=dark] .border-accent,
|
|
[data-kb-theme=dark] .border-muted,
|
|
[data-kb-theme=dark] .border-foreground,
|
|
[data-kb-theme=dark] .border-card,
|
|
[data-kb-theme=dark] .border-popover {
|
|
border-color: #262626 !important;
|
|
}
|
|
|
|
/* Ensure borders don't change on hover in dark mode */
|
|
[data-kb-theme=dark] .hover\:border:hover,
|
|
[data-kb-theme=dark] .hover\:border-t:hover,
|
|
[data-kb-theme=dark] .hover\:border-b:hover,
|
|
[data-kb-theme=dark] .hover\:border-l:hover,
|
|
[data-kb-theme=dark] .hover\:border-r:hover,
|
|
[data-kb-theme=dark] .hover\:border-x:hover,
|
|
[data-kb-theme=dark] .hover\:border-y:hover,
|
|
[data-kb-theme=dark] .hover\:border-input:hover,
|
|
[data-kb-theme=dark] .hover\:border-border:hover,
|
|
[data-kb-theme=dark] .hover\:border-destructive:hover,
|
|
[data-kb-theme=dark] .hover\:border-primary:hover,
|
|
[data-kb-theme=dark] .hover\:border-secondary:hover,
|
|
[data-kb-theme=dark] .hover\:border-accent:hover,
|
|
[data-kb-theme=dark] .hover\:border-muted:hover,
|
|
[data-kb-theme=dark] .hover\:border-foreground:hover,
|
|
[data-kb-theme=dark] .hover\:border-card:hover,
|
|
[data-kb-theme=dark] .hover\:border-popover:hover {
|
|
border-color: #262626 !important;
|
|
}
|
|
|
|
/* Focus states in dark mode */
|
|
[data-kb-theme=dark] .focus\:border:focus,
|
|
[data-kb-theme=dark] .focus\:border-t:focus,
|
|
[data-kb-theme=dark] .focus\:border-b:focus,
|
|
[data-kb-theme=dark] .focus\:border-l:focus,
|
|
[data-kb-theme=dark] .focus\:border-r:focus,
|
|
[data-kb-theme=dark] .focus\:border-x:focus,
|
|
[data-kb-theme=dark] .focus\:border-y:focus,
|
|
[data-kb-theme=dark] .focus\:border-input:focus,
|
|
[data-kb-theme=dark] .focus\:border-border:focus,
|
|
[data-kb-theme=dark] .focus\:border-destructive:focus,
|
|
[data-kb-theme=dark] .focus\:border-primary:focus,
|
|
[data-kb-theme=dark] .focus\:border-secondary:focus,
|
|
[data-kb-theme=dark] .focus\:border-accent:focus,
|
|
[data-kb-theme=dark] .focus\:border-muted:focus,
|
|
[data-kb-theme=dark] .focus\:border-foreground:focus,
|
|
[data-kb-theme=dark] .focus\:border-card:focus,
|
|
[data-kb-theme=dark] .focus\:border-popover:focus {
|
|
border-color: #262626 !important;
|
|
}
|
|
|
|
/* Table borders in dark mode */
|
|
[data-kb-theme=dark] table,
|
|
[data-kb-theme=dark] table th,
|
|
[data-kb-theme=dark] table td,
|
|
[data-kb-theme=dark] table thead,
|
|
[data-kb-theme=dark] table tbody,
|
|
[data-kb-theme=dark] table tfoot,
|
|
[data-kb-theme=dark] table tr {
|
|
border-color: #262626 !important;
|
|
}
|
|
|
|
/* Form elements in dark mode */
|
|
[data-kb-theme=dark] input,
|
|
[data-kb-theme=dark] textarea,
|
|
[data-kb-theme=dark] select,
|
|
[data-kb-theme=dark] button {
|
|
border-color: #262626 !important;
|
|
}
|
|
|
|
/* Dark mode select/dropdown fixes */
|
|
[data-kb-theme=dark] select {
|
|
background-color: hsl(var(--background)) !important;
|
|
color: hsl(var(--foreground)) !important;
|
|
border-color: #262626 !important;
|
|
}
|
|
|
|
[data-kb-theme=dark] select option {
|
|
background-color: hsl(var(--background)) !important;
|
|
color: hsl(var(--foreground)) !important;
|
|
}
|
|
|
|
[data-kb-theme=dark] select:focus {
|
|
border-color: hsl(var(--primary)) !important;
|
|
box-shadow: 0 0 0 3px hsl(var(--primary) / 0.1) !important;
|
|
}
|
|
|
|
/* Dark mode dropdown content fixes */
|
|
[data-kb-theme=dark] .bg-popover {
|
|
background-color: hsl(var(--popover)) !important;
|
|
border-color: #262626 !important;
|
|
}
|
|
|
|
[data-kb-theme=dark] .text-popover-foreground {
|
|
color: hsl(var(--popover-foreground)) !important;
|
|
}
|
|
|
|
[data-kb-theme=dark] [role="option"],
|
|
[data-kb-theme=dark] .select-item {
|
|
background-color: hsl(var(--popover)) !important;
|
|
color: hsl(var(--popover-foreground)) !important;
|
|
}
|
|
|
|
[data-kb-theme=dark] [role="option"]:hover,
|
|
[data-kb-theme=dark] .select-item:hover,
|
|
[data-kb-theme=dark] [role="option"]:focus,
|
|
[data-kb-theme=dark] .select-item:focus {
|
|
background-color: hsl(var(--accent)) !important;
|
|
color: hsl(var(--accent-foreground)) !important;
|
|
}
|
|
|
|
/* Card and component borders in dark mode */
|
|
[data-kb-theme=dark] .card,
|
|
[data-kb-theme=dark] [role="dialog"],
|
|
[data-kb-theme=dark] [role="menu"],
|
|
[data-kb-theme=dark] [role="listbox"],
|
|
[data-kb-theme=dark] [role="option"],
|
|
[data-kb-theme=dark] .dropdown,
|
|
[data-kb-theme=dark] .popover,
|
|
[data-kb-theme=dark] .tooltip {
|
|
border-color: #262626 !important;
|
|
}
|
|
|
|
/* Papra base styles - exact match */
|
|
*,:after,:before,::backdrop,::file-selector-button {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0 solid
|
|
}
|
|
|
|
html,:host {
|
|
line-height: 1.5;
|
|
-webkit-text-size-adjust: 100%;
|
|
tab-size: 4;
|
|
font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
|
|
font-feature-settings: var(--default-font-featureSettings, normal);
|
|
font-variation-settings: var(--default-font-variationSettings, normal);
|
|
-webkit-tap-highlight-color: transparent
|
|
}
|
|
|
|
body {
|
|
background-color: hsl(var(--background));
|
|
color: hsl(var(--foreground));
|
|
font-family: var(--font-sans);
|
|
font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
font-variation-settings: normal;
|
|
font-weight: 400;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* Papra utility classes */
|
|
.w-280px {
|
|
width: 280px;
|
|
}
|
|
|
|
.size-5\.5 {
|
|
width: 1.375rem;
|
|
height: 1.375rem;
|
|
}
|
|
|
|
/* Papra tabler icons */
|
|
.i-tabler-chevron-down {
|
|
--un-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 9l6 6l6-6'/%3E%3C/svg%3E");
|
|
-webkit-mask: var(--un-icon) no-repeat;
|
|
mask: var(--un-icon) no-repeat;
|
|
-webkit-mask-size: 100% 100%;
|
|
mask-size: 100% 100%;
|
|
background-color: currentColor;
|
|
color: inherit;
|
|
width: 1em;
|
|
height: 1em
|
|
}
|
|
|
|
.i-tabler-file-text {
|
|
--un-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z'/%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M16 13H8M16 17H8M10 9H8'/%3E%3C/svg%3E");
|
|
-webkit-mask: var(--un-icon) no-repeat;
|
|
mask: var(--un-icon) no-repeat;
|
|
-webkit-mask-size: 100% 100%;
|
|
mask-size: 100% 100%;
|
|
background-color: currentColor;
|
|
color: inherit;
|
|
width: 1em;
|
|
height: 1em
|
|
}
|
|
|
|
.i-tabler-home {
|
|
--un-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m3 9l9-7l9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 22V12h6v10'/%3E%3C/svg%3E");
|
|
-webkit-mask: var(--un-icon) no-repeat;
|
|
mask: var(--un-icon) no-repeat;
|
|
-webkit-mask-size: 100% 100%;
|
|
mask-size: 100% 100%;
|
|
background-color: currentColor;
|
|
color: inherit;
|
|
width: 1em;
|
|
height: 1em
|
|
}
|
|
|
|
.i-tabler-tag {
|
|
--un-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M20.5 7.5L16 12l-4.5 4.5L3 21l1.5-8.5L9 8l4.5-4.5z'/%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M20.5 7.5L16 12m0 0l-4.5 4.5L3 21l1.5-8.5L9 8l4.5-4.5L16 12z'/%3E%3C/svg%3E");
|
|
-webkit-mask: var(--un-icon) no-repeat;
|
|
mask: var(--un-icon) no-repeat;
|
|
-webkit-mask-size: 100% 100%;
|
|
mask-size: 100% 100%;
|
|
background-color: currentColor;
|
|
color: inherit;
|
|
width: 1em;
|
|
height: 1em
|
|
}
|
|
|
|
.i-tabler-list-check {
|
|
--un-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m3 7l6 6l4-4'/%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 17h18M3 12h18'/%3E%3C/svg%3E");
|
|
-webkit-mask: var(--un-icon) no-repeat;
|
|
mask: var(--un-icon) no-repeat;
|
|
-webkit-mask-size: 100% 100%;
|
|
mask-size: 100% 100%;
|
|
background-color: currentColor;
|
|
color: inherit;
|
|
width: 1em;
|
|
height: 1em
|
|
}
|
|
|
|
.i-tabler-users {
|
|
--un-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M16 7a4 4 0 1 1-8 0a4 4 0 0 1 8 0M12 14a7 7 0 0 0-7 7h14a7 7 0 0 0-7-7'/%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 21v-2a4 4 0 0 1 4-4'/%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M17 8a4 4 0 0 1 0 8'/%3E%3C/svg%3E");
|
|
-webkit-mask: var(--un-icon) no-repeat;
|
|
mask: var(--un-icon) no-repeat;
|
|
-webkit-mask-size: 100% 100%;
|
|
mask-size: 100% 100%;
|
|
background-color: currentColor;
|
|
color: inherit;
|
|
width: 1em;
|
|
height: 1em
|
|
}
|
|
|
|
.i-tabler-trash {
|
|
--un-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6h14zM10 11v6M14 11v6'/%3E%3C/svg%3E");
|
|
-webkit-mask: var(--un-icon) no-repeat;
|
|
mask: var(--un-icon) no-repeat;
|
|
-webkit-mask-size: 100% 100%;
|
|
mask-size: 100% 100%;
|
|
background-color: currentColor;
|
|
color: inherit;
|
|
width: 1em;
|
|
height: 1em
|
|
}
|
|
|
|
.i-tabler-settings {
|
|
--un-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.15.08a2 2 0 0 1-2.65-.22l-.13-.13a2 2 0 0 0-2.83 0l-.06.06a2 2 0 0 0 0 2.83l.13.13a2 2 0 0 1 .22 2.65l-.08.15a2 2 0 0 1-1.73 1H2a2 2 0 0 0-2 2v.44a2 2 0 0 0 2 2h.18a2 2 0 0 1 1.73 1l.08.15a2 2 0 0 1-.22 2.65l-.13.13a2 2 0 0 0 0 2.83l.06.06a2 2 0 0 0 2.83 0l.13-.13a2 2 0 0 1 2.65-.22l.15.08a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.15-.08a2 2 0 0 1 2.65.22l.13.13a2 2 0 0 0 2.83 0l.06-.06a2 2 0 0 0 0-2.83l-.13-.13a2 2 0 0 1-.22-2.65l.08-.15a2 2 0 0 1 1.73-1H22a2 2 0 0 0 2-2v-.44a2 2 0 0 0-2-2h-.18a2 2 0 0 1-1.73-1l-.08-.15a2 2 0 0 1 .22-2.65l.13-.13a2 2 0 0 0 0-2.83l-.06-.06a2 2 0 0 0-2.83 0l-.13.13a2 2 0 0 1-2.65.22l-.15-.08a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/%3E%3Ccircle cx="12" cy="12" r="3" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E");
|
|
-webkit-mask: var(--un-icon) no-repeat;
|
|
mask: var(--un-icon) no-repeat;
|
|
-webkit-mask-size: 100% 100%;
|
|
mask-size: 100% 100%;
|
|
background-color: currentColor;
|
|
color: inherit;
|
|
width: 1em;
|
|
height: 1em
|
|
}
|
|
|
|
/* Papra transitions */
|
|
.transition {
|
|
transition: all var(--default-transition-duration) var(--default-transition-timingFunction);
|
|
}
|
|
|
|
/* Border styles - maintain #262626 on hover in dark mode */
|
|
[data-kb-theme=dark] .border {
|
|
border-color: #262626 !important;
|
|
}
|
|
|
|
[data-kb-theme=dark] .border-input {
|
|
border-color: #262626 !important;
|
|
}
|
|
|
|
[data-kb-theme=dark] .border-r {
|
|
border-right-color: #262626 !important;
|
|
}
|
|
|
|
[data-kb-theme=dark] .border-r-border {
|
|
border-right-color: #262626 !important;
|
|
}
|
|
|
|
/* Ensure borders don't change on hover in dark mode */
|
|
[data-kb-theme=dark] .hover\:bg-accent\/50:hover {
|
|
border-color: #262626 !important;
|
|
}
|
|
|
|
[data-kb-theme=dark] .hover\:bg-accent:hover {
|
|
border-color: #262626 !important;
|
|
}
|
|
|
|
[data-kb-theme=dark] .hover\:text-accent-foreground:hover {
|
|
border-color: #262626 !important;
|
|
}
|
|
|
|
/* Button hover states - maintain border color in dark mode */
|
|
[data-kb-theme=dark] button:hover {
|
|
border-color: #262626 !important;
|
|
}
|
|
|
|
/* Icon background colors in dark mode */
|
|
[data-kb-theme=dark] .bg-muted {
|
|
background-color: #262727 !important;
|
|
}
|
|
|
|
/* Icon containers in dashboard and sidebar in dark mode */
|
|
[data-kb-theme=dark] .bg-muted.flex.items-center.justify-center.p-2.rounded-lg {
|
|
background-color: #262727 !important;
|
|
}
|
|
|
|
/* Organization selector icon background in dark mode */
|
|
[data-kb-theme=dark] .p-1\.5.rounded.text-lg.font-bold.flex.items-center.bg-muted {
|
|
background-color: #262727 !important;
|
|
}
|
|
|
|
/* Ensure icon backgrounds stay consistent on hover in dark mode */
|
|
[data-kb-theme=dark] .bg-muted:hover {
|
|
background-color: #262727 !important;
|
|
}
|
|
|
|
/* Table borders in dark mode */
|
|
[data-kb-theme=dark] table {
|
|
border-color: #262626 !important;
|
|
}
|
|
|
|
[data-kb-theme=dark] table th,
|
|
[data-kb-theme=dark] table td {
|
|
border-color: #262626 !important;
|
|
}
|
|
|
|
[data-kb-theme=dark] table thead tr {
|
|
border-bottom-color: #262626 !important;
|
|
}
|
|
|
|
[data-kb-theme=dark] table tbody tr {
|
|
border-bottom-color: #262626 !important;
|
|
}
|
|
|
|
/* Papra sidebar styling */
|
|
.sidebar-papra {
|
|
width: 280px;
|
|
border-right: 1px solid hsl(var(--border));
|
|
flex-shrink: 0;
|
|
display: none;
|
|
background-color: hsl(var(--card));
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.sidebar-papra {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
/* Ensure primary color is properly applied */
|
|
.text-primary {
|
|
color: hsl(var(--primary)) !important;
|
|
}
|
|
|
|
.bg-primary {
|
|
background-color: hsl(var(--primary)) !important;
|
|
}
|
|
|
|
/* Bar chart specific fixes - simplified for responsiveness */
|
|
.weekly-bar {
|
|
background-color: hsl(var(--primary)) !important;
|
|
min-height: 4px !important;
|
|
display: block !important;
|
|
transition: all 0.3s ease !important;
|
|
}
|
|
|
|
[data-kb-theme=dark] .weekly-bar {
|
|
background-color: hsl(199 89% 67%) !important;
|
|
}
|
|
|
|
/* Completely responsive bar chart */
|
|
.weekly-activity-chart {
|
|
min-height: 128px !important; /* h-32 */
|
|
width: 100%;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
.weekly-activity-chart {
|
|
min-height: 144px !important; /* h-36 */
|
|
}
|
|
}
|
|
|
|
/* Responsive bars that fill available space */
|
|
.weekly-activity-chart .weekly-bar {
|
|
background-color: hsl(199, 89%, 67%) !important;
|
|
min-height: 4px !important;
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
transition: all 0.3s ease !important;
|
|
border-radius: 0.25rem 0.25rem 0 0;
|
|
}
|
|
|
|
/* Dark mode bar colors */
|
|
[data-kb-theme=dark] .weekly-activity-chart .weekly-bar {
|
|
background-color: hsl(199, 89%, 67%) !important;
|
|
}
|
|
|
|
/* Ensure bar containers are truly flexible - BUT preserve max-width for responsive design */
|
|
.weekly-activity-chart .flex-1 {
|
|
flex: 1 1 0%;
|
|
min-width: 0;
|
|
/* Don't override max-width - let Tailwind handle it */
|
|
}
|
|
|
|
/* Only override max-width on actual bars, not containers */
|
|
.weekly-activity-chart .weekly-bar,
|
|
.weekly-activity-chart .weekly-bar[class*="max-w"] {
|
|
max-width: 100% !important;
|
|
}
|
|
|
|
/* Don't remove max-width from bar containers - needed for responsive design */
|
|
/* .weekly-activity-chart [class*="max-w"] {
|
|
max-width: none !important;
|
|
} */
|
|
|
|
/* Responsive tooltip positioning */
|
|
.weekly-activity-chart .group:hover .absolute {
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
/* Better spacing on smaller screens */
|
|
@media (max-width: 640px) {
|
|
.weekly-activity-chart {
|
|
padding-left: 0.5rem !important;
|
|
padding-right: 0.5rem !important;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
.weekly-activity-chart {
|
|
padding-left: 1rem !important;
|
|
padding-right: 1rem !important;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.weekly-activity-chart {
|
|
padding-left: 1.5rem !important;
|
|
padding-right: 1.5rem !important;
|
|
}
|
|
}
|
|
|
|
/* Icon color fixes */
|
|
.text-primary .icon,
|
|
.text-primary svg,
|
|
.bg-primary .icon,
|
|
.bg-primary svg {
|
|
color: hsl(var(--primary-foreground)) !important;
|
|
}
|
|
|
|
/* Button primary color fixes */
|
|
.bg-primary:hover {
|
|
background-color: hsl(var(--primary) / 0.9) !important;
|
|
}
|
|
|
|
/* Ensure icon containers show primary color */
|
|
.bg-primary\/10 {
|
|
background-color: hsl(var(--primary) / 0.1) !important;
|
|
}
|
|
|
|
.text-primary\/foreground {
|
|
color: hsl(var(--primary-foreground)) !important;
|
|
}
|
|
|
|
/* Utility: match Tailwind-style max-h-96 used in activity feed */
|
|
.max-h-96 {
|
|
max-height: 29.7rem;
|
|
}
|
|
|
|
/* Utility: slim scrollbars for activity feed list */
|
|
.scrollbar-thin {
|
|
scrollbar-width: thin;
|
|
}
|
|
|
|
.scrollbar-thumb-border::-webkit-scrollbar-thumb {
|
|
border-color: hsl(var(--border));
|
|
}
|
|
|
|
.scrollbar-track-transparent::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
/* Custom scrollbar styling */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: #262626;
|
|
border-radius: 4px;
|
|
border: 1px solid #1a1a1a;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #404040;
|
|
}
|
|
|
|
/* Firefox scrollbar */
|
|
* {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: #262626 transparent;
|
|
}
|
|
|
|
/* Fix space-y-6 margin issue - exclude overlays and fixed elements */
|
|
.space-y-6 > :not([hidden]) ~ :not([hidden]):not(.fixed):not([class*="fixed"]):not([class*="overlay"]):not([class*="backdrop"]),
|
|
[space-y-6=""] > :not([hidden]) ~ :not([hidden]):not(.fixed):not([class*="fixed"]):not([class*="overlay"]):not([class*="backdrop"]) {
|
|
--un-space-y-reverse: 0;
|
|
margin-top: calc(1.5rem * calc(1 - var(--un-space-y-reverse)));
|
|
}
|
|
|
|
/* Dark mode scrollbar adjustments */
|
|
[data-kb-theme="dark"] ::-webkit-scrollbar-thumb {
|
|
background: #404040;
|
|
border: 1px solid #262626;
|
|
}
|
|
|
|
[data-kb-theme="dark"] ::-webkit-scrollbar-thumb:hover {
|
|
background: #555555;
|
|
}
|
|
|
|
[data-kb-theme="dark"] * {
|
|
scrollbar-color: #404040 transparent;
|
|
}
|
|
|
|
/* Better checkbox styling for notes */
|
|
.note-checkbox {
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
width: 16px;
|
|
height: 16px;
|
|
border: 2px solid hsl(var(--border));
|
|
border-radius: 3px;
|
|
background-color: hsl(var(--background));
|
|
cursor: pointer;
|
|
position: relative;
|
|
transition: all 0.15s ease-in-out;
|
|
flex-shrink: 0;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.note-checkbox:hover {
|
|
border-color: hsl(var(--primary));
|
|
background-color: hsl(var(--primary) / 0.1);
|
|
}
|
|
|
|
.note-checkbox:checked {
|
|
background-color: hsl(var(--primary));
|
|
border-color: hsl(var(--primary));
|
|
}
|
|
|
|
.note-checkbox:checked::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 1px;
|
|
left: 4px;
|
|
width: 4px;
|
|
height: 8px;
|
|
border: solid white;
|
|
border-width: 0 2px 2px 0;
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
/* Dark mode checkbox adjustments */
|
|
[data-kb-theme="dark"] .note-checkbox {
|
|
background-color: hsl(var(--background));
|
|
border-color: #525252;
|
|
}
|
|
|
|
[data-kb-theme="dark"] .note-checkbox:hover {
|
|
border-color: hsl(var(--primary));
|
|
background-color: hsl(var(--primary) / 0.1);
|
|
}
|
|
|
|
[data-kb-theme="dark"] .note-checkbox:checked {
|
|
background-color: hsl(var(--primary));
|
|
border-color: hsl(var(--primary));
|
|
}
|
|
|
|
/* Ensure text-primary color always uses the current primary color from CSS variables */
|
|
.text-primary,
|
|
.text-primary svg,
|
|
svg.text-primary,
|
|
button.text-primary,
|
|
button.text-primary svg {
|
|
color: hsl(var(--primary)) !important;
|
|
}
|
|
|
|
/* Force primary color on hover states */
|
|
.hover\:text-primary\/80:hover,
|
|
button.hover\:text-primary\/80:hover,
|
|
button.hover\:text-primary\/80:hover svg {
|
|
color: hsl(var(--primary) / 0.8) !important;
|
|
}
|