Reduce tool-bar font size and protrusion when hidden.

BUG=None
TEST=Check everything still looks okay.

Review URL: http://codereview.chromium.org/7484001

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@93452 0039d316-1c4b-4281-b951-d872f2087c98

3 files changed, 27 insertions, 13 deletions

diff --git a/remoting/webapp/me2mom/choice.css b/remoting/webapp/me2mom/choice.css
index c7842c8..eff6410 100644
--- a/remoting/webapp/me2mom/choice.css
+++ b/remoting/webapp/me2mom/choice.css
@@ -18,12 +18,14 @@ body {
   padding:0;
 }
 
+button, input {
+  font-family: inherit;
+  font-size: inherit;
+}
+
 button {
   background: -webkit-linear-gradient(#fafafa, #f4f4f4 40%, #e5e5e5);
   border: 1px solid #aaa;
-  height: 2em;
-  font-size: 16px;
-  padding: 6px;
   -webkit-border-radius: 2px;
   -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
   -webkit-user-select: none;
@@ -80,6 +82,12 @@ label {
   font-weight: bold;
 }
 
+.big-button {
+  height: 2em;
+  font-size: 16px;
+  padding: 6px;
+}
+
 .centered-button {
   /*
     Used to force buttons to center correctly on Chrome due to a quirk
diff --git a/remoting/webapp/me2mom/choice.html b/remoting/webapp/me2mom/choice.html
index 96b8e44..31b0cf9 100644
--- a/remoting/webapp/me2mom/choice.html
+++ b/remoting/webapp/me2mom/choice.html
@@ -96,7 +96,7 @@ found in the LICENSE file.
             control your computer.
           </div>
           <div class="centered-button">
-            <button id="share-button" class="auth-status-control"
+            <button id="share-button" class="auth-status-control big-button"
                     type="button" onclick="remoting.tryShare();">
               Share this computer
             </button>
@@ -132,7 +132,8 @@ found in the LICENSE file.
             Your desktop is currently being shared.
           </div>
           <div class="centered-button">
-            <button type="button" onclick="remoting.cancelShare();">
+            <button type="button" class="big-button"
+                    onclick="remoting.cancelShare();">
               Stop sharing
             </button>
           </div>
@@ -143,7 +144,7 @@ found in the LICENSE file.
             Unable to get access token.
           </div>
           <div class="centered-button">
-            <button type="button" class="auth-status-control"
+            <button type="button" class="auth-status-control big-button"
                     onclick="remoting.setHostMode('unshared');">
               OK
             </button>
@@ -165,7 +166,7 @@ found in the LICENSE file.
               </label>
               <input id="access-code-entry" class="auth-status-control"
                      type="text"/>
-              <button id="connect-button" class="auth-status-control"
+              <button id="connect-button" class="auth-status-control big-button"
                       type="submit">
                 Connect
               </button>
@@ -196,7 +197,7 @@ found in the LICENSE file.
             <div id="server-response"></div>.
           </div>
           <div class="centered-button">
-            <button type="button" class="auth-status-control"
+            <button type="button" class="auth-status-control big-button"
                     onclick="remoting.setClientMode('unconnected');">
               OK
             </button>
@@ -225,7 +226,7 @@ found in the LICENSE file.
         <div id="waiting-footer">
           <img src="spinner.gif">
           <span class="waiting icon-label">waiting for connection&hellip;</span>
-          <button id="cancel-button"
+          <button id="cancel-button big-button"
                   onclick="remoting.cancelPendingOperation();">
             Cancel
           </button>
diff --git a/remoting/webapp/me2mom/toolbar.css b/remoting/webapp/me2mom/toolbar.css
index d5991de..41f9380 100644
--- a/remoting/webapp/me2mom/toolbar.css
+++ b/remoting/webapp/me2mom/toolbar.css
@@ -5,12 +5,17 @@
 
 .toolbar-container {
   position: absolute;
-  top: -46px;
+  top: -45px;
   width: 640px;
   left: 50%;
   margin-left: -320px;
   -webkit-transition: top 0.2s linear;
   -webkit-transition-delay: 0.7s;
+  font-size: 13px;
+}
+
+.toolbar-container button {
+  padding: 3px 9px;
 }
 
 .toolbar-container:hover {
@@ -31,7 +36,7 @@
   border-radius: 7px;
   border: 3px solid #4695ff;
   width: 640px;
-  padding: 10px 5px 5px 5px;
+  padding: 10px 7px 5px 7px;
   background-color: #e9e9e9;
   -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
 }
@@ -39,9 +44,9 @@
 /* Ensure that the 'connected to' string doesn't make the tool-bar overflow */
 #connected-to {
   display: inline-block;
-  max-width: 240px;
+  max-width: 280px;
   overflow: hidden;
-  margin-right: 1em;
+  margin-right: 8px;
   white-space: nowrap;
 }