Стили разделены по директориям

src/App.tsx

@@ -5,7 +5,7 @@ import { RootPathContext } from '@asb/context'
 import SuspenseFallback from '@components/SuspenseFallback'
 import { NoAccessComponent } from '@utils'
 
-import '@styles/App.less'
+import '@styles/pages/App.less'
 
 const UserOutlet = lazy(() => import('@components/outlets/UserOutlet'))
 const DepositsOutlet = lazy(() => import('@components/outlets/DepositsOutlet'))

src/components/FastRunMenu.tsx

@@ -11,7 +11,7 @@ import { hasPermission, isURLAvailable } from '@utils'
 import { menuItems as adminMenuItems } from '@pages/AdminPanel/AdminNavigationMenu'
 import { menuItems as wellMenuItems } from '@pages/Well/WellNavigationMenu'
 
-import '@styles/fast_run_menu.less'
+import '@styles/components/fast_run_menu.less'
 
 const transliterationTable = {
     'q': 'й', 'w': 'ц', 'e': 'у', 'r': 'к', 't': 'е', 'y': 'н', 'u': 'г', 'i': 'ш', 'o': 'щ', 'p': 'з', '[': 'х', ']': 'ъ', '{': 'х', '}': 'ъ',

src/components/LayoutPortal.tsx

@@ -18,7 +18,7 @@ import SuspenseFallback from './SuspenseFallback'
 
 import Logo from '@images/Logo'
 
-import '@styles/layout.less'
+import '@styles/components/layout.less'
 
 const { Content, Sider } = Layout
 

src/components/UserMenu.tsx

@@ -10,7 +10,7 @@ import { invokeWebApiWrapperAsync } from '@components/factory'
 import { isURLAvailable, removeUser } from '@utils'
 import { AuthService } from '@api'
 
-import '@styles/user_menu.less'
+import '@styles/components/user_menu.less'
 
 export type UserMenuProps = DrawerProps & {
     isAdmin?: boolean

src/components/d3/D3Chart.tsx

@@ -36,7 +36,7 @@ import type {
     ChartTicks
 } from './types'
 
-import '@styles/d3.less'
+import '@styles/components/d3.less'
 
 const defaultOffsets: ChartOffset = {
     top: 10,

src/components/d3/D3HorizontalPercentChart.tsx

@@ -4,10 +4,10 @@ import { Property } from 'csstype'
 import * as d3 from 'd3'
 
 import LoaderPortal from '@components/LoaderPortal'
+import { usePartialProps } from '@utils'
 import { ChartOffset } from './types'
 
-import '@styles/d3.less'
-import { usePartialProps } from '@asb/utils'
+import '@styles/components/d3.less'
 
 export type PercentChartDataType = {
     name: string

src/components/d3/D3MouseZone.tsx

@@ -3,7 +3,7 @@ import * as d3 from 'd3'
 
 import { ChartOffset } from './types'
 
-import '@styles/d3.less'
+import '@styles/components/d3.less'
 
 export type D3MouseState = {
     /** Позиция мыши по оси X */

src/components/d3/monitoring/D3HorizontalCursor.tsx

@@ -9,7 +9,7 @@ import { getChartIcon, isDev, usePartialProps } from '@utils'
 import { BaseDataType } from '../types'
 import { ChartGroup, ChartSizes } from './D3MonitoringCharts'
 
-import '@styles/d3.less'
+import '@styles/components/d3.less'
 
 type D3GroupRenderFunction<DataType extends BaseDataType> = (group: ChartGroup<DataType>, data: DataType[], flowData: DataType[] | undefined) => ReactNode
 

src/components/d3/plugins/D3Cursor.tsx

@@ -6,7 +6,7 @@ import { usePartialProps } from '@utils'
 
 import { wrapPlugin } from './base'
 
-import '@styles/d3.less'
+import '@styles/components/d3.less'
 
 export type D3CursorSettings = {
     /** Параметры стиля линии */

src/components/d3/plugins/D3Tooltip.tsx

@@ -8,7 +8,7 @@ import { BaseDataType, ChartRegistry } from '@components/d3/types'
 import { D3MouseState, useD3MouseZone } from '@components/d3/D3MouseZone'
 import { getTouchedElements, wrapPlugin } from './base'
 
-import '@styles/d3.less'
+import '@styles/components/d3.less'
 
 export type D3TooltipPosition = 'bottom' | 'top' | 'left' | 'right' | 'none'
 

src/components/selectors/WellTreeSelector.tsx

@@ -10,7 +10,7 @@ import { isRawDate } from '@utils'
 import { ReactComponent as DepositIcon } from '@images/DepositIcon.svg'
 import { ReactComponent as ClusterIcon } from '@images/ClusterIcon.svg'
 
-import '@styles/wellTreeSelect.css'
+import '@styles/components/well_tree_select.css'
 
 /**
  * Для поиска в URL текущего раздела по шаблону `/{type}/{id}`

src/pages/Deposit/StatisticsADW.jsx

@@ -9,7 +9,7 @@ import { DateRangeWrapper, makeNumericColumn, makeNumericRender, makeTextColumn,
 import { arrayOrDefault, withPermissions } from '@utils'
 import { SubsystemOperationTimeService } from '@api'
 
-import '@styles/statistics_adw.less'
+import '@styles/pages/statistics_adw.less'
 
 const numericRender = makeNumericRender(2)
 

src/pages/Well/Analytics/Statistics.jsx

@@ -10,7 +10,7 @@ import { OperationStatService, WellOperationService } from '@api'
 import { arrayOrDefault, withPermissions } from '@utils'
 
 import '@styles/index.css'
-import '@styles/statistics.less'
+import '@styles/pages/statistics.less'
 
 const { Text } = Typography
 const { Summary } = RawTable

src/pages/Well/Analytics/WellCompositeEditor/index.jsx

@@ -12,7 +12,7 @@ import { OperationStatService, WellCompositeService } from '@api'
 
 import WellCompositeSections from './WellCompositeSections'
 
-import '@styles/well_composite.less'
+import '@styles/pages/well_composite.less'
 
 const ClusterWells = lazy(() => import('@pages/Cluster/ClusterWells'))
 

src/pages/Well/DrillingProgram/CategoryAdder.jsx

@@ -8,7 +8,7 @@ import { invokeWebApiWrapperAsync } from '@components/factory'
 import { DrillingProgramService } from '@api'
 
 
-import '@styles/drilling_program.less'
+import '@styles/pages/drilling_program.less'
 
 const catSelectorRules = [{
     required: true,

src/pages/Well/DrillingProgram/CategoryHistory.jsx

@@ -12,7 +12,7 @@ import { FileService } from '@api'
 
 import MarksCard from './MarksCard'
 
-import '@styles/drilling_program.less'
+import '@styles/pages/drilling_program.less'
 
 const { RangePicker } = DatePicker
 const { Search } = Input

src/pages/Well/DrillingProgram/CategoryRender.jsx

@@ -18,7 +18,7 @@ import { formatDate, MimeTypes } from '@utils'
 
 import MarksCard from './MarksCard'
 
-import '@styles/drilling_program.less'
+import '@styles/pages/drilling_program.less'
 
 const CommentPrompt = memo(({ isRequired = true, ...props }) => (
     <Poprompt

src/pages/Well/DrillingProgram/index.jsx

@@ -21,7 +21,7 @@ import CategoryRender from './CategoryRender'
 import CategoryEditor from './CategoryEditor'
 import CategoryHistory from './CategoryHistory'
 
-import '@styles/drilling_program.less'
+import '@styles/pages/drilling_program.less'
 
 const ID_STATE = {
   NotInitialized: 0,

src/pages/Well/Measure/MeasureTable.jsx

@@ -18,7 +18,7 @@ import { MeasureService } from '@api'
 import { View } from './View'
 
 import '@styles/index.css'
-import '@styles/measure.css'
+import '@styles/pages/measure.css'
 
 const createEditingColumns = (cols, renderDelegate) =>
   cols.map(col => col.map(col => ({ render: renderDelegate, ...col })))

src/pages/Well/Measure/View.jsx

@@ -4,7 +4,7 @@ import { Empty, Form } from 'antd'
 import { Grid, GridItem } from '@components/Grid'
 
 import '@styles/index.css'
-import '@styles/measure.css'
+import '@styles/pages/measure.css'
 
 export const View = memo(({ columns, item }) => !item || !columns?.length ? (
   <Empty key={'empty'} image={Empty.PRESENTED_IMAGE_SIMPLE} />

src/pages/Well/Measure/columnsCommon.jsx

@@ -2,7 +2,7 @@ import { Input } from 'antd'
 
 import { RegExpIsFloat } from '@components/Table'
 
-import '@styles/measure.css'
+import '@styles/pages/measure.css'
 
 export const v = (text) => (
   <div className={'v-div'}>

src/pages/Well/Telemetry/DashboardNNB/index.jsx

@@ -22,7 +22,7 @@ import {
 import AddGroupWindow from './AddGroupWindow'
 import AddWidgetWindow, { makeWidgetFromWits } from './AddWidgetWindow'
 
-import '@styles/dashboard_nnb.less'
+import '@styles/pages/dashboard_nnb.less'
 
 const getWitsInfo = async () => {
     // TODO: Добавить expire с принудительным обновлением

src/pages/Well/Telemetry/Messages.jsx

@@ -11,8 +11,8 @@ import { makeColumn, makeDateColumn, makeNumericColumn, makeNumericSorter, makeT
 import { withPermissions } from '@utils'
 import { MessageService } from '@api'
 
-import '@styles/filter.less'
-import '@styles/message.less'
+import '@styles/components/filter.less'
+import '@styles/pages/message.less'
 
 const pageSize = 26
 const { Search } = Input

src/pages/Well/Telemetry/OperationTime/index.jsx

@@ -10,8 +10,8 @@ import { DateRangeWrapper, makeColumn, makeNumericColumn, makeNumericRender, mak
 import { arrayOrDefault, range, withPermissions } from '@utils'
 import { SubsystemOperationTimeService } from '@api'
 
-import '@styles/filter.less'
-import '@styles/operation_time.less'
+import '@styles/components/filter.less'
+import '@styles/pages/operation_time.less'
 
 const subsystemColors = [
     '#1abc9c', '#16a085', '#2ecc71', '#27ae60',

src/pages/Well/Telemetry/Operations/OperationsChart.jsx

@@ -4,7 +4,7 @@ import { D3Chart } from '@components/d3'
 import { Grid, GridItem } from '@components/Grid'
 import { formatDate, makeDisplayValue } from '@utils'
 
-import '@styles/detected_operations.less'
+import '@styles/pages/detected_operations.less'
 
 const displayNumber = makeDisplayValue({ fixed: 2 })
 

src/pages/Well/Telemetry/Operations/OperationsTable.jsx

@@ -2,7 +2,7 @@ import { memo } from 'react'
 
 import { Table, makeTextColumn, makeNumericColumn, makeNumericRender } from '@components/Table'
 
-import '@styles/detected_operations.less'
+import '@styles/pages/detected_operations.less'
 
 const numericRender = makeNumericRender(2)
 

src/pages/Well/Telemetry/Operations/index.jsx

@@ -16,7 +16,7 @@ import DrillerSchedule from './DrillerSchedule'
 import OperationsChart from './OperationsChart'
 import OperationsTable from './OperationsTable'
 
-import '@styles/detected_operations.less'
+import '@styles/pages/detected_operations.less'
 
 const Operations = memo(() => {
     const [isLoading, setIsLoading] = useState(false)

src/pages/Well/Telemetry/TelemetryView/ActiveMessagesOnline.jsx

@@ -9,7 +9,7 @@ import { MessageService } from '@api'
 
 import { makeMessageColumns } from '../Messages'
 
-import '@styles/message.less'
+import '@styles/pages/message.less'
 
 export const ActiveMessagesOnline = memo(({ well: givenWell }) => {
   const [messages, setMessages] = useState([])

src/pages/Well/Telemetry/TelemetryView/index.jsx

@@ -32,8 +32,8 @@ import MomentStabPicDisabled from '@images/DempherOff.png'
 import SpinPicEnabled from '@images/SpinEnabled.png'
 import SpinPicDisabled from '@images/SpinDisabled.png'
 
-import '@styles/telemetry_view.less'
-import '@styles/message.less'
+import '@styles/pages/telemetry_view.less'
+import '@styles/pages/message.less'
 
 const { Option } = Select
 

src/pages/Well/WellCase/HistoryTable.jsx

@@ -10,7 +10,7 @@ import { invokeWebApiWrapperAsync } from '@components/factory'
 import { WellFinalDocumentsService } from '@api'
 import { formatDate } from '@utils'
 
-import '@styles/well_case.less'
+import '@styles/pages/well_case.less'
 
 export const HistoryTable = memo(({ category }) => {
     const [isLoading, setIsLoading] = useState(false)

src/pages/Well/WellCase/WellCaseEditor.jsx

@@ -8,7 +8,7 @@ import { invokeWebApiWrapperAsync } from '@components/factory'
 import { WellFinalDocumentsService } from '@api'
 import { arrayOrDefault } from '@utils'
 
-import '@styles/well_case.less'
+import '@styles/pages/well_case.less'
 
 const filterCategoriesByText = (text) => (cat) =>
     !text || !!cat?.nameCategory?.toLowerCase().includes(text.toLowerCase())

src/pages/Well/WellCase/index.jsx

@@ -15,7 +15,7 @@ import { withPermissions } from '@utils'
 import WellCaseEditor from './WellCaseEditor'
 import { HistoryTable } from './HistoryTable'
 
-import '@styles/well_case.less'
+import '@styles/pages/well_case.less'
 
 const expandable = {
     expandedRowRender: (category) => <HistoryTable category={category} />,

src/pages/Well/WellOperations/Tvd/AdditionalTables.jsx

@@ -5,7 +5,7 @@ import { makeNumericRender } from '@components/Table'
 import { invokeWebApiWrapperAsync } from '@components/factory'
 import { formatDate, fractionalSum } from '@utils'
 
-import '@styles/tvd.less'
+import '@styles/pages/tvd.less'
 
 const { Item } = Descriptions
 

src/pages/Well/WellOperations/Tvd/NptTable.jsx

@@ -6,7 +6,7 @@ import LoaderPortal from '@components/LoaderPortal'
 import { invokeWebApiWrapperAsync } from '@components/factory'
 import { makeDateColumn, makeNumericColumn, makeNumericRender, makeTextColumn, Table } from '@components/Table'
 
-import '@styles/tvd.less'
+import '@styles/pages/tvd.less'
 
 export const columns = [
     makeTextColumn('Конструкция секции', 'wellSectionTypeName', null, null, null, { width: 140 }),

src/pages/Well/WellOperations/Tvd/TLChart.jsx

@@ -13,9 +13,9 @@ import { formatDate } from '@utils'
 import { makeTooltipRender } from '../../Telemetry/Operations/OperationsChart'
 import { makeGetColor } from '.'
 
-import '@styles/d3.less'
-import '@styles/tvd.less'
-import '@styles/detected_operations.less'
+import '@styles/components/d3.less'
+import '@styles/pages/tvd.less'
+import '@styles/pages/detected_operations.less'
 
 const defaultOffset = { left: 40, right: 20, top: 20, bottom: 20 }
 const zeroDate = moment('2000-01-01 00:00:00')

src/pages/Well/WellOperations/Tvd/TLPie.jsx

@@ -11,7 +11,7 @@ import { unique } from '@utils/filters'
 
 import { makeGetColor } from '.'
 
-import '@styles/tvd.less'
+import '@styles/pages/tvd.less'
 
 const tableColumns = [
     makeColumn('Цвет', 'color', { width: 50, render: (d) => (

src/pages/Well/WellOperations/Tvd/index.jsx

@@ -18,29 +18,13 @@ import NetGraphExport from './NetGraphExport'
 import AdditionalTables from './AdditionalTables'
 
 import '@styles/index.css'
-import '@styles/tvd.less'
+import '@styles/pages/tvd.less'
 
 const operationsColors = [
-    '#1abc9c',
-    '#16a085',
-    '#2ecc71',
-    '#27ae60',
-    '#3498db',
-    '#2980b9',
-    '#9b59b6',
-    '#8e44ad',
-    '#34495e',
-    '#2c3e50',
-    '#f1c40f',
-    '#f39c12',
-    '#e67e22',
-    '#d35400',
-    '#e74c3c',
-    '#c0392b',
-    '#ecf0f1',
-    '#bdc3c7',
-    '#95a5a6',
-    '#7f8c8d',
+    '#1abc9c', '#16a085', '#2ecc71', '#27ae60', '#3498db',
+    '#2980b9', '#9b59b6', '#8e44ad', '#34495e', '#2c3e50',
+    '#f1c40f', '#f39c12', '#e67e22', '#d35400', '#e74c3c',
+    '#c0392b', '#ecf0f1', '#bdc3c7', '#95a5a6', '#7f8c8d',
 ]
 
 export const makeGetColor = (types) => (type) => {

src/pages/public/Login.jsx

@@ -9,9 +9,10 @@ import { loginRules, passwordRules } from '@utils/validationRules'
 import { setUser, withPermissions } from '@utils'
 import { AuthService } from '@api'
 
-import '@styles/index.css'
 import Logo from '@images/Logo'
 
+import '@styles/index.css'
+
 const Login = memo(() => {
   const [showLoader, setShowLoader] = useState(false)
 

src/styles/pages/App.less

@@ -1,4 +1,4 @@
-@import './loader.css';
+@import '../components/loader.css';
 
 #root, .app{
     min-height:100%;