Browse Source

rewrite and simplify css

Fernando Ribeiro 7 years ago
parent
commit
f95a05d7fd
1 changed files with 135 additions and 263 deletions
  1. 135 263
      style.css

+ 135 - 263
style.css

@@ -1,68 +1,43 @@
-/* -- Begin social sharing buttons
-------------------------------------------------------------- */
-
 .socialite {
 .socialite {
     padding-left: 0;
     padding-left: 0;
     list-style: none;
     list-style: none;
 }
 }
 
 
+.socialite li
+{
+    display: inline-block;
+    margin: .25em;
+    line-height: 24px;
+}
 
 
-[class*="socialite-link-"] {
+.socialite li a {
     font-size: .875em;
     font-size: .875em;
     border-radius: 2px;
     border-radius: 2px;
     border: 1px solid;
     border: 1px solid;
     box-shadow: 0 0 .5em #999;
     box-shadow: 0 0 .5em #999;
     transition: background-color ease-in-out .5s, color ease-in-out .5s, border-color ease-in-out .5s, box-shadow ease-in-out .5s;
     transition: background-color ease-in-out .5s, color ease-in-out .5s, border-color ease-in-out .5s, box-shadow ease-in-out .5s;
-    width: 16px;
-    height: 16px;
 }
 }
 
 
-[class*="socialite-link-"]:hover {
+.socialite li a:hover {
     box-shadow: 0 0 1em #666;
     box-shadow: 0 0 1em #666;
 }
 }
 
 
-[class*="socialite-link-name-"] {
+.socialite li a:link,
-    padding: .25em .25em .25em 1.75em;
+.socialite li a:visited {
-}
-
-[class*="socialite-link-icon-"],
-[class*="socialite-link-color-"] {
-    padding: .25em .25em .25em .25em;
-}
-
-[class*="socialite-link-color-"],
-[class*="socialite-link-color-"]:hover {
-      color: #ffffff;
-}
-
-
-[class*="socialite-item-name-"],
-[class*="socialite-item-icon-"] {
-    background-size: 16px 16px;
-    background-repeat: no-repeat;
-    background-position: 5px center;
-}
-
-[class*="socialite-item-"] {
-    display: inline-block;
-    margin: .25em;
-    line-height: 24px;
-}
-
-[class*="socialite-item-"] a:link,
-[class*="socialite-item-"] a:visited {
     text-decoration: none;
     text-decoration: none;
 }
 }
 
 
-[class*="socialite-item-name-"] a:link,
+.socialite li.name a,
-[class*="socialite-item-name-"] a:visited,
+.socialite li.icon a {
-[class*="socialite-item-icon-"] a:link,
+    background-size: 1.25em;
-[class*="socialite-item-icon-"] a:visited {
+    background-repeat: no-repeat;
+    background-position: .25em center;
+    padding: .25em .25em .25em 1.75em;
     color: #000000;
     color: #000000;
 }
 }
-
+.socialite li.color a
-[class*="socialite-item-color-"] a:link,
+{
-[class*="socialite-item-color-"] a:visited {
+    padding: .25em .25em .25em .25em;
     color: #ffffff;
     color: #ffffff;
 }
 }
 
 
@@ -71,327 +46,224 @@
  * Social network specific settings
  * Social network specific settings
  */
  */
 
 
+
 /* Twitter */
 /* Twitter */
-.socialite-item-name-twitter {
-    background-image: url("images/twitter.svg");
-}
-.socialite-link-icon-twitter{
-    content:url("images/twitter.svg");
-}
 
 
-.socialite-link-name-twitter,
+.socialite li.name .twitter,
-.socialite-link-icon-twitter,
+.socialite li.icon .twitter,
-.socialite-link-color-twitter {
+.socialite li.color .twitter {
-    border-color: #41b7d8;
+   border-color: #1da1f3;
 }
 }
 
 
-.socialite-link-color-twitter {
+.socialite li.name .twitter,
-    background-color: #41b7d8;
+.socialite li.icon .twitter {
+    background-image: url("images/twitter.svg");
 }
 }
 
 
