hexo-theme-keep/source/css/layout/_partial/side-tools.styl

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