Fabio/photo_server_json_flutter_con_gallery
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

3rd

Browse source
This commit is contained in:
Fabio 2026-02-26 13:45:11 +01:00
parent ba68b6f7f1
commit ac0c00bb40
2 changed files with 60 additions and 86 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

144
public/css/header.css
View file

@ -1,84 +1,60 @@
header { /* Header più compatto (~50%) */
padding: 10px 15px; header {
background: #333; padding: 4px 10px; /* era 10px 15px */
color: white; background: #333;
display: flex; color: white;
justify-content: space-between; display: flex;
align-items: center; justify-content: space-between;
position: sticky; /* o fixed se preferisci header sempre fisso */ align-items: center;
top: 0; position: sticky;
z-index: 100; /* > mappa (che sta a 50) */ top: 0;
z-index: 100;
} }
.top-buttons { /* Titolo più piccolo e senza margini extra */
display: flex; header h1 {
gap: 10px; font-size: 18px; /* ridotto */
} line-height: 1.1;
margin: 0;
.icon-btn { }
background: none;
border: none; /* Icone più vicine tra loro */
font-size: 22px; .top-buttons {
padding: 6px 10px; display: flex;
cursor: pointer; gap: 6px; /* era 10px */
border-radius: 6px; }
}
/* Bottoni icona più compatti */
.icon-btn:hover { .icon-btn {
background: rgba(255,255,255,0.15); background: none;
} border: none;
font-size: 18px; /* era 22px */
.icon-btn { padding: 3px 6px; /* era 6px 10px */
background: none; cursor: pointer;
border: none; border-radius: 6px;
font-size: 22px; color: white;
padding: 6px 10px; line-height: 1;
cursor: pointer; min-height: 32px; /* tap target minimo desktop */
border-radius: 6px; min-width: 32px;
color: white; /* 🔥 questo mancava */ }
}
.icon-btn:hover {
/* Testo solo per screen reader */ background: rgba(255,255,255,0.15);
.sr-only { }
position: absolute !important;
width: 1px; height: 1px; /* Logout rotondo: riduciamo la “bolla” */
padding: 0; margin: -1px; .icon-btn.logout-btn {
overflow: hidden; clip: rect(0,0,1px,1px); --size: 28px; /* era 36px */
white-space: nowrap; border: 0; width: var(--size);
} height: var(--size);
padding: 0;
/* Bottone */ }
.icon-btn.logout-btn {
--size: 36px; /* PNG del logout in scala con l’header */
--bg-hover: rgba(255,255,255,0.12); /* hover chiaro su sfondo nero */ .logout-icon {
--ring: rgba(255,255,255,0.35); /* focus ring chiaro */ width: 18px; /* era 22px */
height: 18px;
width: var(--size); display: block;
height: var(--size); filter: brightness(0) invert(1);
padding: 0; image-rendering: -webkit-optimize-contrast;
display: inline-flex; }
align-items: center;
justify-content: center;
background: transparent;
border: none;
border-radius: 50%;
cursor: pointer;
transition: background-color .15s ease, box-shadow .15s ease, transform .05s ease;
}
.icon-btn.logout-btn:hover { background: var(--bg-hover); }
.icon-btn.logout-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.icon-btn.logout-btn:active { transform: translateY(1px); }
/* PNG bianco: se l'originale è scuro/nero su trasparente */
.logout-icon {
width: 22px;
height: 22px;
display: block;
filter: brightness(0) invert(1); /* → bianco */
/* facoltativo, per nitidezza */
image-rendering: -webkit-optimize-contrast;
}
/* Se hai una versione retina 2x, usa srcset nell'HTML */

2
public/index.html
View file

@ -52,8 +52,6 @@
alt="" alt=""
aria-hidden="true" aria-hidden="true"
width="22" height="22"> width="22" height="22">
<!-- Testo accessibile (solo per screen reader) -->
<span class="sr-only">Logout</span>
</button> </button>
</div> </div>
</header> </header>