320 lines
No EOL
19 KiB
CSS
320 lines
No EOL
19 KiB
CSS
/**
|
|
* Converts a given value to a percentage string.
|
|
*
|
|
* @param {Number} $value - The value to be converted to a percentage.
|
|
* @return {String} - The percentage representation of the value.
|
|
*/
|
|
/**
|
|
* Generates a transparent version of the given color.
|
|
*
|
|
* @param {Color} $color - The base color to be made transparent.
|
|
* @param {Number} $alpha - The level of transparency, ranging from 0 (fully transparent) to 1 (fully opaque). Default is 1.
|
|
* @return {Color} - The resulting color with the specified transparency.
|
|
*
|
|
* Mixes in `oklab` so tints against an opaque background (e.g. alert backgrounds
|
|
* over `--bg-surface`) stay perceptually even; mixing with `transparent` gives
|
|
* the same result in every color space.
|
|
*/
|
|
:root,
|
|
:host {
|
|
/** Direction multiplier for physical transforms (1 = LTR, -1 = RTL) */
|
|
--tblr-dir: 1;
|
|
/** Fonts */
|
|
--tblr-font-monospace: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
|
|
--tblr-font-sans-serif: system-ui, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
|
|
--tblr-font-serif: Georgia, Times New Roman, times, serif;
|
|
--tblr-font-comic: Comic Sans MS, Comic Sans, Chalkboard SE, Comic Neue, sans-serif, cursive;
|
|
/** Gray colors */
|
|
--tblr-gray-50: oklch(98.46% 0.0017 247.84deg);
|
|
--tblr-gray-100: oklch(96.7% 0.0029 264.54deg);
|
|
--tblr-gray-200: oklch(92.76% 0.0058 264.53deg);
|
|
--tblr-gray-300: oklch(87.17% 0.0093 258.34deg);
|
|
--tblr-gray-400: oklch(71.37% 0.0192 261.32deg);
|
|
--tblr-gray-500: oklch(55.1% 0.0234 264.36deg);
|
|
--tblr-gray-600: oklch(44.61% 0.0263 256.8deg);
|
|
--tblr-gray-700: oklch(37.29% 0.0306 259.73deg);
|
|
--tblr-gray-800: oklch(27.81% 0.0296 256.85deg);
|
|
--tblr-gray-900: oklch(21.01% 0.0318 264.66deg);
|
|
--tblr-gray-950: oklch(12.96% 0.0274 261.69deg);
|
|
--tblr-white: #fff;
|
|
--tblr-white-lt: color-mix(in oklab, var(--tblr-white) 10%, transparent);
|
|
--tblr-black: #000;
|
|
--tblr-black-lt: color-mix(in oklab, var(--tblr-black) 10%, transparent);
|
|
--tblr-gray-lt: color-mix(in oklab, var(--tblr-gray) 10%, transparent);
|
|
--tblr-gray-dark-lt: color-mix(in oklab, var(--tblr-gray-dark) 10%, transparent);
|
|
--tblr-dark: oklch(27.81% 0.0296 256.85deg);
|
|
--tblr-light: oklch(98.46% 0.0017 247.84deg);
|
|
/** Brand colors */
|
|
--tblr-brand: oklch(54.6% 0.1724 254.2deg);
|
|
/** Theme colors */
|
|
--tblr-primary: oklch(54.6% 0.1724 254.2deg);
|
|
--tblr-primary-fg: var(--tblr-light);
|
|
--tblr-primary-darken: color-mix(in oklab, var(--tblr-primary), transparent 20%);
|
|
--tblr-primary-lt: color-mix(in oklab, var(--tblr-primary) 10%, transparent);
|
|
--tblr-primary-200: color-mix(in oklab, var(--tblr-primary) 20%, transparent);
|
|
--tblr-secondary: oklch(55.1% 0.0234 264.36deg);
|
|
--tblr-secondary-fg: var(--tblr-light);
|
|
--tblr-secondary-darken: color-mix(in oklab, var(--tblr-secondary), transparent 20%);
|
|
--tblr-secondary-lt: color-mix(in oklab, var(--tblr-secondary) 10%, transparent);
|
|
--tblr-secondary-200: color-mix(in oklab, var(--tblr-secondary) 20%, transparent);
|
|
--tblr-success: oklch(67.38% 0.1885 145.43deg);
|
|
--tblr-success-fg: var(--tblr-light);
|
|
--tblr-success-darken: color-mix(in oklab, var(--tblr-success), transparent 20%);
|
|
--tblr-success-lt: color-mix(in oklab, var(--tblr-success) 10%, transparent);
|
|
--tblr-success-200: color-mix(in oklab, var(--tblr-success) 20%, transparent);
|
|
--tblr-info: oklch(66.26% 0.1358 246.81deg);
|
|
--tblr-info-fg: var(--tblr-light);
|
|
--tblr-info-darken: color-mix(in oklab, var(--tblr-info), transparent 20%);
|
|
--tblr-info-lt: color-mix(in oklab, var(--tblr-info) 10%, transparent);
|
|
--tblr-info-200: color-mix(in oklab, var(--tblr-info) 20%, transparent);
|
|
--tblr-warning: oklch(77.02% 0.1658 71.02deg);
|
|
--tblr-warning-fg: var(--tblr-light);
|
|
--tblr-warning-darken: color-mix(in oklab, var(--tblr-warning), transparent 20%);
|
|
--tblr-warning-lt: color-mix(in oklab, var(--tblr-warning) 10%, transparent);
|
|
--tblr-warning-200: color-mix(in oklab, var(--tblr-warning) 20%, transparent);
|
|
--tblr-danger: oklch(58.29% 0.1941 25.59deg);
|
|
--tblr-danger-fg: var(--tblr-light);
|
|
--tblr-danger-darken: color-mix(in oklab, var(--tblr-danger), transparent 20%);
|
|
--tblr-danger-lt: color-mix(in oklab, var(--tblr-danger) 10%, transparent);
|
|
--tblr-danger-200: color-mix(in oklab, var(--tblr-danger) 20%, transparent);
|
|
--tblr-light: oklch(98.46% 0.0017 247.84deg);
|
|
--tblr-light-fg: var(--tblr-dark);
|
|
--tblr-light-darken: color-mix(in oklab, var(--tblr-light), transparent 20%);
|
|
--tblr-light-lt: color-mix(in oklab, var(--tblr-light) 10%, transparent);
|
|
--tblr-light-200: color-mix(in oklab, var(--tblr-light) 20%, transparent);
|
|
--tblr-dark: oklch(27.81% 0.0296 256.85deg);
|
|
--tblr-dark-fg: var(--tblr-light);
|
|
--tblr-dark-darken: color-mix(in oklab, var(--tblr-dark), transparent 20%);
|
|
--tblr-dark-lt: color-mix(in oklab, var(--tblr-dark) 10%, transparent);
|
|
--tblr-dark-200: color-mix(in oklab, var(--tblr-dark) 20%, transparent);
|
|
--tblr-muted: oklch(55.1% 0.0234 264.36deg);
|
|
--tblr-muted-fg: var(--tblr-light);
|
|
--tblr-muted-darken: color-mix(in oklab, var(--tblr-muted), transparent 20%);
|
|
--tblr-muted-lt: color-mix(in oklab, var(--tblr-muted) 10%, transparent);
|
|
--tblr-muted-200: color-mix(in oklab, var(--tblr-muted) 20%, transparent);
|
|
--tblr-blue: oklch(54.6% 0.1724 254.2deg);
|
|
--tblr-blue-fg: var(--tblr-light);
|
|
--tblr-blue-darken: color-mix(in oklab, var(--tblr-blue), transparent 20%);
|
|
--tblr-blue-lt: color-mix(in oklab, var(--tblr-blue) 10%, transparent);
|
|
--tblr-blue-200: color-mix(in oklab, var(--tblr-blue) 20%, transparent);
|
|
--tblr-azure: oklch(66.26% 0.1358 246.81deg);
|
|
--tblr-azure-fg: var(--tblr-light);
|
|
--tblr-azure-darken: color-mix(in oklab, var(--tblr-azure), transparent 20%);
|
|
--tblr-azure-lt: color-mix(in oklab, var(--tblr-azure) 10%, transparent);
|
|
--tblr-azure-200: color-mix(in oklab, var(--tblr-azure) 20%, transparent);
|
|
--tblr-indigo: oklch(55.66% 0.2082 268.35deg);
|
|
--tblr-indigo-fg: var(--tblr-light);
|
|
--tblr-indigo-darken: color-mix(in oklab, var(--tblr-indigo), transparent 20%);
|
|
--tblr-indigo-lt: color-mix(in oklab, var(--tblr-indigo) 10%, transparent);
|
|
--tblr-indigo-200: color-mix(in oklab, var(--tblr-indigo) 20%, transparent);
|
|
--tblr-purple: oklch(57.83% 0.2186 319.15deg);
|
|
--tblr-purple-fg: var(--tblr-light);
|
|
--tblr-purple-darken: color-mix(in oklab, var(--tblr-purple), transparent 20%);
|
|
--tblr-purple-lt: color-mix(in oklab, var(--tblr-purple) 10%, transparent);
|
|
--tblr-purple-200: color-mix(in oklab, var(--tblr-purple) 20%, transparent);
|
|
--tblr-pink: oklch(58.81% 0.201 5.25deg);
|
|
--tblr-pink-fg: var(--tblr-light);
|
|
--tblr-pink-darken: color-mix(in oklab, var(--tblr-pink), transparent 20%);
|
|
--tblr-pink-lt: color-mix(in oklab, var(--tblr-pink) 10%, transparent);
|
|
--tblr-pink-200: color-mix(in oklab, var(--tblr-pink) 20%, transparent);
|
|
--tblr-red: oklch(58.29% 0.1941 25.59deg);
|
|
--tblr-red-fg: var(--tblr-light);
|
|
--tblr-red-darken: color-mix(in oklab, var(--tblr-red), transparent 20%);
|
|
--tblr-red-lt: color-mix(in oklab, var(--tblr-red) 10%, transparent);
|
|
--tblr-red-200: color-mix(in oklab, var(--tblr-red) 20%, transparent);
|
|
--tblr-orange: oklch(68.51% 0.1954 44.57deg);
|
|
--tblr-orange-fg: var(--tblr-light);
|
|
--tblr-orange-darken: color-mix(in oklab, var(--tblr-orange), transparent 20%);
|
|
--tblr-orange-lt: color-mix(in oklab, var(--tblr-orange) 10%, transparent);
|
|
--tblr-orange-200: color-mix(in oklab, var(--tblr-orange) 20%, transparent);
|
|
--tblr-yellow: oklch(77.02% 0.1658 71.02deg);
|
|
--tblr-yellow-fg: var(--tblr-light);
|
|
--tblr-yellow-darken: color-mix(in oklab, var(--tblr-yellow), transparent 20%);
|
|
--tblr-yellow-lt: color-mix(in oklab, var(--tblr-yellow) 10%, transparent);
|
|
--tblr-yellow-200: color-mix(in oklab, var(--tblr-yellow) 20%, transparent);
|
|
--tblr-lime: oklch(70.99% 0.1897 131.53deg);
|
|
--tblr-lime-fg: var(--tblr-light);
|
|
--tblr-lime-darken: color-mix(in oklab, var(--tblr-lime), transparent 20%);
|
|
--tblr-lime-lt: color-mix(in oklab, var(--tblr-lime) 10%, transparent);
|
|
--tblr-lime-200: color-mix(in oklab, var(--tblr-lime) 20%, transparent);
|
|
--tblr-green: oklch(67.38% 0.1885 145.43deg);
|
|
--tblr-green-fg: var(--tblr-light);
|
|
--tblr-green-darken: color-mix(in oklab, var(--tblr-green), transparent 20%);
|
|
--tblr-green-lt: color-mix(in oklab, var(--tblr-green) 10%, transparent);
|
|
--tblr-green-200: color-mix(in oklab, var(--tblr-green) 20%, transparent);
|
|
--tblr-teal: oklch(64.32% 0.1338 164.7deg);
|
|
--tblr-teal-fg: var(--tblr-light);
|
|
--tblr-teal-darken: color-mix(in oklab, var(--tblr-teal), transparent 20%);
|
|
--tblr-teal-lt: color-mix(in oklab, var(--tblr-teal) 10%, transparent);
|
|
--tblr-teal-200: color-mix(in oklab, var(--tblr-teal) 20%, transparent);
|
|
--tblr-cyan: oklch(65.52% 0.1105 212.17deg);
|
|
--tblr-cyan-fg: var(--tblr-light);
|
|
--tblr-cyan-darken: color-mix(in oklab, var(--tblr-cyan), transparent 20%);
|
|
--tblr-cyan-lt: color-mix(in oklab, var(--tblr-cyan) 10%, transparent);
|
|
--tblr-cyan-200: color-mix(in oklab, var(--tblr-cyan) 20%, transparent);
|
|
--tblr-x: #000;
|
|
--tblr-x-fg: var(--tblr-light);
|
|
--tblr-x-darken: color-mix(in oklab, var(--tblr-x), transparent 20%);
|
|
--tblr-x-lt: color-mix(in oklab, var(--tblr-x) 10%, transparent);
|
|
--tblr-x-200: color-mix(in oklab, var(--tblr-x) 20%, transparent);
|
|
--tblr-facebook: #0866ff;
|
|
--tblr-facebook-fg: var(--tblr-light);
|
|
--tblr-facebook-darken: color-mix(in oklab, var(--tblr-facebook), transparent 20%);
|
|
--tblr-facebook-lt: color-mix(in oklab, var(--tblr-facebook) 10%, transparent);
|
|
--tblr-facebook-200: color-mix(in oklab, var(--tblr-facebook) 20%, transparent);
|
|
--tblr-twitter: #1da1f2;
|
|
--tblr-twitter-fg: var(--tblr-light);
|
|
--tblr-twitter-darken: color-mix(in oklab, var(--tblr-twitter), transparent 20%);
|
|
--tblr-twitter-lt: color-mix(in oklab, var(--tblr-twitter) 10%, transparent);
|
|
--tblr-twitter-200: color-mix(in oklab, var(--tblr-twitter) 20%, transparent);
|
|
--tblr-linkedin: #0a66c2;
|
|
--tblr-linkedin-fg: var(--tblr-light);
|
|
--tblr-linkedin-darken: color-mix(in oklab, var(--tblr-linkedin), transparent 20%);
|
|
--tblr-linkedin-lt: color-mix(in oklab, var(--tblr-linkedin) 10%, transparent);
|
|
--tblr-linkedin-200: color-mix(in oklab, var(--tblr-linkedin) 20%, transparent);
|
|
--tblr-google: #4285f4;
|
|
--tblr-google-fg: var(--tblr-light);
|
|
--tblr-google-darken: color-mix(in oklab, var(--tblr-google), transparent 20%);
|
|
--tblr-google-lt: color-mix(in oklab, var(--tblr-google) 10%, transparent);
|
|
--tblr-google-200: color-mix(in oklab, var(--tblr-google) 20%, transparent);
|
|
--tblr-youtube: #f00;
|
|
--tblr-youtube-fg: var(--tblr-light);
|
|
--tblr-youtube-darken: color-mix(in oklab, var(--tblr-youtube), transparent 20%);
|
|
--tblr-youtube-lt: color-mix(in oklab, var(--tblr-youtube) 10%, transparent);
|
|
--tblr-youtube-200: color-mix(in oklab, var(--tblr-youtube) 20%, transparent);
|
|
--tblr-vimeo: #1ab7ea;
|
|
--tblr-vimeo-fg: var(--tblr-light);
|
|
--tblr-vimeo-darken: color-mix(in oklab, var(--tblr-vimeo), transparent 20%);
|
|
--tblr-vimeo-lt: color-mix(in oklab, var(--tblr-vimeo) 10%, transparent);
|
|
--tblr-vimeo-200: color-mix(in oklab, var(--tblr-vimeo) 20%, transparent);
|
|
--tblr-dribbble: #ea4c89;
|
|
--tblr-dribbble-fg: var(--tblr-light);
|
|
--tblr-dribbble-darken: color-mix(in oklab, var(--tblr-dribbble), transparent 20%);
|
|
--tblr-dribbble-lt: color-mix(in oklab, var(--tblr-dribbble) 10%, transparent);
|
|
--tblr-dribbble-200: color-mix(in oklab, var(--tblr-dribbble) 20%, transparent);
|
|
--tblr-github: #181717;
|
|
--tblr-github-fg: var(--tblr-light);
|
|
--tblr-github-darken: color-mix(in oklab, var(--tblr-github), transparent 20%);
|
|
--tblr-github-lt: color-mix(in oklab, var(--tblr-github) 10%, transparent);
|
|
--tblr-github-200: color-mix(in oklab, var(--tblr-github) 20%, transparent);
|
|
--tblr-instagram: #ff0069;
|
|
--tblr-instagram-fg: var(--tblr-light);
|
|
--tblr-instagram-darken: color-mix(in oklab, var(--tblr-instagram), transparent 20%);
|
|
--tblr-instagram-lt: color-mix(in oklab, var(--tblr-instagram) 10%, transparent);
|
|
--tblr-instagram-200: color-mix(in oklab, var(--tblr-instagram) 20%, transparent);
|
|
--tblr-pinterest: #bd081c;
|
|
--tblr-pinterest-fg: var(--tblr-light);
|
|
--tblr-pinterest-darken: color-mix(in oklab, var(--tblr-pinterest), transparent 20%);
|
|
--tblr-pinterest-lt: color-mix(in oklab, var(--tblr-pinterest) 10%, transparent);
|
|
--tblr-pinterest-200: color-mix(in oklab, var(--tblr-pinterest) 20%, transparent);
|
|
--tblr-vk: #07f;
|
|
--tblr-vk-fg: var(--tblr-light);
|
|
--tblr-vk-darken: color-mix(in oklab, var(--tblr-vk), transparent 20%);
|
|
--tblr-vk-lt: color-mix(in oklab, var(--tblr-vk) 10%, transparent);
|
|
--tblr-vk-200: color-mix(in oklab, var(--tblr-vk) 20%, transparent);
|
|
--tblr-rss: #ffa500;
|
|
--tblr-rss-fg: var(--tblr-dark);
|
|
--tblr-rss-darken: color-mix(in oklab, var(--tblr-rss), transparent 20%);
|
|
--tblr-rss-lt: color-mix(in oklab, var(--tblr-rss) 10%, transparent);
|
|
--tblr-rss-200: color-mix(in oklab, var(--tblr-rss) 20%, transparent);
|
|
--tblr-flickr: #0063dc;
|
|
--tblr-flickr-fg: var(--tblr-light);
|
|
--tblr-flickr-darken: color-mix(in oklab, var(--tblr-flickr), transparent 20%);
|
|
--tblr-flickr-lt: color-mix(in oklab, var(--tblr-flickr) 10%, transparent);
|
|
--tblr-flickr-200: color-mix(in oklab, var(--tblr-flickr) 20%, transparent);
|
|
--tblr-bitbucket: #0052cc;
|
|
--tblr-bitbucket-fg: var(--tblr-light);
|
|
--tblr-bitbucket-darken: color-mix(in oklab, var(--tblr-bitbucket), transparent 20%);
|
|
--tblr-bitbucket-lt: color-mix(in oklab, var(--tblr-bitbucket) 10%, transparent);
|
|
--tblr-bitbucket-200: color-mix(in oklab, var(--tblr-bitbucket) 20%, transparent);
|
|
--tblr-tabler: #066fd1;
|
|
--tblr-tabler-fg: var(--tblr-light);
|
|
--tblr-tabler-darken: color-mix(in oklab, var(--tblr-tabler), transparent 20%);
|
|
--tblr-tabler-lt: color-mix(in oklab, var(--tblr-tabler) 10%, transparent);
|
|
--tblr-tabler-200: color-mix(in oklab, var(--tblr-tabler) 20%, transparent);
|
|
/** Gray colors */
|
|
--tblr-gray-50-fg: var(--tblr-gray-50);
|
|
--tblr-gray-100-fg: var(--tblr-gray-100);
|
|
--tblr-gray-200-fg: var(--tblr-gray-200);
|
|
--tblr-gray-300-fg: var(--tblr-gray-300);
|
|
--tblr-gray-400-fg: var(--tblr-gray-400);
|
|
--tblr-gray-500-fg: var(--tblr-gray-500);
|
|
--tblr-gray-600-fg: var(--tblr-gray-600);
|
|
--tblr-gray-700-fg: var(--tblr-gray-700);
|
|
--tblr-gray-800-fg: var(--tblr-gray-800);
|
|
--tblr-gray-900-fg: var(--tblr-gray-900);
|
|
--tblr-gray-950-fg: var(--tblr-gray-950);
|
|
/** Spacers */
|
|
--tblr-spacer-0: 0;
|
|
--tblr-spacer-1: 0.25rem;
|
|
--tblr-spacer-2: 0.5rem;
|
|
--tblr-spacer-3: 1rem;
|
|
--tblr-spacer-4: 1.5rem;
|
|
--tblr-spacer-5: 2rem;
|
|
--tblr-spacer-6: 2.5rem;
|
|
/** Font sizes */
|
|
--tblr-font-weight-light: 300;
|
|
--tblr-font-weight-normal: 400;
|
|
--tblr-font-weight-medium: 500;
|
|
--tblr-font-weight-semibold: 600;
|
|
--tblr-font-weight-bold: 700;
|
|
--tblr-font-weight-headings: var(--tblr-font-weight-semibold);
|
|
--tblr-font-size-h1: 1.5rem;
|
|
--tblr-font-size-h2: 1.25rem;
|
|
--tblr-font-size-h3: 1rem;
|
|
--tblr-font-size-h4: 0.875rem;
|
|
--tblr-font-size-h5: 0.75rem;
|
|
--tblr-font-size-h6: 0.625rem;
|
|
--tblr-line-height-h1: 2rem;
|
|
--tblr-line-height-h2: 1.75rem;
|
|
--tblr-line-height-h3: 1.5rem;
|
|
--tblr-line-height-h4: 1.25rem;
|
|
--tblr-line-height-h5: 1rem;
|
|
--tblr-line-height-h6: 1rem;
|
|
--tblr-line-height-base: 1.4285714286;
|
|
--tblr-line-height-sm: 1.1428571429;
|
|
--tblr-line-height-lg: 1.7142857143;
|
|
--tblr-line-height-xl: 2;
|
|
/** Shadows */
|
|
--tblr-shadow-color: light-dark(rgba(18, 18, 23, 0.4), #000);
|
|
--tblr-shadow: 0px 2px 4px -1px color-mix(in oklab, var(--tblr-shadow-color) 15%, transparent), 0px 4px 6px -1px color-mix(in oklab, var(--tblr-shadow-color) 20%, transparent);
|
|
--tblr-shadow-xs: 0 1px 2px 0 color-mix(in oklab, var(--tblr-shadow-color) 12.5%, transparent);
|
|
--tblr-shadow-sm: 0 1px 3px 0 color-mix(in oklab, var(--tblr-shadow-color) 25%, transparent), 0 1px 2px 0 color-mix(in oklab, var(--tblr-shadow-color) 15%, transparent);
|
|
--tblr-shadow-md: 0px 2px 4px -1px color-mix(in oklab, var(--tblr-shadow-color) 15%, transparent), 0px 4px 6px -1px color-mix(in oklab, var(--tblr-shadow-color) 20%, transparent);
|
|
--tblr-shadow-lg: 0px 4px 6px -2px color-mix(in oklab, var(--tblr-shadow-color) 12.5%, transparent), 0px 10px 15px -3px color-mix(in oklab, var(--tblr-shadow-color) 20%, transparent);
|
|
--tblr-shadow-xl: 0px 10px 10px -5px color-mix(in oklab, var(--tblr-shadow-color) 10%, transparent), 0px 20px 25px -5px color-mix(in oklab, var(--tblr-shadow-color) 25%, transparent);
|
|
--tblr-shadow-2xl: 0px 25px 50px -12px color-mix(in oklab, var(--tblr-shadow-color) 62.5%, transparent);
|
|
--tblr-shadow-overlay: 0px 2px 4px 0px color-mix(in oklab, var(--tblr-shadow-color) 10%, transparent), 0px 5px 8px 0px color-mix(in oklab, var(--tblr-shadow-color) 10%, transparent), 0px 10px 18px 0px color-mix(in oklab, var(--tblr-shadow-color) 7.5%, transparent), 0px 24px 48px 0px color-mix(in oklab, var(--tblr-shadow-color) 7.5%, transparent), 0px 0px 0px 1px color-mix(in oklab, var(--tblr-shadow-color) 25%, transparent);
|
|
--tblr-shadow-border: 0px 0px 0px 1px color-mix(in oklab, var(--tblr-shadow-color) 25%, transparent);
|
|
--tblr-shadow-transparent: 0 0 0 0 transparent;
|
|
--tblr-shadow-input: 0 1px 2px 0 color-mix(in oklab, var(--tblr-shadow-color) 12.5%, transparent);
|
|
--tblr-shadow-card: 0 1px 2px 0 color-mix(in oklab, var(--tblr-shadow-color) 12.5%, transparent);
|
|
--tblr-shadow-card-hover: 0px 4px 6px -2px color-mix(in oklab, var(--tblr-shadow-color) 12.5%, transparent), 0px 10px 15px -3px color-mix(in oklab, var(--tblr-shadow-color) 20%, transparent);
|
|
--tblr-shadow-dropdown: 0px 2px 4px 0px color-mix(in oklab, var(--tblr-shadow-color) 10%, transparent), 0px 5px 8px 0px color-mix(in oklab, var(--tblr-shadow-color) 10%, transparent), 0px 10px 18px 0px color-mix(in oklab, var(--tblr-shadow-color) 7.5%, transparent), 0px 24px 48px 0px color-mix(in oklab, var(--tblr-shadow-color) 7.5%, transparent), 0px 0px 0px 1px color-mix(in oklab, var(--tblr-shadow-color) 25%, transparent);
|
|
/** Border radiuses */
|
|
--tblr-border-radius-scale: 1;
|
|
--tblr-border-radius-0: calc(0 * var(--tblr-border-radius-scale, 1));
|
|
--tblr-border-radius-xs: calc(2px * var(--tblr-border-radius-scale, 1));
|
|
--tblr-border-radius-sm: calc(4px * var(--tblr-border-radius-scale, 1));
|
|
--tblr-border-radius-md: calc(6px * var(--tblr-border-radius-scale, 1));
|
|
--tblr-border-radius-lg: calc(8px * var(--tblr-border-radius-scale, 1));
|
|
--tblr-border-radius-pill: calc(100rem * var(--tblr-border-radius-scale, 1));
|
|
--tblr-border-radius: var(--tblr-border-radius-md);
|
|
/** Backdrops */
|
|
--tblr-backdrop-opacity: 0.32;
|
|
--tblr-backdrop-bg: var(--tblr-bg-surface-dark);
|
|
--tblr-backdrop-bg-dark: color-mix(in oklab, var(--tblr-dark) calc(var(--tblr-backdrop-opacity) * 100%), transparent);
|
|
--tblr-backdrop-bg-light: color-mix(in oklab, var(--tblr-light) calc(var(--tblr-backdrop-opacity) * 100%), transparent);
|
|
--tblr-backdrop-blur: 4px;
|
|
--tblr-backdrop-filter: blur(var(--tblr-backdrop-blur));
|
|
}
|
|
|
|
[dir=ltr] {
|
|
--tblr-dir: 1;
|
|
}
|
|
|
|
[dir=rtl] {
|
|
--tblr-dir: -1;
|
|
}
|
|
|
|
/*# sourceMappingURL=tabler-props.css.map */ |