diff options
Diffstat (limited to 'plugins/wordpress-mobile-pack/frontend/sections/notification-banner/lib/noty.css')
-rwxr-xr-x | plugins/wordpress-mobile-pack/frontend/sections/notification-banner/lib/noty.css | 374 |
1 files changed, 374 insertions, 0 deletions
diff --git a/plugins/wordpress-mobile-pack/frontend/sections/notification-banner/lib/noty.css b/plugins/wordpress-mobile-pack/frontend/sections/notification-banner/lib/noty.css new file mode 100755 index 00000000..8648557d --- /dev/null +++ b/plugins/wordpress-mobile-pack/frontend/sections/notification-banner/lib/noty.css @@ -0,0 +1,374 @@ +.noty_layout_mixin, +#noty_layout__top, +#noty_layout__topLeft, +#noty_layout__topCenter, +#noty_layout__topRight, +#noty_layout__bottom, +#noty_layout__bottomLeft, +#noty_layout__bottomCenter, +#noty_layout__bottomRight, +#noty_layout__center, +#noty_layout__centerLeft, +#noty_layout__centerRight { + position: fixed; + margin: 0; + padding: 0; + z-index: 9999999; + -webkit-transform: translateZ(0) scale(1, 1); + transform: translateZ(0) scale(1, 1); + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + -webkit-font-smoothing: subpixel-antialiased; + filter: blur(0); + -webkit-filter: blur(0); + max-width: 100%; +} + +#noty_layout__top { + top: 0; + left: 5%; + width: 90%; +} + +#noty_layout__topLeft { + top: 20px; + left: 20px; + width: 325px; +} + +#noty_layout__topCenter { + top: 0%; + left: 50%; + width: 100%; + -webkit-transform: translate(-webkit-calc(-50% - 0.5px)) translateZ(0) + scale(1, 1); + transform: translate(calc(-50% - 0.5px)) translateZ(0) scale(1, 1); +} + +#noty_layout__topRight { + top: 20px; + right: 20px; + width: 325px; +} + +#noty_layout__bottom { + bottom: 0; + left: 5%; + width: 90%; +} + +#noty_layout__bottomLeft { + bottom: 20px; + left: 20px; + width: 325px; +} + +#noty_layout__bottomCenter { + bottom: 5%; + left: 50%; + width: 325px; + -webkit-transform: translate(-webkit-calc(-50% - 0.5px)) translateZ(0) + scale(1, 1); + transform: translate(calc(-50% - 0.5px)) translateZ(0) scale(1, 1); +} + +#noty_layout__bottomRight { + bottom: 20px; + right: 20px; + width: 325px; +} + +#noty_layout__center { + top: 50%; + left: 50%; + width: 325px; + -webkit-transform: translate( + -webkit-calc(-50% - 0.5px), + -webkit-calc(-50% - 0.5px) + ) + translateZ(0) scale(1, 1); + transform: translate(calc(-50% - 0.5px), calc(-50% - 0.5px)) translateZ(0) + scale(1, 1); +} + +#noty_layout__centerLeft { + top: 50%; + left: 20px; + width: 325px; + -webkit-transform: translate(0, -webkit-calc(-50% - 0.5px)) translateZ(0) + scale(1, 1); + transform: translate(0, calc(-50% - 0.5px)) translateZ(0) scale(1, 1); +} + +#noty_layout__centerRight { + top: 50%; + right: 20px; + width: 325px; + -webkit-transform: translate(0, -webkit-calc(-50% - 0.5px)) translateZ(0) + scale(1, 1); + transform: translate(0, calc(-50% - 0.5px)) translateZ(0) scale(1, 1); +} + +.noty_progressbar { + display: none; +} + +.noty_has_timeout.noty_has_progressbar .noty_progressbar { + display: block; + position: absolute; + left: 0; + bottom: 0; + height: 3px; + width: 100%; + background-color: #646464; + opacity: 0.2; + filter: alpha(opacity=10); +} + +.noty_bar { + -webkit-backface-visibility: hidden; + -webkit-transform: translate(0, 0) translateZ(0) scale(1, 1); + -ms-transform: translate(0, 0) scale(1, 1); + transform: translate(0, 0) scale(1, 1); + -webkit-font-smoothing: subpixel-antialiased; + overflow: hidden; +} + +.noty_effects_open { + opacity: 0; + -webkit-transform: translate(50%); + -ms-transform: translate(50%); + transform: translate(50%); + -webkit-animation: noty_anim_in 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); + animation: noty_anim_in 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; +} + +.noty_effects_close { + -webkit-animation: noty_anim_out 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); + animation: noty_anim_out 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; +} + +.noty_fix_effects_height { + -webkit-animation: noty_anim_height 75ms ease-out; + animation: noty_anim_height 75ms ease-out; +} + +.noty_close_with_click { + cursor: pointer; +} + +.noty_close_button { + position: absolute; + top: 30px; + right: 2px; + font-weight: bold; + width: 20px; + height: 20px; + text-align: center; + line-height: 20px; + background-color: rgba(0, 0, 0, 0.05); + border-radius: 2px; + cursor: pointer; + -webkit-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; +} + +.noty_close_button:hover { + background-color: rgba(0, 0, 0, 0.1); +} + +.noty_modal { + position: fixed; + width: 100%; + height: 100%; + background-color: #000; + z-index: 10000; + opacity: 0.3; + left: 0; + top: 0; +} + +.noty_modal.noty_modal_open { + opacity: 0; + -webkit-animation: noty_modal_in 0.3s ease-out; + animation: noty_modal_in 0.3s ease-out; +} + +.noty_modal.noty_modal_close { + -webkit-animation: noty_modal_out 0.3s ease-out; + animation: noty_modal_out 0.3s ease-out; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; +} + +@-webkit-keyframes noty_modal_in { + 100% { + opacity: 0.3; + } +} + +@keyframes noty_modal_in { + 100% { + opacity: 0.3; + } +} + +@-webkit-keyframes noty_modal_out { + 100% { + opacity: 0; + } +} + +@keyframes noty_modal_out { + 100% { + opacity: 0; + } +} + +@keyframes noty_modal_out { + 100% { + opacity: 0; + } +} + +@-webkit-keyframes noty_anim_in { + 100% { + -webkit-transform: translate(0); + transform: translate(0); + opacity: 1; + } +} + +@keyframes noty_anim_in { + 100% { + -webkit-transform: translate(0); + transform: translate(0); + opacity: 1; + } +} + +@-webkit-keyframes noty_anim_out { + 100% { + -webkit-transform: translate(50%); + transform: translate(50%); + opacity: 0; + } +} + +@keyframes noty_anim_out { + 100% { + -webkit-transform: translate(50%); + transform: translate(50%); + opacity: 0; + } +} + +@-webkit-keyframes noty_anim_height { + 100% { + height: 0; + } +} + +@keyframes noty_anim_height { + 100% { + height: 0; + } +} + +.noty_theme__relax.noty_bar { + overflow: hidden; + position: relative; +} +.noty_theme__relax.noty_bar .noty_body { + padding: 10px; + padding-top: 20px; + margin: 0 auto; + min-height: 55px; +} +.noty_theme__relax.noty_bar .noty_buttons { + /* border-top: 1px solid #e7e7e7; */ + float: right; + padding: 5px 10px; +} + +.noty_theme__relax.noty_type__alert, +.noty_theme__relax.noty_type__notification { + border-bottom: 1px solid #a4a4a4; + background-color: #f2f2f2; + color: black; + font-size: 1rem; +} + +.noty_theme__relax.noty_type__warning { + background-color: #ffeaa8; + border: 1px solid #ffc237; + color: #826200; +} +.noty_theme__relax.noty_type__warning .noty_buttons { + border-color: #dfaa30; +} + +.noty_theme__relax.noty_type__error { + background-color: #ff8181; + border: 1px solid #e25353; + color: #fff; +} +.noty_theme__relax.noty_type__error .noty_buttons { + border-color: darkred; +} + +.noty_theme__relax.noty_type__info, +.noty_theme__relax.noty_type__information { + background-color: #78c5e7; + border: 1px solid #3badd6; + color: #fff; +} +.noty_theme__relax.noty_type__info .noty_buttons, +.noty_theme__relax.noty_type__information .noty_buttons { + border-color: #0b90c4; +} + +.noty_theme__relax.noty_type__success { + background-color: #bcf5bc; + border: 1px solid #7cdd77; + color: darkgreen; +} +.noty_theme__relax.noty_type__success .noty_buttons { + border-color: #50c24e; +} + +/* Custom styling added for the WP Mobile Pack banner */ +.noty_theme__relax.noty_bar .noty_body img { + max-width: 60px; + height: auto; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; + overflow: hidden; + padding: 1px; + float: left; + margin: 0 5px 5px 5px; +} + +.noty_theme__relax.noty_bar .noty_body a { + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + float: right; + padding: 0.5rem; + background: #2f2f2f; + color: white; + margin-right: 1.7rem; +} + +.noty_theme__relax.noty_bar .noty_body p { + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 1rem; + float: left; +} + +.noty_theme__relax.noty_bar .noty_body span { + font-size: 0.85rem; +} |