ad29cf09e0
Separated from pelican-dev/plugins. Each theme includes preview images. Includes manifest.json for in-panel theme store with previews.
364 lines
No EOL
8.6 KiB
CSS
364 lines
No EOL
8.6 KiB
CSS
/*
|
|
https://github.com/andreia/filament-nord-theme/blob/2.x/resources/css/theme.css
|
|
by Andréia Bohner
|
|
under MIT License
|
|
*/
|
|
|
|
|
|
@import '../../../../vendor/filament/filament/resources/css/theme.css';
|
|
|
|
@theme {
|
|
--color-secondary-50: rgba(var(--secondary-50), <alpha-value>);
|
|
--color-secondary-100: rgba(var(--secondary-100), <alpha-value>);
|
|
--color-secondary-200: rgba(var(--secondary-200), <alpha-value>);
|
|
--color-secondary-300: rgba(var(--secondary-300), <alpha-value>);
|
|
--color-secondary-400: rgba(var(--secondary-400), <alpha-value>);
|
|
--color-secondary-500: rgba(var(--secondary-500), <alpha-value>);
|
|
--color-secondary-600: rgba(var(--secondary-600), <alpha-value>);
|
|
--color-secondary-700: rgba(var(--secondary-700), <alpha-value>);
|
|
--color-secondary-800: rgba(var(--secondary-800), <alpha-value>);
|
|
--color-secondary-900: rgba(var(--secondary-900), <alpha-value>);
|
|
--color-secondary-950: rgba(var(--secondary-950), <alpha-value>);
|
|
|
|
--color-polarnight-50: #e5e9f0; /* Lightest (pale version of #2E3440) */
|
|
--color-polarnight-100: #d1d7e0; /* Light shade of #2E3440 */
|
|
--color-polarnight-200: #a7b1c5; /* Lighter shade of #3B4252 */
|
|
--color-polarnight-300: #8c9ab3; /* Lighter shade of #3B4252 */
|
|
--color-polarnight-400: #71829b; /* Lighter shade of #434C5E */
|
|
--color-polarnight-500: #4c566a; /* Base color (#4C566A) */
|
|
--color-polarnight-600: #434c5e; /* Darker shade of #434C5E */
|
|
--color-polarnight-700: #3b4252; /* Darker shade of #3B4252 */
|
|
--color-polarnight-800: #2e3440; /* Base color (#2E3440) */
|
|
--color-polarnight-900: #232831; /* Darker shade of #2E3440 */
|
|
--color-polarnight-950: #1b2027; /* Darkest shade, almost black */
|
|
}
|
|
|
|
/* ===========================
|
|
Layout & Structure
|
|
=========================== */
|
|
|
|
.fi-layout {
|
|
@apply bg-[#f5f8fa] dark:bg-[#252a35]; /*#2e3440*/
|
|
}
|
|
|
|
.fi-body {
|
|
@apply bg-[#f5f8fa] dark:bg-polarnight-900;
|
|
}
|
|
|
|
/* ===========================
|
|
Topbar & Sidebar
|
|
=========================== */
|
|
|
|
.fi-topbar {
|
|
& nav {
|
|
@apply bg-[#f5f8fa] dark:bg-[#252a35];
|
|
}
|
|
|
|
& .fi-tenant-menu {
|
|
@apply lg:!hidden;
|
|
}
|
|
}
|
|
|
|
.fi-sidebar-header {
|
|
@apply bg-[#f5f8fa] dark:bg-[#252a35];
|
|
}
|
|
|
|
.fi-sidebar-item-label,
|
|
.fi-topbar-item-label {
|
|
@apply dark:text-gray-400;
|
|
}
|
|
|
|
/* Sidebar Items */
|
|
.fi-sidebar-item {
|
|
& .fi-sidebar-item-button {
|
|
@apply rounded-lg hover:bg-[#d8dee9] dark:hover:bg-white/5;
|
|
}
|
|
|
|
&-active {
|
|
& a {
|
|
& svg {
|
|
@apply text-primary-800;
|
|
}
|
|
|
|
& span {
|
|
@apply text-primary-800 dark:text-primary-400;
|
|
}
|
|
}
|
|
|
|
& .fi-sidebar-item-button {
|
|
@apply rounded-lg bg-[#eceff4] dark:focus-visible:bg-white/5 dark:bg-white/5;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Topbar Items */
|
|
.fi-topbar-item {
|
|
& .fi-topbar-item-button {
|
|
@apply rounded-lg hover:bg-[#d8dee9] dark:hover:bg-white/5;
|
|
}
|
|
|
|
&-active {
|
|
& a svg {
|
|
@apply text-primary-800;
|
|
}
|
|
|
|
& a span {
|
|
@apply text-primary-800 dark:text-primary-400;
|
|
}
|
|
|
|
& .fi-topbar-item-button {
|
|
@apply rounded-lg bg-[#eceff4] dark:focus-visible:bg-white/5 dark:bg-white/5;
|
|
}
|
|
|
|
& a,
|
|
& button {
|
|
@apply bg-secondary-500 hover:bg-secondary-400 dark:bg-primary-500 dark:text-secondary-500 dark:hover:bg-primary-400;
|
|
}
|
|
|
|
& svg {
|
|
@apply dark:text-secondary-500;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Sidebar & Topbar Badges */
|
|
.fi-sidebar-item-button,
|
|
.fi-topbar-item-button {
|
|
& .fi-badge {
|
|
@apply bg-primary-300 dark:bg-primary-200;
|
|
|
|
& span span {
|
|
@apply text-gray-700;
|
|
}
|
|
}
|
|
}
|
|
|
|
.fi-sidebar-item-badge-ctn {
|
|
& .fi-badge {
|
|
@apply bg-primary-300 dark:bg-primary-200;
|
|
|
|
& span span {
|
|
@apply text-gray-700;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* ===========================
|
|
Buttons
|
|
=========================== */
|
|
|
|
.fi-btn {
|
|
&:not(.fi-btn-group .fi-btn) {
|
|
@apply rounded-full;
|
|
}
|
|
|
|
&-color-primary {
|
|
@apply bg-[#88c0d0];
|
|
|
|
& .fi-btn-label {
|
|
@apply text-primary-950;
|
|
}
|
|
}
|
|
|
|
&-color-gray span {
|
|
@apply text-[#434c5e] dark:text-[#e5e9f0];
|
|
}
|
|
}
|
|
|
|
.fi-btn-group {
|
|
@apply rounded-full;
|
|
|
|
& > .fi-btn {
|
|
&:first-of-type {
|
|
@apply rounded-s-full;
|
|
}
|
|
|
|
&:last-of-type {
|
|
@apply rounded-e-full;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* ===========================
|
|
Tables
|
|
=========================== */
|
|
|
|
.fi-ta-ctn {
|
|
@apply shadow-md rounded-2xl border-none ring-0 dark:ring-1 divide-gray-100 dark:divide-white/20;
|
|
|
|
&,
|
|
& .fi-ta-ctn-with-header {
|
|
@apply dark:bg-[var(--color-polarnight-800)];
|
|
}
|
|
}
|
|
|
|
.fi-ta-table {
|
|
& thead tr {
|
|
@apply bg-[#fbfcfd] dark:bg-[#3b414e];
|
|
}
|
|
}
|
|
|
|
.fi-ta-header-cell-label {
|
|
@apply text-[#434c5e] dark:text-[#e5e9f0];
|
|
}
|
|
|
|
.fi-ta-toggle {
|
|
& > div.fi-color-custom {
|
|
@apply bg-primary-500;
|
|
}
|
|
|
|
& > div.fi-color-gray {
|
|
@apply bg-gray-200;
|
|
}
|
|
}
|
|
|
|
/* Table Search Field */
|
|
.fi-ta-search-field {
|
|
& .fi-input-wrp {
|
|
@apply rounded-full bg-[#f5f8fa] dark:bg-gray-900;
|
|
}
|
|
}
|
|
|
|
/* ===========================
|
|
Widget Backgrounds & Styles
|
|
=========================== */
|
|
|
|
/* Generic section-based widgets (Account, Info, and custom widgets) */
|
|
.fi-wi-widget:not(.fi-wi-stats-overview):not(.fi-wi-chart):not(.fi-wi-table) {
|
|
& .fi-section {
|
|
@apply border border-transparent dark:bg-secondary-900 shadow-md rounded-2xl border-none ring-0 dark:ring-1 dark:ring-gray-700 dark:hover:text-white/70 dark:hover:ring-gray-500;
|
|
}
|
|
}
|
|
|
|
/* Stats overview - individual stat cards */
|
|
.fi-wi-stats-overview-stat {
|
|
@apply border border-transparent dark:bg-secondary-900 shadow-md rounded-2xl border-none ring-0 dark:ring-1 dark:ring-gray-700 dark:hover:text-white/70 dark:hover:ring-gray-500;
|
|
}
|
|
|
|
/* Chart widgets */
|
|
.fi-wi-widget.fi-wi-chart {
|
|
& .fi-section {
|
|
@apply border border-transparent dark:bg-secondary-900 shadow-md rounded-2xl border-none ring-0 dark:ring-1 dark:ring-gray-700 dark:hover:text-white/70 dark:hover:ring-gray-500;
|
|
}
|
|
}
|
|
|
|
/* Table widget */
|
|
.fi-wi-widget.fi-wi-table {
|
|
& .fi-ta-ctn {
|
|
@apply border border-transparent dark:bg-secondary-900 shadow-md rounded-2xl border-none ring-0 dark:ring-1 dark:ring-gray-700 dark:hover:text-white/70 dark:hover:ring-gray-500;
|
|
}
|
|
}
|
|
|
|
/* Gradient backgrounds for dark mode */
|
|
.dark {
|
|
& .fi-wi-widget:not(.fi-wi-stats-overview):not(.fi-wi-chart):not(.fi-wi-table) .fi-section,
|
|
& .fi-wi-stats-overview-stat,
|
|
& .fi-wi-widget.fi-wi-chart .fi-section,
|
|
& .fi-wi-widget.fi-wi-table .fi-ta-ctn,
|
|
& .fi-tenant-menu,
|
|
& .fi-dropdown-panel {
|
|
background:
|
|
linear-gradient(#2e3440, #3b4252),
|
|
linear-gradient(to right, rgb(82, 115, 125), rgb(59, 66, 82));
|
|
background-clip: padding-box, border-box;
|
|
background-origin: border-box;
|
|
}
|
|
}
|
|
|
|
/* Other containers */
|
|
.fi-tenant-menu,
|
|
.fi-dropdown-panel {
|
|
@apply border border-transparent dark:bg-secondary-900;
|
|
}
|
|
|
|
.fi-tenant-menu {
|
|
@apply rounded-lg mt-4;
|
|
}
|
|
|
|
/* ===========================
|
|
Forms & Inputs
|
|
=========================== */
|
|
|
|
.fi-input-wrp {
|
|
@apply ring-1 ring-[#d8dee9] dark:ring-white/20;
|
|
}
|
|
|
|
.fi-input {
|
|
@apply disabled:!bg-gray-50 dark:disabled:!bg-gray-800;
|
|
}
|
|
|
|
.fi-fo-field-wrp-label span {
|
|
@apply text-[#4c566a];
|
|
}
|
|
|
|
.fi-fo-field-wrp-helper-text {
|
|
@apply text-gray-500 dark:text-gray-300;
|
|
}
|
|
|
|
.fi-fo-field-wrp-error-message {
|
|
@apply text-[#bf616a] dark:text-[#d08770];
|
|
}
|
|
|
|
.fi-invalid {
|
|
@apply ring-[#bf616a] dark:ring-[#d08770];
|
|
}
|
|
|
|
.fi-fo-toggle {
|
|
&.fi-color-custom {
|
|
@apply bg-primary-500;
|
|
}
|
|
|
|
&.fi-color-gray {
|
|
@apply bg-gray-200;
|
|
}
|
|
}
|
|
|
|
/* ===========================
|
|
Global Search
|
|
=========================== */
|
|
|
|
.fi-global-search-field {
|
|
& .fi-input-wrp {
|
|
@apply rounded-full bg-[#f5f8fa] dark:bg-gray-900 ring-4 ring-white dark:ring-gray-800;
|
|
|
|
& .fi-input-wrp-prefix {
|
|
@apply bg-white dark:bg-gray-800 rounded-full ps-2 mr-2;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* ===========================
|
|
Tabs
|
|
=========================== */
|
|
|
|
.fi-tabs-item-active {
|
|
@apply bg-primary-100;
|
|
|
|
& span {
|
|
@apply !text-secondary-900 dark:!text-gray-100;
|
|
}
|
|
}
|
|
|
|
/* ===========================
|
|
Badges
|
|
=========================== */
|
|
|
|
.fi-badge {
|
|
@apply rounded-xl;
|
|
}
|
|
|
|
/* ===========================
|
|
Breadcrumbs
|
|
=========================== */
|
|
|
|
.fi-breadcrumbs-item-label {
|
|
@apply text-[var(--color-polarnight-400)];
|
|
}
|
|
|
|
/* ===========================
|
|
Headers
|
|
=========================== */
|
|
|
|
.fi-header-heading {
|
|
@apply text-[#434c5e] dark:text-[#e5e9f0];
|
|
} |