Skip to content

Commit 0fd2a0d

Browse files
olzzonolzzon
committed
wip: Hover Preview styling
1 parent a497576 commit 0fd2a0d

File tree

4 files changed

+93
-22
lines changed

4 files changed

+93
-22
lines changed

‎packages/webui/src/client/ui/PreviewPopUp/PreviewPopUp.scss‎

Lines changed: 91 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,11 @@
33
.preview-popUp {
44
border: 1px solid var(--sofie-segment-layer-hover-popup-border);
55
background: var(--sofie-segment-layer-hover-popup-background);
6-
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.5);
6+
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.8);
77
border-radius: 5px;
88
overflow: hidden;
99
pointer-events: none;
1010

11-
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.6);
12-
1311
z-index: 9999;
1412

1513
&--large {
@@ -25,18 +23,64 @@
2523
&--hidden {
2624
visibility: none;
2725
}
26+
27+
font-style: normal;
28+
font-weight: 500;
29+
font-size: 16px;
30+
line-height: 110%;
31+
/* identical to box height, or 15px */
32+
letter-spacing: 0.01em;
33+
font-feature-settings: 'liga' off;
34+
35+
color: #ffffff;
36+
font-stretch: 25;
37+
font-variation-settings:
38+
'GRAD' 0,
39+
'opsz' 15,
40+
'slnt' 9,
41+
'XOPQ' 96,
42+
'XTRA' 468,
43+
'YOPQ' 79,
44+
'YTAS' 750,
45+
'YTDE' -203,
46+
'YTFI' 738,
47+
'YTLC' 548,
48+
'YTUC' 712;
2849
}
2950

3051
.preview-popUp__preview {
3152
width: 100%;
32-
font-family: 'Roboto Condensed';
33-
font-size: 0.9375rem; // 15px;
3453

3554
.preview-popUp__script,
3655
.preview-popUp__script-comment,
3756
.preview-popUp__script-last-modified {
38-
padding: 0.4em 0.4em 0.4em 0.6em;
57+
padding: 5px;
58+
padding-left: 2%;
59+
padding-right: 2%;
3960
font-style: italic;
61+
font-weight: 300;
62+
font-size: 16px;
63+
line-height: 120%;
64+
letter-spacing: 0.03em;
65+
font-feature-settings:
66+
'pnum' on,
67+
'lnum' on,
68+
'liga' off;
69+
70+
color: #ffffff;
71+
font-stretch: 75;
72+
font-variation-settings:
73+
'GRAD' 0,
74+
'opsz' 16,
75+
'slnt' -10,
76+
'XOPQ' 96,
77+
'XTRA' 468,
78+
'YOPQ' 79,
79+
'YTAS' 750,
80+
'YTDE' -203,
81+
'YTFI' 738,
82+
'YTLC' 548,
83+
'YTUC' 712;
4084
}
4185

4286
.preview-popUp__script-comment,
@@ -54,45 +98,71 @@
5498
letter-spacing: 0.02rem;
5599

56100
padding: 5px;
101+
padding-left: 2%;
57102
}
58103

59104
.preview-popUp__element-with-time-info {
60105
width: 100%;
61106
display: flex;
62-
font-feature-settings: 'liga' off;
63107

64-
margin-bottom: 0px;
108+
margin-bottom: 5px;
65109

66110
.preview-popUp__element-with-time-info__layer-color {
67-
width: 25px;
68-
height: 20px;
69-
margin-top: 5px;
70-
margin-left: 5px;
71-
margin-right: 5px;
72-
font-size: 1.4em;
111+
height: 15px;
112+
aspect-ratio: 1;
113+
margin-left: 2%;
114+
margin-top: 10px;
115+
flex-shrink: 0;
73116
@include item-type-colors();
74117
}
75118

119+
.preview-popUp__element-with-time-info__text {
120+
margin: 5px;
121+
width: calc(100% - 35px);
122+
flex-grow: 1;
123+
}
124+
76125
.preview-popUp__element-with-time-info__timing {
126+
margin-left: 5px;
77127
overflow: none;
78128
white-space: nowrap;
79129
text-overflow: ellipsis;
130+
font-feature-settings: 'liga' off;
80131

81132
font-weight: 500;
82133
line-height: 100%; /* 15px */
83134

84135
.label {
85136
font-weight: 300;
137+
line-height: 100%;
138+
/* identical to box height, or 15px */
139+
letter-spacing: 0.01em;
140+
font-feature-settings: 'liga' off;
141+
142+
color: #ffffff;
143+
font-stretch: 25;
144+
font-variation-settings:
145+
'opsz' 20,
146+
'GRAD' 0,
147+
'slnt' 0,
148+
'XOPQ' 96,
149+
'XTRA' 468,
150+
'YOPQ' 79,
151+
'YTAS' 750,
152+
'YTDE' -203,
153+
'YTFI' 738,
154+
'YTLC' 548,
155+
'YTUC' 712;
86156
}
87157
}
88158
}
89159

90160
.preview-popup__separation-line {
91-
width: 90%;
92-
margin-left: 5%;
161+
width: 96%;
162+
margin-left: 2%;
93163
background-color: #5b5b5b;
94-
margin-top: 5px;
95-
margin-bottom: 5px;
164+
margin-top: 0px;
165+
margin-bottom: 0px;
96166
}
97167

98168
.preview-popUp__warning {
@@ -220,8 +290,9 @@
220290
text-overflow: clip;
221291
white-space: nowrap;
222292

223-
margin-top: -25px; //Pull up the in/out words a bit
224-
padding: 7px;
293+
padding: 5px;
294+
padding-left: 2%;
295+
padding-right: 2%;
225296

226297
.separation-line {
227298
width: 100%;

‎packages/webui/src/client/ui/PreviewPopUp/PreviewPopUpContent.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,6 @@ export function PreviewPopUpContent({ content, time }: PreviewPopUpContentProps)
3939
case 'inOutWords':
4040
return (
4141
<div className="preview-popUp__in-out-words">
42-
<hr className="separation-line" />
4342
<div className="in-words">{content.in}</div>
4443
<div className="out-words">{content.out}</div>
4544
</div>

‎packages/webui/src/client/ui/PreviewPopUp/PreviewPopUpContext.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,7 @@ export function convertSourceLayerItemToPreview(
100100
break
101101
case PreviewType.VT:
102102
if (popupPreview.preview.outWords) {
103+
contents.push({ type: 'separationLine' })
103104
contents.push({
104105
type: 'inOutWords',
105106
in: popupPreview.preview.inWords,

‎packages/webui/src/client/ui/PreviewPopUp/Previews/LayerInfoPreview.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export function LayerInfoPreview(content: layerInfoContent): React.ReactElement
1515
<div className={classNames('preview-popUp__element-with-time-info__layer-color', sourceLayerClassName)}> </div>
1616
<div>
1717
{content.text.map((line, index) => (
18-
<div key={index} className="mini-inspector__full-text">
18+
<div key={index} className="preview-popUp__element-with-time-info__text">
1919
{line}
2020
</div>
2121
))}

0 commit comments

Comments
 (0)