v2.2 - Small improvement Interface change
This commit is contained in:
pporcheret
@@ -0,0 +1,148 @@
|
||||
/* ALFRED_STT_INLINE_GLASS_V1 — transcription en texte libre au-dessus de la vague.
|
||||
Charge apres alfred-main-v1.css et alfred-main-v2.css. */
|
||||
.alfred-glass-theme .alfred-main-v1 .av-voice-hero.av-stt-inline-on {
|
||||
display:flex !important;
|
||||
flex-direction:column !important;
|
||||
align-items:center !important;
|
||||
justify-content:center !important;
|
||||
gap:0 !important;
|
||||
overflow:hidden;
|
||||
}
|
||||
/* Ancien aside STT : aucun cadre, aucune position flottante. */
|
||||
.alfred-glass-theme .alfred-main-v1 .av-voice-hero .transcript-panel.av-stt-inline {
|
||||
position:relative !important;
|
||||
inset:auto !important;
|
||||
left:auto !important; right:auto !important; top:auto !important; bottom:auto !important;
|
||||
transform:none !important;
|
||||
order:0;
|
||||
z-index:3 !important;
|
||||
display:flex !important;
|
||||
flex-direction:column !important;
|
||||
align-items:center !important;
|
||||
justify-content:center !important;
|
||||
flex:0 0 auto;
|
||||
width:min(920px,96%) !important;
|
||||
max-width:96% !important;
|
||||
min-height:0 !important;
|
||||
height:auto !important;
|
||||
margin:0 auto !important;
|
||||
padding:0 8px !important;
|
||||
border:0 !important;
|
||||
border-radius:0 !important;
|
||||
outline:0 !important;
|
||||
background:transparent !important;
|
||||
box-shadow:none !important;
|
||||
backdrop-filter:none !important;
|
||||
-webkit-backdrop-filter:none !important;
|
||||
opacity:1 !important;
|
||||
text-align:center;
|
||||
pointer-events:none;
|
||||
}
|
||||
.alfred-glass-theme .alfred-main-v1 .av-stt-inline .panel-heading {
|
||||
min-height:0 !important;
|
||||
width:100%;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
flex-wrap:wrap;
|
||||
gap:8px 14px;
|
||||
margin:0 0 4px !important;
|
||||
padding:0 !important;
|
||||
}
|
||||
.alfred-glass-theme .alfred-main-v1 .av-stt-inline .panel-title {
|
||||
display:inline-flex;
|
||||
align-items:center;
|
||||
gap:7px;
|
||||
color:rgba(209,226,247,.83);
|
||||
font-size:clamp(10px,.85vw,13px) !important;
|
||||
font-weight:650;
|
||||
letter-spacing:.08em;
|
||||
text-shadow:0 2px 9px #0008;
|
||||
}
|
||||
.alfred-glass-theme .alfred-main-v1 .av-stt-inline .stt-indicator {background:#5e94df;}
|
||||
.alfred-glass-theme .alfred-main-v1 .av-stt-inline[data-active="true"] .stt-indicator {background:#61dfc4;}
|
||||
.alfred-glass-theme .alfred-main-v1 .av-stt-inline .transcript-state {
|
||||
color:#87c9ff !important;
|
||||
font-size:clamp(10px,.85vw,12px);
|
||||
font-weight:650;
|
||||
white-space:nowrap;
|
||||
}
|
||||
.alfred-glass-theme .alfred-main-v1 .av-stt-inline .transcript-text {
|
||||
display:-webkit-box;
|
||||
-webkit-box-orient:vertical;
|
||||
-webkit-line-clamp:2;
|
||||
line-clamp:2;
|
||||
overflow:hidden !important;
|
||||
width:100%;
|
||||
max-height:3.1em !important;
|
||||
margin:0 !important;
|
||||
color:#f0f7ff !important;
|
||||
font-size:clamp(13px,1.18vw,18px) !important;
|
||||
font-weight:450;
|
||||
line-height:1.45 !important;
|
||||
text-align:center;
|
||||
text-shadow:0 2px 13px rgba(0,0,0,.85);
|
||||
overflow-wrap:anywhere;
|
||||
opacity:1 !important;
|
||||
}
|
||||
.alfred-glass-theme .alfred-main-v1 .av-stt-inline .transcript-text.is-placeholder {
|
||||
color:rgba(205,223,243,.62) !important;
|
||||
}
|
||||
/* Vague et messages existants sous la transcription. Le canvas reste original. */
|
||||
.alfred-glass-theme .alfred-main-v1 .av-voice-hero.av-stt-inline-on .av-wave-host {
|
||||
position:relative !important;
|
||||
inset:auto !important;
|
||||
left:auto !important; top:auto !important;
|
||||
transform:none !important;
|
||||
order:1;
|
||||
z-index:1;
|
||||
flex:0 0 clamp(46px,5.3vw,72px);
|
||||
align-self:center;
|
||||
width:min(800px,90%) !important;
|
||||
height:clamp(46px,5.3vw,72px) !important;
|
||||
margin:0 auto !important;
|
||||
}
|
||||
.alfred-glass-theme .alfred-main-v1 .av-voice-hero.av-stt-inline-on .av-wave-host #wave,
|
||||
.alfred-glass-theme .alfred-main-v1 .av-voice-hero.av-stt-inline-on .av-wave-host canvas {
|
||||
height:100% !important;
|
||||
}
|
||||
.alfred-glass-theme .alfred-main-v1 .av-voice-hero.av-stt-inline-on .av-voice-controls {
|
||||
position:relative !important;
|
||||
inset:auto !important;
|
||||
order:2;
|
||||
min-height:0 !important;
|
||||
height:auto !important;
|
||||
flex:0 0 auto;
|
||||
padding-top:0 !important;
|
||||
margin:0 !important;
|
||||
align-self:center !important;
|
||||
}
|
||||
.alfred-glass-theme .alfred-main-v1 .av-voice-hero.av-stt-inline-on .av-voice-center {
|
||||
min-width:0 !important;
|
||||
}
|
||||
/* Mode et messages d'etat, volontairement inchanges. */
|
||||
@media (max-width:1100px) {
|
||||
.alfred-glass-theme .alfred-main-v1 .av-voice-hero.av-stt-inline-on {
|
||||
min-height:215px !important;
|
||||
}
|
||||
}
|
||||
@media (max-width:600px) {
|
||||
.alfred-glass-theme .alfred-main-v1 .av-voice-hero.av-stt-inline-on {
|
||||
min-height:200px !important;
|
||||
padding:8px 0;
|
||||
}
|
||||
.alfred-glass-theme .alfred-main-v1 .av-voice-hero .transcript-panel.av-stt-inline {
|
||||
width:100% !important; max-width:100% !important;
|
||||
}
|
||||
.alfred-glass-theme .alfred-main-v1 .av-stt-inline .panel-heading {gap:3px 8px;}
|
||||
.alfred-glass-theme .alfred-main-v1 .av-stt-inline .panel-title {font-size:10px !important;letter-spacing:.03em;}
|
||||
.alfred-glass-theme .alfred-main-v1 .av-stt-inline .transcript-text {font-size:13px !important;}
|
||||
.alfred-glass-theme .alfred-main-v1 .av-voice-hero.av-stt-inline-on .av-wave-host {
|
||||
width:100% !important;
|
||||
flex-basis:50px;
|
||||
height:50px !important;
|
||||
}
|
||||
}
|
||||
@media(prefers-reduced-motion:reduce) {
|
||||
.alfred-glass-theme .alfred-main-v1 .av-stt-inline {transition:none !important;}
|
||||
}
|
||||
Reference in New Issue
Block a user