This commit is contained in:
haoouba 2021-01-28 21:06:29 +08:00
parent 7a1d3bc69f
commit 623311c45d
4 changed files with 124 additions and 123 deletions

File diff suppressed because one or more lines are too long

View File

@ -1151,6 +1151,7 @@ html[data-night='night'] {
margin-right: 10px;
border: 1px solid var(--classA);
padding: 3px;
object-fit: cover;
}
.meta {
display: flex;
@ -1955,6 +1956,7 @@ html[data-night='night'] {
margin-right: 15px;
padding: 3px;
border: 1px solid var(--classD);
object-fit: cover;
}
.content {
min-width: 0;

View File

@ -1 +1 @@
.joe_wallpaper__type{position:relative;background:var(--background);border-radius:var(--radius-wrap);box-shadow:var(--box-shadow);padding:60px 15px 15px;margin-bottom:15px}.joe_wallpaper__type-title{position:absolute;top:15px;left:-10px;background:var(--theme);color:#fff;font-weight:500;box-shadow:2px 5px 10px rgba(49,58,70,0.15);height:30px;line-height:30px;padding:0 12px;border-radius:2px 2px 2px 0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_wallpaper__type-title::before{content:'';position:absolute;border-style:solid;border-width:10px;bottom:-20px;left:0;z-index:-1;border-color:var(--theme) transparent transparent}.joe_wallpaper__type-list{display:grid;gap:15px;grid-template-columns:repeat(auto-fit, minmax(100px, 1fr));border-top:1px solid var(--classC);padding-top:15px}.joe_wallpaper__type-list .item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;background:var(--classD);height:28px;line-height:28px;border-radius:14px;cursor:pointer;color:var(--routine);font-size:12px;padding:0 15px;text-align:center;transition:color 0.35s, background 0.35s, box-shadow 0.35s, -webkit-transform 0.35s;transition:color 0.35s, background 0.35s, box-shadow 0.35s, transform 0.35s;transition:color 0.35s, background 0.35s, box-shadow 0.35s, transform 0.35s, -webkit-transform 0.35s}.joe_wallpaper__type-list .item.active{-webkit-transform:translateY(-2px);transform:translateY(-2px);color:#fff;background:var(--theme);box-shadow:0 5px 5px rgba(0,0,0,0.1)}.joe_wallpaper__type-list .item:hover{-webkit-transform:translateY(-2px);transform:translateY(-2px);box-shadow:0 5px 5px rgba(0,0,0,0.1)}.joe_wallpaper__type-list .error{text-align:center;color:var(--routine);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_wallpaper__list{-webkit-column-count:5;column-count:5;-webkit-column-gap:0;column-gap:0;margin-bottom:15px}.joe_wallpaper__list .item{display:block;-webkit-column-break-inside:avoid;break-inside:avoid}.joe_wallpaper__list .item img{transition:0.35s;max-width:100%}.joe_wallpaper__pagination{display:flex;align-items:center;justify-content:flex-end}.joe_wallpaper__pagination-item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;margin-left:5px;height:32px;line-height:32px;padding:0 15px;background:var(--background);color:var(--main);border-radius:2px;transition:background 0.35s, color 0.35s}.joe_wallpaper__pagination-item svg{fill:var(--routine);transition:fill 0.35s}.joe_wallpaper__pagination-item .next{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.joe_wallpaper__pagination-item.active,.joe_wallpaper__pagination-item:hover{color:#fff;background:var(--theme)}.joe_wallpaper__pagination-item.active svg,.joe_wallpaper__pagination-item:hover svg{fill:#fff}.joe_wallpaper__loading{display:none;align-items:center;justify-content:center;padding:50px 0}
.joe_wallpaper__type{position:relative;background:var(--background);border-radius:var(--radius-wrap);box-shadow:var(--box-shadow);padding:60px 15px 15px;margin-bottom:15px}.joe_wallpaper__type-title{position:absolute;top:15px;left:-10px;background:var(--theme);color:#fff;font-weight:500;box-shadow:2px 5px 10px rgba(49,58,70,0.15);height:30px;line-height:30px;padding:0 12px;border-radius:2px 2px 2px 0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_wallpaper__type-title::before{content:'';position:absolute;border-style:solid;border-width:10px;bottom:-20px;left:0;z-index:-1;border-color:var(--theme) transparent transparent}.joe_wallpaper__type-list{display:grid;gap:15px;grid-template-columns:repeat(auto-fit, minmax(100px, 1fr));border-top:1px solid var(--classC);padding-top:15px}.joe_wallpaper__type-list .item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;background:var(--classD);height:28px;line-height:28px;border-radius:14px;cursor:pointer;color:var(--routine);font-size:12px;padding:0 15px;text-align:center;transition:color 0.35s, background 0.35s, box-shadow 0.35s, -webkit-transform 0.35s;transition:color 0.35s, background 0.35s, box-shadow 0.35s, transform 0.35s;transition:color 0.35s, background 0.35s, box-shadow 0.35s, transform 0.35s, -webkit-transform 0.35s}.joe_wallpaper__type-list .item.active{-webkit-transform:translateY(-2px);transform:translateY(-2px);color:#fff;background:var(--theme);box-shadow:0 5px 5px rgba(0,0,0,0.1)}.joe_wallpaper__type-list .item:hover{-webkit-transform:translateY(-2px);transform:translateY(-2px);box-shadow:0 5px 5px rgba(0,0,0,0.1)}.joe_wallpaper__type-list .error{text-align:center;color:var(--routine);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_wallpaper__list{display:grid;grid-template-columns:repeat(5, 1fr);margin-bottom:15px}.joe_wallpaper__list .item{display:block}.joe_wallpaper__list .item img{max-width:100%;-o-object-fit:cover;object-fit:cover}.joe_wallpaper__pagination{display:flex;align-items:center;justify-content:flex-end}.joe_wallpaper__pagination-item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;margin-left:5px;height:32px;line-height:32px;padding:0 15px;background:var(--background);color:var(--main);border-radius:2px;transition:background 0.35s, color 0.35s}.joe_wallpaper__pagination-item svg{fill:var(--routine);transition:fill 0.35s}.joe_wallpaper__pagination-item .next{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.joe_wallpaper__pagination-item.active,.joe_wallpaper__pagination-item:hover{color:#fff;background:var(--theme)}.joe_wallpaper__pagination-item.active svg,.joe_wallpaper__pagination-item:hover svg{fill:#fff}.joe_wallpaper__loading{display:none;align-items:center;justify-content:center;padding:50px 0}

View File

@ -1,123 +1,122 @@
.joe_wallpaper {
&__type {
position: relative;
background: var(--background);
border-radius: var(--radius-wrap);
box-shadow: var(--box-shadow);
padding: 60px 15px 15px;
margin-bottom: 15px;
&-title {
position: absolute;
top: 15px;
left: -10px;
background: var(--theme);
color: #fff;
font-weight: 500;
box-shadow: 2px 5px 10px rgba(49, 58, 70, 0.15);
height: 30px;
line-height: 30px;
padding: 0 12px;
border-radius: 2px 2px 2px 0;
user-select: none;
&::before {
content: '';
position: absolute;
border-style: solid;
border-width: 10px;
bottom: -20px;
left: 0;
z-index: -1;
border-color: var(--theme) transparent transparent;
}
}
&-list {
display: grid;
gap: 15px;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
border-top: 1px solid var(--classC);
padding-top: 15px;
.item {
user-select: none;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
background: var(--classD);
height: 28px;
line-height: 28px;
border-radius: 14px;
cursor: pointer;
color: var(--routine);
font-size: 12px;
padding: 0 15px;
text-align: center;
transition: color 0.35s, background 0.35s, box-shadow 0.35s, transform 0.35s;
&.active {
transform: translateY(-2px);
color: #fff;
background: var(--theme);
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
}
&:hover {
transform: translateY(-2px);
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
}
}
.error {
text-align: center;
color: var(--routine);
user-select: none;
}
}
}
&__list {
column-count: 5;
column-gap: 0;
margin-bottom: 15px;
.item {
display: block;
break-inside: avoid;
img {
transition: 0.35s;
max-width: 100%;
}
}
}
&__pagination {
display: flex;
align-items: center;
justify-content: flex-end;
&-item {
user-select: none;
cursor: pointer;
margin-left: 5px;
height: 32px;
line-height: 32px;
padding: 0 15px;
background: var(--background);
color: var(--main);
border-radius: 2px;
transition: background 0.35s, color 0.35s;
svg {
fill: var(--routine);
transition: fill 0.35s;
}
.next {
transform: rotate(180deg);
}
&.active,
&:hover {
color: #fff;
background: var(--theme);
svg {
fill: #fff;
}
}
}
}
&__loading {
display: none;
align-items: center;
justify-content: center;
padding: 50px 0;
}
&__type {
position: relative;
background: var(--background);
border-radius: var(--radius-wrap);
box-shadow: var(--box-shadow);
padding: 60px 15px 15px;
margin-bottom: 15px;
&-title {
position: absolute;
top: 15px;
left: -10px;
background: var(--theme);
color: #fff;
font-weight: 500;
box-shadow: 2px 5px 10px rgba(49, 58, 70, 0.15);
height: 30px;
line-height: 30px;
padding: 0 12px;
border-radius: 2px 2px 2px 0;
user-select: none;
&::before {
content: '';
position: absolute;
border-style: solid;
border-width: 10px;
bottom: -20px;
left: 0;
z-index: -1;
border-color: var(--theme) transparent transparent;
}
}
&-list {
display: grid;
gap: 15px;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
border-top: 1px solid var(--classC);
padding-top: 15px;
.item {
user-select: none;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
background: var(--classD);
height: 28px;
line-height: 28px;
border-radius: 14px;
cursor: pointer;
color: var(--routine);
font-size: 12px;
padding: 0 15px;
text-align: center;
transition: color 0.35s, background 0.35s, box-shadow 0.35s, transform 0.35s;
&.active {
transform: translateY(-2px);
color: #fff;
background: var(--theme);
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
}
&:hover {
transform: translateY(-2px);
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
}
}
.error {
text-align: center;
color: var(--routine);
user-select: none;
}
}
}
&__list {
display: grid;
grid-template-columns: repeat(5, 1fr);
margin-bottom: 15px;
.item {
display: block;
img {
max-width: 100%;
object-fit: cover;
}
}
}
&__pagination {
display: flex;
align-items: center;
justify-content: flex-end;
&-item {
user-select: none;
cursor: pointer;
margin-left: 5px;
height: 32px;
line-height: 32px;
padding: 0 15px;
background: var(--background);
color: var(--main);
border-radius: 2px;
transition: background 0.35s, color 0.35s;
svg {
fill: var(--routine);
transition: fill 0.35s;
}
.next {
transform: rotate(180deg);
}
&.active,
&:hover {
color: #fff;
background: var(--theme);
svg {
fill: #fff;
}
}
}
}
&__loading {
display: none;
align-items: center;
justify-content: center;
padding: 50px 0;
}
}