Skip to content

Commit 21dcefb

Browse files
jstarpljstarpl
committed
fix: simplify PieceIcons.scss
1 parent 02b7a01 commit 21dcefb

File tree

11 files changed

+26
-82
lines changed

11 files changed

+26
-82
lines changed

‎packages/webui/src/client/styles/countdown/overlay.scss‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,10 +59,14 @@ body.transparent {
5959

6060
.clocks-part-icon {
6161
width: (1em * 1.2599784264077);
62-
height: 1em; // 18.3 + 3.6
6362
margin-left: 0.3em;
6463
}
6564

65+
.clocks-part-icon > svg.piece-icon {
66+
vertical-align: top;
67+
margin-top: 0.16em;
68+
}
69+
6670
.clocks-next-rundown,
6771
.clocks-part-title {
6872
font-size: 1em;

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

Lines changed: 3 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -6,92 +6,23 @@ $letter-spacing: 0.02em;
66

77
// Base icon styles
88
.piece-icon {
9-
.camera {
9+
rect.piece-icon-bkg {
1010
@include item-type-colors-svg();
1111
rx: 4;
1212
ry: 4;
1313
}
1414

15-
.live-speak {
16-
fill: url(#background-gradient);
17-
rx: 4;
18-
ry: 4;
19-
}
20-
21-
.graphics {
22-
@include item-type-colors-svg();
23-
rx: 4;
24-
ry: 4;
25-
}
26-
27-
.local {
28-
@include item-type-colors-svg();
29-
rx: 4;
30-
ry: 4;
31-
}
32-
33-
.remote {
34-
@include item-type-colors-svg();
35-
rx: 4;
36-
ry: 4;
37-
}
38-
39-
.vt {
40-
@include item-type-colors-svg();
41-
rx: 4;
42-
ry: 4;
43-
}
44-
45-
.unknown {
46-
@include item-type-colors-svg();
47-
rx: 4;
48-
ry: 4;
49-
}
50-
51-
// Gradient styles for live-speak
52-
#background-gradient {
53-
.stop1 {
54-
stop-color: #954c4c;
55-
}
56-
.stop2 {
57-
stop-color: #4c954c;
58-
}
59-
}
60-
61-
// Split view specific styles
62-
.upper,
63-
.lower {
64-
rx: 4;
65-
ry: 4;
66-
67-
&.camera {
68-
@include item-type-colors-svg();
69-
}
70-
&.remote {
71-
@include item-type-colors-svg();
72-
}
73-
&.remote.second {
74-
@include item-type-colors-svg();
75-
}
76-
}
77-
7815
// Common text styles
7916
.piece-icon-text {
8017
fill: $text-color;
81-
font-family:
82-
Roboto Condensed,
83-
Roboto,
84-
sans-serif;
18+
font-family: 'Roboto Condensed', Roboto, sans-serif;
8519
font-size: 40px;
8620

8721
filter: drop-shadow($text-shadow);
8822

8923
.label {
9024
fill: $text-color;
91-
font-family:
92-
Roboto Condensed,
93-
Roboto,
94-
sans-serif;
25+
font-family: 'Roboto Condensed', Roboto, sans-serif;
9526
font-size: $font-size-base;
9627
font-weight: 300;
9728
letter-spacing: $letter-spacing;

‎packages/webui/src/client/ui/PieceIcons/Renderers/CamInputIcon.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export function CamInputIcon({
88
}): JSX.Element {
99
return (
1010
<svg className="piece-icon" version="1.1" viewBox="0 0 126.5 89" xmlns="http://www.w3.org/2000/svg">
11-
<rect width="126.5" height="89" className="camera" />
11+
<rect width="126.5" height="89" className="piece-icon-bkg camera" />
1212
<text
1313
x="63.25"
1414
y="71.513954"

‎packages/webui/src/client/ui/PieceIcons/Renderers/GraphicsInputIcon.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
export function GraphicsInputIcon({ abbreviation }: { abbreviation?: string }): JSX.Element {
22
return (
33
<svg className="piece-icon" version="1.1" viewBox="0 0 126.5 89" xmlns="http://www.w3.org/2000/svg">
4-
<rect width="126.5" height="89" className="graphics" />
4+
<rect width="126.5" height="89" className="piece-icon-bkg graphics" />
55
<text
66
x="63.25"
77
y="71.513954"

‎packages/webui/src/client/ui/PieceIcons/Renderers/LiveSpeakInputIcon.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
export function LiveSpeakInputIcon({ abbreviation }: { abbreviation?: string }): JSX.Element {
22
return (
33
<svg className="piece-icon" version="1.1" viewBox="0 0 126.5 89" xmlns="http://www.w3.org/2000/svg">
4+
<rect width="126.5" height="89" className="piece-icon-bkg live-speak" />
45
<linearGradient id="background-gradient" gradientTransform="rotate(90)">
56
<stop className="stop1" offset={0.5} />
67
<stop className="stop2" offset={0.5} />
78
</linearGradient>
8-
<rect width="126.5" height="89" className="live-speak" />
99
<text
1010
x="63.25"
1111
y="71.513954"

‎packages/webui/src/client/ui/PieceIcons/Renderers/RemoteInputIcon.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import React from 'react'
33
export function BaseRemoteInputIcon(props: Readonly<React.PropsWithChildren<{ className: string }>>): JSX.Element {
44
return (
55
<svg className="piece-icon" version="1.1" viewBox="0 0 126.5 89" xmlns="http://www.w3.org/2000/svg">
6-
<rect width="126.5" height="89" className={props.className} />
6+
<rect width="126.5" height="89" className={`piece-icon-bkg ${props.className}`} />
77
<text
88
x="63.25"
99
y="71.513954"

‎packages/webui/src/client/ui/PieceIcons/Renderers/RemoteSpeakInputIcon.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
export function RemoteSpeakInputIcon({ abbreviation }: { abbreviation?: string }): JSX.Element {
22
return (
33
<svg className="piece_icon" version="1.1" viewBox="0 0 126.5 89" xmlns="http://www.w3.org/2000/svg">
4-
<rect width="126.5" height="89" className="remote-speak" />
4+
<rect width="126.5" height="89" className="piece-icon-bkg remote-speak" />
55
<linearGradient id="background-gradient" gradientTransform="rotate(90)">
66
<stop className="stop1" offset={0.5} />
77
<stop className="stop2" offset={0.5} />

‎packages/webui/src/client/ui/PieceIcons/Renderers/SplitInputIcon.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,12 +60,16 @@ export default class SplitInputIcon extends React.Component<{
6060
xmlns="http://www.w3.org/2000/svg"
6161
preserveAspectRatio="none"
6262
>
63-
<rect width="126.5" height="44.5" className={classNames('upper', this.getLeftSourceType(this.props.piece))} />
63+
<rect
64+
width="126.5"
65+
height="44.5"
66+
className={classNames('piece-icon-bkg', 'upper', this.getLeftSourceType(this.props.piece))}
67+
/>
6468
<rect
6569
width="126.5"
6670
height="44.5"
6771
y="44.5"
68-
className={classNames('lower', this.getRightSourceType(this.props.piece))}
72+
className={classNames('piece-icon-bkg', 'lower', this.getRightSourceType(this.props.piece))}
6973
/>
7074
{!this.props.hideLabel && (
7175
<text

‎packages/webui/src/client/ui/PieceIcons/Renderers/UnknownInputIcon.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
export function UnknownInputIcon(): JSX.Element {
22
return (
33
<svg className="piece-icon" version="1.1" viewBox="0 0 126.5 89" xmlns="http://www.w3.org/2000/svg">
4-
<rect width="126.5" height="89" className="piece-icon-rect" />
4+
<rect width="126.5" height="89" className="piece-icon-bkg unknown" />
55
<text
66
x="63.25"
77
y="71.513954"

‎packages/webui/src/client/ui/PieceIcons/Renderers/VTInputIcon.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
export function VTInputIcon({ abbreviation }: { abbreviation?: string }): JSX.Element {
22
return (
33
<svg className="piece-icon" version="1.1" viewBox="0 0 126.5 89" xmlns="http://www.w3.org/2000/svg">
4-
<rect width="126.5" height="89" className="vt" />
4+
<rect width="126.5" height="89" className="piece-icon-bkg vt" />
55
<text
66
x="63.25"
77
y="71.513954"

0 commit comments

Comments
 (0)