Added support for dynamic contrast

Text always stays readable no matter the background color
This commit is contained in:
Julian Prieber 2023-12-06 17:42:02 +01:00
parent 3c7d6c0906
commit 9990143bc1
6 changed files with 32 additions and 4 deletions

1
assets/js/dynamic-contrast.min.js vendored Normal file

File diff suppressed because one or more lines are too long

View File

@ -1,3 +1,3 @@
<!-- Short Bio -->
<style>.description-parent * {margin-bottom: 1em;}.description-parent {padding-bottom: 30px;}</style>
<center><div class="fadein description-parent"><p class="fadein">@if(env('ALLOW_USER_HTML') === true){!! $info->littlelink_description !!}@else{{ $info->littlelink_description }}@endif</p></div></center>
<center><div class="fadein description-parent dynamic-contrast"><p class="fadein">@if(env('ALLOW_USER_HTML') === true){!! $info->littlelink_description !!}@else{{ $info->littlelink_description }}@endif</p></div></center>

View File

@ -1,3 +1,3 @@
<?php use App\Models\UserData; ?>
<!-- Your Name -->
<h1 class="fadein">{{ $info->name }}@if(($userinfo->role == 'vip' or $userinfo->role == 'admin') and theme('disable_verification_badge') != "true" and env('HIDE_VERIFICATION_CHECKMARK') != true and UserData::getData($userinfo->id, 'checkmark') != false)<span title="{{__('messages.Verified user')}}">@include('components.verify-svg')@endif</span></h1>
<h1 class="fadein dynamic-contrast">{{ $info->name }}@if(($userinfo->role == 'vip' or $userinfo->role == 'admin') and theme('disable_verification_badge') != "true" and env('HIDE_VERIFICATION_CHECKMARK') != true and UserData::getData($userinfo->id, 'checkmark') != false)<span title="{{__('messages.Verified user')}}">@include('components.verify-svg')@endif</span></h1>

View File

@ -3,7 +3,7 @@
@if(count($icons) > 0)
<div class="row fadein social-icon-div">
@foreach($icons as $icon)
<a class="social-hover social-link" href="{{ route('clickNumber') . '/' . $icon->id. "?" . $icon->link}}" title="{{ucfirst($icon->title)}}" aria-label="{{ucfirst($icon->title)}}" @if(theme('open_links_in_same_tab') != "true")target="_blank"@endif><i class="social-icon fa-brands fa-{{$icon->title}}"></i></a>
<a class="social-hover social-link" href="{{ route('clickNumber') . '/' . $icon->id. "?" . $icon->link}}" title="{{ucfirst($icon->title)}}" aria-label="{{ucfirst($icon->title)}}" @if(theme('open_links_in_same_tab') != "true")target="_blank"@endif><i class="dynamic-contrast social-icon fa-brands fa-{{$icon->title}}"></i></a>
@endforeach
</div>
@endif

View File

@ -4,4 +4,7 @@
@include('layouts.fonts')
<style>{!! file_get_contents(base_path("assets/linkstack/css/normalize.css")) !!}</style>
<style>{!! file_get_contents(base_path("assets/linkstack/css/animate.css")) !!}</style>
<style>{!! file_get_contents(base_path("assets/linkstack/css/animate.css")) !!}</style>
<script>{!! file_get_contents(base_path("assets/js/dynamic-contrast.min.js")) !!}</script>
@include('linkstack.modules.dynamic-contrast')

View File

@ -0,0 +1,24 @@
@push('linkstack-body-end')
<script>
BackgroundCheck.init({
targets: '.dynamic-contrast',
images: 'body'
});
</script>
@endpush
@push('linkstack-head-end')
<style>
.background--light {
color: black !important;
}
.background--dark {
color: white !important;
}
.background--complex {
color: gray !important;
}
</style>
@endpush