Skip to content

Commit cad0960

Browse files
pxpmtabacitu
pxpm
and
tabacitu
authored
v2 - add skins, support for Backpack v7 and drop support for v6 (#205)
Co-authored-by: Cristian Tăbăcitu <[email protected]>
1 parent d262931 commit cad0960

30 files changed

+330
-72
lines changed

‎composer.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,11 +24,11 @@
2424
"Laravel", "Backpack", "Backpack for Laravel", "Backpack Addon", "ThemeTabler"
2525
],
2626
"require": {
27-
"backpack/crud": "^6.2.1"
27+
"backpack/crud": "^7.0"
2828
},
2929
"require-dev": {
30-
"phpunit/phpunit": "~9.0",
31-
"orchestra/testbench": "~5|~6"
30+
"phpunit/phpunit": "^10.0|^11.0",
31+
"orchestra/testbench": "^8||^9||^10||^11"
3232
},
3333
"autoload": {
3434
"psr-4": {

‎config/theme-tabler.php‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
* Possible values: horizontal, horizontal_dark, horizontal_overlap, vertical,
2323
* vertical_dark, vertical_transparent (legacy theme), right_vertical, right_vertical_dark, right_vertical_transparent
2424
*/
25-
'layout' => 'horizontal_overlap',
25+
'layout' => 'horizontal',
2626

2727
/**
2828
* Pick a login page layout.
@@ -33,14 +33,18 @@
3333
/**
3434
* Here you can easily load your own extra css styles.
3535
* Note: if you want to customize the style to create your own custom skin colors:
36-
* - make a copy of the file "vendor/backpack/theme-tabler/resources/assets/css/colors.css" into your project
36+
* - copy the file "vendor/backpack/theme-tabler/resources/assets/css/colors.css" into your project, with a different name
3737
* - adjust colors variables as you wish
38-
* - replace "base_path('vendor/backpack/theme-tabler/resources/assets/css/colors.css')," with the path to the file created above
39-
* - boom!
38+
* - replace "base_path('vendor/backpack/theme-tabler/resources/assets/css/backpack-color-palette.css')," with the path to the file created above
4039
*/
4140
'styles' => [
42-
base_path('vendor/backpack/theme-tabler/resources/assets/css/color-adjustments.css'),
43-
base_path('vendor/backpack/theme-tabler/resources/assets/css/colors.css'),
41+
base_path('vendor/backpack/theme-tabler/resources/assets/css/skins/backpack-color-palette.css'),
42+
base_path('vendor/backpack/theme-tabler/resources/assets/css/skins/glass.css'),
43+
base_path('vendor/backpack/theme-tabler/resources/assets/css/skins/fuzzy-background.css'),
44+
// base_path('vendor/backpack/theme-tabler/resources/assets/css/skins/dotted-background.css'),
45+
// base_path('vendor/backpack/theme-tabler/resources/assets/css/skins/vertical-lines-background.css'),
46+
// base_path('vendor/backpack/theme-tabler/resources/assets/css/skins/pinstripe-background.css'),
47+
// base_path('vendor/backpack/theme-tabler/resources/assets/css/skins/paper-background.css'),
4448
],
4549

4650
/**
@@ -80,7 +84,7 @@
8084
/**
8185
* When true, the content area will take the whole screen width.
8286
*/
83-
'useFluidContainers' => false,
87+
'useFluidContainers' => true,
8488

8589
/**
8690
* When true, the sidebar content for vertical layouts will not scroll with the rest of the content.

resources/assets/css/colors.css renamed to resources/assets/css/skins/backpack-color-palette.css

File renamed without changes.

‎resources/assets/css/skins/dotted-background.css‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
/*
2+
|--------------------------------------------------------------------------
3+
| Dotted Background for Tabler and/or Backpack for Laravel
4+
|--------------------------------------------------------------------------
5+
|
6+
| This CSS file adds a dotted background pattern to the body element.
7+
| It uses CSS variables defined in Tabler for colors, ensuring consistency
8+
| with the overall theme. The background pattern adapts to both light and
9+
| dark modes.
10+
|
11+
| Created using: https://www.magicpattern.design/tools/css-backgrounds
12+
*/
13+
14+
body {
15+
background-color: var(--tblr-gray-400);
16+
background-image: radial-gradient(var(--tblr-gray-400) 0.55px, var(--tblr-gray-100) 0.55px);
17+
background-size: 11px 11px;
18+
}
19+
20+
[data-bs-theme=dark] body {
21+
background-color: var(--tblr-dark);
22+
background-image: radial-gradient(var(--tblr-dark) 0.55px, var(--tblr-black) 0.55px);
23+
}

‎resources/assets/css/skins/fuzzy-background.css‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
/*
2+
|--------------------------------------------------------------------------
3+
| Fuzzy ball skin for Tabler and/or Backpack for Laravel
4+
|--------------------------------------------------------------------------
5+
|
6+
| 🎨 This adds a quirky blurred SVG background using hsl(...) color stops.
7+
| 🛠️ To customize colors, just find & replace the HSL values below:
8+
| - hsl(37, 99%25, 67%25) → color #1 (orange-ish)
9+
| - hsl(316, 73%25, 52%25) → color #2 (pink/purple)
10+
| - hsl(185, 100%25, 57%25) → color #3 (cyan)
11+
|
12+
| 💡 Tip: Use a URL encoder like https://yoksel.github.io/url-encoder/ if
13+
| you want to regenerate or preview the SVG. The current one is
14+
| encoded as a data URI inside background-image.
15+
*/
16+
17+
body {
18+
/* BlurBerry background */
19+
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");
20+
background-size: cover;
21+
background-position: bottom center;
22+
background-repeat: no-repeat;
23+
/* background-attachment: fixed; */
24+
min-height: 100%;
25+
}
26+
27+
/* on mobile */
28+
@media (max-width: 991px) {
29+
body {
30+
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");
31+
background-position: top left;
32+
}
33+
}
34+
35+
html[data-bs-theme=light] {
36+
/* background: #f9f9f9; */
37+
background: var(--tblr-gray-100);
38+
}
39+
40+
[data-bs-theme=light] .page {
41+
background: rgb(255 255 255 / 0.00);
42+
}
43+
44+
[data-bs-theme=dark] .page {
45+
background: rgba(0, 0, 0, 0.75);
46+
}

‎resources/assets/css/skins/glass.css‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
/* SLIMBAR - reduced-width navbar when horizontal layout is active */
2+
body[bp-layout=horizontal] .single-top-bar #navbar-menu .navbar {
3+
border-radius: 0.5rem;
4+
margin-top: 1rem;
5+
margin-right: 1rem;
6+
margin-left: 1rem;
7+
}
8+
9+
/* :root, */
10+
[data-bs-theme=light],
11+
[data-menu-theme=light] {
12+
/* Base surface variables */
13+
--tblr-bg-surface: rgba(255, 255, 255, 0.7);
14+
--tblr-bg-surface-tertiary: rgba(255, 255, 255, 0.7);
15+
16+
/* Glass effect properties */
17+
--tblr-bg-surface-border: 1px solid rgba(255, 255, 255, 0.3);
18+
--tblr-bg-surface-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
19+
--tblr-bg-surface-backdrop: blur(5px);
20+
--tblr-bg-surface-backdrop-webkit: blur(5px);
21+
22+
/* Table styles */
23+
--tblr-table-striped-bg: rgba(255, 255, 255, 0.7)!important;
24+
--tblr-table-bg-typed: rgba(255, 255, 255, 0.7)!important;
25+
}
26+
27+
[data-bs-theme=light] .dropdown-menu {
28+
--tblr-dropdown-bg: rgba(255, 255, 255, 1)!important;
29+
}
30+
31+
[data-bs-theme=light] .modal-content {
32+
--tblr-modal-bg: rgba(255, 255, 255, 0.97) !important;
33+
--tblr-footer-bg: transparent;
34+
}
35+
36+
[data-bs-theme=light] .card {
37+
--tblr-card-cap-bg: transparent;
38+
}
39+
40+
[data-bs-theme=light] .table-striped>tbody>tr:nth-of-type(2n)>* {
41+
--tblr-table-bg-type: rgba(255, 255, 255, 0.2) !important;
42+
}
43+
44+
[data-bs-theme=light] table.table.dataTable.table-striped>tbody>tr:nth-of-type(2n+1)>* {
45+
box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-stripe), 0.03) !important;
46+
}
47+
48+
.navbar {
49+
--tblr-navbar-active-bg: rgba(var(--tblr-primary-rgb), 0.3);
50+
}

