Enhancing social media button responsiveness (focus styles).
Daniel Scalzi
parent
39fd7e19ef
commit
252b82a944
|
|
@ -1236,17 +1236,25 @@ p {
|
|||
height: 12px;
|
||||
width: 25px;
|
||||
}
|
||||
.mediaSVG:hover, .mediaSVG:active {
|
||||
.mediaSVG:hover,
|
||||
.mediaURL:focus .mediaSVG,
|
||||
.mediaSVG:active {
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
/* Social media URL shared styles. */
|
||||
.mediaURL {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* News icon colors. */
|
||||
#newsSVG {
|
||||
stroke: #ffffff;
|
||||
}
|
||||
|
||||
/* Twitter icon colors. */
|
||||
#twitterSVG:hover {
|
||||
#twitterSVG:hover,
|
||||
#twitterURL:focus #twitterSVG {
|
||||
fill: #1da1f2;
|
||||
}
|
||||
#twitterSVG:active {
|
||||
|
|
@ -1254,7 +1262,8 @@ p {
|
|||
}
|
||||
|
||||
/* Instagram icon colors. */
|
||||
#instagramSVG:hover {
|
||||
#instagramSVG:hover,
|
||||
#instagramURL:focus #instagramSVG {
|
||||
fill: url('#instaFill')
|
||||
/*fill: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); */
|
||||
}
|
||||
|
|
@ -1263,7 +1272,8 @@ p {
|
|||
}
|
||||
|
||||
/* Youtube icon colors. */
|
||||
#youtubeSVG:hover {
|
||||
#youtubeSVG:hover,
|
||||
#youtubeURL:focus #youtubeSVG {
|
||||
fill: #f00;
|
||||
}
|
||||
#youtubeSVG:active {
|
||||
|
|
@ -1271,7 +1281,8 @@ p {
|
|||
}
|
||||
|
||||
/* Discord icon colors. */
|
||||
#discordSVG:hover {
|
||||
#discordSVG:hover,
|
||||
#discordURL:focus #discordSVG {
|
||||
fill: #7288d9;
|
||||
}
|
||||
#discordSVG:active {
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ function toggleOverlay(toggleState, dismissable = false, content = 'overlayConte
|
|||
}
|
||||
if(toggleState){
|
||||
document.getElementById('main').setAttribute('overlay', true)
|
||||
// Make things tabbable.
|
||||
// Make things untabbable.
|
||||
$("#main *").attr('tabindex', '-1')
|
||||
$('#' + content).parent().children().hide()
|
||||
$('#' + content).show()
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
<div class="mediaDivider"></div>
|
||||
<div id="externalMedia">
|
||||
<div class="mediaContainer">
|
||||
<a href="http://www.westeroscraft.com">
|
||||
<a href="http://www.westeroscraft.com" class="mediaURL" id="linkURL">
|
||||
<svg id="linkSVG" class="mediaSVG" viewBox="35.34 34.3575 70.68 68.71500">
|
||||
<g>
|
||||
<path d="M75.37,65.51a3.85,3.85,0,0,0-1.73.42,8.22,8.22,0,0,1,.94,3.76A8.36,8.36,0,0,1,66.23,78H46.37a8.35,8.35,0,1,1,0-16.7h9.18a21.51,21.51,0,0,1,6.65-8.72H46.37a17.07,17.07,0,1,0,0,34.15H66.23A17,17,0,0,0,82.77,65.51Z"/>
|
||||
|
|
@ -49,7 +49,7 @@
|
|||
</a>
|
||||
</div>
|
||||
<div class="mediaContainer">
|
||||
<a href="https://twitter.com/westeroscraft">
|
||||
<a href="https://twitter.com/westeroscraft" class="mediaURL" id="twitterURL">
|
||||
<svg id="twitterSVG" class="mediaSVG" viewBox="0 0 5000 4060" preserveAspectRatio="xMidYMid meet">
|
||||
<g>
|
||||
<path d="M1210 4048 c-350 -30 -780 -175 -1124 -378 -56 -33 -86 -57 -86 -68 0 -16 7 -17 83 -9 114 12 349 1 493 -22 295 -49 620 -180 843 -341 l54 -38 -49 -7 c-367 -49 -660 -256 -821 -582 -30 -61 -53 -120 -51 -130 3 -16 12 -17 73 -13 97 7 199 5 270 -4 l60 -9 -65 -22 c-341 -117 -609 -419 -681 -769 -18 -88 -26 -226 -13 -239 4 -3 32 7 63 22 68 35 198 77 266 86 28 4 58 9 68 12 10 2 -22 -34 -72 -82 -240 -232 -353 -532 -321 -852 15 -149 79 -347 133 -418 16 -20 17 -19 49 20 377 455 913 795 1491 945 160 41 346 74 485 86 l82 7 -7 -59 c-5 -33 -7 -117 -6 -189 2 -163 31 -286 103 -430 141 -285 422 -504 708 -550 112 -19 333 -19 442 0 180 30 335 108 477 239 l58 54 95 -24 c143 -36 286 -89 427 -160 70 -35 131 -60 135 -56 19 19 -74 209 -151 312 -50 66 -161 178 -216 217 l-30 22 73 -14 c111 -21 257 -63 353 -101 99 -39 99 -39 99 -19 0 57 -237 326 -412 468 l-88 71 6 51 c4 28 1 130 -5 226 -30 440 -131 806 -333 1202 -380 745 -1036 1277 -1823 1477 -243 62 -430 81 -786 78 -134 0 -291 -5 -349 -10z"/>
|
||||
|
|
@ -58,7 +58,7 @@
|
|||
</a>
|
||||
</div>
|
||||
<div class="mediaContainer">
|
||||
<a href="https://www.instagram.com/westeroscraft/">
|
||||
<a href="https://www.instagram.com/westeroscraft/" class="mediaURL" id="instagramURL">
|
||||
<svg id="instagramSVG" class="mediaSVG" viewBox="0 0 5040 5040">
|
||||
<defs>
|
||||
<radialGradient id="instaFill" cx="30%" cy="107%" r="150%">
|
||||
|
|
@ -78,7 +78,7 @@
|
|||
</a>
|
||||
</div>
|
||||
<div class="mediaContainer">
|
||||
<a href="https://www.youtube.com/user/WesterosCraft">
|
||||
<a href="https://www.youtube.com/user/WesterosCraft" class="mediaURL" id="youtubeURL">
|
||||
<svg id="youtubeSVG" class="mediaSVG" viewBox="35.34 34.3575 70.68 68.71500">
|
||||
<g>
|
||||
<path d="M84.8,69.52,65.88,79.76V59.27Zm23.65.59c0-5.14-.79-17.63-3.94-20.57S99,45.86,73.37,45.86s-28,.73-31.14,3.68S38.29,65,38.29,70.11s.79,17.63,3.94,20.57,5.52,3.68,31.14,3.68,28-.74,31.14-3.68,3.94-15.42,3.94-20.57"/>
|
||||
|
|
@ -87,7 +87,7 @@
|
|||
</a>
|
||||
</div>
|
||||
<div class="mediaContainer">
|
||||
<a href="https://discord.gg/hqdjs3m">
|
||||
<a href="https://discord.gg/hqdjs3m" class="mediaURL" id="discordURL">
|
||||
<svg id="discordSVG" class="mediaSVG" viewBox="35.34 34.3575 70.68 68.71500">
|
||||
<g>
|
||||
<path d="M81.23,78.48a6.14,6.14,0,1,1,6.14-6.14,6.14,6.14,0,0,1-6.14,6.14M60,78.48a6.14,6.14,0,1,1,6.14-6.14A6.14,6.14,0,0,1,60,78.48M104.41,73c-.92-7.7-8.24-22.9-8.24-22.9A43,43,0,0,0,88,45.59a17.88,17.88,0,0,0-8.38-1.27l-.13,1.06a23.52,23.52,0,0,1,5.8,1.95,87.59,87.59,0,0,1,8.17,4.87s-10.32-5.63-22.27-5.63a51.32,51.32,0,0,0-23.2,5.63,87.84,87.84,0,0,1,8.17-4.87,23.57,23.57,0,0,1,5.8-1.95l-.13-1.06a17.88,17.88,0,0,0-8.38,1.27,42.84,42.84,0,0,0-8.21,4.56S37.87,65.35,37,73s-.37,11.54-.37,11.54,4.22,5.68,9.9,7.14,7.7,1.47,7.7,1.47l3.75-4.68a21.22,21.22,0,0,1-4.65-2A24.47,24.47,0,0,1,47.93,82S61.16,88.4,70.68,88.4c10,0,22.75-6.44,22.75-6.44a24.56,24.56,0,0,1-5.35,4.56,21.22,21.22,0,0,1-4.65,2l3.75,4.68s2,0,7.7-1.47,9.89-7.14,9.89-7.14.55-3.85-.37-11.54"/>
|
||||
|
|
|
|||
Loading…
Reference in New Issue