ad29cf09e0
Separated from pelican-dev/plugins. Each theme includes preview images. Includes manifest.json for in-panel theme store with previews.
2652 lines
No EOL
72 KiB
CSS
2652 lines
No EOL
72 KiB
CSS
@import '../../../../vendor/filament/filament/resources/css/theme.css';
|
|
|
|
/*
|
|
https://github.com/caresome/filament-neobrutalism-theme/blob/main/resources/css/theme.css
|
|
by Ankit Thapa
|
|
under MIT License
|
|
*/
|
|
|
|
|
|
/* ============================================
|
|
Neo-Brutalism Theme
|
|
============================================ */
|
|
|
|
/* ============================================
|
|
CSS Custom Properties (Design Tokens)
|
|
============================================ */
|
|
|
|
:root {
|
|
/* Borders */
|
|
--neo-border-width: 2px;
|
|
--neo-border-width-thick: 3px;
|
|
|
|
/* Border Radius */
|
|
--neo-radius-sm: 0.375rem;
|
|
--neo-radius-md: 0.5rem;
|
|
--neo-radius-lg: 0.75rem;
|
|
--neo-radius-xl: 1rem;
|
|
|
|
/* Shadows - Offset values */
|
|
--neo-shadow-offset-sm: 2px;
|
|
--neo-shadow-offset-md: 3px;
|
|
--neo-shadow-offset-lg: 4px;
|
|
--neo-shadow-offset-xl: 6px;
|
|
|
|
/* Typography */
|
|
--neo-font-weight-bold: 700;
|
|
--neo-font-weight-extrabold: 800;
|
|
--neo-font-weight-black: 900;
|
|
--neo-letter-spacing-tight: -0.03em;
|
|
--neo-letter-spacing-normal: -0.025em;
|
|
--neo-letter-spacing-wide: 0.03em;
|
|
--neo-letter-spacing-wider: 0.05em;
|
|
|
|
/* Transitions */
|
|
--neo-transition-duration: 150ms;
|
|
--neo-transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
|
/* Transforms */
|
|
--neo-transform-offset-xs: 0.125rem;
|
|
--neo-transform-offset-sm: 0.25rem;
|
|
|
|
/* Spacing */
|
|
--neo-spacing-xs: 0.25rem;
|
|
--neo-spacing-sm: 0.5rem;
|
|
--neo-spacing-md: 0.75rem;
|
|
--neo-spacing-lg: 1rem;
|
|
--neo-spacing-xl: 1.5rem;
|
|
|
|
/* Opacity */
|
|
--neo-opacity-disabled: 0.7;
|
|
--neo-opacity-dragging: 0.6;
|
|
|
|
/* Effects */
|
|
--neo-blur: 4px;
|
|
--neo-blur-sm: 2px;
|
|
|
|
/* Typography */
|
|
--neo-font-weight-normal: 400;
|
|
--neo-font-weight-semibold: 600;
|
|
|
|
/* Animation */
|
|
--neo-animation-duration-loading: 2s;
|
|
|
|
/* Scale */
|
|
--neo-scale: 1;
|
|
|
|
/* Outline */
|
|
--neo-outline-width: 2px;
|
|
--neo-outline-offset: 2px;
|
|
}
|
|
|
|
/* ============================================
|
|
Typography Styles
|
|
============================================ */
|
|
|
|
/* Bold & Geometric Headings */
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6,
|
|
.fi-header-heading,
|
|
.fi-section-header-heading,
|
|
.fi-modal-heading,
|
|
.fi-slideover-heading {
|
|
font-weight: var(--neo-font-weight-black);
|
|
letter-spacing: var(--neo-letter-spacing-normal);
|
|
}
|
|
|
|
.fi-header-heading {
|
|
font-size: 1.875rem;
|
|
line-height: 2.25rem;
|
|
font-weight: var(--neo-font-weight-black);
|
|
letter-spacing: var(--neo-letter-spacing-tight);
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.fi-header-heading {
|
|
font-size: 2.25rem;
|
|
line-height: 2.5rem;
|
|
}
|
|
}
|
|
|
|
.fi-section-header-heading {
|
|
font-size: 1.25rem;
|
|
line-height: 1.75rem;
|
|
font-weight: var(--neo-font-weight-extrabold);
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.fi-section-header-heading {
|
|
font-size: 1.5rem;
|
|
line-height: 2rem;
|
|
}
|
|
}
|
|
|
|
/* Form Field Labels - Bold & Uppercase */
|
|
.fi-fo-field-wrp-label,
|
|
.fi-in-entry-label {
|
|
font-weight: var(--neo-font-weight-bold);
|
|
letter-spacing: var(--neo-letter-spacing-wider);
|
|
text-transform: uppercase;
|
|
font-size: 0.75rem;
|
|
line-height: 1rem;
|
|
}
|
|
|
|
/* Table Headers - Strong & Bold */
|
|
.fi-ta-header-heading,
|
|
.fi-ta-column-header-label {
|
|
font-weight: var(--neo-font-weight-extrabold);
|
|
letter-spacing: var(--neo-letter-spacing-wide);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
/* Modal & Slide-over Titles - Text size */
|
|
.fi-modal-heading,
|
|
.fi-slideover-heading {
|
|
font-size: 1.5rem;
|
|
line-height: 2rem;
|
|
}
|
|
|
|
/* Body Text - Normal Weight for Contrast */
|
|
p,
|
|
.fi-fo-field-wrp-hint,
|
|
.fi-section-description {
|
|
font-weight: var(--neo-font-weight-normal);
|
|
letter-spacing: 0em;
|
|
}
|
|
|
|
/* Ensure content stays above texture */
|
|
.fi-section:not(.fi-section-not-contained):not(.fi-aside),
|
|
.fi-tabs,
|
|
.fi-modal-window,
|
|
.fi-fieldset,
|
|
.fi-ta-ctn {
|
|
position: relative;
|
|
}
|
|
|
|
.fi-modal-window {
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* Diagonal Stripe Pattern for Disabled States */
|
|
.fi-btn.fi-disabled,
|
|
.fi-input-wrp.fi-disabled,
|
|
.fi-select.fi-disabled {
|
|
background-image: repeating-linear-gradient(
|
|
45deg,
|
|
transparent,
|
|
transparent 8px,
|
|
var(--gray-100) 8px,
|
|
var(--gray-200) 16px
|
|
) !important;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.dark .fi-btn.fi-disabled,
|
|
.dark .fi-input-wrp.fi-disabled,
|
|
.dark .fi-select.fi-disabled {
|
|
background-image: repeating-linear-gradient(
|
|
45deg,
|
|
transparent,
|
|
transparent 8px,
|
|
var(--gray-600) 8px,
|
|
var(--gray-700) 16px
|
|
) !important;
|
|
}
|
|
|
|
/* ============================================
|
|
Base & Body Styles
|
|
============================================ */
|
|
|
|
html {
|
|
font-size: calc(100% * var(--neo-scale, 1));
|
|
}
|
|
|
|
body,
|
|
.fi-body,
|
|
.fi-main {
|
|
background-color: var(--warning-50);
|
|
}
|
|
|
|
.dark body,
|
|
.dark .fi-body,
|
|
.dark .fi-main {
|
|
background-color: var(--gray-900);
|
|
}
|
|
|
|
.fi-main-content {
|
|
background-color: transparent;
|
|
}
|
|
|
|
/* ============================================
|
|
Neo-Brutalism Loading Animation
|
|
============================================ */
|
|
|
|
@keyframes neo-shimmer {
|
|
0% {
|
|
background-position: -200% center;
|
|
box-shadow: var(--neo-shadow-offset-md) var(--neo-shadow-offset-md) 0px
|
|
var(--gray-950);
|
|
}
|
|
50% {
|
|
background-position: 200% center;
|
|
box-shadow: var(--neo-shadow-offset-lg) var(--neo-shadow-offset-lg) 0px
|
|
var(--gray-950);
|
|
}
|
|
100% {
|
|
background-position: -200% center;
|
|
box-shadow: var(--neo-shadow-offset-md) var(--neo-shadow-offset-md) 0px
|
|
var(--gray-950);
|
|
}
|
|
}
|
|
|
|
@keyframes neo-shimmer-dark {
|
|
0% {
|
|
background-position: -200% center;
|
|
box-shadow: var(--neo-shadow-offset-md) var(--neo-shadow-offset-md) 0px
|
|
var(--gray-600);
|
|
}
|
|
50% {
|
|
background-position: 200% center;
|
|
box-shadow: var(--neo-shadow-offset-lg) var(--neo-shadow-offset-lg) 0px
|
|
var(--gray-600);
|
|
}
|
|
100% {
|
|
background-position: -200% center;
|
|
box-shadow: var(--neo-shadow-offset-md) var(--neo-shadow-offset-md) 0px
|
|
var(--gray-600);
|
|
}
|
|
}
|
|
|
|
.fi-loading-section,
|
|
.fi-section.fi-loading {
|
|
border-width: var(--neo-border-width);
|
|
border-style: solid;
|
|
border-color: var(--gray-950);
|
|
border-radius: var(--neo-radius-md);
|
|
position: relative;
|
|
overflow: hidden;
|
|
background: linear-gradient(
|
|
90deg,
|
|
var(--gray-200) 0%,
|
|
var(--gray-100) 20%,
|
|
var(--gray-200) 40%,
|
|
var(--gray-200) 100%
|
|
);
|
|
background-size: 200% 100%;
|
|
animation: neo-shimmer var(--neo-animation-duration-loading) ease-in-out infinite;
|
|
}
|
|
|
|
.dark .fi-loading-section,
|
|
.dark .fi-section.fi-loading {
|
|
border-color: var(--gray-600);
|
|
background: linear-gradient(
|
|
90deg,
|
|
var(--gray-800) 0%,
|
|
var(--gray-700) 20%,
|
|
var(--gray-800) 40%,
|
|
var(--gray-800) 100%
|
|
);
|
|
background-size: 200% 100%;
|
|
animation: neo-shimmer-dark var(--neo-animation-duration-loading) ease-in-out infinite;
|
|
}
|
|
|
|
/* Diagonal stripe pattern overlay */
|
|
.fi-loading-section::before,
|
|
.fi-section.fi-loading::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-image: repeating-linear-gradient(
|
|
45deg,
|
|
transparent,
|
|
transparent 10px,
|
|
rgba(0, 0, 0, 0.03) 10px,
|
|
rgba(0, 0, 0, 0.03) 20px
|
|
);
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
}
|
|
|
|
.dark .fi-loading-section::before,
|
|
.dark .fi-section.fi-loading::before {
|
|
background-image: repeating-linear-gradient(
|
|
45deg,
|
|
transparent,
|
|
transparent 10px,
|
|
rgba(255, 255, 255, 0.03) 10px,
|
|
rgba(255, 255, 255, 0.03) 20px
|
|
);
|
|
}
|
|
|
|
/* Widget Loading States */
|
|
.fi-wi-stats-overview-stat.fi-loading,
|
|
.fi-widget.fi-loading {
|
|
border-width: var(--neo-border-width);
|
|
border-style: solid;
|
|
border-color: var(--gray-950);
|
|
border-radius: var(--neo-radius-md);
|
|
position: relative;
|
|
overflow: hidden;
|
|
background: linear-gradient(
|
|
90deg,
|
|
var(--gray-200) 0%,
|
|
var(--gray-100) 20%,
|
|
var(--gray-200) 40%,
|
|
var(--gray-200) 100%
|
|
);
|
|
background-size: 200% 100%;
|
|
animation: neo-shimmer var(--neo-animation-duration-loading) ease-in-out infinite;
|
|
}
|
|
|
|
.dark .fi-wi-stats-overview-stat.fi-loading,
|
|
.dark .fi-widget.fi-loading {
|
|
border-color: var(--gray-600);
|
|
background: linear-gradient(
|
|
90deg,
|
|
var(--gray-800) 0%,
|
|
var(--gray-700) 20%,
|
|
var(--gray-800) 40%,
|
|
var(--gray-800) 100%
|
|
);
|
|
background-size: 200% 100%;
|
|
animation: neo-shimmer-dark var(--neo-animation-duration-loading) ease-in-out infinite;
|
|
}
|
|
|
|
.fi-wi-stats-overview-stat.fi-loading::before,
|
|
.fi-widget.fi-loading::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-image: repeating-linear-gradient(
|
|
45deg,
|
|
transparent,
|
|
transparent 10px,
|
|
rgba(0, 0, 0, 0.03) 10px,
|
|
rgba(0, 0, 0, 0.03) 20px
|
|
);
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
}
|
|
|
|
.dark .fi-wi-stats-overview-stat.fi-loading::before,
|
|
.dark .fi-widget.fi-loading::before {
|
|
background-image: repeating-linear-gradient(
|
|
45deg,
|
|
transparent,
|
|
transparent 10px,
|
|
rgba(255, 255, 255, 0.03) 10px,
|
|
rgba(255, 255, 255, 0.03) 20px
|
|
);
|
|
}
|
|
|
|
/* ============================================
|
|
Button Styles
|
|
============================================ */
|
|
|
|
.fi-btn {
|
|
border-width: var(--neo-border-width);
|
|
border-style: solid;
|
|
transition-property: all;
|
|
transition-duration: var(--neo-transition-duration);
|
|
transition-timing-function: var(--neo-transition-timing);
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.fi-btn-group {
|
|
gap: var(--neo-spacing-sm);
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Filled Buttons - No Color (Gray) */
|
|
.fi-btn:not(.fi-outlined):not(.fi-color) {
|
|
border-color: var(--gray-950);
|
|
box-shadow: var(--neo-shadow-offset-md) var(--neo-shadow-offset-md) 0px
|
|
var(--gray-950);
|
|
}
|
|
|
|
.dark .fi-btn:not(.fi-outlined):not(.fi-color) {
|
|
border-color: var(--gray-600);
|
|
box-shadow: var(--neo-shadow-offset-md) var(--neo-shadow-offset-md) 0px
|
|
var(--gray-600);
|
|
}
|
|
|
|
.fi-btn:not(.fi-outlined):not(.fi-color):hover:not(.fi-disabled):not(
|
|
.fi-processing
|
|
) {
|
|
transform: translateY(var(--neo-transform-offset-xs));
|
|
box-shadow: var(--neo-shadow-offset-sm) var(--neo-shadow-offset-sm) 0px
|
|
var(--gray-950);
|
|
}
|
|
|
|
.dark
|
|
.fi-btn:not(.fi-outlined):not(.fi-color):hover:not(.fi-disabled):not(
|
|
.fi-processing
|
|
) {
|
|
box-shadow: var(--neo-shadow-offset-sm) var(--neo-shadow-offset-sm) 0px
|
|
var(--gray-600);
|
|
}
|
|
|
|
.fi-btn:not(.fi-outlined):not(.fi-color):active:not(.fi-disabled):not(
|
|
.fi-processing
|
|
) {
|
|
transform: translateY(var(--neo-transform-offset-sm));
|
|
box-shadow: 0px 0px 0px var(--gray-950);
|
|
}
|
|
|
|
.dark
|
|
.fi-btn:not(.fi-outlined):not(.fi-color):active:not(.fi-disabled):not(
|
|
.fi-processing
|
|
) {
|
|
box-shadow: 0px 0px 0px var(--gray-600);
|
|
}
|
|
|
|
/* Filled Buttons - With Color */
|
|
.fi-btn:not(.fi-outlined).fi-color {
|
|
background-color: var(--color-600);
|
|
border-color: var(--color-700);
|
|
box-shadow: var(--neo-shadow-offset-md) var(--neo-shadow-offset-md) 0px
|
|
var(--color-700);
|
|
}
|
|
|
|
.fi-btn:not(.fi-outlined).fi-color,
|
|
.fi-btn:not(.fi-outlined).fi-color .fi-btn-label,
|
|
.fi-btn:not(.fi-outlined).fi-color .fi-icon {
|
|
color: white;
|
|
}
|
|
|
|
.fi-btn:not(.fi-outlined).fi-color:hover:not(.fi-disabled):not(.fi-processing) {
|
|
transform: translateY(var(--neo-transform-offset-xs));
|
|
box-shadow: var(--neo-shadow-offset-sm) var(--neo-shadow-offset-sm) 0px
|
|
var(--color-700);
|
|
}
|
|
|
|
.fi-btn:not(.fi-outlined).fi-color:active:not(.fi-disabled):not(
|
|
.fi-processing
|
|
) {
|
|
transform: translateY(var(--neo-transform-offset-sm));
|
|
box-shadow: 0px 0px 0px var(--color-700);
|
|
}
|
|
|
|
.dark .fi-btn:not(.fi-outlined).fi-color {
|
|
background-color: var(--color-500);
|
|
border-color: var(--color-400);
|
|
box-shadow: var(--neo-shadow-offset-md) var(--neo-shadow-offset-md) 0px
|
|
var(--color-400);
|
|
}
|
|
|
|
.dark
|
|
.fi-btn:not(.fi-outlined).fi-color:hover:not(.fi-disabled):not(
|
|
.fi-processing
|
|
) {
|
|
box-shadow: var(--neo-shadow-offset-sm) var(--neo-shadow-offset-sm) 0px
|
|
var(--color-400);
|
|
}
|
|
|
|
.dark
|
|
.fi-btn:not(.fi-outlined).fi-color:active:not(.fi-disabled):not(
|
|
.fi-processing
|
|
) {
|
|
box-shadow: 0px 0px 0px var(--color-400);
|
|
}
|
|
|
|
/* Outlined Buttons - No Color */
|
|
.fi-btn.fi-outlined:not(.fi-color) {
|
|
border-width: var(--neo-border-width);
|
|
border-color: var(--gray-950);
|
|
box-shadow: var(--neo-shadow-offset-md) var(--neo-shadow-offset-md) 0px
|
|
var(--gray-950);
|
|
}
|
|
|
|
.dark .fi-btn.fi-outlined:not(.fi-color) {
|
|
border-color: var(--gray-600);
|
|
box-shadow: var(--neo-shadow-offset-md) var(--neo-shadow-offset-md) 0px
|
|
var(--gray-600);
|
|
}
|
|
|
|
.fi-btn.fi-outlined:not(.fi-color):hover:not(.fi-disabled):not(.fi-processing) {
|
|
transform: translateY(var(--neo-transform-offset-xs));
|
|
box-shadow: var(--neo-shadow-offset-sm) var(--neo-shadow-offset-sm) 0px
|
|
var(--gray-950);
|
|
}
|
|
|
|
.dark
|
|
.fi-btn.fi-outlined:not(.fi-color):hover:not(.fi-disabled):not(
|
|
.fi-processing
|
|
) {
|
|
box-shadow: var(--neo-shadow-offset-sm) var(--neo-shadow-offset-sm) 0px
|
|
var(--gray-600);
|
|
}
|
|
|
|
.fi-btn.fi-outlined:not(.fi-color):active:not(.fi-disabled):not(
|
|
.fi-processing
|
|
) {
|
|
transform: translateY(var(--neo-transform-offset-sm));
|
|
box-shadow: 0px 0px 0px var(--gray-950);
|
|
}
|
|
|
|
.dark
|
|
.fi-btn.fi-outlined:not(.fi-color):active:not(.fi-disabled):not(
|
|
.fi-processing
|
|
) {
|
|
box-shadow: 0px 0px 0px var(--gray-600);
|
|
}
|
|
|
|
/* Outlined Buttons - With Color */
|
|
.fi-btn.fi-outlined.fi-color {
|
|
border-width: var(--neo-border-width);
|
|
border-color: var(--color-700);
|
|
box-shadow: var(--neo-shadow-offset-md) var(--neo-shadow-offset-md) 0px
|
|
var(--color-700);
|
|
}
|
|
|
|
.fi-btn.fi-outlined.fi-color:hover:not(.fi-disabled):not(.fi-processing) {
|
|
transform: translateY(var(--neo-transform-offset-xs));
|
|
box-shadow: var(--neo-shadow-offset-sm) var(--neo-shadow-offset-sm) 0px
|
|
var(--color-700);
|
|
}
|
|
|
|
.fi-btn.fi-outlined.fi-color:active:not(.fi-disabled):not(.fi-processing) {
|
|
transform: translateY(var(--neo-transform-offset-sm));
|
|
box-shadow: 0px 0px 0px var(--color-700);
|
|
}
|
|
|
|
.dark .fi-btn.fi-outlined.fi-color {
|
|
border-color: var(--color-400);
|
|
box-shadow: var(--neo-shadow-offset-md) var(--neo-shadow-offset-md) 0px
|
|
var(--color-400);
|
|
}
|
|
|
|
.dark .fi-btn.fi-outlined.fi-color:hover:not(.fi-disabled):not(.fi-processing) {
|
|
box-shadow: var(--neo-shadow-offset-sm) var(--neo-shadow-offset-sm) 0px
|
|
var(--color-400);
|
|
}
|
|
|
|
.dark
|
|
.fi-btn.fi-outlined.fi-color:active:not(.fi-disabled):not(.fi-processing) {
|
|
box-shadow: 0px 0px 0px var(--color-400);
|
|
}
|
|
|
|
/* Button Disabled & Processing States */
|
|
.fi-btn.fi-disabled,
|
|
.fi-btn.fi-processing {
|
|
transform: translateY(0);
|
|
opacity: var(--neo-opacity-disabled);
|
|
}
|
|
|
|
/* Button Focus States */
|
|
.fi-btn:focus-visible {
|
|
outline-width: var(--neo-outline-width);
|
|
outline-offset: var(--neo-outline-offset);
|
|
outline-color: var(--color-700, var(--gray-950));
|
|
}
|
|
|
|
.dark .fi-btn:focus-visible {
|
|
outline-color: var(--color-400, var(--gray-500));
|
|
}
|
|
|
|
/* ============================================
|
|
Section Styles
|
|
============================================ */
|
|
|
|
.fi-section:not(.fi-section-not-contained):not(.fi-aside) {
|
|
border-width: var(--neo-border-width);
|
|
border-style: solid;
|
|
border-color: var(--gray-950);
|
|
background-color: var(--primary-100);
|
|
box-shadow: var(--neo-shadow-offset-lg) var(--neo-shadow-offset-lg) 0px
|
|
var(--gray-950);
|
|
}
|
|
|
|
.dark .fi-section:not(.fi-section-not-contained):not(.fi-aside) {
|
|
border-color: var(--gray-600);
|
|
background-color: var(--gray-900);
|
|
box-shadow: var(--neo-shadow-offset-lg) var(--neo-shadow-offset-lg) 0px
|
|
var(--gray-600);
|
|
}
|
|
|
|
.fi-section > .fi-section-header {
|
|
border-bottom-width: var(--neo-border-width);
|
|
border-style: solid;
|
|
border-color: var(--gray-950);
|
|
}
|
|
|
|
.dark .fi-section > .fi-section-header {
|
|
border-color: var(--gray-600);
|
|
}
|
|
|
|
.fi-section > .fi-section-content-ctn > .fi-section-footer {
|
|
border-top-width: var(--neo-border-width);
|
|
border-style: solid;
|
|
border-color: var(--gray-950);
|
|
}
|
|
|
|
.dark .fi-section > .fi-section-content-ctn > .fi-section-footer {
|
|
border-color: var(--gray-600);
|
|
}
|
|
|
|
.fi-section.fi-divided > .fi-section-content-ctn > .fi-section-content > * {
|
|
border-bottom-width: var(--neo-border-width);
|
|
border-color: var(--gray-950);
|
|
}
|
|
|
|
.dark
|
|
.fi-section.fi-divided
|
|
> .fi-section-content-ctn
|
|
> .fi-section-content
|
|
> * {
|
|
border-color: var(--gray-600);
|
|
}
|
|
|
|
/* ============================================
|
|
Simple Page (Auth Pages)
|
|
============================================ */
|
|
|
|
.fi-simple-main {
|
|
background-color: transparent;
|
|
box-shadow: none;
|
|
border: none;
|
|
outline-width: 0;
|
|
--tw-ring-offset-shadow: 0 0 #0000;
|
|
--tw-ring-shadow: 0 0 #0000;
|
|
}
|
|
|
|
/* ============================================
|
|
Form Input Styles
|
|
============================================ */
|
|
|
|
.fi-input-wrp {
|
|
border-width: var(--neo-border-width);
|
|
border-style: solid;
|
|
border-color: var(--gray-950);
|
|
border-radius: var(--neo-radius-md);
|
|
transition-property: all;
|
|
transition-duration: var(--neo-transition-duration);
|
|
background-color: white;
|
|
box-shadow: var(--neo-shadow-offset-md) var(--neo-shadow-offset-md) 0px
|
|
var(--gray-950);
|
|
}
|
|
|
|
.dark .fi-input-wrp {
|
|
border-color: var(--gray-600);
|
|
background-color: var(--gray-800);
|
|
box-shadow: var(--neo-shadow-offset-md) var(--neo-shadow-offset-md) 0px
|
|
var(--gray-600);
|
|
}
|
|
|
|
.fi-input-wrp-prefix,
|
|
.fi-input-wrp-suffix,
|
|
.fi-fo-tags-input-tags-ctn,
|
|
.fi-fo-rich-editor-toolbar {
|
|
border-color: var(--gray-950);
|
|
}
|
|
|
|
.fi-fo-rich-editor-toolbar {
|
|
border-bottom-width: var(--neo-border-width);
|
|
}
|
|
|
|
.dark .fi-input-wrp-prefix,
|
|
.dark .fi-input-wrp-suffix,
|
|
.dark .fi-fo-tags-input-tags-ctn,
|
|
.dark .fi-fo-rich-editor-toolbar {
|
|
border-color: var(--gray-600);
|
|
}
|
|
|
|
.fi-input-wrp:not(.fi-disabled):not(:has(.fi-ac-action:focus)):focus-within {
|
|
border-color: var(--primary-700, var(--gray-950));
|
|
box-shadow: var(--neo-shadow-offset-md) var(--neo-shadow-offset-md) 0px
|
|
var(--primary-700, var(--gray-950));
|
|
}
|
|
|
|
.dark
|
|
.fi-input-wrp:not(.fi-disabled):not(
|
|
:has(.fi-ac-action:focus)
|
|
):focus-within {
|
|
border-color: var(--primary-400, var(--gray-500));
|
|
box-shadow: var(--neo-shadow-offset-md) var(--neo-shadow-offset-md) 0px
|
|
var(--primary-400, var(--gray-500));
|
|
}
|
|
|
|
.fi-input-wrp.fi-invalid {
|
|
border-color: var(--danger-600);
|
|
box-shadow: var(--neo-shadow-offset-md) var(--neo-shadow-offset-md) 0px
|
|
var(--danger-600);
|
|
}
|
|
|
|
.dark .fi-input-wrp.fi-invalid {
|
|
border-color: var(--danger-400);
|
|
box-shadow: var(--neo-shadow-offset-md) var(--neo-shadow-offset-md) 0px
|
|
var(--danger-400);
|
|
}
|
|
|
|
.fi-input-wrp:not(.fi-disabled):not(
|
|
:has(.fi-ac-action:focus)
|
|
).fi-invalid:focus-within {
|
|
border-color: var(--danger-600);
|
|
box-shadow: var(--neo-shadow-offset-md) var(--neo-shadow-offset-md) 0px
|
|
var(--danger-600);
|
|
}
|
|
|
|
.dark
|
|
.fi-input-wrp:not(.fi-disabled):not(
|
|
:has(.fi-ac-action:focus)
|
|
).fi-invalid:focus-within {
|
|
border-color: var(--danger-400);
|
|
box-shadow: var(--neo-shadow-offset-md) var(--neo-shadow-offset-md) 0px
|
|
var(--danger-400);
|
|
}
|
|
|
|
.fi-input-wrp.fi-disabled {
|
|
opacity: var(--neo-opacity-disabled);
|
|
box-shadow: var(--neo-shadow-offset-md) var(--neo-shadow-offset-md) 0px
|
|
var(--gray-400);
|
|
}
|
|
|
|
.dark .fi-input-wrp.fi-disabled {
|
|
box-shadow: var(--neo-shadow-offset-md) var(--neo-shadow-offset-md) 0px
|
|
var(--gray-600);
|
|
}
|
|
|
|
/* Checkbox Inputs */
|
|
input[type="checkbox"].fi-checkbox-input {
|
|
border-width: var(--neo-border-width);
|
|
border-style: solid;
|
|
border-color: var(--gray-950);
|
|
border-radius: var(--neo-radius-sm);
|
|
transition-property: all;
|
|
transition-duration: var(--neo-transition-duration);
|
|
box-shadow: var(--neo-shadow-offset-sm) var(--neo-shadow-offset-sm) 0px
|
|
var(--gray-950);
|
|
}
|
|
|
|
.dark input[type="checkbox"].fi-checkbox-input {
|
|
border-color: var(--gray-600);
|
|
box-shadow: var(--neo-shadow-offset-sm) var(--neo-shadow-offset-sm) 0px
|
|
var(--gray-600);
|
|
}
|
|
|
|
input[type="checkbox"].fi-checkbox-input:checked {
|
|
border-color: var(--primary-700);
|
|
box-shadow: var(--neo-shadow-offset-sm) var(--neo-shadow-offset-sm) 0px
|
|
var(--primary-700);
|
|
}
|
|
|
|
.dark input[type="checkbox"].fi-checkbox-input:checked {
|
|
border-color: var(--primary-400);
|
|
box-shadow: var(--neo-shadow-offset-sm) var(--neo-shadow-offset-sm) 0px
|
|
var(--primary-400);
|
|
}
|
|
|
|
input[type="checkbox"].fi-checkbox-input:focus {
|
|
outline-width: var(--neo-outline-width);
|
|
outline-offset: var(--neo-outline-offset);
|
|
outline-color: var(--primary-700);
|
|
}
|
|
|
|
.dark input[type="checkbox"].fi-checkbox-input:focus {
|
|
outline-color: var(--primary-400);
|
|
}
|
|
|
|
input[type="checkbox"].fi-checkbox-input.fi-invalid {
|
|
border-color: var(--danger-600);
|
|
box-shadow: var(--neo-shadow-offset-sm) var(--neo-shadow-offset-sm) 0px
|
|
var(--danger-600);
|
|
}
|
|
|
|
.dark input[type="checkbox"].fi-checkbox-input.fi-invalid {
|
|
border-color: var(--danger-400);
|
|
box-shadow: var(--neo-shadow-offset-sm) var(--neo-shadow-offset-sm) 0px
|
|
var(--danger-400);
|
|
}
|
|
|
|
/* Radio Button Inputs */
|
|
input[type="radio"].fi-radio-input {
|
|
border-width: var(--neo-border-width);
|
|
border-style: solid;
|
|
border-color: var(--gray-950);
|
|
transition-property: all;
|
|
transition-duration: var(--neo-transition-duration);
|
|
box-shadow: var(--neo-shadow-offset-sm) var(--neo-shadow-offset-sm) 0px
|
|
var(--gray-950);
|
|
}
|
|
|
|
.dark input[type="radio"].fi-radio-input {
|
|
border-color: var(--gray-600);
|
|
box-shadow: var(--neo-shadow-offset-sm) var(--neo-shadow-offset-sm) 0px
|
|
var(--gray-600);
|
|
}
|
|
|
|
input[type="radio"].fi-radio-input:checked {
|
|
border-color: var(--primary-700);
|
|
box-shadow: var(--neo-shadow-offset-sm) var(--neo-shadow-offset-sm) 0px
|
|
var(--primary-700);
|
|
}
|
|
|
|
.dark input[type="radio"].fi-radio-input:checked {
|
|
border-color: var(--primary-400);
|
|
box-shadow: var(--neo-shadow-offset-sm) var(--neo-shadow-offset-sm) 0px
|
|
var(--primary-400);
|
|
}
|
|
|
|
input[type="radio"].fi-radio-input:focus {
|
|
outline-width: var(--neo-outline-width);
|
|
outline-offset: var(--neo-outline-offset);
|
|
outline-color: var(--primary-700);
|
|
}
|
|
|
|
.dark input[type="radio"].fi-radio-input:focus {
|
|
outline-color: var(--primary-400);
|
|
}
|
|
|
|
input[type="radio"].fi-radio-input.fi-invalid {
|
|
border-color: var(--danger-600);
|
|
box-shadow: var(--neo-shadow-offset-sm) var(--neo-shadow-offset-sm) 0px
|
|
var(--danger-600);
|
|
}
|
|
|
|
.dark input[type="radio"].fi-radio-input.fi-invalid {
|
|
border-color: var(--danger-400);
|
|
box-shadow: var(--neo-shadow-offset-sm) var(--neo-shadow-offset-sm) 0px
|
|
var(--danger-400);
|
|
}
|
|
|
|
/* ============================================
|
|
Widget Styles
|
|
============================================ */
|
|
|
|
.fi-wi-stats-overview-stat {
|
|
border-width: var(--neo-border-width);
|
|
border-style: solid;
|
|
border-color: var(--gray-950);
|
|
border-radius: var(--neo-radius-md);
|
|
background-color: var(--primary-100);
|
|
box-shadow: var(--neo-shadow-offset-lg) var(--neo-shadow-offset-lg) 0px
|
|
var(--gray-950);
|
|
}
|
|
|
|
.dark .fi-wi-stats-overview-stat {
|
|
border-color: var(--gray-600);
|
|
background-color: var(--gray-800);
|
|
box-shadow: var(--neo-shadow-offset-lg) var(--neo-shadow-offset-lg) 0px
|
|
var(--gray-600);
|
|
}
|
|
|
|
.fi-wi-stats-overview-stat.fi-color {
|
|
border-color: var(--color-600);
|
|
box-shadow: var(--neo-shadow-offset-lg) var(--neo-shadow-offset-lg) 0px
|
|
var(--color-600);
|
|
background-color: var(--color-100);
|
|
}
|
|
|
|
.dark .fi-wi-stats-overview-stat.fi-color {
|
|
border-color: var(--color-400);
|
|
box-shadow: var(--neo-shadow-offset-lg) var(--neo-shadow-offset-lg) 0px
|
|
var(--color-400);
|
|
background-color: var(--gray-800);
|
|
}
|
|
|
|
.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-value,
|
|
.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-label,
|
|
.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-description {
|
|
color: var(--gray-950);
|
|
}
|
|
|
|
.dark .fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-value,
|
|
.dark .fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-label,
|
|
.dark .fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-description {
|
|
color: white;
|
|
}
|
|
|
|
.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-description * {
|
|
color: var(--gray-700);
|
|
}
|
|
|
|
.dark .fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-description * {
|
|
color: var(--gray-300);
|
|
}
|
|
|
|
/* ============================================
|
|
Modal Styles
|
|
============================================ */
|
|
|
|
.fi-modal > .fi-modal-close-overlay {
|
|
background-color: var(--gray-950);
|
|
backdrop-filter: blur(var(--neo-blur));
|
|
}
|
|
|
|
@supports (color: color-mix(in lab, red, red)) {
|
|
.fi-modal > .fi-modal-close-overlay {
|
|
background-color: color-mix(in oklab, var(--gray-950) 60%, transparent);
|
|
}
|
|
}
|
|
|
|
.dark .fi-modal > .fi-modal-close-overlay {
|
|
background-color: color-mix(in oklab, var(--gray-950) 80%, transparent);
|
|
}
|
|
|
|
.fi-modal > .fi-modal-window-ctn > .fi-modal-window {
|
|
border-width: var(--neo-border-width);
|
|
border-style: solid;
|
|
border-color: var(--gray-950);
|
|
border-radius: var(--neo-radius-md);
|
|
background-color: var(--warning-50);
|
|
box-shadow: var(--neo-shadow-offset-xl) var(--neo-shadow-offset-xl) 0px
|
|
var(--gray-950);
|
|
}
|
|
|
|
.dark .fi-modal > .fi-modal-window-ctn > .fi-modal-window {
|
|
border-color: var(--gray-600);
|
|
background-color: var(--gray-900);
|
|
box-shadow: var(--neo-shadow-offset-xl) var(--neo-shadow-offset-xl) 0px
|
|
var(--gray-600);
|
|
}
|
|
|
|
.fi-modal-header,
|
|
.fi-modal-content {
|
|
background-color: var(--warning-50);
|
|
border-bottom: 0px;
|
|
border-top-right-radius: var(--neo-radius-md);
|
|
border-top-left-radius: var(--neo-radius-md);
|
|
}
|
|
|
|
.dark .fi-modal-header,
|
|
.dark .fi-modal-content {
|
|
background-color: var(--gray-900);
|
|
}
|
|
|
|
.fi-modal-header.fi-sticky {
|
|
border-bottom-width: var(--neo-border-width);
|
|
border-style: solid;
|
|
border-color: var(--gray-950);
|
|
}
|
|
|
|
.dark .fi-modal-header.fi-sticky {
|
|
border-color: var(--gray-600);
|
|
}
|
|
|
|
.fi-modal-footer.fi-sticky {
|
|
border-top-width: var(--neo-border-width);
|
|
border-style: solid;
|
|
border-color: var(--gray-950);
|
|
}
|
|
|
|
.dark .fi-modal-footer.fi-sticky {
|
|
border-color: var(--gray-600);
|
|
}
|
|
|
|
.fi-modal-icon-bg {
|
|
border-width: var(--neo-border-width);
|
|
border-style: solid;
|
|
border-color: var(--gray-950);
|
|
border-radius: var(--neo-radius-sm);
|
|
box-shadow: var(--neo-shadow-offset-sm) var(--neo-shadow-offset-sm) 0px
|
|
var(--gray-950);
|
|
}
|
|
|
|
.dark .fi-modal-icon-bg {
|
|
border-color: var(--gray-600);
|
|
box-shadow: var(--neo-shadow-offset-sm) var(--neo-shadow-offset-sm) 0px
|
|
var(--gray-600);
|
|
}
|
|
|
|
.fi-modal-icon-bg.fi-color {
|
|
border-color: var(--color-600);
|
|
box-shadow: var(--neo-shadow-offset-sm) var(--neo-shadow-offset-sm) 0px
|
|
var(--color-600);
|
|
}
|
|
|
|
.dark .fi-modal-icon-bg.fi-color {
|
|
border-color: var(--color-400);
|
|
box-shadow: var(--neo-shadow-offset-sm) var(--neo-shadow-offset-sm) 0px
|
|
var(--color-400);
|
|
}
|
|
|
|
/* ============================================
|
|
Dropdown Styles
|
|
============================================ */
|
|
|
|
.fi-dropdown-panel {
|
|
border-width: var(--neo-border-width);
|
|
border-style: solid;
|
|
border-color: var(--gray-950);
|
|
border-radius: var(--neo-radius-md);
|
|
background-color: var(--gray-100);
|
|
box-shadow: var(--neo-shadow-offset-lg) var(--neo-shadow-offset-lg) 0px
|
|
var(--gray-950);
|
|
}
|
|
|
|
.dark .fi-dropdown-panel {
|
|
border-color: var(--gray-600);
|
|
background-color: var(--gray-900);
|
|
box-shadow: var(--neo-shadow-offset-lg) var(--neo-shadow-offset-lg) 0px
|
|
var(--gray-600);
|
|
}
|
|
|
|
.fi-dropdown-header {
|
|
border-bottom-width: var(--neo-border-width);
|
|
border-style: solid;
|
|
border-color: var(--gray-950);
|
|
}
|
|
|
|
.dark .fi-dropdown-header {
|
|
border-color: var(--gray-600);
|
|
}
|
|
|
|
.fi-dropdown-panel:not(.fi-dropdown-list) > :not(:last-child) {
|
|
border-bottom-width: var(--neo-border-width);
|
|
border-color: var(--gray-950);
|
|
}
|
|
|
|
.dark .fi-dropdown-panel:not(.fi-dropdown-list) > :not(:last-child) {
|
|
border-color: var(--gray-600);
|
|
}
|
|
|
|
.fi-dropdown-list-item:hover {
|
|
background-color: var(--primary-600);
|
|
}
|
|
|
|
.dark .fi-dropdown-list-item:hover {
|
|
background-color: var(--primary-500);
|
|
}
|
|
|
|
.fi-dropdown-list-item:hover .fi-dropdown-list-item-label,
|
|
.fi-dropdown-list-item:hover .fi-icon,
|
|
.fi-dropdown-list-item:hover * {
|
|
color: white;
|
|
}
|
|
|
|
.fi-dropdown-list-item.fi-selected,
|
|
.fi-dropdown-list-item.fi-active {
|
|
background-color: var(--primary-600);
|
|
}
|
|
|
|
.dark .fi-dropdown-list-item.fi-selected,
|
|
.dark .fi-dropdown-list-item.fi-active {
|
|
background-color: var(--primary-500);
|
|
}
|
|
|
|
.fi-dropdown-list-item.fi-selected .fi-dropdown-list-item-label,
|
|
.fi-dropdown-list-item.fi-selected .fi-icon,
|
|
.fi-dropdown-list-item.fi-selected *,
|
|
.fi-dropdown-list-item.fi-active .fi-dropdown-list-item-label,
|
|
.fi-dropdown-list-item.fi-active .fi-icon,
|
|
.fi-dropdown-list-item.fi-active * {
|
|
color: white;
|
|
}
|
|
|
|
/* Sign out button - Use danger color for destructive action */
|
|
form.fi-dropdown-list-item:hover,
|
|
form.fi-dropdown-list-item:focus-within {
|
|
background-color: var(--danger-600);
|
|
}
|
|
|
|
.dark form.fi-dropdown-list-item:hover,
|
|
.dark form.fi-dropdown-list-item:focus-within {
|
|
background-color: var(--danger-500);
|
|
}
|
|
|
|
form.fi-dropdown-list-item:hover .fi-dropdown-list-item-label,
|
|
form.fi-dropdown-list-item:hover .fi-icon,
|
|
form.fi-dropdown-list-item:hover *,
|
|
form.fi-dropdown-list-item:focus-within .fi-dropdown-list-item-label,
|
|
form.fi-dropdown-list-item:focus-within .fi-icon,
|
|
form.fi-dropdown-list-item:focus-within * {
|
|
color: white;
|
|
}
|
|
|
|
/* ============================================
|
|
Image Editor Modal
|
|
============================================ */
|
|
|
|
.fi-fo-file-upload-editor-overlay {
|
|
backdrop-filter: blur(var(--neo-blur));
|
|
}
|
|
|
|
.fi-fo-file-upload-editor-window {
|
|
border-width: var(--neo-border-width);
|
|
border-style: solid;
|
|
border-color: var(--gray-950);
|
|
border-radius: var(--neo-radius-md);
|
|
box-shadow: var(--neo-shadow-offset-xl) var(--neo-shadow-offset-xl) 0px
|
|
var(--gray-950);
|
|
}
|
|
|
|
.dark .fi-fo-file-upload-editor-window {
|
|
border-color: var(--gray-600);
|
|
box-shadow: var(--neo-shadow-offset-xl) var(--neo-shadow-offset-xl) 0px
|
|
var(--gray-600);
|
|
}
|
|
|
|
.fi-fo-file-upload-editor-control-panel-footer {
|
|
border-top-width: var(--neo-border-width);
|
|
border-style: solid;
|
|
border-color: var(--gray-950);
|
|
}
|
|
|
|
.dark .fi-fo-file-upload-editor-control-panel-footer {
|
|
border-color: var(--gray-600);
|
|
}
|
|
|
|
/* ============================================
|
|
Table Styles
|
|
============================================ */
|
|
|
|
.fi-ta-ctn {
|
|
border-width: var(--neo-border-width);
|
|
border-style: solid;
|
|
border-color: var(--gray-950);
|
|
border-radius: var(--neo-radius-md);
|
|
background-color: white;
|
|
box-shadow: var(--neo-shadow-offset-lg) var(--neo-shadow-offset-lg) 0px
|
|
var(--gray-950);
|
|
}
|
|
|
|
.dark .fi-ta-ctn {
|
|
border-color: var(--gray-600);
|
|
background-color: var(--gray-900);
|
|
box-shadow: var(--neo-shadow-offset-lg) var(--neo-shadow-offset-lg) 0px
|
|
var(--gray-600);
|
|
}
|
|
|
|
.fi-ta-header-toolbar {
|
|
border-bottom-width: var(--neo-border-width);
|
|
border-style: solid;
|
|
border-color: var(--gray-950);
|
|
}
|
|
|
|
.dark .fi-ta-header-toolbar {
|
|
border-color: var(--gray-600);
|
|
}
|
|
|
|
.fi-ta-header {
|
|
border-bottom-width: var(--neo-border-width);
|
|
border-color: var(--gray-600);
|
|
}
|
|
|
|
.fi-ta-header .fi-input-wrp {
|
|
border-width: var(--neo-border-width);
|
|
border-style: solid;
|
|
border-color: var(--gray-950);
|
|
box-shadow: var(--neo-shadow-offset-md) var(--neo-shadow-offset-md) 0px
|
|
var(--gray-950);
|
|
}
|
|
|
|
.dark .fi-ta-header .fi-input-wrp {
|
|
border-color: var(--gray-600);
|
|
box-shadow: var(--neo-shadow-offset-md) var(--neo-shadow-offset-md) 0px
|
|
var(--gray-600);
|
|
}
|
|
|
|
.fi-ta-header .fi-btn {
|
|
border-width: var(--neo-border-width);
|
|
border-style: solid;
|
|
}
|
|
|
|
.fi-ta-header .fi-badge {
|
|
border-width: var(--neo-border-width);
|
|
border-style: solid;
|
|
border-color: var(--gray-950);
|
|
border-radius: var(--neo-radius-sm);
|
|
box-shadow: var(--neo-shadow-offset-sm) var(--neo-shadow-offset-sm) 0px
|
|
var(--gray-950);
|
|
}
|
|
|
|
.dark .fi-ta-header .fi-badge {
|
|
border-color: var(--gray-600);
|
|
box-shadow: var(--neo-shadow-offset-sm) var(--neo-shadow-offset-sm) 0px
|
|
var(--gray-600);
|
|
}
|
|
|
|
.fi-ta-table > thead,
|
|
.fi-ta-content-header {
|
|
border-bottom-width: var(--neo-border-width);
|
|
border-style: solid;
|
|
border-color: var(--gray-950);
|
|
}
|
|
|
|
.dark .fi-ta-table > thead,
|
|
.dark .fi-ta-content-header {
|
|
border-color: var(--gray-600);
|
|
}
|
|
|
|
.fi-ta-table .fi-ta-table-head-groups-row {
|
|
border-bottom-width: var(--neo-border-width);
|
|
border-style: solid;
|
|
border-color: var(--gray-950);
|
|
}
|
|
|
|
.dark .fi-ta-table .fi-ta-table-head-groups-row {
|
|
border-color: var(--gray-600);
|
|
}
|
|
|
|
.fi-ta-table .fi-ta-table-head-groups-row .fi-ta-header-group-cell {
|
|
border-right-width: var(--neo-border-width);
|
|
border-left-width: var(--neo-border-width);
|
|
border-color: var(--gray-950);
|
|
}
|
|
|
|
.dark .fi-ta-table .fi-ta-table-head-groups-row .fi-ta-header-group-cell {
|
|
border-color: var(--gray-600);
|
|
}
|
|
|
|
.fi-ta-table .fi-ta-header-cell {
|
|
border-right-width: var(--neo-border-width);
|
|
border-color: var(--gray-950);
|
|
}
|
|
|
|
.dark .fi-ta-table .fi-ta-header-cell {
|
|
border-color: var(--gray-600);
|
|
}
|
|
|
|
.fi-ta-table > thead > tr > th {
|
|
font-weight: var(--neo-font-weight-bold);
|
|
}
|
|
|
|
.fi-ta-table > tbody > .fi-ta-row {
|
|
border-bottom-width: var(--neo-border-width);
|
|
border-style: solid;
|
|
border-color: var(--gray-950);
|
|
}
|
|
|
|
.fi-ta-content-ctn .fi-ta-content:not(.fi-ta-content-grid) {
|
|
background-color: var(--gray-950);
|
|
row-gap: var(--neo-border-width);
|
|
}
|
|
|
|
.dark .fi-ta-content-ctn .fi-ta-content:not(.fi-ta-content-grid) {
|
|
background-color: var(--gray-600);
|
|
}
|
|
|
|
.dark .fi-ta-table > tbody > .fi-ta-row {
|
|
border-color: var(--gray-600);
|
|
}
|
|
|
|
.fi-ta-table > tbody > .fi-ta-row:last-child {
|
|
border-bottom-width: 0;
|
|
}
|
|
|
|
.fi-ta-selection-indicator {
|
|
border-bottom-width: var(--neo-border-width);
|
|
border-color: var(--gray-950);
|
|
}
|
|
|
|
.dark .fi-ta-selection-indicator {
|
|
border-color: var(--gray-600);
|
|
}
|
|
|
|
.fi-ta-table > tfoot {
|
|
border-top-width: var(--neo-border-width);
|
|
border-style: solid;
|
|
border-color: var(--gray-950);
|
|
}
|
|
|
|
.dark .fi-ta-table > tfoot {
|
|
border-color: var(--gray-600);
|
|
}
|
|
|
|
.fi-ta-empty-state {
|
|
border-top-width: var(--neo-border-width);
|
|
border-style: solid;
|
|
border-color: var(--gray-950);
|
|
}
|
|
|
|
.dark .fi-ta-empty-state {
|
|
border-color: var(--gray-600);
|
|
}
|
|
|
|
.fi-ta-footer,
|
|
.fi-ta-pagination {
|
|
border-top-width: var(--neo-border-width);
|
|
border-style: solid;
|
|
border-color: var(--gray-950);
|
|
}
|
|
|
|
.dark .fi-ta-footer,
|
|
.dark .fi-ta-pagination {
|
|
border-color: var(--gray-600);
|
|
}
|
|
|
|
.fi-pagination {
|
|
border-top-width: var(--neo-border-width);
|
|
border-color: var(--gray-950);
|
|
}
|
|
|
|
.dark .fi-pagination {
|
|
border-color: var(--gray-600);
|
|
}
|
|
|
|
.fi-pagination-items {
|
|
border-width: 0;
|
|
background-color: transparent;
|
|
box-shadow: none;
|
|
gap: var(--neo-spacing-sm);
|
|
padding: 0;
|
|
}
|
|
|
|
.fi-pagination-item {
|
|
border-width: 0;
|
|
background-color: transparent;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.fi-pagination-item-btn {
|
|
border-width: var(--neo-border-width);
|
|
border-style: solid;
|
|
border-color: var(--gray-950);
|
|
border-radius: var(--neo-radius-sm);
|
|
transition-property: all;
|
|
transition-duration: var(--neo-transition-duration);
|
|
box-shadow: var(--neo-shadow-offset-sm) var(--neo-shadow-offset-sm) 0px
|
|
var(--gray-950);
|
|
}
|
|
|
|
.dark .fi-pagination-item-btn {
|
|
border-color: var(--gray-600);
|
|
box-shadow: var(--neo-shadow-offset-sm) var(--neo-shadow-offset-sm) 0px
|
|
var(--gray-600);
|
|
}
|
|
|
|
.fi-pagination-item.fi-active .fi-pagination-item-btn {
|
|
background-color: var(--primary-600);
|
|
border-color: var(--primary-700);
|
|
box-shadow: var(--neo-shadow-offset-sm) var(--neo-shadow-offset-sm) 0px
|
|
var(--primary-700);
|
|
}
|
|
|
|
.dark .fi-pagination-item.fi-active .fi-pagination-item-btn {
|
|
background-color: var(--primary-500);
|
|
border-color: var(--primary-400);
|
|
box-shadow: var(--neo-shadow-offset-sm) var(--neo-shadow-offset-sm) 0px
|
|
var(--primary-400);
|
|
}
|
|
|
|
.fi-pagination-item.fi-active .fi-pagination-item-btn,
|
|
.fi-pagination-item.fi-active .fi-pagination-item-btn .fi-pagination-item-label,
|
|
.fi-pagination-item.fi-active .fi-pagination-item-btn .fi-pagination-item-icon {
|
|
color: white;
|
|
}
|
|
|
|
.fi-pagination-item:not(.fi-active):not(.fi-disabled)
|
|
.fi-pagination-item-btn:hover {
|
|
transform: translateY(var(--neo-transform-offset-xs));
|
|
box-shadow: 1px 1px 0px var(--gray-950);
|
|
}
|
|
|
|
.dark
|
|
.fi-pagination-item:not(.fi-active):not(.fi-disabled)
|
|
.fi-pagination-item-btn:hover {
|
|
box-shadow: 1px 1px 0px var(--gray-600);
|
|
}
|
|
|
|
.fi-pagination-item.fi-disabled .fi-pagination-item-btn {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.fi-ta-pagination .fi-select,
|
|
.fi-ta-footer .fi-select {
|
|
border-width: var(--neo-border-width);
|
|
border-style: solid;
|
|
border-color: var(--gray-950);
|
|
border-radius: var(--neo-radius-sm);
|
|
box-shadow: var(--neo-shadow-offset-sm) var(--neo-shadow-offset-sm) 0px
|
|
var(--gray-950);
|
|
}
|
|
|
|
.dark .fi-ta-pagination .fi-select,
|
|
.dark .fi-ta-footer .fi-select {
|
|
border-color: var(--gray-600);
|
|
box-shadow: var(--neo-shadow-offset-sm) var(--neo-shadow-offset-sm) 0px
|
|
var(--gray-600);
|
|
}
|
|
|
|
/* ============================================
|
|
Badge Styles
|
|
============================================ */
|
|
|
|
.fi-badge {
|
|
border-width: var(--neo-border-width);
|
|
border-style: solid;
|
|
border-radius: var(--neo-radius-sm);
|
|
transition-property: all;
|
|
transition-duration: var(--neo-transition-duration);
|
|
box-shadow: var(--neo-shadow-offset-sm) var(--neo-shadow-offset-sm) 0px;
|
|
margin: 1.5px 0;
|
|
}
|
|
|
|
.fi-badge:not(.fi-color) {
|
|
border-color: var(--gray-950);
|
|
background-color: var(--primary-100);
|
|
box-shadow: var(--neo-shadow-offset-sm) var(--neo-shadow-offset-sm) 0px
|
|
var(--gray-950);
|
|
}
|
|
|
|
.dark .fi-badge:not(.fi-color) {
|
|
border-color: var(--gray-600);
|
|
background-color: var(--gray-700);
|
|
box-shadow: var(--neo-shadow-offset-sm) var(--neo-shadow-offset-sm) 0px
|
|
var(--gray-600);
|
|
}
|
|
|
|
.fi-ta-text-item {
|
|
padding: 0.125rem;
|
|
}
|
|
|
|
.fi-badge.fi-color {
|
|
border-color: var(--color-700);
|
|
box-shadow: var(--neo-shadow-offset-sm) var(--neo-shadow-offset-sm) 0px
|
|
var(--color-700);
|
|
background-color: var(--color-100);
|
|
}
|
|
|
|
.dark .fi-badge.fi-color {
|
|
border-color: var(--color-400);
|
|
box-shadow: var(--neo-shadow-offset-sm) var(--neo-shadow-offset-sm) 0px
|
|
var(--color-400);
|
|
background-color: var(--gray-700);
|
|
}
|
|
|
|
.fi-topbar-item-btn .fi-badge,
|
|
.fi-icon-btn .fi-badge {
|
|
border-width: 0;
|
|
box-shadow: none !important;
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
/* ============================================
|
|
Sidebar Styles
|
|
============================================ */
|
|
|
|
.fi-sidebar {
|
|
background-color: var(--warning-50);
|
|
border-top-right-radius: 1rem;
|
|
border-bottom-right-radius: 1rem;
|
|
}
|
|
|
|
.dark .fi-sidebar {
|
|
background-color: var(--gray-900);
|
|
}
|
|
|
|
.fi-sidebar-close-overlay {
|
|
backdrop-filter: blur(var(--neo-blur-sm));
|
|
}
|
|
|
|
.fi-sidebar-header {
|
|
border-bottom-width: var(--neo-border-width);
|
|
}
|
|
|
|
.dark .fi-sidebar-header {
|
|
border-color: var(--gray-900);
|
|
}
|
|
|
|
.fi-sidebar-item-btn > .fi-icon,
|
|
.fi-sidebar-item-btn > .fi-sidebar-item-label {
|
|
color: var(--gray-900);
|
|
}
|
|
|
|
.dark .fi-sidebar-item-btn > .fi-icon,
|
|
.dark .fi-sidebar-item-btn > .fi-sidebar-item-label {
|
|
color: var(--gray-100);
|
|
}
|
|
|
|
.fi-sidebar-item-btn {
|
|
border-radius: var(--neo-radius-sm);
|
|
border-width: var(--neo-border-width);
|
|
border-style: solid;
|
|
border-color: transparent;
|
|
transition-property: all;
|
|
transition-duration: var(--neo-transition-duration);
|
|
}
|
|
|
|
.fi-sidebar-item.fi-sidebar-item-has-url:not(.fi-active)
|
|
> .fi-sidebar-item-btn:hover,
|
|
.fi-sidebar-item.fi-sidebar-item-has-url:not(.fi-active)
|
|
> .fi-sidebar-item-btn:focus-visible {
|
|
background-color: var(--primary-600);
|
|
border-color: var(--primary-700);
|
|
box-shadow: var(--neo-shadow-offset-md) var(--neo-shadow-offset-md) 0px
|
|
var(--primary-700);
|
|
}
|
|
|
|
.dark
|
|
.fi-sidebar-item.fi-sidebar-item-has-url:not(.fi-active)
|
|
> .fi-sidebar-item-btn:hover,
|
|
.dark
|
|
.fi-sidebar-item.fi-sidebar-item-has-url:not(.fi-active)
|
|
> .fi-sidebar-item-btn:focus-visible {
|
|
background-color: var(--primary-500);
|
|
border-color: var(--primary-400);
|
|
box-shadow: var(--neo-shadow-offset-md) var(--neo-shadow-offset-md) 0px
|
|
var(--primary-400);
|
|
}
|
|
|
|
.fi-sidebar-item.fi-sidebar-item-has-url:not(.fi-active)
|
|
> .fi-sidebar-item-btn:hover
|
|
> .fi-icon,
|
|
.fi-sidebar-item.fi-sidebar-item-has-url:not(.fi-active)
|
|
> .fi-sidebar-item-btn:hover
|
|
> .fi-sidebar-item-label {
|
|
color: white;
|
|
}
|
|
|
|
.fi-sidebar-item-btn:focus-visible {
|
|
outline-width: var(--neo-outline-width);
|
|
outline-offset: var(--neo-outline-offset);
|
|
outline-color: var(--primary-700);
|
|
}
|
|
|
|
.dark .fi-sidebar-item-btn:focus-visible {
|
|
outline-color: var(--primary-400);
|
|
}
|
|
|
|
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
|
|
border-width: var(--neo-border-width);
|
|
background-color: var(--primary-600);
|
|
border-color: var(--primary-700);
|
|
box-shadow: var(--neo-shadow-offset-md) var(--neo-shadow-offset-md) 0px
|
|
var(--primary-700);
|
|
}
|
|
|
|
.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
|
|
background-color: var(--primary-500);
|
|
border-color: var(--primary-400);
|
|
box-shadow: var(--neo-shadow-offset-md) var(--neo-shadow-offset-md) 0px
|
|
var(--primary-400);
|
|
}
|
|
|
|
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon {
|
|
color: white;
|
|
}
|
|
|
|
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label {
|
|
color: white;
|
|
font-weight: var(--neo-font-weight-bold);
|
|
}
|
|
|
|
.fi-sidebar .fi-user-menu-trigger {
|
|
border-width: var(--neo-border-width);
|
|
border-style: solid;
|
|
border-color: var(--gray-700);
|
|
border-radius: var(--neo-radius-sm);
|
|
transition-property: all;
|
|
transition-duration: var(--neo-transition-duration);
|
|
background-color: rgba(255, 255, 255, 0.05);
|
|
box-shadow: var(--neo-shadow-offset-md) var(--neo-shadow-offset-md) 0px
|
|
var(--gray-700);
|
|
}
|
|
|
|
.dark .fi-sidebar .fi-user-menu-trigger {
|
|
border-color: var(--gray-600);
|
|
background-color: rgba(255, 255, 255, 0.03);
|
|
box-shadow: var(--neo-shadow-offset-md) var(--neo-shadow-offset-md) 0px
|
|
var(--gray-600);
|
|
}
|
|
|
|
.fi-sidebar .fi-user-menu-trigger:hover {
|
|
border-color: white;
|
|
transform: translateX(var(--neo-transform-offset-xs));
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
box-shadow: var(--neo-shadow-offset-md) var(--neo-shadow-offset-md) 0px
|
|
white;
|
|
}
|
|
|
|
.dark .fi-sidebar .fi-user-menu-trigger:hover {
|
|
border-color: var(--gray-400);
|
|
background-color: rgba(255, 255, 255, 0.08);
|
|
box-shadow: var(--neo-shadow-offset-md) var(--neo-shadow-offset-md) 0px
|
|
var(--gray-400);
|
|
}
|
|
|
|
.fi-sidebar .fi-user-menu .fi-dropdown-panel {
|
|
border-width: var(--neo-border-width);
|
|
border-style: solid;
|
|
border-color: var(--gray-700);
|
|
border-radius: var(--neo-radius-md);
|
|
background-color: var(--gray-900);
|
|
box-shadow: var(--neo-shadow-offset-md) var(--neo-shadow-offset-md) 0px
|
|
var(--gray-700);
|
|
}
|
|
|
|
.fi-sidebar .fi-user-menu .fi-dropdown-header,
|
|
.fi-sidebar .fi-user-menu .fi-dropdown-header-label,
|
|
.fi-sidebar .fi-user-menu .fi-dropdown-header * {
|
|
color: var(--gray-100);
|
|
font-weight: var(--neo-font-weight-bold);
|
|
}
|
|
|
|
.dark .fi-sidebar .fi-user-menu .fi-dropdown-header,
|
|
.dark .fi-sidebar .fi-user-menu .fi-dropdown-header-label,
|
|
.dark .fi-sidebar .fi-user-menu .fi-dropdown-header * {
|
|
color: white;
|
|
}
|
|
|
|
.fi-sidebar .fi-user-menu [role="tablist"] button,
|
|
.fi-sidebar .fi-user-menu [role="tablist"] button * {
|
|
color: var(--gray-400);
|
|
}
|
|
|
|
.fi-sidebar .fi-user-menu [role="tablist"] button[aria-selected="true"],
|
|
.fi-sidebar .fi-user-menu [role="tablist"] button[aria-selected="true"] * {
|
|
color: white;
|
|
}
|
|
|
|
.fi-sidebar .fi-user-menu .fi-dropdown-list-item .fi-dropdown-list-item-label,
|
|
.fi-sidebar .fi-user-menu .fi-dropdown-list-item .fi-icon {
|
|
color: white;
|
|
}
|
|
|
|
.fi-sidebar .fi-user-menu .fi-dropdown-list-item:hover {
|
|
background-color: var(--primary-600);
|
|
}
|
|
|
|
.dark .fi-sidebar .fi-user-menu .fi-dropdown-list-item:hover {
|
|
background-color: var(--primary-500);
|
|
}
|
|
|
|
.fi-sidebar
|
|
.fi-user-menu
|
|
.fi-dropdown-list-item:hover
|
|
.fi-dropdown-list-item-label,
|
|
.fi-sidebar .fi-user-menu .fi-dropdown-list-item:hover .fi-icon {
|
|
color: white;
|
|
}
|
|
|
|
/* ============================================
|
|
Topbar Styles
|
|
============================================ */
|
|
|
|
.fi-topbar {
|
|
background-color: var(--primary-600);
|
|
border-radius: var(--neo-radius-lg);
|
|
margin: 0.75rem;
|
|
margin-right: 1rem;
|
|
border-color: var(--primary-700);
|
|
box-shadow: var(--neo-shadow-offset-lg) var(--neo-shadow-offset-lg) 0px
|
|
var(--primary-700);
|
|
}
|
|
|
|
.dark .fi-topbar {
|
|
background-color: var(--primary-500);
|
|
border-color: var(--primary-400);
|
|
box-shadow: var(--neo-shadow-offset-lg) var(--neo-shadow-offset-lg) 0px
|
|
var(--primary-400);
|
|
}
|
|
|
|
.fi-topbar .fi-topbar-start .fi-icon,
|
|
.fi-topbar .fi-icon-btn {
|
|
color: white;
|
|
}
|
|
|
|
.fi-topbar-item-btn {
|
|
border-width: var(--neo-border-width);
|
|
border-style: solid;
|
|
border-color: transparent;
|
|
border-radius: var(--neo-radius-sm);
|
|
transition-property: all;
|
|
transition-duration: var(--neo-transition-duration);
|
|
}
|
|
|
|
.fi-topbar-item-btn:hover {
|
|
transform: translateY(calc(-1 * var(--neo-transform-offset-xs)));
|
|
background-color: var(--primary-700);
|
|
border-color: var(--primary-800);
|
|
box-shadow: var(--neo-shadow-offset-md) var(--neo-shadow-offset-md) 0px
|
|
var(--primary-800);
|
|
}
|
|
|
|
.dark .fi-topbar-item-btn:hover {
|
|
background-color: var(--primary-400);
|
|
border-color: var(--primary-300);
|
|
box-shadow: var(--neo-shadow-offset-md) var(--neo-shadow-offset-md) 0px
|
|
var(--primary-300);
|
|
}
|
|
|
|
.fi-topbar-item-btn:hover > .fi-icon,
|
|
.fi-topbar-item-btn:hover .fi-topbar-item-label {
|
|
color: white;
|
|
}
|
|
|
|
.fi-topbar-item.fi-active .fi-topbar-item-btn {
|
|
background-color: var(--primary-700);
|
|
border-color: var(--primary-800);
|
|
box-shadow: var(--neo-shadow-offset-md) var(--neo-shadow-offset-md) 0px
|
|
var(--primary-800);
|
|
}
|
|
|
|
.dark .fi-topbar-item.fi-active .fi-topbar-item-btn {
|
|
background-color: var(--primary-400);
|
|
border-color: var(--primary-300);
|
|
box-shadow: var(--neo-shadow-offset-md) var(--neo-shadow-offset-md) 0px
|
|
var(--primary-300);
|
|
}
|
|
|
|
.fi-topbar-item.fi-active .fi-topbar-item-btn > .fi-icon,
|
|
.fi-topbar-item.fi-active .fi-topbar-item-label {
|
|
color: white;
|
|
font-weight: var(--neo-font-weight-semibold);
|
|
}
|
|
|
|
/* ============================================
|
|
Global Search Styles
|
|
============================================ */
|
|
|
|
/* Global Search Input */
|
|
.fi-global-search-field .fi-input-wrapper {
|
|
border: var(--neo-border-width) solid var(--gray-950);
|
|
border-radius: var(--neo-radius-md);
|
|
background-color: white;
|
|
transition-property: all;
|
|
transition-timing-function: var(--neo-transition-timing);
|
|
transition-duration: var(--neo-transition-duration);
|
|
box-shadow: var(--neo-shadow-offset-sm) var(--neo-shadow-offset-sm) 0px
|
|
var(--gray-950);
|
|
}
|
|
|
|
.dark .fi-global-search-field .fi-input-wrapper {
|
|
border-color: var(--gray-600);
|
|
background-color: var(--gray-900);
|
|
box-shadow: var(--neo-shadow-offset-sm) var(--neo-shadow-offset-sm) 0px
|
|
var(--gray-600);
|
|
}
|
|
|
|
.fi-global-search-field .fi-input-wrapper:focus-within {
|
|
transform: translateY(calc(-1 * var(--neo-transform-offset-xs)));
|
|
box-shadow: var(--neo-shadow-offset-md) var(--neo-shadow-offset-md) 0px
|
|
var(--gray-950);
|
|
}
|
|
|
|
.dark .fi-global-search-field .fi-input-wrapper:focus-within {
|
|
box-shadow: var(--neo-shadow-offset-md) var(--neo-shadow-offset-md) 0px
|
|
var(--gray-600);
|
|
}
|
|
|
|
.fi-global-search-field .fi-input {
|
|
color: var(--gray-950);
|
|
}
|
|
|
|
.dark .fi-global-search-field .fi-input {
|
|
color: white;
|
|
}
|
|
|
|
.fi-global-search-field .fi-input::placeholder {
|
|
color: var(--gray-500);
|
|
}
|
|
|
|
.dark .fi-global-search-field .fi-input::placeholder {
|
|
color: var(--gray-400);
|
|
}
|
|
|
|
.fi-global-search-field .fi-icon {
|
|
color: var(--gray-600);
|
|
}
|
|
|
|
.dark .fi-global-search-field .fi-icon {
|
|
color: var(--gray-400);
|
|
}
|
|
|
|
/* Search Results Container */
|
|
.fi-global-search-results-ctn {
|
|
border: var(--neo-border-width) solid var(--gray-950);
|
|
border-radius: var(--neo-radius-lg);
|
|
box-shadow: var(--neo-shadow-offset-xl) var(--neo-shadow-offset-xl) 0px
|
|
var(--gray-950);
|
|
}
|
|
|
|
.dark .fi-global-search-results-ctn {
|
|
border-color: var(--gray-600);
|
|
box-shadow: var(--neo-shadow-offset-xl) var(--neo-shadow-offset-xl) 0px
|
|
var(--gray-600);
|
|
}
|
|
|
|
/* No results message */
|
|
.fi-global-search-no-results-message {
|
|
font-weight: var(--neo-font-weight-bold);
|
|
}
|
|
|
|
/* Result group dividers */
|
|
.fi-global-search-results > * + * {
|
|
border-top-width: var(--neo-border-width);
|
|
border-color: var(--gray-950);
|
|
}
|
|
|
|
.dark .fi-global-search-results > * + * {
|
|
border-color: var(--gray-600);
|
|
}
|
|
|
|
/* Group header */
|
|
.fi-global-search-result-group-header {
|
|
border-bottom: var(--neo-border-width) solid var(--gray-950);
|
|
background-color: var(--warning-50);
|
|
font-weight: var(--neo-font-weight-black);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.025em;
|
|
}
|
|
|
|
.dark .fi-global-search-result-group-header {
|
|
border-color: var(--gray-600);
|
|
background-color: var(--gray-800);
|
|
}
|
|
|
|
/* Result group results dividers */
|
|
.fi-global-search-result-group-results > * + * {
|
|
border-top-width: var(--neo-border-width);
|
|
border-color: var(--gray-200);
|
|
}
|
|
|
|
.dark .fi-global-search-result-group-results > * + * {
|
|
border-color: var(--gray-700);
|
|
}
|
|
|
|
/* Individual result item */
|
|
.fi-global-search-result:hover,
|
|
.fi-global-search-result:focus-within {
|
|
background-color: var(--primary-100);
|
|
}
|
|
|
|
.dark .fi-global-search-result:hover,
|
|
.dark .fi-global-search-result:focus-within {
|
|
background-color: color-mix(in srgb, var(--primary-950) 30%, transparent);
|
|
}
|
|
|
|
/* Result heading */
|
|
.fi-global-search-result-heading {
|
|
font-weight: var(--neo-font-weight-extrabold);
|
|
}
|
|
|
|
/* Result detail label */
|
|
.fi-global-search-result-detail-label {
|
|
font-weight: var(--neo-font-weight-bold);
|
|
}
|
|
|
|
/* ============================================
|
|
Fieldset Styles
|
|
============================================ */
|
|
|
|
.fi-fieldset {
|
|
border-width: var(--neo-border-width);
|
|
border-style: solid;
|
|
border-color: var(--gray-950);
|
|
border-radius: var(--neo-radius-md);
|
|
background-color: var(--success-100);
|
|
box-shadow: var(--neo-shadow-offset-lg) var(--neo-shadow-offset-lg) 0px
|
|
var(--gray-950);
|
|
}
|
|
|
|
.dark .fi-fieldset {
|
|
border-color: var(--gray-600);
|
|
background-color: var(--gray-800);
|
|
box-shadow: var(--neo-shadow-offset-lg) var(--neo-shadow-offset-lg) 0px
|
|
var(--gray-600);
|
|
}
|
|
|
|
.fi-fieldset-legend,
|
|
.fi-sc-fieldset-legend,
|
|
.fi-fo-fieldset-legend {
|
|
font-weight: var(--neo-font-weight-bold);
|
|
color: var(--gray-950);
|
|
}
|
|
|
|
.dark .fi-fieldset-legend,
|
|
.dark .fi-sc-fieldset-legend,
|
|
.dark .fi-fo-fieldset-legend {
|
|
color: white;
|
|
}
|
|
|
|
.fi-fieldset-description,
|
|
.fi-sc-fieldset-description,
|
|
.fi-fo-fieldset-description {
|
|
color: var(--gray-600);
|
|
}
|
|
|
|
.dark .fi-fieldset-description,
|
|
.dark .fi-sc-fieldset-description,
|
|
.dark .fi-fo-fieldset-description {
|
|
color: var(--gray-400);
|
|
}
|
|
|
|
/* ============================================
|
|
Select Dropdown Styles
|
|
============================================ */
|
|
|
|
.fi-select {
|
|
border-width: var(--neo-border-width);
|
|
border-style: solid;
|
|
border-color: var(--gray-950);
|
|
border-radius: var(--neo-radius-md);
|
|
transition-property: all;
|
|
transition-duration: var(--neo-transition-duration);
|
|
background-color: white;
|
|
box-shadow: var(--neo-shadow-offset-md) var(--neo-shadow-offset-md) 0px
|
|
var(--gray-950);
|
|
}
|
|
|
|
.dark .fi-select {
|
|
border-color: var(--gray-600);
|
|
background-color: var(--gray-800);
|
|
box-shadow: var(--neo-shadow-offset-md) var(--neo-shadow-offset-md) 0px
|
|
var(--gray-600);
|
|
}
|
|
|
|
.fi-select:focus-within {
|
|
border-color: var(--primary-700, var(--gray-950));
|
|
box-shadow: var(--neo-shadow-offset-md) var(--neo-shadow-offset-md) 0px
|
|
var(--primary-700, var(--gray-950));
|
|
}
|
|
|
|
.dark .fi-select:focus-within {
|
|
border-color: var(--primary-400, var(--gray-500));
|
|
box-shadow: var(--neo-shadow-offset-md) var(--neo-shadow-offset-md) 0px
|
|
var(--primary-400, var(--gray-500));
|
|
}
|
|
|
|
.fi-select.fi-invalid {
|
|
border-color: var(--danger-600);
|
|
box-shadow: var(--neo-shadow-offset-md) var(--neo-shadow-offset-md) 0px
|
|
var(--danger-600);
|
|
}
|
|
|
|
.dark .fi-select.fi-invalid {
|
|
border-color: var(--danger-400);
|
|
box-shadow: var(--neo-shadow-offset-md) var(--neo-shadow-offset-md) 0px
|
|
var(--danger-400);
|
|
}
|
|
|
|
.fi-select.fi-disabled {
|
|
opacity: var(--neo-opacity-disabled);
|
|
box-shadow: var(--neo-shadow-offset-md) var(--neo-shadow-offset-md) 0px
|
|
var(--gray-400);
|
|
}
|
|
|
|
.dark .fi-select.fi-disabled {
|
|
box-shadow: var(--neo-shadow-offset-md) var(--neo-shadow-offset-md) 0px
|
|
var(--gray-600);
|
|
}
|
|
|
|
/* ============================================
|
|
FilePond (File Upload) Styles
|
|
============================================ */
|
|
|
|
.filepond--root {
|
|
border-width: var(--neo-border-width);
|
|
border-style: solid;
|
|
border-color: var(--gray-950);
|
|
border-radius: var(--neo-radius-lg);
|
|
background-color: var(--gray-50);
|
|
transition-property: all;
|
|
transition-duration: var(--neo-transition-duration);
|
|
box-shadow: var(--neo-shadow-offset-lg) var(--neo-shadow-offset-lg) 0px
|
|
var(--gray-950);
|
|
}
|
|
|
|
.dark .filepond--root {
|
|
border-color: var(--gray-600);
|
|
background-color: var(--gray-900);
|
|
box-shadow: var(--neo-shadow-offset-lg) var(--neo-shadow-offset-lg) 0px
|
|
var(--gray-600);
|
|
}
|
|
|
|
.fi-fo-file-upload-editor-control-panel {
|
|
border-top-width: var(--neo-border-width);
|
|
border-style: solid;
|
|
border-color: var(--gray-950);
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.fi-fo-file-upload-editor-control-panel {
|
|
border-top-width: 0;
|
|
border-left-width: var(--neo-border-width);
|
|
}
|
|
}
|
|
|
|
.dark .fi-fo-file-upload-editor-control-panel {
|
|
border-color: var(--gray-600);
|
|
}
|
|
|
|
/* ============================================
|
|
Rich Editor Custom Block Styles
|
|
============================================ */
|
|
|
|
.fi-fo-rich-editor div[data-type="customBlock"] {
|
|
border-width: var(--neo-border-width);
|
|
border-style: solid;
|
|
border-color: var(--gray-950);
|
|
border-radius: var(--neo-radius-md);
|
|
background-color: var(--warning-50);
|
|
margin-top: 0.75rem;
|
|
margin-bottom: 0.75rem;
|
|
transition-property: all;
|
|
transition-duration: var(--neo-transition-duration);
|
|
box-shadow: var(--neo-shadow-offset-lg) var(--neo-shadow-offset-lg) 0px
|
|
var(--gray-950);
|
|
}
|
|
|
|
.dark .fi-fo-rich-editor div[data-type="customBlock"] {
|
|
border-color: var(--gray-600);
|
|
background-color: var(--gray-900);
|
|
box-shadow: var(--neo-shadow-offset-lg) var(--neo-shadow-offset-lg) 0px
|
|
var(--gray-600);
|
|
}
|
|
|
|
.fi-fo-rich-editor .fi-fo-rich-editor-custom-block-header {
|
|
border-bottom-width: var(--neo-border-width);
|
|
border-color: var(--gray-950);
|
|
}
|
|
|
|
.dark .fi-fo-rich-editor .fi-fo-rich-editor-custom-block-header {
|
|
border-color: var(--gray-600);
|
|
}
|
|
|
|
/* ============================================
|
|
Wizard Form Header Styles
|
|
============================================ */
|
|
|
|
.fi-sc-wizard-header {
|
|
border-width: var(--neo-border-width);
|
|
border-style: solid;
|
|
border-color: var(--gray-950);
|
|
background-color: var(--primary-100);
|
|
box-shadow: var(--neo-shadow-offset-lg) var(--neo-shadow-offset-lg) 0px
|
|
var(--gray-950);
|
|
}
|
|
|
|
.dark .fi-sc-wizard-header {
|
|
border-color: var(--gray-600);
|
|
background-color: var(--gray-900);
|
|
box-shadow: var(--neo-shadow-offset-lg) var(--neo-shadow-offset-lg) 0px
|
|
var(--gray-600);
|
|
}
|
|
|
|
/* ============================================
|
|
Tabs Styles
|
|
============================================ */
|
|
|
|
.fi-tabs {
|
|
border-width: var(--neo-border-width);
|
|
border-style: solid;
|
|
border-color: var(--gray-950);
|
|
border-radius: var(--neo-radius-md);
|
|
background-color: white;
|
|
box-shadow: var(--neo-shadow-offset-lg) var(--neo-shadow-offset-lg) 0px
|
|
var(--gray-950);
|
|
}
|
|
|
|
.dark .fi-tabs {
|
|
border-color: var(--gray-600);
|
|
background-color: var(--gray-900);
|
|
box-shadow: var(--neo-shadow-offset-lg) var(--neo-shadow-offset-lg) 0px
|
|
var(--gray-600);
|
|
}
|
|
|
|
.fi-tabs-nav,
|
|
.fi-ta-filters-above-content-ctn {
|
|
border-bottom-width: var(--neo-border-width);
|
|
border-style: solid;
|
|
border-color: var(--gray-950);
|
|
background-color: var(--gray-50);
|
|
}
|
|
|
|
.dark .fi-tabs-nav,
|
|
.dark .fi-ta-filters-above-content-ctn {
|
|
border-color: var(--gray-600);
|
|
background-color: var(--gray-800);
|
|
}
|
|
|
|
.fi-tabs-item {
|
|
border-width: var(--neo-border-width);
|
|
border-style: solid;
|
|
border-color: transparent;
|
|
border-radius: var(--neo-radius-sm);
|
|
transition-property: all;
|
|
transition-duration: var(--neo-transition-duration);
|
|
}
|
|
|
|
.fi-tabs-item:hover {
|
|
background-color: var(--gray-200);
|
|
border-color: var(--gray-400);
|
|
box-shadow: var(--neo-shadow-offset-sm) var(--neo-shadow-offset-sm) 0px
|
|
var(--gray-400);
|
|
}
|
|
|
|
.dark .fi-tabs-item:hover {
|
|
background-color: var(--gray-700);
|
|
border-color: var(--gray-600);
|
|
box-shadow: var(--neo-shadow-offset-sm) var(--neo-shadow-offset-sm) 0px
|
|
var(--gray-600);
|
|
}
|
|
|
|
.fi-tabs-item.fi-active {
|
|
color: white;
|
|
font-weight: var(--neo-font-weight-bold);
|
|
background-color: var(--primary-600);
|
|
border-color: var(--primary-700);
|
|
box-shadow: var(--neo-shadow-offset-md) var(--neo-shadow-offset-md) 0px
|
|
var(--primary-700);
|
|
}
|
|
|
|
.dark .fi-tabs-item.fi-active {
|
|
background-color: var(--primary-500);
|
|
border-color: var(--primary-400);
|
|
box-shadow: var(--neo-shadow-offset-md) var(--neo-shadow-offset-md) 0px
|
|
var(--primary-400);
|
|
}
|
|
|
|
.fi-tabs-item.fi-active .fi-tabs-item-label,
|
|
.fi-tabs-item.fi-active .fi-icon {
|
|
color: white;
|
|
}
|
|
|
|
/* ============================================
|
|
Info List Styles
|
|
============================================ */
|
|
|
|
.fi-in-list {
|
|
border-width: var(--neo-border-width);
|
|
border-style: solid;
|
|
border-color: var(--gray-950);
|
|
border-radius: var(--neo-radius-md);
|
|
background-color: var(--success-50);
|
|
box-shadow: var(--neo-shadow-offset-lg) var(--neo-shadow-offset-lg) 0px
|
|
var(--gray-950);
|
|
}
|
|
|
|
.dark .fi-in-list {
|
|
border-color: var(--gray-600);
|
|
background-color: var(--gray-800);
|
|
box-shadow: var(--neo-shadow-offset-lg) var(--neo-shadow-offset-lg) 0px
|
|
var(--gray-600);
|
|
}
|
|
|
|
.fi-in-list-item {
|
|
border-bottom-width: var(--neo-border-width);
|
|
border-style: solid;
|
|
border-color: var(--gray-950);
|
|
}
|
|
|
|
.dark .fi-in-list-item {
|
|
border-color: var(--gray-600);
|
|
}
|
|
|
|
.fi-in-list-item:last-child {
|
|
border-bottom-width: 0;
|
|
}
|
|
|
|
/* ============================================
|
|
Action Group Styles
|
|
============================================ */
|
|
|
|
.fi-ac-group {
|
|
gap: var(--neo-spacing-sm);
|
|
}
|
|
|
|
.fi-ac-group .fi-btn {
|
|
margin: 0;
|
|
}
|
|
|
|
/* ============================================
|
|
Toggle Buttons Form Component Styles
|
|
============================================ */
|
|
|
|
/* Unchecked toggle buttons - outlined/light style */
|
|
.fi-fo-toggle-buttons-input:not(:checked)
|
|
+ .fi-btn:not(.fi-outlined):not(.fi-color) {
|
|
background-color: transparent;
|
|
border-color: var(--gray-950);
|
|
box-shadow: var(--neo-shadow-offset-md) var(--neo-shadow-offset-md) 0px
|
|
var(--gray-950);
|
|
color: var(--gray-950);
|
|
}
|
|
|
|
.fi-fo-toggle-buttons-input:not(:checked)
|
|
+ .fi-btn:not(.fi-outlined):not(.fi-color)
|
|
.fi-btn-label,
|
|
.fi-fo-toggle-buttons-input:not(:checked)
|
|
+ .fi-btn:not(.fi-outlined):not(.fi-color)
|
|
.fi-icon {
|
|
color: var(--gray-950);
|
|
}
|
|
|
|
.dark
|
|
.fi-fo-toggle-buttons-input:not(:checked)
|
|
+ .fi-btn:not(.fi-outlined):not(.fi-color) {
|
|
background-color: transparent;
|
|
border-color: var(--gray-600);
|
|
box-shadow: var(--neo-shadow-offset-md) var(--neo-shadow-offset-md) 0px
|
|
var(--gray-600);
|
|
color: white;
|
|
}
|
|
|
|
.dark
|
|
.fi-fo-toggle-buttons-input:not(:checked)
|
|
+ .fi-btn:not(.fi-outlined):not(.fi-color)
|
|
.fi-btn-label,
|
|
.dark
|
|
.fi-fo-toggle-buttons-input:not(:checked)
|
|
+ .fi-btn:not(.fi-outlined):not(.fi-color)
|
|
.fi-icon {
|
|
color: white;
|
|
}
|
|
|
|
/* Checked toggle buttons - filled style */
|
|
.fi-fo-toggle-buttons-input:checked + .fi-btn:not(.fi-outlined):not(.fi-color) {
|
|
background-color: var(--gray-950);
|
|
border-color: var(--gray-950);
|
|
box-shadow: var(--neo-shadow-offset-md) var(--neo-shadow-offset-md) 0px
|
|
var(--gray-950);
|
|
color: white;
|
|
}
|
|
|
|
.fi-fo-toggle-buttons-input:checked
|
|
+ .fi-btn:not(.fi-outlined):not(.fi-color)
|
|
.fi-btn-label,
|
|
.fi-fo-toggle-buttons-input:checked
|
|
+ .fi-btn:not(.fi-outlined):not(.fi-color)
|
|
.fi-icon {
|
|
color: white;
|
|
}
|
|
|
|
.dark
|
|
.fi-fo-toggle-buttons-input:checked
|
|
+ .fi-btn:not(.fi-outlined):not(.fi-color) {
|
|
background-color: var(--gray-600);
|
|
border-color: var(--gray-600);
|
|
box-shadow: var(--neo-shadow-offset-md) var(--neo-shadow-offset-md) 0px
|
|
var(--gray-600);
|
|
color: white;
|
|
}
|
|
|
|
/* Hover states for unchecked toggle buttons */
|
|
.fi-fo-toggle-buttons-input:not(:checked)
|
|
+ .fi-btn:not(.fi-outlined):not(.fi-color):hover:not(.fi-disabled) {
|
|
transform: translateY(var(--neo-transform-offset-xs));
|
|
box-shadow: var(--neo-shadow-offset-sm) var(--neo-shadow-offset-sm) 0px
|
|
var(--gray-950);
|
|
}
|
|
|
|
.dark
|
|
.fi-fo-toggle-buttons-input:not(:checked)
|
|
+ .fi-btn:not(.fi-outlined):not(.fi-color):hover:not(.fi-disabled) {
|
|
box-shadow: var(--neo-shadow-offset-sm) var(--neo-shadow-offset-sm) 0px
|
|
var(--gray-600);
|
|
}
|
|
|
|
/* Hover states for checked toggle buttons */
|
|
.fi-fo-toggle-buttons-input:checked
|
|
+ .fi-btn:not(.fi-outlined):not(.fi-color):hover:not(.fi-disabled) {
|
|
transform: translateY(var(--neo-transform-offset-xs));
|
|
box-shadow: var(--neo-shadow-offset-sm) var(--neo-shadow-offset-sm) 0px
|
|
var(--gray-950);
|
|
}
|
|
|
|
.dark
|
|
.fi-fo-toggle-buttons-input:checked
|
|
+ .fi-btn:not(.fi-outlined):not(.fi-color):hover:not(.fi-disabled) {
|
|
box-shadow: var(--neo-shadow-offset-sm) var(--neo-shadow-offset-sm) 0px
|
|
var(--gray-600);
|
|
}
|
|
|
|
/* Colored toggle buttons - unchecked */
|
|
.fi-fo-toggle-buttons-input:not(:checked) + .fi-btn:not(.fi-outlined).fi-color {
|
|
background-color: transparent;
|
|
border-color: var(--color-700);
|
|
box-shadow: var(--neo-shadow-offset-md) var(--neo-shadow-offset-md) 0px
|
|
var(--color-700);
|
|
color: var(--color-700);
|
|
}
|
|
|
|
.fi-fo-toggle-buttons-input:not(:checked)
|
|
+ .fi-btn:not(.fi-outlined).fi-color
|
|
.fi-btn-label,
|
|
.fi-fo-toggle-buttons-input:not(:checked)
|
|
+ .fi-btn:not(.fi-outlined).fi-color
|
|
.fi-icon {
|
|
color: var(--color-700);
|
|
}
|
|
|
|
.dark
|
|
.fi-fo-toggle-buttons-input:not(:checked)
|
|
+ .fi-btn:not(.fi-outlined).fi-color {
|
|
background-color: transparent;
|
|
border-color: var(--color-400);
|
|
box-shadow: var(--neo-shadow-offset-md) var(--neo-shadow-offset-md) 0px
|
|
var(--color-400);
|
|
color: var(--color-400);
|
|
}
|
|
|
|
.dark
|
|
.fi-fo-toggle-buttons-input:not(:checked)
|
|
+ .fi-btn:not(.fi-outlined).fi-color
|
|
.fi-btn-label,
|
|
.dark
|
|
.fi-fo-toggle-buttons-input:not(:checked)
|
|
+ .fi-btn:not(.fi-outlined).fi-color
|
|
.fi-icon {
|
|
color: var(--color-400);
|
|
}
|
|
|
|
/* Colored toggle buttons - checked */
|
|
.fi-fo-toggle-buttons-input:checked + .fi-btn:not(.fi-outlined).fi-color {
|
|
background-color: var(--color-600);
|
|
border-color: var(--color-700);
|
|
box-shadow: var(--neo-shadow-offset-md) var(--neo-shadow-offset-md) 0px
|
|
var(--color-700);
|
|
color: white;
|
|
}
|
|
|
|
.fi-fo-toggle-buttons-input:checked
|
|
+ .fi-btn:not(.fi-outlined).fi-color
|
|
.fi-btn-label,
|
|
.fi-fo-toggle-buttons-input:checked
|
|
+ .fi-btn:not(.fi-outlined).fi-color
|
|
.fi-icon {
|
|
color: white;
|
|
}
|
|
|
|
.dark .fi-fo-toggle-buttons-input:checked + .fi-btn:not(.fi-outlined).fi-color {
|
|
background-color: var(--color-500);
|
|
border-color: var(--color-400);
|
|
box-shadow: var(--neo-shadow-offset-md) var(--neo-shadow-offset-md) 0px
|
|
var(--color-400);
|
|
color: white;
|
|
}
|
|
|
|
/* ============================================
|
|
Repeater Form Component Styles
|
|
============================================ */
|
|
|
|
/* ============================================
|
|
Standard/Grid Repeater
|
|
============================================ */
|
|
|
|
/* Repeater Container */
|
|
.fi-fo-repeater {
|
|
display: grid;
|
|
row-gap: var(--neo-spacing-lg);
|
|
}
|
|
|
|
/* Repeater Items Container */
|
|
.fi-fo-repeater .fi-fo-repeater-items {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--neo-spacing-lg);
|
|
}
|
|
|
|
/* Individual Repeater Item */
|
|
.fi-fo-repeater .fi-fo-repeater-item {
|
|
border-width: var(--neo-border-width);
|
|
border-style: solid;
|
|
border-color: var(--gray-950);
|
|
border-radius: var(--neo-radius-md);
|
|
background-color: white;
|
|
box-shadow: var(--neo-shadow-offset-lg) var(--neo-shadow-offset-lg) 0px
|
|
var(--gray-950);
|
|
overflow: hidden;
|
|
transition: all var(--neo-transition-duration) var(--neo-transition-timing);
|
|
}
|
|
|
|
.dark .fi-fo-repeater .fi-fo-repeater-item {
|
|
border-color: var(--gray-600);
|
|
background-color: var(--gray-800);
|
|
box-shadow: var(--neo-shadow-offset-lg) var(--neo-shadow-offset-lg) 0px
|
|
var(--gray-600);
|
|
}
|
|
|
|
/* Dragging state - reduce visual emphasis */
|
|
.fi-fo-repeater .fi-fo-repeater-item.sortable-chosen,
|
|
.fi-fo-repeater .fi-fo-repeater-item.sortable-drag {
|
|
opacity: var(--neo-opacity-dragging);
|
|
}
|
|
|
|
/* Repeater Item Header */
|
|
.fi-fo-repeater .fi-fo-repeater-item-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--neo-spacing-md);
|
|
padding: 1rem;
|
|
border-bottom: var(--neo-border-width) solid var(--gray-950);
|
|
}
|
|
|
|
.dark .fi-fo-repeater .fi-fo-repeater-item-header {
|
|
border-bottom-color: var(--gray-600);
|
|
}
|
|
|
|
/* Remove border when collapsed */
|
|
.fi-fo-repeater .fi-fo-repeater-item.fi-collapsed .fi-fo-repeater-item-header {
|
|
border-bottom: none;
|
|
}
|
|
|
|
/* Collapsible Header - make it interactive */
|
|
.fi-fo-repeater.fi-fo-repeater-collapsible .fi-fo-repeater-item-header {
|
|
cursor: pointer;
|
|
user-select: none;
|
|
transition: background-color var(--neo-transition-duration) var(--neo-transition-timing);
|
|
}
|
|
|
|
.fi-fo-repeater.fi-fo-repeater-collapsible .fi-fo-repeater-item-header:hover {
|
|
background-color: var(--gray-100);
|
|
}
|
|
|
|
.dark
|
|
.fi-fo-repeater.fi-fo-repeater-collapsible
|
|
.fi-fo-repeater-item-header:hover {
|
|
background-color: var(--gray-700);
|
|
}
|
|
|
|
/* Header Label */
|
|
.fi-fo-repeater .fi-fo-repeater-item-header-label {
|
|
font-size: 0.875rem;
|
|
line-height: 1.25rem;
|
|
font-weight: var(--neo-font-weight-bold);
|
|
color: var(--gray-950);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.dark .fi-fo-repeater .fi-fo-repeater-item-header-label {
|
|
color: white;
|
|
}
|
|
|
|
/* Repeater Item Content */
|
|
.fi-fo-repeater .fi-fo-repeater-item-content {
|
|
padding: 1rem;
|
|
}
|
|
|
|
/* Repeater Actions (Add buttons) */
|
|
.fi-fo-repeater .fi-fo-repeater-actions {
|
|
display: flex;
|
|
gap: var(--neo-spacing-md);
|
|
}
|
|
|
|
/* ============================================
|
|
Simple Repeater
|
|
============================================ */
|
|
|
|
.fi-fo-simple-repeater {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--neo-spacing-lg);
|
|
}
|
|
|
|
.fi-fo-simple-repeater .fi-fo-simple-repeater-item {
|
|
border-width: var(--neo-border-width);
|
|
border-style: solid;
|
|
border-color: var(--gray-950);
|
|
border-radius: var(--neo-radius-md);
|
|
background-color: white;
|
|
box-shadow: var(--neo-shadow-offset-lg) var(--neo-shadow-offset-lg) 0px
|
|
var(--gray-950);
|
|
padding: 1rem;
|
|
}
|
|
|
|
.dark .fi-fo-simple-repeater .fi-fo-simple-repeater-item {
|
|
border-color: var(--gray-600);
|
|
background-color: var(--gray-800);
|
|
box-shadow: var(--neo-shadow-offset-lg) var(--neo-shadow-offset-lg) 0px
|
|
var(--gray-600);
|
|
}
|
|
|
|
/* ============================================
|
|
Table Repeater (Responsive)
|
|
============================================ */
|
|
|
|
/* Table Container */
|
|
.fi-fo-table-repeater {
|
|
border-width: var(--neo-border-width);
|
|
border-style: solid;
|
|
border-color: var(--gray-950);
|
|
border-radius: var(--neo-radius-md);
|
|
background-color: white;
|
|
box-shadow: var(--neo-shadow-offset-lg) var(--neo-shadow-offset-lg) 0px
|
|
var(--gray-950);
|
|
overflow: hidden;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.dark .fi-fo-table-repeater {
|
|
border-color: var(--gray-600);
|
|
background-color: var(--gray-900);
|
|
box-shadow: var(--neo-shadow-offset-lg) var(--neo-shadow-offset-lg) 0px
|
|
var(--gray-600);
|
|
}
|
|
|
|
/* Table Element */
|
|
.fi-fo-table-repeater > table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
/* Table Header */
|
|
.fi-fo-table-repeater > table > thead {
|
|
background-color: var(--gray-100);
|
|
border-bottom: var(--neo-border-width) solid var(--gray-950);
|
|
}
|
|
|
|
.dark .fi-fo-table-repeater > table > thead {
|
|
background-color: var(--gray-800);
|
|
border-bottom-color: var(--gray-600);
|
|
}
|
|
|
|
.fi-fo-table-repeater > table > tbody {
|
|
background-color: var(--gray-100);
|
|
border-bottom: var(--neo-border-width) solid var(--gray-950);
|
|
}
|
|
|
|
.dark .fi-fo-table-repeater > table > tbody {
|
|
background-color: var(--gray-800);
|
|
border-bottom-color: var(--gray-600);
|
|
}
|
|
|
|
.fi-fo-table-repeater {
|
|
& > table {
|
|
& > thead {
|
|
& > tr {
|
|
& > th {
|
|
&:not(:last-of-type) {
|
|
border-color: var(--gray-950);
|
|
border-inline-end-width: var(--neo-border-width);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
& > tbody {
|
|
:where(& > :not(:last-child)) {
|
|
border-color: var(--gray-950);
|
|
border-bottom-width: var(--neo-border-width);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.dark .fi-fo-table-repeater {
|
|
& > table {
|
|
& > thead {
|
|
& > tr {
|
|
& > th {
|
|
&:not(:last-of-type) {
|
|
border-color: var(--gray-600);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
& > tbody {
|
|
:where(& > :not(:last-child)) {
|
|
border-color: var(--gray-600);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
Topbar Logo Styles
|
|
============================================ */
|
|
|
|
.fi-topbar .fi-logo svg {
|
|
fill: var(--gray-100);
|
|
}
|
|
|
|
.fi-topbar .fi-logo {
|
|
color: var(--gray-100);
|
|
}
|
|
|
|
.fi-topbar .fi-topbar-item-btn .fi-topbar-item-label {
|
|
color: var(--gray-100);
|
|
}
|
|
|
|
/* ============================================
|
|
Toggle (Switch) Styles
|
|
============================================ */
|
|
|
|
/* Toggle Container */
|
|
.fi-toggle {
|
|
border-width: var(--neo-border-width);
|
|
border-style: solid;
|
|
border-color: var(--gray-950);
|
|
box-shadow: var(--neo-shadow-offset-sm) var(--neo-shadow-offset-sm) 0px
|
|
var(--gray-950);
|
|
transition: all var(--neo-transition-duration) var(--neo-transition-timing);
|
|
}
|
|
|
|
.dark .fi-toggle {
|
|
border-color: var(--gray-600);
|
|
box-shadow: var(--neo-shadow-offset-sm) var(--neo-shadow-offset-sm) 0px
|
|
var(--gray-600);
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
Notification Styles
|
|
============================================ */
|
|
|
|
.fi-no-notification-unread-ctn {
|
|
margin: 0.3rem;
|
|
border-radius: var(--neo-radius-md);
|
|
|
|
.fi-no-notification {
|
|
border-top-right-radius: var(--neo-radius-md);
|
|
border-bottom-right-radius: var(--neo-radius-md);
|
|
}
|
|
}
|
|
|
|
.fi-no-notification {
|
|
border-width: var(--neo-border-width);
|
|
border-style: solid;
|
|
border-color: var(--gray-950);
|
|
box-shadow: var(--neo-shadow-offset-md) var(--neo-shadow-offset-md) 0px
|
|
var(--gray-950);
|
|
transition: all var(--neo-transition-duration) var(--neo-transition-timing);
|
|
}
|
|
|
|
.dark .fi-no-notification {
|
|
border-color: var(--gray-600);
|
|
box-shadow: var(--neo-shadow-offset-md) var(--neo-shadow-offset-md) 0px
|
|
var(--gray-600);
|
|
} |