feat admin: work-in-progress revamp extension buttons

This commit is contained in:
prplwtf 2024-04-28 16:21:49 +02:00
parent 7763e5d1a0
commit daaa6b2cee
2 changed files with 39 additions and 4 deletions

View file

@ -55,11 +55,45 @@ tag[blue] {background-color:#288afb;}
}
.extension-btn-image {width:50px;height:50px;border-radius:3px;float: left;margin-right:10px;}
.extension-btn-image {
width:auto;
height:100%;
aspect-ratio: 1/1;
border-top-left-radius:6px;
border-bottom-left-radius:6px;
float: left;
margin-right:10px;
}
.extension-btn-text {font-size: 20px;margin:0;text-align:left;}
.extension-btn-version {font-size: 11px;text-align:left;margin:0;}
.extension-btn {background-color:#00000030;color:#cad1d8;border-color:#00000000;height:calc(65px + 14px);padding-top:7px;padding-bottom:7px;overflow:hidden;vertical-align:center;transition:background-color .2s;}
.extension-btn:hover, .extension-btn:active, .extension-btn:focus {background-color:#00000035;color:#cad1d8 !important;border-color:#00000000;}
.extension-btn {
background-color:#181f27;
color:#cad1d8;
border-color:#00000000;
height:calc(65px + 14px);
/*padding-top:7px;
padding-bottom:7px;*/
padding: 0px !important;
overflow:hidden;
vertical-align:center;
transition:background-color .2s;
border-radius:6px;
}
.extension-btn:hover,
.extension-btn:active,
.extension-btn:focus {
background-color:#181f27;
color:#cad1d8 !important;
border-color:#00000000;
}
.extension-btn-overlay {
height: calc(100% - 18px);
width: auto;
position: absolute;
z-index: 2;
aspect-ratio: 1/1;
background: linear-gradient(90deg, rgba(24,31,39,0.35) 0%, rgb(24, 31, 39) 100%);
}
.byte-img {
width: 100px;

View file

@ -18,7 +18,8 @@
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 text-center">
<a href="{{ route('admin.extensions.blueprint.index') }}">
<button class="btn extension-btn" style="width:100%;margin-bottom:17px;">
<img src="/assets/extensions/blueprint/logo.jpg" alt="logo" class="extension-btn-image">
<div class="extension-btn-overlay"></div>
<img src="/assets/extensions/blueprint/logo.jpg" alt="logo" class="extension-btn-image"/>
<p class="extension-btn-text">Blueprint</p>
<p class="extension-btn-version">{{ $PlaceholderService->version() }}</p>
</button>