‎resources/assets/css/skins/paper-background.css‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
/*
2+
|--------------------------------------------------------------------------
3+
| Paper Background for Tabler and/or Backpack for Laravel
4+
|--------------------------------------------------------------------------
5+
|
6+
| This CSS file adds a paper background pattern to the body element.
7+
| It uses CSS variables defined in Tabler for colors, ensuring consistency
8+
| with the overall theme. The background pattern adapts to both light and
9+
| dark modes.
10+
|
11+
| Created using: https://www.magicpattern.design/tools/css-backgrounds
12+
*/
13+
14+
body {
15+
background-color: var(--tblr-gray-100);
16+
background-image: linear-gradient(var(--tblr-gray-200) 1px, transparent 1px), linear-gradient(90deg, var(--tblr-gray-200) 1px, transparent 1px), linear-gradient(var(--tblr-gray-200) 0.5px, transparent 0.5px), linear-gradient(90deg, var(--tblr-gray-200) 0.5px, var(--tblr-gray-100) 0.5px);
17+
background-size: 65px 65px, 65px 65px, 13px 13px, 13px 13px;
18+
background-position: -1px -1px, -1px -1px, -0.5px -0.5px, -0.5px -0.5px;
19+
}
20+
21+
[data-bs-theme=dark] body {
22+
background-color: var(--tblr-dark);
23+
background-image: linear-gradient(var(--tblr-gray-900) 1px, transparent 1px), linear-gradient(90deg, var(--tblr-gray-900) 1px, transparent 1px), linear-gradient(var(--tblr-gray-900) 0.5px, transparent 0.5px), linear-gradient(90deg, var(--tblr-gray-900) 0.5px, var(--tblr-black) 0.5px);
24+
}

