Merge pull request #717 from amrutac/themes-plus-css-refactor

Themes plus css refactor

web/static/img/bitbucket-icon.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" height="1000" width="785.714">
+    <path d="M454.77 479.386q4.464 35.154 -28.179 56.358t-62.217 3.348q-21.762 -9.486 -29.853 -32.364t-.279 -45.756 29.016 -32.364q20.088 -10.044 40.455 -6.696t35.712 19.809 15.345 37.665zm61.938 -11.718q-7.812 -59.706 -63.054 -91.512t-109.926 -7.254q-35.154 15.624 -56.079 49.383t-19.251 72.261q2.232 50.778 43.245 86.49t92.349 31.248q50.778 -4.464 84.816 -46.872t27.9 -93.744zm133.362 -302.436q-11.16 -15.066 -31.248 -24.831t-32.364 -12.276 -39.618 -6.975q-162.378 -26.226 -315.828 1.116 -23.994 3.906 -36.828 6.696t-30.69 12.276 -27.9 23.994q16.74 15.624 42.408 25.389t41.013 12.276 48.825 6.417q127.224 16.182 249.984 .558 35.154 -4.464 49.941 -6.696t40.455 -11.997 41.85 -25.947zm31.806 577.53q-4.464 14.508 -8.649 42.687t-7.812 46.872 -15.903 39.06 -32.364 31.527q-47.988 26.784 -105.741 39.897t-112.716 12.276 -112.437 -10.323q-25.668 -4.464 -45.477 -10.044t-42.687 -15.066 -40.734 -24.273 -29.016 -34.317q-13.95 -53.568 -31.806 -162.936l3.348 -8.928 10.044 -5.022q124.434 82.584 282.627 82.584t283.185 -82.584q11.718 3.348 13.392 12.834t-2.79 25.11 -4.464 20.646zm100.998 -536.238q-14.508 93.186 -61.938 365.49 -2.79 16.74 -15.066 31.248t-24.273 22.32 -30.411 17.298q-140.616 70.308 -340.38 49.104 -138.384 -15.066 -219.852 -77.562 -8.37 -6.696 -14.229 -14.787t-9.486 -19.53 -5.022 -18.972 -3.348 -22.041 -3.069 -19.53q-5.022 -27.9 -14.787 -83.7t-15.624 -90.117 -13.113 -82.305 -12.276 -88.164q1.674 -14.508 9.765 -27.063t17.577 -20.925 25.11 -16.74 25.668 -12.555 26.784 -10.323q69.75 -25.668 174.654 -35.712 211.482 -20.646 377.208 27.9 86.49 25.668 119.97 68.076 8.928 11.16 9.207 28.458t-3.069 30.132z" fill="#FFFFFF"/>
+</svg>

web/static/img/coreos-icon.svg

+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" fill="#666" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 215 215" xml:space="preserve">
+  <g>
+    <g>
+      <path d="M107.479,1.075c-58.677,0-106.404,47.73-106.404,106.398c0,58.672,47.727,106.399,106.404,106.399
+        c58.659,0,106.39-47.727,106.39-106.399C213.869,48.805,166.138,1.075,107.479,1.075z M147.449,134.627
+        c-0.88,0.128-1.749,0.251-2.632,0.364c-8.03,1.038-16.602,1.743-25.561,2.078c-3.856,0.144-7.793,0.231-11.776,0.231
+        c-3.995,0-7.92-0.086-11.788-0.231c-8.948-0.335-17.526-1.04-25.549-2.078c-0.716-5.987-1.201-12.216-1.443-18.623
+        c-0.116-2.926-0.173-5.896-0.173-8.895c0-3.002,0.057-5.966,0.173-8.898c0.243-6.408,0.728-12.633,1.443-18.62
+        c0.144-1.246,0.306-2.485,0.473-3.709c5.241-38.04,19.752-65.408,36.863-65.408c53.364,0,96.632,43.262,96.633,96.635
+        C204.112,119.547,180.866,129.934,147.449,134.627z"/>
+      <path d="M147.448,80.316c-0.969-1.414-2.009-2.768-3.117-4.069c-8.866-10.451-22.074-17.092-36.852-17.092
+        c-4.791,0-9.057,7.333-11.788,18.72c-1.085,4.54-1.928,9.721-2.47,15.343c-0.428,4.505-0.658,9.297-0.658,14.255
+        s0.231,9.751,0.658,14.252c4.508,0.428,9.293,0.657,14.258,0.657c4.959,0,9.744-0.23,14.252-0.657
+        c9.911-0.94,18.466-2.846,24.527-5.357c5.986-2.476,9.528-5.559,9.528-8.895C155.786,97.407,152.712,88.057,147.448,80.316z"/>
+    </g>
+  </g>
+</svg>

