nucleo000/snatchgame
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mejoras UI/UX

Browse Source
This commit is contained in:
josedario87
2025-08-28 18:53:37 -06:00
parent 6f2f7a4e12
commit 1a1478745a
8 changed files with 19 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
client/src/components/AppCredits.vue
View File

@@ -6,7 +6,7 @@
<template v-if="!collapsed">
<span>Hecho por <strong>Nucleo Inteligencia</strong></span>
<span class="sep">•</span>
<span>2025</span>
<span>2024</span>
<span class="sep">•</span>
<a href="mailto:firstcontact@nucleoriofrio.com" class="credits-link">firstcontact@nucleoriofrio.com</a>
<span class="sep">•</span>
@@ -68,7 +68,7 @@ onUnmounted(() => {
.app-credits.overlay { position: fixed; }
.app-credits.bottom-right { right: 12px; bottom: 12px; }
.app-credits.bottom-center { left: 50%; transform: translateX(-50%); bottom: 12px; position: fixed; }
.app-credits.inline { position: static; margin-top: 10px; display: flex; justify-content: flex-end; }
.app-credits.inline { position: static; margin-top: 10px; display: flex; justify-content: flex-end; width: 100%; }
.credits-card {
display: inline-flex;
@@ -85,6 +85,7 @@ onUnmounted(() => {
border-radius: 10px;
box-shadow: 0 6px 18px rgba(0,0,0,0.06);
pointer-events: auto; /* allow clicking the mailto link */
max-width: 100%;
}
.credits-card.collapsed { gap: 6px; padding: 4px 6px; }
.credits-card.collapsed > span:not(.sep),
@@ -94,7 +95,7 @@ onUnmounted(() => {
.app-credits.inline .credits-card { background: rgba(255,255,255,0.14); border-color: rgba(0,0,0,0.04); }
.credits-card strong { color: #475569; font-weight: 700; }
.credits-card .sep { opacity: 0.55; }
.credits-link { color: #64748b; text-decoration: none; border-bottom: 1px dotted rgba(100,116,139,0.45); }
.credits-link { color: #64748b; text-decoration: none; border-bottom: 1px dotted rgba(100,116,139,0.45); overflow-wrap: anywhere; word-break: break-word; }
.credits-link:hover { color: #334155; border-bottom-color: rgba(51,65,85,0.55); }
.credits-link.icon { border-bottom: none; display: inline-flex; align-items:center; justify-content:center; width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,0.6); color:#334155; font-weight: 700; font-size: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.credits-link.icon:hover { background: rgba(255,255,255,0.9); }
@@ -105,6 +106,18 @@ onUnmounted(() => {
.btn-toggle:focus { outline: none; }
@media (max-width: 480px) {
.credits-card { font-size: 11px; padding: 6px 8px; }
.app-credits.inline { margin-top: 6px; }
.app-credits.inline .credits-card {
font-size: 10px;
padding: 4px 6px;
gap: 4px;
border-radius: 8px;
white-space: normal;
display: flex;
flex-wrap: wrap;
max-width: 100%;
}
.app-credits.inline .credits-card .sep { margin: 0 4px; }
.app-credits.inline .credits-link.icon { width: 16px; height: 16px; font-size: 11px; }
}
</style>