Rafael Lopez / ppto

Go to a project
Toggle navigation Toggle navigation pinning
Rafael Lopez
1c926852 1 parent ab3a7e59

test done

Expand all
Inline Side-by-side
Showing 6 changed files with 94 additions and 31 deletions
......@@ -27,3 +27,7 @@ claude.md
# Docs internos
static/ESTILOS_*.md
.Rproj.user
# Data
/data
......
......@@ -32,10 +32,7 @@
<div class="fixed top-4 right-4 z-[110] md:hidden">
<button
onclick={onOpenDrawer}
class="p-2 rounded-full transition-all flex-shrink-0"
style="background-color: transparent; color: var(--theme-texto); cursor: pointer;"
onmouseenter={(e) => e.currentTarget.style.color = 'var(--theme-titulo)'}
onmouseleave={(e) => e.currentTarget.style.color = 'var(--theme-texto)'}
class="nav-icon p-2 rounded-full transition-all flex-shrink-0"
aria-label="Abrir menú"
>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
......@@ -52,10 +49,7 @@
<div class="relative group/home">
<a
href="/"
class="p-2 rounded-full transition-all block"
style="background-color: transparent; color: var(--theme-texto);"
onmouseenter={(e) => e.currentTarget.style.color = 'var(--theme-titulo)'}
onmouseleave={(e) => e.currentTarget.style.color = 'var(--theme-texto)'}
class="nav-icon p-2 rounded-full transition-all block"
>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<rect x="2" y="2" width="7" height="7" rx="1.5"/>
......@@ -75,10 +69,7 @@
<div class="relative group/theme">
<button
onclick={toggleTheme}
class="p-2 rounded-full transition-all"
style="background-color: transparent; color: var(--theme-texto); cursor: pointer;"
onmouseenter={(e) => e.currentTarget.style.color = 'var(--theme-titulo)'}
onmouseleave={(e) => e.currentTarget.style.color = 'var(--theme-texto)'}
class="nav-icon p-2 rounded-full transition-all cursor-pointer"
aria-label={isDark ? 'Cambiar a modo claro' : 'Cambiar a modo oscuro'}
>
{#if isDark}
......@@ -104,10 +95,7 @@
<div class="relative group/menu">
<button
onclick={onOpenDrawer}
class="p-2 rounded-full transition-all"
style="background-color: transparent; color: var(--theme-texto); cursor: pointer;"
onmouseenter={(e) => e.currentTarget.style.color = 'var(--theme-titulo)'}
onmouseleave={(e) => e.currentTarget.style.color = 'var(--theme-texto)'}
class="nav-icon p-2 rounded-full transition-all cursor-pointer"
aria-label="Abrir menú"
>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
......@@ -123,3 +111,23 @@
</div>
</div>
<style>
/* Iconos del navbar */
.nav-icon {
background-color: transparent;
color: #8A8578;
transition: color 0.2s ease;
}
.nav-icon:hover {
color: #F5F0E8;
}
/* Modo claro */
:global(html:not(.dark)) .nav-icon {
color: #333333;
}
:global(html:not(.dark)) .nav-icon:hover {
color: #1A1A18;
}
</style>
......
......@@ -202,15 +202,12 @@
{/if}
<!-- Controles: Theme Toggle + Menú -->
<div class="flex items-center gap-1">
<div class="header-controls">
<!-- Theme Toggle (solo desktop) -->
<div class="relative group/theme hidden md:block">
<button
onclick={toggleTheme}
class="p-2 rounded-full transition-all"
style="background-color: transparent; color: var(--theme-texto); cursor: pointer;"
onmouseenter={(e) => e.currentTarget.style.color = 'var(--theme-titulo)'}
onmouseleave={(e) => e.currentTarget.style.color = 'var(--theme-texto)'}
class="nav-icon p-2 rounded-full transition-all"
aria-label={isDarkMode ? 'Cambiar a modo claro' : 'Cambiar a modo oscuro'}
>
{#if isDarkMode}
......@@ -234,10 +231,7 @@
<div class="relative group/menu">
<button
onclick={openDrawer}
class="p-2 rounded-full transition-all"
style="background-color: transparent; color: var(--theme-texto); cursor: pointer;"
onmouseenter={(e) => e.currentTarget.style.color = 'var(--theme-titulo)'}
onmouseleave={(e) => e.currentTarget.style.color = 'var(--theme-texto)'}
class="nav-icon p-2 rounded-full transition-all"
aria-label="Abrir menú"
>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
......@@ -465,6 +459,32 @@
}
.mefp-logo:hover { opacity: 1; }
/* Header controls */
.header-controls {
display: flex;
align-items: center;
gap: 4px;
}
/* Nav icon styling - matching Navbar */
.nav-icon {
background-color: transparent;
color: #8A8578;
cursor: pointer;
transition: color 0.2s ease;
}
.nav-icon:hover {
color: #F5F0E8;
}
/* Light mode */
:global(html:not(.dark)) .nav-icon {
color: #333333;
}
:global(html:not(.dark)) .nav-icon:hover {
color: #1A1A18;
}
/* Fade in animation */
.fade-in {
opacity: 0;
......@@ -617,13 +637,33 @@
}
.search-bar {
display: flex; align-items: center;
background: var(--theme-surface); border: 1px solid var(--theme-borde);
background: transparent;
border: none;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
border-radius: 12px; padding: 6px 24px;
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.search-focused { background: var(--theme-fill); }
.search-bar:hover {
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15);
}
.search-bar.search-focused,
.search-bar.search-focused:hover {
box-shadow: inset 0 0 0 1px var(--theme-accent);
}
.search-has-results { border-radius: 12px 12px 0 0; }
/* Light mode search bar */
:global(html:not(.dark)) .search-bar {
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
}
:global(html:not(.dark)) .search-bar:hover {
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15);
}
:global(html:not(.dark)) .search-bar.search-focused,
:global(html:not(.dark)) .search-bar.search-focused:hover {
box-shadow: inset 0 0 0 1px var(--theme-accent);
}
.search-bar input {
flex: 1; background: transparent; border: none; outline: none;
color: var(--theme-titulo); font-size: 16px; font-family: 'DM Sans', sans-serif;
......@@ -643,10 +683,14 @@
.search-loading {
position: absolute; top: 100%; left: 0; right: 0;
background: var(--theme-surface); border: 1px solid var(--theme-borde); border-top: none;
background: var(--theme-body);
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
border-radius: 0 0 14px 14px; padding: 12px 24px;
font-family: 'DM Sans', sans-serif; font-size: 13px; color: var(--theme-texto);
}
:global(html:not(.dark)) .search-loading {
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
}
.search-error {
margin-top: 8px; font-family: 'DM Sans', sans-serif;
......@@ -656,10 +700,14 @@
/* Suggestions / Results */
.suggestions {
position: absolute; top: 100%; left: 0; right: 0;
background: var(--theme-surface); border: 1px solid var(--theme-borde); border-top: none;
background: var(--theme-body);
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
border-radius: 0 0 14px 14px; overflow: hidden; z-index: 100;
max-height: 320px; overflow-y: auto;
}
:global(html:not(.dark)) .suggestions {
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
}
.suggestions.no-results { padding: 16px 24px; }
.no-results-text {
font-family: 'DM Sans', sans-serif; font-size: 14px; color: var(--theme-texto);
......@@ -670,8 +718,11 @@
padding: 12px 24px; display: flex; justify-content: space-between;
align-items: center; cursor: pointer; transition: background 0.2s;
}
.suggestion-item:hover, .suggestion-selected { background: var(--theme-fill); }
.suggestion-border { border-top: 1px solid var(--theme-borde); }
.suggestion-item:hover, .suggestion-selected { background: rgba(255,255,255,0.05); }
.suggestion-border { border-top: 1px solid rgba(255,255,255,0.06); }
:global(html:not(.dark)) .suggestion-item:hover,
:global(html:not(.dark)) .suggestion-selected { background: rgba(0,0,0,0.03); }
:global(html:not(.dark)) .suggestion-border { border-top: 1px solid rgba(0,0,0,0.06); }
.suggestion-main { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.suggestion-label {
......
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.