@metricinsights/pp-dev 0.19.0 → 1.0.0-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (51) hide show
  1. package/CHANGELOG.md +198 -0
  2. package/README.md +298 -266
  3. package/dist/CHANGELOG.md +198 -0
  4. package/dist/README.md +298 -266
  5. package/dist/cjs/cli.js +1 -1
  6. package/dist/cjs/cli.js.map +1 -1
  7. package/dist/cjs/helpers.js +1 -1
  8. package/dist/cjs/helpers.js.map +1 -1
  9. package/dist/cjs/index-DeUfAH6g.js +2 -0
  10. package/dist/cjs/index-DeUfAH6g.js.map +1 -0
  11. package/dist/cjs/index.js +1 -1
  12. package/dist/cjs/migrate-r2mXdGLZ.js +2 -0
  13. package/dist/cjs/migrate-r2mXdGLZ.js.map +1 -0
  14. package/dist/cjs/package.json +16 -16
  15. package/dist/cjs/plugin-Cm9vRLCu.js +2 -0
  16. package/dist/cjs/plugin-Cm9vRLCu.js.map +1 -0
  17. package/dist/cjs/plugin.js +1 -1
  18. package/dist/cjs/version-plugin-DsC5NLoX.js +2 -0
  19. package/dist/cjs/{version-plugin-DUKsGBsW.js.map → version-plugin-DsC5NLoX.js.map} +1 -1
  20. package/dist/client/client.css +1 -1
  21. package/dist/client/client.css.map +1 -1
  22. package/dist/client/client.js +509 -47
  23. package/dist/client/client.js.map +1 -1
  24. package/dist/client/index.html +71 -18
  25. package/dist/esm/cli.js +1 -1
  26. package/dist/esm/cli.js.map +1 -1
  27. package/dist/esm/helpers.js +1 -1
  28. package/dist/esm/helpers.js.map +1 -1
  29. package/dist/esm/index-DOjGFYJ7.js +2 -0
  30. package/dist/esm/index-DOjGFYJ7.js.map +1 -0
  31. package/dist/esm/index.js +1 -1
  32. package/dist/esm/migrate-BYuCtRbI.js +2 -0
  33. package/dist/esm/migrate-BYuCtRbI.js.map +1 -0
  34. package/dist/esm/package.json +16 -16
  35. package/dist/esm/plugin-B2ocw-wb.js +2 -0
  36. package/dist/esm/plugin-B2ocw-wb.js.map +1 -0
  37. package/dist/esm/plugin.js +1 -1
  38. package/dist/esm/version-plugin-BGWVTSsN.js +2 -0
  39. package/dist/esm/{version-plugin-C7j2jDQX.js.map → version-plugin-BGWVTSsN.js.map} +1 -1
  40. package/dist/types/index.d.ts +116 -139
  41. package/package.json +34 -28
  42. package/dist/cjs/index-Bb3yIW5d.js +0 -2
  43. package/dist/cjs/index-Bb3yIW5d.js.map +0 -1
  44. package/dist/cjs/plugin-CqahMAGe.js +0 -2
  45. package/dist/cjs/plugin-CqahMAGe.js.map +0 -1
  46. package/dist/cjs/version-plugin-DUKsGBsW.js +0 -2
  47. package/dist/esm/index-Cd-DmbPQ.js +0 -2
  48. package/dist/esm/index-Cd-DmbPQ.js.map +0 -1
  49. package/dist/esm/plugin-BeehFkJq.js +0 -2
  50. package/dist/esm/plugin-BeehFkJq.js.map +0 -1
  51. package/dist/esm/version-plugin-C7j2jDQX.js +0 -2
