SplendidBear-Websites/MineSeeker
Private
Public Access
1
0
Fork 0
Code Pull Requests 1 Releases Activity

chg: usr: add clickable badges for Cap app-wide #13
Deploy to Production / deploy (push) Successful in 2m43s

Browse Source
This commit is contained in:
László Lang
2026-06-02 09:48:23 +02:00
parent cf56b10aba
commit 2b1689b321
8 changed files with 131 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/homepage/_auth.scss
+33 -1
View File
@@ -106,12 +106,44 @@
padding: 4px 10px;
border-radius: 999px;
border: 1px solid rgba(149, 207, 245, 0.35);
background: rgba(35, 111, 135, 0.2);
background:
linear-gradient(115deg, transparent 0 38%, rgba(255, 255, 255, 0.18) 48%, transparent 58% 100%),
rgba(35, 111, 135, 0.2);
background-position: 120% 50%, 0 0;
background-size: 260% 100%, auto;
color: #95cff5;
font: 600 11px 'Rajdhani', sans-serif;
letter-spacing: 0.8px;
text-decoration: none;
text-transform: uppercase;
transition:
background-position 650ms ease,
border-color 200ms ease,
box-shadow 200ms ease,
color 200ms ease,
transform 200ms ease;
white-space: nowrap;
&:hover,
&:focus-visible {
background-position: -60% 50%, 0 0;
border-color: rgba(149, 207, 245, 0.65);
box-shadow: 0 0 18px rgba(35, 111, 135, 0.28);
color: #d5f1ff;
transform: translateY(-1px);
}
&:hover,
&:focus,
&:active,
&:visited {
text-decoration: none;
}
&:focus-visible {
outline: 2px solid rgba(149, 207, 245, 0.75);
outline-offset: 2px;
}
}
.auth-sub {
assets/css/mineseeker/_back-button.scss
+75 -3
View File
@@ -7,12 +7,17 @@
* file that was distributed with this source code.
*/
.back-from-game {
display: inline-block;
.game-brand-bar {
display: flex;
align-items: center;
position: fixed;
top: 20px;
left: 20px;
z-index: 20;
}
.back-from-game {
display: inline-block;
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
@@ -30,4 +35,71 @@
transform: scale(1.2);
-webkit-transition: all 250ms cubic-bezier(.17, .67, .83, .67);
transition: all 250ms cubic-bezier(.17, .67, .83, .67);
}
}
.game-cap-badge {
display: inline-flex;
align-items: center;
gap: 6px;
position: fixed;
bottom: 20px;
left: 50%;
z-index: 20;
padding: 5px 10px;
border: 1px solid rgba(255, 216, 92, 0.42);
-webkit-border-radius: 999px;
border-radius: 999px;
background:
linear-gradient(115deg, transparent 0 38%, rgba(255, 255, 255, 0.22) 48%, transparent 58% 100%),
rgba(14, 16, 18, 0.72);
background-position: 120% 50%, 0 0;
background-size: 260% 100%, auto;
-webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.32), 0 8px 22px rgba(0, 0, 0, 0.28);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.32), 0 8px 22px rgba(0, 0, 0, 0.28);
color: #ffe58a;
font: 700 11px 'Rajdhani', sans-serif;
letter-spacing: 0.9px;
line-height: 1;
text-decoration: none;
text-transform: uppercase;
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
white-space: nowrap;
-webkit-transition:
background-position 650ms ease,
border-color 200ms ease,
box-shadow 200ms ease,
color 200ms ease,
transform 200ms ease;
transition:
background-position 650ms ease,
border-color 200ms ease,
box-shadow 200ms ease,
color 200ms ease,
transform 200ms ease;
}
.game-cap-badge:hover,
.game-cap-badge:focus-visible {
background-position: -60% 50%, 0 0;
border-color: rgba(255, 229, 138, 0.78);
-webkit-box-shadow: 0 0 0 1px rgba(255, 229, 138, 0.18), 0 0 24px rgba(255, 195, 50, 0.28);
box-shadow: 0 0 0 1px rgba(255, 229, 138, 0.18), 0 0 24px rgba(255, 195, 50, 0.28);
color: #fff4bd;
text-decoration: none;
-ms-transform: translateX(-50%) translateY(-1px);
-webkit-transform: translateX(-50%) translateY(-1px);
transform: translateX(-50%) translateY(-1px);
}
.game-cap-badge:focus,
.game-cap-badge:active,
.game-cap-badge:visited {
text-decoration: none;
}
.game-cap-badge:focus-visible {
outline: 2px solid rgba(255, 229, 138, 0.75);
outline-offset: 2px;
}
templates/Game/play.html.twig
+8 -3
View File
@@ -3,9 +3,14 @@
{% block title %} - Play!{% endblock %}
{% block body %}
<a class="back-from-game" href="{{ path('MineSeekerBundle_homepage') }}">
<img src="{{ asset('/images/mine-logo-txt.png') }}" alt="Mineseeker Logo">
</a>
<div class="game-brand-bar">
<a class="back-from-game" href="{{ path('MineSeekerBundle_homepage') }}">
<img src="{{ asset('/images/mine-logo-txt.png') }}" alt="Mineseeker Logo">
</a>
<a class="game-cap-badge" href="https://trycap.dev" target="_blank" rel="noopener noreferrer">
<i class="fas fa-shield-halved"></i> Protected by Cap
</a>
</div>
<div class="mine-container">
<div id="mine-wrapper"
data-env="{{ env }}"
templates/Official/contact.html.twig
+3 -1
View File
@@ -39,7 +39,9 @@
<div class="auth-card" style="max-width: 600px; margin: 0 auto;">
<div class="auth-title-row">
<h2 class="auth-title">Contact Form</h2>
<span class="auth-cap-badge"><i class="fas fa-shield-halved"></i> Protected by Cap</span>
<a class="auth-cap-badge" href="https://trycap.dev" target="_blank" rel="noopener noreferrer">
<i class="fas fa-shield-halved"></i> Protected by Cap
</a>
</div>
<p class="auth-sub">Your message is protected by automated abuse checks.</p>
<div data-cap-api-endpoint="{{ cap_api_endpoint }}" style="display: none;" aria-hidden="true"></div>
templates/Security/forgot_password.html.twig
+3 -1
View File
@@ -36,7 +36,9 @@
<div class="auth-card">
<div class="auth-title-row">
<h2 class="auth-title">Forgot Password</h2>
<span class="auth-cap-badge"><i class="fas fa-shield-halved"></i> Protected by Cap</span>
<a class="auth-cap-badge" href="https://trycap.dev" target="_blank" rel="noopener noreferrer">
<i class="fas fa-shield-halved"></i> Protected by Cap
</a>
</div>
<p class="auth-sub">Enter your email and we'll send you a reset link</p>
<div data-cap-api-endpoint="{{ cap_api_endpoint }}" style="display: none;" aria-hidden="true"></div>
templates/Security/login.html.twig
+3 -1
View File
@@ -38,7 +38,9 @@
<div class="auth-card">
<div class="auth-title-row">
<h2 class="auth-title">Sign In</h2>
<span class="auth-cap-badge"><i class="fas fa-shield-halved"></i> Protected by Cap</span>
<a class="auth-cap-badge" href="https://trycap.dev" target="_blank" rel="noopener noreferrer">
<i class="fas fa-shield-halved"></i> Protected by Cap
</a>
</div>
<p class="auth-sub">Welcome back, commander</p>
templates/Security/register.html.twig
+3 -1
View File
@@ -44,7 +44,9 @@
<div class="auth-card">
<div class="auth-title-row">
<h2 class="auth-title">Create Account</h2>
<span class="auth-cap-badge"><i class="fas fa-shield-halved"></i> Protected by Cap</span>
<a class="auth-cap-badge" href="https://trycap.dev" target="_blank" rel="noopener noreferrer">
<i class="fas fa-shield-halved"></i> Protected by Cap
</a>
</div>
<p class="auth-sub">Join the battle — no subscription required</p>
<div data-cap-api-endpoint="{{ cap_api_endpoint }}" style="display: none;" aria-hidden="true"></div>
templates/Security/reset_password.html.twig
+3 -1
View File
@@ -18,7 +18,9 @@
<div class="auth-card">
<div class="auth-title-row">
<h2 class="auth-title">Reset Password</h2>
<span class="auth-cap-badge"><i class="fas fa-shield-halved"></i> Protected by Cap</span>
<a class="auth-cap-badge" href="https://trycap.dev" target="_blank" rel="noopener noreferrer">
<i class="fas fa-shield-halved"></i> Protected by Cap
</a>
</div>
<p class="auth-sub">Choose a new password for your account</p>
<div data-cap-api-endpoint="{{ cap_api_endpoint }}" style="display: none;" aria-hidden="true"></div>