voyage
This commit is contained in:
@@ -0,0 +1,604 @@
|
||||
/* === Holidays === */
|
||||
|
||||
/* Titres et paragraphes (alignés sur pf-gift-list) */
|
||||
.pf-holidays h1 {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.pf-holidays p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 12px;
|
||||
font-size: 13px;
|
||||
color: #4b5563;
|
||||
}
|
||||
/* Petit texte explicatif (même classe que gift-list pour cohérence) */
|
||||
.cl-legend {
|
||||
font-size: 12px;
|
||||
color: #6b7280;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
/* Titlebar (cohérent avec gift-list .cl-titlebar) */
|
||||
.pf-holidays__titlebar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.hol-title-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* Boutons (proches de .cl-view-btn) */
|
||||
.btn,
|
||||
.hol-add-btn,
|
||||
.hol-map-toggle {
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #d9e2ec;
|
||||
border-radius: 8px;
|
||||
background: #f0f4f8;
|
||||
color: #243b53;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
}
|
||||
.btn:hover,
|
||||
.hol-add-btn:hover,
|
||||
.hol-map-toggle:hover {
|
||||
background: #e5eef5;
|
||||
}
|
||||
.btn-edit {
|
||||
background: #e0f2fe;
|
||||
border-color: #93c5fd;
|
||||
color: #0f4c81;
|
||||
}
|
||||
.btn-delete {
|
||||
background: #fee2e2;
|
||||
border-color: #fca5a5;
|
||||
color: #7c2d12;
|
||||
}
|
||||
|
||||
/* Cards */
|
||||
.hol-idea-card {
|
||||
background: #fff;
|
||||
border: 1px solid #d9e2ec;
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
}
|
||||
.hol-idea-card__head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
}
|
||||
.hol-card-actions {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
/* Statuts (match gift-list badges ton léger) */
|
||||
.hol-status {
|
||||
font-size: 11px;
|
||||
padding: 3px 6px;
|
||||
border-radius: 12px;
|
||||
background: #e5e7eb;
|
||||
}
|
||||
.hol-status--favorite {
|
||||
background: #fde68a;
|
||||
}
|
||||
.hol-status--shortlist {
|
||||
background: #bfdbfe;
|
||||
}
|
||||
.hol-status--planned {
|
||||
background: #bbf7d0;
|
||||
}
|
||||
|
||||
/* === Modales (alignement visuel avec cl-modal de gift-list) === */
|
||||
.hol-modal {
|
||||
display: none;
|
||||
}
|
||||
.hol-modal.open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.hol-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(17, 24, 39, 0.35); /* même teinte que gift-list */
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.hol-dialog {
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: min(
|
||||
560px,
|
||||
calc(100% - 24px)
|
||||
); /* légèrement plus large que gift-list */
|
||||
background: #fff;
|
||||
border: 1px solid #d9e2ec;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 10px 30px rgba(17, 24, 39, 0.25); /* même shadow */
|
||||
}
|
||||
|
||||
/* Modale carte (grande largeur) */
|
||||
.hol-dialog--map {
|
||||
width: min(1200px, calc(100% - 24px));
|
||||
}
|
||||
|
||||
.hol-map-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px 12px;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
/* Formulaire modale (alignement gift-list) */
|
||||
.hol-form {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
padding: 14px;
|
||||
}
|
||||
.hol-form h3 {
|
||||
margin: 0 0 4px;
|
||||
font-size: 16px;
|
||||
color: #243b53;
|
||||
}
|
||||
|
||||
.hol-inline {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.hol-form label {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
font-size: 12px;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.hol-form input,
|
||||
.hol-form select,
|
||||
.hol-form textarea {
|
||||
font-size: 12px;
|
||||
padding: 6px 8px;
|
||||
border: 1px solid #d9e2ec;
|
||||
border-radius: 6px;
|
||||
background: #ffffff;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
/* Actions modale */
|
||||
.hol-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.hol-cancel,
|
||||
.hol-ok {
|
||||
font-size: 12px;
|
||||
padding: 6px 12px;
|
||||
border: 1px solid #d9e2ec;
|
||||
border-radius: 6px;
|
||||
background: #f0f4f8;
|
||||
cursor: pointer;
|
||||
}
|
||||
.hol-ok {
|
||||
font-weight: 600;
|
||||
color: #1f2933;
|
||||
}
|
||||
.hol-cancel {
|
||||
color: #d03050;
|
||||
}
|
||||
.hol-cancel:hover,
|
||||
.hol-ok:hover {
|
||||
background: #d9e2ec;
|
||||
}
|
||||
|
||||
/* Focus accessible */
|
||||
.hol-form input:focus-visible,
|
||||
.hol-form select:focus-visible,
|
||||
.hol-form textarea:focus-visible,
|
||||
.hol-cancel:focus-visible,
|
||||
.hol-ok:focus-visible {
|
||||
outline: 2px solid #2563eb;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* === Picker multi-résultats Géocode (harmonisé) === */
|
||||
.hol-geocode-picker {
|
||||
margin-top: 8px;
|
||||
background: #fff;
|
||||
border: 1px solid #d9e2ec;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
|
||||
overflow: hidden;
|
||||
}
|
||||
.hol-geocode-picker__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px 10px;
|
||||
background: #f8fafc;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #243b53;
|
||||
}
|
||||
.hol-geocode-picker__close {
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
padding: 2px 6px;
|
||||
}
|
||||
.hol-geocode-picker__list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 6px;
|
||||
max-height: 260px;
|
||||
overflow: auto;
|
||||
}
|
||||
.hol-geocode-picker__item {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto auto;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.hol-geocode-picker__item + .hol-geocode-picker__item {
|
||||
margin-top: 4px;
|
||||
}
|
||||
.hol-geocode-picker__label {
|
||||
font-size: 12px;
|
||||
color: #111827;
|
||||
}
|
||||
.hol-geocode-picker__coords {
|
||||
font-size: 11px;
|
||||
color: #6b7280;
|
||||
}
|
||||
.hol-geocode-picker__pick {
|
||||
padding: 6px 10px;
|
||||
border: 1px solid #d9e2ec;
|
||||
border-radius: 6px;
|
||||
background: #f0f4f8;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* === Mobile Comfort (aligné gift-list) === */
|
||||
@media (pointer: coarse), (max-width: 780px) {
|
||||
.pf-holidays h1 {
|
||||
font-size: clamp(24px, 7vw, 30px);
|
||||
margin: 10px 0 6px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.pf-holidays h2 {
|
||||
font-size: clamp(20px, 5.6vw, 24px);
|
||||
line-height: 1.25;
|
||||
margin: 10px 0 6px;
|
||||
}
|
||||
.pf-holidays h3 {
|
||||
font-size: clamp(17px, 4.8vw, 20px);
|
||||
line-height: 1.3;
|
||||
margin: 8px 0 4px;
|
||||
}
|
||||
|
||||
.btn,
|
||||
.hol-add-btn,
|
||||
.hol-map-toggle {
|
||||
font-size: 18px;
|
||||
padding: 12px 14px;
|
||||
min-height: 48px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.hol-form input,
|
||||
.hol-form select,
|
||||
.hol-form textarea,
|
||||
.hol-cancel,
|
||||
.hol-ok {
|
||||
font-size: 16px; /* évite zoom iOS */
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
.hol-dialog {
|
||||
width: min(640px, calc(100% - 24px));
|
||||
}
|
||||
}
|
||||
|
||||
/* Cards: style proche gift-list */
|
||||
.hol-ideas-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(260px, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
@media (max-width: 1100px) {
|
||||
.hol-ideas-grid {
|
||||
grid-template-columns: repeat(2, minmax(240px, 1fr));
|
||||
}
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.hol-ideas-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.hol-idea-card {
|
||||
background: #fff;
|
||||
border: 1px solid #d9e2ec;
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
|
||||
transition:
|
||||
box-shadow 120ms ease,
|
||||
transform 120ms ease;
|
||||
}
|
||||
.hol-idea-card:hover {
|
||||
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.hol-idea-card__head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
}
|
||||
.hol-idea-meta,
|
||||
.hol-tags,
|
||||
.hol-notes {
|
||||
font-size: 12px;
|
||||
color: #374151;
|
||||
margin: 6px 0;
|
||||
}
|
||||
.hol-card-actions {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.hol-idea-card--archived {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
/* Boutons cohérents */
|
||||
.btn,
|
||||
.hol-add-btn,
|
||||
.hol-map-toggle {
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #d9e2ec;
|
||||
border-radius: 8px;
|
||||
background: #f0f4f8;
|
||||
color: #243b53;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
}
|
||||
.btn:hover,
|
||||
.hol-add-btn:hover,
|
||||
.hol-map-toggle:hover {
|
||||
background: #e5eef5;
|
||||
}
|
||||
.btn-edit {
|
||||
background: #e0f2fe;
|
||||
border-color: #93c5fd;
|
||||
color: #0f4c81;
|
||||
}
|
||||
.btn-delete {
|
||||
background: #fee2e2;
|
||||
border-color: #fca5a5;
|
||||
color: #7c2d12;
|
||||
}
|
||||
|
||||
/* Modale: harmonisée avec gift-list */
|
||||
.hol-modal {
|
||||
display: none;
|
||||
}
|
||||
.hol-modal.open {
|
||||
display: block;
|
||||
}
|
||||
.hol-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(17, 24, 39, 0.35);
|
||||
z-index: 999;
|
||||
}
|
||||
.hol-dialog {
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: min(560px, calc(100% - 24px));
|
||||
background: #fff;
|
||||
border: 1px solid #d9e2ec;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 10px 30px rgba(17, 24, 39, 0.25);
|
||||
}
|
||||
.hol-dialog--map {
|
||||
width: min(1200px, calc(100% - 24px));
|
||||
}
|
||||
.hol-map-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px 12px;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.hol-form {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
padding: 14px;
|
||||
}
|
||||
.hol-form h3 {
|
||||
margin: 0 0 4px;
|
||||
font-size: 16px;
|
||||
color: #243b53;
|
||||
}
|
||||
.hol-inline {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
.hol-form label {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
font-size: 12px;
|
||||
color: #374151;
|
||||
}
|
||||
.hol-form input,
|
||||
.hol-form select,
|
||||
.hol-form textarea {
|
||||
font-size: 12px;
|
||||
padding: 6px 8px;
|
||||
border: 1px solid #d9e2ec;
|
||||
border-radius: 6px;
|
||||
background: #fff;
|
||||
color: #111827;
|
||||
}
|
||||
.hol-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.hol-cancel,
|
||||
.hol-ok {
|
||||
font-size: 12px;
|
||||
padding: 6px 12px;
|
||||
border: 1px solid #d9e2ec;
|
||||
border-radius: 6px;
|
||||
background: #f0f4f8;
|
||||
cursor: pointer;
|
||||
}
|
||||
.hol-ok {
|
||||
font-weight: 600;
|
||||
color: #1f2933;
|
||||
}
|
||||
.hol-cancel {
|
||||
color: #d03050;
|
||||
}
|
||||
.hol-cancel:hover,
|
||||
.hol-ok:hover {
|
||||
background: #d9e2ec;
|
||||
}
|
||||
.hol-form input:focus-visible,
|
||||
.hol-form select:focus-visible,
|
||||
.hol-form textarea:focus-visible,
|
||||
.hol-cancel:focus-visible,
|
||||
.hol-ok:focus-visible {
|
||||
outline: 2px solid #2563eb;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Geocode picker harmonisé */
|
||||
.hol-geocode-picker {
|
||||
margin-top: 8px;
|
||||
background: #fff;
|
||||
border: 1px solid #d9e2ec;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
|
||||
overflow: hidden;
|
||||
}
|
||||
.hol-geocode-picker__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px 10px;
|
||||
background: #f8fafc;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #243b53;
|
||||
}
|
||||
.hol-geocode-picker__close {
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
padding: 2px 6px;
|
||||
}
|
||||
.hol-geocode-picker__list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 6px;
|
||||
max-height: 260px;
|
||||
overflow: auto;
|
||||
}
|
||||
.hol-geocode-picker__item {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto auto;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.hol-geocode-picker__item + .hol-geocode-picker__item {
|
||||
margin-top: 4px;
|
||||
}
|
||||
.hol-geocode-picker__label {
|
||||
font-size: 12px;
|
||||
color: #111827;
|
||||
}
|
||||
.hol-geocode-picker__coords {
|
||||
font-size: 11px;
|
||||
color: #6b7280;
|
||||
}
|
||||
.hol-geocode-picker__pick {
|
||||
padding: 6px 10px;
|
||||
border: 1px solid #d9e2ec;
|
||||
border-radius: 6px;
|
||||
background: #f0f4f8;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* Mobile comfort (match gift-list) */
|
||||
@media (pointer: coarse), (max-width: 780px) {
|
||||
.pf-holidays h1 {
|
||||
font-size: clamp(24px, 7vw, 30px);
|
||||
margin: 10px 0 6px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.pf-holidays h2 {
|
||||
font-size: clamp(20px, 5.6vw, 24px);
|
||||
line-height: 1.25;
|
||||
margin: 10px 0 6px;
|
||||
}
|
||||
.pf-holidays h3 {
|
||||
font-size: clamp(17px, 4.8vw, 20px);
|
||||
line-height: 1.3;
|
||||
margin: 8px 0 4px;
|
||||
}
|
||||
|
||||
.btn,
|
||||
.hol-add-btn,
|
||||
.hol-map-toggle {
|
||||
font-size: 18px;
|
||||
padding: 12px 14px;
|
||||
min-height: 48px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.hol-form input,
|
||||
.hol-form select,
|
||||
.hol-form textarea,
|
||||
.hol-cancel,
|
||||
.hol-ok {
|
||||
font-size: 16px;
|
||||
min-height: 44px;
|
||||
}
|
||||
.hol-dialog {
|
||||
width: min(640px, calc(100% - 24px));
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user