Skip to content

Commit 4a0dc12

Browse files
bsekachevChris Lee-Messer
bsekachev
authored and
Chris Lee-Messer
committed
Styles refactoring (cvat-ai#977)
1 parent b45702e commit 4a0dc12

Some content is hidden

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

43 files changed

+936
-925
lines changed

‎cvat-ui/src/base.scss

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
$header-color: #D8D8D8;
2+
$text-color: #303030;
3+
$hover-menu-color: rgba(24,144,255,0.05);
4+
$completed-progress-color: #61C200;
5+
$inprogress-progress-color: #1890FF;
6+
$pending-progress-color: #C1C1C1;
7+
$border-color-1: #c3c3c3;
8+
$border-color-2: #d9d9d9;
9+
$border-color-hover: #40a9ff;
10+
$background-color-1: white;
11+
$background-color-2: #F1F1F1;
12+
$transparent-color: rgba(0, 0, 0, 0);
13+
$player-slider-color: #979797;
14+
$danger-icon-color: #FF4136;
15+
$info-icon-color: #0074D9;
16+
17+
$monospaced-fonts-stack: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
18+
19+
hr {
20+
border: none;
21+
border-top: 1px solid $border-color-1;
22+
height: 1px;
23+
}
24+
25+
.cvat-text-color {
26+
color: $text-color;
27+
}
28+
29+
.cvat-title {
30+
font-weight: 400;
31+
font-size: 21px;
32+
color: $text-color;
33+
padding-top: 5px;
34+
}
35+
36+
#root {
37+
width: 100%;
38+
height: 100%;
39+
min-height: 100%;
40+
display: grid;
41+
}

‎cvat-ui/src/components/actions-menu/actions-menu.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import './styles.scss';
12
import React from 'react';
23

