From d2be6ac4043ea0c3a8cd574ebf5f8acb6018e07f Mon Sep 17 00:00:00 2001 From: Yuval Adam Date: Mon, 8 Jun 2015 17:19:46 +0300 Subject: Style Instagram login button --- .meteor/packages | 2 +- .meteor/platforms | 3 +- .meteor/versions | 2 -- colors.css | 99 ++++++++++++++++++++++++++++++++++++++++++++++++++++++- 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 -- cgit v1.3.1