111 lines
1.9 KiB
Stylus
111 lines
1.9 KiB
Stylus
$tools-item-width = 32px
|
|
$tools-item-font-size = 1.1rem
|
|
$tools-item-border-radius = 1px
|
|
|
|
|
|
.side-tools-container {
|
|
position relative
|
|
|
|
.tools-item {
|
|
width $tools-item-width
|
|
height $tools-item-width
|
|
margin-bottom 3px
|
|
color var(--default-text-color)
|
|
font-size $tools-item-font-size
|
|
background var(--background-color)
|
|
border-right none
|
|
border-radius $tools-item-border-radius
|
|
box-shadow 1px 1px 3px var(--shadow-color)
|
|
cursor pointer
|
|
|
|
i {
|
|
color var(--default-text-color)
|
|
}
|
|
|
|
&:hover {
|
|
color var(--background-color)
|
|
background var(--primary-color)
|
|
box-shadow 2px 2px 6px var(--shadow-color)
|
|
|
|
i {
|
|
color var(--background-color)
|
|
}
|
|
}
|
|
|
|
+keep-tablet() {
|
|
width $tools-item-width * 0.9
|
|
height $tools-item-width * 0.9
|
|
margin-bottom 2px
|
|
font-size $tools-item-font-size * 0.9
|
|
}
|
|
|
|
&.rss {
|
|
|
|
a {
|
|
width 100%
|
|
height 100%
|
|
border-radius $tools-item-border-radius
|
|
|
|
&:hover {
|
|
color var(--background-color)
|
|
background var(--primary-color)
|
|
box-shadow 2px 2px 6px var(--shadow-color)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.side-tools-list {
|
|
transform translateX(100%)
|
|
opacity 0
|
|
transition-t("transform, opacity", "0, 0", "0.2, 0.2", "linear, linear")
|
|
|
|
.tool-expand-width {
|
|
+keep-tablet() {
|
|
display none
|
|
}
|
|
}
|
|
|
|
|
|
&.show {
|
|
transform translateX(0)
|
|
opacity 1
|
|
}
|
|
}
|
|
|
|
|
|
.exposed-tools-list {
|
|
|
|
if (hexo-config('style.scroll.percent.enable') == true) {
|
|
.tool-scroll-to-top {
|
|
display none
|
|
|
|
&.show {
|
|
display flex
|
|
}
|
|
|
|
&:hover {
|
|
|
|
.percent {
|
|
display none
|
|
}
|
|
|
|
.arrow-up {
|
|
display flex
|
|
}
|
|
}
|
|
|
|
.arrow-up {
|
|
display none
|
|
}
|
|
|
|
.percent {
|
|
display flex
|
|
font-size 1rem
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|