Skip to content

Commit ceb338f

Browse files
jstarpljstarpl
committed
feat: WIP
1 parent e9491bb commit ceb338f

File tree

23 files changed

+320
-36
lines changed

23 files changed

+320
-36
lines changed

‎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/bootstrap-customize.scss‎

Lines changed: 270 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,270 @@
1+
.btn,
2+
.nav-tabs .nav-link {
3+
letter-spacing: 0.2px;
4+
}
5+
6+
:root {
7+
-webkit-font-smoothing: antialiased;
8+
--color-dark-1: #{$dark-1};
9+
--color-dark-2: #{$dark-2};
10+
--color-dark-2-transparent: #{transparentize($dark-2, 0.5)};
11+
--color-primary-dark: #{$primary-dark};
12+
13+
--org-color-error: #e62421;
14+
--org-color-primary: #1769ff;
15+
--org-color-warning: #ffe831;
16+
--org-color-success: #084;
17+
--org-color-unsaved: #fff5c6;
18+
--org-color-focus: #2bb9ff;
19+
--org-color-white: #fff;
20+
--org-color-black: #101418;
21+
--org-color-gray-900: #17191c;
22+
--org-color-gray-800: #202427;
23+
--org-color-gray-700: #292e32;
24+
--org-color-gray-600: #32383e;
25+
--org-color-gray-500: #6c7f93;
26+
--org-color-gray-400: #d6dbe1;
27+
--org-color-gray-300: #e2e6e9;
28+
--org-color-gray-200: #edf0f2;
29+
--org-color-gray-100: #f9fafb;
30+
--org-color-background-dark-1: #292e32;
31+
--org-color-background-dark-2: #202427;
32+
--org-color-background-dark-3: #17191c;
33+
--org-color-background-dark-4: #101418;
34+
--org-color-background-light-1: #f9fafb;
35+
--org-color-background-light-2: #edf0f2;
36+
--org-color-background-light-3: #e2e6e9;
37+
--org-color-background-light-4: #fff;
38+
--org-color-shade-0: hsl(204, 10%, 10%);
39+
--org-color-shade-1: hsl(206, 10%, 14%);
40+
--org-color-shade-2: hsl(204, 10%, 18%);
41+
--org-color-shade-3: hsl(203, 10%, 25%);
42+
--org-color-shade-trans-3: hsla(209, 15%, 50%, 0.6);
43+
--org-xsmall: 5px;
44+
--org-small: 10px;
45+
--org-medium: 20px;
46+
--org-large: 40px;
47+
--org-font-small: 12px;
48+
--org-font-medium: 14px;
49+
--org-font-2medium: 16px;
50+
--org-font-3medium: 18px;
51+
--org-font-large: 24px;
52+
--org-font-xlarge: 32px;
53+
--org-font-2xlarge: 42px;
54+
--org-shadow-small: 0 2px 7px hsla(210, 15%, 50%, 0.2);
55+
--org-shadow-medium: 0 4px 14px hsla(210, 15%, 50%, 0.4);
56+
--org-shadow-large: 0 5px 40px hsla(210, 15%, 50%, 0.6);
57+
--org-shadow-focus: 0 0 0 2px #2bb9ff;
58+
--org-shadow-border: inset 0 0 0 1px hsla(210, 15%, 50%, 0.4);
59+
--org-striped: repeating-linear-gradient(315deg, transparent, transparent 4px, currentColor 5px, transparent 6px);
60+
61+
--bs-btn-hover-bg: hsla(211, 15%, 50%, 0.2);
62+
--bs-btn-active-bg: hsla(211, 15%, 50%, 0.2);
63+
}
64+
65+
[data-bs-theme=dark] {
66+
scrollbar-color: var(--org-color-shade-3) var(--org-color-shade-1);
67+
68+
.btn.btn-secondary {
69+
--bs-btn-border-color: transparent;
70+
--bs-btn-bg: var(--org-color-shade-2, hsla(210, 15%, 50%, 0.2));
71+
--bs-btn-active-bg: var(--org-color-shade-2, hsla(210, 15%, 50%, 0.2));
72+
--bs-btn-hover-bg: var(--org-color-shade-2, hsla(210, 15%, 50%, 0.2));
73+
--bs-btn-focus-shadow-rgb: 58, 128, 255;
74+
}
75+
76+
.modal {
77+
--bs-modal-bg: #{$modal-bg-dark};
78+
}
79+
}
80+
81+
/* Remove outline for non-keyboard :focus */
82+
*:focus:not(:focus-visible) {
83+
outline: none;
84+
}
85+
86+
/* Optional: Customize .focus-visible */
87+
:focus-visible {
88+
outline: $primary solid 2px;
89+
}
90+
91+
.dropdown-menu {
92+
--bs-dropdown-bg: #{$modal-bg-dark};
93+
--bs-dropdown-link-hover-bg: var(--color-list-background-selected);
94+
}
95+
96+
.modal {
97+
--bs-modal-header-padding: 0.5em 1em;
98+
--bs-modal-footer-border-color: transparent;
99+
--bs-modal-header-border-color: transparent;
100+
}
101+
102+
.modal-header {
103+
background: var(--bs-primary);
104+
}
105+
106+
.modal-title {
107+
color: var(--bs-white);
108+
font-weight: 300;
109+
}
110+
111+
.modal-content {
112+
border: none;
113+
}
114+
115+
.btn,
116+
.nav-tabs .nav-link {
117+
transition: 0.2s;
118+
}
119+
120+
.btn {
121+
--bs-btn-border-color: transparent !important;
122+
--bs-btn-active-border-color: transparent !important;
123+
--bs-btn-hover-border-color: transparent !important;
124+
}
125+
126+
.btn.btn-outline-secondary {
127+
--bs-btn-bg: hsla(211, 15%, 50%, 0.2);
128+
--bs-btn-hover-bg: hsla(211, 15%, 50%, 0.2);
129+
--bs-btn-active-bg: hsla(211, 15%, 50%, 0.2);
130+
}
131+
132+
.btn:hover:not(:active),
133+
.nav-tabs .nav-link:hover:not(:active) {
134+
transform: translateY(-1px);
135+
}
136+
137+
.btn:active,
138+
.nav-tabs .nav-link:active {
139+
transform: translateY(1px);
140+
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
141+
}
142+
143+
.btn.selected {
144+
background: linear-gradient(to top, var(--org-color-primary, #1769ff) 2px, transparent 2px),
145+
var(--org-color-shade-2, hsla(210, 15%, 50%, 0.2));
146+
background-repeat: no-repeat;
147+
background-position: center bottom;
148+
}
149+
150+
.btn-check:checked + .btn:focus-visible,
151+
:not(.btn-check) + .btn:active:focus-visible,
152+
.btn:first-child:active:focus-visible,
153+
.btn.active:focus-visible,
154+
.btn.show:focus-visible,
155+
.btn:focus-visible {
156+
box-shadow: var(--org-shadow-focus, 0 0 0 2px #2bb9ff) !important;
157+
outline: none;
158+
}
159+
160+
.btn:disabled,
161+
.btn.disabled,
162+
fieldset:disabled .btn {
163+
position: relative;
164+
background: none !important;
165+
box-shadow: none !important;
166+
border-color: transparent !important;
167+
color: inherit !important;
168+
opacity: 0.5 !important;
169+
}
170+
171+
.btn:disabled::before,
172+
.btn.disabled::before,
173+
fieldset:disabled .btn::before {
174+
background: repeating-linear-gradient(315deg, transparent, transparent 4px, currentColor 5px, transparent 6px);
175+
background: var(
176+
--org-striped,
177+
repeating-linear-gradient(315deg, transparent, transparent 4px, currentColor 5px, transparent 6px)
178+
);
179+
border-radius: inherit;
180+
bottom: 0;
181+
content: '';
182+
left: 0;
183+
opacity: 0.3;
184+
position: absolute;
185+
right: 0;
186+
top: 0;
187+
}
188+
189+
.nav-tabs {
190+
--bs-nav-tabs-border-color: transparent;
191+
}
192+
193+
.nav-tabs .nav-item {
194+
margin-bottom: 0.5em;
195+
}
196+
197+
.nav-tabs .nav-link {
198+
--bs-nav-tabs-link-hover-border-color: transparent;
199+
--bs-nav-tabs-link-active-border-color: transparent;
200+
--bs-nav-tabs-link-active-bg: var(--org-color-shade-2, hsla(210, 15%, 50%, 0.2));
201+
202+
background-color: var(--org-color-shade-2, hsla(210, 15%, 50%, 0.2));
203+
--bs-nav-tabs-link-active-color: var(--org-color-white);
204+
color: var(--org-color-white);
205+
border-radius: var(--bs-nav-tabs-border-radius);
206+
207+
--bs-nav-link-padding-x: #{$btn-padding-x};
208+
--bs-nav-link-padding-y: #{$btn-padding-y};
209+
margin-right: 0.5em;
210+
}
211+
212+
.nav-tabs .nav-link.active {
213+
background: linear-gradient(to top, var(--org-color-primary, #1769ff) 2px, transparent 2px),
214+
var(--org-color-shade-2, hsla(210, 15%, 50%, 0.2));
215+
background-repeat: no-repeat;
216+
background-position: center bottom;
217+
}
218+
219+
.modal-footer .btn {
220+
min-width: 5em;
221+
}
222+
223+
.card {
224+
--bs-card-bg: var(--org-color-shade-0, hsla(207, 10%, 18%, 1));
225+
--bs-card-border-width: 0;
226+
}
227+
228+
.card-body {
229+
font-size: var(--org-font-medium);
230+
}
231+
232+
.card-header {
233+
background-color: var(--org-color-shade-1);
234+
font-size: var(--org-font-medium);
235+
border-width: var(--ta-card-header-border-width);
236+
border-style: solid;
237+
border-color: var(--ta-card-header-border-color);
238+
}
239+
240+
.card-header-title {
241+
font-weight: 600;
242+
letter-spacing: 0.8px;
243+
text-transform: uppercase;
244+
}
245+
246+
.card-header .card-header-icon {
247+
margin-right: 0.5em;
248+
249+
&.custom-svg-icon {
250+
height: 1.5em;
251+
}
252+
}
253+
254+
.btn .btn-icon, .nav-tabs > .nav-item > .nav-link .btn-icon {
255+
margin-right: 0.5em;
256+
}
257+
258+
// .list-group-item:nth-child(2n) {
259+
// --bs-list-group-bg: #313131;
260+
// }
261+
262+
.custom-svg-icon {
263+
height: 1.5em;
264+
overflow: visible;
265+
vertical-align: -0.35rem;
266+
}
267+
268+
.btn .svg-inline--fa + span {
269+
margin-inline-start: calc(var(--bs-btn-padding-x, 0.5em) / 2);
270+
}

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,6 @@
66

77
@import '~bootstrap/scss/bootstrap';
88

9+
@import 'bootstrap-customize';
10+
911
// Then add additional custom code here

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
}
3737

3838
.collapse-json__copy {
39-
font-family: Roboto, arial, sans-serif;
39+
font-family: Roboto, Arial, sans-serif;
4040
font-weight: 500;
4141
font-size: 0.8em;
4242
color: #888;

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -74,8 +74,8 @@ h5,
7474

7575
.text-s {
7676
font-size: 0.875rem;
77-
font-family: Roboto, arial, sans-serif;
78-
font-weight: 100;
77+
font-weight: 400;
78+
opacity: .7;
7979
line-height: 1.5;
8080
letter-spacing: 0.5px;
8181
}
@@ -124,7 +124,7 @@ header {
124124
.dimmed,
125125
:link .dimmed,
126126
:visited .dimmed {
127-
color: #9f9f9f;
127+
color: #737373;
128128
}
129129

130130
.pill {

‎packages/webui/src/client/ui/RundownView.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1853,7 +1853,7 @@ const RundownViewContent = translateWithTracker<IPropsWithReady, IState, ITracke
18531853

18541854
componentDidMount(): void {
18551855
document.body.classList.add('dark', 'vertical-overflow-only')
1856-
document.body.setAttribute('data-bs-theme', 'dark')
1856+
document.documentElement.setAttribute('data-bs-theme', 'dark')
18571857

18581858
rundownNotificationHandler.set(this.onRONotificationClick)
18591859

@@ -2119,7 +2119,7 @@ const RundownViewContent = translateWithTracker<IPropsWithReady, IState, ITracke
21192119

21202120
componentWillUnmount(): void {
21212121
document.body.classList.remove('dark', 'vertical-overflow-only')
2122-
document.body.removeAttribute('data-bs-theme')
2122+
document.documentElement.removeAttribute('data-bs-theme')
21232123
window.removeEventListener('beforeunload', this.onBeforeUnload)
21242124

21252125
documentTitle.set(null)

‎packages/webui/src/client/ui/RundownView/MediaStatusPopUp/MediaStatusPopUp.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@
55
overflow-y: auto;
66
overscroll-behavior: contain;
77
position: relative;
8+
9+
scrollbar-color: var(--org-color-gray-500) var(--panel-background);
810
}
911

1012
.media-status-panel__table {
@@ -31,6 +33,10 @@
3133
opacity 200ms,
3234
visibility 0ms 0ms;
3335

36+
> a {
37+
color: var(--org-color-gray-500);
38+
}
39+
3440
&:hover {
3541
opacity: 1;
3642
}

‎packages/webui/src/client/ui/Settings/Forms.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,3 +51,7 @@
5151
display: flex;
5252
align-items: center;
5353
}
54+
55+
.properties-grid > .field > .btn {
56+
align-self: flex-start;
57+
}

0 commit comments

Comments
 (0)