Aroy/Rinkusu
1
1
Fork 0
mirror of https://github.com/Aroy-Art/Rinkusu.git synced 2024-10-18 20:09:35 +00:00
Code Issues 5 Projects Releases Packages Wiki Activity

Update: Sharing buttons styling

Browse source
This commit is contained in:
Aroy-Art 2022-02-03 10:04:33 +01:00
parent 97478ec9ef
commit f21ff4ef04
Signed by: Aroy
GPG key ID: DB9689E9391DD156
1 changed files with 130 additions and 76 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

206
assets/css/style.css
View file

@ -1528,225 +1528,279 @@ img.loaded video.loaded {
} }
/*================================================================== /*==================================================================
Social sharing buttons from Sharingbuttons.io Social sharing buttons from Sharingbuttons.io
==================================================================*/ ==================================================================*/
.resp-sharing-button__link, .resp-sharing-button__link,
.resp-sharing-button__icon { .resp-sharing-button__icon {
display: inline-block display: inline-block
} }
.resp-sharing-button__link { .resp-sharing-button__link {
text-decoration: none; text-decoration: none;
color: #fff; color: #fff;
margin: 0.5em margin: 0.5em
} }
.resp-sharing-button { .resp-sharing-button {
border-radius: 50%; border-radius: 5px;
transition: 25ms ease-out; transition: 25ms ease-out;
padding: 0.5em 0.75em; padding: 0.5em 0.75em;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-family: Helvetica Neue,Helvetica,Arial,sans-serif
} }
.resp-sharing-button__icon svg { .resp-sharing-button__icon svg {
width: 1em; width: 1em;
height: 1em; height: 1em;
margin-right: 0.4em; margin-right: 0.4em;
vertical-align: top vertical-align: top
} }
.resp-sharing-button--small svg { .resp-sharing-button--small svg {
margin: 0; margin: 0;
vertical-align: middle vertical-align: middle
} }
/* Non solid icons get a stroke */ /* Non solid icons get a stroke */
.resp-sharing-button__icon { .resp-sharing-button__icon {
stroke: #fff; stroke: #fff;
fill: none fill: none
} }
/* Solid icons get a fill */ /* Solid icons get a fill */
.resp-sharing-button__icon--solid, .resp-sharing-button__icon--solid,
.resp-sharing-button__icon--solidcircle { .resp-sharing-button__icon--solidcircle {
fill: #fff; fill: #fff;
stroke: none stroke: none
} }
.resp-sharing-button--twitter { .resp-sharing-button--twitter {
background-color: #55acee background-color: #55acee
} }
.resp-sharing-button--twitter:hover { .resp-sharing-button--twitter:hover {
background-color: #2795e9 background-color: #2795e9
} }
.resp-sharing-button--pinterest { .resp-sharing-button--pinterest {
background-color: #bd081c background-color: #bd081c
} }
.resp-sharing-button--pinterest:hover { .resp-sharing-button--pinterest:hover {
background-color: #8c0615 background-color: #8c0615
} }
.resp-sharing-button--facebook { .resp-sharing-button--facebook {
background-color: #3b5998 background-color: #3b5998
} }
.resp-sharing-button--facebook:hover { .resp-sharing-button--facebook:hover {
background-color: #2d4373 background-color: #2d4373
} }
.resp-sharing-button--tumblr { .resp-sharing-button--tumblr {
background-color: #35465C background-color: #35465C
} }
.resp-sharing-button--tumblr:hover { .resp-sharing-button--tumblr:hover {
background-color: #222d3c background-color: #222d3c
} }
.resp-sharing-button--reddit { .resp-sharing-button--reddit {
background-color: #5f99cf background-color: #5f99cf
} }
.resp-sharing-button--reddit:hover { .resp-sharing-button--reddit:hover {
background-color: #3a80c1 background-color: #3a80c1
} }
.resp-sharing-button--google { .resp-sharing-button--google {
background-color: #dd4b39 background-color: #dd4b39
} }
.resp-sharing-button--google:hover { .resp-sharing-button--google:hover {
background-color: #c23321 background-color: #c23321
} }
.resp-sharing-button--linkedin { .resp-sharing-button--linkedin {
background-color: #0077b5 background-color: #0077b5
} }
.resp-sharing-button--linkedin:hover { .resp-sharing-button--linkedin:hover {
background-color: #046293 background-color: #046293
} }
.resp-sharing-button--email { .resp-sharing-button--email {
background-color: #777 background-color: #777
} }
.resp-sharing-button--email:hover { .resp-sharing-button--email:hover {
background-color: #5e5e5e background-color: #5e5e5e
} }
.resp-sharing-button--xing { .resp-sharing-button--xing {
background-color: #1a7576 background-color: #1a7576
} }
.resp-sharing-button--xing:hover { .resp-sharing-button--xing:hover {
background-color: #114c4c background-color: #114c4c
} }
.resp-sharing-button--whatsapp { .resp-sharing-button--whatsapp {
background-color: #25D366 background-color: #25D366
} }
.resp-sharing-button--whatsapp:hover { .resp-sharing-button--whatsapp:hover {
background-color: #1da851 background-color: #1da851
} }
.resp-sharing-button--hackernews { .resp-sharing-button--hackernews {
background-color: #FF6600 background-color: #FF6600
} }
.resp-sharing-button--hackernews:hover,
.resp-sharing-button--hackernews:hover, .resp-sharing-button--hackernews:focus {
.resp-sharing-button--hackernews:focus { background-color: #FB6200
background-color: #FB6200
} }
.resp-sharing-button--vk { .resp-sharing-button--vk {
background-color: #507299 background-color: #507299
} }
.resp-sharing-button--vk:hover { .resp-sharing-button--vk:hover {
background-color: #43648c background-color: #43648c
} }
.resp-sharing-button--facebook { .resp-sharing-button--facebook {
background-color: #3b5998; background-color: #3b5998;
border-color: #3b5998; border-color: #3b5998;
} }
.resp-sharing-button--facebook:hover, .resp-sharing-button--facebook:hover,
.resp-sharing-button--facebook:active { .resp-sharing-button--facebook:active {
background-color: #2d4373; background-color: #2d4373;
border-color: #2d4373; border-color: #2d4373;
} }
.resp-sharing-button--twitter { .resp-sharing-button--twitter {
background-color: #55acee; background-color: #55acee;
border-color: #55acee; border-color: #55acee;
} }
.resp-sharing-button--twitter:hover, .resp-sharing-button--twitter:hover,
.resp-sharing-button--twitter:active { .resp-sharing-button--twitter:active {
background-color: #2795e9; background-color: #2795e9;
border-color: #2795e9; border-color: #2795e9;
} }
.resp-sharing-button--google { .resp-sharing-button--tumblr {
background-color: #dd4b39; background-color: #35465C;
border-color: #dd4b39; border-color: #35465C;
} }
.resp-sharing-button--google:hover, .resp-sharing-button--tumblr:hover,
.resp-sharing-button--google:active { .resp-sharing-button--tumblr:active {
background-color: #c23321; background-color: #222d3c;
border-color: #c23321; border-color: #222d3c;
} }
.resp-sharing-button--email { .resp-sharing-button--email {
background-color: #777777; background-color: #777777;
border-color: #777777; border-color: #777777;
} }
.resp-sharing-button--email:hover, .resp-sharing-button--email:hover,
.resp-sharing-button--email:active { .resp-sharing-button--email:active {
background-color: #5e5e5e; background-color: #5e5e5e;
border-color: #5e5e5e; border-color: #5e5e5e;
}
.resp-sharing-button--pinterest {
background-color: #bd081c;
border-color: #bd081c;
}
.resp-sharing-button--pinterest:hover,
.resp-sharing-button--pinterest:active {
background-color: #8c0615;
border-color: #8c0615;
}
.resp-sharing-button--linkedin {
background-color: #0077b5;
border-color: #0077b5;
}
.resp-sharing-button--linkedin:hover,
.resp-sharing-button--linkedin:active {
background-color: #046293;
border-color: #046293;
} }
.resp-sharing-button--reddit { .resp-sharing-button--reddit {
background-color: #5f99cf; background-color: #5f99cf;
border-color: #5f99cf; border-color: #5f99cf;
} }
.resp-sharing-button--reddit:hover, .resp-sharing-button--reddit:hover,
.resp-sharing-button--reddit:active { .resp-sharing-button--reddit:active {
background-color: #3a80c1; background-color: #3a80c1;
border-color: #3a80c1; border-color: #3a80c1;
}
.resp-sharing-button--xing {
background-color: #1a7576;
border-color: #1a7576;
}
.resp-sharing-button--xing:hover
.resp-sharing-button--xing:active {
background-color: #114C4C;
border-color: #114C4C;
} }
.resp-sharing-button--whatsapp { .resp-sharing-button--whatsapp {
background-color: #25D366; background-color: #25D366;
border-color: #25D366; border-color: #25D366;
} }
.resp-sharing-button--whatsapp:hover, .resp-sharing-button--whatsapp:hover,
.resp-sharing-button--whatsapp:active { .resp-sharing-button--whatsapp:active {
background-color: #1DA851; background-color: #1DA851;
border-color: #1DA851; border-color: #1DA851;
}
.resp-sharing-button--hackernews {
background-color: #FF6600;
border-color: #FF6600;
}
.resp-sharing-button--hackernews:hover
.resp-sharing-button--hackernews:active {
background-color: #FB6200;
border-color: #FB6200;
}
.resp-sharing-button--vk {
background-color: #507299;
border-color: #507299;
}
.resp-sharing-button--vk:hover
.resp-sharing-button--vk:active {
background-color: #43648c;
border-color: #43648c;
} }
.resp-sharing-button--telegram { .resp-sharing-button--telegram {
background-color: #54A9EB; background-color: #54A9EB;
} }
.resp-sharing-button--telegram:hover { .resp-sharing-button--telegram:hover {
background-color: #4B97D1; background-color: #4B97D1;
} }
/*================================================================== /*==================================================================
Cookie Box Cookie Box
==================================================================*/ ==================================================================*/