@arcblock/ux 3.0.8 → 3.0.10

package/lib/ux.css

@@ -1 +1 @@
-/*! Devices.css v0.1.15 | MIT License | github.com/picturepan2/devices.css */.device,.device:before,.device:after,.device *,.device *:before,.device *:after{box-sizing:border-box;display:block}.device{position:relative;transform:scale(1);z-index:1}.device .device-frame{z-index:1}.device .device-content{background-color:#fff;background-position:center center;background-size:cover;object-fit:cover;position:relative}.device-iphone-x{height:694px;width:342px}.device-iphone-x .device-frame{background:#222;border-radius:54px;box-shadow:inset 0 0 2px 2px #c8cacb,inset 0 0 0 6px #e2e3e4;height:694px;padding:22px;width:342px}.device-iphone-x .device-content{border-radius:32px;height:650px;width:300px}.device-iphone-x .device-stripe:after,.device-iphone-x .device-stripe:before{border:solid rgba(51,51,51,.25);border-width:0 6px;content:"";height:5px;left:0;position:absolute;width:100%;z-index:9}.device-iphone-x .device-stripe:after{top:68px}.device-iphone-x .device-stripe:before{bottom:68px}.device-iphone-x .device-header{background:#222;border-bottom-left-radius:16px;border-bottom-right-radius:16px;height:24px;left:50%;margin-left:-82px;position:absolute;top:22px;width:164px}.device-iphone-x .device-header:after,.device-iphone-x .device-header:before{content:"";height:6px;position:absolute;top:0;width:6px}.device-iphone-x .device-header:after{background:radial-gradient(circle at bottom left,transparent 0,transparent 75%,#222 75%,#222 100%);left:-6px}.device-iphone-x .device-header:before{background:radial-gradient(circle at bottom right,transparent 0,transparent 75%,#222 75%,#222 100%);right:-6px}.device-iphone-x .device-sensors:after,.device-iphone-x .device-sensors:before{content:"";position:absolute}.device-iphone-x .device-sensors:after{background:#444;border-radius:2.5px;height:5px;left:50%;margin-left:-20px;top:26px;width:40px}.device-iphone-x .device-sensors:before{background:#444;border-radius:50%;height:11px;left:50%;margin-left:30px;top:23px;width:11px}.device-iphone-x .device-btns{background:#c8cacb;height:26px;left:-2px;position:absolute;top:92px;width:3px}.device-iphone-x .device-btns:after,.device-iphone-x .device-btns:before{background:#c8cacb;content:"";height:50px;left:0;position:absolute;width:3px}.device-iphone-x .device-btns:after{top:48px}.device-iphone-x .device-btns:before{top:112px}.device-iphone-x .device-power{background:#c8cacb;height:80px;position:absolute;right:-2px;top:160px;width:3px}.device-iphone-8{height:698px;width:336px}.device-iphone-8 .device-frame{background:#fff;border-radius:54px;box-shadow:inset 0 0 0 2px #c8cacb,inset 0 0 0 6px #e2e3e4;height:698px;padding:82px 18px;width:336px}.device-iphone-8 .device-content{border:2px solid #222;border-radius:4px;height:534px;width:300px}.device-iphone-8 .device-stripe:after,.device-iphone-8 .device-stripe:before{border:solid rgba(51,51,51,.15);border-width:0 6px;content:"";height:5px;left:0;position:absolute;width:100%;z-index:9}.device-iphone-8 .device-stripe:after{top:55px}.device-iphone-8 .device-stripe:before{bottom:55px}.device-iphone-8 .device-header{border:2px solid #c8cacb;border-radius:50%;bottom:20px;height:46px;left:50%;margin-left:-23px;position:absolute;width:46px}.device-iphone-8 .device-sensors{background:#666;border-radius:2.5px;height:5px;left:50%;margin-left:-30px;position:absolute;top:41.5px;width:60px}.device-iphone-8 .device-sensors:after,.device-iphone-8 .device-sensors:before{background:#666;border-radius:50%;content:"";position:absolute}.device-iphone-8 .device-sensors:after{height:8px;left:50%;margin-left:-4px;top:-20px;width:8px}.device-iphone-8 .device-sensors:before{height:10px;left:-34px;margin-top:-5px;top:50%;width:10px}.device-iphone-8 .device-btns{background:#c8cacb;height:24px;left:-2px;position:absolute;top:82px;width:3px}.device-iphone-8 .device-btns:after,.device-iphone-8 .device-btns:before{background:#c8cacb;content:"";height:45px;left:0;position:absolute;width:3px}.device-iphone-8 .device-btns:after{top:50px}.device-iphone-8 .device-btns:before{top:106px}.device-iphone-8 .device-power{background:#c8cacb;height:80px;position:absolute;right:-2px;top:160px;width:3px}.device-iphone-8.device-gold .device-frame{box-shadow:inset 0 0 0 2px #e4b08a,inset 0 0 0 6px #f7e8dd}.device-iphone-8.device-gold .device-header{border-color:#e4b08a}.device-iphone-8.device-gold .device-btns,.device-iphone-8.device-gold .device-btns:after,.device-iphone-8.device-gold .device-btns:before{background:#e4b08a}.device-iphone-8.device-gold .device-power{background:#e4b08a}.device-iphone-8.device-spacegray .device-frame{background:#222;box-shadow:inset 0 0 0 2px #74747a,inset 0 0 0 6px #9b9ba0}.device-iphone-8.device-spacegray .device-stripe:after,.device-iphone-8.device-spacegray .device-stripe:before{border-color:#cccccc59}.device-iphone-8.device-spacegray .device-btns,.device-iphone-8.device-spacegray .device-btns:after,.device-iphone-8.device-spacegray .device-btns:before{background:#74747a}.device-google-pixel-2-xl{height:744px;width:360px}.device-google-pixel-2-xl .device-frame{background:#121212;border-radius:36px;box-shadow:inset 0 0 0 2px #cfcfcf,inset 0 0 0 6px #9c9c9c;height:740px;padding:50px 20px;width:360px}.device-google-pixel-2-xl .device-content{border-radius:24px;height:640px;width:320px}.device-google-pixel-2-xl .device-header{height:740px;left:50%;margin-left:-135px;position:absolute;top:0;width:270px}.device-google-pixel-2-xl .device-header:after,.device-google-pixel-2-xl .device-header:before{background:#333;border-radius:2.5px;content:"";height:5px;left:50%;margin-left:-65px;margin-top:-2.5px;position:absolute;width:130px}.device-google-pixel-2-xl .device-header:after{top:20px}.device-google-pixel-2-xl .device-header:before{bottom:26px}.device-google-pixel-2-xl .device-sensors{background:#333;border-radius:5px;height:12px;left:45px;margin-top:-6px;position:absolute;top:32px;width:12px}.device-google-pixel-2-xl .device-btns{background:#cfcfcf;height:94px;position:absolute;right:-2px;top:274px;width:3px}.device-google-pixel-2-xl .device-power{background:#cfcfcf;height:48px;position:absolute;right:-2px;top:174px;width:3px}.device-google-pixel{height:744px;width:360px}.device-google-pixel .device-frame{background:#f7f7f8;border-radius:54px;box-shadow:inset 0 0 0 2px #c8cacb,inset 0 0 0 6px #e2e3e4,inset 0 0 0 10px #fff;height:744px;padding:82px 18px 86px;width:360px}.device-google-pixel .device-content{border:2px solid #222;border-radius:2px;height:576px;width:324px}.device-google-pixel .device-stripe{border-top:6px solid rgba(51,51,51,.15);bottom:0;left:254px;position:absolute;top:0;width:8px}.device-google-pixel .device-stripe:after,.device-google-pixel .device-stripe:before{border:solid rgba(51,51,51,.15);border-width:0 6px;content:"";height:10px;left:-254px;position:absolute;width:360px;z-index:9}.device-google-pixel .device-stripe:after{top:60px}.device-google-pixel .device-stripe:before{bottom:46px}.device-google-pixel .device-sensors{background:#ddd;border-radius:2.5px;height:5px;left:50%;margin-left:-39px;margin-top:-2.5px;position:absolute;top:41px;width:78px}.device-google-pixel .device-sensors:after,.device-google-pixel .device-sensors:before{background:#333;border-radius:6px;content:"";position:absolute}.device-google-pixel .device-sensors:after{height:12px;left:50%;margin-left:-14px;top:21.5px;width:28px}.device-google-pixel .device-sensors:before{height:10px;left:-81px;margin-top:-5px;top:50%;width:10px}.device-google-pixel .device-btns{background:#c8cacb;height:102px;position:absolute;right:-2px;top:298px;width:3px}.device-google-pixel .device-power{background:#c8cacb;height:50px;position:absolute;right:-2px;top:184px;width:3px}.device-google-pixel.device-black .device-frame{background:#211d1c;box-shadow:inset 0 0 0 2px #363635,inset 0 0 0 6px #6a6967,inset 0 0 0 10px #3d3533}.device-google-pixel.device-black .device-stripe,.device-google-pixel.device-black .device-stripe:after,.device-google-pixel.device-black .device-stripe:before{border-color:#0d0d0d59}.device-google-pixel.device-black .device-sensors{background:#444}.device-google-pixel.device-black .device-sensors:after{background:#0d0d0d}.device-google-pixel.device-black .device-btns,.device-google-pixel.device-black .device-btns:after,.device-google-pixel.device-black .device-btns:before{background:#363635}.device-google-pixel.device-black .device-power{background:#363635}.device-google-pixel.device-blue .device-frame{box-shadow:inset 0 0 0 2px #2a5aff,inset 0 0 0 6px #7695ff,inset 0 0 0 10px #fff}.device-google-pixel.device-blue .device-btns,.device-google-pixel.device-blue .device-btns:after,.device-google-pixel.device-blue .device-btns:before{background:#2a5aff}.device-google-pixel.device-blue .device-power{background:#2a5aff}.device-galaxy-s8{height:686px;width:316px}.device-galaxy-s8 .device-frame{background:#222;border:solid #cfcfcf;border-radius:46px;border-width:4px 0;box-shadow:inset 0 0 0 2px #9c9c9c;height:686px;padding:40px 8px 34px;width:316px}.device-galaxy-s8 .device-content{border:2px solid #222;border-radius:28px;height:617px;width:300px}.device-galaxy-s8 .device-stripe:after,.device-galaxy-s8 .device-stripe:before{border:solid rgba(51,51,51,.15);border-width:4px 0;content:"";height:686px;position:absolute;top:0;width:5px;z-index:9}.device-galaxy-s8 .device-stripe:after{left:40px}.device-galaxy-s8 .device-stripe:before{right:40px}.device-galaxy-s8 .device-sensors{background:#666;border-radius:2.5px;height:4px;left:50%;margin-left:-20px;margin-top:-2px;position:absolute;top:26px;width:40px}.device-galaxy-s8 .device-sensors:after,.device-galaxy-s8 .device-sensors:before{background:#666;border-radius:50%;content:"";position:absolute;top:50%}.device-galaxy-s8 .device-sensors:after{box-shadow:-160px 0 #333,-145px 0 #333,-200px 0 #333;height:6px;margin-top:-3px;right:-75px;width:6px}.device-galaxy-s8 .device-sensors:before{box-shadow:155px 0 #666;height:10px;left:-75px;margin-top:-5px;width:10px}.device-galaxy-s8 .device-btns{background:#9c9c9c;border-radius:2px 0 0 2px;height:98px;left:-2px;position:absolute;top:120px;width:3px}.device-galaxy-s8 .device-btns:after{background:#9c9c9c;border-radius:2px 0 0 2px;content:"";height:45px;left:0;position:absolute;top:138px;width:3px}.device-galaxy-s8 .device-power{background:#9c9c9c;border-radius:0 2px 2px 0;height:46px;position:absolute;right:-2px;top:218px;width:3px}.device-galaxy-s8.device-blue .device-frame{border-color:#a3c5e8;box-shadow:inset 0 0 0 2px #5192d4}.device-galaxy-s8.device-blue .device-stripe:after,.device-galaxy-s8.device-blue .device-stripe:before{border-color:#ffffff59}.device-galaxy-s8.device-blue .device-btns,.device-galaxy-s8.device-blue .device-btns:after{background:#5192d4}.device-galaxy-s8.device-blue .device-power{background:#5192d4}.device-ipad-pro{height:804px;width:560px}.device-ipad-pro .device-frame{background:#fff;border-radius:38px;box-shadow:inset 0 0 0 2px #c8cacb,inset 0 0 0 6px #e2e3e4;height:804px;padding:62px 25px;width:560px}.device-ipad-pro .device-content{border:2px solid #222;border-radius:2px;height:680px;width:510px}.device-ipad-pro .device-header{border:2px solid #c8cacb;border-radius:50%;bottom:17px;height:34px;left:50%;margin-left:-17px;position:absolute;width:34px}.device-ipad-pro .device-sensors{background:#666;border-radius:50%;height:10px;left:50%;margin-left:-5px;margin-top:-5px;position:absolute;top:34px;width:10px}.device-ipad-pro.device-gold .device-frame{box-shadow:inset 0 0 0 2px #e4b08a,inset 0 0 0 6px #f7e8dd}.device-ipad-pro.device-gold .device-header{border-color:#e4b08a}.device-ipad-pro.device-rosegold .device-frame{box-shadow:inset 0 0 0 2px #f6a69a,inset 0 0 0 6px #facfc9}.device-ipad-pro.device-rosegold .device-header{border-color:#f6a69a}.device-ipad-pro.device-spacegray .device-frame{background:#222;box-shadow:inset 0 0 0 2px #818187,inset 0 0 0 6px #9b9ba0}.device-ipad-pro.device-spacegray .device-header{border-color:#818187}.device-surface-pro{height:394px;width:561px}.device-surface-pro .device-frame{background:#0d0d0d;border-radius:10px;box-shadow:inset 0 0 0 2px #c8c8c8;height:394px;margin:0 auto;padding:26px 24px;width:561px}.device-surface-pro .device-content{border:2px solid #121212;border-radius:2px;height:342px;width:513px}.device-surface-pro .device-btns:after,.device-surface-pro .device-btns:before{background:#c8c8c8;content:"";height:2px;position:absolute;top:-2px}.device-surface-pro .device-btns:after{left:48px;width:26px}.device-surface-pro .device-btns:before{left:94px;width:48px}.device-surface-pro .device-sensors{background:#333;border-radius:50%;height:6px;left:50%;margin-left:-3px;margin-top:-3px;position:absolute;top:14px;width:6px}.device-surface-book{height:424px;width:728px}.device-surface-book .device-frame{background:#0d0d0d;border-radius:12px;box-shadow:inset 0 0 0 2px #c8c8c8;height:408px;margin:0 auto;padding:24px 22px;position:relative;width:584px}.device-surface-book .device-content{border:2px solid #121212;border-radius:2px;height:360px;width:540px}.device-surface-book .device-btns:after,.device-surface-book .device-btns:before{background:#c8c8c8;content:"";height:2px;position:absolute;top:-2px}.device-surface-book .device-btns:after{left:122px;width:20px}.device-surface-book .device-btns:before{left:168px;width:44px}.device-surface-book .device-power{background:linear-gradient(to bottom,#eee,#c8c8c8);border:solid #c8c8c8;border-radius:2px;border-width:0 2px;height:12px;margin-top:4px;position:relative;width:728px}.device-surface-book .device-power:after,.device-surface-book .device-power:before{content:"";position:absolute}.device-surface-book .device-power:after{background:radial-gradient(circle at center,#eee 0,#eee 95%,#a2a1a1);border-radius:0 0 6px 6px;height:8px;left:50%;margin-left:-125px;top:0;width:250px;z-index:1}.device-surface-book .device-power:before{background:linear-gradient(to bottom,#eee,#c8c8c8);border-radius:2px 2px 0 0;bottom:12px;height:8px;left:50%;margin-left:-292px;width:584px}.device-macbook-pro{height:444px;width:740px}.device-macbook-pro .device-frame{background:#0d0d0d;border-radius:20px;box-shadow:inset 0 0 0 2px #c8cacb;height:428px;margin:0 auto;padding:29px 19px 39px;position:relative;width:614px}.device-macbook-pro .device-frame:after{background:#272626;border-radius:0 0 20px 20px;bottom:2px;content:"";height:26px;left:2px;position:absolute;width:610px}.device-macbook-pro .device-frame:before{bottom:10px;color:#c8cacb;content:"MacBook Pro";font-size:12px;height:16px;left:50%;line-height:16px;margin-left:-100px;position:absolute;text-align:center;width:200px;z-index:1}.device-macbook-pro .device-content{border:2px solid #121212;border-radius:2px;height:360px;width:576px}.device-macbook-pro .device-power{background:#e2e3e4;border:solid #d5d6d8;border-radius:2px 2px 0 0;border-width:2px 4px 0 4px;height:14px;margin-top:-10px;position:relative;width:740px;z-index:9}.device-macbook-pro .device-power:after,.device-macbook-pro .device-power:before{content:"";position:absolute}.device-macbook-pro .device-power:after{background:#d5d6d8;border-radius:0 0 10px 10px;box-shadow:inset 0 0 4px 2px #babdbf;height:10px;left:50%;margin-left:-60px;top:-2px;width:120px}.device-macbook-pro .device-power:before{background:#a0a3a7;border-radius:0 0 180px 180px/0 0 12px 12px;box-shadow:inset 0 -2px 6px #474a4d;height:12px;left:-4px;margin:0 auto;top:10px;width:740px}.device-macbook-pro.device-spacegray .device-frame{box-shadow:inset 0 0 0 2px #767a7d}.device-macbook-pro.device-spacegray .device-power{background:#909496;border-color:#767a7d}.device-macbook-pro.device-spacegray .device-power:after{background:#83878a;box-shadow:inset 0 0 4px 2px #6a6d70}.device-macbook-pro.device-spacegray .device-power:before{background:#515456;box-shadow:inset 0 -2px 6px #000}.device-macbook{height:432px;width:740px}.device-macbook .device-frame{background:#0d0d0d;border-radius:20px;box-shadow:inset 0 0 0 2px #c8cacb;height:428px;margin:0 auto;padding:29px 19px 39px;position:relative;width:614px}.device-macbook .device-frame:after{background:#272626;border-radius:0 0 20px 20px;bottom:2px;content:"";height:26px;left:2px;position:absolute;width:610px}.device-macbook .device-frame:before{bottom:10px;color:#c8cacb;content:"MacBook";font-size:12px;height:16px;left:50%;line-height:16px;margin-left:-100px;position:absolute;text-align:center;width:200px;z-index:1}.device-macbook .device-content{border:2px solid #121212;border-radius:2px;height:360px;width:576px}.device-macbook .device-power{background:#e2e3e4;border:solid #d5d6d8;border-radius:2px 2px 0 0;border-width:0 4px;height:4px;margin-top:-10px;position:relative;width:740px;z-index:9}.device-macbook .device-power:after,.device-macbook .device-power:before{content:"";position:absolute}.device-macbook .device-power:after{background:radial-gradient(circle at center,#e2e3e4 0,#e2e3e4 85%,#a0a3a7);border:solid #adb0b3;border-width:0 2px;height:4px;left:50%;margin-left:-60px;width:120px}.device-macbook .device-power:before{background:#a0a3a7;border-radius:0 0 180px 180px/0 0 10px 10px;box-shadow:inset 0 -2px 6px #474a4d;height:10px;left:-4px;margin:0 auto;top:4px;width:740px}.device-macbook.device-gold .device-frame{box-shadow:inset 0 0 0 2px #edccb4}.device-macbook.device-gold .device-power{background:#f7e8dd;border-color:#edccb4}.device-macbook.device-gold .device-power:after{background:radial-gradient(circle at center,#f7e8dd 0,#f7e8dd 85%,#dfa276);border-color:#e4b08a}.device-macbook.device-gold .device-power:before{background:#edccb4;box-shadow:inset 0 -2px 6px #83491f}.device-macbook.device-rosegold .device-frame{box-shadow:inset 0 0 0 2px #f6a69a}.device-macbook.device-rosegold .device-power{background:#facfc9;border-color:#f6a69a}.device-macbook.device-rosegold .device-power:after{background:radial-gradient(circle at center,#facfc9 0,#facfc9 85%,#ef6754);border-color:#f6a69a}.device-macbook.device-rosegold .device-power:before{background:#f6a69a;box-shadow:inset 0 -2px 6px #851b0c}.device-macbook.device-spacegray .device-frame{box-shadow:inset 0 0 0 2px #767a7d}.device-macbook.device-spacegray .device-power{background:#909496;border-color:#767a7d}.device-macbook.device-spacegray .device-power:after{background:radial-gradient(circle at center,#909496 0,#909496 85%,#515456);border-color:#5d6163}.device-macbook.device-spacegray .device-power:before{background:#515456;box-shadow:inset 0 -2px 6px #000}.device-surface-studio{height:506px;width:640px}.device-surface-studio .device-frame{background:#0d0d0d;border-radius:10px;box-shadow:inset 0 0 0 2px #000;height:440px;padding:20px;width:640px}.device-surface-studio .device-content{border:2px solid #121212;border-radius:2px;height:400px;width:600px}.device-surface-studio .device-stripe{background:#444;border-radius:0 0 2px 2px;bottom:0;height:4px;left:50%;margin-left:-117px;position:absolute;width:234px}.device-surface-studio .device-stripe:after,.device-surface-studio .device-stripe:before{content:"";left:50%;position:absolute;top:-75px}.device-surface-studio .device-stripe:after{border:6px solid #d5d6d8;border-radius:0 0 18px 18px;border-top:0;box-shadow:inset 0 0 0 4px #c8cacb;height:60px;margin-left:-140px;width:280px;z-index:-1}.device-surface-studio .device-stripe:before{border:15px solid #e2e3e4;border-radius:0 0 4px 4px;border-top:0;height:70px;margin-left:-150px;width:300px;z-index:-2}.device-surface-studio .device-power{background:#eff0f0;border:solid #e2e3e4;border-radius:0 0 2px 2px;border-width:0 4px 2px 4px;height:32px;margin:30px auto 0;position:relative;width:250px}.device-surface-studio .device-power:after{background:#adb0b3;content:"";height:2px;left:-4px;position:absolute;top:4px;width:250px}.device-imac-pro{height:484px;width:624px}.device-imac-pro .device-frame{background:#0d0d0d;border-radius:18px;box-shadow:inset 0 0 0 2px #080808;height:428px;padding:24px 24px 80px;position:relative;width:624px}.device-imac-pro .device-frame:after{background:#2f2e33;border-radius:0 0 18px 18px;bottom:2px;content:"";height:54px;left:2px;position:absolute;width:620px}.device-imac-pro .device-frame:before{bottom:15px;color:#0d0d0d;content:"";font-size:24px;height:24px;left:50%;line-height:24px;margin-left:-100px;position:absolute;text-align:center;width:200px;z-index:9}.device-imac-pro .device-content{border:2px solid #121212;border-radius:2px;height:324px;width:576px}.device-imac-pro .device-power:after,.device-imac-pro .device-power:before{content:""}.device-imac-pro .device-power:after{background:#222225;border-radius:2px;height:6px;margin:0 auto;position:relative;width:180px}.device-imac-pro .device-power:before{border:solid transparent;border-bottom-color:#333;border-width:0 8px 50px 8px;height:50px;margin:0 auto;position:relative;width:130px}.device-apple-watch{height:234px;width:200px}.device-apple-watch .device-frame{background:#0d0d0d;border-radius:40px;box-shadow:inset 0 0 2px 2px #adb0b3,inset 0 0 0 6px #e2e3e4,inset 0 0 0 8px #e2e3e4;height:234px;padding:32px;position:relative;width:200px}.device-apple-watch .device-frame:after{border-radius:30px;box-shadow:inset 0 0 25px #ffffffbf;content:"";height:216px;left:9px;position:absolute;top:9px;width:182px}.device-apple-watch .device-content{border:2px solid #121212;border-radius:2px;height:170px;width:136px}.device-apple-watch .device-btns{background:#e2e3e4;border-left:2px solid #adb0b3;border-radius:8px 4px 4px 8px/20px 4px 4px 20px;box-shadow:inset 0 0 2px 2px #adb0b3;height:44px;position:absolute;right:-10px;top:52px;width:16px;z-index:9}.device-apple-watch .device-btns:after{background:#e2e3e4;border-radius:4px 2px 2px 4px/10px 2px 2px 10px;box-shadow:inset 0 0 1px 2px #adb0b3;content:"";height:66px;position:absolute;right:6px;top:68px;width:8px}.device-apple-watch .device-btns:before{background:#adb0b3;box-shadow:0 -16px #adb0b3,0 -12px #adb0b3,0 -8px #adb0b3,0 -4px #adb0b3,0 4px #adb0b3,0 8px #adb0b3,0 12px #adb0b3,0 16px #adb0b3;content:"";height:2px;margin-top:-1px;position:absolute;right:0;top:50%;width:6px}html,body{margin:0;height:100%;width:100%;overflow:hidden}.links{display:flex;flex-direction:column;margin-left:50px}.links .link{margin-top:20px}.component{height:100%;width:100%;display:flex}.component.first-component{background-color:gray;position:relative}.first-component--inside-scroller{position:absolute;right:20px;top:100px}.component.second-component{background-color:red}.component.third-component{background-color:#00f}.component.fourth-component{background-color:#ff0}.component.fifth-component{background-color:purple}h2{margin:auto;text-align:center}.pagination-additional-class{margin:0;position:fixed;top:20px;display:flex;justify-content:center;width:100%}.pagination-additional-class>li:not(:last-of-type)>a,.pagination-additional-class>li:not(:last-of-type)>span{margin-right:50px}.demo-page-contain{display:flex;justify-content:center;align-items:center;height:100vh;flex-direction:column}.demo-page-contain__hint{margin-bottom:20px}@media (max-width: 768px){.pagination-additional-class>li:not(:last-of-type)>a,.pagination-additional-class>li:not(:last-of-type)>span{margin-right:5px}}.demo-page-full{position:relative}.progress{position:absolute;left:0;bottom:0;width:0;overflow:hidden;transition:all .2s linear}.progress,.progress:before{height:6px}.progress:before{display:block;width:100%;background-color:#4e6af6;content:"";transform-origin:0 100%;transform:skew(45deg)}.progress[style*="100%"]:before{transform:none}
+/*! Devices.css v0.1.15 | MIT License | github.com/picturepan2/devices.css */.device,.device:before,.device:after,.device *,.device *:before,.device *:after{box-sizing:border-box;display:block}.device{position:relative;transform:scale(1);z-index:1}.device .device-frame{z-index:1}.device .device-content{background-color:#fff;background-position:center center;background-size:cover;object-fit:cover;position:relative}.device-iphone-x{height:694px;width:342px}.device-iphone-x .device-frame{background:#222;border-radius:54px;box-shadow:inset 0 0 2px 2px #c8cacb,inset 0 0 0 6px #e2e3e4;height:694px;padding:22px;width:342px}.device-iphone-x .device-content{border-radius:32px;height:650px;width:300px}.device-iphone-x .device-stripe:after,.device-iphone-x .device-stripe:before{border:solid rgba(51,51,51,.25);border-width:0 6px;content:"";height:5px;left:0;position:absolute;width:100%;z-index:9}.device-iphone-x .device-stripe:after{top:68px}.device-iphone-x .device-stripe:before{bottom:68px}.device-iphone-x .device-header{background:#222;border-bottom-left-radius:16px;border-bottom-right-radius:16px;height:24px;left:50%;margin-left:-82px;position:absolute;top:22px;width:164px}.device-iphone-x .device-header:after,.device-iphone-x .device-header:before{content:"";height:6px;position:absolute;top:0;width:6px}.device-iphone-x .device-header:after{background:radial-gradient(circle at bottom left,transparent 0,transparent 75%,#222 75%,#222 100%);left:-6px}.device-iphone-x .device-header:before{background:radial-gradient(circle at bottom right,transparent 0,transparent 75%,#222 75%,#222 100%);right:-6px}.device-iphone-x .device-sensors:after,.device-iphone-x .device-sensors:before{content:"";position:absolute}.device-iphone-x .device-sensors:after{background:#444;border-radius:2.5px;height:5px;left:50%;margin-left:-20px;top:26px;width:40px}.device-iphone-x .device-sensors:before{background:#444;border-radius:50%;height:11px;left:50%;margin-left:30px;top:23px;width:11px}.device-iphone-x .device-btns{background:#c8cacb;height:26px;left:-2px;position:absolute;top:92px;width:3px}.device-iphone-x .device-btns:after,.device-iphone-x .device-btns:before{background:#c8cacb;content:"";height:50px;left:0;position:absolute;width:3px}.device-iphone-x .device-btns:after{top:48px}.device-iphone-x .device-btns:before{top:112px}.device-iphone-x .device-power{background:#c8cacb;height:80px;position:absolute;right:-2px;top:160px;width:3px}.device-iphone-8{height:698px;width:336px}.device-iphone-8 .device-frame{background:#fff;border-radius:54px;box-shadow:inset 0 0 0 2px #c8cacb,inset 0 0 0 6px #e2e3e4;height:698px;padding:82px 18px;width:336px}.device-iphone-8 .device-content{border:2px solid #222;border-radius:4px;height:534px;width:300px}.device-iphone-8 .device-stripe:after,.device-iphone-8 .device-stripe:before{border:solid rgba(51,51,51,.15);border-width:0 6px;content:"";height:5px;left:0;position:absolute;width:100%;z-index:9}.device-iphone-8 .device-stripe:after{top:55px}.device-iphone-8 .device-stripe:before{bottom:55px}.device-iphone-8 .device-header{border:2px solid #c8cacb;border-radius:50%;bottom:20px;height:46px;left:50%;margin-left:-23px;position:absolute;width:46px}.device-iphone-8 .device-sensors{background:#666;border-radius:2.5px;height:5px;left:50%;margin-left:-30px;position:absolute;top:41.5px;width:60px}.device-iphone-8 .device-sensors:after,.device-iphone-8 .device-sensors:before{background:#666;border-radius:50%;content:"";position:absolute}.device-iphone-8 .device-sensors:after{height:8px;left:50%;margin-left:-4px;top:-20px;width:8px}.device-iphone-8 .device-sensors:before{height:10px;left:-34px;margin-top:-5px;top:50%;width:10px}.device-iphone-8 .device-btns{background:#c8cacb;height:24px;left:-2px;position:absolute;top:82px;width:3px}.device-iphone-8 .device-btns:after,.device-iphone-8 .device-btns:before{background:#c8cacb;content:"";height:45px;left:0;position:absolute;width:3px}.device-iphone-8 .device-btns:after{top:50px}.device-iphone-8 .device-btns:before{top:106px}.device-iphone-8 .device-power{background:#c8cacb;height:80px;position:absolute;right:-2px;top:160px;width:3px}.device-iphone-8.device-gold .device-frame{box-shadow:inset 0 0 0 2px #e4b08a,inset 0 0 0 6px #f7e8dd}.device-iphone-8.device-gold .device-header{border-color:#e4b08a}.device-iphone-8.device-gold .device-btns,.device-iphone-8.device-gold .device-btns:after,.device-iphone-8.device-gold .device-btns:before{background:#e4b08a}.device-iphone-8.device-gold .device-power{background:#e4b08a}.device-iphone-8.device-spacegray .device-frame{background:#222;box-shadow:inset 0 0 0 2px #74747a,inset 0 0 0 6px #9b9ba0}.device-iphone-8.device-spacegray .device-stripe:after,.device-iphone-8.device-spacegray .device-stripe:before{border-color:#cccccc59}.device-iphone-8.device-spacegray .device-btns,.device-iphone-8.device-spacegray .device-btns:after,.device-iphone-8.device-spacegray .device-btns:before{background:#74747a}.device-google-pixel-2-xl{height:744px;width:360px}.device-google-pixel-2-xl .device-frame{background:#121212;border-radius:36px;box-shadow:inset 0 0 0 2px #cfcfcf,inset 0 0 0 6px #9c9c9c;height:740px;padding:50px 20px;width:360px}.device-google-pixel-2-xl .device-content{border-radius:24px;height:640px;width:320px}.device-google-pixel-2-xl .device-header{height:740px;left:50%;margin-left:-135px;position:absolute;top:0;width:270px}.device-google-pixel-2-xl .device-header:after,.device-google-pixel-2-xl .device-header:before{background:#333;border-radius:2.5px;content:"";height:5px;left:50%;margin-left:-65px;margin-top:-2.5px;position:absolute;width:130px}.device-google-pixel-2-xl .device-header:after{top:20px}.device-google-pixel-2-xl .device-header:before{bottom:26px}.device-google-pixel-2-xl .device-sensors{background:#333;border-radius:5px;height:12px;left:45px;margin-top:-6px;position:absolute;top:32px;width:12px}.device-google-pixel-2-xl .device-btns{background:#cfcfcf;height:94px;position:absolute;right:-2px;top:274px;width:3px}.device-google-pixel-2-xl .device-power{background:#cfcfcf;height:48px;position:absolute;right:-2px;top:174px;width:3px}.device-google-pixel{height:744px;width:360px}.device-google-pixel .device-frame{background:#f7f7f8;border-radius:54px;box-shadow:inset 0 0 0 2px #c8cacb,inset 0 0 0 6px #e2e3e4,inset 0 0 0 10px #fff;height:744px;padding:82px 18px 86px;width:360px}.device-google-pixel .device-content{border:2px solid #222;border-radius:2px;height:576px;width:324px}.device-google-pixel .device-stripe{border-top:6px solid rgba(51,51,51,.15);bottom:0;left:254px;position:absolute;top:0;width:8px}.device-google-pixel .device-stripe:after,.device-google-pixel .device-stripe:before{border:solid rgba(51,51,51,.15);border-width:0 6px;content:"";height:10px;left:-254px;position:absolute;width:360px;z-index:9}.device-google-pixel .device-stripe:after{top:60px}.device-google-pixel .device-stripe:before{bottom:46px}.device-google-pixel .device-sensors{background:#ddd;border-radius:2.5px;height:5px;left:50%;margin-left:-39px;margin-top:-2.5px;position:absolute;top:41px;width:78px}.device-google-pixel .device-sensors:after,.device-google-pixel .device-sensors:before{background:#333;border-radius:6px;content:"";position:absolute}.device-google-pixel .device-sensors:after{height:12px;left:50%;margin-left:-14px;top:21.5px;width:28px}.device-google-pixel .device-sensors:before{height:10px;left:-81px;margin-top:-5px;top:50%;width:10px}.device-google-pixel .device-btns{background:#c8cacb;height:102px;position:absolute;right:-2px;top:298px;width:3px}.device-google-pixel .device-power{background:#c8cacb;height:50px;position:absolute;right:-2px;top:184px;width:3px}.device-google-pixel.device-black .device-frame{background:#211d1c;box-shadow:inset 0 0 0 2px #363635,inset 0 0 0 6px #6a6967,inset 0 0 0 10px #3d3533}.device-google-pixel.device-black .device-stripe,.device-google-pixel.device-black .device-stripe:after,.device-google-pixel.device-black .device-stripe:before{border-color:#0d0d0d59}.device-google-pixel.device-black .device-sensors{background:#444}.device-google-pixel.device-black .device-sensors:after{background:#0d0d0d}.device-google-pixel.device-black .device-btns,.device-google-pixel.device-black .device-btns:after,.device-google-pixel.device-black .device-btns:before{background:#363635}.device-google-pixel.device-black .device-power{background:#363635}.device-google-pixel.device-blue .device-frame{box-shadow:inset 0 0 0 2px #2a5aff,inset 0 0 0 6px #7695ff,inset 0 0 0 10px #fff}.device-google-pixel.device-blue .device-btns,.device-google-pixel.device-blue .device-btns:after,.device-google-pixel.device-blue .device-btns:before{background:#2a5aff}.device-google-pixel.device-blue .device-power{background:#2a5aff}.device-galaxy-s8{height:686px;width:316px}.device-galaxy-s8 .device-frame{background:#222;border:solid #cfcfcf;border-radius:46px;border-width:4px 0;box-shadow:inset 0 0 0 2px #9c9c9c;height:686px;padding:40px 8px 34px;width:316px}.device-galaxy-s8 .device-content{border:2px solid #222;border-radius:28px;height:617px;width:300px}.device-galaxy-s8 .device-stripe:after,.device-galaxy-s8 .device-stripe:before{border:solid rgba(51,51,51,.15);border-width:4px 0;content:"";height:686px;position:absolute;top:0;width:5px;z-index:9}.device-galaxy-s8 .device-stripe:after{left:40px}.device-galaxy-s8 .device-stripe:before{right:40px}.device-galaxy-s8 .device-sensors{background:#666;border-radius:2.5px;height:4px;left:50%;margin-left:-20px;margin-top:-2px;position:absolute;top:26px;width:40px}.device-galaxy-s8 .device-sensors:after,.device-galaxy-s8 .device-sensors:before{background:#666;border-radius:50%;content:"";position:absolute;top:50%}.device-galaxy-s8 .device-sensors:after{box-shadow:-160px 0 #333,-145px 0 #333,-200px 0 #333;height:6px;margin-top:-3px;right:-75px;width:6px}.device-galaxy-s8 .device-sensors:before{box-shadow:155px 0 #666;height:10px;left:-75px;margin-top:-5px;width:10px}.device-galaxy-s8 .device-btns{background:#9c9c9c;border-radius:2px 0 0 2px;height:98px;left:-2px;position:absolute;top:120px;width:3px}.device-galaxy-s8 .device-btns:after{background:#9c9c9c;border-radius:2px 0 0 2px;content:"";height:45px;left:0;position:absolute;top:138px;width:3px}.device-galaxy-s8 .device-power{background:#9c9c9c;border-radius:0 2px 2px 0;height:46px;position:absolute;right:-2px;top:218px;width:3px}.device-galaxy-s8.device-blue .device-frame{border-color:#a3c5e8;box-shadow:inset 0 0 0 2px #5192d4}.device-galaxy-s8.device-blue .device-stripe:after,.device-galaxy-s8.device-blue .device-stripe:before{border-color:#ffffff59}.device-galaxy-s8.device-blue .device-btns,.device-galaxy-s8.device-blue .device-btns:after{background:#5192d4}.device-galaxy-s8.device-blue .device-power{background:#5192d4}.device-ipad-pro{height:804px;width:560px}.device-ipad-pro .device-frame{background:#fff;border-radius:38px;box-shadow:inset 0 0 0 2px #c8cacb,inset 0 0 0 6px #e2e3e4;height:804px;padding:62px 25px;width:560px}.device-ipad-pro .device-content{border:2px solid #222;border-radius:2px;height:680px;width:510px}.device-ipad-pro .device-header{border:2px solid #c8cacb;border-radius:50%;bottom:17px;height:34px;left:50%;margin-left:-17px;position:absolute;width:34px}.device-ipad-pro .device-sensors{background:#666;border-radius:50%;height:10px;left:50%;margin-left:-5px;margin-top:-5px;position:absolute;top:34px;width:10px}.device-ipad-pro.device-gold .device-frame{box-shadow:inset 0 0 0 2px #e4b08a,inset 0 0 0 6px #f7e8dd}.device-ipad-pro.device-gold .device-header{border-color:#e4b08a}.device-ipad-pro.device-rosegold .device-frame{box-shadow:inset 0 0 0 2px #f6a69a,inset 0 0 0 6px #facfc9}.device-ipad-pro.device-rosegold .device-header{border-color:#f6a69a}.device-ipad-pro.device-spacegray .device-frame{background:#222;box-shadow:inset 0 0 0 2px #818187,inset 0 0 0 6px #9b9ba0}.device-ipad-pro.device-spacegray .device-header{border-color:#818187}.device-surface-pro{height:394px;width:561px}.device-surface-pro .device-frame{background:#0d0d0d;border-radius:10px;box-shadow:inset 0 0 0 2px #c8c8c8;height:394px;margin:0 auto;padding:26px 24px;width:561px}.device-surface-pro .device-content{border:2px solid #121212;border-radius:2px;height:342px;width:513px}.device-surface-pro .device-btns:after,.device-surface-pro .device-btns:before{background:#c8c8c8;content:"";height:2px;position:absolute;top:-2px}.device-surface-pro .device-btns:after{left:48px;width:26px}.device-surface-pro .device-btns:before{left:94px;width:48px}.device-surface-pro .device-sensors{background:#333;border-radius:50%;height:6px;left:50%;margin-left:-3px;margin-top:-3px;position:absolute;top:14px;width:6px}.device-surface-book{height:424px;width:728px}.device-surface-book .device-frame{background:#0d0d0d;border-radius:12px;box-shadow:inset 0 0 0 2px #c8c8c8;height:408px;margin:0 auto;padding:24px 22px;position:relative;width:584px}.device-surface-book .device-content{border:2px solid #121212;border-radius:2px;height:360px;width:540px}.device-surface-book .device-btns:after,.device-surface-book .device-btns:before{background:#c8c8c8;content:"";height:2px;position:absolute;top:-2px}.device-surface-book .device-btns:after{left:122px;width:20px}.device-surface-book .device-btns:before{left:168px;width:44px}.device-surface-book .device-power{background:linear-gradient(to bottom,#eee,#c8c8c8);border:solid #c8c8c8;border-radius:2px;border-width:0 2px;height:12px;margin-top:4px;position:relative;width:728px}.device-surface-book .device-power:after,.device-surface-book .device-power:before{content:"";position:absolute}.device-surface-book .device-power:after{background:radial-gradient(circle at center,#eee 0 95%,#a2a1a1);border-radius:0 0 6px 6px;height:8px;left:50%;margin-left:-125px;top:0;width:250px;z-index:1}.device-surface-book .device-power:before{background:linear-gradient(to bottom,#eee,#c8c8c8);border-radius:2px 2px 0 0;bottom:12px;height:8px;left:50%;margin-left:-292px;width:584px}.device-macbook-pro{height:444px;width:740px}.device-macbook-pro .device-frame{background:#0d0d0d;border-radius:20px;box-shadow:inset 0 0 0 2px #c8cacb;height:428px;margin:0 auto;padding:29px 19px 39px;position:relative;width:614px}.device-macbook-pro .device-frame:after{background:#272626;border-radius:0 0 20px 20px;bottom:2px;content:"";height:26px;left:2px;position:absolute;width:610px}.device-macbook-pro .device-frame:before{bottom:10px;color:#c8cacb;content:"MacBook Pro";font-size:12px;height:16px;left:50%;line-height:16px;margin-left:-100px;position:absolute;text-align:center;width:200px;z-index:1}.device-macbook-pro .device-content{border:2px solid #121212;border-radius:2px;height:360px;width:576px}.device-macbook-pro .device-power{background:#e2e3e4;border:solid #d5d6d8;border-radius:2px 2px 0 0;border-width:2px 4px 0 4px;height:14px;margin-top:-10px;position:relative;width:740px;z-index:9}.device-macbook-pro .device-power:after,.device-macbook-pro .device-power:before{content:"";position:absolute}.device-macbook-pro .device-power:after{background:#d5d6d8;border-radius:0 0 10px 10px;box-shadow:inset 0 0 4px 2px #babdbf;height:10px;left:50%;margin-left:-60px;top:-2px;width:120px}.device-macbook-pro .device-power:before{background:#a0a3a7;border-radius:0 0 180px 180px/0 0 12px 12px;box-shadow:inset 0 -2px 6px #474a4d;height:12px;left:-4px;margin:0 auto;top:10px;width:740px}.device-macbook-pro.device-spacegray .device-frame{box-shadow:inset 0 0 0 2px #767a7d}.device-macbook-pro.device-spacegray .device-power{background:#909496;border-color:#767a7d}.device-macbook-pro.device-spacegray .device-power:after{background:#83878a;box-shadow:inset 0 0 4px 2px #6a6d70}.device-macbook-pro.device-spacegray .device-power:before{background:#515456;box-shadow:inset 0 -2px 6px #000}.device-macbook{height:432px;width:740px}.device-macbook .device-frame{background:#0d0d0d;border-radius:20px;box-shadow:inset 0 0 0 2px #c8cacb;height:428px;margin:0 auto;padding:29px 19px 39px;position:relative;width:614px}.device-macbook .device-frame:after{background:#272626;border-radius:0 0 20px 20px;bottom:2px;content:"";height:26px;left:2px;position:absolute;width:610px}.device-macbook .device-frame:before{bottom:10px;color:#c8cacb;content:"MacBook";font-size:12px;height:16px;left:50%;line-height:16px;margin-left:-100px;position:absolute;text-align:center;width:200px;z-index:1}.device-macbook .device-content{border:2px solid #121212;border-radius:2px;height:360px;width:576px}.device-macbook .device-power{background:#e2e3e4;border:solid #d5d6d8;border-radius:2px 2px 0 0;border-width:0 4px;height:4px;margin-top:-10px;position:relative;width:740px;z-index:9}.device-macbook .device-power:after,.device-macbook .device-power:before{content:"";position:absolute}.device-macbook .device-power:after{background:radial-gradient(circle at center,#e2e3e4 0 85%,#a0a3a7);border:solid #adb0b3;border-width:0 2px;height:4px;left:50%;margin-left:-60px;width:120px}.device-macbook .device-power:before{background:#a0a3a7;border-radius:0 0 180px 180px/0 0 10px 10px;box-shadow:inset 0 -2px 6px #474a4d;height:10px;left:-4px;margin:0 auto;top:4px;width:740px}.device-macbook.device-gold .device-frame{box-shadow:inset 0 0 0 2px #edccb4}.device-macbook.device-gold .device-power{background:#f7e8dd;border-color:#edccb4}.device-macbook.device-gold .device-power:after{background:radial-gradient(circle at center,#f7e8dd 0 85%,#dfa276);border-color:#e4b08a}.device-macbook.device-gold .device-power:before{background:#edccb4;box-shadow:inset 0 -2px 6px #83491f}.device-macbook.device-rosegold .device-frame{box-shadow:inset 0 0 0 2px #f6a69a}.device-macbook.device-rosegold .device-power{background:#facfc9;border-color:#f6a69a}.device-macbook.device-rosegold .device-power:after{background:radial-gradient(circle at center,#facfc9 0 85%,#ef6754);border-color:#f6a69a}.device-macbook.device-rosegold .device-power:before{background:#f6a69a;box-shadow:inset 0 -2px 6px #851b0c}.device-macbook.device-spacegray .device-frame{box-shadow:inset 0 0 0 2px #767a7d}.device-macbook.device-spacegray .device-power{background:#909496;border-color:#767a7d}.device-macbook.device-spacegray .device-power:after{background:radial-gradient(circle at center,#909496 0 85%,#515456);border-color:#5d6163}.device-macbook.device-spacegray .device-power:before{background:#515456;box-shadow:inset 0 -2px 6px #000}.device-surface-studio{height:506px;width:640px}.device-surface-studio .device-frame{background:#0d0d0d;border-radius:10px;box-shadow:inset 0 0 0 2px #000;height:440px;padding:20px;width:640px}.device-surface-studio .device-content{border:2px solid #121212;border-radius:2px;height:400px;width:600px}.device-surface-studio .device-stripe{background:#444;border-radius:0 0 2px 2px;bottom:0;height:4px;left:50%;margin-left:-117px;position:absolute;width:234px}.device-surface-studio .device-stripe:after,.device-surface-studio .device-stripe:before{content:"";left:50%;position:absolute;top:-75px}.device-surface-studio .device-stripe:after{border:6px solid #d5d6d8;border-radius:0 0 18px 18px;border-top:0;box-shadow:inset 0 0 0 4px #c8cacb;height:60px;margin-left:-140px;width:280px;z-index:-1}.device-surface-studio .device-stripe:before{border:15px solid #e2e3e4;border-radius:0 0 4px 4px;border-top:0;height:70px;margin-left:-150px;width:300px;z-index:-2}.device-surface-studio .device-power{background:#eff0f0;border:solid #e2e3e4;border-radius:0 0 2px 2px;border-width:0 4px 2px 4px;height:32px;margin:30px auto 0;position:relative;width:250px}.device-surface-studio .device-power:after{background:#adb0b3;content:"";height:2px;left:-4px;position:absolute;top:4px;width:250px}.device-imac-pro{height:484px;width:624px}.device-imac-pro .device-frame{background:#0d0d0d;border-radius:18px;box-shadow:inset 0 0 0 2px #080808;height:428px;padding:24px 24px 80px;position:relative;width:624px}.device-imac-pro .device-frame:after{background:#2f2e33;border-radius:0 0 18px 18px;bottom:2px;content:"";height:54px;left:2px;position:absolute;width:620px}.device-imac-pro .device-frame:before{bottom:15px;color:#0d0d0d;content:"";font-size:24px;height:24px;left:50%;line-height:24px;margin-left:-100px;position:absolute;text-align:center;width:200px;z-index:9}.device-imac-pro .device-content{border:2px solid #121212;border-radius:2px;height:324px;width:576px}.device-imac-pro .device-power:after,.device-imac-pro .device-power:before{content:""}.device-imac-pro .device-power:after{background:#222225;border-radius:2px;height:6px;margin:0 auto;position:relative;width:180px}.device-imac-pro .device-power:before{border:solid transparent;border-bottom-color:#333;border-width:0 8px 50px 8px;height:50px;margin:0 auto;position:relative;width:130px}.device-apple-watch{height:234px;width:200px}.device-apple-watch .device-frame{background:#0d0d0d;border-radius:40px;box-shadow:inset 0 0 2px 2px #adb0b3,inset 0 0 0 6px #e2e3e4,inset 0 0 0 8px #e2e3e4;height:234px;padding:32px;position:relative;width:200px}.device-apple-watch .device-frame:after{border-radius:30px;box-shadow:inset 0 0 25px #ffffffbf;content:"";height:216px;left:9px;position:absolute;top:9px;width:182px}.device-apple-watch .device-content{border:2px solid #121212;border-radius:2px;height:170px;width:136px}.device-apple-watch .device-btns{background:#e2e3e4;border-left:2px solid #adb0b3;border-radius:8px 4px 4px 8px/20px 4px 4px 20px;box-shadow:inset 0 0 2px 2px #adb0b3;height:44px;position:absolute;right:-10px;top:52px;width:16px;z-index:9}.device-apple-watch .device-btns:after{background:#e2e3e4;border-radius:4px 2px 2px 4px/10px 2px 2px 10px;box-shadow:inset 0 0 1px 2px #adb0b3;content:"";height:66px;position:absolute;right:6px;top:68px;width:8px}.device-apple-watch .device-btns:before{background:#adb0b3;box-shadow:0 -16px #adb0b3,0 -12px #adb0b3,0 -8px #adb0b3,0 -4px #adb0b3,0 4px #adb0b3,0 8px #adb0b3,0 12px #adb0b3,0 16px #adb0b3;content:"";height:2px;margin-top:-1px;position:absolute;right:0;top:50%;width:6px}html,body{margin:0;height:100%;width:100%;overflow:hidden}.links{display:flex;flex-direction:column;margin-left:50px}.links .link{margin-top:20px}.component{height:100%;width:100%;display:flex}.component.first-component{background-color:gray;position:relative}.first-component--inside-scroller{position:absolute;right:20px;top:100px}.component.second-component{background-color:red}.component.third-component{background-color:#00f}.component.fourth-component{background-color:#ff0}.component.fifth-component{background-color:purple}h2{margin:auto;text-align:center}.pagination-additional-class{margin:0;position:fixed;top:20px;display:flex;justify-content:center;width:100%}.pagination-additional-class>li:not(:last-of-type)>a,.pagination-additional-class>li:not(:last-of-type)>span{margin-right:50px}.demo-page-contain{display:flex;justify-content:center;align-items:center;height:100vh;flex-direction:column}.demo-page-contain__hint{margin-bottom:20px}@media (max-width: 768px){.pagination-additional-class>li:not(:last-of-type)>a,.pagination-additional-class>li:not(:last-of-type)>span{margin-right:5px}}.demo-page-full{position:relative}.progress{position:absolute;left:0;bottom:0;width:0;overflow:hidden;transition:all .2s linear}.progress,.progress:before{height:6px}.progress:before{display:block;width:100%;background-color:#4e6af6;content:"";transform-origin:0 100%;transform:skew(45deg)}.progress[style*="100%"]:before{transform:none}

package/lib/withTracker/index.js

@@ -1,23 +1,22 @@
-import { jsx as m } from "react/jsx-runtime";
-import { useLocation as f } from "react-router-dom";
-import { useMount as d, useDeepCompareEffect as u } from "ahooks";
+import { jsx as s } from "react/jsx-runtime";
+import { useLocation as m } from "react-router-dom";
+import { useMount as f, useDeepCompareEffect as d } from "ahooks";
 import a from "react-ga4";
-const w = (c) => {
-  var i;
-  const n = ((i = window.blocklet) == null ? void 0 : i.GA_MEASUREMENT_ID) || "", r = (o, e = document.title) => {
+const v = (i) => {
+  const n = window.blocklet?.GA_MEASUREMENT_ID || "", r = (o, e = document.title) => {
     !process.env.NODE_ENV || process.env.NODE_ENV === "development" || n && a.send({ hitType: "pageview", page: o, title: e });
-  }, p = (o, e, t, s) => {
-    n && a.event({ category: o, action: e, label: t, value: s, transport: "beacon" });
+  }, c = (o, e, t, p) => {
+    n && a.event({ category: o, action: e, label: t, value: p, transport: "beacon" });
   };
-  return n && a.initialize(n), window.trackPage = r, window.trackEvent = p, function(e) {
-    const t = f();
-    return d(() => {
+  return n && a.initialize(n), window.trackPage = r, window.trackEvent = c, function(e) {
+    const t = m();
+    return f(() => {
       r(t.pathname);
-    }), u(() => {
+    }), d(() => {
       r(t.pathname);
-    }, [t.pathname]), /* @__PURE__ */ m(c, { ...e });
+    }, [t.pathname]), /* @__PURE__ */ s(i, { ...e });
   };
 };
 export {
-  w as default
+  v as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "3.0.8",
+  "version": "3.0.10",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -57,19 +57,19 @@
     "@mui/icons-material": "^7.1.2",
     "@mui/material": "^7.1.2",
     "@mui/utils": "^7.1.1",
-    "react": ">=19.0.0",
-    "react-router-dom": ">=6.22.3"
+    "react": "^19.0.0",
+    "react-router-dom": "^6.22.3"
   },
-  "gitHead": "30b21395b2f3ef6824df728aeafd10e9dea173d9",
+  "gitHead": "8e4b3b4f9cc52c8f1f1d270ab03a3c566073617a",
   "dependencies": {
-    "@arcblock/bridge": "3.0.8",
+    "@arcblock/bridge": "3.0.10",
     "@arcblock/did": "^1.20.15",
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "3.0.8",
-    "@arcblock/nft-display": "3.0.8",
-    "@arcblock/react-hooks": "3.0.8",
+    "@arcblock/icons": "3.0.10",
+    "@arcblock/nft-display": "3.0.10",
+    "@arcblock/react-hooks": "3.0.10",
     "@blocklet/js-sdk": "^1.16.44",
-    "@blocklet/theme": "3.0.8",
+    "@blocklet/theme": "3.0.10",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.2.6",
     "@iconify-icons/logos": "^1.2.36",
@@ -79,7 +79,6 @@
     "@iconify/react": "^5.2.1",
     "@ocap/mcrypto": "^1.20.15",
     "@solana/qr-code-styling": "^1.6.0",
-    "@testing-library/react": "^14.3.1",
     "@types/dompurify": "^3.2.0",
     "@types/mui-datatables": "^4.3.12",
     "ahooks": "^3.8.5",