-.socialite-link-color-twitter:hover,
+.socialite li.color .twitter {
-a .socialite-link-color-twitter:hover {
+    background-color: #1da1f3;
-    background-color: #238caa;
-    border-color: #238caa;
 }
 }
 
 
 /* Facebook */
 /* Facebook */
-.socialite-item-name-facebook {
-    background-image: url("images/facebook.svg");
-}
 
 
-.socialite-link-icon-facebook{
+.socialite li.name .facebook,
-    content:url("images/facebook.svg");
+.socialite li.icon .facebook,
+.socialite li.color .facebook {
+   border-color: #3b5998;
 }
 }
 
 
-.socialite-link-name-facebook,
+.socialite li.name .facebook,
-.socialite-link-icon-facebook,
+.socialite li.icon .facebook {
-.socialite-link-color-facebook {
+    background-image: url("images/facebook.svg");
-    border-color: #3b5997;
-}
-
-.socialite-link-color-facebook {
-    background-color: #3b5997;
 }
 }
 
 
-.socialite-link-color-facebook:hover,
+.socialite li.color .facebook {
-a .socialite-link-color-facebook:hover {
+    background-color: #3b5998;
-    background-color: #263960;
-    border-color: #263960;
 }
 }
 
 
 /* Google+ */
 /* Google+ */
-.socialite-item-name-googleplus {
-    background-image: url("images/google_plus.svg");
-}
-
-.socialite-link-icon-googleplus{
-    content:url("images/googleplus.svg");
-}
 
 
-.socialite-link-name-googleplus,
+.socialite li.name .googleplus,
-.socialite-link-icon-googleplus,
+.socialite li.icon .googleplus,
-.socialite-link-color-googleplus {
+.socialite li.color .googleplus {
-    border-color: #d64937;
+    border-color: #dd4f43;
 }
 }
 
 
-.socialite-link-color-googleplus {
+.socialite li.name .googleplus,
-    background-color: #d64937;
+.socialite li.icon .googleplus {
+    background-image: url("images/google_plus.svg");
 }
 }
 
 
-.socialite-link-color-googleplus:hover,
+.socialite li.color .googleplus {
-a .socialite-link-color-googleplus:hover {
+    background-color: #dd4f43;
-    background-color: #a02f21;
-    border-color: #a02f21;
 }
 }
 
 
 /* LinkedIn */
 /* LinkedIn */
-.socialite-item-name-linkedin {
-    background-image: url("images/linkedin.svg");
-}
-
-.socialite-link-icon-linkedin{
-    content:url("images/linkedin.svg");
-}
 
 
-.socialite-link-name-linkedin,
+.socialite li.name .linkedin,
-.socialite-link-icon-linkedin,
+.socialite li.icon .linkedin,
-.socialite-link-color-linkedin {
+.socialite li.color .linkedin {
-    border-color: #0073b2;
+    border-color: #0077b5;
 }
 }
 
 
-.socialite-link-color-linkedin {
+.socialite li.name .linkedin,
-    background-color: #0073b2;
+.socialite li.icon .linkedin {
-
+    background-image: url("images/linkedin.svg");
 }
 }
 
 
-.socialite-link-color-linkedin:hover,
+.socialite li.color .linkedin {
-a .socialite-link-color-linkedin:hover {
+    background-color: #0077b5;
-    background-color: #004265;
-    border-color: #004265;
 }
 }
 
 
 /* Pinterest */
 /* Pinterest */
-.socialite-item-name-pinterest {
-    background-image: url("images/pinterest.svg");
-}
-
-.socialite-link-icon-pinterest{
-    content:url("images/pinterest.svg");
-}
 
 
-.socialite-link-name-pinterest,
+.socialite li.name .pinterest,
-.socialite-link-icon-pinterest,
+.socialite li.icon .pinterest,
-.socialite-link-color-pinterest {
+.socialite li.color .pinterest {
-    border-color: #cb2027;
+    border-color: #bd081b;
 }
 }
 
 
-.socialite-link-color-pinterest {
+.socialite li.name .pinterest,
-    background-color: #cb2027;
+.socialite li.icon .pinterest {
+    background-image: url("images/pinterest.svg");
 }
 }
 
 