‎resources/assets/css/skins/pinstripe-background.css‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
/*
2+
|--------------------------------------------------------------------------
3+
| Pinstripe Background for Tabler and/or Backpack for Laravel
4+
|--------------------------------------------------------------------------
5+
|
6+
| This CSS file adds a pinstripe background pattern to the body element.
7+
| It uses CSS variables defined in Tabler for colors, ensuring consistency
8+
| with the overall theme. The background pattern adapts to both light and
9+
| dark modes.
10+
|
11+
| Created using: https://www.magicpattern.design/tools/css-backgrounds
12+
*/
13+
14+
body {
15+
background-color: var(--tblr-gray-400);
16+
background-size: 20% 20%;
17+
background-image: repeating-linear-gradient(to right, var(--tblr-gray-200), var(--tblr-gray-200) 1px, var(--tblr-gray-100) 1px, var(--tblr-gray-100));
18+
19+
}
20+
21+
[data-bs-theme=dark] body {
22+
background-color: var(--tblr-dark);
23+
background-image: repeating-linear-gradient(to right, var(--tblr-gray-800), var(--tblr-gray-800) 1px, var(--tblr-black) 1px, var(--tblr-black));
24+
}

‎resources/assets/css/skins/vertical-lines-background.css‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
/*
2+
|--------------------------------------------------------------------------
3+
| Vertical Lines Background for Tabler and/or Backpack for Laravel
4+
|--------------------------------------------------------------------------
5+
|
6+
| This CSS file adds a vertical lines background pattern to the body element.
7+
| It uses CSS variables defined in Tabler for colors, ensuring consistency
8+
| with the overall theme. The background pattern adapts to both light and
9+
| dark modes.
10+
|
11+
| Created using: https://uiverse.io/SelfMadeSystem/spicy-insect-99
12+
*/
13+
14+
body {
15+
width: 100%;
16+
height: 100%;
17+
background: linear-gradient(var(--tblr-light) 1px, var(--tblr-primary-bg-subtle) 0),
18+
linear-gradient(90deg, #fff, #ffff, #fff),
19+
linear-gradient(in oklch longer hue -2deg, var(--tblr-danger), var(--tblr-danger));
20+
background-size:
21+
100% 2px,
22+
100% 100%,
23+
100% 100%;
24+
}
25+
26+
[data-bs-theme=dark] body {
27+
width: 100%;
28+
height: 100%;
29+
background: linear-gradient(#000 1px, #0000 0),
30+
linear-gradient(90deg, #000, #0000, #000),
31+
linear-gradient(in oklch longer hue -2deg, var(--tblr-danger), var(--tblr-danger));
32+
background-size:
33+
100% 2px,
34+
100% 100%,
35+
100% 100%;
36+
}

0 commit comments

Comments
 (0)