css hack n' slash, continued: New styles for buttons and selects.

chrome/browser/resources/print_preview/print_preview.css

 /* Copyright (c) 2012 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.
  */
 
 html {
   height: 100%;
 }
 
 body {
@@ skipping 14 matching lines @@
   display: -webkit-box;
   width: 310px;
 }
 
 #print-preview #navbar-content-title {
   cursor: default;
   text-align: start;
 }
 
 #print-header {
-  -webkit-padding-end: 16px;
+  -webkit-padding-end: 14px;
   padding-bottom: 10px;
   padding-top: 10px;
 }
 
 #print-summary {
   color: #53637d;
   display: block;
   min-height: 30px;
 }
 
@@ skipping 72 matching lines @@
 .preview-link-button:disabled {
   color: rgba(0, 0, 0, .5);
   cursor: default;
   text-shadow: none;
 }
 
 button.loading {
   cursor: progress;
 }
 
-button.default {
+#print-preview button.default {
   font-weight: bold;
 }
 
-button.default:not(:focus):not(:disabled) {
+#print-preview button.default:not(:focus):not(:disabled) {
   border-color: #808080;
 }
 
 span.hint {
   -webkit-transition: color 200ms;
   background: white;
   display: block;
   font-size: 0.9em;
   font-weight: bold;
   height: 0;
@@ skipping 96 matching lines @@
   display: block;
 }
 
 #collate-option {
  -webkit-padding-start: 16px;
   display: inline-block;
 }
 
 #copies {
   position: relative;
-  width: 1.5em;
+  width: 2em;

[dpapad, 2012/03/02 16:34:10]

Could we make this 2.75em, so that it can fit the maximum allowed number of
digits (which is 3)? 

[Dan Beam, 2012/03/02 17:58:43]

2.75em - why not 3em? confident that no number digit will ever take up as much
space as an m in any font? (even ... monospace! dun dun dun!)

[Evan Stade, 2012/03/02 19:46:20]

no, actually, in CJK fonts most characters are wider than an em. However they
still use arabic numerals AFAIK, and I don't think it's possible to change this
font to monospace (well anything is possible but I don't think it's easy). I
think 2.75em is a safe bet, and if you keep going wider it eventually just looks
bad; if 2.75 is not enough the consequences are non-disastrous.

[Dan Beam, 2012/03/02 20:24:42]

it will be possible when users are allowed to change the font of all WebUI
pages, but I agree we should probably optimize for the common case (of 2.75em
being the best looking).

 }
 
 #copies.invalid {
   background: #fff0f0;
   color: #8c1414;
 }
 
 #increment,
 #decrement {
   -webkit-padding-end: 8px;
   -webkit-padding-start: 8px;
   font-weight: 600;
   min-width: 0;
   position: relative;
-  width: 25px;
+  width: 2em;
 }
 
 #increment:focus,
 #decrement:focus,
 #copies:focus {
   z-index: 1;
 }
 
 #increment {
   -webkit-margin-start: -5px;
@@ skipping 52 matching lines @@
   opacity: 0;
 }
 
 #no-plugin {
   padding: 20px;
 }
 
 /* TODO(estade): this should be in a shared location but I'm afraid of the
  * damage it could do. */
 [hidden] {
   display: none !important;

[Dan Beam, 2012/03/02 17:58:43]

this is in chrome_shared2.css now, isn' it?

[Evan Stade, 2012/03/02 19:46:20]

yes. However print preview does not yet use chrome_shared2.css. That is a
project for another day.

[Dan Beam, 2012/03/02 20:24:42]

ah, OK, that does sounds like a project, lol

 }
 
 #overlay-layer {
   -webkit-transition: opacity 200ms linear;
   /* overlayFadeInTransitionDelay = pluginFadeOutTransitionDelay +
    *     pluginFadeOutTransitionDuration = 350ms */
   -webkit-transition-delay: 350ms;
   -webkit-user-select: none;
   background: #cccccc;
   height: 100%;
@@ skipping 28 matching lines @@
   100% { top: 0; }
 }
 
 #loading {
   -webkit-margin-end: -3px;
 }
 
 .message-with-dots span span {
   -webkit-animation-duration: 1800ms;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-name: dancing-dots-jump;

[Dan Beam, 2012/03/02 17:58:43]

you could probably collapse this to the shorthand -webkit-animation: eh?

[Evan Stade, 2012/03/02 19:46:20]

I suppose. Can we just leave out the properties we don't want to change?

-webkit-animation: dancing-dots-jump 1800ms infinite;

[Dan Beam, 2012/03/02 20:24:42]

I think this would work fine (subsequent changes to -webkit-animation-* should
work the same way).

[Evan Stade, 2012/03/02 21:47:02]

Done.

   padding: 1px;
   position: relative;
 }
 
 .message-with-dots span span:nth-child(2) {
   -webkit-animation-delay: 100ms;
 }
 
 .message-with-dots span span:nth-child(3) {
   -webkit-animation-delay: 300ms;
 }
 
 #error-action-area {
   margin-top: 10px;
 }
 
 /* TODO(estade): unfork this code. */
 .button-strip {

[Dan Beam, 2012/03/02 17:58:43]

shouldn't you be namespacing these two rules as well? (here and below) or do we
just always count on these styles not conflicting with anything else or being
included after?

[Evan Stade, 2012/03/02 19:46:20]

I think we're depending on not conflicting. If we had .button-strip in a shared
location we'd want to remove or at least change these rules here.

   -webkit-box-orient: horizontal;
   -webkit-box-pack: end;
   display: -webkit-box;
 }
 
 html:not([toolkit=views]) .button-strip {
   -webkit-box-direction: reverse;
 }
 
-.button-strip button {
+#print-preview .button-strip button {

[Dan Beam, 2012/03/02 20:24:42]

if we're depending on not conflicting with other .button-strip styles why is
this necessary? specificity? there should be nothing you need to override, eh?

[Evan Stade, 2012/03/02 21:47:02]

yep, specificity

+  -webkit-margin-start: 4px;
   display: block;
 }
 
 #dummy-box {
   -webkit-box-align: stretch;
   -webkit-box-flex: 1;
   -webkit-box-orient: vertical;
   background: #ccc;
   display: -webkit-box;
   height: 100%;
@@ skipping 22 matching lines @@
 }
 
 #intentionally-blank {
   color: black;
   display: inline-block;
   font-style: italic;
   text-align: center;
   text-decoration: none;
   padding: 0 10px;
 }