feat: Implement initial application styling including dark/light theme support and base layout for core components.

This commit is contained in:
Bruno Charest 2026-03-27 09:55:46 -04:00
parent a093cf420b
commit 3506d6c45e

View File

@ -2462,45 +2462,98 @@ body.resizing-v {
} }
.header { .header {
gap: 6px; flex-wrap: wrap;
padding: 8px 10px; gap: 8px 10px;
padding: 10px 12px;
} }
.header-left { .header-left {
flex: 0 0 auto; flex: 1;
gap: 8px; gap: 12px;
} }
.header-center { .header-center {
flex: 1; flex: 0 0 100%;
order: 3;
max-width: none; max-width: none;
padding: 4px 0;
} }
.header-right { .header-right {
flex: 0 0 auto; flex: 0 0 auto;
gap: 8px;
} }
.header-logo { .header-logo {
font-size: 0.95rem; font-size: 1.05rem;
gap: 6px; gap: 8px;
}
.user-display-name {
display: none; /* Masquer le nom d'utilisateur sur mobile pour gagner de la place */
} }
.search-wrapper { .search-wrapper {
max-width: none; max-width: none;
width: 100%;
} }
.search-wrapper input { .search-input-wrapper input {
padding: 6px 10px 6px 32px; padding: 10px 80px 10px 40px;
font-size: 0.8rem; font-size: 0.95rem; /* Plus grand pour mobile */
border-radius: 12px; /* Plus moderne */
}
.search-wrapper .search-icon {
left: 14px;
width: 18px !important;
height: 18px !important;
}
.search-actions {
right: 6px;
}
.search-btn {
width: 34px;
height: 34px;
border-radius: 8px;
}
.search-dropdown {
position: fixed;
top: 105px; /* Ajusté pour la nouvelle position du header */
left: 10px;
right: 10px;
width: calc(100vw - 20px);
max-height: calc(100vh - 120px);
border-radius: 12px;
box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}
.search-dropdown__item {
padding: 12px 16px; /* Plus d'espace pour le tactile */
font-size: 0.9rem;
}
.search-dropdown__icon {
width: 16px;
height: 16px;
} }
.header-menu-btn { .header-menu-btn {
padding: 8px 10px; padding: 10px;
border-radius: 10px;
} }
.header-menu-dropdown { .header-menu-dropdown {
right: -8px; position: fixed;
min-width: 240px; top: 60px;
right: 10px;
left: 10px;
width: auto;
min-width: 0;
border-radius: 16px;
} }
.sidebar-quick-select { .sidebar-quick-select {