diff --git a/composer.json b/composer.json index 62af42c..a94c1dc 100644 --- a/composer.json +++ b/composer.json @@ -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": { diff --git a/config/theme-tabler.php b/config/theme-tabler.php index c6fb196..ae831b1 100644 --- a/config/theme-tabler.php +++ b/config/theme-tabler.php @@ -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. @@ -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'), ], /** @@ -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. diff --git a/resources/assets/css/colors.css b/resources/assets/css/skins/backpack-color-palette.css similarity index 100% rename from resources/assets/css/colors.css rename to resources/assets/css/skins/backpack-color-palette.css diff --git a/resources/assets/css/skins/fuzzy-background.css b/resources/assets/css/skins/fuzzy-background.css new file mode 100644 index 0000000..b1665c8 --- /dev/null +++ b/resources/assets/css/skins/fuzzy-background.css @@ -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); +} diff --git a/resources/assets/css/skins/glass.css b/resources/assets/css/skins/glass.css new file mode 100644 index 0000000..52704a7 --- /dev/null +++ b/resources/assets/css/skins/glass.css @@ -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); +} diff --git a/resources/assets/css/style.css b/resources/assets/css/style.css index f7c60ff..a7e0c38 100644 --- a/resources/assets/css/style.css +++ b/resources/assets/css/style.css @@ -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; } @@ -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); @@ -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); } @@ -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); } @@ -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 { @@ -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 { @@ -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; @@ -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; @@ -594,6 +625,7 @@ body { /*Adjust topbar*/ .topbar-transparent { background-color: transparent !important; + box-shadow: none; } /*Sidebar shortcuts*/ @@ -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 { @@ -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 { @@ -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); -} \ No newline at end of file diff --git a/resources/assets/js/tabler.js b/resources/assets/js/tabler.js index b317658..612e221 100644 --- a/resources/assets/js/tabler.js +++ b/resources/assets/js/tabler.js @@ -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; diff --git a/resources/views/inc/footer.blade.php b/resources/views/inc/footer.blade.php index 44233d1..fcd1174 100644 --- a/resources/views/inc/footer.blade.php +++ b/resources/views/inc/footer.blade.php @@ -1,6 +1,6 @@ @if (backpack_theme_config('show_powered_by') || backpack_theme_config('developer_link'))