feat: Implement initial application styling including dark/light theme support and base layout for core components.
This commit is contained in:
parent
a093cf420b
commit
3506d6c45e
@ -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 {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user