@huolala-tech/page-spy-plugin-ospy
Version:
Offline-fist PageSpy, plug and play. Only available in browser.
2 lines (1 loc) • 17.1 kB
CSS
body.dragging{-webkit-user-select:none;user-select:none}body.dragging iframe{pointer-events:none}#o-spy{--hue: 270;--primary-color: hsl(var(--hue), 100%, 55%);--text-primary: hsl(0, 0%, 10%);--text-secondary: hsl(0, 0%, 30%);--text-placeholder: hsl(0, 0%, 60%);--divider-color: hsl(0, 0%, 90%);--border-color: hsl(0, 0%, 70%);--disabled-color: hsl(0, 0%, 75%);--text-base: 14px;--text-sm: .86em;--text-lg: 1.14em;--text-xl: 1.43em;--text-2xl: 1.71em;--text-3xl: 2.29em;--input-padding: .43em .57em;--input-padding-lg: .57em .86em;--block-padding: 1em;--gap: .29em;--gap-lg: .57em;--border: 1px solid var(--border-color);--border-active: 1px solid var(--primary-color);--light-shadow: 0 4px 10px 4px hsla(0, 0%, 100%, .1);--dark-shadow: 0 4px 10px 4px hsla(0, 0%, 0%, .1);--font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", sans-serif;font-size:var(--text-base);font-family:var(--font-family)}#o-spy *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}._float_iyzfa_40{display:flex;justify-content:center;align-items:center;gap:4px;position:fixed;left:calc(100vw - 11.43em);top:calc(100vh - 10em);width:8.57em;height:2.86em;border-radius:4px;letter-spacing:1.5px;color:#fff;font-weight:700;background-color:var(--primary-color);box-shadow:var(--light-shadow);cursor:pointer;border:none;z-index:13000}._float_iyzfa_40:active{transform:translateY(2px);box-shadow:var(--dark-shadow)}._float_iyzfa_40 img._logo_iyzfa_64{max-height:1.43em}._float_iyzfa_40 img._close_iyzfa_67{width:1.43em;height:1.43em;position:absolute;right:0;top:0;padding:2px;transform:translate(50%,-50%);box-shadow:0 0 1px 2px #fff;border-radius:999px;background-color:var(--primary-color)}._form_iyzfa_79{font-family:var(--font-family);font-size:var(--text-base);color:var(--text-primary)}._form_iyzfa_79 svg{display:block}._form_iyzfa_79 input:not([type=range]),._form_iyzfa_79 select,._form_iyzfa_79 textarea{width:100%;border:var(--border);border-radius:.29em;background-color:#f2f2f2;outline:none;font-size:var(--text-base)}._form_iyzfa_79 input:not([type=range])::placeholder,._form_iyzfa_79 select::placeholder,._form_iyzfa_79 textarea::placeholder{color:var(--text-placeholder)}._form_iyzfa_79 input:not([type=range]):focus,._form_iyzfa_79 select:focus,._form_iyzfa_79 textarea:focus{border-color:var(--primary-color)}._form_iyzfa_79 select{padding:var(--input-padding)}._form_iyzfa_79 input:not([type=range]),._form_iyzfa_79 textarea{padding:var(--input-padding)}._form_iyzfa_79 button{display:flex;justify-content:center;align-items:center;gap:var(--gap);min-width:4.29em;padding:var(--input-padding-lg);letter-spacing:.4px;border:var(--border);border-radius:.29em;background-color:#fff;color:var(--text-primary);cursor:pointer;white-space:nowrap;transition:all ease-in-out .1s;font-size:var(--text-base)}._form_iyzfa_79 button[data-primary]{border-color:var(--primary-color);background-color:var(--primary-color);color:#fff}._form_iyzfa_79 button[data-dashed]{border-style:dashed}._form_iyzfa_79 button:disabled{border-color:var(--disabled-color);background-color:var(--disabled-color);color:#fff;cursor:not-allowed}._form_iyzfa_79 button:active{opacity:.7}._form_iyzfa_79 button img,._form_iyzfa_79 button svg{width:1.43em;height:1.43em}._form_iyzfa_79 ._formContent_iyzfa_153{padding:var(--block-padding)}._form_iyzfa_79 ._formItem_iyzfa_156 label{display:flex;justify-content:space-between;align-items:center;position:relative;margin-top:var(--gap);margin-bottom:var(--gap);font-weight:500}._form_iyzfa_79 ._formItem_iyzfa_156 label[required] span:before{content:"*";color:red;margin-right:var(--gap)}._form_iyzfa_79 ._formItem_iyzfa_156:first-child label{margin-top:0}._form_iyzfa_79 ._duration_iyzfa_172{display:flex;align-items:center}._form_iyzfa_79 ._duration_iyzfa_172 span{display:inline-flex;justify-content:center;align-items:center;width:.64em;line-height:1}._form_iyzfa_79 ._duration_iyzfa_172 span._colon_iyzfa_183{width:.36em}._form_iyzfa_79 ._refreshIcon_iyzfa_186{cursor:pointer}._form_iyzfa_79 ._refreshIcon_iyzfa_186 svg{width:1.71em;height:1.71em;color:var(--primary-color)}._form_iyzfa_79 ._selectPeriod_iyzfa_194{position:relative;width:96%;margin:1.71em auto;--thumb-size: 1.71em;--thumb-shadow: 0 0 0 5px var(--primary-color) inset, 0 0 0 99px white inset;--thumb-shadow-hover: 0 0 0 7px var(--primary-color) inset, 0 0 0 99px white inset;--thumb-shadow-disabled: 0 0 0 5px var(--disabled-color) inset, 0 0 0 99px white inset;--track-size: calc(var(--thumb-size) / 2)}._form_iyzfa_79 ._selectPeriod_iyzfa_194._disabled_iyzfa_206{cursor:not-allowed}._form_iyzfa_79 ._selectPeriod_iyzfa_194._disabled_iyzfa_206 ._track_iyzfa_209 ._range_iyzfa_209{background-color:var(--disabled-color)}._form_iyzfa_79 ._selectPeriod_iyzfa_194._disabled_iyzfa_206 input:disabled{--thumb-shadow: var(--thumb-shadow-disabled)}._form_iyzfa_79 ._selectPeriod_iyzfa_194._disabled_iyzfa_206 input:disabled::-webkit-slider-thumb{cursor:not-allowed}._form_iyzfa_79 ._selectPeriod_iyzfa_194._disabled_iyzfa_206 input:disabled::-moz-range-thumb{cursor:not-allowed}._form_iyzfa_79 ._selectPeriod_iyzfa_194._disabled_iyzfa_206 input:disabled::-ms-thumb{cursor:not-allowed}._form_iyzfa_79 ._selectPeriod_iyzfa_194 ._track_iyzfa_209{width:100%;height:var(--track-size);background-color:var(--divider-color);border-radius:var(--track-size)}._form_iyzfa_79 ._selectPeriod_iyzfa_194 ._track_iyzfa_209 ._range_iyzfa_209{--left: 0;--right: 0;--min-text: "From";--max-text: "To";position:absolute;left:var(--left);right:var(--right);height:100%;background-color:var(--primary-color);border-radius:var(--track-size)}._form_iyzfa_79 ._selectPeriod_iyzfa_194 ._track_iyzfa_209 ._range_iyzfa_209[data-min-text-position=bottom]:before{top:calc(var(--thumb-size))}._form_iyzfa_79 ._selectPeriod_iyzfa_194 ._track_iyzfa_209 ._range_iyzfa_209[data-max-text-position=bottom]:after{top:calc(var(--thumb-size))}._form_iyzfa_79 ._selectPeriod_iyzfa_194 ._track_iyzfa_209 ._range_iyzfa_209:before,._form_iyzfa_79 ._selectPeriod_iyzfa_194 ._track_iyzfa_209 ._range_iyzfa_209:after{position:absolute;top:calc(var(--thumb-size) * -1);transition:top .15s ease-in-out;font-size:var(--text-base);font-weight:500;font-family:var(--font-family);color:var(--text-placeholder)}._form_iyzfa_79 ._selectPeriod_iyzfa_194 ._track_iyzfa_209 ._range_iyzfa_209:before{content:var(--min-text);left:0;transform:translate(-50%) scale(.8)}._form_iyzfa_79 ._selectPeriod_iyzfa_194 ._track_iyzfa_209 ._range_iyzfa_209:after{content:var(--max-text);right:0;transform:translate(50%) scale(.8)}._form_iyzfa_79 ._selectPeriod_iyzfa_194 input{-webkit-appearance:none;-moz-appearance:none;appearance:none;pointer-events:none;position:absolute;left:calc(var(--track-size) * -1);top:0;bottom:0;width:calc(100% + var(--thumb-size));background-color:transparent;font-size:var(--text-base);z-index:2}._form_iyzfa_79 ._selectPeriod_iyzfa_194 input:hover{--thumb-shadow: var(--thumb-shadow-hover)}._form_iyzfa_79 ._selectPeriod_iyzfa_194 input::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;pointer-events:auto;width:var(--thumb-size);height:var(--thumb-size);border-radius:var(--thumb-size);background-color:#fff;box-shadow:var(--thumb-shadow);cursor:grab;-webkit-transition:.15s;transition:.15s;border:.14em solid white}._form_iyzfa_79 ._selectPeriod_iyzfa_194 input::-moz-range-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;pointer-events:auto;width:var(--thumb-size);height:var(--thumb-size);border-radius:var(--thumb-size);background-color:#fff;box-shadow:var(--thumb-shadow);cursor:grab;-moz-transition:.15s;transition:.15s;border:.14em solid white}._form_iyzfa_79 ._selectPeriod_iyzfa_194 input::-ms-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;pointer-events:auto;width:var(--thumb-size);height:var(--thumb-size);border-radius:var(--thumb-size);background-color:#fff;box-shadow:var(--thumb-shadow);cursor:grab;-ms-transition:.15s;transition:.15s;border:.14em solid white}._form_iyzfa_79 ._footer_iyzfa_319{display:flex;justify-content:space-between;align-items:center;padding:var(--block-padding);border-top:1px solid var(--divider-color);background-color:#fff}._form_iyzfa_79 ._footer_iyzfa_319 ._recorder_iyzfa_327{display:flex;justify-content:center;align-items:center;height:2.29em;padding:var(--input-padding-lg);font-size:var(--text-base);border-radius:999px;transition:background-color .15s ease,transform .15s ease;cursor:pointer;-webkit-user-select:none;user-select:none;background-color:#f2f2f2}._form_iyzfa_79 ._footer_iyzfa_319 ._recorder_iyzfa_327:hover{background-color:#e6e6e6}._form_iyzfa_79 ._footer_iyzfa_319 ._recorder_iyzfa_327:active{transform:scale(.97)}._form_iyzfa_79 ._footer_iyzfa_319 ._recorder_iyzfa_327._paused_iyzfa_346>div:nth-child(1){display:none}._form_iyzfa_79 ._footer_iyzfa_319 ._recorder_iyzfa_327._paused_iyzfa_346>div:nth-child(2){display:flex}._form_iyzfa_79 ._footer_iyzfa_319 ._recorder_iyzfa_327>div:nth-child(1){display:flex;align-items:center;position:relative}._form_iyzfa_79 ._footer_iyzfa_319 ._recorder_iyzfa_327>div:nth-child(1):before{content:"";width:.57em;height:.57em;border-radius:.57em;background-color:#ff0f0f;animation:_fade_iyzfa_1 .8s ease-in-out infinite alternate}@keyframes _fade_iyzfa_1{0%{background-color:#ff0f0f}to{background-color:#ffdbdb}}._form_iyzfa_79 ._footer_iyzfa_319 ._recorder_iyzfa_327>div:nth-child(1) span{color:var(--text-secondary);font-weight:500}._form_iyzfa_79 ._footer_iyzfa_319 ._recorder_iyzfa_327>div:nth-child(2){display:none;align-items:center;color:var(--text-primary)}._form_iyzfa_79 ._footer_iyzfa_319 ._recorder_iyzfa_327>div:nth-child(2) ._pausedInfo_iyzfa_382{position:relative;font-size:var(--text-base);margin-left:-.36em}._form_iyzfa_79 ._footer_iyzfa_319 ._recorder_iyzfa_327>div:nth-child(2) ._pausedInfo_iyzfa_382 svg{transform:scale(.8);transform-origin:left center}._form_iyzfa_79 ._footer_iyzfa_319 ._recorder_iyzfa_327>div:nth-child(2) ._pausedInfo_iyzfa_382:hover ._pausedInfoText_iyzfa_391,._form_iyzfa_79 ._footer_iyzfa_319 ._recorder_iyzfa_327>div:nth-child(2) ._pausedInfo_iyzfa_382:active ._pausedInfoText_iyzfa_391{display:block}._form_iyzfa_79 ._footer_iyzfa_319 ._recorder_iyzfa_327>div:nth-child(2) ._pausedInfo_iyzfa_382 ._pausedInfoText_iyzfa_391{display:none;position:absolute;left:0;top:0;transform:translate(-25%,-135%);white-space:nowrap;font-size:var(--text-base);color:var(--text-primary);background-color:#fff;padding:.57em;border-radius:.29em;box-shadow:var(--dark-shadow);z-index:1}._form_iyzfa_79 ._footer_iyzfa_319 ._recorder_iyzfa_327>div:nth-child(2) ._pausedInfo_iyzfa_382 ._pausedInfoText_iyzfa_391:before{content:"";position:absolute;left:25%;bottom:0;transform:translateY(30%) rotate(45deg);width:.86em;height:.86em;background-color:#fff;border-radius:.14em;z-index:-1}._form_iyzfa_79 ._footer_iyzfa_319 ._recorder_iyzfa_327>div b{margin-left:var(--gap);margin-right:var(--gap-lg);font-size:var(--text-lg);line-height:1;color:var(--text-primary)}._form_iyzfa_79 ._footer_iyzfa_319 ._recorder_iyzfa_327>div svg{width:1.43em;height:1.43em}#o-spy main{display:block}#o-spy h1{font-size:2em;margin:.67em 0}#o-spy hr{box-sizing:content-box;height:0;overflow:visible}#o-spy pre{font-family:monospace,monospace;font-size:1em}#o-spy a{background-color:transparent}#o-spy abbr[title]{border-bottom:none;-webkit-text-decoration:underline;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}#o-spy b,#o-spy strong{font-weight:bolder}#o-spy code,#o-spy kbd,#o-spy samp{font-family:monospace,monospace;font-size:1em}#o-spy small{font-size:80%}#o-spy sub,#o-spy sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}#o-spy sub{bottom:-.25em}#o-spy sup{top:-.5em}#o-spy img{border-style:none}#o-spy button,#o-spy input,#o-spy optgroup,#o-spy select,#o-spy textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}#o-spy button,#o-spy input{overflow:visible}#o-spy button,#o-spy select{text-transform:none}#o-spy button,#o-spy [type=button],#o-spy [type=reset],#o-spy [type=submit]{-webkit-appearance:button}#o-spy button::-moz-focus-inner,#o-spy [type=button]::-moz-focus-inner,#o-spy [type=reset]::-moz-focus-inner,#o-spy [type=submit]::-moz-focus-inner{border-style:none;padding:0}#o-spy button:-moz-focusring,#o-spy [type=button]:-moz-focusring,#o-spy [type=reset]:-moz-focusring,#o-spy [type=submit]:-moz-focusring{outline:1px dotted ButtonText}#o-spy fieldset{padding:.35em .75em .625em}#o-spy legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}#o-spy progress{vertical-align:baseline}#o-spy textarea{overflow:auto}#o-spy [type=checkbox],#o-spy [type=radio]{box-sizing:border-box;padding:0}#o-spy [type=number]::-webkit-inner-spin-button,#o-spy [type=number]::-webkit-outer-spin-button{height:auto}#o-spy [type=search]{-webkit-appearance:textfield;outline-offset:-2px}#o-spy [type=search]::-webkit-search-decoration{-webkit-appearance:none}#o-spy ::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}#o-spy details{display:block}#o-spy summary{display:list-item}#o-spy template{display:none}#o-spy [hidden]{display:none}._toast_15reu_1{position:fixed;left:50%;top:10%;transform:translate(-50%);display:flex;gap:var(--gap);align-items:center;max-width:50vw;min-height:2.29em;padding:var(--input-padding);font-size:var(--text-base);line-height:1;color:#fff;font-family:var(--font-family);background-color:var(--primary-color);border-radius:.29em;box-shadow:var(--dark-shadow);z-index:99999;opacity:0}._toast_15reu_1._show_15reu_22{opacity:1}._toast_15reu_1._show_15reu_22{animation:_slideIn_15reu_1 .3s ease-in-out forwards}@keyframes _slideIn_15reu_1{0%{transform:translate3d(-50%,1.79em,0);opacity:0}80%{transform:translate3d(-50%,-.71em,0)}to{transform:translate3d(-50%,0,0);opacity:1}}._modal_x3fic_1{position:fixed;top:0;right:0;bottom:0;left:0;display:none;z-index:99999}._modal_x3fic_1._show_x3fic_7{display:block;animation:_fadeIn_x3fic_1 .3s ease-in-out forwards}@keyframes _fadeIn_x3fic_1{0%{background-color:#0000}to{background-color:#0000004d}}._modal_x3fic_1._show_x3fic_7 ._content_x3fic_19{animation:_scaleIn_x3fic_1 .3s ease-in forwards}@keyframes _scaleIn_x3fic_1{0%{opacity:0;transform:translate3d(-50%,-50%,0) scale(.8)}70%{opacity:1;transform:translate3d(-50%,-50%,0) scale(1.1)}to{transform:translate3d(-50%,-50%,0) scale(1)}}._modal_x3fic_1._leaving_x3fic_35{display:block;animation:_fadeOut_x3fic_1 .3s ease-in-out forwards}@keyframes _fadeOut_x3fic_1{0%{background-color:#0000004d}to{background-color:#0000}}._modal_x3fic_1._leaving_x3fic_35 ._content_x3fic_19{animation:_scaleOut_x3fic_1 .3s ease-out forwards}@keyframes _scaleOut_x3fic_1{0%{opacity:1;transform:translate3d(-50%,-50%,0) scale(1)}30%{transform:translate3d(-50%,-50%,0) scale(1.1)}60%{opacity:0;transform:translate3d(-50%,-50%,0) scale(.9)}to{opacity:0;transform:translate3d(-50%,-50%,0) scale(.9)}}._modal_x3fic_1 ._content_x3fic_19{position:absolute;left:50%;top:45%;transform:translate3d(-50%,-50%,0);width:90%;border-radius:.43em;overflow:hidden}._modal_x3fic_1 ._content_x3fic_19 ::selection{background-color:var(--primary-color);color:#fff}@media screen and (min-width: 440px){._modal_x3fic_1 ._content_x3fic_19{max-width:70%}}@media screen and (min-width: 768px){._modal_x3fic_1 ._content_x3fic_19{max-width:55%}}@media screen and (min-width: 1024px){._modal_x3fic_1 ._content_x3fic_19{max-width:40%}}@media screen and (min-width: 1440px){._modal_x3fic_1 ._content_x3fic_19{max-width:30%}}@media screen and (min-width: 1920px){._modal_x3fic_1 ._content_x3fic_19{max-width:25%}}._modal_x3fic_1 ._content_x3fic_19 ._header_x3fic_105{display:flex;justify-content:space-between;align-items:center;padding:var(--block-padding);color:#fff;background-color:var(--primary-color)}._modal_x3fic_1 ._content_x3fic_19 ._header_x3fic_105 ::selection{background-color:#fff;color:var(--primary-color)}._modal_x3fic_1 ._content_x3fic_19 ._header_x3fic_105 ._headerLeft_x3fic_117{display:flex;align-items:flex-start;gap:var(--gap-lg)}._modal_x3fic_1 ._content_x3fic_19 ._header_x3fic_105 ._headerLeft_x3fic_117 ._logo_x3fic_122{width:1.43em}._modal_x3fic_1 ._content_x3fic_19 ._header_x3fic_105 ._headerLeft_x3fic_117 ._title_x3fic_125 b{font-size:var(--text-lg);line-height:1}._modal_x3fic_1 ._content_x3fic_19 ._header_x3fic_105 ._headerLeft_x3fic_117 ._title_x3fic_125 p{margin:4px 0;font-size:var(--text-sm)}._modal_x3fic_1 ._content_x3fic_19 ._header_x3fic_105 ._headerLeft_x3fic_117 ._title_x3fic_125 p a{color:#fff;-webkit-text-decoration:underline;text-decoration:underline;text-underline-offset:4px}._modal_x3fic_1 ._content_x3fic_19 ._header_x3fic_105 ._headerRight_x3fic_138{padding:var(--input-padding);padding-right:0;cursor:pointer}._modal_x3fic_1 ._content_x3fic_19 ._header_x3fic_105 ._headerRight_x3fic_138 ._close_x3fic_143{width:1.71em;height:1.71em}._modal_x3fic_1 ._content_x3fic_19 ._main_x3fic_147{padding:0;background-color:#fff}