web/static/img/email-icon.svg

+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
+	xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 43 43"
+	style="enable-background:new 0 0 43 43;" xml:space="preserve">
+  <rect id="Rectangle-290" fill="#84B6F0" width="43" height="43"/>
+  <path fill="#FFF" d="M8.5,11.3v20.3h26V11.3H8.5z M31,13.3l-9.6,9.3L12,13.3H31z M10.5,29.7v-15l11,10.7l11-10.7v15H10.5z"/>
+</svg>

web/static/img/github-icon.svg

+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16">
+  <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59 0.4 0.07 0.55-0.17 0.55-0.38 0-0.19-0.01-0.82-0.01-1.49-2.01 0.37-2.53-0.49-2.69-0.94-0.09-0.23-0.48-0.94-0.82-1.13-0.28-0.15-0.68-0.52-0.01-0.53 0.63-0.01 1.08 0.58 1.23 0.82 0.72 1.21 1.87 0.87 2.33 0.66 0.07-0.52 0.28-0.87 0.51-1.07-1.78-0.2-3.64-0.89-3.64-3.95 0-0.87 0.31-1.59 0.82-2.15-0.08-0.2-0.36-1.02 0.08-2.12 0 0 0.67-0.21 2.2 0.82 0.64-0.18 1.32-0.27 2-0.27 0.68 0 1.36 0.09 2 0.27 1.53-1.04 2.2-0.82 2.2-0.82 0.44 1.1 0.16 1.92 0.08 2.12 0.51 0.56 0.82 1.27 0.82 2.15 0 3.07-1.87 3.75-3.65 3.95 0.29 0.25 0.54 0.73 0.54 1.48 0 1.07-0.01 1.93-0.01 2.2 0 0.21 0.15 0.46 0.55 0.38C13.71 14.53 16 11.53 16 8 16 3.58 12.42 0 8 0z" />
+</svg>

