Skip to content

Commit ed39bf1

Browse files
JulusianJulusian
committed
wip: showstyle settings
1 parent ac44e84 commit ed39bf1

File tree

14 files changed

+435
-414
lines changed

14 files changed

+435
-414
lines changed

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

Lines changed: 9 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useCallback, useRef } from 'react'
2-
import ClassNames from 'classnames'
2+
import Form from 'react-bootstrap/esm/Form'
33

44
interface IToggleSwitchControlProps {
55
classNames?: string
@@ -27,24 +27,13 @@ export function ToggleSwitchControl({
2727
}, [handleUpdate, disabled])
2828

2929
return (
30-
<div className="mvs">
31-
<a
32-
className={ClassNames('switch-button', 'mrs', classNames, disabled ? 'disabled' : '', {
33-
'sb-on': value,
34-
})}
35-
role="button"
36-
onClick={handleChange}
37-
tabIndex={0}
38-
>
39-
<div className="sb-content">
40-
<div className="sb-label">
41-
<span className="mls">&nbsp;</span>
42-
<span className="mrs right">&nbsp;</span>
43-
</div>
44-
<div className="sb-switch"></div>
45-
</div>
46-
</a>
47-
<span>{label}</span>
48-
</div>
30+
<Form.Check
31+
type="switch"
32+
className={classNames}
33+
disabled={disabled}
34+
onClick={handleChange}
35+
checked={value}
36+
label={label}
37+
/>
4938
)
5039
}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ $font-family-sans-serif: 'Roboto', Helvetica Neue, Arial, sans-serif;
55
$body-tertiary-bg-dark: #343434;
66

77
$font-weight-base: 300; // lighter
8+
$dt-font-weight: 400;
89

910
$navbar-brand-font-size: 1rem;
1011

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

Lines changed: 202 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,202 @@
1+
.header-clear {
2+
padding-top: 4rem;
3+
padding-right: $statusbar-width;
4+
}
5+
6+
ul {
7+
margin: 20px;
8+
padding: 0;
9+
}
10+
11+
h1,
12+
h2,
13+
h3,
14+
h4,
15+
h5,
16+
h6 {
17+
font-weight: 300;
18+
color: var(--bs-body-color);
19+
}
20+
21+
h1,
22+
.h1 {
23+
letter-spacing: -0.03em;
24+
font-size: 3rem;
25+
line-height: 1.2;
26+
}
27+
28+
h2,
29+
.h2 {
30+
letter-spacing: -0.03em;
31+
font-size: 1.5rem;
32+
line-height: 1.5;
33+
}
34+
35+
h3,
36+
.h3 {
37+
font-size: 0.875rem;
38+
text-transform: uppercase;
39+
font-weight: bold;
40+
line-height: 1.5rem;
41+
letter-spacing: 0.6px;
42+
}
43+
44+
h4,
45+
.h4 {
46+
font-size: 0.875rem;
47+
text-transform: uppercase;
48+
font-weight: normal;
49+
line-height: 1.5rem;
50+
letter-spacing: 0.5px;
51+
}
52+
53+
h5,
54+
.h5,
55+
.text-s,
56+
.text-s p,
57+
.text-s .mod,
58+
.text-s .table,
59+
.text-s .action-btn,
60+
.switch,
61+
.pill,
62+
.pills .action-btn,
63+
.notification,
64+
.tooltip,
65+
.btn,
66+
.btn-tight {
67+
font-weight: 300;
68+
}
69+
70+
p,
71+
center,
72+
.table {
73+
font-weight: 300;
74+
}
75+
76+
header {
77+
font-weight: 700;
78+
}
79+
80+
.flex-row {
81+
display: flex;
82+
justify-content: flex-start;
83+
align-items: flex-start;
84+
flex-direction: row;
85+
}
86+
87+
.action-btn {
88+
font-size: 0.875rem;
89+
cursor: pointer;
90+
background: transparent;
91+
color: #636363;
92+
border: none;
93+
display: inline-block;
94+
padding: 0;
95+
text-decoration: none;
96+
vertical-align: baseline;
97+
transition: color 0.2s;
98+
}
99+
.action-btn .icon {
100+
fill: #737373;
101+
}
102+
103+
.dimmed,
104+
:link .dimmed,
105+
:visited .dimmed {
106+
color: #9f9f9f;
107+
}
108+
109+
.pill {
110+
background: #252627;
111+
border: 1px solid #252627;
112+
border-radius: 1rem;
113+
color: #ffffff;
114+
display: inline-block;
115+
line-height: 2;
116+
margin: -4px 10px -4px 0;
117+
padding: 0 0.5rem;
118+
119+
a:not(:hover) {
120+
text-decoration: none;
121+
color: inherit;
122+
}
123+
a:hover {
124+
color: inherit;
125+
}
126+
}
127+
128+
.selectable {
129+
border-left: 4px solid transparent;
130+
overflow: hidden;
131+
display: block;
132+
text-decoration: inherit;
133+
134+
padding: 0.25rem;
135+
136+
h3,
137+
h4 {
138+
margin: 0;
139+
}
140+
141+
&:hover,
142+
&:active {
143+
text-decoration: inherit;
144+
}
145+
}
146+
147+
.selectable-selected {
148+
background: #e0e3e4;
149+
border-left-color: #1769ff;
150+
}
151+
152+
/**
153+
* Expandos can contain other tables, need to be very specific to avoid
154+
* cascading styles (ba-dam-pish!)
155+
*/
156+
.expando {
157+
border-bottom: 1px solid #ddd;
158+
}
159+
160+
.expando > tbody > tr > th,
161+
.expando > tbody > tr > td {
162+
background: #f0f0f0;
163+
border-top: 1px solid #ddd;
164+
padding: 9px 5px 8px 10px;
165+
}
166+
167+
.expando-tight > tbody > tr > th,
168+
.expando-tight > tbody > tr > td {
169+
padding-bottom: 5px;
170+
padding-top: 7px;
171+
}
172+
173+
.expando > tbody > tr:hover th,
174+
.expando > tbody > tr:hover td {
175+
background: #fff;
176+
color: #252627;
177+
}
178+
179+
.expando tr.hl th,
180+
.expando tr.hl td {
181+
background: #fff;
182+
}
183+
184+
.expando .expando-details th,
185+
.expando .expando-details td {
186+
border-top: none;
187+
padding: 0.5rem;
188+
}
189+
190+
.expando-details p:first-child {
191+
margin-top: 0;
192+
}
193+
194+
.expando .expando-addon td,
195+
.expando .expando-addon th {
196+
border-top: none;
197+
padding: 0;
198+
}
199+
200+
.expco {
201+
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.5);
202+
}

0 commit comments

Comments
 (0)