Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
9830b0b
wip
pxpm Nov 12, 2024
92d0416
wip
pxpm Jan 28, 2025
54f0d46
fix bottom buttons margin
pxpm Feb 7, 2025
db7882e
Update composer.json
pxpm Mar 6, 2025
0e404d3
Update composer.json
pxpm Mar 6, 2025
0238269
wip
pxpm Jun 9, 2025
3d14e2a
table heading fixes
pxpm Jun 10, 2025
3b19391
datatable header color fixes - PR #200
tabacitu Jun 10, 2025
5295172
update tabler
pxpm Jun 12, 2025
a5e7c2b
added a bit of CSS for datagrid and datalist components
tabacitu Jun 19, 2025
c1410c9
Merge pull request #201 from Laravel-Backpack/update-tabler-version
tabacitu Jun 19, 2025
16602da
better on bigger screens - use container-xxl everywhere
tabacitu Jun 20, 2025
90451aa
add glass skin
tabacitu Jun 20, 2025
126c9c0
fix datatable classes
tabacitu Jun 20, 2025
f70cde2
some fixes in glass styling
tabacitu Jun 24, 2025
e957689
color fixes
tabacitu Jun 24, 2025
30b7403
fix datatable header hover
tabacitu Jun 24, 2025
d369bdf
move optional CSS styles to skin files
tabacitu Jun 27, 2025
21c3eae
make tabler backward compatible
pxpm Jul 8, 2025
664307e
Merge pull request #202 from Laravel-Backpack/make-tabler-BC
pxpm Jul 8, 2025
975cf9b
update assets
pxpm Jul 16, 2025
4525cb7
Merge pull request #203 from Laravel-Backpack/update-assets
pxpm Jul 16, 2025
2859a16
wip
pxpm Jul 22, 2025
b665e69
Merge pull request #207 from Laravel-Backpack/fix-background
pxpm Jul 22, 2025
fbce16b
fix fuzzy bkg problems
tabacitu Jul 28, 2025
b60d2ef
wip
pxpm Aug 4, 2025
7290ee8
use fluid containers by default
pxpm Aug 4, 2025
43d0ddc
Merge pull request #208 from Laravel-Backpack/fix-usage-of-fluid-cont…
pxpm Aug 4, 2025
3d58c4c
remove alert background overrides
tabacitu Oct 16, 2025
49a591f
minor CSS fixes
tabacitu Oct 16, 2025
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions composer.json
Original file line number Diff line number Diff line change
Expand Up @@ -24,11 +24,11 @@
"Laravel", "Backpack", "Backpack for Laravel", "Backpack Addon", "ThemeTabler"
],
"require": {
"backpack/crud": "^6.2.1"
"backpack/crud": "^7.0.0-alpha"
},
"require-dev": {
"phpunit/phpunit": "~9.0",
"orchestra/testbench": "~5|~6"
"phpunit/phpunit": "^10.0|^11.0",
"orchestra/testbench": "^8||^9||^10||^11"
},
"autoload": {
"psr-4": {
Expand Down
11 changes: 6 additions & 5 deletions config/theme-tabler.php
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
* Possible values: horizontal, horizontal_dark, horizontal_overlap, vertical,
* vertical_dark, vertical_transparent (legacy theme), right_vertical, right_vertical_dark, right_vertical_transparent
*/
'layout' => 'horizontal_overlap',
'layout' => 'horizontal',

/**
* Pick a login page layout.
Expand All @@ -35,12 +35,13 @@
* Note: if you want to customize the style to create your own custom skin colors:
* - make a copy of the file "vendor/backpack/theme-tabler/resources/assets/css/colors.css" into your project
* - adjust colors variables as you wish
* - replace "base_path('vendor/backpack/theme-tabler/resources/assets/css/colors.css')," with the path to the file created above
* - replace "base_path('vendor/backpack/theme-tabler/resources/assets/css/backpack-color-palette.css')," with the path to the file created above
* - boom!
*/
'styles' => [
base_path('vendor/backpack/theme-tabler/resources/assets/css/color-adjustments.css'),
base_path('vendor/backpack/theme-tabler/resources/assets/css/colors.css'),
base_path('vendor/backpack/theme-tabler/resources/assets/css/skins/backpack-color-palette.css'),
base_path('vendor/backpack/theme-tabler/resources/assets/css/skins/glass.css'),
base_path('vendor/backpack/theme-tabler/resources/assets/css/skins/fuzzy-background.css'),
],

/**
Expand Down Expand Up @@ -80,7 +81,7 @@
/**
* When true, the content area will take the whole screen width.
*/
'useFluidContainers' => false,
'useFluidContainers' => true,

/**
* When true, the sidebar content for vertical layouts will not scroll with the rest of the content.
Expand Down
46 changes: 46 additions & 0 deletions resources/assets/css/skins/fuzzy-background.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
/*
|--------------------------------------------------------------------------
| Fuzzy ball skin for Tabler and/or Backpack for Laravel
|--------------------------------------------------------------------------
|
| 🎨 This adds a quirky blurred SVG background using hsl(...) color stops.
| 🛠️ To customize colors, just find & replace the HSL values below:
| - hsl(37, 99%25, 67%25) → color #1 (orange-ish)
| - hsl(316, 73%25, 52%25) → color #2 (pink/purple)
| - hsl(185, 100%25, 57%25) → color #3 (cyan)
|
| 💡 Tip: Use a URL encoder like https://yoksel.github.io/url-encoder/ if
| you want to regenerate or preview the SVG. The current one is
| encoded as a data URI inside background-image.
*/

body {
/* BlurBerry background */
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' viewBox='0 0 800 800'%3E%3Cdefs%3E%3Cfilter id='bbblurry-filter' x='-100%25' y='-100%25' width='400%25' height='400%25' filterUnits='objectBoundingBox' primitiveUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='40' x='0%25' y='0%25' width='100%25' height='100%25' in='SourceGraphic' edgeMode='none' result='blur'%3E%3C/feGaussianBlur%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23bbblurry-filter)'%3E%3Cellipse rx='150' ry='150' cx='462.9146816404486' cy='534.6882471935419' fill='hsl(37, 99%25, 67%25)'%3E%3C/ellipse%3E%3Cellipse rx='150' ry='150' cx='179.02369011526488' cy='367.0291623615862' fill='hsl(316, 73%25, 52%25)'%3E%3C/ellipse%3E%3Cellipse rx='150' ry='150' cx='245.39283048169654' cy='478.9292209148051' fill='hsl(185, 100%25, 57%25)'%3E%3C/ellipse%3E%3C/g%3E%3C/svg%3E");
background-size: cover;
background-position: bottom center;
background-repeat: no-repeat;
/* background-attachment: fixed; */
min-height: 100%;
}

/* on mobile */
@media (max-width: 991px) {
body {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' viewBox='0 0 400 800'%3E%3Cdefs%3E%3Cfilter id='bbblurry-filter' x='-50%25' y='-50%25' width='240%25' height='400%25' filterUnits='objectBoundingBox' primitiveUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='40' x='0%25' y='0%25' width='100%25' height='100%25' in='SourceGraphic' edgeMode='none' result='blur'%3E%3C/feGaussianBlur%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23bbblurry-filter)'%3E%3Cellipse rx='150' ry='150' cx='262.9146816404486' cy='334.6882471935419' fill='hsl(37, 99%25, 67%25)'%3E%3C/ellipse%3E%3Cellipse rx='150' ry='150' cx='79.02369011526488' cy='167.0291623615862' fill='hsl(316, 73%25, 52%25)'%3E%3C/ellipse%3E%3Cellipse rx='150' ry='150' cx='245.39283048169654' cy='478.9292209148051' fill='hsl(185, 100%25, 57%25)'%3E%3C/ellipse%3E%3C/g%3E%3C/svg%3E");
background-position: top left;
}
}

html[data-bs-theme=light] {
/* background: #f9f9f9; */
background: var(--tblr-light);
}

[data-bs-theme=light] .page {
background: rgb(255 255 255 / 0.00);
}

[data-bs-theme=dark] .page {
background: rgba(0, 0, 0, 0.75);
}
50 changes: 50 additions & 0 deletions resources/assets/css/skins/glass.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
/* SLIMBAR - reduced-width navbar when horizontal layout is active */
body[bp-layout=horizontal] .single-top-bar #navbar-menu .navbar {
border-radius: 0.5rem;
margin-top: 1rem;
margin-right: 1rem;
margin-left: 1rem;
}

/* :root, */
[data-bs-theme=light],
[data-menu-theme=light] {
/* Base surface variables */
--tblr-bg-surface: rgba(255, 255, 255, 0.7);
--tblr-bg-surface-tertiary: rgba(255, 255, 255, 0.7);

/* Glass effect properties */
--tblr-bg-surface-border: 1px solid rgba(255, 255, 255, 0.3);
--tblr-bg-surface-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
--tblr-bg-surface-backdrop: blur(5px);
--tblr-bg-surface-backdrop-webkit: blur(5px);

/* Table styles */
--tblr-table-striped-bg: rgba(255, 255, 255, 0.7)!important;
--tblr-table-bg-typed: rgba(255, 255, 255, 0.7)!important;
}

[data-bs-theme=light] .dropdown-menu {
--tblr-dropdown-bg: rgba(255, 255, 255, 1)!important;
}

[data-bs-theme=light] .modal-content {
--tblr-modal-bg: rgba(255, 255, 255, 0.97) !important;
--tblr-footer-bg: transparent;
}

[data-bs-theme=light] .card {
--tblr-card-cap-bg: transparent;
}

[data-bs-theme=light] .table-striped>tbody>tr:nth-of-type(2n)>* {
--tblr-table-bg-type: rgba(255, 255, 255, 0.2) !important;
}

[data-bs-theme=light] table.table.dataTable.table-striped>tbody>tr:nth-of-type(2n+1)>* {
box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-stripe), 0.03) !important;
}