web/static/img/google-icon.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="36px" height="37px" viewBox="0 0 36 37" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+  <defs>
+      <linearGradient x1="3.84931507%" y1="34.473262%" x2="92.2854795%" y2="70.223262%" id="linearGradient-1">
+          <stop stop-color="#3E2723" stop-opacity="0.2" offset="0%"></stop>
+          <stop stop-color="#3E2723" stop-opacity="0.02" offset="100%"></stop>
+      </linearGradient>
+  </defs>
+  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+    <g id="A.1-Verify-Email-Screen_login-" sketch:type="MSArtboardGroup" transform="translate(-407.000000, -272.000000)">
+      <g id="Shape-+-g+" sketch:type="MSLayerGroup" transform="translate(407.000000, 272.000000)">
+        <path d="M35.9639881,15.3236905 L18.7923214,0.75202381 L10.7579762,0.75202381 C5.14494048,0.75202381 2.39345238,4.16386905 2.39345238,8.01595238 C2.39345238,10.9875595 4.8147619,14.2893452 8.88696429,14.2893452 L9.8775,14.2893452 C9.65738095,14.6195238 9.54732143,15.279881 9.54732143,15.720119 C9.54732143,16.8207143 9.98755952,17.3710119 10.6479167,18.031369 C8.88696429,18.1414286 5.58517857,18.4716071 3.16386905,20.0124405 C0.852619048,21.3331548 0.192261905,23.3142262 0.192261905,24.745 C0.192261905,25.9556548 0.6325,27.05625 1.62303571,28.0467857 L15.4905357,36.9142857 L35.9639881,36.9142857 L35.9639881,15.3236905 Z" id="Shape" fill="url(#linearGradient-1)" sketch:type="MSShapeGroup"></path>
+        <g id="g+" transform="translate(0.192262, 1.192262)" sketch:type="MSShapeGroup">
+          <path d="M18.6000595,-0.110059524 L18.6000595,-0.440238095 L10.5657143,-0.110059524 C4.95267857,-0.110059524 2.20119048,3.30178571 2.20119048,7.15386905 C2.20119048,10.1254762 4.6225,13.4272619 8.69470238,13.4272619 L9.6852381,13.4272619 C9.46511905,13.7574405 9.35505952,14.4177976 9.35505952,14.9680952 C9.35505952,16.0686905 9.79529762,16.6189881 10.4556548,17.2793452 C8.69470238,17.3894048 5.39291667,17.7195833 2.97160714,19.2604167 C0.660357143,20.581131 0,22.5622024 0,23.9929762 C0,26.8545238 2.7514881,29.4959524 8.36452381,29.4959524 C15.0781548,29.4959524 18.6000595,25.8639881 18.6000595,22.2320238 C18.6000595,19.4805357 17.0592262,18.1598214 15.2982738,16.7290476 L13.8675,15.6284524 C13.4272619,15.2982738 12.9870238,14.8580357 12.9870238,13.9775595 C12.9870238,13.0970833 13.5373214,12.4367262 14.087619,12.1065476 C15.7385119,10.7858333 17.3894048,9.46511905 17.3894048,6.4935119 C17.3894048,3.74202381 15.7385119,2.31125 14.7479762,1.54083333 L16.9491667,1.54083333 L18.6000595,-0.110059524 L18.6000595,-0.110059524 Z M16.0686905,23.6627976 C16.0686905,25.8639881 14.087619,27.8450595 10.3455952,27.8450595 C6.16333333,27.8450595 3.52190476,25.7539286 3.52190476,23.1125 C3.52190476,20.3610119 6.05327381,19.3704762 6.82369048,19.0402976 C8.47458333,18.49 10.5657143,18.3799405 10.8958929,18.3799405 L11.776369,18.3799405 C14.7479762,20.581131 16.0686905,21.6817262 16.0686905,23.6627976 L16.0686905,23.6627976 Z M10.5657143,12.1065476 C7.26392857,12.1065476 5.50297619,8.25446429 5.50297619,5.28285714 C5.50297619,2.53136905 7.26392857,1.21065476 9.13494048,1.21065476 C12.6568452,1.21065476 14.4177976,5.61303571 14.4177976,8.25446429 C14.3077381,11.4461905 11.55625,12.1065476 10.5657143,12.1065476 L10.5657143,12.1065476 Z M26.4142857,12.9870238 L26.4142857,8.03434524 L24.7633929,8.03434524 L24.7633929,12.9870238 L19.8107143,12.9870238 L19.8107143,14.6379167 L24.7633929,14.6379167 L24.7633929,19.5905952 L26.4142857,19.5905952 L26.4142857,14.6379167 L31.3669643,14.6379167 L31.3669643,12.9870238 L26.4142857,12.9870238 L26.4142857,12.9870238 Z" id="Shape" opacity="0.16" fill="#3E2723"></path>
+          <path d="M18.6000595,-0.440238095 L10.5657143,-0.440238095 C4.95267857,-0.440238095 2.20119048,2.97160714 2.20119048,6.82369048 C2.20119048,9.79529762 4.6225,13.0970833 8.69470238,13.0970833 L9.6852381,13.0970833 C9.46511905,13.4272619 9.35505952,14.087619 9.35505952,14.5278571 C9.35505952,15.6284524 9.79529762,16.17875 10.4556548,16.8391071 C8.69470238,16.9491667 5.39291667,17.2793452 2.97160714,18.8201786 C0.660357143,20.1408929 0,22.1219643 0,23.5527381 C0,26.4142857 2.7514881,29.0557143 8.36452381,29.0557143 C15.0781548,29.0557143 18.6000595,25.42375 18.6000595,21.7917857 C18.6000595,19.0402976 17.0592262,17.7195833 15.2982738,16.2888095 L13.8675,15.1882143 C13.4272619,14.8580357 12.9870238,14.4177976 12.9870238,13.5373214 C12.9870238,12.6568452 13.5373214,11.9964881 14.087619,11.6663095 C15.7385119,10.3455952 17.3894048,9.02488095 17.3894048,6.05327381 C17.3894048,3.30178571 15.7385119,1.8710119 14.7479762,1.10059524 L16.9491667,1.10059524 L18.6000595,-0.440238095 L18.6000595,-0.440238095 Z M16.0686905,23.332619 C16.0686905,25.5338095 14.087619,27.514881 10.3455952,27.514881 C6.16333333,27.514881 3.52190476,25.42375 3.52190476,22.7823214 C3.52190476,20.0308333 6.05327381,19.0402976 6.82369048,18.710119 C8.47458333,18.1598214 10.5657143,18.0497619 10.8958929,18.0497619 L11.776369,18.0497619 C14.7479762,20.2509524 16.0686905,21.3515476 16.0686905,23.332619 L16.0686905,23.332619 Z M10.5657143,11.8864286 C7.26392857,11.8864286 5.50297619,8.03434524 5.50297619,5.0627381 C5.50297619,2.31125 7.26392857,0.990535714 9.13494048,0.990535714 C12.6568452,0.990535714 14.4177976,5.39291667 14.4177976,8.03434524 C14.3077381,11.2260714 11.55625,11.8864286 10.5657143,11.8864286 L10.5657143,11.8864286 Z M26.4142857,12.6568452 L26.4142857,7.70416667 L24.7633929,7.70416667 L24.7633929,12.6568452 L19.8107143,12.6568452 L19.8107143,14.3077381 L24.7633929,14.3077381 L24.7633929,19.2604167 L26.4142857,19.2604167 L26.4142857,14.3077381 L31.3669643,14.3077381 L31.3669643,12.6568452 L26.4142857,12.6568452 L26.4142857,12.6568452 Z" id="Shape" fill="#F1F1F1"></path>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
+

