更新
This commit is contained in:
parent
7a1d3bc69f
commit
623311c45d
File diff suppressed because one or more lines are too long
@ -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;
|
||||
|
@ -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}
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user