package/dist/client/client.css CHANGED
@@ -1,3 +1,3 @@
1
- .pp-dev-info-namespace{--pp-dev-info-color-primary: #007bff;--pp-dev-info-color-secondary: #6c757d;--pp-dev-info-color-success: #28a745;--pp-dev-info-color-info: #17a2b8;--pp-dev-info-color-warning: #ffc107;--pp-dev-info-color-danger: #dc3545;--pp-dev-info-color-light: #f8f9fa;--pp-dev-info-color-dark: #343a40;--pp-dev-info-color-white: #ffffff;--pp-dev-info-color-black: #000000}.pp-dev-info-namespace .pp-dev-info__popup{position:fixed;top:10px;right:10px;width:max-content;max-width:300px;height:max-content;max-height:max-content;background-color:var(--pp-dev-info-color-white);box-shadow:0 4px 6px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.08);border-radius:8px;display:flex;flex-direction:column;transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);overflow:hidden;z-index:100001;border:1px solid var(--pp-dev-info-color-secondary);transform:translateX(0);opacity:1;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.pp-dev-info-namespace .pp-dev-info__popup.entering{transform:translateX(100%);opacity:0}.pp-dev-info-namespace .pp-dev-info__popup.exiting{transform:translateX(100%);opacity:0}.pp-dev-info-namespace .pp-dev-info__popup-progress{position:absolute;bottom:0;left:0;height:4px;background:linear-gradient(90deg, var(--pp-dev-info-color-primary), var(--pp-dev-info-color-info));width:100%;transform-origin:left;transition:width .1s linear;border-radius:0 0 0 8px}.pp-dev-info-namespace .pp-dev-info__popup-title{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;height:auto;min-height:30px;width:100%;box-sizing:border-box;border-bottom:1px solid var(--pp-dev-info-color-light);background-color:var(--pp-dev-info-color-secondary)}.pp-dev-info-namespace .pp-dev-info__popup-title-text{font-size:14px;font-weight:600;color:var(--pp-dev-info-color-white);line-height:1.4}.pp-dev-info-namespace .pp-dev-info__popup-title-close{cursor:pointer;width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:var(--pp-dev-info-color-white);border-radius:4px;transition:background-color .2s ease}.pp-dev-info-namespace .pp-dev-info__popup-title-close:hover{background-color:hsla(0,0%,100%,.1)}.pp-dev-info-namespace .pp-dev-info__popup-title-close svg{transition:transform .2s ease}.pp-dev-info-namespace .pp-dev-info__popup-title-close:hover svg{transform:scale(1.1)}.pp-dev-info-namespace .pp-dev-info__popup-content{padding:12px 16px;overflow-y:auto;box-sizing:border-box;flex-grow:1;background-color:var(--pp-dev-info-color-white);width:100%;line-height:1.5;font-size:13px}.pp-dev-info-namespace .pp-dev-info__popup--success{border-color:var(--pp-dev-info-color-success);box-shadow:0 4px 6px rgba(40,167,69,.1),0 1px 3px rgba(40,167,69,.08)}.pp-dev-info-namespace .pp-dev-info__popup--success .pp-dev-info__popup-title{background-color:var(--pp-dev-info-color-success)}.pp-dev-info-namespace .pp-dev-info__popup--success .pp-dev-info__popup-content{color:var(--pp-dev-info-color-success)}.pp-dev-info-namespace .pp-dev-info__popup--success .pp-dev-info__popup-progress{background:linear-gradient(90deg, var(--pp-dev-info-color-success), #4caf50)}.pp-dev-info-namespace .pp-dev-info__popup--danger{border-color:var(--pp-dev-info-color-danger);box-shadow:0 4px 6px rgba(220,53,69,.1),0 1px 3px rgba(220,53,69,.08)}.pp-dev-info-namespace .pp-dev-info__popup--danger .pp-dev-info__popup-title{background-color:var(--pp-dev-info-color-danger)}.pp-dev-info-namespace .pp-dev-info__popup--danger .pp-dev-info__popup-content{color:var(--pp-dev-info-color-danger)}.pp-dev-info-namespace .pp-dev-info__popup--danger .pp-dev-info__popup-progress{background:linear-gradient(90deg, var(--pp-dev-info-color-danger), #f44336)}.pp-dev-info-namespace .pp-dev-info__popup--info{border-color:var(--pp-dev-info-color-info);box-shadow:0 4px 6px rgba(23,162,184,.1),0 1px 3px rgba(23,162,184,.08)}.pp-dev-info-namespace .pp-dev-info__popup--info .pp-dev-info__popup-title{background-color:var(--pp-dev-info-color-info)}.pp-dev-info-namespace .pp-dev-info__popup--info .pp-dev-info__popup-content{color:var(--pp-dev-info-color-info)}.pp-dev-info-namespace .pp-dev-info__popup--info .pp-dev-info__popup-progress{background:linear-gradient(90deg, var(--pp-dev-info-color-info), #2196f3)}.pp-dev-info-namespace .pp-dev-info__popup--warning{border-color:var(--pp-dev-info-color-warning);box-shadow:0 4px 6px rgba(255,193,7,.1),0 1px 3px rgba(255,193,7,.08)}.pp-dev-info-namespace .pp-dev-info__popup--warning .pp-dev-info__popup-title{background-color:var(--pp-dev-info-color-warning);color:var(--pp-dev-info-color-dark)}.pp-dev-info-namespace .pp-dev-info__popup--warning .pp-dev-info__popup-content{color:var(--pp-dev-info-color-warning)}.pp-dev-info-namespace .pp-dev-info__popup--warning .pp-dev-info__popup-progress{background:linear-gradient(90deg, var(--pp-dev-info-color-warning), #ff9800)}.pp-dev-info-namespace.pp-dev-info__confirm-overlay,.pp-dev-info-namespace .pp-dev-info__confirm-overlay{position:fixed;inset:0;z-index:100003;display:flex;align-items:center;justify-content:center;background-color:rgba(0,0,0,.35);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.pp-dev-info-namespace .pp-dev-info__confirm{width:min(500px,100vw - 32px);border-radius:10px;border:1px solid rgba(0,0,0,.15);background-color:var(--pp-dev-info-color-white);box-shadow:0 18px 40px rgba(0,0,0,.35),0 2px 6px rgba(0,0,0,.2);overflow:hidden}.pp-dev-info-namespace .pp-dev-info__confirm-title{padding:14px 16px;font-size:15px;font-weight:600;border-bottom:1px solid rgba(0,0,0,.08);color:var(--pp-dev-info-color-dark);background-color:rgba(0,0,0,.03)}.pp-dev-info-namespace .pp-dev-info__confirm-content{padding:16px;white-space:pre-wrap;color:var(--pp-dev-info-color-dark);font-size:13px;line-height:1.5}.pp-dev-info-namespace .pp-dev-info__confirm-actions{display:flex;justify-content:flex-end;gap:8px;padding:0 16px 16px}.pp-dev-info-namespace .pp-dev-info__confirm-btn{min-width:110px;padding:8px 12px;border-radius:6px;border:1px solid rgba(0,0,0,0);font-size:13px;font-weight:600;cursor:pointer;transition:all .2s ease}.pp-dev-info-namespace .pp-dev-info__confirm-btn--cancel{color:var(--pp-dev-info-color-dark);background-color:rgba(0,0,0,0);border-color:rgba(0,0,0,.2)}.pp-dev-info-namespace .pp-dev-info__confirm-btn--confirm{color:var(--pp-dev-info-color-white);background-color:var(--pp-dev-info-color-primary)}.pp-dev-info-namespace .pp-dev-info__confirm-btn:hover{opacity:.9}.pp-dev-info-namespace.pp-dev-info,.pp-dev-info-namespace .pp-dev-info{position:fixed;z-index:100000;white-space:nowrap;width:fit-content;height:30px;top:calc(100% - 30px);right:0;text-align:center;padding:8px 12px;background-color:var(--pp-dev-info-color-white);border-radius:8px 0 0 0;color:var(--pp-dev-info-color-dark);box-shadow:0 -2px 4px rgba(0,0,0,.1);box-sizing:border-box;display:flex;align-items:center;transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);overflow:visible;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.pp-dev-info-namespace.pp-dev-info *,.pp-dev-info-namespace .pp-dev-info *{color:var(--pp-dev-info-color-dark);font-family:sans-serif;font-size:13px;font-weight:300;line-height:1.5;letter-spacing:.00938em;text-decoration:none;text-transform:inherit;vertical-align:inherit;box-sizing:border-box;margin:0;padding:0;border:0;outline:0;background:0 0;list-style:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.pp-dev-info-namespace.pp-dev-info__content,.pp-dev-info-namespace .pp-dev-info__content{display:flex;align-items:center;gap:0px}.pp-dev-info-namespace.pp-dev-info__section,.pp-dev-info-namespace .pp-dev-info__section{display:flex;align-items:center;position:relative;padding:0 8px}.pp-dev-info-namespace.pp-dev-info__section:not(:last-child)::after,.pp-dev-info-namespace .pp-dev-info__section:not(:last-child)::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);height:12px;width:1px;background-color:rgba(0,0,0,.15)}@media screen and (prefers-color-scheme: dark){.pp-dev-info-namespace.pp-dev-info__section:not(:last-child)::after,.pp-dev-info-namespace .pp-dev-info__section:not(:last-child)::after{background-color:hsla(0,0%,100%,.2)}}.pp-dev-info-namespace.pp-dev-info__section:first-child,.pp-dev-info-namespace .pp-dev-info__section:first-child{padding-left:0}.pp-dev-info-namespace.pp-dev-info__section:last-child,.pp-dev-info-namespace .pp-dev-info__section:last-child{padding-right:0}.pp-dev-info-namespace.pp-dev-info__item,.pp-dev-info-namespace .pp-dev-info__item{display:flex;align-items:center;gap:8px;font-size:13px;line-height:1.5}.pp-dev-info-namespace.pp-dev-info__label,.pp-dev-info-namespace .pp-dev-info__label{color:var(--pp-dev-info-color-secondary);font-weight:500}.pp-dev-info-namespace.pp-dev-info__value,.pp-dev-info-namespace .pp-dev-info__value{font-weight:600}.pp-dev-info-namespace.pp-dev-info__link,.pp-dev-info-namespace .pp-dev-info__link{color:var(--pp-dev-info-color-primary);text-decoration:none;transition:color .2s ease;display:flex;align-items:center;gap:4px}.pp-dev-info-namespace.pp-dev-info__link:hover,.pp-dev-info-namespace .pp-dev-info__link:hover{color:var(--pp-dev-info-color-primary);text-decoration:underline}.pp-dev-info-namespace.pp-dev-info .primary,.pp-dev-info-namespace .pp-dev-info .primary{color:var(--pp-dev-info-color-primary) !important}.pp-dev-info-namespace.pp-dev-info .success,.pp-dev-info-namespace .pp-dev-info .success{color:var(--pp-dev-info-color-success) !important}.pp-dev-info-namespace.pp-dev-info .info,.pp-dev-info-namespace .pp-dev-info .info{color:var(--pp-dev-info-color-info) !important}.pp-dev-info-namespace.pp-dev-info .warning,.pp-dev-info-namespace .pp-dev-info .warning{color:var(--pp-dev-info-color-warning) !important}.pp-dev-info-namespace.pp-dev-info .danger,.pp-dev-info-namespace .pp-dev-info .danger{color:var(--pp-dev-info-color-danger) !important}.pp-dev-info-namespace.pp-dev-info a,.pp-dev-info-namespace .pp-dev-info a{color:var(--pp-dev-info-color-primary);text-decoration:none;vertical-align:middle;line-height:1.5}.pp-dev-info-namespace.pp-dev-info a:hover,.pp-dev-info-namespace .pp-dev-info a:hover{text-decoration:none}.pp-dev-info-namespace.pp-dev-info a:active,.pp-dev-info-namespace.pp-dev-info a:hover,.pp-dev-info-namespace .pp-dev-info a:active,.pp-dev-info-namespace .pp-dev-info a:hover{outline:0}.pp-dev-info-namespace.pp-dev-info button,.pp-dev-info-namespace .pp-dev-info button{padding:1px;border:none;background:none;cursor:pointer;outline:none}.pp-dev-info-namespace.pp-dev-info .bold,.pp-dev-info-namespace.pp-dev-info .status-text,.pp-dev-info-namespace .pp-dev-info .bold,.pp-dev-info-namespace .pp-dev-info .status-text{font-weight:700}.pp-dev-info-namespace.pp-dev-info__wrap-btn,.pp-dev-info-namespace .pp-dev-info__wrap-btn{box-sizing:content-box;display:flex;align-items:center;justify-content:center;width:24px;height:24px;margin-right:12px;padding:4px;cursor:pointer;border-radius:4px;transition:background-color .2s ease}.pp-dev-info-namespace.pp-dev-info__wrap-btn:hover,.pp-dev-info-namespace .pp-dev-info__wrap-btn:hover{background-color:rgba(0,0,0,.05);animation:arrowHover .8s linear infinite}.pp-dev-info-namespace.pp-dev-info__wrap-btn-arrow,.pp-dev-info-namespace .pp-dev-info__wrap-btn-arrow{width:16px;height:16px;fill:var(--pp-dev-info-color-dark);transition:transform .2s ease}.pp-dev-info-namespace.pp-dev-info.closed,.pp-dev-info-namespace .pp-dev-info.closed{transform:translateX(calc(100% - 40px));z-index:100002}.pp-dev-info-namespace.pp-dev-info.closed .pp-dev-info__wrap-btn:hover,.pp-dev-info-namespace .pp-dev-info.closed .pp-dev-info__wrap-btn:hover{animation:arrowHover 1.2s linear infinite}.pp-dev-info-namespace.pp-dev-info.closed .pp-dev-info__wrap-btn-arrow,.pp-dev-info-namespace .pp-dev-info.closed .pp-dev-info__wrap-btn-arrow{transform:rotate(180deg)}.pp-dev-info-namespace.pp-dev-info .sync-button,.pp-dev-info-namespace .pp-dev-info .sync-button{display:flex;align-items:center;justify-content:center;width:24px;height:26px;padding:4px;margin-left:12px;background-color:rgba(0,0,0,0);border:none;border-radius:4px;cursor:pointer;color:var(--pp-dev-info-color-primary);transition:all .2s ease;position:relative;overflow:hidden}.pp-dev-info-namespace.pp-dev-info .sync-button::before,.pp-dev-info-namespace .pp-dev-info .sync-button::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:currentColor;opacity:0;transition:opacity .2s ease;border-radius:4px}.pp-dev-info-namespace.pp-dev-info .sync-button svg,.pp-dev-info-namespace .pp-dev-info .sync-button svg{position:relative;z-index:1;transition:transform .3s ease}.pp-dev-info-namespace.pp-dev-info .sync-button:hover:not(.disabled),.pp-dev-info-namespace .pp-dev-info .sync-button:hover:not(.disabled){color:var(--pp-dev-info-color-primary)}.pp-dev-info-namespace.pp-dev-info .sync-button:hover:not(.disabled) svg,.pp-dev-info-namespace .pp-dev-info .sync-button:hover:not(.disabled) svg{transform:scale(1.1) rotate(45deg);transition:transform .2s ease}.pp-dev-info-namespace.pp-dev-info .sync-button:active:not(.disabled) svg,.pp-dev-info-namespace .pp-dev-info .sync-button:active:not(.disabled) svg{transform:scale(0.9) rotate(45deg)}.pp-dev-info-namespace.pp-dev-info .sync-button.disabled,.pp-dev-info-namespace .pp-dev-info .sync-button.disabled{opacity:.5;cursor:not-allowed;pointer-events:none;color:var(--pp-dev-info-color-secondary)}.pp-dev-info-namespace.pp-dev-info .sync-button.syncing svg,.pp-dev-info-namespace .pp-dev-info .sync-button.syncing svg{animation:rotate 1.5s linear infinite}@keyframes rotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.pp-dev-info-namespace.pp-dev-info .margin-5,.pp-dev-info-namespace .pp-dev-info .margin-5{margin-right:5px}.pp-dev-info-namespace.pp-dev-info .margin-10,.pp-dev-info-namespace .pp-dev-info .margin-10{margin-right:10px}.pp-dev-info-namespace.pp-dev-info .custom-font,.pp-dev-info-namespace .pp-dev-info .custom-font{font-family:sans-serif;font-size:13px;font-weight:300;vertical-align:middle;line-height:1.5;color:var(--pp-dev-info-color-dark)}.pp-dev-info-namespace.pp-dev-info .custom-font:not(.not-colored) a,.pp-dev-info-namespace .pp-dev-info .custom-font:not(.not-colored) a{color:var(--pp-dev-info-color-primary) !important}@keyframes rotation{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes arrowHover{0%{transform:translateX(2px)}50%{transform:translateX(-2px)}100%{transform:translateX(2px)}}@media screen and (prefers-color-scheme: dark){.pp-dev-info-namespace.pp-dev-info,.pp-dev-info-namespace .pp-dev-info{--pp-dev-info-color-primary: #007bff;--pp-dev-info-color-secondary: #a4abb6;--pp-dev-info-color-success: #56f000;--pp-dev-info-color-info: #2dccff;--pp-dev-info-color-warning: #ffb302;--pp-dev-info-color-danger: #ff3838;--pp-dev-info-color-light: #343a40;--pp-dev-info-color-dark: #f8f9fa;--pp-dev-info-color-white: #000000;--pp-dev-info-color-black: #ffffff}}
1
+ .pp-dev-info-namespace{--pp-dev-info-color-primary: #075b7e;--pp-dev-info-color-secondary: rgba(34, 34, 34, 0.64);--pp-dev-info-color-success: #077e45;--pp-dev-info-color-info: #17a2b8;--pp-dev-info-color-warning: #ffb000;--pp-dev-info-color-danger: #ac2b2b;--pp-dev-info-color-light: #f8f9fa;--pp-dev-info-color-dark: #343a40;--pp-dev-info-color-white: #ffffff;--pp-dev-info-color-black: #000000}.pp-dev-info-namespace .pp-dev-info__popup{position:fixed;top:10px;right:10px;width:280px;max-width:calc(100vw - 20px);height:auto;background-color:var(--pp-dev-info-color-white);box-shadow:0 2px 4px rgba(34,34,34,.2);border-radius:2px;display:flex;flex-direction:column;align-items:flex-end;gap:4px;padding:12px;transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);overflow:hidden;z-index:100001;border-left:2px solid var(--pp-dev-info-color-primary);transform:translateX(0);opacity:1;box-sizing:border-box;--pp-dev-info-popup-accent: var(--pp-dev-info-color-primary)}.pp-dev-info-namespace .pp-dev-info__popup.entering{transform:translateX(calc(100% + 10px));opacity:0}.pp-dev-info-namespace .pp-dev-info__popup.exiting{transform:translateX(calc(100% + 10px));opacity:0}.pp-dev-info-namespace .pp-dev-info__popup-title{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding:0;min-height:0;width:100%;box-sizing:border-box;border-bottom:0;color:#040404}.pp-dev-info-namespace .pp-dev-info__popup-title-icon{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;color:var(--pp-dev-info-popup-accent)}.pp-dev-info-namespace .pp-dev-info__popup-title-text{flex:1;color:#040404;font-size:12px;font-weight:600;line-height:18px;text-align:left;word-break:break-word}.pp-dev-info-namespace .pp-dev-info__popup-title-close{cursor:pointer;width:12px;height:12px;display:flex;align-items:center;justify-content:center;margin-top:2px;color:rgba(34,34,34,.64);border-radius:2px;transition:color .2s ease;flex-shrink:0}.pp-dev-info-namespace .pp-dev-info__popup-title-close:hover{color:var(--pp-dev-info-color-dark)}.pp-dev-info-namespace .pp-dev-info__popup-title-close svg{transition:transform .2s ease}.pp-dev-info-namespace .pp-dev-info__popup-content{margin-left:24px;padding:0;width:calc(100% - 24px);overflow-y:auto;box-sizing:border-box;flex-grow:0;background-color:rgba(0,0,0,0);color:rgba(34,34,34,.8);font-size:12px;font-weight:400;line-height:18px;text-align:left;word-break:break-word}.pp-dev-info-namespace .pp-dev-info__popup--success{--pp-dev-info-popup-accent: var(--pp-dev-info-color-success);border-left-color:var(--pp-dev-info-color-success)}.pp-dev-info-namespace .pp-dev-info__popup--danger{--pp-dev-info-popup-accent: var(--pp-dev-info-color-danger);border-left-color:var(--pp-dev-info-color-danger)}.pp-dev-info-namespace .pp-dev-info__popup--info{--pp-dev-info-popup-accent: var(--pp-dev-info-color-info);border-left-color:var(--pp-dev-info-color-info)}.pp-dev-info-namespace .pp-dev-info__popup--warning{--pp-dev-info-popup-accent: var(--pp-dev-info-color-warning);border-left-color:var(--pp-dev-info-color-warning)}.pp-dev-info-namespace .pp-dev-info__popup--left{right:auto;left:10px;border-left:none;border-right:2px solid var(--pp-dev-info-popup-accent)}.pp-dev-info-namespace .pp-dev-info__popup--left.entering,.pp-dev-info-namespace .pp-dev-info__popup--left.exiting{transform:translateX(calc(-100% - 10px))}.pp-dev-info-namespace.pp-dev-info__confirm-overlay,.pp-dev-info-namespace .pp-dev-info__confirm-overlay{position:fixed;inset:0;z-index:100003;display:flex;align-items:center;justify-content:center;background-color:rgba(0,0,0,.35);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.pp-dev-info-namespace .pp-dev-info__confirm{width:min(408px,100vw - 32px);border-radius:3px;border:1px solid rgba(0,0,0,.15);background-color:var(--pp-dev-info-color-white);box-shadow:0px 8px 32px 0px rgba(34,34,34,.4);overflow:hidden}.pp-dev-info-namespace .pp-dev-info__confirm-title{padding:14px 16px;font-size:15px;font-weight:600;border-bottom:1px solid rgba(0,0,0,.08);color:var(--pp-dev-info-color-dark);background-color:rgba(0,0,0,.03)}.pp-dev-info-namespace .pp-dev-info__confirm-content{padding:16px;white-space:pre-wrap;color:var(--pp-dev-info-color-dark);font-size:13px;line-height:1.5}.pp-dev-info-namespace .pp-dev-info__confirm-actions{display:flex;flex-direction:column;gap:8px;padding:0 16px 16px}.pp-dev-info-namespace .pp-dev-info__confirm-btn{width:100%;padding:8px 12px;border-radius:6px;border:1px solid rgba(0,0,0,0);font-size:13px;font-weight:600;cursor:pointer;transition:all .2s ease}.pp-dev-info-namespace .pp-dev-info__confirm-btn--cancel{color:var(--pp-dev-info-color-dark);background-color:rgba(0,0,0,0);border-color:rgba(0,0,0,.2)}.pp-dev-info-namespace .pp-dev-info__confirm-btn--confirm{color:var(--pp-dev-info-color-white);background-color:var(--pp-dev-info-color-primary)}.pp-dev-info-namespace .pp-dev-info__confirm-btn:hover{opacity:.9}.pp-dev-info-namespace.pp-dev-info,.pp-dev-info-namespace .pp-dev-info{position:fixed;z-index:100000;white-space:nowrap;width:fit-content;height:32px;text-align:center;padding:2px;gap:8px;background-color:var(--pp-dev-info-color-white);color:var(--pp-dev-info-color-dark);box-sizing:border-box;display:flex;align-items:center;transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);overflow:visible;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.pp-dev-info-namespace.pp-dev-info *,.pp-dev-info-namespace .pp-dev-info *{color:var(--pp-dev-info-color-dark);font-family:"Inter",sans-serif;font-size:12px;font-weight:400;line-height:18px;letter-spacing:0;text-decoration:none;text-transform:inherit;vertical-align:inherit;box-sizing:border-box;margin:0;padding:0;border:0;outline:0;background:0 0;list-style:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.pp-dev-info-namespace.pp-dev-info__content,.pp-dev-info-namespace .pp-dev-info__content{display:flex;align-items:center;gap:0px}.pp-dev-info-namespace.pp-dev-info__section,.pp-dev-info-namespace .pp-dev-info__section{display:flex;align-items:center;position:relative;padding:0 8px}.pp-dev-info-namespace.pp-dev-info__section:not(:last-child)::after,.pp-dev-info-namespace .pp-dev-info__section:not(:last-child)::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);height:16px;width:1px;background-color:rgba(34,34,34,.24)}@media screen and (prefers-color-scheme: dark){.pp-dev-info-namespace.pp-dev-info__section:not(:last-child)::after,.pp-dev-info-namespace .pp-dev-info__section:not(:last-child)::after{background-color:hsla(0,0%,100%,.2)}}.pp-dev-info-namespace.pp-dev-info__section:first-child,.pp-dev-info-namespace .pp-dev-info__section:first-child{padding-left:0}.pp-dev-info-namespace.pp-dev-info__section:last-child,.pp-dev-info-namespace .pp-dev-info__section:last-child{padding-right:0}.pp-dev-info-namespace.pp-dev-info__item,.pp-dev-info-namespace .pp-dev-info__item{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:400;line-height:18px}.pp-dev-info-namespace.pp-dev-info__label,.pp-dev-info-namespace .pp-dev-info__label{color:var(--pp-dev-info-color-secondary);font-weight:400}.pp-dev-info-namespace.pp-dev-info__value,.pp-dev-info-namespace .pp-dev-info__value{font-weight:600}.pp-dev-info-namespace.pp-dev-info__link,.pp-dev-info-namespace .pp-dev-info__link{color:var(--pp-dev-info-color-primary);text-decoration:none;transition:color .2s ease;display:flex;align-items:center;gap:8px}.pp-dev-info-namespace.pp-dev-info__link:hover,.pp-dev-info-namespace .pp-dev-info__link:hover{color:var(--pp-dev-info-color-primary);text-decoration:underline}.pp-dev-info-namespace.pp-dev-info .primary,.pp-dev-info-namespace .pp-dev-info .primary{color:var(--pp-dev-info-color-primary) !important}.pp-dev-info-namespace.pp-dev-info .success,.pp-dev-info-namespace .pp-dev-info .success{color:var(--pp-dev-info-color-success) !important}.pp-dev-info-namespace.pp-dev-info .info,.pp-dev-info-namespace .pp-dev-info .info{color:var(--pp-dev-info-color-info) !important}.pp-dev-info-namespace.pp-dev-info .warning,.pp-dev-info-namespace .pp-dev-info .warning{color:var(--pp-dev-info-color-warning) !important}.pp-dev-info-namespace.pp-dev-info .danger,.pp-dev-info-namespace .pp-dev-info .danger{color:var(--pp-dev-info-color-danger) !important}.pp-dev-info-namespace.pp-dev-info a,.pp-dev-info-namespace .pp-dev-info a{color:var(--pp-dev-info-color-primary);text-decoration:none;vertical-align:middle;line-height:18px}.pp-dev-info-namespace.pp-dev-info a:hover,.pp-dev-info-namespace .pp-dev-info a:hover{text-decoration:none}.pp-dev-info-namespace.pp-dev-info a:active,.pp-dev-info-namespace.pp-dev-info a:hover,.pp-dev-info-namespace .pp-dev-info a:active,.pp-dev-info-namespace .pp-dev-info a:hover{outline:0}.pp-dev-info-namespace.pp-dev-info button,.pp-dev-info-namespace .pp-dev-info button{padding:1px;border:none;background:none;cursor:pointer;outline:none}.pp-dev-info-namespace.pp-dev-info .bold,.pp-dev-info-namespace.pp-dev-info .status-text,.pp-dev-info-namespace .pp-dev-info .bold,.pp-dev-info-namespace .pp-dev-info .status-text{font-weight:700}.pp-dev-info-namespace.pp-dev-info__drag-handle,.pp-dev-info-namespace .pp-dev-info__drag-handle{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:14px;height:28px;cursor:grab;touch-action:none;border-radius:3px;color:var(--pp-dev-info-color-secondary);opacity:.55;transition:opacity .2s ease,background-color .2s ease}.pp-dev-info-namespace.pp-dev-info__drag-handle svg,.pp-dev-info-namespace .pp-dev-info__drag-handle svg{pointer-events:none;fill:currentColor}.pp-dev-info-namespace.pp-dev-info__drag-handle:hover,.pp-dev-info-namespace .pp-dev-info__drag-handle:hover{opacity:1;background-color:rgba(7,91,126,.06)}.pp-dev-info-namespace.pp-dev-info__settings-btn,.pp-dev-info-namespace .pp-dev-info__settings-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:6px;border-radius:3px;cursor:pointer;color:var(--pp-dev-info-color-secondary);transition:all .2s ease}.pp-dev-info-namespace.pp-dev-info__settings-btn svg,.pp-dev-info-namespace .pp-dev-info__settings-btn svg{width:16px;height:16px;fill:none;transition:transform .3s ease}.pp-dev-info-namespace.pp-dev-info__settings-btn:hover,.pp-dev-info-namespace .pp-dev-info__settings-btn:hover{color:var(--pp-dev-info-color-primary);background-color:rgba(7,91,126,.06)}.pp-dev-info-namespace.pp-dev-info__settings-btn:hover svg,.pp-dev-info-namespace .pp-dev-info__settings-btn:hover svg{transform:rotate(45deg)}.pp-dev-info-namespace.pp-dev-info__settings,.pp-dev-info-namespace .pp-dev-info__settings{position:absolute;min-width:216px;padding:12px;display:flex;flex-direction:column;gap:10px;background-color:var(--pp-dev-info-color-white);border:1px solid rgba(34,34,34,.15);border-radius:3px;box-shadow:0 4px 16px rgba(34,34,34,.2);z-index:100002;cursor:default;white-space:normal;text-align:left}.pp-dev-info-namespace.pp-dev-info__settings .pp-dev-info__settings-title,.pp-dev-info-namespace .pp-dev-info__settings .pp-dev-info__settings-title{font-size:10px;font-weight:600;color:var(--pp-dev-info-color-secondary);text-transform:uppercase;letter-spacing:.4px}.pp-dev-info-namespace.pp-dev-info__settings .pp-dev-info__settings-row,.pp-dev-info-namespace .pp-dev-info__settings .pp-dev-info__settings-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.pp-dev-info-namespace.pp-dev-info__settings .pp-dev-info__settings-toggle,.pp-dev-info-namespace .pp-dev-info__settings .pp-dev-info__settings-toggle{appearance:auto;-webkit-appearance:checkbox;width:14px;height:14px;accent-color:var(--pp-dev-info-color-primary);cursor:pointer;flex-shrink:0}.pp-dev-info-namespace.pp-dev-info__settings .pp-dev-info__corner-grid,.pp-dev-info-namespace .pp-dev-info__settings .pp-dev-info__corner-grid{display:grid;grid-template-columns:repeat(2, 30px);gap:4px}.pp-dev-info-namespace.pp-dev-info__settings .pp-dev-info__corner-btn,.pp-dev-info-namespace .pp-dev-info__settings .pp-dev-info__corner-btn{width:30px;height:22px;border:1px solid rgba(34,34,34,.25);border-radius:3px;cursor:pointer;position:relative;background:rgba(0,0,0,0);transition:border-color .2s ease}.pp-dev-info-namespace.pp-dev-info__settings .pp-dev-info__corner-btn::after,.pp-dev-info-namespace .pp-dev-info__settings .pp-dev-info__corner-btn::after{content:"";position:absolute;width:10px;height:6px;border-radius:1px;background-color:var(--pp-dev-info-color-secondary);transition:background-color .2s ease}.pp-dev-info-namespace.pp-dev-info__settings .pp-dev-info__corner-btn--top-left::after,.pp-dev-info-namespace .pp-dev-info__settings .pp-dev-info__corner-btn--top-left::after{top:2px;left:2px}.pp-dev-info-namespace.pp-dev-info__settings .pp-dev-info__corner-btn--top-right::after,.pp-dev-info-namespace .pp-dev-info__settings .pp-dev-info__corner-btn--top-right::after{top:2px;right:2px}.pp-dev-info-namespace.pp-dev-info__settings .pp-dev-info__corner-btn--bottom-left::after,.pp-dev-info-namespace .pp-dev-info__settings .pp-dev-info__corner-btn--bottom-left::after{bottom:2px;left:2px}.pp-dev-info-namespace.pp-dev-info__settings .pp-dev-info__corner-btn--bottom-right::after,.pp-dev-info-namespace .pp-dev-info__settings .pp-dev-info__corner-btn--bottom-right::after{bottom:2px;right:2px}.pp-dev-info-namespace.pp-dev-info__settings .pp-dev-info__corner-btn:hover,.pp-dev-info-namespace .pp-dev-info__settings .pp-dev-info__corner-btn:hover{border-color:var(--pp-dev-info-color-primary)}.pp-dev-info-namespace.pp-dev-info__settings .pp-dev-info__corner-btn.active,.pp-dev-info-namespace .pp-dev-info__settings .pp-dev-info__corner-btn.active{border-color:var(--pp-dev-info-color-primary)}.pp-dev-info-namespace.pp-dev-info__settings .pp-dev-info__corner-btn.active::after,.pp-dev-info-namespace .pp-dev-info__settings .pp-dev-info__corner-btn.active::after{background-color:var(--pp-dev-info-color-primary)}.pp-dev-info-namespace.pp-dev-info__settings .pp-dev-info__settings-hide-btn,.pp-dev-info-namespace .pp-dev-info__settings .pp-dev-info__settings-hide-btn{width:100%;padding:6px 10px;border:1px solid rgba(34,34,34,.2);border-radius:4px;cursor:pointer;font-weight:600;color:var(--pp-dev-info-color-danger);transition:background-color .2s ease}.pp-dev-info-namespace.pp-dev-info__settings .pp-dev-info__settings-hide-btn:hover,.pp-dev-info-namespace .pp-dev-info__settings .pp-dev-info__settings-hide-btn:hover{background-color:rgba(172,43,43,.06)}.pp-dev-info-namespace.pp-dev-info__settings .pp-dev-info__settings-hint,.pp-dev-info-namespace .pp-dev-info__settings .pp-dev-info__settings-hint{font-size:10px;line-height:14px;color:var(--pp-dev-info-color-secondary)}.pp-dev-info-namespace.pp-dev-info__settings .pp-dev-info__settings-hint code,.pp-dev-info-namespace .pp-dev-info__settings .pp-dev-info__settings-hint code{font-family:monospace;font-size:10px}.pp-dev-info-namespace.pp-dev-info__settings .pp-dev-info__settings-reset,.pp-dev-info-namespace .pp-dev-info__settings .pp-dev-info__settings-reset{align-self:flex-start;font-size:11px;color:var(--pp-dev-info-color-primary);cursor:pointer}.pp-dev-info-namespace.pp-dev-info__settings .pp-dev-info__settings-reset:hover,.pp-dev-info-namespace .pp-dev-info__settings .pp-dev-info__settings-reset:hover{text-decoration:underline}.pp-dev-info-namespace.pp-dev-info__wrap-btn,.pp-dev-info-namespace .pp-dev-info__wrap-btn{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:6px;cursor:pointer;border-radius:3px;transition:background-color .2s ease}.pp-dev-info-namespace.pp-dev-info__wrap-btn:hover,.pp-dev-info-namespace .pp-dev-info__wrap-btn:hover{background-color:rgba(7,91,126,.06);animation:arrowHover .8s linear infinite}.pp-dev-info-namespace.pp-dev-info__wrap-btn-arrow,.pp-dev-info-namespace .pp-dev-info__wrap-btn-arrow{width:16px;height:16px;color:var(--pp-dev-info-color-dark);fill:none;transition:transform .2s ease}.pp-dev-info-namespace.pp-dev-info.closed,.pp-dev-info-namespace .pp-dev-info.closed{z-index:100002}.pp-dev-info-namespace.pp-dev-info.closed .pp-dev-info__wrap-btn:hover,.pp-dev-info-namespace .pp-dev-info.closed .pp-dev-info__wrap-btn:hover{animation:arrowHover 1.2s linear infinite}.pp-dev-info-namespace.pp-dev-info.pp-dev-info--top-left,.pp-dev-info-namespace .pp-dev-info.pp-dev-info--top-left{top:0;left:0;border-radius:0 0 4px 0;box-shadow:2px 2px 8px 0 rgba(34,34,34,.08);border-bottom:1px solid rgba(34,34,34,.08)}.pp-dev-info-namespace.pp-dev-info.pp-dev-info--top-left .pp-dev-info__settings,.pp-dev-info-namespace .pp-dev-info.pp-dev-info--top-left .pp-dev-info__settings{top:calc(100% + 8px);left:0}.pp-dev-info-namespace.pp-dev-info.pp-dev-info--top-left .pp-dev-info__wrap-btn,.pp-dev-info-namespace .pp-dev-info.pp-dev-info--top-left .pp-dev-info__wrap-btn{order:99}.pp-dev-info-namespace.pp-dev-info.pp-dev-info--top-left .pp-dev-info__wrap-btn-arrow,.pp-dev-info-namespace .pp-dev-info.pp-dev-info--top-left .pp-dev-info__wrap-btn-arrow{transform:rotate(180deg)}.pp-dev-info-namespace.pp-dev-info.pp-dev-info--top-left.closed,.pp-dev-info-namespace .pp-dev-info.pp-dev-info--top-left.closed{transform:translateX(calc(-100% + 32px))}.pp-dev-info-namespace.pp-dev-info.pp-dev-info--top-left.closed .pp-dev-info__wrap-btn-arrow,.pp-dev-info-namespace .pp-dev-info.pp-dev-info--top-left.closed .pp-dev-info__wrap-btn-arrow{transform:rotate(0deg)}.pp-dev-info-namespace.pp-dev-info.pp-dev-info--top-left.pp-dev-info--auto-hide:not(.is-peeking):not(.is-dragging),.pp-dev-info-namespace .pp-dev-info.pp-dev-info--top-left.pp-dev-info--auto-hide:not(.is-peeking):not(.is-dragging){transform:translateX(calc(-100% + 4px));box-shadow:2px 2px 8px 0 rgba(34,34,34,.08),inset -4px 0 0 0 var(--pp-dev-info-color-primary)}.pp-dev-info-namespace.pp-dev-info.pp-dev-info--top-left.pp-dev-info--auto-hide:not(.is-peeking):not(.is-dragging)::after,.pp-dev-info-namespace .pp-dev-info.pp-dev-info--top-left.pp-dev-info--auto-hide:not(.is-peeking):not(.is-dragging)::after{content:"";position:absolute;top:-6px;bottom:-6px;right:-8px;width:8px}.pp-dev-info-namespace.pp-dev-info.pp-dev-info--top-right,.pp-dev-info-namespace .pp-dev-info.pp-dev-info--top-right{top:0;right:0;border-radius:0 0 0 4px;box-shadow:-2px 2px 8px 0 rgba(34,34,34,.08);border-bottom:1px solid rgba(34,34,34,.08)}.pp-dev-info-namespace.pp-dev-info.pp-dev-info--top-right .pp-dev-info__settings,.pp-dev-info-namespace .pp-dev-info.pp-dev-info--top-right .pp-dev-info__settings{top:calc(100% + 8px);right:0}.pp-dev-info-namespace.pp-dev-info.pp-dev-info--top-right.closed,.pp-dev-info-namespace .pp-dev-info.pp-dev-info--top-right.closed{transform:translateX(calc(100% - 32px))}.pp-dev-info-namespace.pp-dev-info.pp-dev-info--top-right.closed .pp-dev-info__wrap-btn-arrow,.pp-dev-info-namespace .pp-dev-info.pp-dev-info--top-right.closed .pp-dev-info__wrap-btn-arrow{transform:rotate(180deg)}.pp-dev-info-namespace.pp-dev-info.pp-dev-info--top-right.pp-dev-info--auto-hide:not(.is-peeking):not(.is-dragging),.pp-dev-info-namespace .pp-dev-info.pp-dev-info--top-right.pp-dev-info--auto-hide:not(.is-peeking):not(.is-dragging){transform:translateX(calc(100% - 4px));box-shadow:-2px 2px 8px 0 rgba(34,34,34,.08),inset 4px 0 0 0 var(--pp-dev-info-color-primary)}.pp-dev-info-namespace.pp-dev-info.pp-dev-info--top-right.pp-dev-info--auto-hide:not(.is-peeking):not(.is-dragging)::after,.pp-dev-info-namespace .pp-dev-info.pp-dev-info--top-right.pp-dev-info--auto-hide:not(.is-peeking):not(.is-dragging)::after{content:"";position:absolute;top:-6px;bottom:-6px;left:-8px;width:8px}.pp-dev-info-namespace.pp-dev-info.pp-dev-info--bottom-left,.pp-dev-info-namespace .pp-dev-info.pp-dev-info--bottom-left{bottom:0;left:0;border-radius:0 4px 0 0;box-shadow:2px -2px 8px 0 rgba(34,34,34,.08);border-top:1px solid rgba(34,34,34,.08)}.pp-dev-info-namespace.pp-dev-info.pp-dev-info--bottom-left .pp-dev-info__settings,.pp-dev-info-namespace .pp-dev-info.pp-dev-info--bottom-left .pp-dev-info__settings{bottom:calc(100% + 8px);left:0}.pp-dev-info-namespace.pp-dev-info.pp-dev-info--bottom-left .pp-dev-info__wrap-btn,.pp-dev-info-namespace .pp-dev-info.pp-dev-info--bottom-left .pp-dev-info__wrap-btn{order:99}.pp-dev-info-namespace.pp-dev-info.pp-dev-info--bottom-left .pp-dev-info__wrap-btn-arrow,.pp-dev-info-namespace .pp-dev-info.pp-dev-info--bottom-left .pp-dev-info__wrap-btn-arrow{transform:rotate(180deg)}.pp-dev-info-namespace.pp-dev-info.pp-dev-info--bottom-left.closed,.pp-dev-info-namespace .pp-dev-info.pp-dev-info--bottom-left.closed{transform:translateX(calc(-100% + 32px))}.pp-dev-info-namespace.pp-dev-info.pp-dev-info--bottom-left.closed .pp-dev-info__wrap-btn-arrow,.pp-dev-info-namespace .pp-dev-info.pp-dev-info--bottom-left.closed .pp-dev-info__wrap-btn-arrow{transform:rotate(0deg)}.pp-dev-info-namespace.pp-dev-info.pp-dev-info--bottom-left.pp-dev-info--auto-hide:not(.is-peeking):not(.is-dragging),.pp-dev-info-namespace .pp-dev-info.pp-dev-info--bottom-left.pp-dev-info--auto-hide:not(.is-peeking):not(.is-dragging){transform:translateX(calc(-100% + 4px));box-shadow:2px -2px 8px 0 rgba(34,34,34,.08),inset -4px 0 0 0 var(--pp-dev-info-color-primary)}.pp-dev-info-namespace.pp-dev-info.pp-dev-info--bottom-left.pp-dev-info--auto-hide:not(.is-peeking):not(.is-dragging)::after,.pp-dev-info-namespace .pp-dev-info.pp-dev-info--bottom-left.pp-dev-info--auto-hide:not(.is-peeking):not(.is-dragging)::after{content:"";position:absolute;top:-6px;bottom:-6px;right:-8px;width:8px}.pp-dev-info-namespace.pp-dev-info.pp-dev-info--bottom-right,.pp-dev-info-namespace .pp-dev-info.pp-dev-info--bottom-right{bottom:0;right:0;border-radius:4px 0 0 0;box-shadow:-2px -2px 8px 0 rgba(34,34,34,.08);border-top:1px solid rgba(34,34,34,.08)}.pp-dev-info-namespace.pp-dev-info.pp-dev-info--bottom-right .pp-dev-info__settings,.pp-dev-info-namespace .pp-dev-info.pp-dev-info--bottom-right .pp-dev-info__settings{bottom:calc(100% + 8px);right:0}.pp-dev-info-namespace.pp-dev-info.pp-dev-info--bottom-right.closed,.pp-dev-info-namespace .pp-dev-info.pp-dev-info--bottom-right.closed{transform:translateX(calc(100% - 32px))}.pp-dev-info-namespace.pp-dev-info.pp-dev-info--bottom-right.closed .pp-dev-info__wrap-btn-arrow,.pp-dev-info-namespace .pp-dev-info.pp-dev-info--bottom-right.closed .pp-dev-info__wrap-btn-arrow{transform:rotate(180deg)}.pp-dev-info-namespace.pp-dev-info.pp-dev-info--bottom-right.pp-dev-info--auto-hide:not(.is-peeking):not(.is-dragging),.pp-dev-info-namespace .pp-dev-info.pp-dev-info--bottom-right.pp-dev-info--auto-hide:not(.is-peeking):not(.is-dragging){transform:translateX(calc(100% - 4px));box-shadow:-2px -2px 8px 0 rgba(34,34,34,.08),inset 4px 0 0 0 var(--pp-dev-info-color-primary)}.pp-dev-info-namespace.pp-dev-info.pp-dev-info--bottom-right.pp-dev-info--auto-hide:not(.is-peeking):not(.is-dragging)::after,.pp-dev-info-namespace .pp-dev-info.pp-dev-info--bottom-right.pp-dev-info--auto-hide:not(.is-peeking):not(.is-dragging)::after{content:"";position:absolute;top:-6px;bottom:-6px;left:-8px;width:8px}.pp-dev-info-namespace.pp-dev-info.pp-dev-info--auto-hide,.pp-dev-info-namespace .pp-dev-info.pp-dev-info--auto-hide{z-index:100002}.pp-dev-info-namespace.pp-dev-info.is-dragging,.pp-dev-info-namespace .pp-dev-info.is-dragging{transition:none;user-select:none;cursor:grabbing}.pp-dev-info-namespace.pp-dev-info.is-dragging .pp-dev-info__drag-handle,.pp-dev-info-namespace .pp-dev-info.is-dragging .pp-dev-info__drag-handle{cursor:grabbing}.pp-dev-info-namespace.pp-dev-info.pp-dev-info--hidden,.pp-dev-info-namespace .pp-dev-info.pp-dev-info--hidden{display:none}.pp-dev-info-namespace.pp-dev-info .sync-button,.pp-dev-info-namespace .pp-dev-info .sync-button{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:6px;background-color:rgba(0,0,0,0);border-radius:3px;cursor:pointer;color:var(--pp-dev-info-color-primary);transition:all .2s ease;position:relative;overflow:hidden}.pp-dev-info-namespace.pp-dev-info .sync-button::before,.pp-dev-info-namespace .pp-dev-info .sync-button::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:currentColor;opacity:0;transition:opacity .2s ease;border-radius:3px}.pp-dev-info-namespace.pp-dev-info .sync-button svg,.pp-dev-info-namespace .pp-dev-info .sync-button svg{width:16px;height:16px;position:relative;z-index:1;transition:transform .3s ease}.pp-dev-info-namespace.pp-dev-info .sync-button:hover:not(.disabled),.pp-dev-info-namespace .pp-dev-info .sync-button:hover:not(.disabled){color:var(--pp-dev-info-color-primary);background-color:rgba(7,91,126,.06)}.pp-dev-info-namespace.pp-dev-info .sync-button:hover:not(.disabled) svg,.pp-dev-info-namespace .pp-dev-info .sync-button:hover:not(.disabled) svg{transform:scale(1.1) rotate(45deg);transition:transform .2s ease}.pp-dev-info-namespace.pp-dev-info .sync-button:active:not(.disabled) svg,.pp-dev-info-namespace .pp-dev-info .sync-button:active:not(.disabled) svg{transform:scale(0.9) rotate(45deg)}.pp-dev-info-namespace.pp-dev-info .sync-button.disabled,.pp-dev-info-namespace .pp-dev-info .sync-button.disabled{opacity:.5;cursor:not-allowed;pointer-events:none;color:var(--pp-dev-info-color-secondary)}.pp-dev-info-namespace.pp-dev-info .sync-button.syncing svg,.pp-dev-info-namespace .pp-dev-info .sync-button.syncing svg{animation:rotate 1.5s linear infinite}.pp-dev-info-namespace.pp-dev-info__sep,.pp-dev-info-namespace .pp-dev-info__sep{display:inline-flex;flex-shrink:0;width:1px;height:16px;background-color:rgba(34,34,34,.24)}@media screen and (prefers-color-scheme: dark){.pp-dev-info-namespace.pp-dev-info__sep,.pp-dev-info-namespace .pp-dev-info__sep{background-color:hsla(0,0%,100%,.2)}}@keyframes rotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.pp-dev-info-namespace.pp-dev-info .margin-5,.pp-dev-info-namespace .pp-dev-info .margin-5{margin-right:5px}.pp-dev-info-namespace.pp-dev-info .margin-10,.pp-dev-info-namespace .pp-dev-info .margin-10{margin-right:10px}.pp-dev-info-namespace.pp-dev-info .custom-font,.pp-dev-info-namespace .pp-dev-info .custom-font{font-family:"Inter",sans-serif;font-size:13px;font-weight:400;vertical-align:middle;line-height:18px;color:var(--pp-dev-info-color-dark)}.pp-dev-info-namespace.pp-dev-info .custom-font:not(.not-colored) a,.pp-dev-info-namespace .pp-dev-info .custom-font:not(.not-colored) a{color:var(--pp-dev-info-color-primary) !important}@keyframes rotation{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes arrowHover{0%{transform:translateX(2px)}50%{transform:translateX(-2px)}100%{transform:translateX(2px)}}@media screen and (prefers-color-scheme: dark){.pp-dev-info-namespace.pp-dev-info,.pp-dev-info-namespace .pp-dev-info{--pp-dev-info-color-primary: #2a8db5;--pp-dev-info-color-secondary: rgba(220, 220, 220, 0.64);--pp-dev-info-color-success: #0fad5e;--pp-dev-info-color-info: #2dccff;--pp-dev-info-color-warning: #ffb302;--pp-dev-info-color-danger: #e05252;--pp-dev-info-color-light: #343a40;--pp-dev-info-color-dark: #f8f9fa;--pp-dev-info-color-white: #000000;--pp-dev-info-color-black: #ffffff}}@media(prefers-reduced-motion: reduce){.pp-dev-info-namespace.pp-dev-info,.pp-dev-info-namespace .pp-dev-info,.pp-dev-info-namespace .pp-dev-info__popup,.pp-dev-info-namespace .pp-dev-info__settings{transition:none}}
2
2
 
3
3
  /*# sourceMappingURL=client.css.map */
package/dist/client/client.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["client.scss"],"names":[],"mappings":"AAEA,uBAEE,qCACA,uCACA,qCACA,kCACA,qCACA,oCACA,mCACA,kCACA,mCACA,mCAEA,2CACE,eACA,SACA,WACA,kBACA,gBACA,mBACA,uBACA,gDACA,WACE,mDAEF,kBACA,aACA,sBACA,gDACA,gBACA,eACA,oDACA,wBACA,UACA,0BACA,kCAEA,oDACE,2BACA,UAGF,mDACE,2BACA,UAGF,oDACE,kBACA,SACA,OACA,WACA,mGACA,WACA,sBACA,4BACA,wBAGF,iDACE,aACA,mBACA,8BACA,kBACA,YACA,gBACA,WACA,sBACA,uDACA,oDAEA,sDACE,eACA,gBACA,qCACA,gBAGF,uDACE,eACA,WACA,YACA,aACA,mBACA,uBACA,qCACA,kBACA,qCAEA,6DACE,oCAGF,2DACE,8BAGF,iEACE,qBAKN,mDACE,kBACA,gBACA,sBACA,YACA,gDACA,WACA,gBACA,eAGF,oDACE,8CACA,WACE,2DAIA,8EACE,kDAGF,gFACE,uCAGF,iFACE,6EAKN,mDACE,6CACA,WACE,2DAIA,6EACE,iDAGF,+EACE,sCAGF,gFACE,4EAKN,iDACE,2CACA,WACE,6DAIA,2EACE,+CAGF,6EACE,oCAGF,8EACE,0EAKN,oDACE,8CACA,WACE,2DAIA,8EACE,kDACA,oCAGF,gFACE,uCAGF,iFACE,6EAMR,yGAEE,eACA,QACA,eACA,aACA,mBACA,uBACA,iCACA,0BACA,kCAGF,6CACE,8BACA,mBACA,iCACA,gDACA,WACE,qDAEF,gBAEA,mDACE,kBACA,eACA,gBACA,wCACA,oCACA,iCAGF,qDACE,aACA,qBACA,oCACA,eACA,gBAGF,qDACE,aACA,yBACA,QACA,oBAGF,iDACE,gBACA,iBACA,kBACA,+BACA,eACA,gBACA,eACA,wBAEA,yDACE,oCACA,+BACA,4BAGF,0DACE,qCACA,kDAGF,uDACE,WAKN,uEAEE,eACA,eACA,mBACA,kBACA,OA1RY,KA2RZ,sBACA,QACA,kBACA,iBACA,gDACA,wBACA,oCACA,qCACA,sBACA,aACA,mBACA,gDACA,iBACA,0BACA,kCAMA,2EACE,oCACA,uBACA,eACA,gBACA,gBACA,wBACA,qBACA,uBACA,uBACA,sBACA,SACA,UACA,SACA,UACA,eACA,gBACA,mCACA,kCAGF,yFACE,aACA,mBACA,QAGF,yFACE,aACA,mBACA,kBACA,cAEA,yIACE,WACA,kBACA,QACA,QACA,2BACA,YACA,UACA,iCAEA,+CAVF,yIAWI,qCAIJ,iHACE,eAGF,+GACE,gBAIJ,mFACE,aACA,mBACA,QACA,eACA,gBAGF,qFACE,yCACA,gBAGF,qFACE,gBAGF,mFACE,uCACA,qBACA,0BACA,aACA,mBACA,QAEA,+FACE,uCACA,0BAQJ,yFACE,kDAGF,yFACE,kDAGF,mFACE,+CAGF,yFACE,kDAGF,uFACE,iDAGF,2EACE,uCACA,qBACA,sBACA,gBAEA,uFACE,qBAGF,gLAEE,UAIJ,qFACE,YACA,YACA,gBACA,eACA,aAGF,oLA/CE,gBAoDF,2FACE,uBACA,aACA,mBACA,uBACA,WACA,YACA,kBACA,YACA,eACA,kBACA,qCAEA,uGACE,iCACA,yCAGF,uGACE,WACA,YACA,mCACA,8BAIJ,qFACE,wCACA,eAGE,+IACE,0CAGF,+IACE,yBAKN,iGACE,aACA,mBACA,uBACA,WACA,YACA,YACA,iBACA,+BACA,YACA,kBACA,eACA,uCACA,wBACA,kBACA,gBAEA,iHACE,WACA,kBACA,MACA,OACA,WACA,YACA,8BACA,UACA,4BACA,kBAGF,yGACE,kBACA,UACA,8BAGF,2IACE,uCAEA,mJACE,mCACA,8BAKF,qJACE,mCAIJ,mHACE,WACA,mBACA,oBACA,yCAIA,yHACE,sCAKN,kBACE,KACE,uBAEF,GACE,0BAIJ,2FACE,iBAGF,6FACE,kBAGF,iGACE,uBACA,eACA,gBACA,sBACA,gBACA,oCAEA,yIACE,kDAIJ,oBACE,GACE,uBAEF,KACE,0BAIJ,sBACE,GACE,0BAEF,IACE,2BAEF,KACE,2BAKJ,+CACE,uEAEE,qCACA,uCACA,qCACA,kCACA,qCACA,oCACA,mCACA,kCACA,mCACA","file":"client.css","sourcesContent":["$pp-dev-height: 30px;\n\n.pp-dev-info-namespace {\n // Define theme colors\n --pp-dev-info-color-primary: #007bff;\n --pp-dev-info-color-secondary: #6c757d;\n --pp-dev-info-color-success: #28a745;\n --pp-dev-info-color-info: #17a2b8;\n --pp-dev-info-color-warning: #ffc107;\n --pp-dev-info-color-danger: #dc3545;\n --pp-dev-info-color-light: #f8f9fa;\n --pp-dev-info-color-dark: #343a40;\n --pp-dev-info-color-white: #ffffff;\n --pp-dev-info-color-black: #000000;\n\n .pp-dev-info__popup {\n position: fixed;\n top: 10px;\n right: 10px;\n width: max-content;\n max-width: 300px;\n height: max-content;\n max-height: max-content;\n background-color: var(--pp-dev-info-color-white);\n box-shadow:\n 0 4px 6px rgba(0, 0, 0, 0.1),\n 0 1px 3px rgba(0, 0, 0, 0.08);\n border-radius: 8px;\n display: flex;\n flex-direction: column;\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n overflow: hidden;\n z-index: 100001;\n border: 1px solid var(--pp-dev-info-color-secondary);\n transform: translateX(0);\n opacity: 1;\n backdrop-filter: blur(8px);\n -webkit-backdrop-filter: blur(8px);\n\n &.entering {\n transform: translateX(100%);\n opacity: 0;\n }\n\n &.exiting {\n transform: translateX(100%);\n opacity: 0;\n }\n\n &-progress {\n position: absolute;\n bottom: 0;\n left: 0;\n height: 4px;\n background: linear-gradient(90deg, var(--pp-dev-info-color-primary), var(--pp-dev-info-color-info));\n width: 100%;\n transform-origin: left;\n transition: width 0.1s linear;\n border-radius: 0 0 0 8px;\n }\n\n &-title {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px;\n height: auto;\n min-height: 30px;\n width: 100%;\n box-sizing: border-box;\n border-bottom: 1px solid var(--pp-dev-info-color-light);\n background-color: var(--pp-dev-info-color-secondary);\n\n &-text {\n font-size: 14px;\n font-weight: 600;\n color: var(--pp-dev-info-color-white);\n line-height: 1.4;\n }\n\n &-close {\n cursor: pointer;\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--pp-dev-info-color-white);\n border-radius: 4px;\n transition: background-color 0.2s ease;\n\n &:hover {\n background-color: rgba(255, 255, 255, 0.1);\n }\n\n svg {\n transition: transform 0.2s ease;\n }\n\n &:hover svg {\n transform: scale(1.1);\n }\n }\n }\n\n &-content {\n padding: 12px 16px;\n overflow-y: auto;\n box-sizing: border-box;\n flex-grow: 1;\n background-color: var(--pp-dev-info-color-white);\n width: 100%;\n line-height: 1.5;\n font-size: 13px;\n }\n\n &--success {\n border-color: var(--pp-dev-info-color-success);\n box-shadow:\n 0 4px 6px rgba(40, 167, 69, 0.1),\n 0 1px 3px rgba(40, 167, 69, 0.08);\n\n .pp-dev-info__popup {\n &-title {\n background-color: var(--pp-dev-info-color-success);\n }\n\n &-content {\n color: var(--pp-dev-info-color-success);\n }\n\n &-progress {\n background: linear-gradient(90deg, var(--pp-dev-info-color-success), #4caf50);\n }\n }\n }\n\n &--danger {\n border-color: var(--pp-dev-info-color-danger);\n box-shadow:\n 0 4px 6px rgba(220, 53, 69, 0.1),\n 0 1px 3px rgba(220, 53, 69, 0.08);\n\n .pp-dev-info__popup {\n &-title {\n background-color: var(--pp-dev-info-color-danger);\n }\n\n &-content {\n color: var(--pp-dev-info-color-danger);\n }\n\n &-progress {\n background: linear-gradient(90deg, var(--pp-dev-info-color-danger), #f44336);\n }\n }\n }\n\n &--info {\n border-color: var(--pp-dev-info-color-info);\n box-shadow:\n 0 4px 6px rgba(23, 162, 184, 0.1),\n 0 1px 3px rgba(23, 162, 184, 0.08);\n\n .pp-dev-info__popup {\n &-title {\n background-color: var(--pp-dev-info-color-info);\n }\n\n &-content {\n color: var(--pp-dev-info-color-info);\n }\n\n &-progress {\n background: linear-gradient(90deg, var(--pp-dev-info-color-info), #2196f3);\n }\n }\n }\n\n &--warning {\n border-color: var(--pp-dev-info-color-warning);\n box-shadow:\n 0 4px 6px rgba(255, 193, 7, 0.1),\n 0 1px 3px rgba(255, 193, 7, 0.08);\n\n .pp-dev-info__popup {\n &-title {\n background-color: var(--pp-dev-info-color-warning);\n color: var(--pp-dev-info-color-dark);\n }\n\n &-content {\n color: var(--pp-dev-info-color-warning);\n }\n\n &-progress {\n background: linear-gradient(90deg, var(--pp-dev-info-color-warning), #ff9800);\n }\n }\n }\n }\n\n &.pp-dev-info__confirm-overlay,\n .pp-dev-info__confirm-overlay {\n position: fixed;\n inset: 0;\n z-index: 100003;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: rgba(0, 0, 0, 0.35);\n backdrop-filter: blur(2px);\n -webkit-backdrop-filter: blur(2px);\n }\n\n .pp-dev-info__confirm {\n width: min(500px, calc(100vw - 32px));\n border-radius: 10px;\n border: 1px solid rgba(0, 0, 0, 0.15);\n background-color: var(--pp-dev-info-color-white);\n box-shadow:\n 0 18px 40px rgba(0, 0, 0, 0.35),\n 0 2px 6px rgba(0, 0, 0, 0.2);\n overflow: hidden;\n\n &-title {\n padding: 14px 16px;\n font-size: 15px;\n font-weight: 600;\n border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n color: var(--pp-dev-info-color-dark);\n background-color: rgba(0, 0, 0, 0.03);\n }\n\n &-content {\n padding: 16px;\n white-space: pre-wrap;\n color: var(--pp-dev-info-color-dark);\n font-size: 13px;\n line-height: 1.5;\n }\n\n &-actions {\n display: flex;\n justify-content: flex-end;\n gap: 8px;\n padding: 0 16px 16px;\n }\n\n &-btn {\n min-width: 110px;\n padding: 8px 12px;\n border-radius: 6px;\n border: 1px solid transparent;\n font-size: 13px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s ease;\n\n &--cancel {\n color: var(--pp-dev-info-color-dark);\n background-color: transparent;\n border-color: rgba(0, 0, 0, 0.2);\n }\n\n &--confirm {\n color: var(--pp-dev-info-color-white);\n background-color: var(--pp-dev-info-color-primary);\n }\n\n &:hover {\n opacity: 0.9;\n }\n }\n }\n\n &.pp-dev-info,\n .pp-dev-info {\n position: fixed;\n z-index: 100000;\n white-space: nowrap;\n width: fit-content;\n height: $pp-dev-height;\n top: calc(100% - $pp-dev-height);\n right: 0;\n text-align: center;\n padding: 8px 12px;\n background-color: var(--pp-dev-info-color-white);\n border-radius: 8px 0 0 0;\n color: var(--pp-dev-info-color-dark);\n box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);\n box-sizing: border-box;\n display: flex;\n align-items: center;\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n overflow: visible;\n backdrop-filter: blur(8px);\n -webkit-backdrop-filter: blur(8px);\n\n // Setup default values for styles that can be overlapped by other page styles\n // (e.g. color, font-family, font-size etc.)\n // This is needed to make sure that the extension styles are not overlapped by the page styles\n // and the extension is still usable\n * {\n color: var(--pp-dev-info-color-dark);\n font-family: sans-serif;\n font-size: 13px;\n font-weight: 300;\n line-height: 1.5;\n letter-spacing: 0.00938em;\n text-decoration: none;\n text-transform: inherit;\n vertical-align: inherit;\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: 0;\n outline: 0;\n background: 0 0;\n list-style: none;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n\n &__content {\n display: flex;\n align-items: center;\n gap: 0px;\n }\n\n &__section {\n display: flex;\n align-items: center;\n position: relative;\n padding: 0 8px;\n\n &:not(:last-child)::after {\n content: '';\n position: absolute;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n height: 12px;\n width: 1px;\n background-color: rgba(0, 0, 0, 0.15);\n\n @media screen and (prefers-color-scheme: dark) {\n background-color: rgba(255, 255, 255, 0.2);\n }\n }\n\n &:first-child {\n padding-left: 0;\n }\n\n &:last-child {\n padding-right: 0;\n }\n }\n\n &__item {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 13px;\n line-height: 1.5;\n }\n\n &__label {\n color: var(--pp-dev-info-color-secondary);\n font-weight: 500;\n }\n\n &__value {\n font-weight: 600;\n }\n\n &__link {\n color: var(--pp-dev-info-color-primary);\n text-decoration: none;\n transition: color 0.2s ease;\n display: flex;\n align-items: center;\n gap: 4px;\n\n &:hover {\n color: var(--pp-dev-info-color-primary);\n text-decoration: underline;\n }\n }\n\n @mixin bold {\n font-weight: 700;\n }\n\n .primary {\n color: var(--pp-dev-info-color-primary) !important;\n }\n\n .success {\n color: var(--pp-dev-info-color-success) !important;\n }\n\n .info {\n color: var(--pp-dev-info-color-info) !important;\n }\n\n .warning {\n color: var(--pp-dev-info-color-warning) !important;\n }\n\n .danger {\n color: var(--pp-dev-info-color-danger) !important;\n }\n\n a {\n color: var(--pp-dev-info-color-primary);\n text-decoration: none;\n vertical-align: middle;\n line-height: 1.5;\n\n &:hover {\n text-decoration: none;\n }\n\n &:active,\n &:hover {\n outline: 0;\n }\n }\n\n button {\n padding: 1px;\n border: none;\n background: none;\n cursor: pointer;\n outline: none;\n }\n\n .bold,\n .status-text {\n @include bold;\n }\n\n &__wrap-btn {\n box-sizing: content-box;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n margin-right: 12px;\n padding: 4px;\n cursor: pointer;\n border-radius: 4px;\n transition: background-color 0.2s ease;\n\n &:hover {\n background-color: rgba(0, 0, 0, 0.05);\n animation: arrowHover 0.8s linear infinite;\n }\n\n &-arrow {\n width: 16px;\n height: 16px;\n fill: var(--pp-dev-info-color-dark);\n transition: transform 0.2s ease;\n }\n }\n\n &.closed {\n transform: translateX(calc(100% - 40px));\n z-index: 100002;\n\n & .pp-dev-info__wrap-btn {\n &:hover {\n animation: arrowHover 1.2s linear infinite;\n }\n\n &-arrow {\n transform: rotate(180deg);\n }\n }\n }\n\n .sync-button {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 26px;\n padding: 4px;\n margin-left: 12px;\n background-color: transparent;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n color: var(--pp-dev-info-color-primary);\n transition: all 0.2s ease;\n position: relative;\n overflow: hidden;\n\n &::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: currentColor;\n opacity: 0;\n transition: opacity 0.2s ease;\n border-radius: 4px;\n }\n\n svg {\n position: relative;\n z-index: 1;\n transition: transform 0.3s ease;\n }\n\n &:hover:not(.disabled) {\n color: var(--pp-dev-info-color-primary);\n\n svg {\n transform: scale(1.1) rotate(45deg);\n transition: transform 0.2s ease;\n }\n }\n\n &:active:not(.disabled) {\n svg {\n transform: scale(0.9) rotate(45deg);\n }\n }\n\n &.disabled {\n opacity: 0.5;\n cursor: not-allowed;\n pointer-events: none;\n color: var(--pp-dev-info-color-secondary);\n }\n\n &.syncing {\n svg {\n animation: rotate 1.5s linear infinite;\n }\n }\n }\n\n @keyframes rotate {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n }\n\n .margin-5 {\n margin-right: 5px;\n }\n\n .margin-10 {\n margin-right: 10px;\n }\n\n .custom-font {\n font-family: sans-serif;\n font-size: 13px;\n font-weight: 300;\n vertical-align: middle;\n line-height: 1.5;\n color: var(--pp-dev-info-color-dark);\n\n &:not(.not-colored) a {\n color: var(--pp-dev-info-color-primary) !important;\n }\n }\n\n @keyframes rotation {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n\n @keyframes arrowHover {\n 0% {\n transform: translateX(2px);\n }\n 50% {\n transform: translateX(-2px);\n }\n 100% {\n transform: translateX(2px);\n }\n }\n\n // Dark mode support with css variables\n @media screen and (prefers-color-scheme: dark) {\n & {\n // Dark theme colors\n --pp-dev-info-color-primary: #007bff;\n --pp-dev-info-color-secondary: #a4abb6;\n --pp-dev-info-color-success: #56f000;\n --pp-dev-info-color-info: #2dccff;\n --pp-dev-info-color-warning: #ffb302;\n --pp-dev-info-color-danger: #ff3838;\n --pp-dev-info-color-light: #343a40;\n --pp-dev-info-color-dark: #f8f9fa;\n --pp-dev-info-color-white: #000000;\n --pp-dev-info-color-black: #ffffff;\n }\n }\n }\n}\n"]}
1
+ {"version":3,"sourceRoot":"","sources":["client.scss"],"names":[],"mappings":"AA2CA,uBAEE,qCACA,sDACA,qCACA,kCACA,qCACA,oCACA,mCACA,kCACA,mCACA,mCAEA,2CACE,eACA,SACA,WACA,YACA,6BACA,YACA,gDACA,uCACA,kBACA,aACA,sBACA,qBACA,QACA,aACA,gDACA,gBACA,eACA,uDACA,wBACA,UACA,sBACA,6DAEA,oDACE,wCACA,UAGF,mDACE,wCACA,UAGF,iDACE,aACA,uBACA,8BACA,QACA,UACA,aACA,WACA,sBACA,gBACA,cAEA,sDACE,aACA,mBACA,uBACA,WACA,YACA,cACA,sCAGF,sDACE,OACA,cACA,eACA,gBACA,iBACA,gBACA,sBAGF,uDACE,eACA,WACA,YACA,aACA,mBACA,uBACA,eACA,yBACA,kBACA,0BACA,cAEA,6DACE,oCAGF,2DACE,8BAKN,mDACE,iBACA,UACA,wBACA,gBACA,sBACA,YACA,+BACA,wBACA,eACA,gBACA,iBACA,gBACA,sBAGF,oDACE,6DACA,mDAGF,mDACE,4DACA,kDAGF,iDACE,0DACA,gDAGF,oDACE,6DACA,mDAIF,iDACE,WACA,UACA,iBACA,uDAEA,mHAEE,yCAKN,yGAEE,eACA,QACA,eACA,aACA,mBACA,uBACA,iCACA,0BACA,kCAGF,6CACE,8BACA,kBACA,iCACA,gDACA,8CACA,gBAEA,mDACE,kBACA,eACA,gBACA,wCACA,oCACA,iCAGF,qDACE,aACA,qBACA,oCACA,eACA,gBAGF,qDACE,aACA,sBACA,QACA,oBAGF,iDACE,WACA,iBACA,kBACA,+BACA,eACA,gBACA,eACA,wBAEA,yDACE,oCACA,+BACA,4BAGF,0DACE,qCACA,kDAGF,uDACE,WAKN,uEAEE,eACA,eACA,mBACA,kBACA,OA/QY,KAgRZ,kBACA,YACA,QACA,gDACA,oCACA,sBACA,aACA,mBACA,gDACA,iBACA,0BACA,kCAMA,2EACE,oCACA,+BACA,eACA,gBACA,iBACA,iBACA,qBACA,uBACA,uBACA,sBACA,SACA,UACA,SACA,UACA,eACA,gBACA,mCACA,kCAGF,yFACE,aACA,mBACA,QAGF,yFACE,aACA,mBACA,kBACA,cAEA,yIACE,WACA,kBACA,QACA,QACA,2BACA,YACA,UACA,oCAEA,+CAVF,yIAWI,qCAIJ,iHACE,eAGF,+GACE,gBAIJ,mFACE,aACA,mBACA,QACA,eACA,gBACA,iBAGF,qFACE,yCACA,gBAGF,qFACE,gBAGF,mFACE,uCACA,qBACA,0BACA,aACA,mBACA,QAEA,+FACE,uCACA,0BAQJ,yFACE,kDAGF,yFACE,kDAGF,mFACE,+CAGF,yFACE,kDAGF,uFACE,iDAGF,2EACE,uCACA,qBACA,sBACA,iBAEA,uFACE,qBAGF,gLAEE,UAIJ,qFACE,YACA,YACA,gBACA,eACA,aAGF,oLA/CE,gBAoDF,iGACE,aACA,mBACA,uBACA,cACA,WACA,YACA,YACA,kBACA,kBACA,yCACA,YACA,WACE,2CAGF,yGACE,oBACA,kBAGF,6GACE,UACA,oCAIJ,mGACE,aACA,mBACA,uBACA,WACA,YACA,YACA,kBACA,eACA,yCACA,wBAEA,2GACE,WACA,YACA,UACA,8BAGF,+GACE,uCACA,oCAEA,uHACE,wBAKN,2FACE,kBACA,gBACA,aACA,aACA,sBACA,SACA,gDACA,oCACA,kBACA,wCACA,eACA,eACA,mBACA,gBAEA,qJACE,eACA,gBACA,yCACA,yBACA,oBAGF,iJACE,aACA,mBACA,8BACA,SAGF,uJACE,gBACA,4BACA,WACA,YACA,8CACA,eACA,cAGF,+IACE,aACA,sCACA,QAGF,6IACE,WACA,YACA,oCACA,kBACA,eACA,kBACA,yBACA,iCAEA,2JACE,WACA,kBACA,WACA,WACA,kBACA,oDACA,qCAGF,+KACE,QACA,SAGF,iLACE,QACA,UAGF,qLACE,WACA,SAGF,uLACE,WACA,UAGF,yJACE,8CAGF,2JACE,8CAEA,yKACE,kDAKN,2JACE,WACA,iBACA,mCACA,kBACA,eACA,gBACA,sCACA,qCAEA,uKACE,qCAIJ,mJACE,eACA,iBACA,yCAEA,6JACE,sBACA,eAIJ,qJACE,sBACA,eACA,uCACA,eAEA,iKACE,0BAKN,2FACE,sBACA,aACA,mBACA,uBACA,WACA,YACA,YACA,eACA,kBACA,qCAEA,uGACE,oCACA,yCAGF,uGACE,WACA,YACA,oCACA,UACA,8BAIJ,qFACE,eAGE,+IACE,0CASJ,mHACE,MACA,OACA,wBACA,4CACA,2CAEA,iKACE,qBACA,OA2BA,iKACE,SAEA,6KACE,yBAIJ,iIACE,yCAEA,2LACE,uBAIJ,uOACE,wCACA,8FAEA,qPACE,WACA,kBACA,SACA,YACA,WACA,UA9DR,qHACE,MACA,QACA,wBACA,6CACA,2CAEA,mKACE,qBACA,QAIA,mIACE,wCAEA,6LACE,yBAIJ,yOACE,uCACA,8FAGA,uPACE,WACA,kBACA,SACA,YACA,UACA,UAhCR,yHACE,SACA,OACA,wBACA,6CACA,wCAEA,uKACE,wBACA,OA2BA,uKACE,SAEA,mLACE,yBAIJ,uIACE,yCAEA,iMACE,uBAIJ,6OACE,wCACA,+FAEA,2PACE,WACA,kBACA,SACA,YACA,WACA,UA9DR,2HACE,SACA,QACA,wBACA,8CACA,wCAEA,yKACE,wBACA,QAIA,yIACE,wCAEA,mMACE,yBAIJ,+OACE,uCACA,+FAGA,6PACE,WACA,kBACA,SACA,YACA,UACA,UAqCV,qHACE,eAGF,+FACE,gBACA,iBACA,gBAEA,mJACE,gBAIJ,+GACE,aAGF,iGACE,aACA,mBACA,uBACA,WACA,YACA,YACA,+BACA,kBACA,eACA,uCACA,wBACA,kBACA,gBAEA,iHACE,WACA,kBACA,MACA,OACA,WACA,YACA,8BACA,UACA,4BACA,kBAGF,yGACE,WACA,YACA,kBACA,UACA,8BAGF,2IACE,uCACA,oCAEA,mJACE,mCACA,8BAKF,qJACE,mCAIJ,mHACE,WACA,mBACA,oBACA,yCAIA,yHACE,sCAKN,iFACE,oBACA,cACA,UACA,YACA,oCAEA,+CAPF,iFAQI,qCAIJ,kBACE,KACE,uBAEF,GACE,0BAIJ,2FACE,iBAGF,6FACE,kBAGF,iGACE,+BACA,eACA,gBACA,sBACA,iBACA,oCAEA,yIACE,kDAIJ,oBACE,GACE,uBAEF,KACE,0BAIJ,sBACE,GACE,0BAEF,IACE,2BAEF,KACE,2BAKJ,+CACE,uEAEE,qCACA,yDACA,qCACA,kCACA,qCACA,oCACA,mCACA,kCACA,mCACA,oCAKN,uCACE,gKAIE","file":"client.css","sourcesContent":["@use 'sass:map';\n\n$pp-dev-height: 32px;\n$pp-dev-peek: 4px;\n\n// Corner map: v/h — anchored edges; sx — horizontal slide direction for minimize/auto-hide\n// (1 → slides right, -1 → slides left); radius/shadow face the viewport center;\n// edge — hairline border on the exposed horizontal edge.\n$pp-dev-corners: (\n 'top-left': (\n v: top,\n h: left,\n sx: -1,\n radius: 0 0 4px 0,\n shadow: 2px 2px 8px 0 rgba(34, 34, 34, 0.08),\n edge: border-bottom,\n ),\n 'top-right': (\n v: top,\n h: right,\n sx: 1,\n radius: 0 0 0 4px,\n shadow: -2px 2px 8px 0 rgba(34, 34, 34, 0.08),\n edge: border-bottom,\n ),\n 'bottom-left': (\n v: bottom,\n h: left,\n sx: -1,\n radius: 0 4px 0 0,\n shadow: 2px -2px 8px 0 rgba(34, 34, 34, 0.08),\n edge: border-top,\n ),\n 'bottom-right': (\n v: bottom,\n h: right,\n sx: 1,\n radius: 4px 0 0 0,\n shadow: -2px -2px 8px 0 rgba(34, 34, 34, 0.08),\n edge: border-top,\n ),\n);\n\n.pp-dev-info-namespace {\n // Define theme colors\n --pp-dev-info-color-primary: #075b7e;\n --pp-dev-info-color-secondary: rgba(34, 34, 34, 0.64);\n --pp-dev-info-color-success: #077e45;\n --pp-dev-info-color-info: #17a2b8;\n --pp-dev-info-color-warning: #ffb000;\n --pp-dev-info-color-danger: #ac2b2b;\n --pp-dev-info-color-light: #f8f9fa;\n --pp-dev-info-color-dark: #343a40;\n --pp-dev-info-color-white: #ffffff;\n --pp-dev-info-color-black: #000000;\n\n .pp-dev-info__popup {\n position: fixed;\n top: 10px;\n right: 10px;\n width: 280px;\n max-width: calc(100vw - 20px);\n height: auto;\n background-color: var(--pp-dev-info-color-white);\n box-shadow: 0 2px 4px rgba(34, 34, 34, 0.2);\n border-radius: 2px;\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n gap: 4px;\n padding: 12px;\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n overflow: hidden;\n z-index: 100001;\n border-left: 2px solid var(--pp-dev-info-color-primary);\n transform: translateX(0);\n opacity: 1;\n box-sizing: border-box;\n --pp-dev-info-popup-accent: var(--pp-dev-info-color-primary);\n\n &.entering {\n transform: translateX(calc(100% + 10px));\n opacity: 0;\n }\n\n &.exiting {\n transform: translateX(calc(100% + 10px));\n opacity: 0;\n }\n\n &-title {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: 8px;\n padding: 0;\n min-height: 0;\n width: 100%;\n box-sizing: border-box;\n border-bottom: 0;\n color: #040404;\n\n &-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n flex-shrink: 0;\n color: var(--pp-dev-info-popup-accent);\n }\n\n &-text {\n flex: 1;\n color: #040404;\n font-size: 12px;\n font-weight: 600;\n line-height: 18px;\n text-align: left;\n word-break: break-word;\n }\n\n &-close {\n cursor: pointer;\n width: 12px;\n height: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-top: 2px;\n color: rgba(34, 34, 34, 0.64);\n border-radius: 2px;\n transition: color 0.2s ease;\n flex-shrink: 0;\n\n &:hover {\n color: var(--pp-dev-info-color-dark);\n }\n\n svg {\n transition: transform 0.2s ease;\n }\n }\n }\n\n &-content {\n margin-left: 24px;\n padding: 0;\n width: calc(100% - 24px);\n overflow-y: auto;\n box-sizing: border-box;\n flex-grow: 0;\n background-color: transparent;\n color: rgba(34, 34, 34, 0.8);\n font-size: 12px;\n font-weight: 400;\n line-height: 18px;\n text-align: left;\n word-break: break-word;\n }\n\n &--success {\n --pp-dev-info-popup-accent: var(--pp-dev-info-color-success);\n border-left-color: var(--pp-dev-info-color-success);\n }\n\n &--danger {\n --pp-dev-info-popup-accent: var(--pp-dev-info-color-danger);\n border-left-color: var(--pp-dev-info-color-danger);\n }\n\n &--info {\n --pp-dev-info-popup-accent: var(--pp-dev-info-color-info);\n border-left-color: var(--pp-dev-info-color-info);\n }\n\n &--warning {\n --pp-dev-info-popup-accent: var(--pp-dev-info-color-warning);\n border-left-color: var(--pp-dev-info-color-warning);\n }\n\n // Popups anchored to the left screen edge (panel in a left corner)\n &--left {\n right: auto;\n left: 10px;\n border-left: none;\n border-right: 2px solid var(--pp-dev-info-popup-accent);\n\n &.entering,\n &.exiting {\n transform: translateX(calc(-100% - 10px));\n }\n }\n }\n\n &.pp-dev-info__confirm-overlay,\n .pp-dev-info__confirm-overlay {\n position: fixed;\n inset: 0;\n z-index: 100003;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: rgba(0, 0, 0, 0.35);\n backdrop-filter: blur(2px);\n -webkit-backdrop-filter: blur(2px);\n }\n\n .pp-dev-info__confirm {\n width: min(408px, calc(100vw - 32px));\n border-radius: 3px;\n border: 1px solid rgba(0, 0, 0, 0.15);\n background-color: var(--pp-dev-info-color-white);\n box-shadow: 0px 8px 32px 0px rgba(34, 34, 34, 0.4);\n overflow: hidden;\n\n &-title {\n padding: 14px 16px;\n font-size: 15px;\n font-weight: 600;\n border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n color: var(--pp-dev-info-color-dark);\n background-color: rgba(0, 0, 0, 0.03);\n }\n\n &-content {\n padding: 16px;\n white-space: pre-wrap;\n color: var(--pp-dev-info-color-dark);\n font-size: 13px;\n line-height: 1.5;\n }\n\n &-actions {\n display: flex;\n flex-direction: column;\n gap: 8px;\n padding: 0 16px 16px;\n }\n\n &-btn {\n width: 100%;\n padding: 8px 12px;\n border-radius: 6px;\n border: 1px solid transparent;\n font-size: 13px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s ease;\n\n &--cancel {\n color: var(--pp-dev-info-color-dark);\n background-color: transparent;\n border-color: rgba(0, 0, 0, 0.2);\n }\n\n &--confirm {\n color: var(--pp-dev-info-color-white);\n background-color: var(--pp-dev-info-color-primary);\n }\n\n &:hover {\n opacity: 0.9;\n }\n }\n }\n\n &.pp-dev-info,\n .pp-dev-info {\n position: fixed;\n z-index: 100000;\n white-space: nowrap;\n width: fit-content;\n height: $pp-dev-height;\n text-align: center;\n padding: 2px;\n gap: 8px;\n background-color: var(--pp-dev-info-color-white);\n color: var(--pp-dev-info-color-dark);\n box-sizing: border-box;\n display: flex;\n align-items: center;\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n overflow: visible;\n backdrop-filter: blur(8px);\n -webkit-backdrop-filter: blur(8px);\n\n // Setup default values for styles that can be overlapped by other page styles\n // (e.g. color, font-family, font-size etc.)\n // This is needed to make sure that the extension styles are not overlapped by the page styles\n // and the extension is still usable\n * {\n color: var(--pp-dev-info-color-dark);\n font-family: 'Inter', sans-serif;\n font-size: 12px;\n font-weight: 400;\n line-height: 18px;\n letter-spacing: 0;\n text-decoration: none;\n text-transform: inherit;\n vertical-align: inherit;\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: 0;\n outline: 0;\n background: 0 0;\n list-style: none;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n\n &__content {\n display: flex;\n align-items: center;\n gap: 0px;\n }\n\n &__section {\n display: flex;\n align-items: center;\n position: relative;\n padding: 0 8px;\n\n &:not(:last-child)::after {\n content: '';\n position: absolute;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n height: 16px;\n width: 1px;\n background-color: rgba(34, 34, 34, 0.24);\n\n @media screen and (prefers-color-scheme: dark) {\n background-color: rgba(255, 255, 255, 0.2);\n }\n }\n\n &:first-child {\n padding-left: 0;\n }\n\n &:last-child {\n padding-right: 0;\n }\n }\n\n &__item {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 12px;\n font-weight: 400;\n line-height: 18px;\n }\n\n &__label {\n color: var(--pp-dev-info-color-secondary);\n font-weight: 400;\n }\n\n &__value {\n font-weight: 600;\n }\n\n &__link {\n color: var(--pp-dev-info-color-primary);\n text-decoration: none;\n transition: color 0.2s ease;\n display: flex;\n align-items: center;\n gap: 8px;\n\n &:hover {\n color: var(--pp-dev-info-color-primary);\n text-decoration: underline;\n }\n }\n\n @mixin bold {\n font-weight: 700;\n }\n\n .primary {\n color: var(--pp-dev-info-color-primary) !important;\n }\n\n .success {\n color: var(--pp-dev-info-color-success) !important;\n }\n\n .info {\n color: var(--pp-dev-info-color-info) !important;\n }\n\n .warning {\n color: var(--pp-dev-info-color-warning) !important;\n }\n\n .danger {\n color: var(--pp-dev-info-color-danger) !important;\n }\n\n a {\n color: var(--pp-dev-info-color-primary);\n text-decoration: none;\n vertical-align: middle;\n line-height: 18px;\n\n &:hover {\n text-decoration: none;\n }\n\n &:active,\n &:hover {\n outline: 0;\n }\n }\n\n button {\n padding: 1px;\n border: none;\n background: none;\n cursor: pointer;\n outline: none;\n }\n\n .bold,\n .status-text {\n @include bold;\n }\n\n &__drag-handle {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 14px;\n height: 28px;\n cursor: grab;\n touch-action: none;\n border-radius: 3px;\n color: var(--pp-dev-info-color-secondary);\n opacity: 0.55;\n transition:\n opacity 0.2s ease,\n background-color 0.2s ease;\n\n svg {\n pointer-events: none;\n fill: currentColor;\n }\n\n &:hover {\n opacity: 1;\n background-color: rgba(7, 91, 126, 0.06);\n }\n }\n\n &__settings-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n padding: 6px;\n border-radius: 3px;\n cursor: pointer;\n color: var(--pp-dev-info-color-secondary);\n transition: all 0.2s ease;\n\n svg {\n width: 16px;\n height: 16px;\n fill: none;\n transition: transform 0.3s ease;\n }\n\n &:hover {\n color: var(--pp-dev-info-color-primary);\n background-color: rgba(7, 91, 126, 0.06);\n\n svg {\n transform: rotate(45deg);\n }\n }\n }\n\n &__settings {\n position: absolute;\n min-width: 216px;\n padding: 12px;\n display: flex;\n flex-direction: column;\n gap: 10px;\n background-color: var(--pp-dev-info-color-white);\n border: 1px solid rgba(34, 34, 34, 0.15);\n border-radius: 3px;\n box-shadow: 0 4px 16px rgba(34, 34, 34, 0.2);\n z-index: 100002;\n cursor: default;\n white-space: normal;\n text-align: left;\n\n .pp-dev-info__settings-title {\n font-size: 10px;\n font-weight: 600;\n color: var(--pp-dev-info-color-secondary);\n text-transform: uppercase;\n letter-spacing: 0.4px;\n }\n\n .pp-dev-info__settings-row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n }\n\n .pp-dev-info__settings-toggle {\n appearance: auto;\n -webkit-appearance: checkbox;\n width: 14px;\n height: 14px;\n accent-color: var(--pp-dev-info-color-primary);\n cursor: pointer;\n flex-shrink: 0;\n }\n\n .pp-dev-info__corner-grid {\n display: grid;\n grid-template-columns: repeat(2, 30px);\n gap: 4px;\n }\n\n .pp-dev-info__corner-btn {\n width: 30px;\n height: 22px;\n border: 1px solid rgba(34, 34, 34, 0.25);\n border-radius: 3px;\n cursor: pointer;\n position: relative;\n background: transparent;\n transition: border-color 0.2s ease;\n\n &::after {\n content: '';\n position: absolute;\n width: 10px;\n height: 6px;\n border-radius: 1px;\n background-color: var(--pp-dev-info-color-secondary);\n transition: background-color 0.2s ease;\n }\n\n &--top-left::after {\n top: 2px;\n left: 2px;\n }\n\n &--top-right::after {\n top: 2px;\n right: 2px;\n }\n\n &--bottom-left::after {\n bottom: 2px;\n left: 2px;\n }\n\n &--bottom-right::after {\n bottom: 2px;\n right: 2px;\n }\n\n &:hover {\n border-color: var(--pp-dev-info-color-primary);\n }\n\n &.active {\n border-color: var(--pp-dev-info-color-primary);\n\n &::after {\n background-color: var(--pp-dev-info-color-primary);\n }\n }\n }\n\n .pp-dev-info__settings-hide-btn {\n width: 100%;\n padding: 6px 10px;\n border: 1px solid rgba(34, 34, 34, 0.2);\n border-radius: 4px;\n cursor: pointer;\n font-weight: 600;\n color: var(--pp-dev-info-color-danger);\n transition: background-color 0.2s ease;\n\n &:hover {\n background-color: rgba(172, 43, 43, 0.06);\n }\n }\n\n .pp-dev-info__settings-hint {\n font-size: 10px;\n line-height: 14px;\n color: var(--pp-dev-info-color-secondary);\n\n code {\n font-family: monospace;\n font-size: 10px;\n }\n }\n\n .pp-dev-info__settings-reset {\n align-self: flex-start;\n font-size: 11px;\n color: var(--pp-dev-info-color-primary);\n cursor: pointer;\n\n &:hover {\n text-decoration: underline;\n }\n }\n }\n\n &__wrap-btn {\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n padding: 6px;\n cursor: pointer;\n border-radius: 3px;\n transition: background-color 0.2s ease;\n\n &:hover {\n background-color: rgba(7, 91, 126, 0.06);\n animation: arrowHover 0.8s linear infinite;\n }\n\n &-arrow {\n width: 16px;\n height: 16px;\n color: var(--pp-dev-info-color-dark);\n fill: none;\n transition: transform 0.2s ease;\n }\n }\n\n &.closed {\n z-index: 100002;\n\n & .pp-dev-info__wrap-btn {\n &:hover {\n animation: arrowHover 1.2s linear infinite;\n }\n }\n }\n\n // Corner variants: placement, center-facing radius/shadow, direction-aware\n // minimize (.closed) and auto-hide slides. The corner class is always rendered\n // on the panel root (server default: bottom-right).\n @each $name, $c in $pp-dev-corners {\n &.pp-dev-info--#{$name} {\n #{map.get($c, v)}: 0;\n #{map.get($c, h)}: 0;\n border-radius: map.get($c, radius);\n box-shadow: map.get($c, shadow);\n #{map.get($c, edge)}: 1px solid rgba(34, 34, 34, 0.08);\n\n .pp-dev-info__settings {\n #{map.get($c, v)}: calc(100% + 8px);\n #{map.get($c, h)}: 0;\n }\n\n @if map.get($c, sx) == 1 {\n &.closed {\n transform: translateX(calc(100% - $pp-dev-height));\n\n .pp-dev-info__wrap-btn-arrow {\n transform: rotate(180deg);\n }\n }\n\n &.pp-dev-info--auto-hide:not(.is-peeking):not(.is-dragging) {\n transform: translateX(calc(100% - $pp-dev-peek));\n box-shadow: map.get($c, shadow), inset $pp-dev-peek 0 0 0 var(--pp-dev-info-color-primary);\n\n // Extended invisible hover zone on the inner side of the 4px strip\n &::after {\n content: '';\n position: absolute;\n top: -6px;\n bottom: -6px;\n left: -8px;\n width: 8px;\n }\n }\n } @else {\n .pp-dev-info__wrap-btn {\n order: 99;\n\n &-arrow {\n transform: rotate(180deg);\n }\n }\n\n &.closed {\n transform: translateX(calc(-100% + $pp-dev-height));\n\n .pp-dev-info__wrap-btn-arrow {\n transform: rotate(0deg);\n }\n }\n\n &.pp-dev-info--auto-hide:not(.is-peeking):not(.is-dragging) {\n transform: translateX(calc(-100% + $pp-dev-peek));\n box-shadow: map.get($c, shadow), inset (-$pp-dev-peek) 0 0 0 var(--pp-dev-info-color-primary);\n\n &::after {\n content: '';\n position: absolute;\n top: -6px;\n bottom: -6px;\n right: -8px;\n width: 8px;\n }\n }\n }\n }\n }\n\n &.pp-dev-info--auto-hide {\n z-index: 100002;\n }\n\n &.is-dragging {\n transition: none;\n user-select: none;\n cursor: grabbing;\n\n .pp-dev-info__drag-handle {\n cursor: grabbing;\n }\n }\n\n &.pp-dev-info--hidden {\n display: none;\n }\n\n .sync-button {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n padding: 6px;\n background-color: transparent;\n border-radius: 3px;\n cursor: pointer;\n color: var(--pp-dev-info-color-primary);\n transition: all 0.2s ease;\n position: relative;\n overflow: hidden;\n\n &::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: currentColor;\n opacity: 0;\n transition: opacity 0.2s ease;\n border-radius: 3px;\n }\n\n svg {\n width: 16px;\n height: 16px;\n position: relative;\n z-index: 1;\n transition: transform 0.3s ease;\n }\n\n &:hover:not(.disabled) {\n color: var(--pp-dev-info-color-primary);\n background-color: rgba(7, 91, 126, 0.06);\n\n svg {\n transform: scale(1.1) rotate(45deg);\n transition: transform 0.2s ease;\n }\n }\n\n &:active:not(.disabled) {\n svg {\n transform: scale(0.9) rotate(45deg);\n }\n }\n\n &.disabled {\n opacity: 0.5;\n cursor: not-allowed;\n pointer-events: none;\n color: var(--pp-dev-info-color-secondary);\n }\n\n &.syncing {\n svg {\n animation: rotate 1.5s linear infinite;\n }\n }\n }\n\n &__sep {\n display: inline-flex;\n flex-shrink: 0;\n width: 1px;\n height: 16px;\n background-color: rgba(34, 34, 34, 0.24);\n\n @media screen and (prefers-color-scheme: dark) {\n background-color: rgba(255, 255, 255, 0.2);\n }\n }\n\n @keyframes rotate {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n }\n\n .margin-5 {\n margin-right: 5px;\n }\n\n .margin-10 {\n margin-right: 10px;\n }\n\n .custom-font {\n font-family: 'Inter', sans-serif;\n font-size: 13px;\n font-weight: 400;\n vertical-align: middle;\n line-height: 18px;\n color: var(--pp-dev-info-color-dark);\n\n &:not(.not-colored) a {\n color: var(--pp-dev-info-color-primary) !important;\n }\n }\n\n @keyframes rotation {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n\n @keyframes arrowHover {\n 0% {\n transform: translateX(2px);\n }\n 50% {\n transform: translateX(-2px);\n }\n 100% {\n transform: translateX(2px);\n }\n }\n\n // Dark mode support with css variables\n @media screen and (prefers-color-scheme: dark) {\n & {\n // Dark theme colors\n --pp-dev-info-color-primary: #2a8db5;\n --pp-dev-info-color-secondary: rgba(220, 220, 220, 0.64);\n --pp-dev-info-color-success: #0fad5e;\n --pp-dev-info-color-info: #2dccff;\n --pp-dev-info-color-warning: #ffb302;\n --pp-dev-info-color-danger: #e05252;\n --pp-dev-info-color-light: #343a40;\n --pp-dev-info-color-dark: #f8f9fa;\n --pp-dev-info-color-white: #000000;\n --pp-dev-info-color-black: #ffffff;\n }\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n &.pp-dev-info,\n .pp-dev-info,\n .pp-dev-info__popup,\n .pp-dev-info__settings {\n transition: none;\n }\n }\n}\n"]}