.navbar {
--tblr-navbar-active-bg: rgba(var(--tblr-primary-rgb), 0.3);
}
100 changes: 69 additions & 31 deletions resources/assets/css/style.css
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/**
This file adjusts things so that Tabler looks cool and is used always,
regardless of skin color applied and dark/light mode used.
This file adjusts Tabler styles to better fit Backpack for Laravel.
This file is always used, regardless of color skin applied and dark/light mode used.
*/

html:not([data-theme]) .show-theme-system { display: initial!important; }
Expand Down Expand Up @@ -99,6 +99,11 @@ table .btn-link, #form_tabs p .btn-link:not(:hover) {
color: var(--tblr-primary);
}

.bp-datagrid .btn-link,
.bp-datalist .btn-link {
color: var(--tblr-primary);
}

#form_tabs p .btn-link:hover {
background-color: transparent;
color: var(--tblr-btn-hover-color);
Expand Down Expand Up @@ -159,11 +164,15 @@ table .btn-link:active {
background-color: var(--tblr-table-bg);
}

[data-bs-theme=dark] #crudTable_processing.dataTables_processing.card {
background-color: var(--tblr-dark);
.dataTables_processing.card {
background-color: var(--tblr-bg-surface)!important;
border-radius: 0;
}

[data-bs-theme=dark] .dt-processing.card {
background-color: var(--tblr-bg-surface)!important;
}

