221 lines
3.7 KiB
SCSS
221 lines
3.7 KiB
SCSS
@charset "UTF-8";
|
|
/**
|
|
* 主窗口样式
|
|
* @authors yutent<yutent@doui.cc>
|
|
* @date 2018/12/16 17:15:07
|
|
*/
|
|
|
|
html {
|
|
width: 100%;
|
|
height: 100vh;
|
|
}
|
|
|
|
body {
|
|
overflow: hidden;
|
|
display: flex;
|
|
width: 100%;
|
|
height: 100%;
|
|
line-height: 1.25;
|
|
font-size: 14px;
|
|
color: var(--color-dark-1);
|
|
background: rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
.app {
|
|
position: relative;
|
|
display: flex;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
.category {
|
|
width: 200px;
|
|
height: 100%;
|
|
background: #fff;
|
|
|
|
.item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: 54px;
|
|
padding: 8px;
|
|
border-bottom: 1px solid var(--color-plain-1);
|
|
background: #fff;
|
|
transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
|
|
cursor: pointer;
|
|
|
|
strong {
|
|
max-width: 150px;
|
|
}
|
|
.num {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
min-width: 16px;
|
|
height: 16px;
|
|
padding: 2px;
|
|
line-height: 1;
|
|
border-radius: 50%;
|
|
font-size: 12px;
|
|
background: var(--color-grey-1);
|
|
color: #fff;
|
|
}
|
|
|
|
&:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
&:hover {
|
|
color: var(--color-blue-1);
|
|
background: var(--color-plain-1);
|
|
}
|
|
|
|
&.active {
|
|
color: var(--color-plain-1);
|
|
background: var(--color-blue-1);
|
|
|
|
.num {
|
|
background: #fff;
|
|
color: var(--color-blue-1);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.books-scroll {
|
|
flex: 1;
|
|
height: 100%;
|
|
border-left: 1px solid var(--color-plain-2);
|
|
}
|
|
|
|
.books {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
.book {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 128px;
|
|
margin: 24px;
|
|
background: #fff;
|
|
box-shadow: 0 0 12px rgba(0, 0, 0, 0.15);
|
|
transition: box-shadow 0.1s ease-in;
|
|
cursor: pointer;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 160px;
|
|
object-fit: fill;
|
|
}
|
|
|
|
&:hover {
|
|
box-shadow: 0 0 12px rgba(0, 0, 0, 0.35);
|
|
}
|
|
}
|
|
}
|
|
|
|
.drag-mask {
|
|
display: flex;
|
|
align-items: center;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 9999;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(
|
|
to right,
|
|
transparent,
|
|
transparent 200px,
|
|
rgba(252, 232, 207, 0.6) 200px
|
|
);
|
|
|
|
&::after {
|
|
font-size: 46px;
|
|
text-indent: 360px;
|
|
content: 'Drop epub file here...';
|
|
color: var(--color-grey-1);
|
|
}
|
|
}
|
|
|
|
.book-loading {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 9999;
|
|
width: 100%;
|
|
height: 100%;
|
|
font-size: 20px;
|
|
background: rgba(255, 255, 255, 0.01);
|
|
backdrop-filter: blur(2px);
|
|
|
|
.loading {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
&::before {
|
|
content: '🌑';
|
|
font-size: 36px;
|
|
animation: loading 1s infinite;
|
|
}
|
|
}
|
|
}
|
|
|
|
.context-menu {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100px;
|
|
padding: 5px 0;
|
|
background: #fff;
|
|
|
|
.item {
|
|
height: 30px;
|
|
line-height: 30px;
|
|
padding: 0 15px;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
background: #f2f5fc;
|
|
}
|
|
|
|
&.diabled {
|
|
color: var(--color-plain-2);
|
|
background: #fff;
|
|
cursor: default;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes loading {
|
|
1%,
|
|
100% {
|
|
content: '🌑';
|
|
}
|
|
12.5% {
|
|
content: '🌒';
|
|
}
|
|
25% {
|
|
content: '🌓';
|
|
}
|
|
37.5% {
|
|
content: '🌔';
|
|
}
|
|
50% {
|
|
content: '🌕';
|
|
}
|
|
62.5% {
|
|
content: '🌖';
|
|
}
|
|
75% {
|
|
content: '🌗';
|
|
}
|
|
87.5% {
|
|
content: '🌘';
|
|
}
|
|
}
|