Style Instagram login button

4 files changed, 101 insertions, 5 deletions

diff --git a/.meteor/packages b/.meteor/packages
index f7da847..3b138b8 100644
--- a/.meteor/packages
+++ b/.meteor/packages
@@ -9,4 +9,4 @@ autopublish
 insecure
 bozhao:accounts-instagram
 service-configuration
-accounts-ui
+accounts-ui-unstyled
diff --git a/.meteor/platforms b/.meteor/platforms
index efeba1b..81ae701 100644
--- a/.meteor/platforms
+++ b/.meteor/platforms
@@ -1,2 +1,3 @@
-server
 browser
+ios
+server
diff --git a/.meteor/versions b/.meteor/versions
index 08cece2..08eb9bf 100644
--- a/.meteor/versions
+++ b/.meteor/versions
@@ -1,6 +1,5 @@
 accounts-base@1.2.0
 accounts-oauth@1.1.5
-accounts-ui@1.1.5
 accounts-ui-unstyled@1.1.7
 autopublish@1.0.3
 autoupdate@1.2.1
@@ -25,7 +24,6 @@ insecure@1.0.3
 jquery@1.11.3_2
 json@1.0.3
 launch-screen@1.0.2
-less@1.0.14
 livedata@1.0.13
 localstorage@1.0.3
 logging@1.0.7
diff --git a/colors.css b/colors.css
index b6b4052..c18dec8 100644
--- a/colors.css
+++ b/colors.css
@@ -1 +1,98 @@
-/* CSS declarations go here */
+/* Base styles */
+#login-buttons-instagram {
+  font-size: 1.2em;
+  font-family: sans-serif;
+  color:#333;
+	text-shadow:1px 1px #fff;
+	text-decoration: none;
+	display:inline-block; 
+	padding:0.5em 1.75em 0.5em 1em;
+	border-radius: 0.25em;
+	background: #f8f8f8;
+	border:1px solid #ccc;
+	border-right:0.25em solid #00558D; /* blue stripe */
+	position: relative;
+	margin:0 0 1px; 
+}
+
+#login-buttons-instagram:before, #login-buttons-instagram:after {
+	content:'';
+	display:block;
+	position: absolute;
+}
+
+/* Add Stripes */
+#login-buttons-instagram:before {
+	width:0.25em;
+	height: 100%;
+	background:#FBB03B; /* yellow stripe */ 
+	border-left:0.25em solid #D4145A; /* red stripe */ 
+	border-right:0.25em solid #00A99D; /* green stripe */ 
+	top:0;
+	right:0;
+}
+
+/* Add Hightlights */
+#login-buttons-instagram:after {
+	width:100%;
+	height: 100%;
+	top: 0;
+	left: 0;
+	border-radius: 0.25em;
+	padding-left: 0.25em;
+	box-shadow: inset 1px 1px 0px rgba(255,255,255,0.5), inset -1px -1px 0 rgba(0,0,0,0.1);
+
+background: -moz-linear-gradient(top,  rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.2) 49%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.1) 100%);
+background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.35)), color-stop(49%,rgba(255,255,255,0.2)), color-stop(50%,rgba(255,255,255,0)), color-stop(100%,rgba(0,0,0,0.1)));
+background: -webkit-linear-gradient(top,  rgba(255,255,255,0.35) 0%,rgba(255,255,255,0.2) 49%,rgba(255,255,255,0) 50%,rgba(0,0,0,0.1) 100%);
+background: -o-linear-gradient(top,  rgba(255,255,255,0.35) 0%,rgba(255,255,255,0.2) 49%,rgba(255,255,255,0) 50%,rgba(0,0,0,0.1) 100%);
+background: -ms-linear-gradient(top,  rgba(255,255,255,0.35) 0%,rgba(255,255,255,0.2) 49%,rgba(255,255,255,0) 50%,rgba(0,0,0,0.1) 100%);
+background: linear-gradient(to bottom,  rgba(255,255,255,0.35) 0%,rgba(255,255,255,0.2) 49%,rgba(255,255,255,0) 50%,rgba(0,0,0,0.1) 100%);
+filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#59ffffff', endColorstr='#1a000000',GradientType=0 );
+
+}
+
+
+/* Animate - Fade */
+#login-buttons-instagram, #login-buttons-instagram:before {
+    -webkit-transition-property: background, border;
+    -webkit-transition: 0.1s ease-in;
+    -moz-transition-property: background, border;
+    -moz-transition: 0.1s ease-in;
+    -o-transition-property: background, border;
+    -o-transition: 0.1s ease-in;
+    transition-property: background, border;
+    transition: 0.1s ease-in;
+
+}
+
+/* Hover / Focus */
+#login-buttons-instagram:hover, #login-buttons-instagram:focus  {
+	background: #fff;
+}
+
+#login-buttons-instagram:hover {
+	border-right:0.25em solid #09c;
+}
+
+#login-buttons-instagram:hover:before {
+	background:#fc6; /* yellow stripe */ 
+	border-left:0.25em solid #f06; /* red stripe */ 
+	border-right:0.25em solid #0cc; /* green stripe */ 
+}
+
+#login-buttons-instagram:hover:after {
+background: -moz-linear-gradient(top,  rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.1) 49%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.05) 100%);
+background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.25)), color-stop(49%,rgba(255,255,255,0.1)), color-stop(50%,rgba(255,255,255,0)), color-stop(100%,rgba(0,0,0,0.05)));
+background: -webkit-linear-gradient(top,  rgba(255,255,255,0.25) 0%,rgba(255,255,255,0.1) 49%,rgba(255,255,255,0) 50%,rgba(0,0,0,0.05) 100%);
+background: -o-linear-gradient(top,  rgba(255,255,255,0.25) 0%,rgba(255,255,255,0.1) 49%,rgba(255,255,255,0) 50%,rgba(0,0,0,0.05) 100%);
+background: -ms-linear-gradient(top,  rgba(255,255,255,0.25) 0%,rgba(255,255,255,0.1) 49%,rgba(255,255,255,0) 50%,rgba(0,0,0,0.05) 100%);
+background: linear-gradient(to bottom,  rgba(255,255,255,0.25) 0%,rgba(255,255,255,0.1) 49%,rgba(255,255,255,0) 50%,rgba(0,0,0,0.05) 100%);
+filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#40ffffff', endColorstr='#0d000000',GradientType=0 );
+
+}
+
+/* Active */
+#login-buttons-instagram:active {
+	margin:1px 0 0; 
+}
\ No newline at end of file