rotate-device/prod/css/rotateDevice.min.css

Plugin rotateDevice has been made to ask the users to rotate device/expand browser window to enjoy your site/app fully!

.desktop-notification-wrapper,.touch-device-notification-wrapper{-webkit-box-sizing:border-box;box-sizing:border-box;height:100vh;width:100%;position:fixed;display:none;background-color:#fff;padding:30px 10px;z-index:1111111111111111}.desktop-notification-wrapper.show,.touch-device-notification-wrapper.show{display:block}.desktop-notification-block,.touch-device-notification-block{height:100%;width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.desktop-notification-main-message,.touch-device-notification-main-message{font-family:Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:500;text-transform:uppercase;font-size:28px;line-height:1.3;text-align:center;-webkit-margin-before:0;margin-block-start:0;-webkit-margin-after:0;margin-block-end:0}.desktop-notification-img-wrapper,.touch-device-notification-img-wrapper{margin:20px 0}.desktop-notification-img-wrapper img,.desktop-notification-img-wrapper svg,.touch-device-notification-img-wrapper img,.touch-device-notification-img-wrapper svg{width:100%}.desktop-notification-extra-message,.touch-device-notification-extra-message{font-family:Arial,Helvetica Neue,Helvetica,sans-serif;font-size:22px;line-height:1.2;text-align:center;-webkit-margin-before:0;margin-block-start:0;-webkit-margin-after:0;margin-block-end:0}.desktop-default-icon{-webkit-animation:desktopIconAnimation 1.5s .6s infinite forwards;animation:desktopIconAnimation 1.5s .6s infinite forwards;max-height:50%}.desktop-default-icon svg{max-height:100%}@-webkit-keyframes desktopIconAnimation{50%{-webkit-transform:scale(1.2);transform:scale(1.2)}90%{-webkit-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes desktopIconAnimation{50%{-webkit-transform:scale(1.2);transform:scale(1.2)}90%{-webkit-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes portraitIconAnimation{85%{-webkit-transform:rotate(90deg);transform:rotate(90deg)}to{-webkit-transform:rotate(90deg);transform:rotate(90deg)}}@keyframes portraitIconAnimation{85%{-webkit-transform:rotate(90deg);transform:rotate(90deg)}to{-webkit-transform:rotate(90deg);transform:rotate(90deg)}}@-webkit-keyframes landscapeIconAnimation{85%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@keyframes landscapeIconAnimation{85%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@media (max-width:725px){.desktop-notification-main-message,.touch-device-notification-main-message{font-size:22px}.desktop-notification-extra-message,.touch-device-notification-extra-message{font-size:16px}}@media (hover:hover) and (pointer:fine) and (max-width:300px){.desktop-notification-main-message,.touch-device-notification-main-message{font-size:16px}.desktop-notification-extra-message,.touch-device-notification-extra-message{font-size:14px}}@media (hover:none) and (pointer:coarse) and (orientation:landscape){.desktop-notification-main-message,.touch-device-notification-main-message{font-size:28px}.desktop-notification-extra-message,.touch-device-notification-extra-message{font-size:22px}}@media (hover:none) and (pointer:coarse) and (orientation:landscape) and (max-width:980px){.desktop-notification-main-message,.touch-device-notification-main-message{font-size:24px}.desktop-notification-extra-message,.touch-device-notification-extra-message{font-size:18px}}@media (orientation:portrait){.touch-device-default-icon{max-width:190px;-webkit-animation:portraitIconAnimation 1.7s .6s infinite forwards;animation:portraitIconAnimation 1.7s .6s infinite forwards}}@media (orientation:portrait) and (max-width:725px){.touch-device-default-icon{max-width:135px}}@media (orientation:landscape){.touch-device-default-icon{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);-webkit-animation:landscapeIconAnimation 1.7s .6s infinite forwards;animation:landscapeIconAnimation 1.7s .6s infinite forwards}.touch-device-default-icon svg{max-width:220px}}@media (orientation:landscape) and (max-width:980px){.touch-device-default-icon svg{max-width:100px}}