Ajout de HelloFresh
This commit is contained in:
325
wwwroot/css/HelloFresh/cuisine.css
Normal file
325
wwwroot/css/HelloFresh/cuisine.css
Normal file
@@ -0,0 +1,325 @@
|
||||
:root {
|
||||
--bg: #0b0d12;
|
||||
--panel: #11141b;
|
||||
--muted: #8a93a6;
|
||||
--text: #e8ecf3;
|
||||
--accent: #4f8cff;
|
||||
--accent-2: #63e;
|
||||
--card: #151a22;
|
||||
--border: #1f2632;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
body {
|
||||
overflow: hidden;
|
||||
font: 14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
|
||||
}
|
||||
|
||||
.cui-root {
|
||||
height: 100dvh;
|
||||
display: grid;
|
||||
grid-template-columns: 320px 1fr;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.cui-root.collapsed {
|
||||
grid-template-columns: 56px 1fr;
|
||||
}
|
||||
|
||||
.cui-side {
|
||||
background: var(--panel);
|
||||
border-right: 1px solid var(--border);
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.cui-side-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 12px 8px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.cui-side h2 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.cui-side .ghost {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.cui-root.collapsed #toggleSide {
|
||||
transform: rotate(180deg)
|
||||
}
|
||||
|
||||
.ghost {
|
||||
background: transparent;
|
||||
border: 1px solid var(--border);
|
||||
color: var(--muted);
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.ghost:hover {
|
||||
border-color: #2a3343;
|
||||
color: #b7c2da
|
||||
}
|
||||
|
||||
.cui-cards {
|
||||
padding: 10px;
|
||||
overflow: auto;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* --- Cartes --- */
|
||||
.cui-card {
|
||||
background: var(--card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 14px;
|
||||
padding: 8px;
|
||||
display: grid;
|
||||
grid-template-columns: 40px 1fr;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
cursor: pointer;
|
||||
transition: transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
|
||||
position: relative; /* pour l'effet d'état */
|
||||
}
|
||||
|
||||
.cui-card:hover {
|
||||
transform: translateY(-1px);
|
||||
border-color: #2a3343
|
||||
}
|
||||
|
||||
/* ✅ Remplace l’outline par un box-shadow interne : plus de “carré bleu” coupé */
|
||||
.cui-card.active {
|
||||
box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 3px rgba(79,140,255,.15);
|
||||
border-color: rgba(79,140,255,.45);
|
||||
}
|
||||
|
||||
/* contenu carte */
|
||||
.cui-thumb {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 10px;
|
||||
object-fit: cover;
|
||||
background: #222
|
||||
}
|
||||
|
||||
.cui-info {
|
||||
min-width: 0;
|
||||
}
|
||||
/* ✅ permet l’ellipsis */
|
||||
.cui-name {
|
||||
font-size: 13px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: #cfd6e6
|
||||
}
|
||||
|
||||
.cui-meta {
|
||||
font-size: 11px;
|
||||
color: var(--muted)
|
||||
}
|
||||
|
||||
.cui-main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.cui-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 12px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: linear-gradient(180deg, #0f131a, #0c1016);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.cui-title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
flex: 1 1 auto; /* ✅ prend l’espace dispo */
|
||||
min-width: 0; /* ✅ autorise l’ellipsis */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.primary {
|
||||
background: var(--accent);
|
||||
color: white;
|
||||
border: 0;
|
||||
padding: 8px 12px;
|
||||
border-radius: 10px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 6px 16px rgba(79,140,255,.25);
|
||||
}
|
||||
|
||||
.primary:disabled {
|
||||
opacity: .5;
|
||||
cursor: not-allowed;
|
||||
box-shadow: none
|
||||
}
|
||||
|
||||
.cui-view {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
background: #0a0d13;
|
||||
}
|
||||
|
||||
.cui-iframe {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cui-placeholder {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: var(--muted);
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.viewer {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: #000;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
z-index: 9999
|
||||
}
|
||||
|
||||
.viewer.hidden {
|
||||
display: none
|
||||
}
|
||||
|
||||
.viewer-top {
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 8px 10px;
|
||||
background: rgba(5,8,12,.7);
|
||||
backdrop-filter: blur(6px);
|
||||
}
|
||||
|
||||
.viewer-title {
|
||||
color: #dfe6f5;
|
||||
font-weight: 600;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.viewer-iframe {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
border: 0
|
||||
}
|
||||
|
||||
#toggleSide {
|
||||
transition: transform .15s ease
|
||||
}
|
||||
|
||||
.cui-root.collapsed .cui-side h2 {
|
||||
display: none
|
||||
}
|
||||
|
||||
.cui-root.collapsed .cui-card {
|
||||
grid-template-columns: 40px;
|
||||
padding: 6px
|
||||
}
|
||||
|
||||
.cui-root.collapsed .cui-name, .cui-root.collapsed .cui-meta {
|
||||
display: none
|
||||
}
|
||||
|
||||
/* petites cartes = pas de scroll vertical à l’arrivée */
|
||||
@media (min-width: 1200px) {
|
||||
.cui-card {
|
||||
grid-template-columns: 36px 1fr;
|
||||
gap: 6px
|
||||
}
|
||||
|
||||
.cui-thumb {
|
||||
width: 36px;
|
||||
height: 36px
|
||||
}
|
||||
}
|
||||
|
||||
/* tablette : sidebar plus étroite (toujours sans scroll body) */
|
||||
@media (max-width: 900px) {
|
||||
.cui-root {
|
||||
grid-template-columns: 86px 1fr;
|
||||
}
|
||||
}
|
||||
/* --- Correctifs ciblés --- */
|
||||
|
||||
/* Anneau interne pour la carte active (ne sera plus coupé) */
|
||||
.cui-card.active {
|
||||
/* on remplace l'outline externe par un halo interne */
|
||||
box-shadow: 0 0 0 2px var(--accent) inset;
|
||||
outline: none; /* par sûreté */
|
||||
}
|
||||
|
||||
/* quand la sidebar est réduite, même anneau interne */
|
||||
.cui-root.collapsed .cui-card.active {
|
||||
box-shadow: 0 0 0 2px var(--accent) inset;
|
||||
}
|
||||
|
||||
/* Titre de la barre du haut : ellipsis propre si le nom est long */
|
||||
.cui-title {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
max-width: calc(100vw - 220px); /* laisse la place au bouton */
|
||||
}
|
||||
|
||||
/* L’iframe de prévisualisation occupe exactement l’espace dispo */
|
||||
.cui-iframe {
|
||||
display: block; /* évite certains comportements inline-iframe */
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Par sécurité, pas de scroll horizontal dans le PDF */
|
||||
.cui-view {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Dans la liste, garantir l’ellipsis sur les noms longs */
|
||||
.cui-name {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
Reference in New Issue
Block a user