2021-02-19 23:33:19 +08:00
|
|
|
.l_body
|
2024-02-04 19:02:17 +08:00
|
|
|
display: grid
|
|
|
|
|
grid-template-columns: 1fr minmax(200px,var(--width-main)) 1fr
|
2024-02-05 18:01:50 +08:00
|
|
|
grid-gap: var(--gap-margin)
|
2021-02-19 23:33:19 +08:00
|
|
|
margin: auto
|
2024-01-31 22:45:07 +08:00
|
|
|
font-size: var(--fsp)
|
2021-02-19 23:33:19 +08:00
|
|
|
|
2024-02-05 10:03:55 +08:00
|
|
|
.l_body aside
|
2021-11-20 12:32:53 +08:00
|
|
|
z-index: 8
|
2024-02-05 18:01:50 +08:00
|
|
|
width: var(--width-sidebar)
|
2021-02-19 23:33:19 +08:00
|
|
|
flex-shrink: 0
|
|
|
|
|
position: sticky
|
|
|
|
|
position: -webkit-sticky
|
|
|
|
|
|
2024-02-05 22:55:10 +08:00
|
|
|
.l_body .l_left
|
|
|
|
|
top: 8px
|
2024-02-05 10:03:55 +08:00
|
|
|
.l_body .l_right
|
|
|
|
|
.widgets
|
|
|
|
|
height: 100%
|
|
|
|
|
overflow visible
|
|
|
|
|
|
2024-02-05 18:01:50 +08:00
|
|
|
// 平板布局
|
|
|
|
|
@media screen and (max-width: $device-laptop)
|
|
|
|
|
.laptop-only
|
|
|
|
|
display: block !important
|
|
|
|
|
.l_body
|
|
|
|
|
.l_right
|
2024-02-05 22:55:10 +08:00
|
|
|
top: 8px
|
2024-02-05 18:01:50 +08:00
|
|
|
position: fixed
|
|
|
|
|
height: calc(100% - 8px * 2)
|
|
|
|
|
transform: translateX(320px)
|
|
|
|
|
transition: transform .38s ease-out
|
|
|
|
|
margin: 0
|
|
|
|
|
right: 8px
|
|
|
|
|
box-shadow: $boxshadow-card-float
|
|
|
|
|
z-index: 10
|
|
|
|
|
background: var(--site-bg)
|
2024-02-05 19:49:33 +08:00
|
|
|
overflow: auto
|
2024-02-05 22:55:10 +08:00
|
|
|
scrollbar(0, 0)
|
2024-02-05 18:01:50 +08:00
|
|
|
.l_body[rightbar]
|
|
|
|
|
.l_right
|
|
|
|
|
transform: translateX(0px)
|
|
|
|
|
.main-mask
|
|
|
|
|
opacity 1
|
|
|
|
|
pointer-events: inherit
|
|
|
|
|
|
2022-10-09 13:42:03 +08:00
|
|
|
// 手机布局
|
|
|
|
|
@media screen and (max-width: $device-mobile-max)
|
2021-02-19 23:33:19 +08:00
|
|
|
.mobile-only
|
2021-08-19 23:37:44 +08:00
|
|
|
display: block !important
|
2021-02-19 23:33:19 +08:00
|
|
|
.l_body
|
|
|
|
|
padding: 0
|
2024-02-04 21:09:44 +08:00
|
|
|
display: block
|
2021-02-19 23:33:19 +08:00
|
|
|
.l_left
|
|
|
|
|
position: fixed
|
2021-03-05 21:37:28 +08:00
|
|
|
transform: translateX(-320px)
|
2024-02-05 18:01:50 +08:00
|
|
|
transition: transform .38s ease-out
|
2021-02-19 23:33:19 +08:00
|
|
|
margin: 0
|
2024-01-17 00:27:48 +08:00
|
|
|
left: 8px
|
2021-02-19 23:33:19 +08:00
|
|
|
box-shadow: $boxshadow-card-float
|
2024-01-17 00:27:48 +08:00
|
|
|
z-index: 10
|
2021-02-19 23:33:19 +08:00
|
|
|
.l_main
|
|
|
|
|
max-width: 100%
|
2024-02-05 18:01:50 +08:00
|
|
|
.l_body[leftbar]
|
2021-02-19 23:33:19 +08:00
|
|
|
.l_left
|
|
|
|
|
transform: translateX(0px)
|
2024-01-17 00:27:48 +08:00
|
|
|
.main-mask
|
|
|
|
|
opacity 1
|
2024-02-04 19:02:17 +08:00
|
|
|
pointer-events: inherit
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.main-mask
|
|
|
|
|
position: fixed
|
|
|
|
|
pointer-events: none
|
|
|
|
|
top: 0
|
|
|
|
|
left: 0
|
|
|
|
|
width: 100%
|
|
|
|
|
height: 100%
|
|
|
|
|
background: rgba(black, 0.2)
|
|
|
|
|
z-index: 9
|
|
|
|
|
opacity 0
|
|
|
|
|
trans1 opacity
|
