1 $group
2 -
3 - Main Content (mc)
4 -
5 # mc-wrapper
6 position fixed
7 width 100%
8 $if opt.debug_css
9 border 1px solid blue
10 . mc-wrapper-layout
11 top ${l_mc_top}px
12 height calc(100% - ${l_mc_top + 10}px)
13 . mc-wrapper-layout-sub
14 top ${l_mc_sub_top}px
15 height calc(100% - ${l_mc_sub_top + 1}px)
16 . mc-frame-bar
17 width calc(100% - ${opt.sb_1_min_w}px)
18 height 40px
19 background #545f58
20 display flex
21 flex-direction row
22 . mc-frame-bar-item
23 color #fff
24 padding 5px 20px
25 font-size 24px
26 media screen and (min-width: 1000px)
27 . mc-frame
28 padding-left 18rem
29 media screen and (min-width: 750px)
30 . mc-frame
31 padding-left 16.5rem
32 padding-top 6.25rem
33 $if false
34 . mc-sidebar-left
35 padding 20px 30px
36 overflow auto
37 < ul
38 display flex
39 justify-content space-between
40 flex-direction column
41 list-style-type none
42 transition all 1s ease
43 < li
44 border-bottom 1px solid ${c_0}
45 color ${c_0}
46 display block
47 font-size 0.8rem
48 padding 0.3rem 0 0.3rem 1rem
49 < a
50 color ${c_0}
51 < li:last-child
52 border-bottom 0
53 . mc-sidebar-left
54 border 0px
55 bottom 0rem
56 display block
57 height 100%
58 top 0rem
59 overflow-y auto
60 transition opacity 250ms cubic-bezier(0.4, 0, 0.2, 1) 0s
61 width 320px
62 z-index 9999
63 opacity 0
64 pointer-events none
65 < ul
66 display flex
67 justify-content space-between
68 flex-direction column
69 list-style-type none
70 transition all 1s ease
71 < li
72 border-bottom 1px solid ${c_0}
73 color ${c_0}
74 display block
75 font-size 0.8rem
76 padding 0.3rem 0 0.3rem 0.3rem
77 < a
78 color ${c_0}
79 < ul
80 @ padding-inline-start 10px
81 < li:last-child
82 border-bottom 0
83 media (min-width: 750px)
84 . mc-sidebar-left
85 max-width none
86 pointer-events auto
87 width 16.5rem
88 opacity 1 !important
89 . mc-sidebar-left-title
90 display none
91 . mc-content
92 padding 20px 20px
93 overflow auto
94 . mc-pane
95 width 100%
96 < h2
97 font-size 2rem
98 font-weight 700
99 margin 2rem 0 0 0
100 < h3
101 font-size 1.4rem
102 font-weight 700
103 margin 1.5rem 0 0 0
104 < h4
105 font-weight 700
106 margin 0.5rem 0 -3px 0
107 < p
108 line-height 1.3rem
109 margin-bottom 0.5rem
110 < ul
111 list-style-type disc
112 padding-left 2rem
113 < input[id^='mc-toggle-']
114 display none
115 . mc-label-toggle
116 display none
117 cursor pointer
118 . mc-label-toggle-close
119 display none
120 media screen and (max-width: 1028px)
121 # mc-wrapper
122 . mc-frame
123 display block
124 . mc-sidebar-left
125 < ul li
126 font-size 3rem
127 border-bottom 2px solid ${c_0}
128 padding 2rem 0
129 < ul li:last-child
130 border-bottom 0
131 . mc-wrapper-layout
132 top ${l_mc_top_mobile}rem
133 height calc(100% - ${l_mc_top_mobile + 1}rem)
134 . mc-wrapper-layout-sub
135 top ${l_mc_sub_top_mobile}rem
136 height calc(100% - ${l_mc_sub_top_mobile + 10}rem)
137 . mc-frame-bar
138 display flex
139 flex-direction row
140 justify-content space-between
141 background-color ${c_mc_bg_frame_bar}
142 color ${c_mc_frame_bar}
143 margin 1rem
144 padding 1.5rem 1rem
145 . mc-label-toggle
146 display block
147 . mc-item-link
148 display none
149 . mc-pane
150 display none
151 font-size 1.1rem
152 < h2
153 font-size 1.6rem
154 font-weight 500
155 margin 1.5rem 0 0 0
156 < h3
157 font-size 1.3rem
158 font-weight 500
159 margin 1.2rem 0 0 0
160 < h4
161 font-weight 500
162 margin 1rem 0 -3px 0
163 < p
164 line-height 2rem
165 margin-bottom 1rem
166 . mc-content
167 height calc(100% - 60px)
168 margin 10px
169 padding 20px 40px
170 . mc-content-title
171 display none
172 # mc-toggle-toc:checked ~ .mc-frame .mc-sidebar-left
173 display none
174 # mc-toggle-toc:checked ~ .mc-frame .mc-label-toggle-close
175 font-size 70px
176 cursor pointer
177 display block
178 height 35px
179 width 35px