[data-bs-theme=light] tbody {
background-color: var(--tblr-table-bg);
}
Expand All @@ -183,9 +192,9 @@ table .btn-link:active {
background-color: transparent;
}

[data-bs-theme=dark] .btn-link:hover,
[data-bs-theme=dark] a:not(.btn):hover,
[data-menu-theme=dark] .btn-link:hover,
[data-bs-theme=dark] .btn-link:hover,
[data-bs-theme=dark] a:not(.btn):hover,
[data-menu-theme=dark] .btn-link:hover,
[data-menu-theme=dark] a:not(.btn):hover {
color: var(--tblr-gray-200);
}
Expand Down Expand Up @@ -299,18 +308,19 @@ header.top div.dropdown-menu a.dropdown-item i {
}

/*table hover*/
#crudTable_wrapper .table-striped > tbody > tr:hover > * {
.crud-table.table-striped > tbody > tr:hover > * {
box-shadow: none !important;
background-color: rgba(var(--tblr-primary-rgb),.1);
background-color: rgba(var(--tblr-primary-rgb),.1)!important;
}

[data-bs-theme=light] table#crudTable {
/*
[data-bs-theme=light] table.crud-table {
background-color: var(--tblr-white);
}

[data-bs-theme=dark] table#crudTable {
[data-bs-theme=dark] table.crud-table {
background-color: var(--tblr-bg-surface);
}
} */

