From 411b79ee6085392f107353d49ca2c2e7c29553ba Mon Sep 17 00:00:00 2001 From: goodmice Date: Thu, 13 Oct 2022 13:11:07 +0500 Subject: [PATCH] =?UTF-8?q?=D0=92=D1=8B=D0=BD=D0=B5=D1=81=D0=B5=D0=BD?= =?UTF-8?q?=D1=8B=20=D1=81=D1=82=D0=B8=D0=BB=D0=B8=20=D0=B4=D0=BB=D1=8F=20?= =?UTF-8?q?=D0=BD=D0=BE=D0=B2=D0=BE=D0=B3=D0=BE=20=D0=BA=D0=B0=D1=80=D0=BA?= =?UTF-8?q?=D0=B0=D1=81=D0=B0=20=D0=B8=20=D0=BC=D0=B5=D0=BD=D1=8E=20=D0=BF?= =?UTF-8?q?=D0=BE=D0=BB=D1=8C=D0=B7=D0=BE=D0=B2=D0=B0=D1=82=D0=B5=D0=BB?= =?UTF-8?q?=D1=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/App.less | 127 +++++++++++++------------------- src/styles/layout.less | 147 ++++++++++++++++++++++++++++++++++++++ src/styles/user_menu.less | 10 +++ 3 files changed, 205 insertions(+), 79 deletions(-) create mode 100644 src/styles/layout.less create mode 100644 src/styles/user_menu.less diff --git a/src/styles/App.less b/src/styles/App.less index c4399b5..0ddef5d 100755 --- a/src/styles/App.less +++ b/src/styles/App.less @@ -1,142 +1,111 @@ @import './loader.css'; -@header-height: 64px; -@layout-min-height: calc(100vh - @header-height); - #root, .app{ - min-height:100%; + min-height:100%; } .ant-layout{ - flex: 1; + flex: 1; - > .ant-menu { - flex: 0; - } + > .ant-menu { + flex: 0; + } } html { - display: flex; - height: 100%; + display: flex; + height: 100%; } .mt-30px { - margin-top: 30px; + margin-top: 30px; } .ml-30px { - margin-left: 30px; + margin-left: 30px; } .login_page { - position: absolute; - height: 100%; - width: 100%; - display: flex; - justify-content: center; - align-items: center; - padding: 24px; - background-color: #9d9d9d; + position: absolute; + height: 100%; + width: 100%; + display: flex; + justify-content: center; + align-items: center; + padding: 24px; + background-color: #9d9d9d; } .shadow{ - box-shadow: 1px 1px 4px #00000033; -} - -.header { - display: flex; - align-items: center; - justify-content: space-around; - gap: 50px; - height: @header-height; -} - -.header .logo { - padding: 8px 24px; - margin: 0 10px; - margin-bottom: 2px; -} - -.header .title{ - flex-grow: 1; - color: #fff; - padding-left: calc(100vw / 2 - 400px); -} - -.header button{ - color: rgb(255, 255, 255); - background-color: rgba(0, 0, 0, 0.1); - border: 1px solid rgba(0, 0, 0, 0.2); + box-shadow: 1px 1px 4px #00000033; } .small-font { - font-size: 12px; + font-size: 12px; } .yellow-background { - background-color: #FFFF99 !important; + background-color: #FFFF99 !important; } .lightgray-background { - background-color: #AFABAB !important; + background-color: #AFABAB !important; } .lightpurple-background { - background-color: #CCCCFF !important; + background-color: #CCCCFF !important; } .lightorange-background { - background-color: #FFCC99 !important; + background-color: #FFCC99 !important; } .ph-2 { - padding: 2px 10px; + padding: 2px 10px; } .mh-2 { - margin-left: 2px; - margin-right: 2px; + margin-left: 2px; + margin-right: 2px; } .ant-layout-content { - display: flex; - flex-direction: column; - align-items: stretch; -} - -.sheet{ - padding: 5px 24px; - min-height: calc(@layout-min-height - 15px); // 280px; - margin: 0 15px 15px 15px; -} - -.site-layout-background { - background: #fff; + display: flex; + flex-direction: column; + align-items: stretch; } .border_small{ - border: 1px solid rgba(0, 0, 0, 0.05); + border: 1px solid rgba(0, 0, 0, 0.05); } .menu-title, .chart-footer { - display: flex; + display: flex; } .submit-button { - border-radius: 5px; - font-weight: bold; - text-align: center; - margin: 0 5px 5px 0; + border-radius: 5px; + font-weight: bold; + text-align: center; + margin: 0 5px 5px 0; } .well_menu { - margin-top: 0; - padding-top: 0; - height: 100%; - border-right: 0; + margin-top: 0; + padding-top: 0; + border-right: 0; } tr.table_row_size { - height: 10px; + height: 10px; +} + +.hide-slider { + scrollbar-width: none; + -ms-overflow-style: none; + + &::-webkit-scrollbar { + display: none; + } } diff --git a/src/styles/layout.less b/src/styles/layout.less new file mode 100644 index 0000000..e4a17da --- /dev/null +++ b/src/styles/layout.less @@ -0,0 +1,147 @@ +@header-height: 64px; +@layout-min-height: calc(100vh - @header-height); + +.no-select { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.header { + display: flex; + align-items: center; + justify-content: space-around; + gap: 50px; + height: @header-height; + + & .logo { + padding: 8px 24px; + margin: 0 10px; + margin-bottom: 2px; + } + + & .title { + flex-grow: 1; + color: #fff; + padding-left: calc(100vw / 2 - 400px); + .no-select; + } + + & button { + color: rgb(255, 255, 255); + background-color: rgba(0, 0, 0, 0.1); + border: 1px solid rgba(0, 0, 0, 0.2); + } +} + +@link-color: #FFFC; +@active-bg: #c32828; +@admin-bg: #900; +@admin-active-bg: #413f3d; + +.ant-menu-submenu-popup .ant-menu-sub { + color: @link-color; + + & .ant-menu-item > span > a, & a { + color: @link-color; + } +} + +.page-layout { + height: 100vh; + + & .menu-sider { + overflow-x: hidden; + overflow-y: auto; + height: 100%; + + & .ant-menu-submenu-selected { + &.ant-menu-submenu-vertical { + background-color: @active-bg; + } + + &.ant-menu-submenu-inline { + background-color: inherit; + & .ant-menu-submenu-title { + color: @active-bg; + } + } + } + + & .ant-menu-submenu-title > .ant-menu-title-content > a, + & .ant-menu .ant-menu-item, + & .ant-menu .ant-menu-item > span > a { + color: @link-color; + .no-select; + } + + & .sider-content { + display: flex; + flex-direction: column; + align-items: stretch; + justify-content: start; + height: 100%; + + & .sider-toogle { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: @header-height !important; + color: @link-color; + border: none; + outline: none; + background-color: transparent; + cursor: pointer; + + &:hover { + color: white; + } + } + + & .scrollable { + flex: 1; + overflow-y: scroll; + } + } + + & .ant-menu-dark .ant-menu-inline.ant-menu-sub, & .ant-menu { + background: transparent; + color: @link-color; + } + } + + & .page-content { + overflow-y: auto; + // background: white; + } + + & .sheet{ + padding: 15px; + // min-height: calc(@layout-min-height - 30px); // 280px; + overflow: visible; + margin: 15px; + } + + &-admin { + .header { + background-color: @admin-bg; + } + + .menu-sider { + background-color: @admin-bg; + } + + & .menu-sider .ant-menu-submenu-selected.ant-menu-submenu-inline .ant-menu-submenu-title { + color: white; + & .ant-menu-title-content > a { + color: white; + } + } + } +} + +.site-layout-background { + background: #fff; +} diff --git a/src/styles/user_menu.less b/src/styles/user_menu.less new file mode 100644 index 0000000..6089225 --- /dev/null +++ b/src/styles/user_menu.less @@ -0,0 +1,10 @@ +.user-menu { + + & .profile-links { + display: flex; + flex-direction: column; + align-items: stretch; + gap: 10px; + margin-bottom: 10px; + } +}