| @@ -1,0 +1,401 @@ | ||
| 1 | +/* Pricing Slider Widget Styles */ | |
| 2 | +.king-addons-pricing-slider { | |
| 3 | + position: relative; | |
| 4 | + margin: 20px 0; | |
| 5 | + max-width: 100%; | |
| 6 | + /* CSS variables for sizes are passed from PHP */ | |
| 7 | + /* Colors are applied directly by Elementor selectors */ | |
| 8 | +} | |
| 9 | + | |
| 10 | +.king-addons-pricing-slider__header { | |
| 11 | + margin-bottom: 20px; | |
| 12 | + text-align: center; | |
| 13 | +} | |
| 14 | + | |
| 15 | +.king-addons-pricing-slider__title { | |
| 16 | + margin-bottom: 10px; | |
| 17 | + font-size: 24px; | |
| 18 | + font-weight: 600; | |
| 19 | +} | |
| 20 | + | |
| 21 | +.king-addons-pricing-slider__description { | |
| 22 | + font-size: 16px; | |
| 23 | + color: #777; | |
| 24 | +} | |
| 25 | + | |
| 26 | +.king-addons-pricing-slider__controls { | |
| 27 | + margin-bottom: 20px; | |
| 28 | +} | |
| 29 | + | |
| 30 | +/* Slider container */ | |
| 31 | +.king-addons-pricing-slider__range-container { | |
| 32 | + position: relative; | |
| 33 | + margin: 10px 0; | |
| 34 | + height: calc(var(--slider-thumb-size) + 10px); | |
| 35 | + display: flex; | |
| 36 | + align-items: center; | |
| 37 | +} | |
| 38 | + | |
| 39 | +/* Background track */ | |
| 40 | +.king-addons-pricing-slider__track { | |
| 41 | + position: absolute; | |
| 42 | + top: 50%; | |
| 43 | + left: 0; | |
| 44 | + right: 0; | |
| 45 | + height: var(--slider-track-height); | |
| 46 | + /* background-color removed, set by Elementor selector */ | |
| 47 | + border-radius: calc(var(--slider-track-height) / 2); | |
| 48 | + transform: translateY(-50%); | |
| 49 | + z-index: 1; | |
| 50 | +} | |
| 51 | + | |
| 52 | +/* Progress bar */ | |
| 53 | +.king-addons-pricing-slider__progress { | |
| 54 | + position: absolute; | |
| 55 | + top: 50%; | |
| 56 | + left: 0; | |
| 57 | + height: var(--slider-track-height); | |
| 58 | + /* background-color removed, set by Elementor selector */ | |
| 59 | + border-radius: calc(var(--slider-track-height) / 2); | |
| 60 | + transform: translateY(-50%); | |
| 61 | + z-index: 2; | |
| 62 | + width: 0; /* Initial width, updated by JS */ | |
| 63 | +} | |
| 64 | + | |
| 65 | +/* Custom thumb/handle */ | |
| 66 | +.king-addons-pricing-slider__custom-thumb { | |
| 67 | + position: absolute; | |
| 68 | + left: 0; /* Updated by JS */ | |
| 69 | + /* top: 50%; */ /* Removed for revert */ | |
| 70 | + transform: translateX(-50%); /* Reverted to only horizontal centering */ | |
| 71 | + pointer-events: none; | |
| 72 | + z-index: 4; | |
| 73 | + /* Removing explicit width/height/bg/shadow added in last step */ | |
| 74 | + /* Width, height, background, border-radius, shadow should ideally come from Elementor controls or other specific rules */ | |
| 75 | + width: var(--slider-thumb-size); | |
| 76 | + height: var(--slider-thumb-size); | |
| 77 | + /* background-color: var(--e-global-color-primary, #4CAF50); */ | |
| 78 | + border-radius: 50%; | |
| 79 | + /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); */ | |
| 80 | + cursor: pointer; | |
| 81 | + transition: transform 0.2s ease-out; /* Added transition for smooth scaling */ | |
| 82 | +} | |
| 83 | + | |
| 84 | +/* Thumb shadow (applied via Group Control) */ | |
| 85 | +/* Shadow selector is defined in Group_Control_Box_Shadow in PHP */ | |
| 86 | + | |
| 87 | +/* Thumb hover effect (triggers on slider container hover) */ | |
| 88 | +.king-addons-pricing-slider__range-container:hover .king-addons-pricing-slider__custom-thumb { | |
| 89 | + /* Keep original horizontal centering and only add scaling */ | |
| 90 | + transform: translateX(-50%) scale(1.1); | |
| 91 | + /* Background color and border on hover can be added separately if needed */ | |
| 92 | +} | |
| 93 | + | |
| 94 | +/* Actual input for functionality - invisible */ | |
| 95 | +.king-addons-pricing-slider__range { | |
| 96 | + position: absolute; | |
| 97 | + top: 0; | |
| 98 | + left: 0; | |
| 99 | + width: 100%; | |
| 100 | + height: 100%; | |
| 101 | + margin: 0; | |
| 102 | + padding: 0; | |
| 103 | + opacity: 0.001; | |
| 104 | + cursor: pointer; | |
| 105 | + z-index: 10; | |
| 106 | + -webkit-appearance: none; | |
| 107 | + appearance: none; | |
| 108 | + background: transparent; | |
| 109 | +} | |
| 110 | + | |
| 111 | +/* Hide native slider styles */ | |
| 112 | +.king-addons-pricing-slider__range::-webkit-slider-thumb, | |
| 113 | +.king-addons-pricing-slider__range::-moz-range-thumb, | |
| 114 | +.king-addons-pricing-slider__range::-webkit-slider-runnable-track, | |
| 115 | +.king-addons-pricing-slider__range::-moz-range-track { | |
| 116 | + -webkit-appearance: none; | |
| 117 | + appearance: none; | |
| 118 | + width: 0; | |
| 119 | + height: 0; | |
| 120 | + background: transparent; | |
| 121 | + border: 0; | |
| 122 | + opacity: 0; | |
| 123 | +} | |
| 124 | + | |
| 125 | +.king-addons-pricing-slider__range-labels { | |
| 126 | + display: flex; | |
| 127 | + justify-content: space-between; | |
| 128 | + margin-top: 5px; | |
| 129 | +} | |
| 130 | + | |
| 131 | +.king-addons-pricing-slider__range-min, | |
| 132 | +.king-addons-pricing-slider__range-max { | |
| 133 | + font-size: 14px; | |
| 134 | + color: #777; | |
| 135 | +} | |
| 136 | + | |
| 137 | +.king-addons-pricing-slider__display { | |
| 138 | + text-align: center; | |
| 139 | + margin-bottom: 20px; | |
| 140 | + font-size: 1.4em; | |
| 141 | +} | |
| 142 | + | |
| 143 | +.king-addons-pricing-slider__price { | |
| 144 | + font-size: 36px; | |
| 145 | + font-weight: 700; | |
| 146 | + color: #4054b2; | |
| 147 | +} | |
| 148 | + | |
| 149 | +.king-addons-pricing-slider__currency { | |
| 150 | + font-size: 24px; | |
| 151 | + vertical-align: super; | |
| 152 | +} | |
| 153 | + | |
| 154 | +.king-addons-pricing-slider__period { | |
| 155 | + font-size: 0.8em; | |
| 156 | + color: #777; | |
| 157 | + opacity: 0.8; | |
| 158 | + margin-left: 5px; | |
| 159 | +} | |
| 160 | + | |
| 161 | + /* Features Section */ | |
| 162 | +.king-addons-pricing-slider__features { | |
| 163 | + margin-top: 20px; | |
| 164 | +} | |
| 165 | + | |
| 166 | +.king-addons-pricing-slider__feature-list { | |
| 167 | + list-style: none; | |
| 168 | + padding: 0; | |
| 169 | + margin: 0; | |
| 170 | +} | |
| 171 | + | |
| 172 | +.king-addons-pricing-slider__feature-item { | |
| 173 | + display: flex; /* Use flexbox for alignment */ | |
| 174 | + align-items: center; /* Vertically center items */ | |
| 175 | + margin-bottom: 10px; | |
| 176 | +} | |
| 177 | + | |
| 178 | +.king-addons-pricing-slider__feature-item span:first-child { | |
| 179 | + margin-right: 10px; /* Space between icon and text */ | |
| 180 | + width: 20px; /* Fixed width for icon container */ | |
| 181 | + text-align: center; /* Center icon */ | |
| 182 | + flex-shrink: 0; /* Prevent icon from shrinking */ | |
| 183 | +} | |
| 184 | + | |
| 185 | +.king-addons-pricing-slider__feature-included i { | |
| 186 | + color: var(--e-global-color-primary, #4CAF50); /* Green for included */ | |
| 187 | +} | |
| 188 | + | |
| 189 | +.king-addons-pricing-slider__feature-excluded i { | |
| 190 | + color: var(--e-global-color-accent, #F44336); /* Red for excluded */ | |
| 191 | +} | |
| 192 | + | |
| 193 | +.king-addons-pricing-slider__feature-text { | |
| 194 | + color: inherit; | |
| 195 | + font-size: 14px; /* Adjust as needed */ | |
| 196 | + flex-grow: 1; /* Allow text to take remaining space */ | |
| 197 | +} | |
| 198 | + | |
| 199 | +/* Ensure custom thumb can move freely */ | |
| 200 | +.king-addons-pricing-slider__custom-thumb { | |
| 201 | + position: absolute; /* Already set, just ensuring */ | |
| 202 | + left: 0; /* Initial position, will be updated by JS */ | |
| 203 | + transform: translateX(-50%); /* Center the thumb */ | |
| 204 | + pointer-events: none; /* Let the range input handle events */ | |
| 205 | + z-index: 4; /* Make sure thumb is above progress */ | |
| 206 | + /* Ensure no other styles restrict its horizontal movement */ | |
| 207 | +} | |
| 208 | + | |
| 209 | +.king-addons-pricing-slider__actions { | |
| 210 | + margin-top: 30px; | |
| 211 | + text-align: center; | |
| 212 | +} | |
| 213 | + | |
| 214 | +.king-addons-pricing-slider__button { | |
| 215 | + display: inline-block; | |
| 216 | + padding: 10px 20px; | |
| 217 | + background-color: #4054b2; | |
| 218 | + color: #ffffff; | |
| 219 | + text-decoration: none; | |
| 220 | + border-radius: 4px; | |
| 221 | + font-weight: 600; | |
| 222 | + transition: background-color 0.3s ease; | |
| 223 | +} | |
| 224 | + | |
| 225 | +.king-addons-pricing-slider__button:hover { | |
| 226 | + background-color: #5365c3; | |
| 227 | + color: #ffffff; | |
| 228 | +} | |
| 229 | + | |
| 230 | +/* Styles for the WooCommerce Add to Cart button */ | |
| 231 | +.king-addons-pricing-slider__add-to-cart { | |
| 232 | + position: relative; /* Needed for loader positioning */ | |
| 233 | + display: inline-block; | |
| 234 | + padding: 10px 20px; | |
| 235 | + background-color: var(--e-global-color-accent, #4CAF50); /* Use accent color or a distinct WooCommerce color */ | |
| 236 | + color: #ffffff; | |
| 237 | + text-decoration: none; | |
| 238 | + border: none; /* Buttons often don't need borders like links */ | |
| 239 | + border-radius: 4px; | |
| 240 | + font-weight: 600; | |
| 241 | + transition: background-color 0.3s ease, opacity 0.3s ease; | |
| 242 | + cursor: pointer; | |
| 243 | +} | |
| 244 | + | |
| 245 | +.king-addons-pricing-slider__add-to-cart:hover { | |
| 246 | + background-color: var(--e-global-color-accent-dark, #388E3C); /* Slightly darker accent on hover */ | |
| 247 | + color: #ffffff; | |
| 248 | +} | |
| 249 | + | |
| 250 | +/* Loading state for the Add to Cart button */ | |
| 251 | +.king-addons-pricing-slider__add-to-cart.loading { | |
| 252 | + opacity: 0.7; | |
| 253 | + cursor: wait; | |
| 254 | +} | |
| 255 | + | |
| 256 | +.king-addons-pricing-slider__add-to-cart .king-addons-pricing-slider__loader { | |
| 257 | + display: none; /* Hide loader by default */ | |
| 258 | + position: absolute; | |
| 259 | + left: 50%; | |
| 260 | + top: 50%; | |
| 261 | + width: 16px; | |
| 262 | + height: 16px; | |
| 263 | + margin-left: -8px; /* Center horizontally */ | |
| 264 | + margin-top: -8px; /* Center vertically */ | |
| 265 | + border: 2px solid rgba(255, 255, 255, 0.3); | |
| 266 | + border-radius: 50%; | |
| 267 | + border-top-color: #ffffff; | |
| 268 | + animation: king-addons-spin 1s linear infinite; | |
| 269 | +} | |
| 270 | + | |
| 271 | +.king-addons-pricing-slider__add-to-cart.loading .king-addons-pricing-slider__loader { | |
| 272 | + display: block; /* Show loader when loading */ | |
| 273 | +} | |
| 274 | + | |
| 275 | +@keyframes king-addons-spin { | |
| 276 | + to { transform: rotate(360deg); } | |
| 277 | +} | |
| 278 | + | |
| 279 | +/* Basic notification styles (can be overridden by Elementor settings) */ | |
| 280 | +.king-addons-slider-notice { | |
| 281 | + display: block; | |
| 282 | + margin-top: 10px; | |
| 283 | + padding: 8px 12px; | |
| 284 | + border-radius: 4px; | |
| 285 | + font-size: 14px; | |
| 286 | +} | |
| 287 | +.king-addons-slider-notice.success { | |
| 288 | + background-color: #e8f5e9; /* Light green */ | |
| 289 | + color: #2e7d32; /* Dark green */ | |
| 290 | + border: 1px solid #c8e6c9; | |
| 291 | +} | |
| 292 | +.king-addons-slider-notice.error { | |
| 293 | + background-color: #ffebee; /* Light red */ | |
| 294 | + color: #c62828; /* Dark red */ | |
| 295 | + border: 1px solid #ffcdd2; | |
| 296 | +} | |
| 297 | + | |
| 298 | +/* View Cart link basic styles */ | |
| 299 | +.king-addons-slider-view-cart { | |
| 300 | + display: inline-block; /* Make it inline-block to sit next to button/notice if needed */ | |
| 301 | + margin-left: 10px; /* Add some space from the button or notice */ | |
| 302 | + font-size: 14px; | |
| 303 | + /* Inherit color or set a specific link color */ | |
| 304 | + /* color: var(--e-global-color-accent); */ | |
| 305 | + text-decoration: underline; | |
| 306 | + border-radius: 4px; | |
| 307 | + transition: all 0.3s ease; | |
| 308 | +} | |
| 309 | + | |
| 310 | +.king-addons-slider-view-cart:hover { | |
| 311 | + text-decoration: none; | |
| 312 | + border-color: #adadad; | |
| 313 | +} | |
| 314 | + | |
| 315 | +/* Responsive adjustments */ | |
| 316 | +@media (max-width: 767px) { | |
| 317 | + .king-addons-pricing-slider__title { | |
| 318 | + font-size: 20px; | |
| 319 | + } | |
| 320 | + | |
| 321 | + .king-addons-pricing-slider__description { | |
| 322 | + font-size: 14px; | |
| 323 | + } | |
| 324 | + | |
| 325 | + .king-addons-pricing-slider__price { | |
| 326 | + font-size: 30px; | |
| 327 | + } | |
| 328 | + | |
| 329 | + .king-addons-pricing-slider__currency { | |
| 330 | + font-size: 20px; | |
| 331 | + } | |
| 332 | + | |
| 333 | + .king-addons-pricing-slider__period { | |
| 334 | + font-size: 14px; | |
| 335 | + } | |
| 336 | +} | |
| 337 | + | |
| 338 | +/* Container for a single slider control group (useful for multiple sliders) */ | |
| 339 | +.king-addons-pricing-slider__control-group { | |
| 340 | + margin-bottom: 15px; | |
| 341 | + padding: 10px; | |
| 342 | + border-radius: 6px; | |
| 343 | + background-color: #f9f9f9; | |
| 344 | +} | |
| 345 | + | |
| 346 | +/* Container for min/max values below the slider */ | |
| 347 | +.king-addons-pricing-slider__range-values { | |
| 348 | + width: 100%; | |
| 349 | + margin-top: 10px; /* Space below slider */ | |
| 350 | + display: flex; /* Use flex again for simple min/max alignment */ | |
| 351 | + justify-content: space-between; /* Pushes min to left, max to right */ | |
| 352 | + font-size: 14px; | |
| 353 | + color: #777; | |
| 354 | +} | |
| 355 | + | |
| 356 | +/* Individual min/max value elements */ | |
| 357 | +.king-addons-pricing-slider__range-min-value, | |
| 358 | +.king-addons-pricing-slider__range-max-value { | |
| 359 | + white-space: nowrap; | |
| 360 | +} | |
| 361 | + | |
| 362 | +.king-addons-pricing-slider__range-min-value { | |
| 363 | + text-align: left; | |
| 364 | +} | |
| 365 | + | |
| 366 | +.king-addons-pricing-slider__range-max-value { | |
| 367 | + text-align: right; | |
| 368 | +} | |
| 369 | + | |
| 370 | +/* Style for the current value indicator positioned above the thumb */ | |
| 371 | +.king-addons-pricing-slider__current-value { | |
| 372 | + position: absolute; | |
| 373 | + top: 50%; /* Vertically align with the track center */ | |
| 374 | + left: var(--thumb-position); /* Position horizontally based on thumb */ | |
| 375 | + transform: translateX(-50%); /* Center the indicator horizontally */ | |
| 376 | + margin-top: calc(var(--slider-thumb-size) / 2 + 10px); /* Move below the thumb (half thumb size + gap) */ | |
| 377 | + | |
| 378 | + /* Default styles */ | |
| 379 | + background-color: #f0f0f0; | |
| 380 | + color: #333; | |
| 381 | + padding: 3px 8px; | |
| 382 | + border-radius: 4px; | |
| 383 | + font-size: 13px; | |
| 384 | + font-weight: bold; | |
| 385 | + white-space: nowrap; | |
| 386 | + line-height: 1.2; | |
| 387 | + box-shadow: 0 1px 3px rgba(0,0,0,0.1); | |
| 388 | + z-index: 5; /* Above track/progress, below thumb if needed, but shouldn't overlap */ | |
| 389 | + pointer-events: none; /* Allow clicks to pass through to the slider input */ | |
| 390 | +} | |
| 391 | + | |
| 392 | +.king-addons-pricing-sliders__layout-horizontal .king-addons-pricing-sliders__controls { | |
| 393 | + display: flex; | |
| 394 | + flex-wrap: wrap; | |
| 395 | + gap: 15px; /* Space between horizontal sliders */ | |
| 396 | +} | |
| 397 | + | |
| 398 | +.king-addons-pricing-sliders__layout-horizontal .king-addons-pricing-slider__control-group { | |
| 399 | + flex: 1 1 200px; /* Allow sliders to wrap and adjust size */ | |
| 400 | + margin-bottom: 0; /* Remove bottom margin for horizontal layout */ | |
| 401 | +} | |
