Updated CSS for social icons

Author: JulianPrieber

littlelink/css/animations.css

@@ -52,7 +52,7 @@
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
 /* (Also apply to icon) */
 
-.button-hover, .credit-hover{
+.button-hover, .credit-hover, .social-hover{
     display:inline-block;
     -webkit-transform:perspective(1px) translateZ(0);
     transform:perspective(1px) translateZ(0);
@@ -62,9 +62,9 @@
     -webkit-transition-property:transform;
     transition-property:transform
 }
-.button-hover:active,.credit-hover:active, 
-.button-hover:focus,.credit-hover:focus, 
-.button-hover:hover,.credit-hover:hover{
+.button-hover:active,.credit-hover:active, .social-hover:active, 
+.button-hover:focus,.credit-hover:focus, .social-hover:focus, 
+.button-hover:hover,.credit-hover:hover, .social-hover:hover{
     -webkit-transform:scale(1.1);
     transform:scale(1.1)
 }

littlelink/css/brands.css

@@ -23,6 +23,7 @@
 ––––––––––––––––––––––––––––––––––––––––––––––––––
 
 - Rounded user avatars
+- Social icons
 - Buttons
 - Brand Styles
 
@@ -37,6 +38,16 @@
   border-radius: 50%;
 }
 
+/* Social icon
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+
+.social-icon {
+  font-size: 32px;
+  padding: 10px;
+}
+.social-icon-div {
+  padding-bottom: 30px;
+}
 
 /* Buttons
 –––––––––––––––––––––––––––––––––––––––––––––––––– */

littlelink/css/skeleton-auto.css

@@ -138,6 +138,13 @@ a:hover {
   padding: 0 10px;
 }
 
+  @media (prefers-color-scheme: dark) {
+  .social-icon{color:#fff;}
+  }
+  @media (prefers-color-scheme: light) {
+    .social-icon{color:#222;}
+  }
+
 /* Code
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
 code {

resources/views/littlelink.blade.php

@@ -115,12 +115,16 @@ function themeAsset($path){
   <link rel="stylesheet" href="{{ asset('littlelink/css/brands.css') }}">
   @if ($color_scheme_override == 'dark')
   <link rel="stylesheet" href="{{ asset('littlelink/css/skeleton-dark.css') }}">
+  <style>.social-icon{color:#fff;}</style>
   @elseif ($color_scheme_override == 'light')
   <link rel="stylesheet" href="{{ asset('littlelink/css/skeleton-light.css') }}">
+  <style>.social-icon{color:#222;}</style>
   @elseif (config('advanced-config.theme') == 'dark')
   <link rel="stylesheet" href="{{ asset('littlelink/css/skeleton-dark.css') }}">
+  <style>.social-icon{color:#fff;}</style>
   @elseif (config('advanced-config.theme') == 'light')
   <link rel="stylesheet" href="{{ asset('littlelink/css/skeleton-light.css') }}">
+  <style>.social-icon{color:#222;}</style>
   @else
   <link rel="stylesheet" href="{{ asset('littlelink/css/skeleton-auto.css') }}">
   @endif
@@ -261,11 +265,10 @@ function get_operating_system() {
         <p style="width:50%;min-width:300px;" class="fadein">@if(env('ALLOW_USER_HTML') === true){!! $info->littlelink_description !!}@else{{ $info->littlelink_description }}@endif</p>
 
         <!-- Icons -->
-        <style>.social-icon{font-size:32px;padding:10px;padding-bottom:30px;color:#fff;}</style>
         @php $icons = DB::table('links')->where('user_id', 1)->where('button_id', 94)->get(); @endphp
-        <div class="row fadein">
+        <div class="row fadein social-icon-div">
         @foreach($icons as $icon)
-        <a href="{{$icon->link}}"><i class="social-icon fa-brands fa-{{$icon->title}}"></i></a>
+        <a class="social-hover social-link" href="{{$icon->link}}"><i class="social-icon fa-brands fa-{{$icon->title}}"></i></a>
         @endforeach
         </div>