90 lines
2.1 KiB
CSS
90 lines
2.1 KiB
CSS
/* ALFRED_CAMERA_POPUP_V1 : modal caméra, sans vignette sur l'accueil */
|
|
.camera-popup-overlay[hidden] { display:none !important; }
|
|
.camera-popup-overlay {
|
|
position:fixed;
|
|
inset:0;
|
|
z-index:1000;
|
|
background:rgba(8,14,20,.78);
|
|
backdrop-filter:blur(8px);
|
|
-webkit-backdrop-filter:blur(8px);
|
|
display:grid;
|
|
place-items:center;
|
|
padding:20px;
|
|
}
|
|
.alfred-camera-dialog-open { overflow:hidden; }
|
|
.camera-popup-frame {
|
|
width:min(760px, 100%);
|
|
max-height:calc(100dvh - 40px);
|
|
overflow:auto;
|
|
background:linear-gradient(145deg,#2b343c,#1d242b);
|
|
border:1px solid #ffffff30;
|
|
border-radius:19px;
|
|
box-shadow:0 24px 75px #0009;
|
|
padding:18px;
|
|
}
|
|
.camera-popup-titlebar {
|
|
display:flex;
|
|
justify-content:space-between;
|
|
align-items:center;
|
|
gap:16px;
|
|
margin:0 0 12px;
|
|
}
|
|
.camera-popup-title {
|
|
font-size:1.15rem;
|
|
font-weight:600;
|
|
color:#edf2f6;
|
|
}
|
|
.camera-popup-close {
|
|
width:38px;
|
|
height:38px;
|
|
flex:0 0 38px;
|
|
border-radius:11px;
|
|
border:1px solid #ffffff28;
|
|
background:#ffffff10;
|
|
color:#eef3f7;
|
|
font-size:26px;
|
|
line-height:1;
|
|
cursor:pointer;
|
|
}
|
|
.camera-popup-close:hover { background:#ffffff21; }
|
|
.camera-popup-overlay .camera-panel.camera-popup-body {
|
|
position:relative;
|
|
display:block;
|
|
left:auto;
|
|
right:auto;
|
|
bottom:auto;
|
|
width:100%;
|
|
max-width:none;
|
|
margin:0;
|
|
overflow:hidden;
|
|
border-radius:12px;
|
|
background:#171f25;
|
|
box-shadow:none;
|
|
backdrop-filter:none;
|
|
}
|
|
.camera-popup-overlay .camera-viewport {
|
|
aspect-ratio:16 / 9;
|
|
width:100%;
|
|
min-height:180px;
|
|
}
|
|
.camera-popup-overlay .camera-viewport img {
|
|
width:100%;
|
|
height:100%;
|
|
object-fit:contain;
|
|
}
|
|
.camera-popup-overlay .panel-heading { min-height:46px; }
|
|
.camera-popup-footnote {
|
|
margin:11px 4px 0;
|
|
color:#b1bfc9;
|
|
font-size:.83rem;
|
|
line-height:1.45;
|
|
}
|
|
.camera-popup-close:focus-visible,
|
|
#cameraPopupButton:focus-visible { outline:2px solid #9ccbe7; outline-offset:3px; }
|
|
@media(max-width:760px) {
|
|
.camera-popup-overlay {padding:10px;}
|
|
.camera-popup-frame {width:100%;max-height:calc(100dvh - 20px);padding:12px;}
|
|
.camera-popup-title {font-size:1rem;}
|
|
.camera-popup-overlay .camera-panel.camera-popup-body {grid-row:auto;}
|
|
}
|