ntp4: notification area

chrome/browser/resources/ntp4/new_tab.css

 /* Copyright (c) 2011 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  *
  * This is the stylesheet used by the touch-enabled new tab page
  */
 
 html {
   font-family: segoe ui, arial, helvetica, sans-serif;
   font-size: 14px;
   /* It's necessary to put this here instead of in body in order to get the
      background-size of 100% to work properly */
   height: 100%;
   overflow: hidden;
 }
 
 body {
   background-size: auto 100%;
   margin: 0;
+  text-align: center;
   /* Don't highlight links when they're tapped.  Safari has bugs here that
      show up as flicker when dragging in some situations */
   -webkit-tap-highlight-color: transparent;
   /* Don't allow selecting text - can occur when dragging */
   -webkit-user-select: none;
 }
 
 .hidden {
   display: none !important;
 }
 
+#notification {
+  background-color: #FFF199;
+  border: 1px solid lightGrey;
+  border-radius: 6px;
+  color: black;
+  display: inline-block;
+  font-weight: bold;
+  margin-top: 2px;
+  opacity: 100%;
+  padding: 7px 15px;
+  position: relative;
+  z-index: 100;
+  -webkit-transition-duration: 0.1s;
+  -webkit-transition-property: opacity;
+}
+
+#notification.inactive {
+  display: inline-block;
+  opacity: 0;
+  -webkit-transition-duration: 0.2s;
+}
+
+#notification * {
+  display: inline-block;

[Rick Byers, 2011/06/08 20:41:10]

This seems unusual to me.  You really want to set display on all decendants of
#notification regardless of what they are?  I'm not enough of a CSS expert to
know if this is ok or not - just seems odd.  Maybe deserves a comment?  I see
elsewhere we sometimes do this to all chidlren - which makes more sense than all
descendants to me...

[Evan Stade, 2011/06/08 23:54:52]

yes, this is what I want, but I can understand your concern, so I'll change it
to be more specific.

+}
+
+#notification button {
+  background: no-repeat;
+  background-color: transparent;
+  /* TODO(estade): this should animate between states. */
+  background-image: url('chrome://theme/IDR_CLOSE_BAR');
+  border: 0;
+  height: 16px;
+  padding: 0;
+  vertical-align: middle;
+  width: 16px;
+  -webkit-margin-start: 0.5em;
+}
+
+#notification button:hover,
+#notification button:focus {
+  background-image: url('chrome://theme/IDR_CLOSE_BAR_H');
+}
+
+#notification button:active {
+  background-image: url('chrome://theme/IDR_CLOSE_BAR_P');
+}
+
+.linkButton {
+  color: #06C;
+  cursor: pointer;
+  display: inline-block;
+  text-decoration: underline;
+  -webkit-margin-start: 0.5em;
+}
+
 #card-slider-frame {
   /* Must match #footer height. */
   bottom: 50px;
   overflow: hidden;
   /* We want this to fill the window except for the region used
      by footer */
   position: fixed;
   top: 0;
   width: 100%;
   -webkit-mask-image: -webkit-linear-gradient(bottom, transparent, black 30px);
@@ skipping 71 matching lines @@
 #footer.rearrange-mode #trash {
   -webkit-transform: translate(0, 0);
 }
 
 .disclosure-triangle {
   display: inline-block;
   width: 9px;
   height: 9px;
   -webkit-mask-image: url('./ntp4_disclosure_triangle_mask.png');
 }