Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Styles refactoring #977

Merged
merged 7 commits into from
Dec 18, 2019
Merged

Styles refactoring #977

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
2a6c418
Updated colors
bsekachev Dec 18, 2019
137a1e1
Fixed model runner dialog
bsekachev Dec 18, 2019
95c9c6a
SCSS refactoring
bsekachev Dec 18, 2019
2d0ccec
Fixed minor issue with models
bsekachev Dec 18, 2019
584023a
Stylesheet refactoring
bsekachev Dec 18, 2019
94d42fe
Stylesheet refactoring
bsekachev Dec 18, 2019
6227246
Styles refactoring
bsekachev Dec 18, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 41 additions & 0 deletions cvat-ui/src/base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
$header-color: #D8D8D8;
$text-color: #303030;
$hover-menu-color: rgba(24,144,255,0.05);
$completed-progress-color: #61C200;
$inprogress-progress-color: #1890FF;
$pending-progress-color: #C1C1C1;
$border-color-1: #c3c3c3;
$border-color-2: #d9d9d9;
$border-color-hover: #40a9ff;
$background-color-1: white;
$background-color-2: #F1F1F1;
$transparent-color: rgba(0, 0, 0, 0);
$player-slider-color: #979797;
$danger-icon-color: #FF4136;
$info-icon-color: #0074D9;

$monospaced-fonts-stack: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;

hr {
border: none;
border-top: 1px solid $border-color-1;
height: 1px;
}

.cvat-text-color {
color: $text-color;
}

.cvat-title {
font-weight: 400;
font-size: 21px;
color: $text-color;
padding-top: 5px;
}

#root {
width: 100%;
height: 100%;
min-height: 100%;
display: grid;
}
1 change: 1 addition & 0 deletions cvat-ui/src/components/actions-menu/actions-menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import './styles.scss';
import React from 'react';