-.socialite-link-color-pinterest:hover,
+.socialite li.color .pinterest {
-a .socialite-link-color-pinterest:hover {
+    background-color: #bd081b;
-    background-color: #89161a;
-    border-color: #89161a;
 }
 }
 
 
 /* Tumblr */
 /* Tumblr */
-.socialite-item-name-tumblr {
-    background-image: url("images/tumblr.svg");
-}
 
 
-.socialite-link-icon-tumblr{
+.socialite li.name .tumblr,
-    content:url("images/tumblr.svg");
+.socialite li.icon .tumblr,
+.socialite li.color .tumblr {
+    border-color: #39475d;
 }
 }
 
 
-.socialite-link-name-tumblr,
+.socialite li.name .tumblr,
-.socialite-link-icon-tumblr,
+.socialite li.icon .tumblr {
-.socialite-link-color-tumblr {
+    background-image: url("images/tumblr.svg");
-    border-color: #35465c;
-}
-
-.socialite-link-color-tumblr {
-    background-color: #35465c;
 }
 }
 
 
-.socialite-link-color-tumblr:hover,
+.socialite li.color .tumblr {
-a .socialite-link-color-tumblr:hover {
+    background-color: #39475d;
-    background-color: #19212b;
-    border-color: #19212b;
 }
 }
 
 
 /* Reddit */
 /* Reddit */
-.socialite-item-name-reddit {
-    background-image: url("images/reddit.svg");
-}
-
-.socialite-link-icon-reddit{
-    content:url("images/reddit.svg");
-}
 
 
-.socialite-link-name-reddit,
+.socialite li.name .reddit,
-.socialite-link-icon-reddit,
+.socialite li.icon .reddit,
-.socialite-link-color-reddit {
+.socialite li.color .reddit {
-    border-color: #ff5700;
+    border-color: #ff4500;
 }
 }
 
 
-.socialite-link-color-reddit {
+.socialite li.name .reddit,
-    background-color: #ff5700;
+.socialite li.icon .reddit {
+    background-image: url("images/reddit.svg");
 }
 }
 
 
-.socialite-link-color-reddit:hover,
+.socialite li.color .reddit {
-a .socialite-link-color-reddit:hover {
+    background-color: #ff4500;
-    background-color: #b33d00;
-    border-color: #b33d00;
 }
 }
 
 
 /* Taringa */
 /* Taringa */
-.socialite-item-name-taringa {
-    background-image: url("images/taringa.svg");
-}
 
 
-.socialite-link-icon-taringa{
+.socialite li.name .taringa,
-    content:url("images/taringa.svg");
+.socialite li.icon .taringa,
+.socialite li.color .taringa {
+    border-color: #005dab;
 }
 }
 
 
-.socialite-link-name-taringa,
+.socialite li.name .taringa,
-.socialite-link-icon-taringa,
+.socialite li.icon .reddit {
-.socialite-link-color-taringa {
+    background-image: url("images/taringa.svg");
-    border-color: #005dab;
 }
 }
 
 
-.socialite-link-color-taringa {
+.socialite li.color .taringa {
     background-color: #005dab;
     background-color: #005dab;
 }
 }
 
 
-.socialite-link-color-taringa:hover,
+/* Delicious */
-a .socialite-link-color-taringa:hover {
-    background-color: #004178;
-    border-color: #004178;
-}
 
 
-/*  Delicious*/
+.socialite li.name .delicious,
-.socialite-item-name-delicious {
+.socialite li.icon .delicious,
-    background-image: url("images/delicious.svg");
+.socialite li.color .delicious {
+    border-color: #3399FF;
 }
 }
 
 
-.socialite-link-icon-delicious{
+.socialite li.name .delicious,
-    content:url("images/delicious.svg");
+.socialite li.icon .delicious {
+    background-image: url("images/delicious.svg");
 }
 }
 
 
-.socialite-link-name-delicious,
+.socialite li.color .delicious {
-.socialite-link-icon-delicious,
+    background-color: #3399FF;
-.socialite-link-color-delicious {
-    border-color: #3399ff;
 }
 }
 
 
