feat: Mejorar el estilo del fondo y ajustar el diseño del menú de selección de servidor en el panel de control

This commit is contained in:
Shni
2025-10-15 02:29:21 -05:00
parent eb0a453152
commit 4c1bd2a717
2 changed files with 14 additions and 14 deletions

View File

@@ -19,7 +19,7 @@
<%= head %> <%= head %>
<% } %> <% } %>
</head> </head>
<body class="min-h-screen pixel-grid-bg pt-14" style="background-image: url('/assets/images/background.svg'); background-size: cover; background-position: center; background-attachment: fixed; background-repeat: no-repeat;"> <body class="min-h-screen pixel-grid-bg pt-14" style="background-image: url('/assets/images/background.svg'); backdrop-filter: blur(8px); background-size: cover; background-position: center; background-attachment: fixed; background-repeat: no-repeat;">
<% if (useDashboardNav) { %> <% if (useDashboardNav) { %>
<%# If the server pre-rendered the dashboard nav it will be available as dashboardNav (string) %> <%# If the server pre-rendered the dashboard nav it will be available as dashboardNav (string) %>

View File

@@ -1,4 +1,4 @@
<header class="w-full blur-lg p-2 fixed top-0 left-0 right-0 z-30"> <header class="w-full p-2 fixed top-0 left-0 right-0 z-30">
<div class="max-w-7xl mx-auto flex items-center justify-between px-3"> <div class="max-w-7xl mx-auto flex items-center justify-between px-3">
<div class="flex items-center gap-4"> <div class="flex items-center gap-4">
<!-- small logo + name --> <!-- small logo + name -->
@@ -15,20 +15,20 @@
<!-- mini guild selector compact --> <!-- mini guild selector compact -->
<div class="hidden md:block"> <div class="hidden md:block">
<div class="relative inline-block"> <div class="relative inline-block">
<button id="miniGuildBtn" class="px-3 py-1 rounded-full bg-white/5 text-white flex items-center gap-2" aria-expanded="false" aria-controls="miniGuildList"> <button id="miniGuildBtn" class="px-2 py-0.5 rounded-full bg-white/5 text-white text-sm flex items-center gap-2" aria-expanded="false" aria-controls="miniGuildList">
<span id="miniGuildName" class="text-sm"><%= selectedGuildName || 'Seleccionar servidor' %></span> <span id="miniGuildName" class="text-sm"><%= selectedGuildName || 'Seleccionar servidor' %></span>
<svg class="w-3 h-3 text-white/80" viewBox="0 0 20 20" fill="none"><path d="M6 8l4 4 4-4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg> <svg class="w-3 h-3 text-white/80" viewBox="0 0 20 20" fill="none"><path d="M6 8l4 4 4-4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button> </button>
<div id="miniGuildList" class="origin-top-left absolute top-full left-0 mt-2 w-72 bg-white/80 backdrop-blur-md rounded-md p-2 hidden transition-transform duration-150 z-50" style="max-height:20rem; overflow:auto; background-color: rgba(12,15,18,0.92);"> <div id="miniGuildList" class="origin-top-left absolute top-full left-0 mt-2 w-56 bg-white/80 backdrop-blur-md rounded-lg p-1 hidden transition-transform duration-150 z-50" style="max-height:18rem; overflow:auto; background-color: rgba(12,15,18,0.92);">
<% if (guilds && guilds.length) { %> <% if (guilds && guilds.length) { %>
<% guilds.forEach(g => { %> <% guilds.forEach(g => { %>
<div class="p-2 rounded-md hover:bg-white/5 cursor-pointer text-white guild-item flex items-center gap-2" data-id="<%= g.id %>"> <div class="p-1 rounded-md hover:bg-white/5 cursor-pointer text-white guild-item flex items-center gap-3" data-id="<%= g.id %>">
<% if (g.icon) { %> <% if (g.icon) { %>
<img src="https://cdn.discordapp.com/icons/<%= g.id %>/<%= g.icon %>.png" class="w-6 h-6 rounded-full" alt="icon"> <img src="https://cdn.discordapp.com/icons/<%= g.id %>/<%= g.icon %>.png" class="w-5 h-5 rounded-full" alt="icon">
<% } else { %> <% } else { %>
<div class="w-6 h-6 rounded-full bg-white/8 flex items-center justify-center text-xs text-white">S</div> <div class="w-5 h-5 rounded-full bg-white/8 flex items-center justify-center text-xs text-white">S</div>
<% } %> <% } %>
<div class="flex-1 text-sm truncate"><%= g.name %></div> <div class="flex-1 text-sm truncate pl-1"><%= g.name %></div>
</div> </div>
<% }) %> <% }) %>
<% } else { %> <% } else { %>