import {
Expand Down
32 changes: 32 additions & 0 deletions cvat-ui/src/components/actions-menu/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
@import '../../base.scss';

.ant-menu.cvat-actions-menu {
box-shadow: 0 0 17px rgba(0,0,0,0.2);

> li:hover {
background-color: $hover-menu-color;
}

.ant-menu-submenu-arrow {
width: 0px;
}
}

.cvat-actions-menu-load-submenu-item,
.cvat-actions-menu-dump-submenu-item,
.cvat-actions-menu-export-submenu-item {
&:hover {
background-color: $hover-menu-color;
}
}

.cvat-actions-menu-dump-submenu-item,
.cvat-actions-menu-export-submenu-item {
> button {
text-align: left;
}
}

.cvat-menu-icon {
transform: scale(0.5);
}
1 change: 1 addition & 0 deletions cvat-ui/src/components/annotation-page/annotation-page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import './styles.scss';
import React from 'react';

import {
Expand Down
1 change: 1 addition & 0 deletions cvat-ui/src/components/annotation-page/standard-workspace/standard-workspace.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import './styles.scss';
import React from 'react';

import {
Expand Down
39 changes: 39 additions & 0 deletions cvat-ui/src/components/annotation-page/standard-workspace/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
@import '../../../base.scss';

.cvat-annotation-page-canvas-container {
background-color: $background-color-1;
}

.cvat-annotation-page-objects-sidebar {
top: 0px;
right: 0px;
left: auto;
background-color: $background-color-2;
border-left: 1px solid $border-color-1;
}

.cvat-annotation-page-controls-sidebar {
background-color: $background-color-2;
border-right: 1px solid $border-color-1;

> div {
> i {
border-radius: 3.3px;
transform: scale(0.65);
padding: 2px;

&:hover {
background: $header-color;
transform: scale(0.75);
}

&:active {
transform: scale(0.65);
}

> svg {
transform: scale(0.8);
}
}
}
}
144 changes: 144 additions & 0 deletions cvat-ui/src/components/annotation-page/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,144 @@
@import '../../base.scss';

.cvat-annotation-page.ant-layout {
height: 100%
}

.ant-layout-header.cvat-annotation-page-header {
background-color: $background-color-2;
border-bottom: 1px solid $border-color-1;
height: 54px;
padding: 0px;
}

.cvat-annotation-header-left-group {
height: 100%;

> div {
padding: 0px;
width: 54px;
height: 54px;
float: left;
text-align: center;

> span {
font-size: 10px;
}

> i {
transform: scale(0.8);
padding: 3px;
}

&:hover > i {
transform: scale(0.9);
}

&:active > i {
transform: scale(0.8);
}

> * {
display: block;
line-height: 0px;
}
}

> div:first-child {
filter: invert(0.9);
background: $background-color-1;
border-radius: 0px;
width: 70px;
}
}

.cvat-annotation-header-player-group > div {
height: 54px;
}

.cvat-annotation-header-player-buttons {
display: flex;
align-items: center;
position: relative;
height: 100%;
margin-right: 10px;

> i {
transform: scale(0.6);

&:hover {
transform: scale(0.7);
}

&:active {
transform: scale(0.6);
}
}
}

.cvat-annotation-header-player-controls {
position: relative;
height: 100%;
line-height: 27px;

> div {
position: relative;
height: 50%;
}
}

.cvat-annotation-header-player-slider {
width: 350px;

> .ant-slider-rail {
background-color: $player-slider-color;
}
}

.cvat-annotation-header-filename-wrapper {
max-width: 180px;
overflow: hidden;
text-overflow: ellipsis;
}

.cvat-annotation-header-frame-selector {
width: 5em;
margin-right: 0.5em;
}

.cvat-annotation-header-right-group {
height: 100%;

> div {
height: 54px;
float: left;
text-align: center;
margin-right: 20px;

> span {
font-size: 10px;
}

> i {
transform: scale(0.8);
padding: 3px;
}

&:hover > i {
transform: scale(0.9);
}

&:active > i {
transform: scale(0.8);
}
}

> div:not(:nth-child(3)) > * {
display: block;
line-height: 0px;
}
}

.cvat-annotation-header-workspace-selector {
width: 150px;
}
2 changes: 1 addition & 1 deletion cvat-ui/src/components/create-model-page/create-model-content.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,7 @@ export default class CreateModelContent extends React.PureComponent<Props> {
</Col>
<Col span={24}>
<Text type='danger'>* </Text>
<Text className='cvat-black-color'>Select files:</Text>
<Text className='cvat-text-color'>Select files:</Text>
</Col>
<Col span={24}>
<ConnectedFileManager
Expand Down
4 changes: 2 additions & 2 deletions cvat-ui/src/components/create-model-page/create-model-form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ export class CreateModelForm extends React.PureComponent<Props> {
<Row>
<Col span={24}>
<Text type='danger'>* </Text>
<Text className='cvat-black-color'>Name:</Text>
<Text className='cvat-text-color'>Name:</Text>
</Col>
<Col span={14}>
<Form.Item hasFeedback>
Expand All @@ -65,7 +65,7 @@ export class CreateModelForm extends React.PureComponent<Props> {
valuePropName: 'checked',
})(
<Checkbox>
<Text className='cvat-black-color'>
<Text className='cvat-text-color'>
Load globally
</Text>
</Checkbox>,
Expand Down
1 change: 1 addition & 0 deletions cvat-ui/src/components/create-model-page/create-model-page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import './styles.scss';
import React from 'react';

import {
Expand Down
39 changes: 39 additions & 0 deletions cvat-ui/src/components/create-model-page/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
@import '../../base.scss';

.cvat-create-model-form-wrapper {
text-align: center;
margin-top: 40px;
overflow-y: auto;
height: 90%;

> div > span {
font-size: 36px;
}

.cvat-create-model-content {
margin-top: 20px;
width: 100%;
height: auto;
border: 1px solid $border-color-1;
border-radius: 3px;
padding: 20px;
background: $background-color-1;
text-align: initial;

> div:nth-child(1) > i {
float: right;
font-size: 20px;
color: $danger-icon-color;
}

> div:nth-child(4) {
margin-top: 10px;
}

> div:nth-child(6) > button {
margin-top: 10px;
float: right;
width: 120px;
}
}
}
4 changes: 2 additions & 2 deletions cvat-ui/src/components/create-task-page/advanced-configuration-form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ class AdvancedConfigurationForm extends React.PureComponent<Props> {
valuePropName: 'checked',
})(
<Checkbox>
<Text className='cvat-black-color'>
<Text className='cvat-text-color'>
Z-order
</Text>
</Checkbox>,
Expand Down Expand Up @@ -195,7 +195,7 @@ class AdvancedConfigurationForm extends React.PureComponent<Props> {
initialValue: false,
})(
<Checkbox>
<Text className='cvat-black-color'>
<Text className='cvat-text-color'>
Use LFS (Large File Support):
</Text>
</Checkbox>,
Expand Down
4 changes: 2 additions & 2 deletions cvat-ui/src/components/create-task-page/create-task-content.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,7 +164,7 @@ export default class CreateTaskContent extends React.PureComponent<Props, State>
return (
<Col span={24}>
<Text type='danger'>* </Text>
<Text className='cvat-black-color'>Labels:</Text>
<Text className='cvat-text-color'>Labels:</Text>
<LabelsEditor
labels={labels}
onSubmit={
Expand All @@ -183,7 +183,7 @@ export default class CreateTaskContent extends React.PureComponent<Props, State>
return (
<Col span={24}>
<Text type='danger'>* </Text>
<Text className='cvat-black-color'>Select files:</Text>
<Text className='cvat-text-color'>Select files:</Text>
<FileManagerContainer
ref={
(container: any): void => { this.fileManagerContainer = container; }
Expand Down
1 change: 1 addition & 0 deletions cvat-ui/src/components/create-task-page/create-task-page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import './styles.scss';
import React from 'react';

import {
Expand Down
Loading