123456789101112131415161718192021222324252627282930313233343536373839404142 |
- html,body,:root {
- --padding-left:24px;
- --padding-right:24px;
- --main-color:rgb(38,80,179);
- --header-height:60px;
- }
- html,body{
- margin: 0;
- padding: 0;
- }
- .page-padding-left{
- padding-left: var(--padding-left);
- }
- @mixin mbg($o){
- background-color: rgba(38,80,179,$o);
- }
- .blur-wrap{
- backdrop-filter: blur(6px);
- @include mbg(0.3);
- }
- .left-wrap{
- position: absolute;
- left: 50px;
- height: calc( 100vh - var(--header-height) - 24px );
- top: calc( var(--header-height) + 24px);
- width: 22vw;
- // padding: 15px;
- box-sizing: border-box;
- }
- .right-wrap{
- position: absolute;
- top: calc( var(--header-height) + 24px);
- height: calc( 100vh - var(--header-height) - 24px );
- right: 10px;
-
- .scroll-board-wrap{
- width: 20vw;
- border-radius: 8px;
- overflow: hidden;
- }
- }
|