@charset "UTF-8"; /*! Zocial Butons http://zocial.smcllns.com by Sam Collins (@smcllns) License: http://opensource.org/licenses/mit-license.php You are free to use and modify, as long as you keep this license comment intact or link back to zocial.smcllns.com on your site. The GitLab logo is derived from https://gitlab.com/gitlab-com/gitlab-artwork/blob/a3aaa39c184e49bb3a0ba0d8be74718b3d5b887b/logo/logo-square.svg which is released under CC BY-NC-SA 4.0. */ /* Button structure */ .zocial, a.zocial { border: 1px solid #777; border-color: rgba(0,0,0,0.2); border-bottom-color: #333; border-bottom-color: rgba(0,0,0,0.4); color: #fff; -moz-box-shadow: inset 0 0.08em 0 rgba(255,255,255,0.4), inset 0 0 0.1em rgba(255,255,255,0.9); -webkit-box-shadow: inset 0 0.08em 0 rgba(255,255,255,0.4), inset 0 0 0.1em rgba(255,255,255,0.9); box-shadow: inset 0 0.08em 0 rgba(255,255,255,0.4), inset 0 0 0.1em rgba(255,255,255,0.9); cursor: pointer; display: inline-block; font: bold 100%/2.1 "Lucida Grande", Tahoma, sans-serif; padding: 0 .95em 0 0; text-align: center; text-decoration: none; text-shadow: 0 1px 0 rgba(0,0,0,0.5); white-space: nowrap; -moz-user-select: none; -webkit-user-select: none; user-select: none; position: relative; -moz-border-radius: .3em; -webkit-border-radius: .3em; border-radius: .3em; } .zocial:before { content: ""; border-right: 0.075em solid rgba(0,0,0,0.1); float: left; font: 120%/1.65 zocial; font-style: normal; font-weight: normal; margin: 0 0.5em 0 0; padding: 0 0.5em; text-align: center; text-decoration: none; text-transform: none; -moz-box-shadow: 0.075em 0 0 rgba(255,255,255,0.25); -webkit-box-shadow: 0.075em 0 0 rgba(255,255,255,0.25); box-shadow: 0.075em 0 0 rgba(255,255,255,0.25); -moz-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; } .zocial:active { outline: none; /* outline is visible on :focus */ } .zocial:hover, .zocial:focus { color: #fff; } /* Buttons can be displayed as standalone icons by adding a class of "icon" */ .zocial.icon { overflow: hidden; max-width: 2.4em; padding-left: 0; padding-right: 0; max-height: 2.15em; white-space: nowrap; } .zocial.icon:before { padding: 0; width: 2em; height: 2em; box-shadow: none; border: none; } /* Gradients */ .zocial { background-image: -moz-linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,.05) 49%, rgba(0,0,0,.05) 51%, rgba(0,0,0,.1)); background-image: -ms-linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,.05) 49%, rgba(0,0,0,.05) 51%, rgba(0,0,0,.1)); background-image: -o-linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,.05) 49%, rgba(0,0,0,.05) 51%, rgba(0,0,0,.1)); background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.1)), color-stop(49%, rgba(255,255,255,.05)), color-stop(51%, rgba(0,0,0,.05)), to(rgba(0,0,0,.1))); background-image: -webkit-linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,.05) 49%, rgba(0,0,0,.05) 51%, rgba(0,0,0,.1)); background-image: linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,.05) 49%, rgba(0,0,0,.05) 51%, rgba(0,0,0,.1)); } .zocial:hover, .zocial:focus { background-image: -moz-linear-gradient(rgba(255,255,255,.15) 49%, rgba(0,0,0,.1) 51%, rgba(0,0,0,.15)); background-image: -ms-linear-gradient(rgba(255,255,255,.15) 49%, rgba(0,0,0,.1) 51%, rgba(0,0,0,.15)); background-image: -o-linear-gradient(rgba(255,255,255,.15) 49%, rgba(0,0,0,.1) 51%, rgba(0,0,0,.15)); background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.15)), color-stop(49%, rgba(255,255,255,.15)), color-stop(51%, rgba(0,0,0,.1)), to(rgba(0,0,0,.15))); background-image: -webkit-linear-gradient(rgba(255,255,255,.15) 49%, rgba(0,0,0,.1) 51%, rgba(0,0,0,.15)); background-image: linear-gradient(rgba(255,255,255,.15) 49%, rgba(0,0,0,.1) 51%, rgba(0,0,0,.15)); } .zocial:active { background-image: -moz-linear-gradient(bottom, rgba(255,255,255,.1), rgba(255,255,255,0) 30%, transparent 50%, rgba(0,0,0,.1)); background-image: -ms-linear-gradient(bottom, rgba(255,255,255,.1), rgba(255,255,255,0) 30%, transparent 50%, rgba(0,0,0,.1)); background-image: -o-linear-gradient(bottom, rgba(255,255,255,.1), rgba(255,255,255,0) 30%, transparent 50%, rgba(0,0,0,.1)); background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.1)), color-stop(30%, rgba(255,255,255,0)), color-stop(50%, transparent), to(rgba(0,0,0,.1))); background-image: -webkit-linear-gradient(bottom, rgba(255,255,255,.1), rgba(255,255,255,0) 30%, transparent 50%, rgba(0,0,0,.1)); background-image: linear-gradient(bottom, rgba(255,255,255,.1), rgba(255,255,255,0) 30%, transparent 50%, rgba(0,0,0,.1)); } /* Adjustments for light background buttons */ .zocial.acrobat, .zocial.bitcoin, .zocial.cloudapp, .zocial.dropbox, .zocial.email, .zocial.eventful, .zocial.github, .zocial.gitlab, .zocial.gmail, .zocial.instapaper, .zocial.itunes, .zocial.ninetyninedesigns, .zocial.openid, .zocial.plancast, .zocial.pocket, .zocial.posterous, .zocial.reddit, .zocial.secondary, .zocial.stackoverflow, .zocial.viadeo, .zocial.weibo, .zocial.wikipedia, .zocial.www { border: 1px solid #aaa; border-color: rgba(0,0,0,0.3); border-bottom-color: #777; border-bottom-color: rgba(0,0,0,0.5); -moz-box-shadow: inset 0 0.08em 0 rgba(255,255,255,0.7), inset 0 0 0.08em rgba(255,255,255,0.5); -webkit-box-shadow: inset 0 0.08em 0 rgba(255,255,255,0.7), inset 0 0 0.08em rgba(255,255,255,0.5); box-shadow: inset 0 0.08em 0 rgba(255,255,255,0.7), inset 0 0 0.08em rgba(255,255,255,0.5); text-shadow: 0 1px 0 rgba(255,255,255,0.8); } /* :hover adjustments for light background buttons */ .zocial.acrobat:focus, .zocial.acrobat:hover, .zocial.bitcoin:focus, .zocial.bitcoin:hover, .zocial.dropbox:focus, .zocial.dropbox:hover, .zocial.email:focus, .zocial.email:hover, .zocial.eventful:focus, .zocial.eventful:hover, .zocial.github:focus, .zocial.github:hover, .zocial.gitlab:focus, .zocial.gitlab:hover, .zocial.gmail:focus, .zocial.gmail:hover, .zocial.instapaper:focus, .zocial.instapaper:hover, .zocial.itunes:focus, .zocial.itunes:hover, .zocial.ninetyninedesigns:focus, .zocial.ninetyninedesigns:hover, .zocial.openid:focus, .zocial.openid:hover, .zocial.plancast:focus, .zocial.plancast:hover, .zocial.pocket:focus, .zocial.pocket:hover, .zocial.posterous:focus, .zocial.posterous:hover, .zocial.reddit:focus, .zocial.reddit:hover, .zocial.secondary:focus, .zocial.secondary:hover, .zocial.stackoverflow:focus, .zocial.stackoverflow:hover, .zocial.twitter:focus, .zocial.viadeo:focus, .zocial.viadeo:hover, .zocial.weibo:focus, .zocial.weibo:hover, .zocial.wikipedia:focus, .zocial.wikipedia:hover, .zocial.www:focus, .zocial.www:hover, .zocial.houzz:focus, .zocial.houzz:hover, .zocial.pandora:focus, .zocial.pandora:hover { background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.5)), color-stop(49%, rgba(255,255,255,0.2)), color-stop(51%, rgba(0,0,0,0.05)), to(rgba(0,0,0,0.15))); background-image: -moz-linear-gradient(top, rgba(255,255,255,0.5), rgba(255,255,255,0.2) 49%, rgba(0,0,0,0.05) 51%, rgba(0,0,0,0.15)); background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.5), rgba(255,255,255,0.2) 49%, rgba(0,0,0,0.05) 51%, rgba(0,0,0,0.15)); background-image: -o-linear-gradient(top, rgba(255,255,255,0.5), rgba(255,255,255,0.2) 49%, rgba(0,0,0,0.05) 51%, rgba(0,0,0,0.15)); background-image: -ms-linear-gradient(top, rgba(255,255,255,0.5), rgba(255,255,255,0.2) 49%, rgba(0,0,0,0.05) 51%, rgba(0,0,0,0.15)); background-image: linear-gradient(top, rgba(255,255,255,0.5), rgba(255,255,255,0.2) 49%, rgba(0,0,0,0.05) 51%, rgba(0,0,0,0.15)); } .zocial.gitlab:focus, .zocial.gitlab:hover { color: #d3371e; } /* :active adjustments for light background buttons */ .zocial.acrobat:active, .zocial.askfm:active, .zocial.bitcoin:active, .zocial.dropbox:active, .zocial.email:active, .zocial.eventful:active, .zocial.github:active, .zocial.gitlab:active, .zocial.gmail:active, .zocial.instapaper:active, .zocial.itunes:active, .zocial.ninetyninedesigns:active, .zocial.openid:active, .zocial.plancast:active, .zocial.pocket:active, .zocial.posterous:active, .zocial.reddit:active, .zocial.secondary:active, .zocial.stackoverflow:active, .zocial.viadeo:active, .zocial.weibo:active, .zocial.wikipedia:active, .zocial.www:active { background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0)), color-stop(30%, rgba(255,255,255,0)), color-stop(50%, rgba(0,0,0,0)), to(rgba(0,0,0,0.1))); background-image: -moz-linear-gradient(bottom, rgba(255,255,255,0), rgba(255,255,255,0) 30%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.1)); background-image: -webkit-linear-gradient(bottom, rgba(255,255,255,0), rgba(255,255,255,0) 30%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.1)); background-image: -o-linear-gradient(bottom, rgba(255,255,255,0), rgba(255,255,255,0) 30%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.1)); background-image: -ms-linear-gradient(bottom, rgba(255,255,255,0), rgba(255,255,255,0) 30%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.1)); background-image: linear-gradient(bottom, rgba(255,255,255,0), rgba(255,255,255,0) 30%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.1)); } /* Button icon */ <%= glyphs %> /* Button color */ .zocial.acrobat:before {color: #FB0000;} .zocial.bitcoin:before {color: #f7931a;} .zocial.deviantart:before {color: #05cc47;} .zocial.dropbox:before {color: #1f75cc;} .zocial.drupal:before {color: #fff;} .zocial.email:before {color: #312c2a;} .zocial.eventasaurus:before {color: #9de428;} .zocial.eventful:before {color: #0066CC;} .zocial.fivehundredpx:before {color: #29b6ff;} .zocial.forrst:before {color: #50894f;} .zocial.gmail:before {color: #f00;} .zocial.itunes:before {color: #1a6dd2;} .zocial.lego:before {color:#fff900;} .zocial.ninetyninedesigns:before {color: #f50;} .zocial.openid:before {color: #ff921d;} .zocial.pocket:before {color:#ee4056;} .zocial.persona:before {color:#fff;} .zocial.reddit:before {color: red;} .zocial.scribd:before {color: #00d5ea;} .zocial.stackoverflow:before {color: #ff7a15;} .zocial.statusnet:before {color: #fff;} .zocial.viadeo:before {color: #f59b20;} .zocial.weibo:before {color: #e6162d;} .zocial.houzz:before {color: #ffffff;} .zocial.slack:before {color: #fff;} .zocial.pandora:before {color: #fff;} /* Button background and text color */ .zocial.acrobat {background-color: #fff; color: #000;} .zocial.amazon {background-color: #ffad1d; color: #030037; text-shadow: 0 1px 0 rgba(255,255,255,0.5);} .zocial.android {background-color: #a4c639;} .zocial.angellist {background-color: #000;} .zocial.aol {background-color: #f00;} .zocial.appnet {background-color: #3178bd;} .zocial.appstore {background-color: #000;} .zocial.askfm {background-color: #fd6547;} .zocial.betaseries {background-color: #0099e1;} .zocial.bitbucket {background-color: #205081;} .zocial.bitcoin {background-color: #efefef; color: #4d4d4d;} .zocial.blogger {background-color: #ee5a22;} .zocial.buffer {background-color: #232323;} .zocial.call {background-color: #008000;} .zocial.cal {background-color: #d63538;} .zocial.cart {background-color: #333;} .zocial.chrome {background-color: #006cd4;} .zocial.cloudapp {background-color: #fff; color: #312c2a;} .zocial.creativecommons {background-color: #000;} .zocial.delicious {background-color: #3271cb;} .zocial.deviantart {background-color: #475c4d;} .zocial.digg {background-color: #164673;} .zocial.discordapp {background-color: #7289da; color: #fff;} .zocial.disqus {background-color: #5d8aad;} .zocial.dribbble {background-color: #ea4c89;} .zocial.dropbox {background-color: #fff; color: #312c2a;} .zocial.drupal {background-color: #0077c0; color: #fff;} .zocial.dwolla {background-color: #e88c02;} .zocial.joinme {background-color: #FF8E00;} .zocial.email {background-color: #f0f0eb; color: #312c2a;} .zocial.eventasaurus {background-color: #192931; color: #fff;} .zocial.eventbrite {background-color: #ff5616;} .zocial.eventful {background-color: #fff; color: #47ab15;} .zocial.evernote {background-color: #6bb130; color: #fff;} .zocial.facebook {background-color: #4863ae;} .zocial.fivehundredpx {background-color: #333;} .zocial.flattr {background-color: #8aba42;} .zocial.flickr {background-color: #ff0084;} .zocial.forrst {background-color: #1e360d;} .zocial.foursquare {background-color: #44a8e0;} .zocial.github {background-color: #fbfbfb; color: #050505;} .zocial.gitlab {background-color: #fff; color: #e14329;} .zocial.gmail {background-color: #efefef; color: #222;} .zocial.google {background-color: #4e6cf7;} .zocial.googleplay {background-color: #000;} .zocial.googleplus {background-color: #dd4b39;} .zocial.gowalla {background-color: #ff720a;} .zocial.grooveshark {background-color: #111; color:#eee;} .zocial.guest {background-color: #1b4d6d;} .zocial.html5 {background-color: #ff3617;} .zocial.ie {background-color: #00a1d9;} .zocial.instapaper {background-color: #eee; color: #222;} .zocial.instagram {background-color: #3f729b;} .zocial.intensedebate {background-color: #0099e1;} .zocial.klout {background-color: #e34a25;} .zocial.itunes {background-color: #efefeb; color: #312c2a;} .zocial.lanyrd {background-color: #2e6ac2;} .zocial.lastfm {background-color: #dc1a23;} .zocial.lego {background-color: #fb0000;} .zocial.linkedin {background-color: #0083a8;} .zocial.lkdto {background-color: #7c786f;} .zocial.logmein {background-color: #000;} .zocial.macstore {background-color: #007dcb} .zocial.meetup {background-color: #ff0026;} .zocial.messenger {background-color: #0078FF;} .zocial.myspace {background-color: #000;} .zocial.ninetyninedesigns {background-color: #fff; color: #072243;} .zocial.openid {background-color: #f5f5f5; color: #333;} .zocial.opentable {background-color: #990000;} .zocial.paypal {background-color: #fff; color: #32689a; text-shadow: 0 1px 0 rgba(255,255,255,0.5);} .zocial.persona {background-color: #1258a1; color: #fff;} .zocial.pinboard {background-color: blue;} .zocial.pinterest {background-color: #c91618;} .zocial.plancast {background-color: #e7ebed; color: #333;} .zocial.plurk {background-color: #cf682f;} .zocial.pocket {background-color: #fff; color: #777;} .zocial.podcast {background-color: #9365ce;} .zocial.posterous {background-color: #ffd959; color: #bc7134;} .zocial.print {background-color: #f0f0eb; color: #222; text-shadow: 0 1px 0 rgba(255,255,255,0.8);} .zocial.quora {background-color: #a82400;} .zocial.reddit {background-color: #fff; color: #222;} .zocial.rss {background-color: #ff7f25;} .zocial.scribd {background-color: #231c1a;} .zocial.skype {background-color: #00a2ed;} .zocial.smashing {background-color: #ff4f27;} .zocial.songkick {background-color: #ff0050;} .zocial.soundcloud {background-color: #ff4500;} .zocial.spotify {background-color: #60af00;} .zocial.stackoverflow {background-color: #fff; color: #555;} .zocial.statusnet {background-color: #829d25;} .zocial.steam {background-color: #000;} .zocial.stripe {background-color: #2f7ed6;} .zocial.stumbleupon {background-color: #eb4924;} .zocial.tumblr {background-color: #374a61;} .zocial.twitter {background-color: #46c0fb;} .zocial.twitch {background-color: #6441A5;} .zocial.viadeo {background-color: #fff; color: #000;} .zocial.vimeo {background-color: #00a2cd;} .zocial.vk {background-color: #45688E;} .zocial.weibo {background-color: #faf6f1; color: #000;} .zocial.wikipedia {background-color: #fff; color: #000;} .zocial.windows {background-color: #0052a4; color: #fff;} .zocial.wordpress {background-color: #464646;} .zocial.www {background-color: #fff; color: #000;} .zocial.xing {background-color: #0a5d5e;} .zocial.yahoo {background-color: #a200c2;} .zocial.ycombinator {background-color: #ff6600;} .zocial.yelp {background-color: #e60010;} .zocial.youtube {background-color: #f00;} .zocial.houzz {background-color: #9ac641; color: #fff;} .zocial.slack {background-color: #3eb890; color: #fff;} .zocial.pandora {background-color: #4e9cca; color: #fff;} /* The Miscellaneous Buttons These button have no icons and can be general purpose buttons while ensuring consistent button style Credit to @guillermovs for suggesting */ .zocial.primary, .zocial.secondary {margin: 0.1em 0; padding: 0 1em;} .zocial.primary:before, .zocial.secondary:before {display: none;} .zocial.primary {background-color: #333;} .zocial.secondary {background-color: #f0f0eb; color: #222; text-shadow: 0 1px 0 rgba(255,255,255,0.8);} /* Any browser-specific adjustments */ button:-moz-focus-inner { border: 0; padding: 0; } /* Reference icons from font-files ** Base 64-encoded version recommended to resolve cross-site font-loading issues */ <% require 'base64' %> @font-face { font-family: "<%= font_name %>"; src: url("<%= @font_path %>.eot"); src: url("<%= @font_path %>.eot?#iefix") format("embedded-opentype"), url(data:application/x-font-woff;charset=utf-8;base64,<%= Base64.encode64(File.read(File.join(@options[:output][:fonts], "#{@font_path_alt}.woff"))).split("\n").join("") %>), url("<%= @font_path %>.woff") format("woff"), url("<%= @font_path %>.ttf") format("truetype"), url("<%= @font_path %>.svg#<%= font_name %>") format("svg"); font-weight: normal; font-style: normal; } @media screen and (-webkit-min-device-pixel-ratio:0) { @font-face { font-family: "<%= font_name %>"; src: url("<%= @font_path %>.svg#<%= font_name %>") format("svg"); } }