web/static/main.css

+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+}
+
+.dex-container {
+  color: #333;
+  margin: 45px auto;
+  max-width: 500px;
+  min-width: 320px;
+  text-align: center;
+}
+
+.dex-btn {
+  border-radius: 4px;
+  border: 0;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.25), 0 0 1px rgba(0, 0, 0, 0.25);
+  cursor: pointer;
+  font-size: 16px;
+  padding: 0;
+}
+
+.dex-btn:focus {
+  outline: none;
+}
+
+.dex-btn:active {
+  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  outline: none;
+}
+
+.dex-btn-icon {
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 24px;
+  border-radius: 4px 0 0 4px;
+  float: left;
+  height: 36px;
+  margin-right: 5px;
+  width: 36px;
+}
+
+.dex-btn-icon--google {
+  background-color: #DB4437;
+  background-image: url(../static/img/google-icon.svg);;
+}
+.dex-btn-icon--local {
+  background-color: #84B6EF;
+  background-image: url(../static/img/email-icon.svg);
+}
+
+.dex-btn-icon--coreos {
+  /* B&W CoreOS SVG logo */
+  background-image: url(../static/img/coreos-icon.svg);
+}
+
+.dex-btn-icon--github {
+  background-color: #F5F5F5;
+  background-image: url(../static/img/github-icon.svg);
+}
+
+.dex-btn-icon--bitbucket {
+  background-color: #205081;
+  background-image: url(../static/img/bitbucket-icon.svg);
+}
+
+.dex-btn-text {
+  font-weight: 600;
+  line-height: 36px;
+  padding: 6px 12px;
+  text-align: center;
+}
+
+.dex-subtle-text {
+  color: #999;
+  font-size: 12px;
+}
+
+.dex-seperator {
+  color: #999;
+}
+
+.dex-list {
+  color: #999;
+  display: inline-block;
+  font-size: 12px;
+  list-style: circle;
+  text-align: left;
+}
+
+.dex-error-box {
+  background-color: #DD1327;
+  color: #fff;
+  font-size: 14px;
+  font-weight: normal;
+  max-width: 320px;
+  padding: 4px 0;
+}
+
+.dex-error-box {
+  margin: 20px auto;
+}

web/templates/approval.html

 {{ template "header.html" . }}
 
-<div class="panel">
-  <h2 class="heading">Grant Access</h2>
+<div class="theme-panel">
+  <h2 class="theme-heading">Grant Access</h2>
 
-  <hr>
-  <div class="list-with-title">
-    <div class="subtle-text">{{ .Client }} would like to:</div>
+  <hr class="dex-separator">
+  <div>
+    <div class="dex-subtle-text">{{ .Client }} would like to:</div>
+    <ul class="dex-list">
       {{ range $scope := .Scopes }}
-      <li class="bullet-point">
-        <div class="subtle-text">
-          {{ $scope }}
-        </div>
-      </li>
+      <li>{{ $scope }}</li>
       {{ end }}
+    </ul>
   </div>
-  <hr>
+  <hr class="dex-separator">
 
   <div>
-    <div class="form-row">
+    <div class="theme-form-row">
       <form method="post">
         <input type="hidden" name="req" value="{{ .AuthReqID }}"/>
         <input type="hidden" name="approval" value="approve">
