Skip to content

Commit df6f8a2

Browse files
jstarpljstarpl
authored
Merge pull request Sofie-Automation#1446 from nrkno/feat/sofie-3880/improve-bootstrap-theme
2 parents 21dcefb + 0e12c50 commit df6f8a2

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

49 files changed

+487
-224
lines changed

‎packages/webui/src/client/lib/Components/LabelAndOverrides.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -111,8 +111,7 @@ export function LabelAndOverrides<T extends object, TValue = any>({
111111
)}
112112
</span>
113113
<Button variant="primary" onClick={clearOverride} title="Reset to default" disabled={!isOverridden}>
114-
{t('Reset')}
115-
&nbsp;
114+
<span>{t('Reset')}</span>
116115
<FontAwesomeIcon icon={faSync} />
117116
</Button>
118117
</>

‎packages/webui/src/client/lib/forms/SchemaFormTable/ArrayTable.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -163,8 +163,7 @@ export const SchemaFormArrayTable = ({
163163
&nbsp;
164164
{item.defaults && (
165165
<button className="btn btn-primary" onClick={resyncTable} title="Reset to default" disabled={!isOverridden}>
166-
{t('Reset')}
167-
&nbsp;
166+
<span>{t('Reset')}</span>
168167
<FontAwesomeIcon icon={faSync} />
169168
</button>
170169
)}

‎packages/webui/src/client/lib/forms/SchemaFormTable/ObjectTable.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -381,7 +381,7 @@ function ImportExportButtons({ schema, overrideHelper, wrappedRows }: Readonly<I
381381
return (
382382
<>
383383
<Tooltip overlay={t('Import')} placement="top">
384-
<span className="inline-block">
384+
<div className="d-inline-block">
385385
<UploadButton
386386
className="btn btn-secondary"
387387
onUploadContents={importTable}
@@ -390,7 +390,7 @@ function ImportExportButtons({ schema, overrideHelper, wrappedRows }: Readonly<I
390390
>
391391
<FontAwesomeIcon icon={faUpload} />
392392
</UploadButton>
393-
</span>
393+
</div>
394394
</Tooltip>
395395

396396
<Tooltip overlay={t('Export')} placement="top">

‎packages/webui/src/client/lib/ui/icons/mediaStatus.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,13 +20,13 @@ export function MediaStatusPopOutIcon(): JSX.Element {
2020
<svg width="21" height="22" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
2121
<path
2222
d="M20.9999 1.02148C20.9999 0.469199 20.5522 0.0214843 19.9999 0.0214844L10.9999 0.0214862C10.4476 0.0214863 9.99989 0.469202 9.99989 1.02149C9.99989 1.57377 10.4476 2.02149 10.9999 2.02149L18.9999 2.02148L18.9999 10.0215C18.9999 10.5738 19.4476 11.0215 19.9999 11.0215C20.5522 11.0215 20.9999 10.5738 20.9999 10.0215L20.9999 1.02148ZM8.6197 13.8159L20.707 1.72859L19.2928 0.314378L7.20549 12.4017L8.6197 13.8159Z"
23-
fill="#999999"
23+
fill="currentColor"
2424
/>
2525
<path
2626
fillRule="evenodd"
2727
clipRule="evenodd"
2828
d="M9.89068 3.21826H2.96722C1.32847 3.21826 0 4.54673 0 6.18549V18.0544C0 19.6931 1.32847 21.0216 2.96723 21.0216H14.8361C16.4749 21.0216 17.8033 19.6931 17.8033 18.0544V11.1305H15.8033V18.0544C15.8033 18.5886 15.3703 19.0216 14.8361 19.0216H2.96723C2.43304 19.0216 2 18.5886 2 18.0544V6.18549C2 5.6513 2.43304 5.21826 2.96722 5.21826H9.89068V3.21826Z"
29-
fill="#999999"
29+
fill="currentColor"
3030
/>
3131
</svg>
3232
)

‎packages/webui/src/client/styles/_itemTypeColors.scss‎

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
1+
@use 'sass:color';
2+
@use 'sass:list';
3+
14
$segment-timeline-background-color: #1f1f1f;
25

3-
$segment-layer-border-unknown: darken(#4b4b4b, 10%);
6+
$segment-layer-border-unknown: color.scale(#4b4b4b, $lightness: -10%);
47
$segment-layer-background-unknown: #4b4b4b;
58
$segment-layer-background-camera: #18791c;
6-
$segment-layer-background-camera--second: darken($segment-layer-background-camera, 10%);
9+
$segment-layer-background-camera--second: color.scale($segment-layer-background-camera, $lightness: -10%);
710
$segment-layer-background-lower-third: #ed7200;
8-
$segment-layer-background-lower-third--second: darken($segment-layer-background-lower-third, 10%);
11+
$segment-layer-background-lower-third--second: color.scale($segment-layer-background-lower-third, $lightness: -10%);
912
$segment-layer-background-graphics: #dc5c00;
10-
$segment-layer-background-graphics--second: darken($segment-layer-background-graphics, 10%);
13+
$segment-layer-background-graphics--second: color.scale($segment-layer-background-graphics, $lightness: -10%);
1114
$segment-layer-border-live-speak: #2f74ff;
1215
/** Gradients need to be defined with each color separately, so that they can be applied in SVG **/
1316
$segment-layer-background-gradient-divider: rgba(0, 0, 0, 0.5) 1px;
@@ -19,8 +22,8 @@ $segment-layer-background-live-speak: linear-gradient(
1922
$segment-layer-background-gradient-divider,
2023
$segment-layer-background-live-speak-2 72%
2124
);
22-
$segment-layer-background-live-speak--second-1: darken(#2f74ff, 10%);
23-
$segment-layer-background-live-speak--second-2: darken(#39762b, 10%);
25+
$segment-layer-background-live-speak--second-1: color.scale(#2f74ff, $lightness: -10%);
26+
$segment-layer-background-live-speak--second-2: color.scale(#39762b, $lightness: -10%);
2427
$segment-layer-background-live-speak--second: linear-gradient(
2528
to bottom,
2629
$segment-layer-background-live-speak--second-1 70%,
@@ -36,23 +39,23 @@ $segment-layer-background-remote-speak: linear-gradient(
3639
$segment-layer-background-gradient-divider,
3740
$segment-layer-background-remote-speak-2 72%
3841
);
39-
$segment-layer-background-remote-speak--second-1: darken(#e80064, 10%);
40-
$segment-layer-background-remote-speak--second-2: darken(#39762b, 10%);
42+
$segment-layer-background-remote-speak--second-1: color.scale(#e80064, $lightness: -10%);
43+
$segment-layer-background-remote-speak--second-2: color.scale(#39762b, $lightness: -10%);
4144
$segment-layer-background-remote-speak--second: linear-gradient(
4245
to bottom,
4346
$segment-layer-background-remote-speak--second-1 70%,
4447
$segment-layer-background-gradient-divider,
4548
$segment-layer-background-remote-speak--second-2 72%
4649
);
4750
$segment-layer-background-remote: #e80064;
48-
$segment-layer-background-remote--second: darken($segment-layer-background-remote, 10%);
51+
$segment-layer-background-remote--second: color.scale($segment-layer-background-remote, $lightness: -10%);
4952
$segment-layer-background-vt: #0a20ed;
50-
$segment-layer-background-vt--second: darken($segment-layer-background-vt, 10%);
53+
$segment-layer-background-vt--second: color.scale($segment-layer-background-vt, $lightness: -10%);
5154
$segment-layer-background-script: #003600;
5255
$segment-layer-background-mic: #1e6820;
5356
$segment-layer-background-guest: #008a92;
5457
$segment-layer-background-local: #9a2bd8;
55-
$segment-layer-background-local--second: darken($segment-layer-background-local, 10%);
58+
$segment-layer-background-local--second: color.scale($segment-layer-background-local, $lightness: -10%);
5659
$segment-layer-background-studio-screen: #641fb3;
5760

5861
$step-counter-background-studio-screen: #2a005b;
@@ -64,7 +67,7 @@ $layer-types-solid:
6467
'unknown', 'camera', 'lower-third', 'graphics', 'remote', 'vt', 'local', 'script', 'mic', 'guest', 'studio-screen';
6568
$layer-types-gradient: 'live-speak', 'remote-speak'; //
6669

67-
$layer-types: join($layer-types-solid, $layer-types-gradient);
70+
$layer-types: list.join($layer-types-solid, $layer-types-gradient);
6871

6972
@mixin item-type-text-outline($selectors) {
7073
@each $layer-type in $layer-types {
@@ -400,8 +403,8 @@ $layer-types: join($layer-types-solid, $layer-types-gradient);
400403
-45deg,
401404
transparent 0%,
402405
transparent 8px,
403-
darken($part-start-color, 50%) 8px,
404-
darken($part-start-color, 50%) 10px
406+
color.scale($part-start-color, $lightness: -50%) 8px,
407+
color.scale($part-start-color, $lightness: -50%) 10px
405408
);
406409
backdrop-filter: saturate(0%) brightness(50%);
407410
}

0 commit comments

Comments
 (0)