diff --git a/src/coder/styles/Wrapper.module.less b/src/coder/styles/Wrapper.module.less index 4693912..c4bf9b0 100644 --- a/src/coder/styles/Wrapper.module.less +++ b/src/coder/styles/Wrapper.module.less @@ -1,74 +1,9 @@ -/* stylelint-disable */ - .wrapper { width: 100%; height: 100vh; overflow: auto; background-color: #1f1f1f; - .sider { - overflow: auto; - background-color: #181818; - box-shadow: 1px 0 1px rgb(255 255 255 / 5%); - - .list { - padding: 10px; - - .item { - line-height: 1.6; - color: #ccc; - cursor: pointer; - user-select: none; - - .row { - border-radius: 2px; - transition: background-color 0.2s ease; - - &.active, - &:not(.directory):hover { - background-color: #37373d; - } - - > .directoryIcon { - svg { - transition: transform 0.2s ease; - } - } - } - - > .list { - height: 0; - padding: 0 10px; - overflow: hidden; - transition: height 0.2s ease; - will-change: height; - } - - &.expand { - > .list { - height: fit-content; - } - - .row { - > .directoryIcon { - svg { - transform: rotate(90deg); - } - } - } - } - - span { - margin-left: 8px; - } - - .directoryIcon + span { - margin-left: 0; - } - } - } - } - .content { display: flex; width: calc(100% - 200px); @@ -104,8 +39,8 @@ } .exhibit { - padding: 10px; height: 100%; + padding: 10px; overflow: auto; } } @@ -121,6 +56,65 @@ display: none; } } + + .sider { + overflow: auto; + background-color: #181818; + box-shadow: 1px 0 1px rgb(255 255 255 / 5%); + + .list { + padding: 10px; + } + + .list .item { + line-height: 1.6; + color: #ccc; + cursor: pointer; + user-select: none; + + span { + margin-left: 8px; + } + + .directoryIcon + span { + margin-left: 0; + } + + > .list { + height: 0; + padding: 0 10px; + overflow: hidden; + transition: height 0.2s ease; + will-change: height; + } + } + + .list .item.expand { + > .list { + height: fit-content; + } + } + + .list .item .row { + border-radius: 2px; + transition: background-color 0.2s ease; + + &.active, + &:not(.directory):hover { + background-color: #37373d; + } + + > .directoryIcon { + svg { + transition: transform 0.2s ease; + } + } + } + + .list .item.expand .row > .directoryIcon svg { + transform: rotate(90deg); + } + } } @media screen and (width > 1366px) {