-        <button type="submit" class="btn btn-success">
-            <span class="btn-text">Grant Access</span>
+        <button type="submit" class="dex-btn theme-btn--success">
+            <span class="dex-btn-text">Grant Access</span>
         </button>
       </form>
     </div>
-    <div class="form-row">
+    <div class="theme-form-row">
       <form method="post">
         <input type="hidden" name="req" value="{{ .AuthReqID }}"/>
         <input type="hidden" name="approval" value="rejected">
-        <button type="submit" class="btn btn-provider">
-            <span class="btn-text">Cancel</span>
+        <button type="submit" class="dex-btn theme-btn-provider">
+            <span class="dex-btn-text">Cancel</span>
         </button>
       </form>
     </div>

web/templates/login.html

 {{ template "header.html" . }}
 
-<div class="panel">
-  <h2 class="heading">Log in to {{ issuer }} </h2>
-
+<div class="theme-panel">
+  <h2 class="theme-heading">Log in to {{ issuer }} </h2>
   <div>
     {{ range $c := .Connectors }}
-      <div class="form-row">
+      <div class="theme-form-row">
         <a href="{{ $c.URL }}?req={{ $.AuthReqID }}" target="_self">
-          <button class="btn btn-provider">
-            <span class="btn-icon btn-icon-{{ $c.ID }}"></span>
-            <span class="btn-text">Log in with {{ $c.Name }}</span>
+          <button class="dex-btn theme-btn-provider">
+            <span class="dex-btn-icon dex-btn-icon--{{ $c.ID }}"></span>
+            <span class="dex-btn-text">Log in with {{ $c.Name }}</span>
           </button>
         </a>
       </div>
     {{ end }}
   </div>
-
 </div>
 
-
 {{ template "footer.html" . }}

web/templates/oob.html

 {{ template "header.html" . }}
 
-<div class="panel">
-  <h2 class="heading">Login Successful</h2>
-
-  Please copy this code, switch to your application and paste it there:
-  <br/>
-  <input type="text" value="{{ .Code }}" />
+<div class="theme-panel">
+  <h2 class="theme-heading">Login Successful</h2>
+  <p>Please copy this code, switch to your application and paste it there:</p>
+  <input type="text" class="theme-form-input" value="{{ .Code }}" />
 </div>
 
 {{ template "footer.html" . }}

web/templates/password.html

 {{ template "header.html" . }}
 
-<div class="panel">
-  <h2 class="heading">Log in to Your Account</h2>
+<div class="theme-panel">
+  <h2 class="theme-heading">Log in to Your Account</h2>
   <form method="post" action="{{ .PostURL }}">
-    <div class="form-row">
-      <div class="input-desc">
+    <div class="theme-form-row">
+      <div class="theme-form-label">
         <label for="userid">Username</label>
       </div>
-	  <input tabindex="1" required id="login" name="login" type="text" class="input-box" placeholder="username" {{ if .Username }}value="{{ .Username }}" {{ else }} autofocus {{ end }}/>
+	  <input tabindex="1" required id="login" name="login" type="text" class="theme-form-input" placeholder="username" {{ if .Username }} value="{{ .Username }}" {{ else }} autofocus {{ end }}/>
     </div>
-    <div class="form-row">
-      <div class="input-desc">
+    <div class="theme-form-row">
+      <div class="theme-form-label">
         <label for="password">Password</label>
       </div>
-	  <input tabindex="2" required id="password" name="password" type="password" class="input-box" placeholder="password" {{ if .Invalid }} autofocus {{ end }}/>
+	  <input tabindex="2" required id="password" name="password" type="password" class="theme-form-input" placeholder="password" {{ if .Invalid }} autofocus {{ end }}/>
     </div>
     <input type="hidden" name="req" value="{{ .AuthReqID }}"/>
 
     {{ if .Invalid }}
-      <div class="error-box">
+      <div class="dex-error-box">
         Invalid username and password.
       </div>
     {{ end }}
 
-    <button tabindex="3" type="submit" class="btn btn-primary">Login</button>
+    <button tabindex="3" type="submit" class="dex-btn theme-btn--primary">Login</button>
 
   </form>
 </div>

web/themes/coreos/styles.css

