Merge pull request #714 from amrutac/refactor-css

Refactor css
This commit is contained in:
Eric Chiang 2016-12-01 13:11:19 -08:00 committed by GitHub
commit 4d88eabb50
15 changed files with 422 additions and 270 deletions

View File

@ -0,0 +1,5 @@
<?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>

After

Width:  |  Height:  |  Size: 1.8 KiB

View File

@ -0,0 +1,19 @@
<?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>

After

Width:  |  Height:  |  Size: 1.6 KiB

View File

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<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">
<style type="text/css">
.st0{fill:#84B6F0;}
.st1{fill:#FFFFFF;}
</style>
<title>Rectangle 290 + Rectangle 291 + Path 232</title>
<desc>Created with Sketch.</desc>
<rect id="Rectangle-290" class="st0" width="43" height="43"/>
<path class="st1" 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>

After

Width:  |  Height:  |  Size: 758 B

View File

@ -0,0 +1,5 @@
<?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>

After

Width:  |  Height:  |  Size: 913 B

View File

@ -0,0 +1,25 @@
<?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">
<!-- Generator: Sketch 3.3.2 (12043) - http://www.bohemiancoding.com/sketch -->
<title>Shape + g+</title>
<desc>Created with Sketch.</desc>
<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>
<path d="M9.79529762,13.3172024 L9.79529762,13.0970833 C9.57517857,13.4272619 9.46511905,14.087619 9.46511905,14.5278571 L9.46511905,14.6379167 C9.46511905,14.1976786 9.57517857,13.647381 9.79529762,13.3172024 L9.79529762,13.3172024 Z M10.4556548,16.9491667 C8.69470238,17.0592262 5.39291667,17.3894048 2.97160714,18.9302381 C0.660357143,20.2509524 0,22.2320238 0,23.6627976 L0,23.7728571 C0.110059524,22.3420833 0.770416667,20.4710714 2.97160714,19.1503571 C5.39291667,17.7195833 8.69470238,17.2793452 10.4556548,17.1692857 L10.4556548,16.9491667 L10.4556548,16.9491667 Z M10.3455952,27.514881 C6.27339286,27.514881 3.63196429,25.5338095 3.52190476,22.892381 L3.52190476,23.0024405 C3.52190476,25.643869 6.16333333,27.735 10.3455952,27.735 C14.087619,27.735 16.0686905,25.7539286 16.0686905,23.5527381 L16.0686905,23.4426786 C15.958631,25.643869 13.9775595,27.514881 10.3455952,27.514881 L10.3455952,27.514881 Z M14.3077381,8.25446429 L14.3077381,8.14440476 C14.1976786,11.336131 11.55625,11.8864286 10.4556548,11.8864286 C7.26392857,11.8864286 5.39291667,8.14440476 5.39291667,5.17279762 L5.39291667,5.28285714 C5.39291667,8.25446429 7.15386905,12.1065476 10.4556548,12.1065476 C11.55625,12.1065476 14.3077381,11.4461905 14.3077381,8.25446429 L14.3077381,8.25446429 Z M15.4083333,16.2888095 L13.9775595,15.1882143 C13.5373214,14.8580357 13.2071429,14.4177976 13.0970833,13.647381 L13.0970833,13.7574405 C13.0970833,14.6379167 13.5373214,15.0781548 13.9775595,15.4083333 L15.4083333,16.5089286 C17.0592262,17.9397024 18.6000595,19.2604167 18.710119,21.7917857 L18.710119,21.6817262 C18.6000595,19.0402976 17.0592262,17.8296429 15.4083333,16.2888095 L15.4083333,16.2888095 Z M26.4142857,12.6568452 L26.4142857,12.8769643 L31.3669643,12.8769643 L31.3669643,12.6568452 L26.4142857,12.6568452 L26.4142857,12.6568452 Z M17.4994643,6.27339286 L17.4994643,6.16333333 C17.4994643,3.41184524 15.8485714,1.98107143 14.8580357,1.21065476 L14.8580357,1.54083333 C15.8485714,2.20119048 17.4994643,3.63196429 17.4994643,6.27339286 L17.4994643,6.27339286 Z M26.4142857,7.70416667 L24.7633929,7.70416667 L24.7633929,7.92428571 L26.4142857,7.92428571 L26.4142857,7.70416667 L26.4142857,7.70416667 Z M2.31125,6.82369048 L2.31125,6.93375 C2.42130952,3.08166667 5.0627381,-0.110059524 10.5657143,-0.110059524 L18.3799405,-0.110059524 L18.710119,-0.440238095 L10.6757738,-0.440238095 C4.95267857,-0.440238095 2.31125,2.97160714 2.31125,6.82369048 L2.31125,6.82369048 Z M19.8107143,12.9870238 L24.7633929,12.9870238 L24.7633929,12.7669048 L19.8107143,12.7669048 L19.8107143,12.9870238 L19.8107143,12.9870238 Z" id="Shape" fill-opacity="0.64" fill="#FFFFFF"></path>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 8.6 KiB

View File

@ -0,0 +1,115 @@
* {
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-provider {
background-color: #fff;
color: #333;
width: 250px;
}
.dex-btn-provider:hover {
color: #999;
}
.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;
}

View File

@ -1,37 +1,35 @@
{{ 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 dex-btn-provider">
<span class="dex-btn-text">Cancel</span>
</button>
</form>
</div>

File diff suppressed because one or more lines are too long

View File

@ -1,22 +1,19 @@
{{ 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 dex-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" . }}

View File

@ -1,11 +1,9 @@
{{ 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" . }}

View File

@ -1,29 +1,29 @@
{{ 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>

View File

@ -0,0 +1,99 @@
.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--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;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.9 KiB

View File

@ -0,0 +1,99 @@
.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--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;
}