From 4de8be7b69145108049833187bb13cbe0452b4f9 Mon Sep 17 00:00:00 2001 From: Boris Sekachev <40690378+bsekachev@users.noreply.github.com> Date: Wed, 18 Dec 2019 19:02:03 +0300 Subject: [PATCH] Styles refactoring (#977) --- cvat-ui/src/base.scss | 41 + .../components/actions-menu/actions-menu.tsx | 1 + .../src/components/actions-menu/styles.scss | 32 + .../annotation-page/annotation-page.tsx | 1 + .../standard-workspace/standard-workspace.tsx | 1 + .../standard-workspace/styles.scss | 39 + .../components/annotation-page/styles.scss | 144 +++ .../create-model-content.tsx | 2 +- .../create-model-page/create-model-form.tsx | 4 +- .../create-model-page/create-model-page.tsx | 1 + .../components/create-model-page/styles.scss | 39 + .../advanced-configuration-form.tsx | 4 +- .../create-task-page/create-task-content.tsx | 4 +- .../create-task-page/create-task-page.tsx | 1 + .../components/create-task-page/styles.scss | 32 + cvat-ui/src/components/cvat-app.tsx | 4 +- .../components/{ => feedback}/feedback.tsx | 7 +- cvat-ui/src/components/feedback/styles.scss | 12 + .../components/file-manager/file-manager.tsx | 5 +- .../src/components/file-manager/styles.scss | 8 + cvat-ui/src/components/header/header.tsx | 3 +- cvat-ui/src/components/header/styles.scss | 55 ++ .../labels-editor/labels-editor.tsx | 1 + .../src/components/labels-editor/styles.scss | 86 ++ .../model-runner-modal/model-runner-modal.tsx | 1 + .../components/model-runner-modal/styles.scss | 13 + .../models-page/built-model-item.tsx | 2 +- .../models-page/built-models-list.tsx | 2 +- .../components/models-page/models-page.tsx | 9 +- .../src/components/models-page/styles.scss | 82 ++ .../models-page/uploaded-model-item.tsx | 8 +- .../models-page/uploaded-models-list.tsx | 2 +- cvat-ui/src/components/task-page/details.tsx | 24 +- cvat-ui/src/components/task-page/job-list.tsx | 10 +- cvat-ui/src/components/task-page/styles.scss | 120 +++ .../src/components/task-page/task-page.tsx | 19 +- cvat-ui/src/components/task-page/top-bar.tsx | 4 +- .../src/components/tasks-page/empty-list.tsx | 2 +- cvat-ui/src/components/tasks-page/styles.scss | 160 ++++ .../src/components/tasks-page/task-item.tsx | 4 +- .../src/components/tasks-page/task-list.tsx | 2 +- .../src/components/tasks-page/tasks-page.tsx | 3 +- cvat-ui/src/stylesheet.scss | 867 ------------------ 43 files changed, 936 insertions(+), 925 deletions(-) create mode 100644 cvat-ui/src/base.scss create mode 100644 cvat-ui/src/components/actions-menu/styles.scss create mode 100644 cvat-ui/src/components/annotation-page/standard-workspace/styles.scss create mode 100644 cvat-ui/src/components/annotation-page/styles.scss create mode 100644 cvat-ui/src/components/create-model-page/styles.scss create mode 100644 cvat-ui/src/components/create-task-page/styles.scss rename cvat-ui/src/components/{ => feedback}/feedback.tsx (96%) create mode 100644 cvat-ui/src/components/feedback/styles.scss create mode 100644 cvat-ui/src/components/file-manager/styles.scss create mode 100644 cvat-ui/src/components/header/styles.scss create mode 100644 cvat-ui/src/components/labels-editor/styles.scss create mode 100644 cvat-ui/src/components/model-runner-modal/styles.scss create mode 100644 cvat-ui/src/components/models-page/styles.scss create mode 100644 cvat-ui/src/components/task-page/styles.scss create mode 100644 cvat-ui/src/components/tasks-page/styles.scss delete mode 100644 cvat-ui/src/stylesheet.scss diff --git a/cvat-ui/src/base.scss b/cvat-ui/src/base.scss new file mode 100644 index 00000000..99fed8f8 --- /dev/null +++ b/cvat-ui/src/base.scss @@ -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; +} diff --git a/cvat-ui/src/components/actions-menu/actions-menu.tsx b/cvat-ui/src/components/actions-menu/actions-menu.tsx index a9be862b..61b2cc11 100644 --- a/cvat-ui/src/components/actions-menu/actions-menu.tsx +++ b/cvat-ui/src/components/actions-menu/actions-menu.tsx @@ -1,3 +1,4 @@ +import './styles.scss'; import React from 'react'; import { diff --git a/cvat-ui/src/components/actions-menu/styles.scss b/cvat-ui/src/components/actions-menu/styles.scss new file mode 100644 index 00000000..9a348dde --- /dev/null +++ b/cvat-ui/src/components/actions-menu/styles.scss @@ -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); +} diff --git a/cvat-ui/src/components/annotation-page/annotation-page.tsx b/cvat-ui/src/components/annotation-page/annotation-page.tsx index ad2b210a..0c5d4910 100644 --- a/cvat-ui/src/components/annotation-page/annotation-page.tsx +++ b/cvat-ui/src/components/annotation-page/annotation-page.tsx @@ -1,3 +1,4 @@ +import './styles.scss'; import React from 'react'; import { diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/standard-workspace.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/standard-workspace.tsx index e7ef7d2b..0e11a7bc 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/standard-workspace.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/standard-workspace.tsx @@ -1,3 +1,4 @@ +import './styles.scss'; import React from 'react'; import { diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/styles.scss b/cvat-ui/src/components/annotation-page/standard-workspace/styles.scss new file mode 100644 index 00000000..5cdab335 --- /dev/null +++ b/cvat-ui/src/components/annotation-page/standard-workspace/styles.scss @@ -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); + } + } + } +} diff --git a/cvat-ui/src/components/annotation-page/styles.scss b/cvat-ui/src/components/annotation-page/styles.scss new file mode 100644 index 00000000..6ac4b77f --- /dev/null +++ b/cvat-ui/src/components/annotation-page/styles.scss @@ -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; +} diff --git a/cvat-ui/src/components/create-model-page/create-model-content.tsx b/cvat-ui/src/components/create-model-page/create-model-content.tsx index 9a4ac7aa..a2ada376 100644 --- a/cvat-ui/src/components/create-model-page/create-model-content.tsx +++ b/cvat-ui/src/components/create-model-page/create-model-content.tsx @@ -128,7 +128,7 @@ export default class CreateModelContent extends React.PureComponent { * - Select files: + Select files: { * - Name: + Name: @@ -65,7 +65,7 @@ export class CreateModelForm extends React.PureComponent { valuePropName: 'checked', })( - + Load globally , diff --git a/cvat-ui/src/components/create-model-page/create-model-page.tsx b/cvat-ui/src/components/create-model-page/create-model-page.tsx index 0d9d663d..ab5014b2 100644 --- a/cvat-ui/src/components/create-model-page/create-model-page.tsx +++ b/cvat-ui/src/components/create-model-page/create-model-page.tsx @@ -1,3 +1,4 @@ +import './styles.scss'; import React from 'react'; import { diff --git a/cvat-ui/src/components/create-model-page/styles.scss b/cvat-ui/src/components/create-model-page/styles.scss new file mode 100644 index 00000000..fbbb1525 --- /dev/null +++ b/cvat-ui/src/components/create-model-page/styles.scss @@ -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; + } + } +} diff --git a/cvat-ui/src/components/create-task-page/advanced-configuration-form.tsx b/cvat-ui/src/components/create-task-page/advanced-configuration-form.tsx index 69706044..1ea5a9eb 100644 --- a/cvat-ui/src/components/create-task-page/advanced-configuration-form.tsx +++ b/cvat-ui/src/components/create-task-page/advanced-configuration-form.tsx @@ -71,7 +71,7 @@ class AdvancedConfigurationForm extends React.PureComponent { valuePropName: 'checked', })( - + Z-order , @@ -195,7 +195,7 @@ class AdvancedConfigurationForm extends React.PureComponent { initialValue: false, })( - + Use LFS (Large File Support): , diff --git a/cvat-ui/src/components/create-task-page/create-task-content.tsx b/cvat-ui/src/components/create-task-page/create-task-content.tsx index 25a697d7..c4543d5c 100644 --- a/cvat-ui/src/components/create-task-page/create-task-content.tsx +++ b/cvat-ui/src/components/create-task-page/create-task-content.tsx @@ -164,7 +164,7 @@ export default class CreateTaskContent extends React.PureComponent return ( * - Labels: + Labels: return ( * - Select files: + Select files: { this.fileManagerContainer = container; } diff --git a/cvat-ui/src/components/create-task-page/create-task-page.tsx b/cvat-ui/src/components/create-task-page/create-task-page.tsx index ad4ae6d7..7312fc2f 100644 --- a/cvat-ui/src/components/create-task-page/create-task-page.tsx +++ b/cvat-ui/src/components/create-task-page/create-task-page.tsx @@ -1,3 +1,4 @@ +import './styles.scss'; import React from 'react'; import { diff --git a/cvat-ui/src/components/create-task-page/styles.scss b/cvat-ui/src/components/create-task-page/styles.scss new file mode 100644 index 00000000..fa98a40b --- /dev/null +++ b/cvat-ui/src/components/create-task-page/styles.scss @@ -0,0 +1,32 @@ +@import '../../base.scss'; + +.cvat-create-task-form-wrapper { + text-align: center; + margin-top: 40px; + overflow-y: auto; + height: 90%; + + > div > span { + font-size: 36px; + } + + .cvat-create-task-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:not(first-child) { + margin-top: 10px; + } + + > div:nth-child(7) > button { + float: right; + width: 120px; + } + } +} diff --git a/cvat-ui/src/components/cvat-app.tsx b/cvat-ui/src/components/cvat-app.tsx index c0ed7ed8..bab6dee9 100644 --- a/cvat-ui/src/components/cvat-app.tsx +++ b/cvat-ui/src/components/cvat-app.tsx @@ -1,6 +1,6 @@ -import React from 'react'; import 'antd/dist/antd.less'; -import '../stylesheet.scss'; +import '../base.scss'; +import React from 'react'; import { BrowserRouter } from 'react-router-dom'; import { Switch, diff --git a/cvat-ui/src/components/feedback.tsx b/cvat-ui/src/components/feedback/feedback.tsx similarity index 96% rename from cvat-ui/src/components/feedback.tsx rename to cvat-ui/src/components/feedback/feedback.tsx index ead88cae..4ca21e9d 100644 --- a/cvat-ui/src/components/feedback.tsx +++ b/cvat-ui/src/components/feedback/feedback.tsx @@ -1,3 +1,4 @@ +import './styles.scss'; import React from 'react'; import { @@ -27,10 +28,6 @@ import { import Text from 'antd/lib/typography/Text'; -interface State { - active: boolean; -} - function renderContent(): JSX.Element { const githubURL = 'https://github.com/opencv/cvat'; const githubImage = 'https://raw.githubusercontent.com/opencv/' @@ -95,7 +92,7 @@ export default function Feedback(): JSX.Element { Help to make CVAT better + Help to make CVAT better } content={renderContent()} visible={visible} diff --git a/cvat-ui/src/components/feedback/styles.scss b/cvat-ui/src/components/feedback/styles.scss new file mode 100644 index 00000000..e17660dd --- /dev/null +++ b/cvat-ui/src/components/feedback/styles.scss @@ -0,0 +1,12 @@ +.cvat-feedback-button { + position: absolute; + bottom: 20px; + right: 20px; + padding: 0px; +} + +.cvat-feedback-button { + > i { + font-size: 40px; + } +} diff --git a/cvat-ui/src/components/file-manager/file-manager.tsx b/cvat-ui/src/components/file-manager/file-manager.tsx index e07c9c84..81db320b 100644 --- a/cvat-ui/src/components/file-manager/file-manager.tsx +++ b/cvat-ui/src/components/file-manager/file-manager.tsx @@ -1,3 +1,4 @@ +import './styles.scss'; import React from 'react'; import { @@ -114,7 +115,7 @@ export default class FileManager extends React.PureComponent { && ( <>
- + {`${files.local.length} files selected`} @@ -185,7 +186,7 @@ export default class FileManager extends React.PureComponent { > { renderTreeNodes(treeData) } - ) : No data found + ) : No data found } ); diff --git a/cvat-ui/src/components/file-manager/styles.scss b/cvat-ui/src/components/file-manager/styles.scss new file mode 100644 index 00000000..1ffd448b --- /dev/null +++ b/cvat-ui/src/components/file-manager/styles.scss @@ -0,0 +1,8 @@ +@import '../../base.scss'; + +.cvat-share-tree { + height: fit-content; + min-height: 10em; + max-height: 20em; + overflow: auto; +} diff --git a/cvat-ui/src/components/header/header.tsx b/cvat-ui/src/components/header/header.tsx index 9d9755a1..71817fdc 100644 --- a/cvat-ui/src/components/header/header.tsx +++ b/cvat-ui/src/components/header/header.tsx @@ -1,3 +1,4 @@ +import './styles.scss'; import React from 'react'; import { RouteComponentProps } from 'react-router'; @@ -128,7 +129,7 @@ function HeaderContainer(props: Props): JSX.Element { } > - GitHub + GitHub diff --git a/cvat-ui/src/components/tasks-page/empty-list.tsx b/cvat-ui/src/components/tasks-page/empty-list.tsx index da2f9cfa..afc08f23 100644 --- a/cvat-ui/src/components/tasks-page/empty-list.tsx +++ b/cvat-ui/src/components/tasks-page/empty-list.tsx @@ -12,7 +12,7 @@ import { EmptyTasksIcon } from '../../icons'; export default function EmptyListComponent(): JSX.Element { return ( -
+
diff --git a/cvat-ui/src/components/tasks-page/styles.scss b/cvat-ui/src/components/tasks-page/styles.scss new file mode 100644 index 00000000..25765dda --- /dev/null +++ b/cvat-ui/src/components/tasks-page/styles.scss @@ -0,0 +1,160 @@ +@import '../../base.scss'; + +.cvat-tasks-page { + padding-top: 15px; + height: 100%; + + > div:nth-child(1) { + margin-bottom: 10px; + + div > { + span { + color: $text-color; + } + } + } + + > div:nth-child(2) { + > div:nth-child(1) { + display: flex; + + > span:nth-child(2) { + width: 200px; + margin-left: 10px; + } + } + + > div:nth-child(2) { + display: flex; + justify-content: flex-end; + } + } + + > div:nth-child(3) { + height: 83%; + margin-top: 10px; + } + + > div:nth-child(4) { + margin-top: 10px; + } +} + +/* empty-tasks icon */ +.cvat-empty-tasks-list { + > div:nth-child(1) { + margin-top: 50px; + } + + > div:nth-child(2) { + > div { + margin-top: 20px; + + /* No tasks created yet */ + > span { + font-size: 20px; + color: $text-color; + } + } + } + + /* To get started with your annotation project .. */ + > div:nth-child(3) { + margin-top: 10px; + } +} + +.cvat-tasks-pagination { + display: flex; + justify-content: center; +} + +.cvat-tasks-list { + height: 100%; + overflow-y: auto; +} + +.cvat-tasks-list-item { + width: 100%; + height: 120px; + border: 1px solid $border-color-1; + border-radius: 3px; + margin-bottom: 15px; + padding-top: 20px; + background: $background-color-1; + + /* description */ + > div:nth-child(2) { + word-break: break-all; + max-height: 100%; + overflow: hidden; + } + + /* open, actions */ + div:nth-child(4) { + > div { + margin-right: 20px; + } + + /* actions */ + > div:nth-child(2) { + margin-right: 5px; + margin-top: 10px; + + > div { + display: flex; + align-items: center; + } + } + } + + &:hover { + border: 1px solid $border-color-hover; + } +} + + +.cvat-task-item-preview-wrapper { + display: flex; + justify-content: center; + overflow: hidden; + margin: 20px; + margin-top: 0px; + + > .cvat-task-item-preview { + max-width: 140px; + max-height: 80px; + } +} + +.cvat-task-progress { + width: 100%; +} + +.cvat-task-completed-progress { + color: $completed-progress-color; + fill: $completed-progress-color; + margin-right: 5px; +} + +.cvat-task-completed-progress { + div.ant-progress-bg { + background: $completed-progress-color !important; /* csslint allow: important */ + } +} + +.cvat-task-progress-progress { + color: $inprogress-progress-color; + fill: $inprogress-progress-color; + margin-right: 5px; +} + +.cvat-task-pending-progress { + color: $pending-progress-color; + fill: $pending-progress-color; + margin-right: 5px; +} + +#cvat-create-task-button { + padding: 0 30px; +} diff --git a/cvat-ui/src/components/tasks-page/task-item.tsx b/cvat-ui/src/components/tasks-page/task-item.tsx index 8e14d608..09799c64 100644 --- a/cvat-ui/src/components/tasks-page/task-item.tsx +++ b/cvat-ui/src/components/tasks-page/task-item.tsx @@ -52,7 +52,7 @@ class TaskItemComponent extends React.PureComponent {`#${id}: `} - {name} + {name}
{ owner && ( @@ -171,7 +171,7 @@ class TaskItemComponent extends React.PureComponent - Actions + Actions }> diff --git a/cvat-ui/src/components/tasks-page/task-list.tsx b/cvat-ui/src/components/tasks-page/task-list.tsx index 5e306e8d..936276eb 100644 --- a/cvat-ui/src/components/tasks-page/task-list.tsx +++ b/cvat-ui/src/components/tasks-page/task-list.tsx @@ -30,7 +30,7 @@ export default function TaskListComponent(props: ContentListProps): JSX.Element return ( <> - + { taskViews } diff --git a/cvat-ui/src/components/tasks-page/tasks-page.tsx b/cvat-ui/src/components/tasks-page/tasks-page.tsx index 278641d1..3a21a978 100644 --- a/cvat-ui/src/components/tasks-page/tasks-page.tsx +++ b/cvat-ui/src/components/tasks-page/tasks-page.tsx @@ -1,3 +1,4 @@ +import './styles.scss'; import React from 'react'; import { RouteComponentProps } from 'react-router'; import { withRouter } from 'react-router-dom'; @@ -15,7 +16,7 @@ import { } from '../../reducers/interfaces'; import TopBar from './top-bar'; -import FeedbackComponent from '../feedback'; +import FeedbackComponent from '../feedback/feedback'; import EmptyListComponent from './empty-list'; import TaskListContainer from '../../containers/tasks-page/tasks-list'; diff --git a/cvat-ui/src/stylesheet.scss b/cvat-ui/src/stylesheet.scss deleted file mode 100644 index b08ca57c..00000000 --- a/cvat-ui/src/stylesheet.scss +++ /dev/null @@ -1,867 +0,0 @@ -hr { - border: 0; - height: 0; - border-top: 1px solid rgba(0, 0, 0, 0.1); - border-bottom: 1px solid rgba(255, 255, 255, 0.3); -} - -.cvat-header.ant-layout-header { - display: flex; - padding-left: 0px; - padding-right: 0px; - line-height: 0px; - height: 44px; - background: #D8D8D8; -} - -.cvat-left-header { - width: 50%; - display: flex; - justify-content: flex-start; - align-items: center; -} - -.cvat-right-header { - width: 50%; - display: flex; - justify-content: flex-end; - align-items: center; -} - -.cvat-flex { - display: flex; -} - -.cvat-flex-center { - align-items: center; -} - -.cvat-black-color { - color: #363435; -} - -.cvat-feedback-button { - position: absolute; - bottom: 20px; - right: 20px; - padding: 0px; -} - -.cvat-feedback-button > i { - font-size: 40px; -} - -.anticon.cvat-logo-icon > svg { - transform: scale(0.7); -} - -.ant-btn.cvat-header-button { - color: black; - padding: 0px 10px; - margin-right: 10px; -} - - -.ant-dropdown-trigger.cvat-header-menu-dropdown { - display: flex; - align-items: center; - border-left: 1px solid #c3c3c3; - padding: 0px 20px; -} - -.anticon.cvat-header-account-icon > svg { - transform: scale(0.4); -} - -.anticon.cvat-header-menu-icon { - margin-left: 16px; - margin-right: 0px; -} - -.cvat-title { - font-weight: 400; - font-size: 21px; - color: black; - padding-top: 5px; -} - -.cvat-tasks-page { - padding-top: 30px; -} - -.cvat-tasks-page > div:nth-child(1) { - margin-bottom: 10px; -} - -.cvat-tasks-page > div:nth-child(1) > div > span { - color: black; -} - -.cvat-tasks-page > div:nth-child(2) > div:nth-child(1) { - display: flex; -} - -.cvat-tasks-page > div:nth-child(2) > div:nth-child(2) { - display: flex; - justify-content: flex-end; -} - -.cvat-tasks-page > div:nth-child(2) > div:nth-child(1) > span:nth-child(2) { - width: 200px; - margin-left: 10px; -} - -.cvat-tasks-page > span.ant-typography { - user-select: none; -} - -.cvat-tasks-page { - height: 100%; -} - -.cvat-tasks-page > div:nth-child(4) { - margin-top: 10px; -} - -.cvat-tasks-page > div:nth-child(3) { - margin-top: 10px; -} - -/* > 1280 */ -@media only screen and (min-height: 1280px) { - .cvat-tasks-page > div:nth-child(3) { - height: 80%; - } -} - -/* 769 => 1280 */ -@media only screen and (max-height: 1280px) { - .cvat-tasks-page > div:nth-child(3) { - height: 80%; - } -} - -/* 0 => 768 */ -@media only screen and (max-height: 768px) { - .cvat-tasks-page > div:nth-child(3) { - height: 70%; - } -} - -/* empty-tasks icon */ -.cvat-empty-task-list > div:nth-child(1) { - margin-top: 50px; -} - -.cvat-empty-task-list > div:nth-child(2) > div { - margin-top: 20px; -} - -/* No tasks created yet */ -.cvat-empty-task-list > div:nth-child(2) > div > span { - font-size: 20px; - color: #4A4A4A; -} - -/* To get started with your annotation project .. */ -.cvat-empty-task-list > div:nth-child(3) { - margin-top: 10px; -} - -.ant-pagination.cvat-tasks-pagination { - display: flex; - justify-content: center; -} - -.cvat-task-list { - height: 100%; - overflow-y: auto; -} - -.cvat-tasks-list-item { - width: 100%; - height: 120px; - border: 1px solid #c3c3c3; - border-radius: 3px; - margin-bottom: 15px; - padding-top: 20px; - background: white; -} - -.cvat-tasks-list-item:hover { - border: 1px solid #40a9ff; -} - -.cvat-tasks-list-item > div:nth-child(2) { - word-break: break-all; -} - -.cvat-tasks-list-item > div:nth-child(4) > div { - margin-right: 20px; -} - -.cvat-tasks-list-item > div:nth-child(4) > div:nth-child(2) { - margin-right: 5px; - margin-top: 10px; -} - -.cvat-tasks-list-item > div:nth-child(4) > div:nth-child(2) > div { - display: flex; - align-items: center; -} - -.cvat-task-item-menu-icon > img { - height: 20px; -} - -.cvat-task-item-menu-icon > img:hover { - filter: invert(0.5); -} - -.ant-menu.cvat-actions-menu { - box-shadow: 0 0 17px rgba(0,0,0,0.2); -} - -.cvat-actions-menu > hr { - border: 0.5px solid #D6D6D6; -} - -.cvat-actions-menu > *:hover { - background-color: rgba(24,144,255,0.05); -} - -.cvat-actions-menu-load-submenu-item:hover { - background-color: rgba(24,144,255,0.05); -} - -.cvat-actions-menu-dump-submenu-item > button { - text-align: start; -} - -.cvat-actions-menu-export-submenu-item:hover { - background-color: rgba(24,144,255,0.05); -} - -.cvat-actions-menu-export-submenu-item > button { - text-align: start; -} - -.cvat-actions-menu-dump-submenu-item:hover { - background-color: rgba(24,144,255,0.05); -} - -.cvat-actions-menu > li:nth-child(2) > div > span { - margin-right: 15px; -} - -.cvat-actions-menu > .ant-menu-submenu-vertical > .ant-menu-submenu-title .ant-menu-submenu-arrow { - width: 0px; -} - -.cvat-task-item-preview { - max-width: 140px; - max-height: 80px; -} - -.cvat-task-item-preview-wrapper { - display: flex; - justify-content: center; - overflow: hidden; - margin: 20px; - margin-top: 0px; -} - -.cvat-task-progress { - width: 100%; -} - -.cvat-task-completed-progress { - color: #61C200; - fill: #61C200; - margin-right: 5px; -} - -.cvat-task-completed-progress > div > div > div > div.ant-progress-bg { - background: #52c41a !important; /* csslint allow: important */ -} - -.cvat-task-progress-progress { - color: #1890FF; - fill: #1890FF; - margin-right: 5px; -} - -.cvat-task-pending-progress { - color: #C1C1C1; - fill: #C1C1C1; - margin-right: 5px; -} - -.cvat-task-details-wrapper { - overflow-y: auto; - height: 100%; -} - -.cvat-task-details { - width: 100%; - height: auto; - border: 1px solid #c3c3c3; - border-radius: 3px; - padding: 20px; - background: white; -} - -.cvat-task-details > div:nth-child(2) > div:nth-child(2) { - padding-left: 20px; -} - -.cvat-task-details > div:nth-child(2) > div:nth-child(2) > div:not(:first-child) { - margin-top: 20px; -} - -.cvat-dataset-repository-url > a { - margin-right: 10px; -} - -.cvat-dataset-repository-url > .ant-tag-red { - user-select: none; - opacity: 0.4; -} - -.cvat-dataset-repository-url > .ant-tag-red:hover { - opacity: 0.8; -} - -.cvat-dataset-repository-url > .ant-tag-red:active { - opacity: 1; -} - -.cvat-task-job-list { - width: 100%; - height: auto; - border: 1px solid #c3c3c3; - border-radius: 3px; - margin-top: 20px; - padding: 20px; - background: white; -} - -.cvat-task-job-list > div:nth-child(1) > div:nth-child(1) { - display: flex; -} - -.cvat-task-top-bar { - margin-top: 20px; - margin-bottom: 10px; -} - -.cvat-task-preview { - max-width: 252px; - max-height: 144px; -} - -.cvat-task-preview-wrapper { - display: flex; - justify-content: flex-start; - overflow: hidden; - margin-bottom: 20px; -} - -.cvat-user-selector { - margin-left: 10px; - width: 150px; -} - -.cvat-open-bug-tracker-button { - margin-left: 15px; -} - -textarea.ant-input.cvat-raw-labels-viewer { - border-color: #d9d9d9; - box-shadow: none; - border-top: none; - border-radius: 0px 0px 5px 5px; - min-height: 9em; - font-family:Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace; -} - -.cvat-raw-labels-viewer:focus { - border-color: #d9d9d9; - box-shadow: none; -} - -.cvat-raw-labels-viewer:hover { - border-color: #d9d9d9; - box-shadow: none; -} - -.cvat-constructor-viewer { - border: 1px solid #d9d9d9; - box-shadow: none; - border-top: none; - border-radius: 0px 0px 5px 5px; - padding: 5px; - display: flex; - overflow-y: auto; - min-height: 9em; - flex-wrap: wrap; -} - -.cvat-constructor-viewer-item { - height: fit-content; - display: flex; - align-items: center; - padding: 2px 10px; - border-radius: 2px; - margin: 2px; - margin-left: 8px; - user-select: none; - border: 1px solid rgba(0, 0, 0, 0); - opacity: 0.6; -} - -.cvat-constructor-viewer-item > span { - margin-left: 5px; - color: white; -} - -.cvat-constructor-viewer-item > span > i:hover { - color: #111111; -} - -.cvat-constructor-viewer-item:hover { - opacity: 1; - border: 1px solid rgba(0, 0, 0, 255); -} - -.cvat-constructor-viewer-new-item { - height: fit-content; - display: flex; - align-items: center; - padding: 2px 10px; - border-radius: 2px; - margin: 2px; - margin-left: 8px; - user-select: none; - opacity: 1; -} - -.labels-editor-new-label-button > i { - margin-left: 10px; -} - -.labels-editor-new-label-button > i:hover { - color: #111111; -} - -.cvat-label-constructor-creator > form:first-child { - margin-top: 10px; -} - -.cvat-label-constructor-updater > form:first-child { - margin-top: 10px; -} - -.cvat-attribute-constructor-form > div:first-child > div:nth-child(4) { - display: contents; -} - -.cvat-save-attribute-button:hover > i { - color: black; -} - -.cvat-delete-attribute-button:hover > i { - color: red; -} - -.ant-typography.cvat-jobs-header { - margin-bottom: 0px; - font-size: 20px; - font-weight: bold; -} - -/* Pagination in center */ -.cvat-task-jobs-table > div > div { - text-align: center; -} -.cvat-task-jobs-table > div > div > .ant-table-pagination.ant-pagination { - float: none; -} - -.cvat-job-completed-color { - color: #61C200; -} - -.cvat-job-validation-color { - color: #1890FF; -} - -.cvat-job-annotation-color { - color: #C1C1C1; -} - -.cvat-create-task-form-wrapper { - text-align: center; - margin-top: 40px; - overflow-y: auto; - height: 90%; -} - -.cvat-create-task-form-wrapper > div > span { - font-size: 36px; -} - -.cvat-create-task-content { - margin-top: 20px; - width: 100%; - height: auto; - border: 1px solid #c3c3c3; - border-radius: 3px; - padding: 20px; - background: white; - text-align: initial; -} - -.cvat-create-task-content > div:not(first-child) { - margin-top: 10px; -} - -.cvat-create-task-content > div:nth-child(7) > button { - float: right; - width: 120px; -} - -.cvat-share-tree { - height: fit-content; - min-height: 10em; - max-height: 20em; - overflow: auto; -} - -.cvat-models-page { - padding-top: 30px; - height: 100%; - overflow: auto; -} - -.cvat-models-page > div:nth-child(1) { - margin-bottom: 10px; -} - -.cvat-models-page > div:nth-child(1) > div:nth-child(1) { - display: flex; -} - -.cvat-models-page > div:nth-child(1) > div:nth-child(2) { - display: flex; - justify-content: flex-end; -} - -/* empty-models icon */ -.cvat-empty-models-list > div:nth-child(1) { - margin-top: 50px; -} - -.cvat-empty-models-list > div:nth-child(2) > div { - margin-top: 20px; -} - -/* No models uploaded yet */ -.cvat-empty-models-list > div:nth-child(2) > div > span { - font-size: 20px; - color: #4A4A4A; -} - -/* To annotate your task automatically */ -.cvat-empty-models-list > div:nth-child(3) { - margin-top: 10px; -} - -.cvat-models-list { - height: 100%; - overflow-y: auto; -} - -.cvat-models-list-item { - width: 100%; - height: 60px; - border: 1px solid #c3c3c3; - border-radius: 3px; - margin-bottom: 15px; - padding: 15px; - background: white; -} - -.cvat-models-list-item:hover { - border: 1px solid #40a9ff; -} - -.cvat-models-list-item > div { - display: flex; - align-items: center; -} - -.cvat-models-list-item > div:nth-child(2) > span { - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; -} - -.cvat-models-list-item > div:nth-child(3) > span { - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; -} - -.cvat-menu-icon { - transform: scale(0.5); -} - -.cvat-create-model-form-wrapper { - text-align: center; - margin-top: 40px; - overflow-y: auto; - height: 90%; -} - -.cvat-create-model-form-wrapper > div > span { - font-size: 36px; -} - -.cvat-create-model-content { - margin-top: 20px; - width: 100%; - height: auto; - border: 1px solid #c3c3c3; - border-radius: 3px; - padding: 20px; - background: white; - text-align: initial; -} - -.cvat-create-model-content > div:nth-child(1) > i { - float: right; - font-size: 20px; - color: red; -} - -.cvat-create-model-content > div:nth-child(4) { - margin-top: 10px; -} - -.cvat-create-model-content > div:nth-child(6) > button { - margin-top: 10px; - float: right; - width: 120px; -} - -.cvat-run-model-dialog > div:not(first-child) { - margin-top: 10px; -} - -.cvat-run-model-dialog-info-icon { - color: blue; -} - -.cvat-run-model-dialog-remove-mapping-icon { - color: red; -} - -#root { - width: 100%; - height: 100%; - min-height: 100%; - display: grid; -} - -#cvat-create-task-button { - padding: 0 30px; -} - -#cvat-create-model-button { - padding: 0 30px; -} - -/* Annotation view */ -.cvat-annotation-page.ant-layout { - height: 100% -} - -.ant-layout-header.cvat-annotation-page-header { - background-color: #F1F1F1; - border-bottom: 1px solid #D7D7D7; - height: 54px; - padding: 0px; -} - -.cvat-annotation-header-left-group { - height: 100%; -} - -.cvat-annotation-header-left-group > div { - padding: 0px; - width: 54px; - height: 54px; - float: left; - text-align: center; -} - -.cvat-annotation-header-left-group > div:first-child { - filter: invert(0.9); - background: white; - border-radius: 0px; - width: 70px; -} - -.cvat-annotation-header-left-group > div > * { - display: block; - line-height: 0px; -} - -.cvat-annotation-header-left-group > div > span { - font-size: 10px; -} - -.cvat-annotation-header-left-group > div > i { - transform: scale(0.8); - padding: 3px; -} - -.cvat-annotation-header-left-group > div:hover > i { - transform: scale(0.9); -} - -.cvat-annotation-header-left-group > div:active > i { - transform: scale(0.8); -} - -.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; -} - -.cvat-annotation-header-player-buttons > i { - transform: scale(0.6); -} - -.cvat-annotation-header-player-buttons > i:hover { - transform: scale(0.7); -} - -.cvat-annotation-header-player-buttons > i:active { - transform: scale(0.6); -} - -.cvat-annotation-header-player-controls { - position: relative; - height: 100%; - line-height: 27px; -} - -.cvat-annotation-header-player-controls > div { - position: relative; - height: 50%; -} - -.cvat-annotation-header-player-slider { - width: 350px; -} - -.cvat-annotation-header-player-slider > .ant-slider-rail { - background-color: #979797; -} - -.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%; -} - -.cvat-annotation-header-right-group > div { - height: 54px; - float: left; - text-align: center; - margin-right: 20px; -} - -.cvat-annotation-header-right-group > div:not(:nth-child(3)) > * { - display: block; - line-height: 0px; -} - -.cvat-annotation-header-right-group > div > span { - font-size: 10px; -} - -.cvat-annotation-header-right-group > div > i { - transform: scale(0.8); - padding: 3px; -} - -.cvat-annotation-header-right-group > div:hover > i { - transform: scale(0.9); -} - -.cvat-annotation-header-right-group > div:active > i { - transform: scale(0.8); -} - -.cvat-annotation-header-workspace-selector { - width: 150px; -} - -.cvat-annotation-page-controls-sidebar { - background-color: #F1F1F1; - border-right: 1px solid #D7D7D7; -} - -.cvat-annotation-page-objects-sidebar { - background-color: #F1F1F1; - border-left: 1px solid #D7D7D7; -} - -.cvat-annotation-page-canvas-container { - background-color: white; -} - -.cvat-annotation-page-objects-sidebar { - top: 0px; - right: 0px; - left: auto; - background: white; -} - -.cvat-annotation-page-controls-sidebar > div > i { - border-radius: 3.3px; - transform: scale(0.65); - padding: 2px; -} - -.cvat-annotation-page-controls-sidebar > div > i:hover { - background: #D8D8D8; - transform: scale(0.75); -} - -.cvat-annotation-page-controls-sidebar > div > i:active { - background: #C3C3C3; -} - -.cvat-annotation-page-controls-sidebar > div > i > svg { - transform: scale(0.8); -}