-
Notifications
You must be signed in to change notification settings - Fork 0
/
sidebar.styl
262 lines (249 loc) · 6.54 KB
/
sidebar.styl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
#sidebar
@media mq-mobile
width: 100%
@media mq-mini
width: 100%
@media mq-tablet
width: sidebar-width
position: fixed
@media mq-normal
width: sidebar-width
position: fixed
overflow-y:scroll;
bottom:0;
top: header-height;
padding-bottom: 20px;
overscroll-behavior: none
border-right: color-split-border solid 0.5px
.widget
@extend $base-style
line-height: line-height
word-wrap: break-word
font-size: 0.9em
ul, ol
list-style: none
margin: 0
ul, ol
margin: 0 20px
ul
list-style: disc
ol
list-style: decimal
.category-list-count
.tag-list-count
.archive-list-count
padding-left: 5px
color: color-grey
font-size: 0.85em
&:before
content: "("
&:after
content: ")"
.tagcloud
a
display: inline-block
margin-right: 10px
&:before
content: "#"
.widget-wrap
background-color: clear
padding: gutter-width gutter-width gutter-width 2*gutter-width
h3
line-height: 30px
a
margin-top: 5px
float: right
a,
span
border-radius: 4px 4px 0 0
background: color-background + 20%
font-size: 15px
line-height: 18px
padding: 5px 10px
vertical-align:bottom
i
font-size: 20px
vertical-align:bottom
.widget-title
@extend $block-caption
margin-bottom: 0
.widget
padding: 15px 5px
a
color: color-sidebar-text
text-decoration: none
&:hover
color: color-sidebar-text-dark
ul, ol, dl
ul, ol, dl
margin-left: 15px
list-style: disc
ul, ol
list-style: none
li,
.category-list-child
padding: 10px 0
font-size: font-size
border-bottom: 1px solid border-color
a
color: color-sidebar-text
ul, ol
list-style: none
li
border: none
&:last-child
padding-bottom: 0px
ul:not(#recent-post), ol:not(#recent-post)
li
a
&:before
color: #ccc
content: "\f0da"
font-size: 12px
margin-right: 6px
font-family: FontAwesome
transition: 0.2s ease
&:hover:before
color: color-sidebar-text-dark
#toTop
@extend $block
display: none
cursor: pointer
text-align: center
width: 60px
height: 60px
color: white
font-size: 50px
line-height: 55px
background: color-default
opacity: 0.8
border-radius: 4px
bottom: 20px
margin: 20px
position: fixed
@media mq-mobile
width: 52px
height: 52px
font-size: 34px
line-height: 52px
@media mq-mini
width: 48px
height: 48px
font-size: 32px
line-height: 48px
#recent-post
li
clearfix()
padding: 10px 0 10px 94px
&.no-thumbnail
li
padding: 10px 0px
li
.item-thumbnail
opacity: 1
float: left
margin-left: -94px
transition: all 0.2s ease
.thumbnail
width: 80px
height: 80px
display: block
position: relative
overflow: hidden
span
width: 100%
height: 100%
display: block
.thumbnail-image
position: absolute
background-size: cover
background-position: center
.thumbnail-none
background-image: url(thumbnail-default-small)
background-size: 100% 100%
.item-inner
a
.item-category
font-size: 13px
text-transform: uppercase
a
color: sidebar-color-link
&:hover
color: color-sidebar-text-dark
a, .fa
margin-right: 5px
.item-title
font-size: 15px
a
color: color-sidebar-text-dark
transition: all 0.2s ease
.item-date
color: #aaa
font-size: 13px
text-transform: uppercase
&:hover
.item-thumbnail
opacity: 0.8
.item-title a
color: sidebar-color-link
#categories
text-shadow: 0 1px 0 #FFFFFF
font-family: '-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol'
ul
margin-bottom: 0
li:last-child
padding-bottom: 0
li
padding: 8px 0
ul
padding-left: 10px
display: none
margin-top: 5px
&.directory.open > ul
display: block
&.directory
font-weight: 500
font-size: 14px
& > a
color: #333
font-size: 15px
&:hover
text-decoration: none
& > i
font-size: 10px
color: sidebar-color-link
&.file
font-weight: normal
word-wrap: break-word
align-items: center;
display: flex;
&:before
content: "";
width: 5px;
height: 5px;
background-color: #4569d4;
display: inline-block;
border-radius: 50%;
opacity: 0;
margin-right: 6px;
&.active
&:before
opacity: 1
&.active > a
font-weight: bold
color: sidebar-color-link-current
& > a
width: 100%
li.file
padding-left: 0px
word-wrap: break-word
a,
a:hover
display: block
text-decoration: none
a:focus:before
content: ""
float: left
margin-left: -13px
font-weight: 500
color: #333