34
import {

‎cvat-ui/src/components/actions-menu/styles.scss

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
@import '../../base.scss';
2+
3+
.ant-menu.cvat-actions-menu {
4+
box-shadow: 0 0 17px rgba(0,0,0,0.2);
5+
6+
> li:hover {
7+
background-color: $hover-menu-color;
8+
}
9+
10+
.ant-menu-submenu-arrow {
11+
width: 0px;
12+
}
13+
}
14+
15+
.cvat-actions-menu-load-submenu-item,
16+
.cvat-actions-menu-dump-submenu-item,
17+
.cvat-actions-menu-export-submenu-item {
18+
&:hover {
19+
background-color: $hover-menu-color;
20+
}
21+
}
22+
23+
.cvat-actions-menu-dump-submenu-item,
24+
.cvat-actions-menu-export-submenu-item {
25+
> button {
26+
text-align: left;
27+
}
28+
}
29+
30+
.cvat-menu-icon {
31+
transform: scale(0.5);
32+
}

‎cvat-ui/src/components/annotation-page/annotation-page.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import './styles.scss';
12
import React from 'react';
23

34
import {

‎cvat-ui/src/components/annotation-page/standard-workspace/standard-workspace.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import './styles.scss';
12
import React from 'react';
23

34
import {

‎cvat-ui/src/components/annotation-page/standard-workspace/styles.scss

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
@import '../../../base.scss';
2+
3+
.cvat-annotation-page-canvas-container {
4+
background-color: $background-color-1;
5+
}
6+
7+
.cvat-annotation-page-objects-sidebar {
8+
top: 0px;
9+
right: 0px;
10+
left: auto;
11+
background-color: $background-color-2;
12+
border-left: 1px solid $border-color-1;
13+
}
14+
15+
.cvat-annotation-page-controls-sidebar {
16+
background-color: $background-color-2;
17+
border-right: 1px solid $border-color-1;
18+
19+
> div {
20+
> i {
21+
border-radius: 3.3px;
22+
transform: scale(0.65);
23+
padding: 2px;
24+
25+
&:hover {
26+
background: $header-color;
27+
transform: scale(0.75);
28+
}
29+
30+
&:active {
31+
transform: scale(0.65);
32+
}
33+
34+
> svg {
35+
transform: scale(0.8);
36+
}
37+
}
38+
}
39+
}

‎cvat-ui/src/components/annotation-page/styles.scss

+144
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
@import '../../base.scss';
2+
3+
.cvat-annotation-page.ant-layout {
4+
height: 100%
5+
}
6+
7+
.ant-layout-header.cvat-annotation-page-header {
8+
background-color: $background-color-2;
9+
border-bottom: 1px solid $border-color-1;
10+
height: 54px;
11+
padding: 0px;
12+
}
13+
14+
.cvat-annotation-header-left-group {
15+
height: 100%;
16+
17+
> div {
18+
padding: 0px;
19+
width: 54px;
20+
height: 54px;
21+
float: left;
22+
text-align: center;
23+
24+
> span {
25+
font-size: 10px;
26+
}
27+
28+
> i {
29+
transform: scale(0.8);
30+
padding: 3px;
31+
}
32+
33+
&:hover > i {
34+
transform: scale(0.9);
35+
}
36+
37+
&:active > i {
38+
transform: scale(0.8);
39+
}
40+
41+
> * {
42+
display: block;
43+
line-height: 0px;
44+
}
45+
}
46+
47+
> div:first-child {
48+
filter: invert(0.9);
49+
background: $background-color-1;
50+
border-radius: 0px;
51+
width: 70px;
52+
}
53+
}
54+
55+
.cvat-annotation-header-player-group > div {
56+
height: 54px;
57+
}
58+
59+
.cvat-annotation-header-player-buttons {
60+
display: flex;
61+
align-items: center;
62+
position: relative;
63+
height: 100%;
64+
margin-right: 10px;
65+
66+
> i {
67+
transform: scale(0.6);
68+
69+
&:hover {
70+
transform: scale(0.7);
71+
}
72+
73+
&:active {
74+
transform: scale(0.6);
75+
}
76+
}
77+
}
78+
79+
.cvat-annotation-header-player-controls {
80+
position: relative;
81+
height: 100%;
82+
line-height: 27px;
83+
84+
> div {
85+
position: relative;
86+
height: 50%;
87+
}
88+
}
89+
90+
.cvat-annotation-header-player-slider {
91+
width: 350px;
92+
93+
> .ant-slider-rail {
94+
background-color: $player-slider-color;
95+
}
96+
}
97+
98+
.cvat-annotation-header-filename-wrapper {
99+
max-width: 180px;
100+
overflow: hidden;
101+
text-overflow: ellipsis;
102+
}
103+
104+
.cvat-annotation-header-frame-selector {
105+
width: 5em;
106+
margin-right: 0.5em;
107+
}
108+
109+
.cvat-annotation-header-right-group {
110+
height: 100%;
111+
112+
> div {
113+
height: 54px;
114+
float: left;
115+
text-align: center;
116+
margin-right: 20px;
117+
118+
> span {
119+
font-size: 10px;
120+
}
121+
122+
> i {
123+
transform: scale(0.8);
124+
padding: 3px;
125+
}
126+
127+
&:hover > i {
128+
transform: scale(0.9);
129+
}
130+
131+
&:active > i {
132+
transform: scale(0.8);
133+
}
134+
}
135+
136+
> div:not(:nth-child(3)) > * {
137+
display: block;
138+
line-height: 0px;
139+
}
140+
}
141+
142+
.cvat-annotation-header-workspace-selector {
143+
width: 150px;
144+
}

‎cvat-ui/src/components/create-model-page/create-model-content.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,7 @@ export default class CreateModelContent extends React.PureComponent<Props> {
128128
</Col>
129129
<Col span={24}>
130130
<Text type='danger'>* </Text>
131-
<Text className='cvat-black-color'>Select files:</Text>
131+
<Text className='cvat-text-color'>Select files:</Text>
132132
</Col>
133133
<Col span={24}>
134134
<ConnectedFileManager

‎cvat-ui/src/components/create-model-page/create-model-form.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ export class CreateModelForm extends React.PureComponent<Props> {
4545
<Row>
4646
<Col span={24}>
4747
<Text type='danger'>* </Text>
48-
<Text className='cvat-black-color'>Name:</Text>
48+
<Text className='cvat-text-color'>Name:</Text>
4949
</Col>
5050
<Col span={14}>
5151
<Form.Item hasFeedback>
@@ -65,7 +65,7 @@ export class CreateModelForm extends React.PureComponent<Props> {
6565
valuePropName: 'checked',
6666
})(
6767
<Checkbox>
68-
<Text className='cvat-black-color'>
68+
<Text className='cvat-text-color'>
6969
Load globally
7070
</Text>
7171
</Checkbox>,

‎cvat-ui/src/components/create-model-page/create-model-page.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import './styles.scss';
12
import React from 'react';
23

34
import {

‎cvat-ui/src/components/create-model-page/styles.scss

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
@import '../../base.scss';
2+
3+
.cvat-create-model-form-wrapper {
4+
text-align: center;
5+
margin-top: 40px;
6+
overflow-y: auto;
7+
height: 90%;
8+
9+
> div > span {
10+
font-size: 36px;
11+
}
12+
13+
.cvat-create-model-content {
14+
margin-top: 20px;
15+
width: 100%;
16+
height: auto;
17+
border: 1px solid $border-color-1;
18+
border-radius: 3px;
19+
padding: 20px;
20+
background: $background-color-1;
21+
text-align: initial;
22+
23+
> div:nth-child(1) > i {
24+
float: right;
25+
font-size: 20px;
26+
color: $danger-icon-color;
27+
}
28+
29+
> div:nth-child(4) {
30+
margin-top: 10px;
31+
}
32+
33+
> div:nth-child(6) > button {
34+
margin-top: 10px;
35+
float: right;
36+
width: 120px;
37+
}
38+
}
39+
}

‎cvat-ui/src/components/create-task-page/advanced-configuration-form.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ class AdvancedConfigurationForm extends React.PureComponent<Props> {
7171
valuePropName: 'checked',
7272
})(
7373
<Checkbox>
74-
<Text className='cvat-black-color'>
74+
<Text className='cvat-text-color'>
7575
Z-order
7676
</Text>
7777
</Checkbox>,
@@ -195,7 +195,7 @@ class AdvancedConfigurationForm extends React.PureComponent<Props> {
195195
initialValue: false,
196196
})(
197197
<Checkbox>
198-
<Text className='cvat-black-color'>
198+
<Text className='cvat-text-color'>
199199
Use LFS (Large File Support):
200200
</Text>
201201
</Checkbox>,

‎cvat-ui/src/components/create-task-page/create-task-content.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -164,7 +164,7 @@ export default class CreateTaskContent extends React.PureComponent<Props, State>
164164
return (
165165
<Col span={24}>
166166
<Text type='danger'>* </Text>
167-
<Text className='cvat-black-color'>Labels:</Text>
167+
<Text className='cvat-text-color'>Labels:</Text>
168168
<LabelsEditor
169169
labels={labels}
170170
onSubmit={
@@ -183,7 +183,7 @@ export default class CreateTaskContent extends React.PureComponent<Props, State>
183183
return (
184184
<Col span={24}>
185185
<Text type='danger'>* </Text>
186-
<Text className='cvat-black-color'>Select files:</Text>
186+
<Text className='cvat-text-color'>Select files:</Text>
187187
<FileManagerContainer
188188
ref={
189189
(container: any): void => { this.fileManagerContainer = container; }

‎cvat-ui/src/components/create-task-page/create-task-page.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import './styles.scss';
12
import React from 'react';
23

34
import {

0 commit comments

Comments
 (0)