diff --git a/openlp/core/display/html/display.css b/openlp/core/display/html/display.css index 02c4641fa..0e3d0dfa3 100644 --- a/openlp/core/display/html/display.css +++ b/openlp/core/display/html/display.css @@ -19,51 +19,65 @@ left: 0; z-index: 11; width: 100%; - height: 0%; - min-height: 0%; - overflow: hidden; + height: 0; + min-height: 0; + overflow: hidden; + transform: translate(0,0); + transition: min-height 1s ease-out .5s; display: flex; - flex-direction: row; + flex-direction: row; + align-items: center; + align-content: center; +} + +.show-bg { + /* height: auto; */ + min-height: 25%; + transition: min-height 1s ease-in .5s; +} + +.middle { align-items: center; } -.bg-default.show { - height: auto; - min-height: 25%; +.alert-container { + position: absolute; + display: flex; + flex-direction: row; + height: 100vh; + width: 100vw; } -.bg-default.hide { - height: 0; - min-height: 0; +.top { + align-items: flex-start; } -.bg-default.middle { - top: 50%; - left: 50%; - margin-right: -50%; - transform: translate(-50%, -50%); - bottom: initial; +.bottom { + align-items: flex-end; } -.bg-default.top { - top: 0; - bottom: initial; -} - -.bg-default.bottom { - top: initial; - bottom: 0; -} - -/* ALERT BACKGROUND STYLING */ -#alert { - z-index: 12; - position: relative; - top: 50%; - transform: translateY(-50%); +/* ALERT TEXT STYLING */ +#alert { + z-index: 100; overflow: visible; white-space: nowrap; color: #ffffff; + font-size: 40pt; + padding: 0; + margin: 0; opacity: 0; - transform: translateX(110%); -} \ No newline at end of file + transform: translateX(120%); + transition: opacity .5s linear; +} + +#alert.hide-text { + opacity: 0; +} + +#alert.show-text { + transform: none; + transition: none; + animation: none; + padding: auto 5px; + opacity: 1; +} diff --git a/openlp/core/display/html/display.html b/openlp/core/display/html/display.html index ff4ec4ebb..2367b6fd2 100644 --- a/openlp/core/display/html/display.html +++ b/openlp/core/display/html/display.html @@ -34,11 +34,13 @@
+Testing alerts