Few more small styling changes and fixes.

Julia Simplicio · Julia Simplicio · commit a31ee8c38cd3 · 2015-11-04T13:11:20.000-06:00
diff --git a/app.html b/app.html
@@ -32,7 +32,7 @@
   </div>
 
   <div class="content-container">
-    <header class="bb b--light-gray pvm">
+    <header class="main-header bb b--light-gray pvs">
       <div class="center mw8 phm phl-ns">
         <h1 class="f3 book dib prm man">ScreenCat</h1>
         <div class="fr">
@@ -49,7 +49,7 @@ <h1 class="f3 book dib prm man">ScreenCat</h1>
             <a class="share-button tc phs pvs pvm-ns f4 btn w-100 mw-fill mrm">Share Your Screen</a>
           </div>
           <div class="w-50 left">
-            <a class="join-button tc phs pvs pvm-ns f4 btn w-100 mw-fill">Join Remote Screen</a>
+            <a class="join-button tc phs pvs pvm-ns f4 btn w-100 mw-fill mlm">Join Remote Screen</a>
           </div>
         </div>
       </div>
@@ -70,14 +70,14 @@ <h2 class="f4 ttu book">Share</h2>
       <div class="join-container dn">
         <h2 class="f4 ttu book cl">join</h2>
         <div class="cr">
-          <div class="w-80 left">
-            <input class="code-paste-input pam brs ba b--light-gray w-100 mw-fill" value="Loading..."></input>
+          <div class="w-80 left prl">
+            <input type="text" class="code-paste-input pam brs ba b--light-gray w-100 mw-fill" value="Loading..."></input>
           </div>
           <div class="w-20 left">
             <div class="code-paste-button tc phs pvs pvm-ns f4 btn w-100 mw-fill">Connect</div>
           </div>
         </div>
-        <p>Enter a code to connect to a remote screen</p>
+        <p>Enter a code to connect to a remote screen.</p>
       </div>
 
     </main>
diff --git a/index.html b/index.html
@@ -11,7 +11,7 @@
 <link rel="icon" type="image/png" src="img/Icon@2x.png">
 </head>
 <body class="wi-100">
-  <header class="bb b--light-gray pvm"> 
+  <header class="main-header bb b--light-gray pvm"> 
     <div class="center mw8 phm phl-ns">
       <h1 class="f3 book dib prm man">ScreenCat</h1>
     </div>
diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
     "start": "electron electron.js",
     "build": "electron-packager . ScreenCat --platform=darwin --arch=x64 --version=0.34.2 --protocol-name=\"ScreenCat URL\" --protocol=\"screencat\" --ignore=node_modules/electron-prebuilt --ignore=node_modules/electron-packager --ignore=node_modules/browserify --ignore=node_modules/wzrd --ignore=node_modules/standard && cp img/Icon.icns ScreenCat.app/Contents/Resources/atom.icns",
     "dev": "wzrd remote.js:remote-bundle.js",
-    "css": "node-sass stylesheets/sass/screencat.scss stylesheets/css/screencat.css",
+    "css": "node-sass stylesheets/sass/screencat.scss stylesheets/css/screencat.css --watch",
     "test": "standard"
   },
   "author": "max ogden",
diff --git a/remote.html b/remote.html
@@ -28,7 +28,7 @@
 <body class="wi-100">
 
   <div class="content-container">
-    <header class="bb b--light-gray pvm">
+    <header class="main-header bb b--light-gray pvs">
       <div class="center mw8 phm phl-ns">
         <h1 class="f3 book dib prm man">ScreenCat</h1>
         <div class="fr">
@@ -41,7 +41,7 @@ <h1 class="f3 book dib prm man">ScreenCat</h1>
         <h2 class="f4 ttu book cl">join</h2>
         <div class="cr">
           <div class="w-80 left prl">
-            <input class="code-paste-input pam brs ba b--light-gray w-100 mw-fill"></input>
+            <input type="text" class="code-paste-input brs ba b--light-gray w-100 mw-fill"></input>
           </div>
           <div class="w-20 left">
             <div class="code-paste-button tc phs pvs pvm-ns f4 btn w-100 mw-fill">Connect</div>
diff --git a/stylesheets/css/screencat.css b/stylesheets/css/screencat.css
@@ -1,4 +1,35 @@
 @charset "UTF-8";
+body {
+  background-color: #F7F7F7;
+  color: #222; }
+
+input {
+  outline: none;
+  padding: 15px 25px; }
+
+input[type="text"],
+input[type="tel"],
+input[type="url"],
+input[type="email"],
+input[type="search"],
+input[type="number"],
+input[type="password"] {
+  border: 1px solid #DEDEDE;
+  border-radius: 4px; }
+  input[type="text"]:focus,
+  input[type="tel"]:focus,
+  input[type="url"]:focus,
+  input[type="email"]:focus,
+  input[type="search"]:focus,
+  input[type="number"]:focus,
+  input[type="password"]:focus {
+    border: 1px solid #539be2; }
+
+.main-header {
+  background: -webkit-linear-gradient(top, #FFFFFF 0%, #F0F0F0 100%);
+  border-bottom: 1px solid #D3D3D3;
+  box-shadow: 0 1px 2px rgba(235, 235, 235, 0.8); }
+
 .left {
   float: left;
   display: block; }
@@ -36,7 +67,7 @@
     color: #222;
     background-color: transparent; }
   .btn-plain:active {
-    color: #999; }
+    color: #ccc; }
 
 .back-button:before {
   position: absolute;
diff --git a/stylesheets/sass/screencat.scss b/stylesheets/sass/screencat.scss
@@ -2,6 +2,37 @@ $button-color: #539be2;
 $button-active: #3085db;
 $button-border-color: #3f74a8;
 
+body {
+  background-color: #F7F7F7;
+  color: #222;
+}
+
+input {
+  outline: none;
+  padding: 15px 25px;
+}
+
+input[type="text"],
+input[type="tel"],
+input[type="url"],
+input[type="email"],
+input[type="search"],
+input[type="number"],
+input[type="password"] {
+  border: 1px solid #DEDEDE;
+  border-radius: 4px;
+
+  &:focus {
+    border: 1px solid $button-color;
+  }
+}
+
+.main-header {
+  background: -webkit-linear-gradient(top, #FFFFFF 0%, #F0F0F0 100%);
+  border-bottom: 1px solid #D3D3D3;
+  box-shadow: 0 1px 2px rgba(#EBEBEB, .8);
+}
+
 .left {
   float: left;
   display: block;
@@ -49,7 +80,7 @@ $button-border-color: #3f74a8;
   }
 
   &:active {
-    color: #999;
+    color: #ccc;
   }
 }
 
