mirror of
https://github.com/filamentphp/filament.git
synced 2026-09-24 15:42:09 +08:00
86 lines
3.2 KiB
CSS
86 lines
3.2 KiB
CSS
@layer base {
|
|
:root {
|
|
--f-primary-100: theme('colors.lightBlue.100');
|
|
--f-primary-200: theme('colors.lightBlue.200');
|
|
--f-primary-300: theme('colors.lightBlue.300');
|
|
--f-primary-400: theme('colors.lightBlue.400');
|
|
--f-primary-500: theme('colors.lightBlue.500');
|
|
--f-primary-600: theme('colors.lightBlue.600');
|
|
--f-primary-700: theme('colors.lightBlue.700');
|
|
--f-primary-800: theme('colors.lightBlue.800');
|
|
--f-primary-900: theme('colors.lightBlue.900');
|
|
--f-success-100: theme('colors.emerald.100');
|
|
--f-success-200: theme('colors.emerald.200');
|
|
--f-success-300: theme('colors.emerald.300');
|
|
--f-success-400: theme('colors.emerald.400');
|
|
--f-success-500: theme('colors.emerald.500');
|
|
--f-success-600: theme('colors.emerald.600');
|
|
--f-success-700: theme('colors.emerald.700');
|
|
--f-success-800: theme('colors.emerald.800');
|
|
--f-success-900: theme('colors.emerald.900');
|
|
--f-danger-100: theme('colors.rose.100');
|
|
--f-danger-200: theme('colors.rose.200');
|
|
--f-danger-300: theme('colors.rose.300');
|
|
--f-danger-400: theme('colors.rose.400');
|
|
--f-danger-500: theme('colors.rose.500');
|
|
--f-danger-600: theme('colors.rose.600');
|
|
--f-danger-700: theme('colors.rose.700');
|
|
--f-danger-800: theme('colors.rose.800');
|
|
--f-danger-900: theme('colors.rose.900');
|
|
--f-gray-100: theme('colors.coolGray.100');
|
|
--f-gray-200: theme('colors.coolGray.200');
|
|
--f-gray-300: theme('colors.coolGray.300');
|
|
--f-gray-400: theme('colors.coolGray.400');
|
|
--f-gray-500: theme('colors.coolGray.500');
|
|
--f-gray-600: theme('colors.coolGray.600');
|
|
--f-gray-700: theme('colors.coolGray.700');
|
|
--f-gray-800: theme('colors.coolGray.800');
|
|
--f-gray-900: theme('colors.coolGray.900');
|
|
--f-blue-100: theme('colors.defaultBlue.100');
|
|
--f-blue-200: theme('colors.defaultBlue.200');
|
|
--f-blue-300: theme('colors.defaultBlue.300');
|
|
--f-blue-400: theme('colors.defaultBlue.400');
|
|
--f-blue-500: theme('colors.defaultBlue.500');
|
|
--f-blue-600: theme('colors.defaultBlue.600');
|
|
--f-blue-700: theme('colors.defaultBlue.700');
|
|
--f-blue-800: theme('colors.defaultBlue.800');
|
|
--f-blue-900: theme('colors.defaultBlue.900');
|
|
--f-white: theme('colors.defaultWhite');
|
|
}
|
|
|
|
/**
|
|
* Smoothly animate the scroll position, instead of a straight jump.
|
|
*/
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
/**
|
|
* ::selection selector: color, background, cursor, and outline.
|
|
*/
|
|
::selection {
|
|
@apply bg-primary-600 text-white;
|
|
}
|
|
|
|
/**
|
|
* `x-cloak` attributes are removed from elements when Alpine initializes.
|
|
* This is useful for hiding pre-initialized DOM.
|
|
*
|
|
* @link https://github.com/alpinejs/alpine#x-cloak
|
|
*
|
|
*/
|
|
[x-cloak] {
|
|
@apply hidden;
|
|
}
|
|
|
|
/**
|
|
* Selectively disable the default focus style by selecting for the case when the polyfill
|
|
* is loaded and [data-focus-visible-added] attribute is not applied to the element:
|
|
*
|
|
* @link https://github.com/WICG/focus-visible#2-update-your-css
|
|
*/
|
|
.js-focus-visible :focus:not([data-focus-visible-added]) {
|
|
@apply outline-none;
|
|
}
|
|
}
|