-.socialite-link-color-delicious {
+/* StumbleUpon */
-    background-color: #3399ff;
-}
 
 
-.socialite-link-color-delicious:hover,
+.socialite li.name .stumbleupon,
-a .socialite-link-color-delicious:hover {
+.socialite li.icon .stumbleupon,
-    background-color: #297acc;
+.socialite li.color .stumbleupon {
-    border-color: #297acc;
+    border-color: #eb4924;
 }
 }
 
 
-/*  StumbleUpon*/
+.socialite li.name .stumbleupon,
-.socialite-item-name-stumbleupon {
+.socialite li.icon .stumbleupon {
     background-image: url("images/stumbleupon.svg");
     background-image: url("images/stumbleupon.svg");
 }
 }
 
 
-.socialite-link-icon-stumbleupon{
+.socialite li.color .stumbleupon {
-    content:url("images/stumbleupon.svg");
-}
-
-.socialite-link-name-stumbleupon,
-.socialite-link-icon-stumbleupon,
-.socialite-link-color-stumbleupon {
-    border-color: #eb4924;
-}
-
-.socialite-link-color-stumbleupon {
     background-color: #eb4924;
     background-color: #eb4924;
 }
 }
 
 
-.socialite-link-color-stumbleupon:hover,
-a .socialite-link-color-stumbleupon:hover {
-    background-color: #bc3a1d;
-    border-color: #bc3a1d;
-}
-
 /* Xing */
 /* Xing */
-.socialite-item-name-xing {
-    background-image: url("images/xing.svg");
-}
 
 
-.socialite-link-icon-xing{
+.socialite li.name .xing,
-    content:url("images/xing.svg");
+.socialite li.icon .xing,
-}
+.socialite li.color .xing {
-
-.socialite-link-name-xing,
-.socialite-link-icon-xing,
-.socialite-link-color-xing {
     border-color: #175e60;
     border-color: #175e60;
 }
 }
 
 
-.socialite-link-color-xing {
+.socialite li.name .xing,
-    background-color: #175e60;
+.socialite li.icon .xing {
+    background-image: url("images/xing.svg");
 }
 }
 
 
-.socialite-link-color-xing:hover,
+.socialite li.color .xing {
-a .socialite-link-color-xing:hover {
+    background-color: #175e60;
-    background-color: #082222;
-    border-color: #082222;
 }
 }
 
 
 /* Vk */
 /* Vk */
-.socialite-item-name-vk {
-    background-image: url("images/vk.svg");
-}
-
-.socialite-link-icon-vk{
-    content:url("images/vk.svg");
-}
 
 
-.socialite-link-name-vk,
+.socialite li.name .vk,
-.socialite-link-icon-vk,
+.socialite li.icon .vk,
-.socialite-link-color-vk {
+.socialite li.color .vk {
-    border-color: #5e82a8;
+    border-color: #4c75a3;
 }
 }
 
 
-.socialite-link-color-vk {
+.socialite li.name .vk,
-    background-color: #5e82a8;
+.socialite li.icon .vk {
+    background-image: url("images/vk.svg");
 }
 }
 
 
-.socialite-link-color-vk:hover,
+.socialite li.color .vk {
-a .socialite-link-color-vk:hover {
+    background-color: #4c75a3;
-    background-color: #415c78;
-    border-color: #415c78;
 }
 }
 
 
 /* Email */
 /* Email */
-.socialite-item-name-email {
-    background-image: url("images/email.svg");
-}
 
 
-.socialite-link-icon-email{
+.socialite li.name .email,
-    content:url("images/email.svg");
+.socialite li.icon .email,
+.socialite li.color .email {
+    border-color: #673147;
 }
 }
 
 
-.socialite-link-name-email,
+.socialite li.name .email,
-.socialite-link-icon-email,
+.socialite li.icon .email {
-.socialite-link-color-email {
+    background-image: url("images/email.svg");
-    border-color: #f4b83f;
-}
-
-.socialite-link-color-email {
-    background-color: #f4b83f;
 }
 }
 
 
-.socialite-link-color-email:hover,
+.socialite li.color .email {
-a .socialite-link-color-email:hover {
+    background-color: #673147;
-    background-color: #ab7b2c;
-    border-color: #ab7b2c;
 }
 }