Merge pull request #7362 from crh0716/827610

Bug 827610 - Modify banner style to have variable size

apps/clock/index.html

@@ -10,6 +10,7 @@
     <!-- Shared styles -->
     <link rel="stylesheet" type="text/css" href="shared/style/headers.css">
     <link rel="stylesheet" type="text/css" href="shared/style/switches.css">
+    <link rel="stylesheet" type="text/css" href="shared/style/status.css">
 
     <!-- Shared sounds -->
     <link rel="resources" type="directory" href="shared/resources/media/alarms/">
@@ -63,11 +64,11 @@
           <a id="alarm-new" href="#alarm" class="right button plus"></a>
           <ul id="alarms" class="tableView"></ul>
         </div>
-        <div id="banner-countdown" class="banner">
+        <section id="banner-countdown" role="status">
           <p> <!-- this will be replaced dynamically -->
             The alarm is set for <strong>8 hours</strong> and <strong>45 minutes</strong> from now.
           </p>
-        </div>
+        </section>
       </div>
 
       <div id="stopwatch-view" class="active view" hidden="true">

apps/clock/style/clock.css

@@ -452,63 +452,22 @@ html, body {
 #minutehandCentralPoint { /* dark-gray central point*/
   stroke-width: 0rem; 
 }
-/* from building blocks, core.css - [role=dialog]*/
-.banner {
-  position: absolute;
-  background: orange;
-  width: 100%;
-  height: 8.13rem;
-  bottom: 0;
-  vertical-align: middle;
-  text-align: center;
-  background-attachment: scroll, scroll;
-  background-clip: border-box, border-box;
-  background-color: transparent;
-  background-image: url("images/pattern.png"), url("images/gradient.png");
-  background-origin: padding-box, padding-box;
-  background-position: left top, left top;
-  background-repeat: repeat, no-repeat;
-  background-size: auto auto, 100% 100%;
-  font-family: "MozTT",Sans-serif;
+
+/* banner*/
+#banner-countdown {
   z-index: -1;
   opacity: 0;
   -moz-transition: all 600ms ease;
 }
-.banner.visible {
+#banner-countdown.visible {
   z-index: 1;
   opacity: 1;
   -moz-transition: all 600ms ease;
 }
-.banner:before {
-  content: "";
-  display: inline-block;
-  height: 100%;
-  vertical-align: middle;
-  width: 1px;
-}
-.banner:after {
-  content: "";
-  display: inline-block;
-  height: 100%;
-  vertical-align: middle;
-  width: 1px;
-}
-.banner > p {
-  display: inline-block;
-  font-size: 1.56rem;
-  line-height: 2.34rem;
-  max-width: 75%;
-  vertical-align: middle;
-  white-space: normal;
-  color: #FFFFFF;
-  font-family: "MozTT",Sans-serif;
-}
-.banner > p > strong {
-  color: #0995B0;
-  font-weight: normal;
-  text-transform: uppercase;
+#banner-countdown > p > strong {
   white-space: nowrap;
 }
+
 /* localization */
 body.hidden *[data-l10n-id] {
   visibility: hidden;

apps/homescreen/everything.me/css/common.css

@@ -16,7 +16,7 @@
     bottom: 75px;
 }
 
-#evmeContainer * {
+#evmeContainer *:not([role]) {
     margin: 0;
     padding: 0;
 }

apps/homescreen/everything.me/modules/Banner/Banner.css

@@ -1,57 +1,13 @@
-/* from building blocks, core.css - [role=dialog]*/
-#evmeContainer .banner {
-  position: absolute;
-  background: orange;
-  width: 100%;
-  height: 8.13rem;
-  bottom: 0;
-  vertical-align: middle;
-  text-align: center;
-  background-attachment: scroll, scroll;
-  background-clip: border-box, border-box;
-  background-color: transparent;
-  background-image: url("/everything.me/images/shared/pattern.png"), url("/everything.me/images/shared/gradient.png");
-  background-origin: padding-box, padding-box;
-  background-position: left top, left top;
-  background-repeat: repeat, no-repeat;
-  background-size: auto auto, 100% 100%;
-  font-family: "MozTT",Sans-serif;
-  -moz-transition: all 600ms ease;
+#evmeBanner {
   z-index: -1;
   opacity: 0;
+  -moz-transition: all 600ms ease;
 }
-#evmeContainer .banner.visible {
+#evmeBanner.visible {
   z-index: 10001;
   opacity: 1;
   -moz-transition: all 600ms ease;
 }
-#evmeContainer .banner:before {
-  content: "";
-  display: inline-block;
-  height: 100%;
-  vertical-align: middle;
-  width: 1px;
-}
-#evmeContainer .banner:after {
-  content: "";
-  display: inline-block;
-  height: 100%;
-  vertical-align: middle;
-  width: 1px;
-}
-#evmeContainer .banner > p {
-  display: inline-block;
-  font-size: 1.56rem;
-  line-height: 2.34rem;
-  max-width: 75%;
-  vertical-align: middle;
-  white-space: normal;
-  color: #FFFFFF;
-  font-family: "MozTT",Sans-serif;
-}
-#evmeContainer .banner > p > strong {
-  color: #0995B0;
-  font-weight: normal;
-  text-transform: uppercase;
+#evmeBanner > p > strong {
   white-space: nowrap;
-}
+}

apps/homescreen/index.html

@@ -20,6 +20,7 @@
     <link rel="stylesheet" type="text/css" href="shared/style/buttons.css">
     <link rel="stylesheet" type="text/css" href="shared/style/headers.css">
     <link rel="stylesheet" type="text/css" href="shared/style/confirm.css">
+    <link rel="stylesheet" type="text/css" href="shared/style/status.css">
     <link rel="stylesheet" type="text/css" href="style/request.css">
 
     <!-- Specific code -->
@@ -117,7 +118,7 @@ <h1 id="search-title"></h1>
                 </div>
                 <div id="shortcuts-loading"></div>
             </div>
-            <div id="evmeBanner" class="banner"></div>
+            <section id="evmeBanner" role="status"></section>
           </div>
       </div>
       <div id="landing-page" data-current-page="true">

shared/style/status.css

@@ -13,19 +13,10 @@ section[role="status"] {
   white-space: nowrap;
   font-family: "MozTT", Sans-serif;
   color: #fff;
-  height: 8rem;
-  padding: 0;
+  padding: 1rem 0 0.6rem;
   text-align: center;
 }
 
-section[role="status"]:after {
-  content: "";
-  display: inline-block;
-  vertical-align: middle;
-  width: 1px;
-  height: 100%;
-}
-
 section[role="status"] p {
   display: inline-block;
   vertical-align: middle;