| @@ -1,23 +1,57 @@ | ||
| 1 | +body { | |
| 2 | + // background-color: #f7faff !important; | |
| 3 | + background-color: #fff !important; | |
| 4 | +} | |
| 5 | + | |
| 1 | 6 | .berqwp-dashbaord { |
| 2 | - font-family: 'Source Sans 3', sans-serif !important; | |
| 3 | - margin: 20px 0px; | |
| 4 | - background-color: #fff; | |
| 5 | - border-radius: 10px; | |
| 6 | - overflow: hidden; | |
| 7 | + font-family: "Lato", sans-serif !important; | |
| 8 | + // margin: 20px 0px; | |
| 9 | + // background-color: #fff; | |
| 10 | + background-color: #f7faff; | |
| 11 | + // border-radius: 10px; | |
| 12 | + // overflow: hidden; | |
| 13 | + // height: 100vh; | |
| 14 | + transition: all 0.3s ease; | |
| 15 | + | |
| 16 | + ul { | |
| 17 | + font-size: 15px; | |
| 18 | + } | |
| 19 | + | |
| 20 | + .bwp-notice { | |
| 21 | + margin-right: 0px !important; | |
| 22 | + box-shadow: none !important; | |
| 23 | + } | |
| 24 | + | |
| 25 | + &.sticky { | |
| 26 | + position: fixed; | |
| 27 | + top: 12px; | |
| 28 | + // right: 0; | |
| 29 | + // left: 160px; | |
| 30 | + margin-left: -22px; | |
| 31 | + margin-right: 0px; | |
| 32 | + padding-bottom: 100vh; | |
| 33 | + margin-bottom: 100vh; | |
| 34 | + border-radius: 0; | |
| 35 | + z-index: 99; | |
| 36 | + } | |
| 7 | 37 | } |
| 8 | 38 | |
| 9 | 39 | .berqwp-dashbaord * { |
| 40 | + box-sizing: border-box; | |
| 10 | 41 | // -webkit-font-smoothing: antialiased; |
| 11 | 42 | } |
| 12 | 43 | |
| 44 | +// .notice:not(.bwp-notice), .fs-notice { | |
| 45 | +// display: none !important; | |
| 46 | +// } | |
| 47 | + | |
| 13 | 48 | .berqwp-header { |
| 14 | - padding: 16px 20px; | |
| 49 | + padding: 16px 30px; | |
| 15 | 50 | display: flex; |
| 16 | 51 | align-items: center; |
| 17 | 52 | justify-content: space-between; |
| 18 | - background: #f7faff; | |
| 19 | - // border-bottom: 1px solid #E8F0FF; | |
| 53 | + padding-top: 25px; | |
| 20 | 54 | } |
| 21 | 55 | |
| 22 | 56 | .berqwp-header img { |
| 23 | 57 | height: 40px; |
| @@ -41,17 +75,58 @@ | ||
| 41 | 75 | |
| 42 | 76 | .berqwp-header-right { |
| 43 | 77 | display: flex; |
| 44 | 78 | align-items: center; |
| 45 | - gap: 20px; | |
| 79 | + gap: 10px; | |
| 80 | + | |
| 81 | + .optimization-methods-switch { | |
| 82 | + display: flex; | |
| 83 | + justify-content: center; | |
| 84 | + align-items: center; | |
| 85 | + background-color: #fff; | |
| 86 | + border: 1px solid #d4dff2; | |
| 87 | + border-radius: 8px; | |
| 88 | + overflow: hidden; | |
| 89 | + | |
| 90 | + &.local .method-local { | |
| 91 | + color: #1f71ff; | |
| 92 | + border-bottom: 3px solid #1f71ff; | |
| 93 | + } | |
| 94 | + | |
| 95 | + &.cloud .method-cloud { | |
| 96 | + color: #1f71ff; | |
| 97 | + border-bottom: 3px solid #1f71ff; | |
| 98 | + } | |
| 99 | + | |
| 100 | + a { | |
| 101 | + display: flex; | |
| 102 | + justify-content: center; | |
| 103 | + align-items: center; | |
| 104 | + font-size: 15px; | |
| 105 | + color: #0c2d66; | |
| 106 | + padding: 8px 13px; | |
| 107 | + gap: 6px; | |
| 108 | + cursor: pointer; | |
| 109 | + | |
| 110 | + &:first-child { | |
| 111 | + border-right: 1px solid #d4dff2; | |
| 112 | + } | |
| 113 | + } | |
| 114 | + | |
| 115 | + svg { | |
| 116 | + width: 16px; | |
| 117 | + height: auto; | |
| 118 | + display: flex; | |
| 119 | + } | |
| 120 | + } | |
| 46 | 121 | } |
| 47 | 122 | |
| 48 | 123 | .berqwp-upgrade { |
| 49 | - color: #FFF; | |
| 124 | + color: #fff; | |
| 50 | 125 | font-size: 16px; |
| 51 | 126 | font-style: normal; |
| 52 | 127 | font-weight: 600; |
| 53 | - background: #1F71FF; | |
| 128 | + background: #1f71ff; | |
| 54 | 129 | display: flex; |
| 55 | 130 | align-items: center; |
| 56 | 131 | gap: 5px; |
| 57 | 132 | padding: 12px 20px; |
| @@ -59,36 +134,61 @@ | ||
| 59 | 134 | |
| 60 | 135 | .berqwp-dashbord-body { |
| 61 | 136 | display: flex; |
| 62 | 137 | flex-wrap: wrap; |
| 138 | + position: relative; | |
| 139 | + // align-items: flex-start; | |
| 140 | + // background-color: #0d2958; | |
| 141 | + border-bottom-left-radius: 10px; | |
| 142 | + border-bottom-right-radius: 10px; | |
| 63 | 143 | } |
| 64 | 144 | |
| 65 | 145 | .berqwp-tabs { |
| 66 | - width: 300px; | |
| 67 | - background: #0D2958; | |
| 146 | + width: 280px; | |
| 147 | + align-self: start; | |
| 148 | + // background: #0D2958; | |
| 149 | + position: relative; | |
| 150 | + top: 30px; | |
| 151 | + padding-left: 30px; | |
| 68 | 152 | } |
| 69 | 153 | |
| 154 | +.sticky .berqwp-tabs { | |
| 155 | + overflow-y: scroll; | |
| 156 | + height: 85vh; | |
| 157 | +} | |
| 158 | + | |
| 70 | 159 | .berqwp-tab { |
| 71 | 160 | padding: 18px 20px; |
| 72 | 161 | font-size: 16px; |
| 73 | - border-bottom: 1px solid #ffffff21; | |
| 162 | + // border-bottom: 1px solid #ffffff21; | |
| 74 | 163 | cursor: pointer; |
| 75 | 164 | color: #fff; |
| 76 | - font-weight: 500; | |
| 165 | + // font-weight: 500; | |
| 166 | + background-color: transparent; | |
| 167 | + color: #363636; | |
| 168 | + border-radius: 5px; | |
| 169 | + margin-bottom: 10px; | |
| 170 | + padding: 15px 20px; | |
| 171 | + font-size: 15px; | |
| 77 | 172 | } |
| 78 | 173 | |
| 79 | 174 | .berqwp-tab-content { |
| 80 | - width: calc(100% - 300px); | |
| 81 | - padding: 0 25px; | |
| 175 | + width: calc(100% - 280px); | |
| 176 | + padding: 0 55px; | |
| 82 | 177 | padding-top: 25px; |
| 83 | - height: 100vh; | |
| 178 | + // height: 85vh; | |
| 179 | + // overflow-y: scroll; | |
| 180 | + // overflow: hidden; | |
| 181 | + background: #f7faff; | |
| 182 | + border-bottom-right-radius: 10px; | |
| 183 | +} | |
| 184 | + | |
| 185 | +.sticky .berqwp-tab-content { | |
| 84 | 186 | overflow-y: scroll; |
| 85 | - overflow-x: hidden; | |
| 86 | - background: #F7FAFF; | |
| 87 | 187 | } |
| 88 | 188 | |
| 89 | 189 | h2.berq-tab-title { |
| 90 | - color: #465774; | |
| 190 | + color: #353535; | |
| 91 | 191 | font-size: 25px; |
| 92 | 192 | font-style: normal; |
| 93 | 193 | font-weight: 600; |
| 94 | 194 | line-height: normal; |
| @@ -93,24 +193,24 @@ | ||
| 93 | 193 | font-weight: 600; |
| 94 | 194 | line-height: normal; |
| 95 | 195 | margin: 0; |
| 96 | 196 | padding-bottom: 15px; |
| 97 | - border-bottom: 1px solid #E8F0FF; | |
| 197 | + border-bottom: 1px solid #e8f0ff; | |
| 98 | 198 | margin-bottom: 20px; |
| 99 | 199 | } |
| 100 | 200 | |
| 101 | 201 | .berq-info-box { |
| 102 | - border: 1px solid rgb(228 237 251); | |
| 103 | - background: #FFF; | |
| 202 | + border: 1px solid rgb(220, 230, 244); | |
| 203 | + background: #fff; | |
| 104 | 204 | box-shadow: 0px 3px 5px 0px rgba(83, 113, 167, 0.05); |
| 105 | - padding: 16px; | |
| 205 | + padding: 20px; | |
| 106 | 206 | margin-bottom: 20px; |
| 107 | - border-radius: 8px; | |
| 207 | + border-radius: 13px; | |
| 108 | 208 | } |
| 109 | 209 | |
| 110 | 210 | h3.berq-box-title { |
| 111 | - color: #0C2D66; | |
| 112 | - font-size: 18px; | |
| 211 | + color: #002159; | |
| 212 | + font-size: 16px; | |
| 113 | 213 | font-style: normal; |
| 114 | 214 | font-weight: 600; |
| 115 | 215 | line-height: normal; |
| 116 | 216 | margin: 0; |
| @@ -119,12 +219,12 @@ | ||
| 119 | 219 | |
| 120 | 220 | .berq-box-content p { |
| 121 | 221 | margin: 0; |
| 122 | 222 | font-size: 16px; |
| 123 | - color: #465774; | |
| 223 | + color: #6071a4; | |
| 124 | 224 | } |
| 125 | 225 | |
| 126 | -.berq-dual-box>div { | |
| 226 | +.berq-dual-box > div { | |
| 127 | 227 | flex: 1; |
| 128 | 228 | } |
| 129 | 229 | |
| 130 | 230 | .berq-dual-box { |
| @@ -140,12 +240,12 @@ | ||
| 140 | 240 | line-height: 100%; |
| 141 | 241 | } |
| 142 | 242 | |
| 143 | 243 | a.berq-btn { |
| 144 | - background: #5057FF; | |
| 244 | + background: #fff; | |
| 145 | 245 | border-radius: 6px; |
| 146 | 246 | padding: 10px 20px; |
| 147 | - color: #FFF; | |
| 247 | + color: #384a69; | |
| 148 | 248 | font-size: 15px; |
| 149 | 249 | font-style: normal; |
| 150 | 250 | display: block; |
| 151 | 251 | line-height: normal; |
| @@ -150,11 +250,14 @@ | ||
| 150 | 250 | display: block; |
| 151 | 251 | line-height: normal; |
| 152 | 252 | width: fit-content; |
| 153 | 253 | margin-bottom: 5px; |
| 254 | + border: 1px solid #dbe9fe; | |
| 255 | + box-shadow: 0px 0px 7px -6px #000; | |
| 154 | 256 | |
| 155 | 257 | &:hover { |
| 156 | 258 | background-color: #3d44d9; |
| 259 | + border-color: #3d44d9; | |
| 157 | 260 | color: #fff; |
| 158 | 261 | text-decoration: none; |
| 159 | 262 | } |
| 160 | 263 | } |
| @@ -183,10 +286,10 @@ | ||
| 183 | 286 | font-size: 15px; |
| 184 | 287 | padding: 12px 20px; |
| 185 | 288 | text-transform: uppercase; |
| 186 | 289 | color: #fff; |
| 187 | - background: #5057FF; | |
| 188 | - border-radius: 6px; | |
| 290 | + background: #1f71ff; | |
| 291 | + border-radius: 10px; | |
| 189 | 292 | margin-bottom: 20px; |
| 190 | 293 | cursor: pointer; |
| 191 | 294 | |
| 192 | 295 | &:hover { |
| @@ -193,17 +296,36 @@ | ||
| 193 | 296 | background-color: #3d44d9; |
| 194 | 297 | color: #fff; |
| 195 | 298 | text-decoration: none; |
| 196 | 299 | } |
| 300 | + | |
| 301 | + &.cf { | |
| 302 | + margin-top: 10px; | |
| 303 | + text-transform: inherit; | |
| 304 | + background-color: #f6821f; | |
| 305 | + | |
| 306 | + &:hover { | |
| 307 | + background-color: #e29230; | |
| 308 | + } | |
| 309 | + } | |
| 197 | 310 | } |
| 198 | 311 | |
| 199 | 312 | .berqwp-tab.active { |
| 200 | - background: #f7faff; | |
| 201 | - color: #0d2958; | |
| 202 | - box-shadow: inset 5px 0px 0px 0px #1f72ff; | |
| 313 | + background-color: #ece8ff; | |
| 203 | 314 | border-bottom: none; |
| 315 | + color: #fff; | |
| 316 | + font-weight: 400; | |
| 317 | + /* background-color: #fff; */ | |
| 318 | + color: #000; | |
| 204 | 319 | } |
| 205 | 320 | |
| 321 | +.berqwp-tab.active p { | |
| 322 | + // display: block; | |
| 323 | + color: #000000; | |
| 324 | + font-size: 13px; | |
| 325 | + margin-top: 5px; | |
| 326 | +} | |
| 327 | + | |
| 206 | 328 | p.berq-cache-lifespan { |
| 207 | 329 | margin-top: 16px; |
| 208 | 330 | } |
| 209 | 331 | |
| @@ -226,9 +348,11 @@ | ||
| 226 | 348 | .berq-progress-none { |
| 227 | 349 | width: 240px; |
| 228 | 350 | height: 240px; |
| 229 | 351 | border-radius: 50%; |
| 230 | - background: radial-gradient(closest-side, white 79%, transparent 80% 100%), conic-gradient(#cadeff 75%, #cadeff 0); | |
| 352 | + background: | |
| 353 | + radial-gradient(closest-side, white 79%, transparent 80% 100%), | |
| 354 | + conic-gradient(#cadeff 75%, #cadeff 0); | |
| 231 | 355 | } |
| 232 | 356 | |
| 233 | 357 | .berq-progress-circles { |
| 234 | 358 | display: flex; |
| @@ -242,13 +366,17 @@ | ||
| 242 | 366 | .berq-progress-optimized-images { |
| 243 | 367 | width: 200px; |
| 244 | 368 | height: 200px; |
| 245 | 369 | border-radius: 50%; |
| 246 | - background: radial-gradient(closest-side, white 79%, transparent 80% 100%), conic-gradient(#b6b9b6 65%, #e8e8e8 0); | |
| 370 | + background: | |
| 371 | + radial-gradient(closest-side, white 79%, transparent 80% 100%), | |
| 372 | + conic-gradient(#b6b9b6 65%, #e8e8e8 0); | |
| 247 | 373 | } |
| 248 | 374 | |
| 249 | 375 | .berq-speed-score { |
| 250 | - background: radial-gradient(closest-side, white 79%, transparent 80% 100%), conic-gradient(#b6b9b6 65%, #e8e8e8 0); | |
| 376 | + background: | |
| 377 | + radial-gradient(closest-side, white 79%, transparent 80% 100%), | |
| 378 | + conic-gradient(#b6b9b6 65%, #e8e8e8 0); | |
| 251 | 379 | width: 150px; |
| 252 | 380 | height: 150px; |
| 253 | 381 | border-radius: 50%; |
| 254 | 382 | display: flex; |
| @@ -293,9 +421,9 @@ | ||
| 293 | 421 | text-align: center; |
| 294 | 422 | margin-bottom: 0; |
| 295 | 423 | } |
| 296 | 424 | |
| 297 | -.berq-info-box.before-after-comparision>div { | |
| 425 | +.berq-info-box.before-after-comparision > div { | |
| 298 | 426 | padding: 25px; |
| 299 | 427 | border: 1px solid #dae8ff; |
| 300 | 428 | border-radius: 4px; |
| 301 | 429 | display: flex; |
| @@ -318,9 +446,9 @@ | ||
| 318 | 446 | color: #ac7808; |
| 319 | 447 | } |
| 320 | 448 | |
| 321 | 449 | .with-berqwp.cache-not-deleted::before { |
| 322 | - content: 'Cache not detected'; | |
| 450 | + content: "Cache not detected"; | |
| 323 | 451 | display: block; |
| 324 | 452 | position: absolute; |
| 325 | 453 | top: -30px; |
| 326 | 454 | width: 100%; |
| @@ -333,9 +461,9 @@ | ||
| 333 | 461 | border-radius: 3px; |
| 334 | 462 | } |
| 335 | 463 | |
| 336 | 464 | .berq-optimized-images::before { |
| 337 | - content: ''; | |
| 465 | + content: ""; | |
| 338 | 466 | width: 15px; |
| 339 | 467 | height: 15px; |
| 340 | 468 | background: #2763c9; |
| 341 | 469 | display: block; |
| @@ -349,9 +477,9 @@ | ||
| 349 | 477 | align-items: center; |
| 350 | 478 | } |
| 351 | 479 | |
| 352 | 480 | .berq-unoptimized-images::before { |
| 353 | - content: ''; | |
| 481 | + content: ""; | |
| 354 | 482 | width: 15px; |
| 355 | 483 | height: 15px; |
| 356 | 484 | background: #cadeff; |
| 357 | 485 | display: block; |
| @@ -375,19 +503,19 @@ | ||
| 375 | 503 | gap: 5px; |
| 376 | 504 | margin-top: 20px; |
| 377 | 505 | } |
| 378 | 506 | |
| 379 | -.berq-img-action>div { | |
| 507 | +.berq-img-action > div { | |
| 380 | 508 | padding: 10px 20px; |
| 381 | - background: #1F71FF; | |
| 509 | + background: #1f71ff; | |
| 382 | 510 | font-size: 15px; |
| 383 | 511 | color: #fff; |
| 384 | 512 | cursor: pointer; |
| 385 | 513 | } |
| 386 | 514 | |
| 387 | -.berq-img-action>.berq-delete-webp { | |
| 515 | +.berq-img-action > .berq-delete-webp { | |
| 388 | 516 | background: rgb(255 64 64 / 12%); |
| 389 | - color: #FF4040; | |
| 517 | + color: #ff4040; | |
| 390 | 518 | } |
| 391 | 519 | |
| 392 | 520 | .lds-ring { |
| 393 | 521 | display: inline-block; |
| @@ -440,15 +568,14 @@ | ||
| 440 | 568 | } |
| 441 | 569 | |
| 442 | 570 | .berq-optimization-guide { |
| 443 | 571 | background: #10326b; |
| 444 | - font-family: 'Source Sans 3', sans-serif !important; | |
| 572 | + font-family: "Lato", sans-serif !important; | |
| 445 | 573 | padding: 25px; |
| 446 | 574 | border-radius: 10px; |
| 447 | 575 | box-shadow: 0px 10px 20px 0px #0003; |
| 448 | 576 | } |
| 449 | 577 | |
| 450 | - | |
| 451 | 578 | .berq-optimization-guide p.p2 { |
| 452 | 579 | margin: 0; |
| 453 | 580 | font-size: 20px; |
| 454 | 581 | font-weight: 400; |
| @@ -467,8 +594,9 @@ | ||
| 467 | 594 | font-size: 15px; |
| 468 | 595 | } |
| 469 | 596 | |
| 470 | 597 | .berqwp-tab p { |
| 598 | + display: none; | |
| 471 | 599 | margin: 0; |
| 472 | 600 | margin-top: 10px; |
| 473 | 601 | font-size: 13px; |
| 474 | 602 | opacity: 0.7; |
| @@ -475,9 +603,9 @@ | ||
| 475 | 603 | font-weight: normal; |
| 476 | 604 | } |
| 477 | 605 | |
| 478 | 606 | .berqwp-header::before { |
| 479 | - content: ''; | |
| 607 | + // content: ''; | |
| 480 | 608 | background: #0d2958; |
| 481 | 609 | position: absolute; |
| 482 | 610 | width: 300px; |
| 483 | 611 | height: 102%; |
| @@ -483,12 +611,14 @@ | ||
| 483 | 611 | height: 102%; |
| 484 | 612 | left: 0; |
| 485 | 613 | top: 0; |
| 486 | 614 | z-index: 0; |
| 615 | + // border-top-left-radius: 10px; | |
| 487 | 616 | } |
| 488 | 617 | |
| 489 | 618 | .berqwp-header { |
| 490 | 619 | position: relative; |
| 620 | + // border-top-right-radius: 10px; | |
| 491 | 621 | } |
| 492 | 622 | |
| 493 | 623 | .berqwp-header img { |
| 494 | 624 | z-index: 9; |
| @@ -511,9 +641,10 @@ | ||
| 511 | 641 | color: #ffffffe3; |
| 512 | 642 | font-size: 15px; |
| 513 | 643 | } |
| 514 | 644 | |
| 515 | -.berq-info-box.unlock-js-optimization a.upgrade-btn, .berqwp-header a.upgrade-btn { | |
| 645 | +.berq-info-box.unlock-js-optimization a.upgrade-btn, | |
| 646 | +.berqwp-header a.upgrade-btn { | |
| 516 | 647 | background-image: linear-gradient(45deg, #5521ff, #05b9ff); |
| 517 | 648 | font-size: 14px; |
| 518 | 649 | color: #ffffff; |
| 519 | 650 | padding: 15px 20px; |
| @@ -531,15 +662,27 @@ | ||
| 531 | 662 | display: block; |
| 532 | 663 | color: #465774; |
| 533 | 664 | font-size: 15px; |
| 534 | 665 | width: 100%; |
| 666 | + background-color: #f7faff; | |
| 667 | + border-radius: 10px; | |
| 668 | + border: 1px solid #d4dff2; | |
| 535 | 669 | } |
| 536 | 670 | |
| 537 | -.berq-info-box.guide p, .berq-info-box.guide a { | |
| 671 | +.berq-info-box select { | |
| 672 | + margin-top: 16px; | |
| 673 | + display: block; | |
| 674 | + color: #465774; | |
| 675 | + font-size: 15px; | |
| 676 | +} | |
| 677 | + | |
| 678 | +.berq-info-box.guide p, | |
| 679 | +.berq-info-box.guide a { | |
| 538 | 680 | color: #fff; |
| 539 | 681 | } |
| 682 | + | |
| 540 | 683 | .berq-info-box.guide { |
| 541 | - background-color: #4567a1; | |
| 684 | + background-color: #273f67; | |
| 542 | 685 | } |
| 543 | 686 | |
| 544 | 687 | .slider.slider-horizontal { |
| 545 | 688 | width: calc(100% - 100px) !important; |
| @@ -569,14 +712,14 @@ | ||
| 569 | 712 | margin: 0 30px; |
| 570 | 713 | } |
| 571 | 714 | |
| 572 | 715 | .optimzation-slider .slider-tick.round { |
| 573 | - background-color: #D2E3FF; | |
| 716 | + background-color: #d2e3ff; | |
| 574 | 717 | background-image: none; |
| 575 | 718 | box-shadow: none; |
| 576 | 719 | opacity: 1; |
| 577 | 720 | border: none; |
| 578 | - opacity: .7 !important; | |
| 721 | + opacity: 0.7 !important; | |
| 579 | 722 | width: 3px; |
| 580 | 723 | border-radius: 0; |
| 581 | 724 | margin-left: 0px !important; |
| 582 | 725 | } |
| @@ -588,18 +731,18 @@ | ||
| 588 | 731 | // opacity: 0 !important; |
| 589 | 732 | } |
| 590 | 733 | |
| 591 | 734 | .optimzation-slider .slider-selection.tick-slider-selection { |
| 592 | - background-color: #1F71FF !important; | |
| 735 | + background-color: #1f71ff !important; | |
| 593 | 736 | background-image: none; |
| 594 | 737 | } |
| 595 | 738 | |
| 596 | 739 | .optimzation-slider .slider-handle.min-slider-handle.round { |
| 597 | - background: #1F71FF !important; | |
| 740 | + background: #1f71ff !important; | |
| 598 | 741 | z-index: 9; |
| 599 | 742 | } |
| 600 | 743 | |
| 601 | -.optimzation-slider .slider.slider-horizontal .slider-tick-label-container { | |
| 744 | +.optimzation-slider .slider.slider-horizontal .slider-tick-label-container { | |
| 602 | 745 | margin-top: -30px !important; |
| 603 | 746 | } |
| 604 | 747 | |
| 605 | 748 | .optimzation-slider .slider-tick-label { |
| @@ -629,9 +772,9 @@ | ||
| 629 | 772 | |
| 630 | 773 | .slider-tick-label .bq_tooltip { |
| 631 | 774 | width: 200px; |
| 632 | 775 | background-color: #000; |
| 633 | - opacity: .9; | |
| 776 | + opacity: 0.9; | |
| 634 | 777 | padding: 20px; |
| 635 | 778 | display: inline-block; |
| 636 | 779 | white-space: break-spaces; |
| 637 | 780 | font-size: 13px; |
| @@ -645,46 +788,146 @@ | ||
| 645 | 788 | visibility: hidden; |
| 646 | 789 | /* transform: translateX(-50%); */ |
| 647 | 790 | } |
| 648 | 791 | |
| 649 | - | |
| 650 | 792 | .slider-tick-label:hover .bq_tooltip { |
| 651 | - opacity: .9; | |
| 793 | + opacity: 0.9; | |
| 652 | 794 | visibility: visible; |
| 653 | 795 | } |
| 654 | 796 | |
| 655 | -.slider .bs-tooltip-top .tooltip-inner, .slider .bs-tooltip-bottom .tooltip-inner { | |
| 797 | +.slider .bs-tooltip-top .tooltip-inner, | |
| 798 | +.slider .bs-tooltip-bottom .tooltip-inner { | |
| 656 | 799 | left: -20% !important; |
| 657 | 800 | } |
| 658 | 801 | |
| 659 | -.slider .tooltip.bs-tooltip-top .arrow, .slider .tooltip.bs-tooltip-bottom .arrow { | |
| 802 | +.slider .tooltip.bs-tooltip-top .arrow, | |
| 803 | +.slider .tooltip.bs-tooltip-bottom .arrow { | |
| 660 | 804 | left: 30px !important; |
| 661 | 805 | } |
| 662 | 806 | |
| 663 | 807 | #berqwp-intro { |
| 664 | 808 | // min-height: 80vh; |
| 665 | - background-color: #F7FAFF; | |
| 809 | + // background-color: #f7faff; | |
| 810 | + background-color: transparent; | |
| 666 | 811 | border-radius: 20px; |
| 667 | - border: 1px solid #E6E6E6; | |
| 812 | + // border: 1px solid #e6e6e6; | |
| 668 | 813 | display: flex; |
| 669 | 814 | flex-direction: column; |
| 670 | 815 | justify-content: center; |
| 671 | 816 | align-items: center; |
| 672 | - -webkit-font-smoothing: antialiased; | |
| 817 | + // -webkit-font-smoothing: antialiased; | |
| 673 | 818 | padding: 70px 20px; |
| 819 | + padding-bottom: 100px; | |
| 820 | + max-width: 800px; | |
| 821 | + margin: 0 auto; | |
| 822 | + // box-shadow: 0px 3px 5px 0px rgba(83, 113, 167, 0.05); | |
| 823 | + padding-bottom: 30px; | |
| 824 | + margin-top: 50px; | |
| 674 | 825 | |
| 826 | + img.logo { | |
| 827 | + width: 140px; | |
| 828 | + margin-bottom: 30px; | |
| 829 | + } | |
| 830 | + | |
| 675 | 831 | h2.title { |
| 676 | - font-size: 47px; | |
| 832 | + font-size: 35px; | |
| 677 | 833 | text-align: center; |
| 678 | 834 | color: #222222; |
| 679 | 835 | line-height: normal; |
| 680 | - max-width: 730px; | |
| 836 | + max-width: 570px; | |
| 681 | 837 | font-weight: 500; |
| 682 | 838 | text-transform: capitalize; |
| 683 | 839 | margin: 0; |
| 684 | - margin-bottom: 75px; | |
| 840 | + margin-bottom: 40px; | |
| 685 | 841 | } |
| 686 | 842 | |
| 843 | + .inner { | |
| 844 | + display: flex; | |
| 845 | + justify-content: center; | |
| 846 | + align-items: center; | |
| 847 | + gap: 10px; | |
| 848 | + | |
| 849 | + input[type="email"], | |
| 850 | + input[type="password"] { | |
| 851 | + background-color: #fff; | |
| 852 | + padding: 10px 13px; | |
| 853 | + border: 1px solid #dad2ff; | |
| 854 | + border-radius: 8px; | |
| 855 | + font-size: 14px; | |
| 856 | + line-height: 1; | |
| 857 | + } | |
| 858 | + | |
| 859 | + button[type="submit"] { | |
| 860 | + background-color: #1f71ff; | |
| 861 | + padding: 10px 13px; | |
| 862 | + border: 1px solid #1f71ff; | |
| 863 | + border-radius: 8px; | |
| 864 | + // font-weight: 500; | |
| 865 | + font-size: 14px; | |
| 866 | + cursor: pointer; | |
| 867 | + color: #fff; | |
| 868 | + line-height: 1; | |
| 869 | + | |
| 870 | + &[disabled] { | |
| 871 | + opacity: 0.7; | |
| 872 | + cursor: not-allowed; | |
| 873 | + } | |
| 874 | + } | |
| 875 | + } | |
| 876 | + | |
| 877 | + .optimization-method-block { | |
| 878 | + margin-bottom: 50px; | |
| 879 | + | |
| 880 | + h3 { | |
| 881 | + text-align: center; | |
| 882 | + font-size: 18px; | |
| 883 | + } | |
| 884 | + | |
| 885 | + p { | |
| 886 | + text-align: center; | |
| 887 | + font-size: 14px; | |
| 888 | + max-width: 400px; | |
| 889 | + margin-bottom: 30px; | |
| 890 | + } | |
| 891 | + | |
| 892 | + .optimization-method-options { | |
| 893 | + display: flex; | |
| 894 | + align-items: center; | |
| 895 | + justify-content: center; | |
| 896 | + gap: 10px; | |
| 897 | + | |
| 898 | + input[type="radio"] { | |
| 899 | + display: none; | |
| 900 | + | |
| 901 | + &:checked + .optimization-method { | |
| 902 | + border-color: #1f71ff; | |
| 903 | + background-color: #1f71ff; | |
| 904 | + color: #fff; | |
| 905 | + } | |
| 906 | + } | |
| 907 | + | |
| 908 | + .optimization-method { | |
| 909 | + display: flex; | |
| 910 | + justify-content: center; | |
| 911 | + align-items: center; | |
| 912 | + background-color: #fff; | |
| 913 | + padding: 10px 13px; | |
| 914 | + border: 1px solid #dad2ff; | |
| 915 | + border-radius: 8px; | |
| 916 | + gap: 8px; | |
| 917 | + font-weight: 500; | |
| 918 | + font-size: 14px; | |
| 919 | + cursor: pointer; | |
| 920 | + | |
| 921 | + .icon svg { | |
| 922 | + width: 16px; | |
| 923 | + height: auto; | |
| 924 | + display: flex; | |
| 925 | + } | |
| 926 | + } | |
| 927 | + } | |
| 928 | + } | |
| 929 | + | |
| 687 | 930 | form.license-verification { |
| 688 | 931 | display: flex; |
| 689 | 932 | align-items: center; |
| 690 | 933 | gap: 10px; |
| @@ -695,13 +938,13 @@ | ||
| 695 | 938 | border-radius: 6px; |
| 696 | 939 | padding: 16px 24px; |
| 697 | 940 | line-height: 1; |
| 698 | 941 | background: #fff; |
| 699 | - border: 1px solid #D7D7D7; | |
| 942 | + border: 1px solid #d7d7d7; | |
| 700 | 943 | width: 280px; |
| 701 | 944 | |
| 702 | 945 | &::placeholder { |
| 703 | - color: #928E8E; | |
| 946 | + color: #928e8e; | |
| 704 | 947 | } |
| 705 | 948 | } |
| 706 | 949 | |
| 707 | 950 | input[type="submit"] { |
| @@ -706,9 +949,9 @@ | ||
| 706 | 949 | |
| 707 | 950 | input[type="submit"] { |
| 708 | 951 | border: none; |
| 709 | 952 | color: #fff; |
| 710 | - background: #5057FF; | |
| 953 | + background: #1f71ff; | |
| 711 | 954 | align-self: stretch; |
| 712 | 955 | padding: 20px 40px; |
| 713 | 956 | font-size: 18px; |
| 714 | 957 | font-weight: 400; |
| @@ -716,9 +959,9 @@ | ||
| 716 | 959 | line-height: 0; |
| 717 | 960 | cursor: pointer; |
| 718 | 961 | |
| 719 | 962 | &[disabled] { |
| 720 | - opacity: .8; | |
| 963 | + opacity: 0.8; | |
| 721 | 964 | } |
| 722 | 965 | } |
| 723 | 966 | } |
| 724 | 967 | |
| @@ -733,24 +976,34 @@ | ||
| 733 | 976 | display: flex; |
| 734 | 977 | gap: 10px; |
| 735 | 978 | justify-content: center; |
| 736 | 979 | align-items: center; |
| 737 | - margin-top: 60px; | |
| 980 | + margin-top: 30px; | |
| 738 | 981 | |
| 739 | 982 | a.btn { |
| 740 | - background: #1F71FF; | |
| 741 | - border-radius: 6px; | |
| 983 | + background: #1f71ff; | |
| 984 | + border-radius: 9px; | |
| 742 | 985 | display: flex; |
| 743 | 986 | align-items: center; |
| 744 | - gap: 10px; | |
| 987 | + gap: 7px; | |
| 745 | 988 | color: #fff; |
| 746 | - padding: 15px 30px; | |
| 747 | - font-size: 18px; | |
| 989 | + padding: 12px 20px; | |
| 990 | + font-size: 15px; | |
| 748 | 991 | text-decoration: none; |
| 749 | 992 | |
| 750 | 993 | &:hover { |
| 751 | 994 | background-color: #2067e3; |
| 752 | 995 | } |
| 996 | + | |
| 997 | + &.secondary { | |
| 998 | + background: #edeef1; | |
| 999 | + color: #222; | |
| 1000 | + | |
| 1001 | + &:hover { | |
| 1002 | + background-color: #e0e1e5; | |
| 1003 | + } | |
| 1004 | + } | |
| 1005 | + | |
| 753 | 1006 | } |
| 754 | 1007 | } |
| 755 | 1008 | } |
| 756 | 1009 | |
| @@ -763,13 +1016,17 @@ | ||
| 763 | 1016 | .optimize-post-types { |
| 764 | 1017 | margin-top: 16px; |
| 765 | 1018 | } |
| 766 | 1019 | |
| 767 | -.slider.slider-horizontal .slider-tick-label-container .slider-tick-label:last-child { | |
| 1020 | +.slider.slider-horizontal | |
| 1021 | + .slider-tick-label-container | |
| 1022 | + .slider-tick-label:last-child { | |
| 768 | 1023 | position: relative; |
| 769 | 1024 | } |
| 770 | 1025 | |
| 771 | -.slider.slider-horizontal .slider-tick-label-container .slider-tick-label:last-child::after { | |
| 1026 | +.slider.slider-horizontal | |
| 1027 | + .slider-tick-label-container | |
| 1028 | + .slider-tick-label:last-child::after { | |
| 772 | 1029 | content: "Best Performance"; |
| 773 | 1030 | background: #33b133; |
| 774 | 1031 | font-size: 12px; |
| 775 | 1032 | width: 110px; |
| @@ -803,19 +1060,22 @@ | ||
| 803 | 1060 | margin-top: 20px; |
| 804 | 1061 | color: #465774; |
| 805 | 1062 | } |
| 806 | 1063 | |
| 807 | -div.dt-container.dt-empty-footer tbody>tr:last-child>*, table.dataTable>tbody>tr:not(:last-child) { | |
| 1064 | +div.dt-container.dt-empty-footer tbody > tr:last-child > *, | |
| 1065 | +table.dataTable > tbody > tr:not(:last-child) { | |
| 808 | 1066 | border-bottom: 1px solid #dae8ff; |
| 809 | 1067 | } |
| 810 | 1068 | |
| 811 | -table.dataTable>thead>tr>th, table.dataTable>thead>tr>td { | |
| 1069 | +table.dataTable > thead > tr > th, | |
| 1070 | +table.dataTable > thead > tr > td { | |
| 812 | 1071 | padding: 10px; |
| 813 | 1072 | border-bottom: 1px solid #dae8ff; |
| 814 | 1073 | } |
| 815 | 1074 | |
| 816 | -div.dt-container .dt-paging .dt-paging-button.current, div.dt-container .dt-paging .dt-paging-button.current:hover { | |
| 817 | - background: #5057ff !important; | |
| 1075 | +div.dt-container .dt-paging .dt-paging-button.current, | |
| 1076 | +div.dt-container .dt-paging .dt-paging-button.current:hover { | |
| 1077 | + background: #1f71ff !important; | |
| 818 | 1078 | border: none; |
| 819 | 1079 | font-size: 15px; |
| 820 | 1080 | padding: 6px 13px; |
| 821 | 1081 | color: #fff !important; |
| @@ -835,13 +1095,8 @@ | ||
| 835 | 1095 | font-size: 15px; |
| 836 | 1096 | padding: 6px 13px; |
| 837 | 1097 | } |
| 838 | 1098 | |
| 839 | -.bwp_feedback a:last-child { | |
| 840 | - display: block !important; | |
| 841 | - text-align: end !important; | |
| 842 | -} | |
| 843 | - | |
| 844 | 1099 | .berqwp-notification { |
| 845 | 1100 | display: flex; |
| 846 | 1101 | margin: 20px 0; |
| 847 | 1102 | background-color: #333333; |
| @@ -857,8 +1112,9 @@ | ||
| 857 | 1112 | |
| 858 | 1113 | &.warning { |
| 859 | 1114 | background-color: #fff074; |
| 860 | 1115 | color: #7b6904; |
| 1116 | + border: 1px solid #eee069; | |
| 861 | 1117 | |
| 862 | 1118 | .icon svg { |
| 863 | 1119 | fill: #7b6904; |
| 864 | 1120 | } |
| @@ -884,6 +1140,488 @@ | ||
| 884 | 1140 | |
| 885 | 1141 | &.completed { |
| 886 | 1142 | background-color: #beffab; |
| 887 | 1143 | color: #008d31; |
| 1144 | + } | |
| 1145 | +} | |
| 1146 | + | |
| 1147 | +div.dt-container .dt-search input { | |
| 1148 | + border: 1px solid #dce6f7; | |
| 1149 | + border-radius: 10px; | |
| 1150 | + background-color: #f4f8ff; | |
| 1151 | +} | |
| 1152 | + | |
| 1153 | +a.berqwp-refresh-license-btn { | |
| 1154 | + background-color: #cfffe8; | |
| 1155 | + padding: 5px; | |
| 1156 | + border-radius: 4px; | |
| 1157 | + position: absolute; | |
| 1158 | + right: 16px; | |
| 1159 | + display: flex; | |
| 1160 | + justify-content: center; | |
| 1161 | + align-items: center; | |
| 1162 | + transition: all 0.3s ease; | |
| 1163 | + | |
| 1164 | + &:hover { | |
| 1165 | + background-color: #b9fddc; | |
| 1166 | + } | |
| 1167 | +} | |
| 1168 | + | |
| 1169 | +label.berq-check input[type="text"] { | |
| 1170 | + width: 300px; | |
| 1171 | + display: block; | |
| 1172 | + font-weight: normal; | |
| 1173 | + max-width: 300px; | |
| 1174 | + border: 1px solid #d3d3d3; | |
| 1175 | + padding: 2px 10px; | |
| 1176 | +} | |
| 1177 | + | |
| 1178 | +.berqwp-cf-connected { | |
| 1179 | + background-color: #c4ffc4; | |
| 1180 | + width: fit-content; | |
| 1181 | + padding: 10px 20px; | |
| 1182 | + margin-top: 15px; | |
| 1183 | + border-radius: 10px; | |
| 1184 | + display: flex; | |
| 1185 | + align-items: center; | |
| 1186 | + | |
| 1187 | + svg { | |
| 1188 | + width: 35px; | |
| 1189 | + height: auto; | |
| 1190 | + fill: #22b522; | |
| 1191 | + margin-right: 10px; | |
| 1192 | + } | |
| 1193 | +} | |
| 1194 | + | |
| 1195 | +input.bwp-disable-cf { | |
| 1196 | + margin-top: 10px; | |
| 1197 | + border: none; | |
| 1198 | + color: #ff1e1e; | |
| 1199 | + background: transparent; | |
| 1200 | + padding: 0; | |
| 1201 | + font-size: 15px; | |
| 1202 | + margin-left: auto; | |
| 1203 | + display: block; | |
| 1204 | +} | |
| 1205 | + | |
| 1206 | +.berqwp-lifespan-options, | |
| 1207 | +.berqwp-inline-radio-select { | |
| 1208 | + margin-top: 16px; | |
| 1209 | + display: flex; | |
| 1210 | + flex-wrap: wrap; | |
| 1211 | + align-items: center; | |
| 1212 | + gap: 15px; | |
| 1213 | + | |
| 1214 | + label { | |
| 1215 | + flex-grow: 2; | |
| 1216 | + max-width: 200px; | |
| 1217 | + padding: 10px 15px; | |
| 1218 | + margin: 0; | |
| 1219 | + border: 1px solid #e0e9fa; | |
| 1220 | + border-radius: 5px; | |
| 1221 | + color: #0c2d66; | |
| 1222 | + cursor: pointer; | |
| 1223 | + font-size: 14px; | |
| 1224 | + | |
| 1225 | + &:focus-within, | |
| 1226 | + &.selected { | |
| 1227 | + background-color: #1f71ff; | |
| 1228 | + border-color: #1f71ff; | |
| 1229 | + color: #fff; | |
| 1230 | + } | |
| 1231 | + | |
| 1232 | + &.selected input { | |
| 1233 | + border-color: #fff; | |
| 1234 | + } | |
| 1235 | + } | |
| 1236 | +} | |
| 1237 | + | |
| 1238 | +.berqwp-pagecompress-options { | |
| 1239 | + margin-top: 16px; | |
| 1240 | + | |
| 1241 | + a { | |
| 1242 | + box-shadow: none; | |
| 1243 | + | |
| 1244 | + .berqwp-loader { | |
| 1245 | + display: none; | |
| 1246 | + } | |
| 1247 | + } | |
| 1248 | +} | |
| 1249 | + | |
| 1250 | +.bwp-disable-pagecompression { | |
| 1251 | + cursor: pointer; | |
| 1252 | + background: #fff; | |
| 1253 | + border-radius: 6px; | |
| 1254 | + padding: 10px 20px; | |
| 1255 | + color: #384a69; | |
| 1256 | + font-size: 15px; | |
| 1257 | + font-style: normal; | |
| 1258 | + display: block; | |
| 1259 | + line-height: normal; | |
| 1260 | + width: -moz-fit-content; | |
| 1261 | + width: fit-content; | |
| 1262 | + margin-bottom: 5px; | |
| 1263 | + border: 1px solid #dbe9fe; | |
| 1264 | +} | |
| 1265 | + | |
| 1266 | +.berq-info-box { | |
| 1267 | + .feature-blocks { | |
| 1268 | + display: flex; | |
| 1269 | + gap: 10px; | |
| 1270 | + margin: 20px 0; | |
| 1271 | + | |
| 1272 | + .single-feature { | |
| 1273 | + background-color: #f3f3ff; | |
| 1274 | + padding: 13px; | |
| 1275 | + border: 1px solid #b5b8ff; | |
| 1276 | + border-radius: 7px; | |
| 1277 | + | |
| 1278 | + .h5 { | |
| 1279 | + font-size: 14px; | |
| 1280 | + font-weight: 600; | |
| 1281 | + color: #0c2d66; | |
| 1282 | + } | |
| 1283 | + | |
| 1284 | + p { | |
| 1285 | + color: #0c2d66; | |
| 1286 | + font-size: 14px; | |
| 1287 | + } | |
| 1288 | + } | |
| 1289 | + } | |
| 1290 | +} | |
| 1291 | + | |
| 1292 | +.berq-info-box.fluid-images ul li { | |
| 1293 | + margin-left: 20px; | |
| 1294 | + color: #0c2d66; | |
| 1295 | +} | |
| 1296 | + | |
| 1297 | +.berq-info-box.fluid-images ul { | |
| 1298 | + list-style: square; | |
| 1299 | +} | |
| 1300 | + | |
| 1301 | +a.fluid-images-signup { | |
| 1302 | + font-size: 15px; | |
| 1303 | + padding: 12px 20px; | |
| 1304 | + text-transform: uppercase; | |
| 1305 | + color: #fff !important; | |
| 1306 | + background: #1f71ff; | |
| 1307 | + border-radius: 6px; | |
| 1308 | + display: inline-block; | |
| 1309 | +} | |
| 1310 | + | |
| 1311 | +div#wpcontent { | |
| 1312 | + padding-left: 0; | |
| 1313 | +} | |
| 1314 | + | |
| 1315 | +.berqwp-tab { | |
| 1316 | + display: flex; | |
| 1317 | + align-items: center; | |
| 1318 | + gap: 7px; | |
| 1319 | +} | |
| 1320 | + | |
| 1321 | +.berqwp-tab .icon { | |
| 1322 | + display: flex; | |
| 1323 | + | |
| 1324 | + svg { | |
| 1325 | + width: 20px; | |
| 1326 | + height: auto; | |
| 1327 | + color: #000; | |
| 1328 | + } | |
| 1329 | +} | |
| 1330 | + | |
| 1331 | +.berq-info-box.guide .berq-box-content { | |
| 1332 | + display: flex; | |
| 1333 | + align-items: center; | |
| 1334 | + gap: 7px; | |
| 1335 | + color: #fff; | |
| 1336 | +} | |
| 1337 | + | |
| 1338 | +.bwp-action-btn { | |
| 1339 | + font-size: 15px; | |
| 1340 | + display: flex; | |
| 1341 | + justify-content: center; | |
| 1342 | + align-content: center; | |
| 1343 | + background-color: #1f71ff; | |
| 1344 | + color: #fff; | |
| 1345 | + padding: 10px 16px; | |
| 1346 | + border-radius: 8px; | |
| 1347 | + gap: 6px; | |
| 1348 | + transition: cubic-bezier(0.075, 0.82, 0.165, 1) 0.3s all; | |
| 1349 | + text-decoration: none !important; | |
| 1350 | + border: 1px solid transparent; | |
| 1351 | + | |
| 1352 | + .icon { | |
| 1353 | + display: flex; | |
| 1354 | + } | |
| 1355 | + | |
| 1356 | + &.light { | |
| 1357 | + background-color: #fff; | |
| 1358 | + color: #0c2d66; | |
| 1359 | + border: 1px solid #d4dff2; | |
| 1360 | + } | |
| 1361 | + | |
| 1362 | + &:hover { | |
| 1363 | + background-color: #3d44d9; | |
| 1364 | + color: #fff; | |
| 1365 | + border: 1px solid transparent; | |
| 1366 | + } | |
| 1367 | + | |
| 1368 | + svg { | |
| 1369 | + width: 15px; | |
| 1370 | + height: auto; | |
| 1371 | + } | |
| 1372 | + | |
| 1373 | + &.bwp-upgrade-btn { | |
| 1374 | + background: #4d1fff; | |
| 1375 | + color: #fff; | |
| 1376 | + border-color: #4d1fff; | |
| 1377 | + } | |
| 1378 | +} | |
| 1379 | + | |
| 1380 | +.berq-triple-boxes { | |
| 1381 | + display: grid; | |
| 1382 | + grid-template-columns: 1fr 1fr 1fr; | |
| 1383 | + gap: 16px; | |
| 1384 | +} | |
| 1385 | + | |
| 1386 | +.berq-stats-count { | |
| 1387 | + font-weight: bold; | |
| 1388 | + font-size: 20px; | |
| 1389 | + margin: 13px 0; | |
| 1390 | + color: #1f366c; | |
| 1391 | +} | |
| 1392 | + | |
| 1393 | +a.berq-stat-refresh { | |
| 1394 | + position: absolute; | |
| 1395 | + top: 18px; | |
| 1396 | + right: 14px; | |
| 1397 | + | |
| 1398 | + svg { | |
| 1399 | + fill: #8daee5; | |
| 1400 | + } | |
| 1401 | +} | |
| 1402 | + | |
| 1403 | +.berqwp-optimization-modes-container { | |
| 1404 | + margin-bottom: 10px; | |
| 1405 | + | |
| 1406 | + .berqwp-inline-radio-select { | |
| 1407 | + display: grid; | |
| 1408 | + grid-template-columns: 1fr 1fr; | |
| 1409 | + align-items: stretch; | |
| 1410 | + | |
| 1411 | + label { | |
| 1412 | + max-width: 100%; | |
| 1413 | + display: flex; | |
| 1414 | + gap: 5px; | |
| 1415 | + padding: 16px 15px; | |
| 1416 | + | |
| 1417 | + &.berqwp-best-performance { | |
| 1418 | + position: relative; | |
| 1419 | + | |
| 1420 | + &::before { | |
| 1421 | + content: "Best Performance"; | |
| 1422 | + position: absolute; | |
| 1423 | + top: 10px; | |
| 1424 | + right: 8px; | |
| 1425 | + font-size: 12px; | |
| 1426 | + background-color: #cbffbc; | |
| 1427 | + color: #1f8d00; | |
| 1428 | + padding: 3px 9px; | |
| 1429 | + border-radius: 10px; | |
| 1430 | + } | |
| 1431 | + | |
| 1432 | + &.selected::before { | |
| 1433 | + background-color: #538ef4; | |
| 1434 | + color: #fff; | |
| 1435 | + } | |
| 1436 | + } | |
| 1437 | + | |
| 1438 | + div { | |
| 1439 | + font-size: 15px; | |
| 1440 | + } | |
| 1441 | + | |
| 1442 | + input { | |
| 1443 | + margin-top: 1px; | |
| 1444 | + } | |
| 1445 | + | |
| 1446 | + p { | |
| 1447 | + font-weight: normal; | |
| 1448 | + margin-top: 6px; | |
| 1449 | + margin-bottom: 0; | |
| 1450 | + font-size: 14px; | |
| 1451 | + } | |
| 1452 | + | |
| 1453 | + &.selected p { | |
| 1454 | + color: #fff !important; | |
| 1455 | + } | |
| 1456 | + } | |
| 1457 | + } | |
| 1458 | +} | |
| 1459 | + | |
| 1460 | +.berq-toggle { | |
| 1461 | + position: relative; | |
| 1462 | + width: 55px; | |
| 1463 | + min-width: 55px; | |
| 1464 | + height: 27px; | |
| 1465 | + display: block; | |
| 1466 | + background: #fafaff; | |
| 1467 | + border-radius: 30px; | |
| 1468 | + overflow: hidden; | |
| 1469 | + cursor: pointer; | |
| 1470 | + border: 1px solid #cbdeff; | |
| 1471 | + | |
| 1472 | + input { | |
| 1473 | + display: none; | |
| 1474 | + | |
| 1475 | + &:checked + .berq-toggle-switch { | |
| 1476 | + background-color: #1f71ff; | |
| 1477 | + } | |
| 1478 | + | |
| 1479 | + &:checked + .berq-toggle-switch::before { | |
| 1480 | + left: calc(93% - 19px); | |
| 1481 | + background-color: #fff; | |
| 1482 | + } | |
| 1483 | + } | |
| 1484 | + | |
| 1485 | + .berq-toggle-switch { | |
| 1486 | + background-color: transparent; | |
| 1487 | + display: block; | |
| 1488 | + height: 100%; | |
| 1489 | + transition: all 0.3s ease-out; | |
| 1490 | + | |
| 1491 | + &::before { | |
| 1492 | + content: ""; | |
| 1493 | + position: absolute; | |
| 1494 | + height: 19px; | |
| 1495 | + background: #002159; | |
| 1496 | + width: 19px; | |
| 1497 | + border-radius: 30px; | |
| 1498 | + left: 7%; | |
| 1499 | + top: 3px; | |
| 1500 | + transition: all 0.3s ease-out; | |
| 1501 | + } | |
| 1502 | + } | |
| 1503 | +} | |
| 1504 | + | |
| 1505 | +.berq-box-content.berq-setting-toggle { | |
| 1506 | + display: flex; | |
| 1507 | + justify-content: space-between; | |
| 1508 | + gap: 30px; | |
| 1509 | + | |
| 1510 | + .berq-toggle { | |
| 1511 | + /* margin-top: 10px; */ | |
| 1512 | + } | |
| 1513 | +} | |
| 1514 | + | |
| 1515 | +.berq-info-box.berq-setting-group { | |
| 1516 | + .group-container:not(:first-child) { | |
| 1517 | + padding-top: 20px; | |
| 1518 | + border-top: 1px solid #e9e8ff; | |
| 1519 | + margin-top: 20px; | |
| 1520 | + } | |
| 1521 | +} | |
| 1522 | + | |
| 1523 | +.berq-box-title.cloud-exclusive::after { | |
| 1524 | + content: 'Premium'; | |
| 1525 | + font-weight: normal; | |
| 1526 | + font-size: 12px; | |
| 1527 | + margin-left: 10px; | |
| 1528 | + background: #2aad2a; | |
| 1529 | + color: #fff; | |
| 1530 | + padding: 3px 6px; | |
| 1531 | + border-radius: 20px; | |
| 1532 | + margin-top: 0px !important; | |
| 1533 | + display: inline-block; | |
| 1534 | + position: absolute; | |
| 1535 | +} | |
| 1536 | + | |
| 1537 | +.berqwp-continue-free { | |
| 1538 | + text-align: center; | |
| 1539 | + font-size: 15px; | |
| 1540 | + margin-top: 80px; | |
| 1541 | + align-self: end; | |
| 1542 | + | |
| 1543 | + | |
| 1544 | + a { | |
| 1545 | + color: #acbbd5; | |
| 1546 | + text-decoration: none; | |
| 1547 | + } | |
| 1548 | + | |
| 1549 | +} | |
| 1550 | + | |
| 1551 | +// Database tab: cleanup action rows | |
| 1552 | +.berqwp-db-actions { | |
| 1553 | + margin-top: 16px; | |
| 1554 | + display: flex; | |
| 1555 | + flex-direction: column; | |
| 1556 | + gap: 10px; | |
| 1557 | +} | |
| 1558 | + | |
| 1559 | +.berqwp-db-action { | |
| 1560 | + display: flex; | |
| 1561 | + align-items: center; | |
| 1562 | + justify-content: space-between; | |
| 1563 | + gap: 15px; | |
| 1564 | + flex-wrap: wrap; | |
| 1565 | + padding: 14px 18px; | |
| 1566 | + border: 1px solid #e0e9fa; | |
| 1567 | + border-radius: 8px; | |
| 1568 | + background: #f8fafd; | |
| 1569 | + | |
| 1570 | + span { | |
| 1571 | + color: #0c2d66; | |
| 1572 | + font-size: 15px; | |
| 1573 | + font-weight: 500; | |
| 1574 | + } | |
| 1575 | + | |
| 1576 | + a.berq-btn { | |
| 1577 | + margin-bottom: 0; | |
| 1578 | + flex-shrink: 0; | |
| 1579 | + | |
| 1580 | + &.disabled { | |
| 1581 | + opacity: 0.6; | |
| 1582 | + pointer-events: none; | |
| 1583 | + } | |
| 1584 | + } | |
| 1585 | +} | |
| 1586 | + | |
| 1587 | +input.berqwp-inline-number { | |
| 1588 | + width: 60px; | |
| 1589 | + padding: 4px 8px; | |
| 1590 | + margin: 0 4px; | |
| 1591 | + border: 1px solid #dbe9fe; | |
| 1592 | + border-radius: 5px; | |
| 1593 | + color: #0c2d66; | |
| 1594 | + font-size: 14px; | |
| 1595 | +} | |
| 1596 | + | |
| 1597 | +.berqwp-db-scheduled-tasks { | |
| 1598 | + margin-top: 12px; | |
| 1599 | + display: grid; | |
| 1600 | + grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); | |
| 1601 | + gap: 4px 20px; | |
| 1602 | + | |
| 1603 | + label.berq-check { | |
| 1604 | + margin-top: 0; | |
| 1605 | + } | |
| 1606 | +} | |
| 1607 | + | |
| 1608 | +// Debloat tab: Heartbeat interval field | |
| 1609 | +.berqwp-heartbeat-interval { | |
| 1610 | + margin-top: 16px; | |
| 1611 | + | |
| 1612 | + label { | |
| 1613 | + display: flex; | |
| 1614 | + align-items: center; | |
| 1615 | + gap: 10px; | |
| 1616 | + color: #0c2d66; | |
| 1617 | + font-size: 14px; | |
| 1618 | + } | |
| 1619 | + | |
| 1620 | + input[type="number"] { | |
| 1621 | + width: 80px; | |
| 1622 | + padding: 6px 10px; | |
| 1623 | + border: 1px solid #dbe9fe; | |
| 1624 | + border-radius: 5px; | |
| 1625 | + color: #0c2d66; | |
| 888 | 1626 | } |
| 889 | 1627 | } |
