.widget-brand, .widget-chat-icon, .widget-button, .widget-label, .share_widget-brand, .share_widget-chat-icon, .share_widget-button, .share_widget-label { font-family: 'Avenir Next', Avenir, 'Helvetica Neue', Lato, 'Segoe UI', Helvetica, Arial, sans-serif; } #widget-container, #share-widget-container { position: fixed !important; z-index: 10000; right: 0; bottom: 0; } #widget-container, #share-widget-container{ display: block; /*background-color: #dd427c;*/ box-sizing: border-box; text-rendering: optimizeLegibility; outline: none; zoom: 1; top: auto; /*left: 0;*/ right: 0; bottom: 0; width: auto; height: auto; z-index: 1000200; /*box-shadow: 0 0 1px 1px #e2dfe2;*/ overflow: hidden; margin-right: 5px; margin-left: 5px; } /*#widget-container.middle, #share-widget-container.middle{ display: block; box-sizing: border-box; text-rendering: optimizeLegibility; outline: none; zoom: 1; top: auto; right: 0; bottom: 0; height: 465px; z-index: 1000200; overflow: hidden; margin-right: 5px; margin-left: 5px; }*/ #widget-container.left > div, #share-widget-container.left > div{ clear:left; float:left; } #widget-container.right > div, #share-widget-container.right > div{ clear:right; float:right; } /*靠右*/ #widget-container.left, #share-widget-container.left { right: auto; left: 0; } #widget-container.left .widget-launcher, #widget-container.left .widget-chat-icon, #share-widget-container.left .widget-launcher, #share-widget-container.left .widget-chat-icon { right: auto; left: 14px; } /*上*/ #widget-container.top, #share-widget-container.top, #share-widget-container.top .share_widget-launcher, #share-widget-container.top .share_widget-chat-icon { bottom: auto; top: 7%; } #widget-container.top .widget-launcher, #widget-container.top .widget-chat-icon { bottom: auto; top: 14px; } /*下*/ #widget-container.bottom, #share-widget-container.bottom { bottom: 7%; top: auto; } #widget-container.bottom, #share-widget-container.bottom { bottom: 7%; top: auto; } #widget-container.bottom .widget-launcher, #widget-container.bottom .widget-chat-icon, #share-widget-container.bottom .share_widget-launcher, #share-widget-container.bottom .share_widget-chat-icon { bottom: 14px; top: auto; } /*中 #widget-container.middle, #share-widget-container.middle { bottom: 14%; top: auto; }*/ #widget-container.middle .widget-launcher, #widget-container.middle .widget-chat-icon, #share-widget-container.middle .share_widget-launcher, #share-widget-container.middle .share_widget-chat-icon { bottom: 50%; top: 50%; } /*控制鈕*/ #widget-container.left .widget-launcher, #widget-container.left .widget-chat-icon, #share-widget-container.left .share_widget-launcher, #share-widget-container.left .share_widget-chat-icon { float: left; color:white; cursor: pointer; margin: 3px 0; /*position: absolute;*/ width: 48px; height: 48px; right: 14px; bottom: 27px; border-radius: 30px; /*box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05), 0 15px 30px -10px rgba(0, 0, 0, 0.3);*/ } #widget-container.right .widget-launcher, #widget-container.right .widget-chat-icon, #share-widget-container.right .share_widget-launcher, #share-widget-container.right .share_widget-chat-icon { float: right; color:white; cursor: pointer; margin: 3px 0; /*position: absolute;*/ width: 48px; height: 48px; right: 14px; bottom: 27px; border-radius: 30px; /*box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05), 0 15px 30px -10px rgba(0, 0, 0, 0.3);*/ } .widget-plus1{ background-image: url(image/plus_1.png); } .widget-plus2{ background-image: url(image/plus_2.png); } .widget-plus3{ background-image: url(image/plus_3.png); } .widget-plus4{ background-image: url(image/plus_4.png); } .widget-plus5{ background-image: url(image/plus_5.png); } .widget-plus6{ background-image: url(image/plus_6.png); } .widget-plus7{ background-image: url(image/plus_7.png); } .widget-plus8{ background-image: url(image/plus_8.png); } .widget-plus9{ background-image: url(image/plus_9.png); } .widget-plus10{ background-image: url(image/plus_10.png); } .widget-plus11{ background-image: url(image/plus_11.png); } .widget-skype{ background-color:#00AFF0; } .widget-twitter{ background-color:#2DAAE1; } .widget-instagram{ background-color:#dd427c; } .widget-facebook{ background-color:#00AFF0; } .widget-line{ background-color:#3ACE01; } .widget-phone{ background-color:#fd8235; } .widget-email{ background-color:#fd8235; } .widget-wechat{ background-color:#00a00d; } .widget-whatsapp{ background-color:#0AD02C; } .widget-telegram{ background-color:#00a0d5; } .widget-more{ background-color:#999; position: fixed !important; display: block; box-sizing: border-box; text-rendering: optimizeLegibility; outline: none; zoom: 1; top: 0; bottom: 0; width: 32px; height: 10px; z-index: 1000222; overflow: hidden; margin-right: 14px; margin-left: 14px; text-align: center; opacity:0.5; border-radius: 1px; } .widget-more a{ color:#FFF; display: inline-block; line-height: normal; font-size: 10px; line-height: 9px; margin: 0 auto; opacity: 1; } /*右下方的more*/ #more-container.widget-more.bottom.right { bottom: 2%; top: auto; right: 0; left: auto; } /*左下方的more*/ #more-container.widget-more.bottom.left { bottom: 2%; top: auto; right: auto; left: 0; } /*右上方的more*/ #more-container.widget-more.top.right { bottom: auto; top: 3%; right: 0; left: auto; } /*左上方的more*/ #more-container.widget-more.top.left { bottom: auto; top: 3%; right: auto; left: 0; } .widget-custom{ background-color:#FA8072; } .widget-custom img { border: 4px solid #ff4c3f; border-radius: 50%; max-width:48px!important; max-height:48px!important; text-align: center; position:relative; background:#fff; width: unset!important; height: unset!important; margin-top: 0px!important; } /* .widget-custom img:after{ position:absolute; content:""; width:110%; height:110%; background:linear-gradient(142deg, #ff7a6e, #ff4c3f); top:-5%; left:-5%; z-index:-1; border-radius:50%; }*/ .share_widget-plus1{ background-image: url(image/share_plus_1.png); } .share_widget-plus2{ background-image: url(image/share_plus_2.png); } .share_widget-plus3{ background-image: url(image/share_plus_3.png); } .share_widget-plus4{ background-image: url(image/share_plus_4.png); } .share_widget-plus5{ background-image: url(image/share_plus_5.png); } .share_widget-plus6{ background-image: url(image/share_plus_6.png); } .share_widget-plus7{ background-image: url(image/share_plus_7.png); } .share_widget-plus8{ background-image: url(image/share_plus_8.png); } .share_widget-plus9{ background-image: url(image/share_plus_9.png); } .share_widget-plus10{ background-image: url(image/share_plus_10.png); } .share_widget-plus11{ background-image: url(image/share_plus_11.png); } .share_widget-skype{ background-color:#00AFF0; } .share_widget-twitter{ background-color:#2DAAE1; } .share_widget-instagram{ background-color:#dd427c; } .share_widget-facebook{ background-color:#3a5892; } .share_widget-line{ background-color:#3ACE01; } .share_widget-phone{ background-color:#fd8235; } .share_widget-email{ background-color:#fd8235; } .share_widget-wechat{ background-color:#00a00d; } .share_widget-whatsapp{ background-color:#0AD02C; } .share_widget-telegram{ background-color:#00a0d5; } .share_widget-more{ background-color:#ff7063; } .share_widget-copyurl{ background-color:#ff7063; } .share_widget-copyurl{ background-color:#FA8072; } .widget-chat-icon, .share_widget-chat-icon { -webkit-transition: width 0.25s, height 0.25s; transition: width 0.25s, height 0.25s; filter: alpha(opacity=0); } /*icon*/ .widget-button, .share_widget-button { border: 2px solid white; text-decoration: none; font-weight: 500; cursor: pointer; display: block; padding: 3px 6px; padding: 0.2rem 0.4rem; text-align: center; } /*icon圖*/ .widget-chat-icon img, .share_widget-chat-icon img { display: inline-block; margin-top: 0px!important; } /*icon面板*/ .widget-chat-icon.widget-panel, .share_widget-chat-icon.share_widget-panel { position: fixed!important; width: 280px!important; height: 300px!important; right: 50% !important; top: 50% !important; margin-right: -140px!important; margin-top: -140px!important; z-index: 11; } #widget-container.left .widget-chat-icon.widget-panel, #share-widget-container.left .share_widget-chat-icon.share_widget-panel { left: auto!important; } .widget-chat-icon:not(.widget-panel):hover, .share_widget-chat-icon:not(.share_widget-panel):hover { width: 135px!important; z-index: 12; } .widget-qr, .share_widget-qr { display:none; height: 200px; width: 200px; position: absolute !important; top: 0; left: 0; opacity: 1; filter: alpha(opacity=100); margin: 40px; border-radius: 5px; visibility: visible; background-size: contain; -webkit-transition: visibility 0s linear 0.2s, opacity 0.2s linear 0.2s; transition: visibility 0s linear 0.2s, opacity 0.2s linear 0.2s; } .widget-qr.active, .share_widget-qr.active{ display:block; } .widget-chat-icon:not(.widget-panel) .widget-qr, .share_widget-chat-icon:not(.share_widget-panel) .share_widget-qr { visibility: hidden; opacity: 0; filter: alpha(opacity=0); } .widget-launcher.widget-launcher-active .widget-brand, .share_widget-launcher.share_widget-launcher-active .share_widget-brand { visibility: visible; opacity: 1; filter: alpha(opacity=100); } .widget-brand, .share_widget-brand { text-decoration: none; position: absolute !important; visibility: hidden; font-weight: 500; font-size: 11px; bottom: -24px; opacity: 0; filter: alpha(opacity=0); border: 0; right: 0px; width: 90px; text-align: right; -webkit-transition: visibility 0s, opacity 0.5s linear 3s; transition: visibility 0s, opacity 0.5s linear 3s; } .widget-label, .share_widget-label { opacity: 0; filter: alpha(opacity=0); left: 45px; line-height: 45px; font-size: 18px; font-weight: 400; position: absolute !important; display:none; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transition: opacity 0.4s; transition: opacity 0.4s; padding-left:3px; word-break: keep-all; } .widget-chat-icon:hover>.widget-label, .share_widget-chat-icon:hover>.share_widget-label { opacity: 1; filter: alpha(opacity=100); display: inline-block; } .widget-chat-icon.widget-panel>.widget-label, .share_widget-chat-icon.share_widget-panel>.share_widget-label { opacity: 1; filter: alpha(opacity=100); } /* Media Query */ /* Click Effects */ .widget-launcher, .share_widget-launcher { transition: color 0.7s; -webkit-transition: color 0.7s; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); background-size: contain; } .widget-effect:before, .share_widget-effect:before { position: absolute !important; top: 50%; left: 50%; margin: -50px 0 0 -50px; width: 100px; height: 100px; border-radius: 50%; content: ''; opacity: 0; filter: alpha(opacity=0); pointer-events: none; } .widget-effect:before, .widget-effect:after, .share_widget-effect:before, .share_widget-effect:after { box-shadow: 0 0 0 2px rgba(111, 148, 182, 0.6); } .widget-effect.widget-show-effect:before, .share_widget-effect.share_widget-show-effect:before { -webkit-animation: widget-effect-1 0.5s forwards; animation: widget-effect-1 0.5s forwards; } .widget-effect.widget-show-effect:after, .share_widget-effect.share_widget-show-effect:after { -webkit-animation: widget-effect-2 0.5s forwards; animation: widget-effect-2 0.5s forwards; } @-webkit-keyframes widget-effect-1, @-webkit-keyframes share_widget-effect-1 { 0% { opacity: 1; filter: alpha(opacity=100); -webkit-transform: scale3d(0.5, 0.5, 1); transform: scale3d(0.5, 0.5, 1); } 100% { opacity: 0; filter: alpha(opacity=0); -webkit-transform: scale3d(1.1, 1.1, 1); transform: scale3d(1.1, 1.1, 1); } } @keyframes widget-effect-1, @keyframes share_widget-effect-1 { 0% { opacity: 1; filter: alpha(opacity=100); -webkit-transform: scale3d(0.5, 0.5, 1); transform: scale3d(0.5, 0.5, 1); } 100% { opacity: 0; filter: alpha(opacity=0); -webkit-transform: scale3d(1.1, 1.1, 1); transform: scale3d(1.1, 1.1, 1); } } @-webkit-keyframes widget-effect-2, @-webkit-keyframes share_widget-effect-2 { 0% { opacity: 1; filter: alpha(opacity=100); -webkit-transform: scale3d(0.5, 0.5, 1); transform: scale3d(0.5, 0.5, 1); } 50%, 100% { opacity: 0; filter: alpha(opacity=0); -webkit-transform: scale3d(1.2, 1.2, 1); transform: scale3d(1.2, 1.2, 1); } } @keyframes widget-effect-2, @keyframes share_widget-effect-2 { 0% { opacity: 1; filter: alpha(opacity=100); -webkit-transform: scale3d(0.5, 0.5, 1); transform: scale3d(0.5, 0.5, 1); } 50%, 100% { opacity: 0; filter: alpha(opacity=0); -webkit-transform: scale3d(1.2, 1.2, 1); transform: scale3d(1.2, 1.2, 1); } } /*平板定位*/ @media (max-height:1024px) and (max-width: 1366px){ /*#widget-container.middle, #share-widget-container.middle{ display: block; box-sizing: border-box; text-rendering: optimizeLegibility; outline: none; zoom: 1; top: auto; right: 0; bottom: 0; height: 450px; z-index: 1000200; overflow: hidden; margin-right: 5px; margin-left: 5px; }*/ /*#widget-container.middle.share_expand, #share-widget-container.middle.share_expand{ height: 70%; }*/ /*中 #widget-container.middle, #share-widget-container.middle { bottom: 14%; top: auto; }*/ /*框架_下方*/ #widget-container.bottom, #share-widget-container.bottom{ bottom: 8%; } /*框架_上方*/ #widget-container.top, #share-widget-container.top{ top: 7%; } /*右下方的more*/ #more-container.widget-more.bottom.right { bottom: 4%; top: auto; right: 0; left: auto; } /*左下方的more*/ #more-container.widget-more.bottom.left { bottom: 4%; top: auto; right: auto; left: 0; } /*右上方的more*/ #more-container.widget-more.top.right { bottom: auto; top: 3%; right: 0; left: auto; } /*左上方的more*/ more-container.widget-more.top.left { bottom: auto; top: 3%; right: auto; left: 0; } } /*手機版定位*/ @media (max-width: 1024px){ /*手機版定位框架_上方*/ #widget-container.top, #share-widget-container.top{ display: block; box-sizing: border-box; text-rendering: optimizeLegibility; outline: none; zoom: 1; top: auto; /*left: 0;*/ right: 0; bottom: 0; height: auto; width: 50px; z-index: 1000200; overflow: hidden; margin-right: 5px; margin-left: 5px; } /*手機版定位框架_下方*/ #widget-container.bottom, #share-widget-container.bottom{ display: block; box-sizing: border-box; text-rendering: optimizeLegibility; outline: none; zoom: 1; top: auto; right: 0; bottom: 0; height: auto; width: 50px; z-index: 1000200; overflow: hidden; margin-right: 5px; margin-left: 5px; } /*手機版定位框架_中間 #widget-container.middle, #share-widget-container.middle{ display: block; box-sizing: border-box; text-rendering: optimizeLegibility; outline: none; zoom: 1; top: auto; right: 0; bottom: 0; height: 450px; width: 50px; z-index: 1000200; overflow: hidden; margin-right: 5px; margin-left: 5px; }*/ .widget-chat-icon img, .share_widget-chat-icon img { height: 42px!important; width: 42px!important; display: inline-block; } #widget-container.left .widget-launcher, #widget-container.left .widget-chat-icon, #share-widget-container.left .share_widget-launcher, #share-widget-container.left .share_widget-chat-icon { float: left; color:white; cursor: pointer; margin: 3px 0; width: 42px; height: 42px; right: 14px; bottom: 27px; border-radius: 30px; } #widget-container.right .widget-launcher, #widget-container.right .widget-chat-icon, #share-widget-container.right .share_widget-launcher, #share-widget-container.right .share_widget-chat-icon { float: right; color:white; cursor: pointer; margin: 2px 0; width: 42px; height: 42px; right: 14px; bottom: 27px; border-radius: 30px; } .widget-label, .share_widget-label { opacity: 0; filter: alpha(opacity=0); left: 45px; line-height: 37px; font-size: 16px; font-weight: 400; position: absolute; display: none; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transition: opacity 0.4s; transition: opacity 0.4s; padding-left:3px; } #widget-container.left > div, #share-widget-container.left > div{ clear:right; float:left; } #widget-container.right > div, #share-widget-container.right > div{ clear:left; float:right; } /*寬1024_上方框架位置*/ #widget-container.top, #share-widget-container.top { bottom: auto; top: 0; } /*寬1024_下方框架位置*/ #widget-container.bottom, #share-widget-container.bottom{ bottom: 0; top: auto; } .widget-chat-icon:not(.widget-panel):hover, .share_widget-chat-icon:not(.share_widget-panel):hover { width: 42px!important; z-index: 12; } #widget-container.left .widget-launcher, #widget-container.left .widget-chat-icon, #share-widget-container.left .share_widget-launcher, #share-widget-container.left .share_widget-chat-icon { margin: 4px 4px; } #widget-container.right .widget-launcher, #widget-container.right .widget-chat-icon, #share-widget-container.right .share_widget-launcher, #share-widget-container.right .share_widget-chat-icon { margin: 4px 4px; } /*字體隱藏*/ .widget-chat-icon:hover>.widget-label, .share_widget-chat-icon:hover>.share_widget-label { opacity: 0; filter: alpha(opacity=100); display: none; } } @media (max-height:1366px) and (max-width: 1024px){ /*#widget-container.middle, #share-widget-container.middle{ width: 50px; height: 450px; }*/ /*中 #widget-container.middle, #share-widget-container.middle { bottom: 30%; top: auto; }*/ /*寬1024_上方框架位置*/ #widget-container.top, #share-widget-container.top { bottom: auto; top: 7%; } /*寬1024_下方框架位置*/ #widget-container.bottom, #share-widget-container.bottom{ bottom: 4%; top: auto; } /*右下方的more*/ #more-container.widget-more.bottom.right { bottom: 2%; top: auto; right: 0; left: auto; } /*左下方的more*/ #more-container.widget-more.bottom.left { bottom: 2%; top: auto; right: auto; left: 0; } /*右上方的more*/ #more-container.widget-more.top.right { bottom: auto; top: 5%; right: 0; left: auto; } /*左上方的more*/ #more-container.widget-more.top.left { bottom: auto; top: 5%; right: auto; left: 0; } } @media (max-height:768px) and (max-width: 1024px){ /*#widget-container.middle, #share-widget-container.middle{ width: 102px; height: 210px; }*/ /*中 #widget-container.middle, #share-widget-container.middle { bottom: 30%; top: auto; }*/ /*寬1024_上方框架位置*/ #widget-container.top, #share-widget-container.top { bottom: auto; top: 12%; } /*寬1024_下方框架位置*/ #widget-container.bottom, #share-widget-container.bottom{ bottom: 6%; top: auto; } /*右下方的more*/ #more-container.widget-more.bottom.right { bottom: 3%; top: auto; right: 0; left: auto; } /*左下方的more*/ #more-container.widget-more.bottom.left { bottom: 3%; top: auto; right: auto; left: 0; } /*右上方的more*/ #more-container.widget-more.top.right { bottom: auto; top: 9%; right: 0; left: auto; } /*左上方的more*/ #more-container.widget-more.top.left { bottom: auto; top: 9%; right: auto; left: 0; } } @media (max-height: 411px) and (max-width: 823px){ /*手機版定位框架_中間 #widget-container.middle, #share-widget-container.middle{ display: block; box-sizing: border-box; text-rendering: optimizeLegibility; outline: none; zoom: 1; top: auto; right: 0; bottom: 0; height: 210px; width: 102px; z-index: 1000200; overflow: hidden; margin-right: 5px; margin-left: 5px; }*/ /*寬823_中間框架位置 #widget-container.middle, #share-widget-container.middle { bottom: 15%; top: auto; }*/ /*寬823_上方_框架寬高*/ #widget-container.top, #share-widget-container.top{ height: auto; width: 102px; } /*寬823_下方_框架寬高*/ #widget-container.bottom, #share-widget-container.bottom{ height: auto; width: 102px; } /*寬823_上方框架位置*/ #widget-container.top, #share-widget-container.top { bottom: auto; top: 17%; } /*寬823_下方框架位置*/ #widget-container.bottom, #share-widget-container.bottom{ bottom: 10%; top: auto; } /*右下方的more*/ #more-container.widget-more.bottom.right { bottom: 5%; top: auto; right: 0; left: auto; } /*左下方的more*/ #more-container.widget-more.bottom.left { bottom: 5%; top: auto; right: auto; left: 0; } /*右上方的more*/ #more-container.widget-more.top.right { bottom: auto; top: 12%; right: 0; left: auto; } /*左上方的more*/ #more-container.widget-more.top.left { bottom: auto; top: 12%; right: auto; left: 0; } } @media (max-height: 375px) and (max-width: 812px){ /*寬812_中間框架位置 #widget-container.middle, #share-widget-container.middle { bottom: 10%; top: auto; }*/ /*手機版定位框架_中間 #widget-container.middle, #share-widget-container.middle{ display: block; box-sizing: border-box; text-rendering: optimizeLegibility; outline: none; zoom: 1; top: auto; right: 0; height: 210px; width: 102px; z-index: 1000200; overflow: hidden; margin-right: 5px; margin-left: 5px; }*/ /*寬812_上方_框架寬高*/ #widget-container.top, #share-widget-container.top{ height: auto; width: 102px; } /*寬812_下方_框架寬高*/ #widget-container.bottom, #share-widget-container.bottom{ height: auto; width: 102px; } /*寬812_上方框架位置*/ #widget-container.top, #share-widget-container.top { bottom: auto; top: 20%; } /*寬812_下方框架位置*/ #widget-container.bottom, #share-widget-container.bottom{ bottom: 10%; top: auto; } /*右下方的more*/ #more-container.widget-more.bottom.right { bottom: 4%; top: auto; right: 0; left: auto; } /*左下方的more*/ #more-container.widget-more.bottom.left { bottom: 4%; top: auto; right: auto; left: 0; } /*右上方的more*/ #more-container.widget-more.top.right { bottom: auto; top: 13%; right: 0; left: auto; } /*左上方的more*/ #more-container.widget-more.top.left { bottom: auto; top: 13%; right: auto; left: 0; } } @media (max-height: 1024px) and (max-width: 768px){ /*寬768_中間框架位置 #widget-container.middle, #share-widget-container.middle { bottom: 20%; top: auto; }*/ /*寬768_中間_框架寬高 #widget-container.middle.share_expand, #share-widget-container.middle.share_expand{ height: 70%; width: 50px; }*/ /*#widget-container.middle, #share-widget-container.middle{ height: 450px; width: 50px; }*/ /*寬768_上方_框架寬高*/ #widget-container.top, #share-widget-container.top{ height: auto; width: 50px; } /*寬768_下方_框架寬高*/ #widget-container.bottom, #share-widget-container.bottom{ height: auto; width: 50px; } /*寬768_上方框架位置*/ #widget-container.top, #share-widget-container.top { bottom: auto; top: 7%; } /*寬768_下方框架位置*/ #widget-container.bottom, #share-widget-container.bottom{ bottom: 9%; top: auto; } /*右下方的more*/ #more-container.widget-more.bottom.right { bottom: 3%; top: auto; right: 0; left: auto; } /*左下方的more*/ #more-container.widget-more.bottom.left { bottom: 3%; top: auto; right: auto; left: 0; } /*右上方的more*/ #more-container.widget-more.top.right { bottom: auto; top: 5%; right: 0; left: auto; } /*左上方的more*/ #more-container.widget-more.top.left { bottom: auto; top: 5%; right: auto; left: 0; } } @media (max-width: 768px){ /*寬736_中間_框架寬高 #widget-container.middle, #share-widget-container.middle{ height: 210px; width: 102px; }*/ /*寬736_中間框架位置 #widget-container.middle, #share-widget-container.middle { bottom: 34%; top: auto; }*/ /*寬768_上方框架位置*/ #widget-container.top, #share-widget-container.top { bottom: auto; top: 11%; } /*寬768_下方框架位置*/ #widget-container.bottom, #share-widget-container.bottom{ bottom: 6%; top: auto; } /*右下方的more*/ #more-container.widget-more.bottom.right { bottom: 3%; top: auto; right: 0; left: auto; } /*左下方的more*/ #more-container.widget-more.bottom.left { bottom: 3%; top: auto; right: auto; left: 0; } /*右上方的more*/ #more-container.widget-more.top.right { bottom: auto; top: 8%; right: 0; left: auto; } /*左上方的more*/ #more-container.widget-more.top.left { bottom: auto; top: 8%; right: auto; left: 0; } } @media (max-height: 414px) and (max-width: 736px){ /*寬736_中間_框架寬高 #widget-container.middle, #share-widget-container.middle{ height: 210px; width: 102px; }*/ /*寬736_中間框架位置 #widget-container.middle, #share-widget-container.middle { bottom: 12%; top: auto; }*/ /*寬736_上方_框架寬高*/ #widget-container.top, #share-widget-container.top{ height: auto; width: 102px; } /*寬736_下方_框架寬高*/ #widget-container.bottom, #share-widget-container.bottom{ height: auto; width: 102px; } /*寬736_上方框架位置*/ #widget-container.top, #share-widget-container.top { bottom: auto; top: 18%; } /*寬736_下方框架位置*/ #widget-container.bottom, #share-widget-container.bottom{ bottom: 9%; top: auto; } /*右下方的more*/ #more-container.widget-more.bottom.right { bottom: 4%; top: auto; right: 0; left: auto; } /*左下方的more*/ #more-container.widget-more.bottom.left { bottom: 4%; top: auto; right: auto; left: 0; } /*右上方的more*/ #more-container.widget-more.top.right { bottom: auto; top: 12%; right: 0; left: auto; } /*左上方的more*/ #more-container.widget-more.top.left { bottom: auto; top: 12%; right: auto; left: 0; } } @media (max-height: 411px) and (max-width: 731px){ /*寬731_上方框架位置*/ #widget-container.top, #share-widget-container.top { bottom: auto; top: 17%; } /*寬731_下方框架位置*/ #widget-container.bottom, #share-widget-container.bottom{ bottom: 9%; top: auto; } /*右下方的more*/ #more-container.widget-more.bottom.right { bottom: 4%; top: auto; right: 0; left: auto; } /*左下方的more*/ #more-container.widget-more.bottom.left { bottom: 4%; top: auto; right: auto; left: 0; } /*右上方的more*/ #more-container.widget-more.top.right { bottom: auto; top: 12%; right: 0; left: auto; } /*左上方的more*/ #more-container.widget-more.top.left { bottom: auto; top: 12%; right: auto; left: 0; } } @media (max-height: 540px) and (max-width: 720px){ /*寬720_中間框架位置 #widget-container.middle, #share-widget-container.middle { bottom: 22%; top: auto; }*/ /*寬720_中間_框架寬高 #widget-container.middle, #share-widget-container.middle{ height: 210px; width: 102px; }*/ /*寬720_上方框架位置*/ #widget-container.top, #share-widget-container.top { bottom: auto; top: 13%; } /*寬720_下方框架位置*/ #widget-container.bottom, #share-widget-container.bottom{ bottom: 8%; top: auto; } /*右下方的more*/ #more-container.widget-more.bottom.right { bottom: 4%; top: auto; right: 0; left: auto; } /*左下方的more*/ #more-container.widget-more.bottom.left { bottom: 4%; top: auto; right: auto; left: 0; } /*右上方的more*/ #more-container.widget-more.top.right { bottom: auto; top: 9%; right: 0; left: auto; } /*左上方的more*/ #more-container.widget-more.top.left { bottom: auto; top: 9%; right: auto; left: 0; } } @media (max-height: 375px) and (max-width: 667px){ /*寬667_中間_框架位置 #widget-container.middle, #share-widget-container.middle { bottom: 10%; top: auto; }*/ /*寬667_中間_框架寬高 #widget-container.middle, #share-widget-container.middle{ height: 210px; width: 102px; }*/ /*寬667_上方_框架寬高*/ #widget-container.top, #share-widget-container.top{ height: auto; width: 102px; } /*寬667_下方_框架寬高*/ #widget-container.bottom, #share-widget-container.bottom{ height: auto; width: 102px; } /*寬667_上方框架位置*/ #widget-container.top, #share-widget-container.top { bottom: auto; top: 19%; } /*寬667_下方框架位置*/ #widget-container.bottom, #share-widget-container.bottom{ bottom: 10%; top: auto; } /*右下方的more*/ #more-container.widget-more.bottom.right { bottom: 5%; top: auto; right: 0; left: auto; } /*左下方的more*/ #more-container.widget-more.bottom.left { bottom: 5%; top: auto; right: auto; left: 0; } /*右上方的more*/ #more-container.widget-more.top.right { bottom: auto; top: 13%; right: 0; left: auto; } /*左上方的more*/ #more-container.widget-more.top.left { bottom: auto; top: 13%; right: auto; left: 0; } } @media (max-height: 280px) and (max-width: 653px){ /*寬653_中間框架位置 #widget-container.middle, #share-widget-container.middle { bottom: 4%; top: auto; }*/ /*寬653_中間_框架寬高 #widget-container.middle, #share-widget-container.middle{ height: 210px; width: 102px; }*/ /*寬653_上方_框架寬高*/ #widget-container.top, #share-widget-container.top{ height: auto; width: 150px; } /*寬653_下方_框架寬高*/ #widget-container.bottom, #share-widget-container.bottom{ height: auto; width: 150px; } /*寬653_上方框架位置*/ #widget-container.top, #share-widget-container.top { bottom: auto; top: 25%; } /*寬653_下方框架位置*/ #widget-container.bottom, #share-widget-container.bottom{ bottom: 11%; top: auto; } /*右下方的more*/ #more-container.widget-more.bottom.right { bottom: 4%; top: auto; right: 0; left: auto; } /*左下方的more*/ #more-container.widget-more.bottom.left { bottom: 4%; top: auto; right: auto; left: 0; } /*右上方的more*/ #more-container.widget-more.top.right { bottom: auto; top: 18%; right: 0; left: auto; } /*左上方的more*/ #more-container.widget-more.top.left { bottom: auto; top: 18%; right: auto; left: 0; } } @media (max-height: 360px) and (max-width: 640px){ /*寬640_中間框架位置 #widget-container.middle, #share-widget-container.middle{ bottom: 10%; top: auto; }*/ /*寬640_中間_框架寬高 #widget-container.middle, #share-widget-container.middle{ height: 210px; width: 102px; }*/ /*寬640_上方框架位置*/ #widget-container.top, #share-widget-container.top { bottom: auto; top: 20%; } /*寬640_下方框架位置*/ #widget-container.bottom, #share-widget-container.bottom{ bottom: 9%; top: auto; } /*右下方的more*/ #more-container.widget-more.bottom.right { bottom: 4%; top: auto; right: 0; left: auto; } /*左下方的more*/ #more-container.widget-more.bottom.left { bottom: 4%; top: auto; right: auto; left: 0; } /*右上方的more*/ #more-container.widget-more.top.right { bottom: auto; top: 14%; right: 0; left: auto; } /*左上方的more*/ #more-container.widget-more.top.left { bottom: auto; top: 14%; right: auto; left: 0; } } @media (max-height: 320px) and (max-width: 568px){ /*寬568_中間框架位置 #widget-container.middle, #share-widget-container.middle{ bottom: 8%; top: auto; }*/ /*寬568_中間_框架寬高 #widget-container.middle, #share-widget-container.middle{ height: 210px; width: 102px; }*/ /*寬568_下方_框架寬高*/ #widget-container.bottom, #share-widget-container.bottom{ height: auto; width: 102px; } /*寬568_上方框架位置*/ #widget-container.top, #share-widget-container.top { bottom: auto; top: 23%; } /*寬568_下方框架位置*/ #widget-container.bottom, #share-widget-container.bottom{ bottom: 9%; top: auto; } /*右下方的more*/ #more-container.widget-more.bottom.right { bottom: 3%; top: auto; right: 0; left: auto; } /*左下方的more*/ #more-container.widget-more.bottom.left { bottom: 3%; top: auto; right: auto; left: 0; } /*右上方的more*/ #more-container.widget-more.top.right { bottom: auto; top: 16%; right: 0; left: auto; } /*左上方的more*/ #more-container.widget-more.top.left { bottom: auto; top: 16%; right: auto; left: 0; } } @media (max-height: 720px) and (max-width: 540px){ /*寬540_中間框架位置 #widget-container.middle, #share-widget-container.middle { bottom: 30%; top: auto; }*/ /*寬540_中間_框架寬高 #widget-container.middle, #share-widget-container.middle{ height: 210px; width: 102px; }*/ /*寬540_上方_框架寬高*/ #widget-container.top, #share-widget-container.top{ height: auto; width: 50px; } /*寬540_下方_框架寬高*/ #widget-container.bottom, #share-widget-container.bottom{ height: auto; width: 50px; } /*寬540_上方框架位置*/ #widget-container.top, #share-widget-container.top { bottom: auto; top: 10%; } /*寬540_下方框架位置*/ #widget-container.bottom, #share-widget-container.bottom{ bottom: 8%; top: auto; } /*右下方的more*/ #more-container.widget-more.bottom.right { bottom: 5%; top: auto; right: 0; left: auto; } /*左下方的more*/ #more-container.widget-more.bottom.left { bottom: 5%; top: auto; right: auto; left: 0; } /*右上方的more*/ #more-container.widget-more.top.right { bottom: auto; top: 7%; right: 0; left: auto; } /*左上方的more*/ #more-container.widget-more.top.left { bottom: auto; top: 7%; right: auto; left: 0; } } @media (max-height: 736px) and (max-width: 414px){ /*寬414_中間框架位置 #widget-container.middle, #share-widget-container.middle { bottom: 35%; top: auto; }*/ /*寬414_中間_框架寬高 #widget-container.middle, #share-widget-container.middle{ height: 210px; width: 102px; }*/ /*寬414_上方_框架寬高*/ #widget-container.top, #share-widget-container.top{ height: auto; width: 50px; } /*寬414_下方_框架寬高*/ #widget-container.bottom, #share-widget-container.bottom{ height: auto; width: 50px; } /*寬414_上方框架位置*/ #widget-container.top, #share-widget-container.top { bottom: auto; top: 10%; } /*寬414_下方框架位置*/ #widget-container.bottom, #share-widget-container.bottom{ bottom: 10%; top: auto; } /*右下方的more*/ #more-container.widget-more.bottom.right { bottom: 7%; top: auto; right: 0; left: auto; } /*左下方的more*/ #more-container.widget-more.bottom.left { bottom: 7%; top: auto; right: auto; left: 0; } /*右上方的more*/ #more-container.widget-more.top.right { bottom: auto; top: 7%; right: 0; left: auto; } /*左上方的more*/ #more-container.widget-more.top.left { bottom: auto; top: 7%; right: auto; left: 0; } } @media (max-height: 823px) and (max-width: 411px){ /*寬411_中間框架位置 #widget-container.middle, #share-widget-container.middle { bottom: 35%; top: auto; }*/ /*寬411_中間_框架寬高 #widget-container.middle, #share-widget-container.middle{ height: 210px; width: 102px; }*/ /*寬411_上方_框架寬高*/ #widget-container.top, #share-widget-container.top{ height: auto; width: 50px; } /*寬411_下方_框架寬高*/ #widget-container.bottom, #share-widget-container.bottom{ height: auto; width: 50px; } /*寬411_上方框架位置*/ #widget-container.top, #share-widget-container.top { bottom: auto; top: 9%; } /*寬411_下方框架位置*/ #widget-container.bottom, #share-widget-container.bottom{ bottom: 8%; top: auto; } /*右下方的more*/ #more-container.widget-more.bottom.right { bottom: 5%; top: auto; right: 0; left: auto; } /*左下方的more*/ #more-container.widget-more.bottom.left { bottom: 5%; top: auto; right: auto; left: 0; } /*右上方的more*/ #more-container.widget-more.top.right { bottom: auto; top: 6%; right: 0; left: auto; } /*左上方的more*/ #more-container.widget-more.top.left { bottom: auto; top: 6%; right: auto; left: 0; } } @media (max-height: 731px) and (max-width: 411px){ /*寬411_中間框架位置 #widget-container.middle, #share-widget-container.middle{ bottom: 30%; top: auto; }*/ /*寬411_中間_框架寬高 #widget-container.middle, #share-widget-container.middle{ height: 210px; width: 102px; }*/ /*寬411_上方_框架寬高*/ #widget-container.top, #share-widget-container.top{ height: auto; width: 50px; } /*寬411_下方_框架寬高*/ #widget-container.bottom, #share-widget-container.bottom{ height: auto; width: 50px; } /*寬411_上方框架位置*/ #widget-container.top, #share-widget-container.top { bottom: auto; top: 10%; } /*寬411_下方框架位置*/ #widget-container.bottom, #share-widget-container.bottom{ bottom: 9%; top: auto; } /*右下方的more*/ #more-container.widget-more.bottom.right { bottom: 6%; top: auto; right: 0; left: auto; } /*左下方的more*/ #more-container.widget-more.bottom.left { bottom: 6%; top: auto; right: auto; left: 0; } /*右上方的more*/ #more-container.widget-more.top.right { bottom: auto; top: 7%; right: 0; left: auto; } /*左上方的more*/ #more-container.widget-more.top.left { bottom: auto; top: 7%; right: auto; left: 0; } } @media (max-height: 812px) and (max-width: 375px){ /*寬375_中間框架位置 #widget-container.middle, #share-widget-container.middle { bottom: 40%; top: auto; }*/ /*寬375_中間_框架寬高 #widget-container.middle, #share-widget-container.middle{ height: 210px; width: 102px; }*/ /*寬375_上方框架位置*/ #widget-container.top, #share-widget-container.top { bottom: auto; top: 9%; } /*寬375_下方框架位置*/ #widget-container.bottom, #share-widget-container.bottom{ bottom: 8%; top: auto; } /*右下方的more*/ #more-container.widget-more.bottom.right { bottom: 5%; top: auto; right: 0; left: auto; } /*左下方的more*/ #more-container.widget-more.bottom.left { bottom: 5%; top: auto; right: auto; left: 0; } /*右上方的more*/ #more-container.widget-more.top.right { bottom: auto; top: 6%; right: 0; left: auto; } /*左上方的more*/ #more-container.widget-more.top.left { bottom: auto; top: 6%; right: auto; left: 0; } } @media (max-height: 667px) and (max-width: 375px){ /*寬375_中間框架位置 #widget-container.middle, #share-widget-container.middle { bottom: 25%; top: auto; }*/ /*寬375_中間_框架寬高 #widget-container.middle, #share-widget-container.middle{ height: 210px; width: 102px; }*/ /*寬375_上方框架位置*/ #widget-container.top, #share-widget-container.top { bottom: auto; top: 11%; } /*寬375_下方框架位置*/ #widget-container.bottom, #share-widget-container.bottom{ bottom: 9%; top: auto; } /*右下方的more*/ #more-container.widget-more.bottom.right { bottom: 6%; top: auto; right: 0; left: auto; } /*左下方的more*/ #more-container.widget-more.bottom.left { bottom: 6%; top: auto; right: auto; left: 0; } /*右上方的more*/ #more-container.widget-more.top.right { bottom: auto; top: 8%; right: 0; left: auto; } /*左上方的more*/ #more-container.widget-more.top.left { bottom: auto; top: 8%; right: auto; left: 0; } } @media (max-height: 640px) and (max-width: 360px){ /*寬360_中間_框架寬高 #widget-container.middle, #share-widget-container.middle{ height: 210px; width: 102px; }*/ /*寬360_中間框架位置 #widget-container.middle, #share-widget-container.middle { bottom: 28%; top: auto; }*/ /*寬360_上方_框架寬高*/ #widget-container.top, #share-widget-container.top{ height: auto; width: 50px; } /*寬360_下方_框架寬高*/ #widget-container.bottom, #share-widget-container.bottom{ height: auto; width: 50px; } /*寬360_上方框架位置*/ #widget-container.top, #share-widget-container.top { bottom: auto; top: 11%; } /*寬360_下方框架位置*/ #widget-container.bottom, #share-widget-container.bottom{ bottom: 11%; top: auto; } /*右下方的more*/ #more-container.widget-more.bottom.right { bottom: 7%; top: auto; right: 0; left: auto; } /*左下方的more*/ #more-container.widget-more.bottom.left { bottom: 7%; top: auto; right: auto; left: 0; } /*右上方的more*/ #more-container.widget-more.top.right { bottom: auto; top: 8%; right: 0; left: auto; } /*左上方的more*/ #more-container.widget-more.top.left { bottom: auto; top: 8%; right: auto; left: 0; } } @media (max-height: 568px) and (max-width: 320px){ /*寬320_中間_框架寬高 #widget-container.middle, #share-widget-container.middle { height: 210px; width: 102px; }*/ /*寬320_中間框架位置 #widget-container.middle, #share-widget-container.middle { bottom: 24%; top: auto; }*/ /*寬320_上方_框架寬高*/ #widget-container.top, #share-widget-container.top{ height: auto; width: 50px; } /*寬320_下方_框架寬高*/ #widget-container.bottom, #share-widget-container.bottom{ height: auto; width: 50px; } /*寬320_上方框架位置*/ #widget-container.top, #share-widget-container.top { bottom: auto; top: 13%; } /*寬320_下方框架位置*/ #widget-container.bottom, #share-widget-container.bottom{ bottom: 9%; top: auto; } /*右下方的more*/ #more-container.widget-more.bottom.right { bottom: 5%; top: auto; right: 0; left: auto; } /*左下方的more*/ #more-container.widget-more.bottom.left { bottom: 5%; top: auto; right: auto; left: 0; } /*右上方的more*/ #more-container.widget-more.top.right { bottom: auto; top: 9%; right: 0; left: auto; } /*左上方的more*/ #more-container.widget-more.top.left { bottom: auto; top: 9%; right: auto; left: 0; } } @media (max-height: 653px) and (max-width: 280px){ /*寬280_中間框架位置 #widget-container.middle, #share-widget-container.middle { bottom: 32%; top: auto; }*/ /*寬280_中間_框架寬高 #widget-container.middle, #share-widget-container.middle{ height: 210px; width: 102px; }*/ /*寬280_上方框架位置*/ #widget-container.top, #share-widget-container.top { bottom: auto; top: 11%; } /*寬280_下方框架位置*/ #widget-container.bottom, #share-widget-container.bottom{ bottom: 8%; top: auto; } /*右下方的more*/ #more-container.widget-more.bottom.right { bottom: 5%; top: auto; right: 0; left: auto; } /*左下方的more*/ #more-container.widget-more.bottom.left { bottom: 5%; top: auto; right: auto; left: 0; } /*右上方的more*/ #more-container.widget-more.top.right { bottom: auto; top: 8%; right: 0; left: auto; } /*左上方的more*/ #more-container.widget-more.top.left { bottom: auto; top: 8%; right: auto; left: 0; } }