+.theme-body {
+  background-color: #efefef;
+  color: #333;
+  font-family: 'Source Sans Pro', Helvetica, sans-serif;
+}
+
+.theme-navbar {
+  background-color: #fff;
+  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
+  color: #333;
+  font-size: 13px;
+  font-weight: 100;
+  height: 46px;
+  overflow: hidden;
+  padding: 0 10px;
+}
+
+.theme-navbar__logo-wrap {
+  display: inline-block;
+  height: 100%;
+  overflow: hidden;
+  padding: 10px 15px;
+  width: 300px;
+}
+
+.theme-navbar__logo {
+  height: 100%;
+  max-height: 25px;
+}
+
+.theme-heading {
+  font-size: 20px;
+  font-weight: 500;
+  margin-bottom: 10px;
+  margin-top: 0;
+}
+
+.theme-panel {
+  background-color: #fff;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
+  padding: 30px;
+}
+
+.theme-btn-provider {
+  background-color: #fff;
+  color: #333;
+  min-width: 250px;
+}
+
+.theme-btn-provider:hover {
+  color: #999;
+}
+
+.theme-btn--primary {
+  background-color: #333;
+  border: none;
+  color: #fff;
+  min-width: 200px;
+  padding: 6px 12px;
+}
+
+.theme-btn--primary:hover {
+  background-color: #666;
+  color: #fff;
+}
+
+.theme-btn--success {
+  background-color: #2FC98E;
+  color: #fff;
+  width: 250px;
+}
+
+.theme-btn--success:hover {
+  background-color: #49E3A8;
+}
+
+.theme-form-row {
+  display: block;
+  margin: 20px auto;
+}
+
+.theme-form-input {
+  border-radius: 4px;
+  border: 1px solid #CCC;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  color: #666;
+  display: block;
+  font-size: 14px;
+  height: 36px;
+  line-height: 1.42857143;
+  margin: auto;
+  padding: 6px 12px;
+  width: 250px;
+}
+
+.theme-form-input:focus,
+.theme-form-input:active {
+  border-color: #66AFE9;
+  outline: none;
+}
+
+.theme-form-label {
+  font-size: 13px;
+  font-weight: 600;
+  margin: 4px auto;
+  position: relative;
+  text-align: left;
+  width: 250px;
+}

web/themes/tectonic/styles.css

+.theme-body {
+  background-color: #1E394C;
+  color: #333;
+  font-family: 'Source Sans Pro', Helvetica, sans-serif;
+}
+
+.theme-navbar {
+  background-color: #fff;
+  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
+  color: #333;
+  font-size: 13px;
+  font-weight: 100;
+  height: 46px;
+  overflow: hidden;
+  padding: 0 10px;
+}
+
+.theme-navbar__logo-wrap {
+  display: inline-block;
+  height: 100%;
+  overflow: hidden;
+  padding: 10px 15px;
+  width: 300px;
+}
+
+.theme-navbar__logo {
+  height: 100%;
+  max-height: 25px;
+}
+
+.theme-heading {
+  font-size: 20px;
+  font-weight: 500;
+  padding-bottom: 10px;
+  margin-top: 0;
+}
+
+.theme-panel {
+  background-color: #fff;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
+  padding: 30px;
+}
+
+.theme-btn-provider {
+  background-color: #fff;
+  color: #333;
+  min-width: 250px;
+}
+
+.theme-btn-provider:hover {
+  color: #999;
+}
+
+.theme-btn--primary {
+  background-color: #2fc98e;
+  border: none;
+  color: #fff;
+  min-width: 200px;
+  padding: 6px 12px;
+}
+
+.theme-btn--primary:hover {
+  background-color: #25a071;
+  color: #fff;
+}
+
+.theme-btn--success {
+  background-color: #2FC98E;
+  color: #fff;
+  width: 250px;
+}
+
+.theme-btn--success:hover {
+  background-color: #49E3A8;
+}
+
+.theme-form-row {
+  display: block;
+  margin: 20px auto;
+}
+
+.theme-form-input {
+  display: block;
+  height: 36px;
+  padding: 6px 12px;
+  font-size: 14px;
+  line-height: 1.42857143;
+  color: #666;
+  border: 1px solid #CCC;
+  border-radius: 4px;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  width: 250px;
+  margin: auto;
+}
+
+.theme-form-input:focus,
+.theme-form-input:active {
+  outline: none;
+  border-color: #66AFE9;
+}
+
+.theme-form-label {
+  width: 250px;
+  margin: 4px auto;
+  text-align: left;
+  position: relative;
+  font-size: 13px;
+  font-weight: 600;
+}