/*filters*/
[data-bs-theme=dark] .navbar-filters .select2-container .select2-search input {
Expand Down Expand Up @@ -357,7 +367,12 @@ header.top div.dropdown-menu a.dropdown-item i {
span.select2-selection.select2-selection--single,
.select2-selection.select2-selection--multiple ul.select2-selection__rendered,
.form-control {
border-radius: 0 !important;
/* border-radius: 0 !important; */
border-radius: var(--tblr-border-radius);
}

form .select2.select2-container {
border-radius: var(--tblr-border-radius);
}

[data-bs-theme=dark] .navbar-filters .select2-results ul.select2-results__options li.select2-results__option.select2-results__option--highlighted {
Expand Down Expand Up @@ -453,6 +468,21 @@ span.select2-selection.select2-selection--single,
color: var(--tblr-light-text);
}

[data-bs-theme=light] div.dtr-modal div.dtr-modal-background {
/* background-color: rgba(var(--tblr-dark-rgb), 0.8) !important; */
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
--tblr-modal-margin: 1.75rem;
background: var(--tblr-bg-surface)!important;
}

div.dtr-modal div.dtr-modal-display {
border: 1px solid var(--tblr-primary-border) !important;
background-color: var(--tblr-bg-surface) !important;
border-radius: var(--tblr-border-radius) !important;
box-shadow: var(--tblr-shadow) !important;
}

/*tabbed fields*/
div.tab-container div.tab-content {
padding: 25px;
Expand Down Expand Up @@ -541,18 +571,19 @@ footer {
/*bulk buttons*/
#bottom_buttons a.btn.btn-sm {
padding: 5px 10px;
margin-top: 5px;
}

[data-bs-theme=dark] #crudTable_wrapper table tbody tr td input[type=editable_text],
[data-bs-theme=dark] #crudTable_wrapper table tbody tr td select {
/* [data-bs-theme=dark] table.crud-table tbody tr td input[type=editable_text],
[data-bs-theme=dark] table.crud-table tbody tr td select {
color: var(--tblr-light-text);
border-bottom: 1px dashed var(--tblr-gray-700) !important;
}

[data-bs-theme=dark] #crudTable_wrapper table tbody tr td input[type=editable_text]:focus {
[data-bs-theme=dark] table.crud-table tbody tr td input[type=editable_text]:focus {
--bs-table-accent-bg: none !important;
box-shadow: none !important;
}
} */

a.actions-buttons-column {
border: none;
Expand Down Expand Up @@ -594,6 +625,7 @@ body {
/*Adjust topbar*/
.topbar-transparent {
background-color: transparent !important;
box-shadow: none;
}

/*Sidebar shortcuts*/
Expand Down Expand Up @@ -690,10 +722,17 @@ tr.array-row td:has(span.ui-sortable-handle) {
}

@media (min-width: 992px) {
body[bp-layout=horizontal-overlap] .header-operation,
body[bp-layout=horizontal-overlap] [bp-section=page-heading] {
body[bp-layout=horizontal-overlap] .header-operation {
color: var(--tblr-gray-200);
}

[data-bs-theme=light] body[bp-layout=horizontal-overlap] .datatable-header:not([bp-section=crud-operation-list] .datatable-header) {
color: var(--tblr-body-color);
}

body[bp-layout=horizontal-overlap] .datatable-header {
padding-left: 0px;
}
}

body[bp-layout=horizontal-overlap] .breadcrumb .active {
Expand Down Expand Up @@ -750,12 +789,6 @@ body[bp-layout=horizontal-overlap] .nav-item > a {
border-radius: 4px;
}

/* Alerts */

[data-bs-theme=dark] .alert-danger {
background-color: var(--tblr-bg-surface);
}

/* Swal */

[data-bs-theme=dark] .swal-modal {
Expand Down Expand Up @@ -990,14 +1023,19 @@ body[bp-layout=horizontal-overlap] .nav-item > a {
height: 0.4rem;
}

.card-body {
border-radius: inherit;
}

.card-body .subheader {
color: inherit;
}

.alert {
background: var(--tblr-bg-surface);
table.dataTable thead>tr>th.dt-orderable-asc:hover,
table.dataTable thead>tr>th.dt-orderable-desc:hover,
table.dataTable thead>tr>td.dt-orderable-asc:hover,
table.dataTable thead>tr>td.dt-orderable-desc:hover
{
outline: none !important;
outline-offset: 0 !important;
}

[data-bs-theme=dark] .alert {
color: var(--tblr-gray-400);
}
5 changes: 5 additions & 0 deletions resources/assets/js/tabler.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,3 +18,8 @@
el = el.parentElement;
}
});
/**
* For backward compatibility with previous tabler version and other themes.
* In Tabler v1x, the bootstrap object is no longer available globally
*/
window.bootstrap = tabler.bootstrap;
2 changes: 1 addition & 1 deletion resources/views/inc/footer.blade.php
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
@if (backpack_theme_config('show_powered_by') || backpack_theme_config('developer_link'))
<footer class="d-print-none {{ backpack_theme_config('classes.footer') ?? 'footer app-footer sticky-footer bg-transparent p-3 border-top-0' }}">
<div class="{{ backpack_theme_config('options.useFluidContainers') ? 'container-fluid' : 'container-xl' }}">
<div class="{{ backpack_theme_config('options.useFluidContainers') ? 'container-fluid' : 'container-xxl' }}">
<div class="@if (backpack_theme_config('developer_link') && backpack_theme_config('developer_name') && backpack_theme_config('show_powered_by')) row @endif text-center align-items-center flex-row-reverse">
@if (backpack_theme_config('show_powered_by'))
<div class="col-lg-auto ms-lg-auto">
Expand Down
2 changes: 1 addition & 1 deletion resources/views/inc/menu_user_dropdown.blade.php
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="nav-item dropdown">
<div class="nav-item dropdown pe-3">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
<span class="avatar avatar-sm rounded-circle">
<img class="avatar avatar-sm rounded-circle bg-transparent" src="{{ backpack_avatar_url(backpack_auth()->user()) }}"
Expand Down
Loading