chan/whisper-transcript
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

컬럼뷰 수정

Browse Source
This commit is contained in:
Chan
2025-01-09 11:16:52 +09:00
parent 382cd1fa57
commit f98166d4c9
3 changed files with 99 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/tooltip.js
View File

@@ -7,7 +7,6 @@ export class TooltipColorGuide extends LitElement {
display: inline-block;
cursor: pointer;
}
.tooltip-text {
visibility: hidden;
width: 200px;
@@ -18,20 +17,21 @@ export class TooltipColorGuide extends LitElement {
padding: 10px;
position: absolute;
z-index: 1;
top: 125%;
left: 50%;
transform: translateX(-50%);
/* ▼ 오른쪽 아래로 배치 ▼ */
top: 100%;
left: 100%;
/* 왼쪽 위 꼭짓점이 부모의 (오른쪽 아래 꼭짓점)에 딱 맞도록 함 */
transform: translate(0, 0);
opacity: 0;
transition: opacity 0.3s;
}
.tooltip span {
color : white;
}
.tooltip:hover .tooltip-text {
visibility: visible;
opacity: 1;
}
.tooltip span {
color: white;
}
.color-box {
display: inline-block;
width: 12px;
@@ -45,10 +45,18 @@ export class TooltipColorGuide extends LitElement {
<div class="tooltip">
<span>Color Guide</span>
<div class="tooltip-text">
<div><span class="color-box" style="background-color: white;"></span>this.probability > 0.9: (White)</div>
<div><span class="color-box" style="background-color: yellow;"></span>this.probability > 0.7: (Yellow)</div>
<div><span class="color-box" style="background-color: orange;"></span>this.probability > 0.5: (Orange)</div>
<div><span class="color-box" style="background-color: red;"></span>this.probability ≤ 0.5: (Red)</div>
<div>
<span class="color-box" style="background-color: white;"></span>this.probability > 0.9: (White)
</div>
<div>
<span class="color-box" style="background-color: yellow;"></span>this.probability > 0.7: (Yellow)
</div>
<div>
<span class="color-box" style="background-color: orange;"></span>this.probability > 0.5: (Orange)
</div>
<div>
<span class="color-box" style="background-color: red;"></span>this.probability ≤ 0.5: (Red)
</div>
</div>
</div>
`;