| 1 |
<?php |
| 2 |
|
| 3 |
namespace MasterAddons\Modules\Display; |
| 4 |
|
| 5 |
// Elementor classes |
| 6 |
use \Elementor\Controls_Manager; |
| 7 |
|
| 8 |
if (!defined('ABSPATH')) exit; // Exit if accessed directly |
| 9 |
|
| 10 |
/** |
| 11 |
* Background Patterns + Gradient Overlays (inline style) |
| 12 |
*/ |
| 13 |
if (!class_exists('MasterAddons\Modules\Display\Patterns')) { |
| 14 |
class Patterns extends \MasterAddons\Inc\Classes\Extension_Prototype |
| 15 |
{ |
| 16 |
private static $instance = null; |
| 17 |
public $name = 'Patterns'; |
| 18 |
// Patterns registers its own section in the Style tab (see add_controls()). |
| 19 |
// Keep has_controls false so Extension_Prototype does NOT also add an empty |
| 20 |
// common section in the Advanced tab. (The base reads its own private |
| 21 |
// $is_common, so setting $is_common here cannot suppress that — has_controls |
| 22 |
// is the effective switch.) |
| 23 |
public $has_controls = false; |
| 24 |
private $is_common = false; // Only apply to section/column/container, not all widgets |
| 25 |
|
| 26 |
private function add_controls($element, $args) |
| 27 |
{ |
| 28 |
// Create separate section for patterns |
| 29 |
$element->start_controls_section( |
| 30 |
'jltma_patterns_section', |
| 31 |
[ |
| 32 |
'tab' => Controls_Manager::TAB_STYLE, |
| 33 |
'label' => __('Patterns', 'master-addons') . JLTMA_EXTENSION_BADGE |
| 34 |
] |
| 35 |
); |
| 36 |
|
| 37 |
// Enable |
| 38 |
$element->add_control( |
| 39 |
'jltma_enable_pattern', |
| 40 |
[ |
| 41 |
'label' => __('Enable Pattern', 'master-addons'), |
| 42 |
'type' => Controls_Manager::SWITCHER, |
| 43 |
'label_on' => __('Yes', 'master-addons'), |
| 44 |
'label_off' => __('No', 'master-addons'), |
| 45 |
'return_value' => 'yes', |
| 46 |
] |
| 47 |
); |
| 48 |
|
| 49 |
// Style chooser - All 77 PatternCraft Patterns |
| 50 |
$element->add_control( |
| 51 |
'jltma_pattern_style', |
| 52 |
[ |
| 53 |
'label' => __('Pattern Style', 'master-addons'), |
| 54 |
'type' => Controls_Manager::SELECT, |
| 55 |
'default' => 'top-gradient-radial', |
| 56 |
'options' => [ |
| 57 |
// Decorative Gradients |
| 58 |
'top-gradient-radial' => __('Top Gradient Radial', 'master-addons'), |
| 59 |
'bottom-gradient-radial' => __('Bottom Gradient Radial', 'master-addons'), |
| 60 |
'bottom-violet-radial' => __('Bottom Violet Radial', 'master-addons'), |
| 61 |
'bottom-slate-radial' => __('Bottom Slate Radial', 'master-addons'), |
| 62 |
'radial-teal-glow' => __('Teal Glow', 'master-addons'), |
| 63 |
'radial-pink-glow' => __('Pink Glow', 'master-addons'), |
| 64 |
'radial-amber-glow' => __('Amber Glow', 'master-addons'), |
| 65 |
'radial-emerald-glow' => __('Emerald Glow', 'master-addons'), |
| 66 |
|
| 67 |
// Dark Decorative |
| 68 |
'dark-horizon-glow' => __('Dark Horizon Glow', 'master-addons'), |
| 69 |
'crimson-depth' => __('Crimson Depth', 'master-addons'), |
| 70 |
'emerald-void' => __('Emerald Void', 'master-addons'), |
| 71 |
'violet-abyss' => __('Violet Abyss', 'master-addons'), |
| 72 |
'azure-depths' => __('Azure Depths', 'master-addons'), |
| 73 |
'orchid-depths' => __('Orchid Depths', 'master-addons'), |
| 74 |
'dark-horizon-glow-top' => __('Dark Horizon Glow Top', 'master-addons'), |
| 75 |
'crimson-depth-top' => __('Crimson Depth Top', 'master-addons'), |
| 76 |
'emerald-void-top' => __('Emerald Void Top', 'master-addons'), |
| 77 |
'violet-abyss-top' => __('Violet Abyss Top', 'master-addons'), |
| 78 |
'azure-depths-top' => __('Azure Depths Top', 'master-addons'), |
| 79 |
'orchid-depths-top' => __('Orchid Depths Top', 'master-addons'), |
| 80 |
|
| 81 |
// Geometric Grid Patterns |
| 82 |
'purple-gradient-grid-right' => __('Purple Gradient Grid Right', 'master-addons'), |
| 83 |
'purple-gradient-grid-left' => __('Purple Gradient Grid Left', 'master-addons'), |
| 84 |
'dual-gradient-overlay-strong' => __('Dual Gradient Overlay', 'master-addons'), |
| 85 |
'dual-gradient-overlay-strong-swapped' => __('Dual Gradient Overlay Swapped', 'master-addons'), |
| 86 |
'dual-gradient-overlay-top' => __('Dual Gradient Overlay (Top)', 'master-addons'), |
| 87 |
'dual-gradient-overlay-bottom' => __('Dual Gradient Overlay (Bottom)', 'master-addons'), |
| 88 |
'top-fade-grid' => __('Top Fade Grid', 'master-addons'), |
| 89 |
'bottom-fade-grid' => __('Bottom Fade Grid', 'master-addons'), |
| 90 |
'diagonal-fade-grid-left' => __('Diagonal Fade Grid Left', 'master-addons'), |
| 91 |
'diagonal-fade-grid-right' => __('Diagonal Fade Grid Right', 'master-addons'), |
| 92 |
|
| 93 |
// Radial Glow Effects |
| 94 |
'dark-radial-glow' => __('Dark Radial Glow', 'master-addons'), |
| 95 |
'blue-radial-glow' => __('Blue Radial Glow', 'master-addons'), |
| 96 |
'purple-radial-glow' => __('Purple Radial Glow', 'master-addons'), |
| 97 |
'emerald-radial-glow' => __('Emerald Radial Glow', 'master-addons'), |
| 98 |
|
| 99 |
// Aurora Effects |
| 100 |
'aurora-dream-corner-whispers' => __('Aurora Dream Corner Whispers', 'master-addons'), |
| 101 |
'aurora-dream-soft-harmony' => __('Aurora Dream Soft Harmony', 'master-addons'), |
| 102 |
'aurora-dream-diagonal-flow' => __('Aurora Dream Diagonal Flow', 'master-addons'), |
| 103 |
'aurora-dream-central-burst' => __('Aurora Dream Central Burst', 'master-addons'), |
| 104 |
|
| 105 |
// Basic Patterns |
| 106 |
'waves-vertical' => __('Waves Vertical', 'master-addons'), |
| 107 |
'waves-horizontal' => __('Waves Horizontal', 'master-addons'), |
| 108 |
'diagonal-stripes' => __('Diagonal Stripes', 'master-addons'), |
| 109 |
'dots-pattern' => __('Dots Pattern', 'master-addons'), |
| 110 |
'crosshatch' => __('Crosshatch', 'master-addons'), |
| 111 |
|
| 112 |
// Grid Patterns |
| 113 |
'grid-small' => __('Grid Small', 'master-addons'), |
| 114 |
'grid-medium' => __('Grid Medium', 'master-addons'), |
| 115 |
'grid-large' => __('Grid Large', 'master-addons'), |
| 116 |
'dot-grid' => __('Dot Grid', 'master-addons'), |
| 117 |
'isometric-grid' => __('Isometric Grid', 'master-addons'), |
| 118 |
'hexagon-pattern' => __('Hexagon Pattern', 'master-addons'), |
| 119 |
'triangles-pattern' => __('Triangles Pattern', 'master-addons'), |
| 120 |
'zigzag-horizontal' => __('Zigzag Horizontal', 'master-addons'), |
| 121 |
'zigzag-vertical' => __('Zigzag Vertical', 'master-addons'), |
| 122 |
'tartan' => __('Tartan', 'master-addons'), |
| 123 |
'plaid-subtle' => __('Plaid Subtle', 'master-addons'), |
| 124 |
|
| 125 |
// Technical Patterns |
| 126 |
'blueprint' => __('Blueprint', 'master-addons'), |
| 127 |
'blueprint-dark' => __('Blueprint Dark', 'master-addons'), |
| 128 |
'circuit-board' => __('Circuit Board', 'master-addons'), |
| 129 |
'graph-paper' => __('Graph Paper', 'master-addons'), |
| 130 |
'notebook' => __('Notebook', 'master-addons'), |
| 131 |
|
| 132 |
// Cultural Patterns |
| 133 |
'moroccan' => __('Moroccan', 'master-addons'), |
| 134 |
'japanese-seigaiha' => __('Japanese Seigaiha', 'master-addons'), |
| 135 |
'art-deco' => __('Art Deco', 'master-addons'), |
| 136 |
'vintage-wallpaper' => __('Vintage Wallpaper', 'master-addons'), |
| 137 |
|
| 138 |
// Texture Patterns |
| 139 |
'noise-texture' => __('Noise Texture', 'master-addons'), |
| 140 |
'fabric-texture' => __('Fabric Texture', 'master-addons'), |
| 141 |
'wood-grain' => __('Wood Grain', 'master-addons'), |
| 142 |
'marble-veins' => __('Marble Veins', 'master-addons'), |
| 143 |
'paper-texture' => __('Paper Texture', 'master-addons'), |
| 144 |
|
| 145 |
// Artistic Patterns |
| 146 |
'crosshatch-art' => __('Crosshatch Art', 'master-addons'), |
| 147 |
'stippling' => __('Stippling', 'master-addons'), |
| 148 |
'sketch-lines' => __('Sketch Lines', 'master-addons'), |
| 149 |
'watercolor-wash' => __('Watercolor Wash', 'master-addons'), |
| 150 |
'crosshatch-art-dark' => __('Crosshatch Art Dark', 'master-addons'), |
| 151 |
], |
| 152 |
'condition' => ['jltma_enable_pattern' => 'yes'], |
| 153 |
] |
| 154 |
); |
| 155 |
|
| 156 |
// Z-Index for layering with Elementor backgrounds |
| 157 |
$element->add_control( |
| 158 |
'jltma_pattern_z_index', |
| 159 |
[ |
| 160 |
'label' => __('Z-Index', 'master-addons'), |
| 161 |
'type' => Controls_Manager::SLIDER, |
| 162 |
'range' => ['px' => ['min' => -10, 'max' => 10, 'step' => 1]], |
| 163 |
'default' => ['size' => '', 'unit' => 'px'], |
| 164 |
'condition' => ['jltma_enable_pattern' => 'yes'], |
| 165 |
'description' => __('Set layering position relative to Elementor background', 'master-addons'), |
| 166 |
] |
| 167 |
); |
| 168 |
|
| 169 |
|
| 170 |
// End the patterns section |
| 171 |
$element->end_controls_section(); |
| 172 |
} |
| 173 |
|
| 174 |
protected function add_actions() |
| 175 |
{ |
| 176 |
// Add separate patterns section after background sections |
| 177 |
add_action('elementor/element/after_section_end', [$this, 'register_controls'], 10, 3); |
| 178 |
|
| 179 |
// Add print template for editor preview |
| 180 |
add_action('elementor/element/print_template', [$this, '_print_template'], 10, 2); |
| 181 |
add_action('elementor/section/print_template', [$this, '_print_template'], 10, 2); |
| 182 |
add_action('elementor/column/print_template', [$this, '_print_template'], 10, 2); |
| 183 |
add_action('elementor/container/print_template', [$this, '_print_template'], 10, 2); |
| 184 |
|
| 185 |
// Apply inline styles |
| 186 |
add_action('elementor/frontend/section/before_render', [$this, 'before_render'], 10, 1); |
| 187 |
add_action('elementor/frontend/column/before_render', [$this, 'before_render'], 10, 1); |
| 188 |
add_action('elementor/frontend/container/before_render', [$this, 'before_render'], 10, 1); |
| 189 |
add_action('elementor/frontend/widget/before_render', [$this, 'before_render'], 10, 1); |
| 190 |
} |
| 191 |
|
| 192 |
public function register_controls($element, $section_id, $args) |
| 193 |
{ |
| 194 |
// Add patterns section to section/column/container after their background sections |
| 195 |
// and to all widgets after _section_style (common style section) |
| 196 |
$is_layout = ( |
| 197 |
('section' === $element->get_name() && 'section_background' === $section_id) || |
| 198 |
('column' === $element->get_name() && 'section_style' === $section_id) || |
| 199 |
('container' === $element->get_name() && 'section_background' === $section_id) |
| 200 |
); |
| 201 |
|
| 202 |
$is_widget = ( |
| 203 |
!in_array($element->get_name(), ['section', 'column', 'container']) && |
| 204 |
'_section_style' === $section_id |
| 205 |
); |
| 206 |
|
| 207 |
if ($is_layout || $is_widget) { |
| 208 |
$this->add_controls($element, $args); |
| 209 |
} |
| 210 |
} |
| 211 |
|
| 212 |
public function before_render($element) |
| 213 |
{ |
| 214 |
$settings = $element->get_settings_for_display(); |
| 215 |
|
| 216 |
if (empty($settings['jltma_enable_pattern']) || $settings['jltma_enable_pattern'] !== 'yes') { |
| 217 |
return; |
| 218 |
} |
| 219 |
|
| 220 |
// Get z-index for layering with Elementor backgrounds |
| 221 |
$z_index = isset($settings['jltma_pattern_z_index']['size']) ? $settings['jltma_pattern_z_index']['size'] : 1; |
| 222 |
|
| 223 |
$pattern_css = ''; |
| 224 |
$pattern_style = $settings['jltma_pattern_style']; |
| 225 |
|
| 226 |
// All 77 PatternCraft Patterns - Exactly as defined in source |
| 227 |
switch ($pattern_style) { |
| 228 |
// Decorative Gradients |
| 229 |
case 'top-gradient-radial': |
| 230 |
$pattern_css = "background: radial-gradient(125% 125% at 50% 10%, #fff 40%, #6366f1 100%);"; |
| 231 |
break; |
| 232 |
|
| 233 |
case 'bottom-gradient-radial': |
| 234 |
$pattern_css = "background: radial-gradient(125% 125% at 50% 90%, #fff 40%, #6366f1 100%);"; |
| 235 |
break; |
| 236 |
|
| 237 |
case 'bottom-violet-radial': |
| 238 |
$pattern_css = "background: radial-gradient(125% 125% at 50% 90%, #fff 40%, #7c3aed 100%);"; |
| 239 |
break; |
| 240 |
|
| 241 |
case 'bottom-slate-radial': |
| 242 |
$pattern_css = "background: radial-gradient(125% 125% at 50% 90%, #fff 40%, #475569 100%);"; |
| 243 |
break; |
| 244 |
|
| 245 |
case 'radial-teal-glow': |
| 246 |
$pattern_css = "background: #ffffff; background-image: radial-gradient(125% 125% at 50% 90%, #ffffff 40%, #14b8a6 100%); background-size: 100% 100%;"; |
| 247 |
break; |
| 248 |
|
| 249 |
case 'radial-pink-glow': |
| 250 |
$pattern_css = "background: #ffffff; background-image: radial-gradient(125% 125% at 50% 90%, #ffffff 40%, #ec4899 100%); background-size: 100% 100%;"; |
| 251 |
break; |
| 252 |
|
| 253 |
case 'radial-amber-glow': |
| 254 |
$pattern_css = "background: #ffffff; background-image: radial-gradient(125% 125% at 50% 90%, #ffffff 40%, #f59e0b 100%); background-size: 100% 100%;"; |
| 255 |
break; |
| 256 |
|
| 257 |
case 'radial-emerald-glow': |
| 258 |
$pattern_css = "background: #ffffff; background-image: radial-gradient(125% 125% at 50% 90%, #ffffff 40%, #10b981 100%); background-size: 100% 100%;"; |
| 259 |
break; |
| 260 |
|
| 261 |
// Dark Decorative |
| 262 |
case 'dark-horizon-glow': |
| 263 |
$pattern_css = "background: #000000; background-image: radial-gradient(125% 125% at 50% 90%, #000000 40%, #0d1a36 100%); background-size: 100% 100%;"; |
| 264 |
break; |
| 265 |
|
| 266 |
case 'crimson-depth': |
| 267 |
$pattern_css = "background: #000000; background-image: radial-gradient(125% 125% at 50% 100%, #000000 40%, #2b0707 100%); background-size: 100% 100%;"; |
| 268 |
break; |
| 269 |
|
| 270 |
case 'emerald-void': |
| 271 |
$pattern_css = "background: #000000; background-image: radial-gradient(125% 125% at 50% 90%, #000000 40%, #072607 100%); background-size: 100% 100%;"; |
| 272 |
break; |
| 273 |
|
| 274 |
case 'violet-abyss': |
| 275 |
$pattern_css = "background: #000000; background-image: radial-gradient(125% 125% at 50% 90%, #000000 40%, #2b092b 100%); background-size: 100% 100%;"; |
| 276 |
break; |
| 277 |
|
| 278 |
case 'azure-depths': |
| 279 |
$pattern_css = "background: #000000; background-image: radial-gradient(125% 125% at 50% 100%, #000000 40%, #010133 100%); background-size: 100% 100%;"; |
| 280 |
break; |
| 281 |
|
| 282 |
case 'orchid-depths': |
| 283 |
$pattern_css = "background: #000000; background-image: radial-gradient(125% 125% at 50% 100%, #000000 40%, #350136 100%); background-size: 100% 100%;"; |
| 284 |
break; |
| 285 |
|
| 286 |
case 'dark-horizon-glow-top': |
| 287 |
$pattern_css = "background: radial-gradient(125% 125% at 50% 10%, #000000 40%, #0d1a36 100%);"; |
| 288 |
break; |
| 289 |
|
| 290 |
case 'crimson-depth-top': |
| 291 |
$pattern_css = "background: radial-gradient(125% 125% at 50% 10%, #000000 40%, #2b0707 100%);"; |
| 292 |
break; |
| 293 |
|
| 294 |
case 'emerald-void-top': |
| 295 |
$pattern_css = "background: radial-gradient(125% 125% at 50% 10%, #000000 40%, #072607 100%);"; |
| 296 |
break; |
| 297 |
|
| 298 |
case 'violet-abyss-top': |
| 299 |
$pattern_css = "background: radial-gradient(125% 125% at 50% 10%, #000000 40%, #2b092b 100%);"; |
| 300 |
break; |
| 301 |
|
| 302 |
case 'azure-depths-top': |
| 303 |
$pattern_css = "background: radial-gradient(125% 125% at 50% 10%, #000000 40%, #010133 100%);"; |
| 304 |
break; |
| 305 |
|
| 306 |
case 'orchid-depths-top': |
| 307 |
$pattern_css = "background: radial-gradient(125% 125% at 50% 10%, #000000 40%, #350136 100%);"; |
| 308 |
break; |
| 309 |
|
| 310 |
// Geometric Grid Patterns |
| 311 |
case 'purple-gradient-grid-right': |
| 312 |
$pattern_css = "background: #ffffff; background-image: linear-gradient(to right, #f0f0f0 1px, transparent 1px), linear-gradient(to bottom, #f0f0f0 1px, transparent 1px), radial-gradient(circle 800px at 100% 200px, #d5c5ff, transparent); background-size: 96px 64px, 96px 64px, 100% 100%;"; |
| 313 |
break; |
| 314 |
|
| 315 |
case 'purple-gradient-grid-left': |
| 316 |
$pattern_css = "background: #ffffff; background-image: linear-gradient(to right, #f0f0f0 1px, transparent 1px), linear-gradient(to bottom, #f0f0f0 1px, transparent 1px), radial-gradient(circle 800px at 0% 200px, #d5c5ff, transparent); background-size: 96px 64px, 96px 64px, 100% 100%;"; |
| 317 |
break; |
| 318 |
|
| 319 |
case 'dual-gradient-overlay-strong': |
| 320 |
$pattern_css = "background: #ffffff; background-image: linear-gradient(to right, rgba(229,231,235,0.8) 1px, transparent 1px), linear-gradient(to bottom, rgba(229,231,235,0.8) 1px, transparent 1px), radial-gradient(circle 500px at 20% 80%, rgba(139,92,246,0.3), transparent), radial-gradient(circle 500px at 80% 20%, rgba(59,130,246,0.3), transparent); background-size: 48px 48px, 48px 48px, 100% 100%, 100% 100%;"; |
| 321 |
break; |
| 322 |
|
| 323 |
case 'dual-gradient-overlay-strong-swapped': |
| 324 |
$pattern_css = "background: #ffffff; background-image: linear-gradient(to right, rgba(229,231,235,0.8) 1px, transparent 1px), linear-gradient(to bottom, rgba(229,231,235,0.8) 1px, transparent 1px), radial-gradient(circle 500px at 20% 20%, rgba(139,92,246,0.3), transparent), radial-gradient(circle 500px at 80% 80%, rgba(59,130,246,0.3), transparent); background-size: 48px 48px, 48px 48px, 100% 100%, 100% 100%;"; |
| 325 |
break; |
| 326 |
|
| 327 |
case 'dual-gradient-overlay-top': |
| 328 |
$pattern_css = "background: #ffffff; background-image: linear-gradient(to right, rgba(229,231,235,0.8) 1px, transparent 1px), linear-gradient(to bottom, rgba(229,231,235,0.8) 1px, transparent 1px), radial-gradient(circle 500px at 0% 20%, rgba(139,92,246,0.3), transparent), radial-gradient(circle 500px at 100% 0%, rgba(59,130,246,0.3), transparent); background-size: 48px 48px, 48px 48px, 100% 100%, 100% 100%;"; |
| 329 |
break; |
| 330 |
|
| 331 |
case 'dual-gradient-overlay-bottom': |
| 332 |
$pattern_css = "background: #ffffff; background-image: linear-gradient(to right, rgba(229,231,235,0.8) 1px, transparent 1px), linear-gradient(to bottom, rgba(229,231,235,0.8) 1px, transparent 1px), radial-gradient(circle 500px at 20% 100%, rgba(139,92,246,0.3), transparent), radial-gradient(circle 500px at 100% 80%, rgba(59,130,246,0.3), transparent); background-size: 48px 48px, 48px 48px, 100% 100%, 100% 100%;"; |
| 333 |
break; |
| 334 |
|
| 335 |
case 'top-fade-grid': |
| 336 |
$pattern_css = "background: #f8fafc; background-image: linear-gradient(to right, #e2e8f0 1px, transparent 1px), linear-gradient(to bottom, #e2e8f0 1px, transparent 1px); background-size: 20px 30px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 60%, transparent 100%); mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 60%, transparent 100%);"; |
| 337 |
break; |
| 338 |
|
| 339 |
case 'bottom-fade-grid': |
| 340 |
$pattern_css = "background: #f8fafc; background-image: linear-gradient(to right, #e2e8f0 1px, transparent 1px), linear-gradient(to bottom, #e2e8f0 1px, transparent 1px); background-size: 20px 30px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 100%, #000 60%, transparent 100%); mask-image: radial-gradient(ellipse 70% 60% at 50% 100%, #000 60%, transparent 100%);"; |
| 341 |
break; |
| 342 |
|
| 343 |
case 'diagonal-fade-grid-left': |
| 344 |
$pattern_css = "background: #f9fafb; background-image: linear-gradient(to right, #d1d5db 1px, transparent 1px), linear-gradient(to bottom, #d1d5db 1px, transparent 1px); background-size: 32px 32px; -webkit-mask-image: radial-gradient(ellipse 80% 80% at 0% 0%, #000 50%, transparent 90%); mask-image: radial-gradient(ellipse 80% 80% at 0% 0%, #000 50%, transparent 90%);"; |
| 345 |
break; |
| 346 |
|
| 347 |
case 'diagonal-fade-grid-right': |
| 348 |
$pattern_css = "background: #f9fafb; background-image: linear-gradient(to right, #d1d5db 1px, transparent 1px), linear-gradient(to bottom, #d1d5db 1px, transparent 1px); background-size: 32px 32px; -webkit-mask-image: radial-gradient(ellipse 80% 80% at 100% 0%, #000 50%, transparent 90%); mask-image: radial-gradient(ellipse 80% 80% at 100% 0%, #000 50%, transparent 90%);"; |
| 349 |
break; |
| 350 |
|
| 351 |
// Radial Glow Effects |
| 352 |
case 'dark-radial-glow': |
| 353 |
$pattern_css = "background: #020617; background-image: radial-gradient(circle 500px at 50% 200px, #3e3e3e, transparent);"; |
| 354 |
break; |
| 355 |
|
| 356 |
case 'blue-radial-glow': |
| 357 |
$pattern_css = "background: #0f172a; background-image: radial-gradient(circle 600px at 50% 50%, rgba(59,130,246,0.3), transparent);"; |
| 358 |
break; |
| 359 |
|
| 360 |
case 'purple-radial-glow': |
| 361 |
$pattern_css = "background: #020617; background-image: radial-gradient(circle 500px at 50% 100px, rgba(139,92,246,0.4), transparent);"; |
| 362 |
break; |
| 363 |
|
| 364 |
case 'emerald-radial-glow': |
| 365 |
$pattern_css = "background: #020617; background-image: radial-gradient(circle 500px at 50% 300px, rgba(16,185,129,0.35), transparent);"; |
| 366 |
break; |
| 367 |
|
| 368 |
// Aurora Effects |
| 369 |
case 'aurora-dream-corner-whispers': |
| 370 |
$pattern_css = "background: #f7eaff; background-image: radial-gradient(ellipse 85% 65% at 8% 8%, rgba(175, 109, 255, 0.42), transparent 60%), radial-gradient(ellipse 75% 60% at 75% 35%, rgba(255, 235, 170, 0.55), transparent 62%), radial-gradient(ellipse 70% 60% at 15% 80%, rgba(255, 100, 180, 0.40), transparent 62%), radial-gradient(ellipse 70% 60% at 92% 92%, rgba(120, 190, 255, 0.45), transparent 62%), linear-gradient(180deg, #f7eaff 0%, #fde2ea 100%); background-size: 100% 100%;"; |
| 371 |
break; |
| 372 |
|
| 373 |
case 'aurora-dream-soft-harmony': |
| 374 |
$pattern_css = "background: #f7eaff; background-image: radial-gradient(ellipse 80% 60% at 60% 20%, rgba(175, 109, 255, 0.50), transparent 65%), radial-gradient(ellipse 70% 60% at 20% 80%, rgba(255, 100, 180, 0.45), transparent 65%), radial-gradient(ellipse 60% 50% at 60% 65%, rgba(255, 235, 170, 0.43), transparent 62%), radial-gradient(ellipse 65% 40% at 50% 60%, rgba(120, 190, 255, 0.48), transparent 68%), linear-gradient(180deg, #f7eaff 0%, #fde2ea 100%); background-size: 100% 100%;"; |
| 375 |
break; |
| 376 |
|
| 377 |
case 'aurora-dream-diagonal-flow': |
| 378 |
$pattern_css = "background: #f7eaff; background-image: radial-gradient(ellipse 80% 60% at 5% 40%, rgba(175, 109, 255, 0.48), transparent 67%), radial-gradient(ellipse 70% 60% at 45% 45%, rgba(255, 100, 180, 0.41), transparent 67%), radial-gradient(ellipse 62% 52% at 83% 76%, rgba(255, 235, 170, 0.44), transparent 63%), radial-gradient(ellipse 60% 48% at 75% 20%, rgba(120, 190, 255, 0.36), transparent 66%), linear-gradient(45deg, #f7eaff 0%, #fde2ea 100%); background-size: 100% 100%;"; |
| 379 |
break; |
| 380 |
|
| 381 |
case 'aurora-dream-central-burst': |
| 382 |
$pattern_css = "background: #f7eaff; background-image: radial-gradient(ellipse 50% 60% at 50% 50%, rgba(175, 109, 255, 0.52), transparent 68%), radial-gradient(ellipse 65% 55% at 40% 40%, rgba(255, 100, 180, 0.40), transparent 62%), radial-gradient(ellipse 70% 50% at 60% 60%, rgba(255, 235, 170, 0.48), transparent 67%), radial-gradient(ellipse 55% 65% at 35% 65%, rgba(120, 190, 255, 0.44), transparent 62%), linear-gradient(180deg, #f7eaff 0%, #fde2ea 100%); background-size: 100% 100%;"; |
| 383 |
break; |
| 384 |
|
| 385 |
// Basic Patterns |
| 386 |
case 'waves-vertical': |
| 387 |
$pattern_css = "background: linear-gradient(90deg, #ffffff 0%, #ffffff 50%, #f3f4f6 50%, #f3f4f6 100%); background-size: 20px 100%;"; |
| 388 |
break; |
| 389 |
|
| 390 |
case 'waves-horizontal': |
| 391 |
$pattern_css = "background: linear-gradient(180deg, #ffffff 0%, #ffffff 50%, #f3f4f6 50%, #f3f4f6 100%); background-size: 100% 20px;"; |
| 392 |
break; |
| 393 |
|
| 394 |
case 'diagonal-stripes': |
| 395 |
$pattern_css = "background: repeating-linear-gradient(45deg, #f3f4f6 0px, #f3f4f6 10px, #ffffff 10px, #ffffff 20px);"; |
| 396 |
break; |
| 397 |
|
| 398 |
case 'dots-pattern': |
| 399 |
$pattern_css = "background-image: radial-gradient(circle, #d1d5db 1px, transparent 1px); background-size: 20px 20px;"; |
| 400 |
break; |
| 401 |
|
| 402 |
case 'crosshatch': |
| 403 |
$pattern_css = "background: #f9fafb; background-image: linear-gradient(45deg, #e5e7eb 25%, transparent 25%), linear-gradient(135deg, #e5e7eb 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e5e7eb 75%), linear-gradient(135deg, transparent 75%, #e5e7eb 75%); background-size: 20px 20px; background-position: 0 0, 10px 0, 10px -10px, 0px 10px;"; |
| 404 |
break; |
| 405 |
|
| 406 |
// Grid Patterns |
| 407 |
case 'grid-small': |
| 408 |
$pattern_css = "background-image: linear-gradient(to right, #e5e7eb 1px, transparent 1px), linear-gradient(to bottom, #e5e7eb 1px, transparent 1px); background-size: 20px 20px;"; |
| 409 |
break; |
| 410 |
|
| 411 |
case 'grid-medium': |
| 412 |
$pattern_css = "background-image: linear-gradient(to right, #d1d5db 1px, transparent 1px), linear-gradient(to bottom, #d1d5db 1px, transparent 1px); background-size: 40px 40px;"; |
| 413 |
break; |
| 414 |
|
| 415 |
case 'grid-large': |
| 416 |
$pattern_css = "background-image: linear-gradient(to right, #9ca3af 1px, transparent 1px), linear-gradient(to bottom, #9ca3af 1px, transparent 1px); background-size: 80px 80px;"; |
| 417 |
break; |
| 418 |
|
| 419 |
case 'dot-grid': |
| 420 |
$pattern_css = "background-image: radial-gradient(circle, #d1d5db 1px, transparent 1px); background-size: 30px 30px;"; |
| 421 |
break; |
| 422 |
|
| 423 |
case 'isometric-grid': |
| 424 |
$pattern_css = "background-image: linear-gradient(30deg, #e5e7eb 12%, transparent 12.5%, transparent 87%, #e5e7eb 87.5%, #e5e7eb), linear-gradient(150deg, #e5e7eb 12%, transparent 12.5%, transparent 87%, #e5e7eb 87.5%, #e5e7eb), linear-gradient(30deg, #e5e7eb 12%, transparent 12.5%, transparent 87%, #e5e7eb 87.5%, #e5e7eb), linear-gradient(150deg, #e5e7eb 12%, transparent 12.5%, transparent 87%, #e5e7eb 87.5%, #e5e7eb); background-size: 80px 140px; background-position: 0 0, 0 0, 40px 70px, 40px 70px;"; |
| 425 |
break; |
| 426 |
|
| 427 |
case 'hexagon-pattern': |
| 428 |
$pattern_css = "background: #ffffff; background-image: linear-gradient(30deg, #f3f4f6 12%, transparent 12.5%, transparent 87%, #f3f4f6 87.5%, #f3f4f6), linear-gradient(150deg, #f3f4f6 12%, transparent 12.5%, transparent 87%, #f3f4f6 87.5%, #f3f4f6), linear-gradient(30deg, #f3f4f6 12%, transparent 12.5%, transparent 87%, #f3f4f6 87.5%, #f3f4f6), linear-gradient(150deg, #f3f4f6 12%, transparent 12.5%, transparent 87%, #f3f4f6 87.5%, #f3f4f6), linear-gradient(60deg, #f3f4f677 25%, transparent 25.5%, transparent 75%, #f3f4f677 75%, #f3f4f677), linear-gradient(60deg, #f3f4f677 25%, transparent 25.5%, transparent 75%, #f3f4f677 75%, #f3f4f677); background-size: 80px 140px; background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;"; |
| 429 |
break; |
| 430 |
|
| 431 |
case 'triangles-pattern': |
| 432 |
$pattern_css = "background: #ffffff; background-image: linear-gradient(45deg, #f3f4f6 25%, transparent 25%), linear-gradient(135deg, #f3f4f6 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f3f4f6 75%), linear-gradient(135deg, transparent 75%, #f3f4f6 75%); background-size: 30px 30px; background-position: 0 0, 15px 0, 15px -15px, 0px 15px;"; |
| 433 |
break; |
| 434 |
|
| 435 |
case 'zigzag-horizontal': |
| 436 |
$pattern_css = "background: linear-gradient(135deg, #f3f4f6 25%, transparent 25%) -15px 0, linear-gradient(225deg, #f3f4f6 25%, transparent 25%) -15px 0, linear-gradient(315deg, #f3f4f6 25%, transparent 25%), linear-gradient(45deg, #f3f4f6 25%, transparent 25%); background-size: 30px 30px;"; |
| 437 |
break; |
| 438 |
|
| 439 |
case 'zigzag-vertical': |
| 440 |
$pattern_css = "background: linear-gradient(45deg, #f3f4f6 25%, transparent 25%) 0 -15px, linear-gradient(315deg, #f3f4f6 25%, transparent 25%) 0 -15px, linear-gradient(225deg, #f3f4f6 25%, transparent 25%), linear-gradient(135deg, #f3f4f6 25%, transparent 25%); background-size: 30px 30px;"; |
| 441 |
break; |
| 442 |
|
| 443 |
case 'tartan': |
| 444 |
$pattern_css = "background: #f3f4f6; background-image: repeating-linear-gradient(45deg, #e5e7eb, #e5e7eb 10px, transparent 10px, transparent 20px), repeating-linear-gradient(135deg, #d1d5db, #d1d5db 5px, transparent 5px, transparent 15px), repeating-linear-gradient(90deg, transparent, transparent 10px, #e5e7eb 10px, #e5e7eb 20px), repeating-linear-gradient(0deg, transparent, transparent 10px, #d1d5db 10px, #d1d5db 20px);"; |
| 445 |
break; |
| 446 |
|
| 447 |
case 'plaid-subtle': |
| 448 |
$pattern_css = "background: #ffffff; background-image: repeating-linear-gradient(0deg, transparent, transparent 35px, rgba(229,231,235,0.5) 35px, rgba(229,231,235,0.5) 70px), repeating-linear-gradient(90deg, transparent, transparent 35px, rgba(209,213,219,0.5) 35px, rgba(209,213,219,0.5) 70px);"; |
| 449 |
break; |
| 450 |
|
| 451 |
// Technical Patterns |
| 452 |
case 'blueprint': |
| 453 |
$pattern_css = "background: #1e40af; background-image: linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px), linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px; background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;"; |
| 454 |
break; |
| 455 |
|
| 456 |
case 'blueprint-dark': |
| 457 |
$pattern_css = "background: #0f172a; background-image: linear-gradient(rgba(59,130,246,.2) 1px, transparent 1px), linear-gradient(90deg, rgba(59,130,246,.2) 1px, transparent 1px), linear-gradient(rgba(59,130,246,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(59,130,246,.1) 1px, transparent 1px); background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px; background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;"; |
| 458 |
break; |
| 459 |
|
| 460 |
case 'circuit-board': |
| 461 |
$pattern_css = "background: #1f2937; background-image: linear-gradient(rgba(34,197,94,.2) 1px, transparent 1px), linear-gradient(90deg, rgba(34,197,94,.2) 1px, transparent 1px), radial-gradient(circle at 20px 20px, rgba(34,197,94,.3) 2px, transparent 3px), radial-gradient(circle at 80px 80px, rgba(59,130,246,.3) 2px, transparent 3px); background-size: 100px 100px, 100px 100px, 100px 100px, 100px 100px;"; |
| 462 |
break; |
| 463 |
|
| 464 |
case 'graph-paper': |
| 465 |
$pattern_css = "background: #ffffff; background-image: linear-gradient(rgba(0,0,0,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.1) 1px, transparent 1px), linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.05) 1px, transparent 1px); background-size: 100px 100px, 100px 100px, 10px 10px, 10px 10px;"; |
| 466 |
break; |
| 467 |
|
| 468 |
case 'notebook': |
| 469 |
$pattern_css = "background: #fefefe; background-image: linear-gradient(to right, #fde047 0px, #fde047 1px, transparent 1px), linear-gradient(to bottom, rgba(0,0,0,.1) 0px, rgba(0,0,0,.1) 1px, transparent 1px), linear-gradient(to bottom, rgba(239,68,68,.3) 0px, rgba(239,68,68,.3) 1px, transparent 1px); background-size: 100% 30px, 100% 30px, 100% 30px; background-position: 40px 0, 0 0, 0 0;"; |
| 470 |
break; |
| 471 |
|
| 472 |
// Cultural Patterns |
| 473 |
case 'moroccan': |
| 474 |
$pattern_css = "background: #ffffff; background-image: radial-gradient(circle at 25% 25%, #f3f4f6 2%, transparent 3%), radial-gradient(circle at 75% 25%, #f3f4f6 2%, transparent 3%), radial-gradient(circle at 25% 75%, #f3f4f6 2%, transparent 3%), radial-gradient(circle at 75% 75%, #f3f4f6 2%, transparent 3%), linear-gradient(45deg, #e5e7eb 25%, transparent 25%, transparent 75%, #e5e7eb 75%), linear-gradient(135deg, #e5e7eb 25%, transparent 25%, transparent 75%, #e5e7eb 75%); background-size: 40px 40px;"; |
| 475 |
break; |
| 476 |
|
| 477 |
case 'japanese-seigaiha': |
| 478 |
$pattern_css = "background: #ffffff; background-image: radial-gradient(circle at 50% 100%, transparent 40%, rgba(59,130,246,.1) 40%, rgba(59,130,246,.1) 60%, transparent 60%), radial-gradient(circle at 0% 100%, transparent 40%, rgba(59,130,246,.05) 40%, rgba(59,130,246,.05) 60%, transparent 60%), radial-gradient(circle at 100% 100%, transparent 40%, rgba(59,130,246,.05) 40%, rgba(59,130,246,.05) 60%, transparent 60%); background-size: 80px 40px, 80px 40px, 80px 40px; background-position: 0 0, -40px 0, 40px 0;"; |
| 479 |
break; |
| 480 |
|
| 481 |
case 'art-deco': |
| 482 |
$pattern_css = "background: #fefefe; background-image: linear-gradient(45deg, #f3f4f6 25%, transparent 25%), linear-gradient(135deg, #f3f4f6 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e5e7eb 75%), linear-gradient(135deg, transparent 75%, #e5e7eb 75%), linear-gradient(0deg, #d1d5db, #d1d5db 2px, transparent 2px, transparent 18px, #d1d5db 18px, #d1d5db 20px); background-size: 20px 20px, 20px 20px, 20px 20px, 20px 20px, 100% 20px; background-position: 0 0, 10px 0, 10px -10px, 0 10px, 0 0;"; |
| 483 |
break; |
| 484 |
|
| 485 |
case 'vintage-wallpaper': |
| 486 |
$pattern_css = "background: #f9fafb; background-image: radial-gradient(circle at 20% 20%, rgba(239,68,68,.1) 20%, transparent 21%), radial-gradient(circle at 80% 20%, rgba(59,130,246,.1) 20%, transparent 21%), radial-gradient(circle at 20% 80%, rgba(34,197,94,.1) 20%, transparent 21%), radial-gradient(circle at 80% 80%, rgba(245,158,11,.1) 20%, transparent 21%), linear-gradient(45deg, rgba(156,163,175,.1) 25%, transparent 25%), linear-gradient(135deg, rgba(156,163,175,.1) 25%, transparent 25%); background-size: 100px 100px, 100px 100px, 100px 100px, 100px 100px, 20px 20px, 20px 20px;"; |
| 487 |
break; |
| 488 |
|
| 489 |
// Texture Patterns |
| 490 |
case 'noise-texture': |
| 491 |
$pattern_css = "background: #ffffff; opacity: 0.05; background-image: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E\");"; |
| 492 |
break; |
| 493 |
|
| 494 |
case 'fabric-texture': |
| 495 |
$pattern_css = "background: #f3f4f6; background-image: linear-gradient(45deg, rgba(0,0,0,.1) 25%, transparent 25%), linear-gradient(135deg, rgba(0,0,0,.1) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(0,0,0,.05) 75%), linear-gradient(135deg, transparent 75%, rgba(0,0,0,.05) 75%); background-size: 2px 2px; background-position: 0 0, 1px 0, 1px -1px, 0px 1px;"; |
| 496 |
break; |
| 497 |
|
| 498 |
case 'wood-grain': |
| 499 |
$pattern_css = "background: #92400e; background-image: linear-gradient(90deg, rgba(180,83,9,.3) 50%, transparent 50%), linear-gradient(rgba(180,83,9,.2) 50%, rgba(217,119,6,.2) 50%), linear-gradient(90deg, transparent 50%, rgba(180,83,9,.1) 50%); background-size: 40px 3px, 100% 2px, 20px 8px;"; |
| 500 |
break; |
| 501 |
|
| 502 |
case 'marble-veins': |
| 503 |
$pattern_css = "background: #f8fafc; background-image: linear-gradient(45deg, rgba(148,163,184,.2) 1px, transparent 1px), linear-gradient(135deg, rgba(148,163,184,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(203,213,225,.3) 0.5px, transparent 0.5px); background-size: 60px 60px, 80px 80px, 100% 20px;"; |
| 504 |
break; |
| 505 |
|
| 506 |
case 'paper-texture': |
| 507 |
$pattern_css = "background: #fefefe; background-image: radial-gradient(circle at 1px 1px, rgba(0,0,0,.05) 1px, transparent 0), radial-gradient(circle at 2px 3px, rgba(0,0,0,.03) 1px, transparent 0), radial-gradient(circle at 3px 2px, rgba(0,0,0,.04) 1px, transparent 0); background-size: 10px 10px, 15px 15px, 12px 12px;"; |
| 508 |
break; |
| 509 |
|
| 510 |
// Artistic Patterns |
| 511 |
case 'crosshatch-art': |
| 512 |
$pattern_css = "background: #ffffff; background-image: linear-gradient(45deg, rgba(0,0,0,.1) 1px, transparent 1px), linear-gradient(135deg, rgba(0,0,0,.1) 1px, transparent 1px); background-size: 10px 10px, 10px 10px; background-position: 0 0, 5px 5px;"; |
| 513 |
break; |
| 514 |
|
| 515 |
case 'stippling': |
| 516 |
$pattern_css = "background: #ffffff; background-image: radial-gradient(circle at 25% 25%, #000 0.5px, transparent 0.5px), radial-gradient(circle at 75% 25%, #000 0.3px, transparent 0.3px), radial-gradient(circle at 25% 75%, #000 0.4px, transparent 0.4px), radial-gradient(circle at 75% 75%, #000 0.2px, transparent 0.2px); background-size: 20px 20px; opacity: 0.1;"; |
| 517 |
break; |
| 518 |
|
| 519 |
case 'sketch-lines': |
| 520 |
$pattern_css = "background: #ffffff; background-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.1) 50%, transparent 100%), linear-gradient(45deg, transparent 0%, rgba(0,0,0,.05) 50%, transparent 100%), linear-gradient(135deg, transparent 0%, rgba(0,0,0,.05) 50%, transparent 100%); background-size: 30px 1px, 20px 1px, 25px 1px;"; |
| 521 |
break; |
| 522 |
|
| 523 |
case 'watercolor-wash': |
| 524 |
$pattern_css = "background: radial-gradient(ellipse at top, rgba(139,92,246,.1), transparent), radial-gradient(ellipse at bottom, rgba(59,130,246,.1), transparent);"; |
| 525 |
break; |
| 526 |
|
| 527 |
case 'crosshatch-art-dark': |
| 528 |
$pattern_css = "background: #111827; background-image: linear-gradient(45deg, rgba(255,255,255,.1) 1px, transparent 1px), linear-gradient(135deg, rgba(255,255,255,.1) 1px, transparent 1px); background-size: 10px 10px, 10px 10px; background-position: 0 0, 5px 5px;"; |
| 529 |
break; |
| 530 |
|
| 531 |
default: |
| 532 |
$pattern_css = "background: #f8fafc; background-image: linear-gradient(to right, #e2e8f0 1px, transparent 1px), linear-gradient(to bottom, #e2e8f0 1px, transparent 1px); background-size: 20px 20px;"; |
| 533 |
break; |
| 534 |
} |
| 535 |
|
| 536 |
if ($pattern_css) { |
| 537 |
// Add z-index for proper layering with Elementor backgrounds |
| 538 |
$final_css = $pattern_css . '; position: relative; z-index: ' . $z_index . ';'; |
| 539 |
$element->add_render_attribute('_wrapper', 'style', preg_replace('/\s+/', ' ', trim($final_css))); |
| 540 |
} |
| 541 |
} |
| 542 |
|
| 543 |
public function _print_template($template, $widget) |
| 544 |
{ |
| 545 |
// Only modify JS templates for layout elements (section/column/container). |
| 546 |
// Widgets use server-side PHP rendering; their patterns are handled by before_render(). |
| 547 |
if ( ! in_array( $widget->get_name(), [ 'section', 'column', 'container' ], true ) ) { |
| 548 |
return $template; |
| 549 |
} |
| 550 |
|
| 551 |
ob_start(); |
| 552 |
?> |
| 553 |
<# if (settings.jltma_enable_pattern == 'yes') { #> |
| 554 |
<div class="jltma-pattern-wrapper" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: {{ settings.jltma_pattern_z_index.size }};"> |
| 555 |
<# |
| 556 |
var patternStyle = settings.jltma_pattern_style || 'top-gradient-radial'; |
| 557 |
var patternCSS = ''; |
| 558 |
|
| 559 |
// All 77 PatternCraft patterns for editor preview |
| 560 |
switch(patternStyle) { |
| 561 |
case 'top-gradient-radial': |
| 562 |
patternCSS = 'background: radial-gradient(125% 125% at 50% 10%, #fff 40%, #6366f1 100%);'; |
| 563 |
break; |
| 564 |
case 'bottom-gradient-radial': |
| 565 |
patternCSS = 'background: radial-gradient(125% 125% at 50% 90%, #fff 40%, #6366f1 100%);'; |
| 566 |
break; |
| 567 |
case 'bottom-violet-radial': |
| 568 |
patternCSS = 'background: radial-gradient(125% 125% at 50% 90%, #fff 40%, #7c3aed 100%);'; |
| 569 |
break; |
| 570 |
case 'bottom-slate-radial': |
| 571 |
patternCSS = 'background: radial-gradient(125% 125% at 50% 90%, #fff 40%, #475569 100%);'; |
| 572 |
break; |
| 573 |
case 'radial-teal-glow': |
| 574 |
patternCSS = 'background: #ffffff; background-image: radial-gradient(125% 125% at 50% 90%, #ffffff 40%, #14b8a6 100%); background-size: 100% 100%;'; |
| 575 |
break; |
| 576 |
case 'radial-pink-glow': |
| 577 |
patternCSS = 'background: #ffffff; background-image: radial-gradient(125% 125% at 50% 90%, #ffffff 40%, #ec4899 100%); background-size: 100% 100%;'; |
| 578 |
break; |
| 579 |
case 'radial-amber-glow': |
| 580 |
patternCSS = 'background: #ffffff; background-image: radial-gradient(125% 125% at 50% 90%, #ffffff 40%, #f59e0b 100%); background-size: 100% 100%;'; |
| 581 |
break; |
| 582 |
case 'radial-emerald-glow': |
| 583 |
patternCSS = 'background: #ffffff; background-image: radial-gradient(125% 125% at 50% 90%, #ffffff 40%, #10b981 100%); background-size: 100% 100%;'; |
| 584 |
break; |
| 585 |
case 'dark-horizon-glow': |
| 586 |
patternCSS = 'background: #000000; background-image: radial-gradient(125% 125% at 50% 90%, #000000 40%, #0d1a36 100%); background-size: 100% 100%;'; |
| 587 |
break; |
| 588 |
case 'crimson-depth': |
| 589 |
patternCSS = 'background: #000000; background-image: radial-gradient(125% 125% at 50% 100%, #000000 40%, #2b0707 100%); background-size: 100% 100%;'; |
| 590 |
break; |
| 591 |
case 'emerald-void': |
| 592 |
patternCSS = 'background: #000000; background-image: radial-gradient(125% 125% at 50% 90%, #000000 40%, #072607 100%); background-size: 100% 100%;'; |
| 593 |
break; |
| 594 |
case 'violet-abyss': |
| 595 |
patternCSS = 'background: #000000; background-image: radial-gradient(125% 125% at 50% 90%, #000000 40%, #2b092b 100%); background-size: 100% 100%;'; |
| 596 |
break; |
| 597 |
case 'azure-depths': |
| 598 |
patternCSS = 'background: #000000; background-image: radial-gradient(125% 125% at 50% 100%, #000000 40%, #010133 100%); background-size: 100% 100%;'; |
| 599 |
break; |
| 600 |
case 'orchid-depths': |
| 601 |
patternCSS = 'background: #000000; background-image: radial-gradient(125% 125% at 50% 100%, #000000 40%, #350136 100%); background-size: 100% 100%;'; |
| 602 |
break; |
| 603 |
case 'dark-horizon-glow-top': |
| 604 |
patternCSS = 'background: radial-gradient(125% 125% at 50% 10%, #000000 40%, #0d1a36 100%);'; |
| 605 |
break; |
| 606 |
case 'crimson-depth-top': |
| 607 |
patternCSS = 'background: radial-gradient(125% 125% at 50% 10%, #000000 40%, #2b0707 100%);'; |
| 608 |
break; |
| 609 |
case 'emerald-void-top': |
| 610 |
patternCSS = 'background: radial-gradient(125% 125% at 50% 10%, #000000 40%, #072607 100%);'; |
| 611 |
break; |
| 612 |
case 'violet-abyss-top': |
| 613 |
patternCSS = 'background: radial-gradient(125% 125% at 50% 10%, #000000 40%, #2b092b 100%);'; |
| 614 |
break; |
| 615 |
case 'azure-depths-top': |
| 616 |
patternCSS = 'background: radial-gradient(125% 125% at 50% 10%, #000000 40%, #010133 100%);'; |
| 617 |
break; |
| 618 |
case 'orchid-depths-top': |
| 619 |
patternCSS = 'background: radial-gradient(125% 125% at 50% 10%, #000000 40%, #350136 100%);'; |
| 620 |
break; |
| 621 |
case 'purple-gradient-grid-right': |
| 622 |
patternCSS = 'background: #ffffff; background-image: linear-gradient(to right, #f0f0f0 1px, transparent 1px), linear-gradient(to bottom, #f0f0f0 1px, transparent 1px), radial-gradient(circle 800px at 100% 200px, #d5c5ff, transparent); background-size: 96px 64px, 96px 64px, 100% 100%;'; |
| 623 |
break; |
| 624 |
case 'purple-gradient-grid-left': |
| 625 |
patternCSS = 'background: #ffffff; background-image: linear-gradient(to right, #f0f0f0 1px, transparent 1px), linear-gradient(to bottom, #f0f0f0 1px, transparent 1px), radial-gradient(circle 800px at 0% 200px, #d5c5ff, transparent); background-size: 96px 64px, 96px 64px, 100% 100%;'; |
| 626 |
break; |
| 627 |
case 'dual-gradient-overlay-strong': |
| 628 |
patternCSS = 'background: #ffffff; background-image: linear-gradient(to right, rgba(229,231,235,0.8) 1px, transparent 1px), linear-gradient(to bottom, rgba(229,231,235,0.8) 1px, transparent 1px), radial-gradient(circle 500px at 20% 80%, rgba(139,92,246,0.3), transparent), radial-gradient(circle 500px at 80% 20%, rgba(59,130,246,0.3), transparent); background-size: 48px 48px, 48px 48px, 100% 100%, 100% 100%;'; |
| 629 |
break; |
| 630 |
case 'grid-small': |
| 631 |
patternCSS = 'background-image: linear-gradient(to right, #e5e7eb 1px, transparent 1px), linear-gradient(to bottom, #e5e7eb 1px, transparent 1px); background-size: 20px 20px;'; |
| 632 |
break; |
| 633 |
case 'grid-medium': |
| 634 |
patternCSS = 'background-image: linear-gradient(to right, #d1d5db 1px, transparent 1px), linear-gradient(to bottom, #d1d5db 1px, transparent 1px); background-size: 40px 40px;'; |
| 635 |
break; |
| 636 |
case 'grid-large': |
| 637 |
patternCSS = 'background-image: linear-gradient(to right, #9ca3af 1px, transparent 1px), linear-gradient(to bottom, #9ca3af 1px, transparent 1px); background-size: 80px 80px;'; |
| 638 |
break; |
| 639 |
case 'dots-pattern': |
| 640 |
patternCSS = 'background-image: radial-gradient(circle, #d1d5db 1px, transparent 1px); background-size: 20px 20px;'; |
| 641 |
break; |
| 642 |
case 'diagonal-stripes': |
| 643 |
patternCSS = 'background: repeating-linear-gradient(45deg, #f3f4f6 0px, #f3f4f6 10px, #ffffff 10px, #ffffff 20px);'; |
| 644 |
break; |
| 645 |
case 'circuit-board': |
| 646 |
patternCSS = 'background: #1f2937; background-image: linear-gradient(rgba(34,197,94,.2) 1px, transparent 1px), linear-gradient(90deg, rgba(34,197,94,.2) 1px, transparent 1px), radial-gradient(circle at 20px 20px, rgba(34,197,94,.3) 2px, transparent 3px), radial-gradient(circle at 80px 80px, rgba(59,130,246,.3) 2px, transparent 3px); background-size: 100px 100px, 100px 100px, 100px 100px, 100px 100px;'; |
| 647 |
break; |
| 648 |
case 'blueprint': |
| 649 |
patternCSS = 'background: #1e40af; background-image: linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px), linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px; background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;'; |
| 650 |
break; |
| 651 |
case 'aurora-dream-soft-harmony': |
| 652 |
patternCSS = 'background: #f7eaff; background-image: radial-gradient(ellipse 80% 60% at 60% 20%, rgba(175, 109, 255, 0.50), transparent 65%), radial-gradient(ellipse 70% 60% at 20% 80%, rgba(255, 100, 180, 0.45), transparent 65%), radial-gradient(ellipse 60% 50% at 60% 65%, rgba(255, 235, 170, 0.43), transparent 62%), radial-gradient(ellipse 65% 40% at 50% 60%, rgba(120, 190, 255, 0.48), transparent 68%), linear-gradient(180deg, #f7eaff 0%, #fde2ea 100%); background-size: 100% 100%;'; |
| 653 |
break; |
| 654 |
default: |
| 655 |
patternCSS = 'background: #f8fafc; background-image: linear-gradient(to right, #e2e8f0 1px, transparent 1px), linear-gradient(to bottom, #e2e8f0 1px, transparent 1px); background-size: 20px 20px;'; |
| 656 |
break; |
| 657 |
} |
| 658 |
#> |
| 659 |
<div style="width: 100%; height: 100%; position: absolute; top: 0; left: 0; {{{ patternCSS }}}"></div> |
| 660 |
</div> |
| 661 |
<# } #> |
| 662 |
<?php |
| 663 |
$patterns_content = ob_get_contents(); |
| 664 |
ob_end_clean(); |
| 665 |
|
| 666 |
$template = $patterns_content . $template; |
| 667 |
return $template; |
| 668 |
} |
| 669 |
|
| 670 |
public static function get_instance() |
| 671 |
{ |
| 672 |
if (!self::$instance) { |
| 673 |
self::$instance = new self; |
| 674 |
} |
| 675 |
return self::$instance; |
| 676 |
} |
| 677 |
} |
| 678 |
} |
| 679 |
|
| 680 |
if (class_exists('MasterAddons\Modules\Display\Patterns')) { |
| 681 |
Patterns::get_instance(); |
| 682 |
} |
| 683 |
|
