更新
This commit is contained in:
haoouba
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;
|
margin-right: 10px;
|
||||||
border: 1px solid var(--classA);
|
border: 1px solid var(--classA);
|
||||||
padding: 3px;
|
padding: 3px;
|
||||||
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
.meta {
|
.meta {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -1955,6 +1956,7 @@ html[data-night='night'] {
|
|||||||
margin-right: 15px;
|
margin-right: 15px;
|
||||||
padding: 3px;
|
padding: 3px;
|
||||||
border: 1px solid var(--classD);
|
border: 1px solid var(--classD);
|
||||||
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
.content {
|
.content {
|
||||||
min-width: 0;
|
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 {
|
.joe_wallpaper {
|
||||||
&__type {
|
&__type {
|
||||||
position: relative;
|
position: relative;
|
||||||
background: var(--background);
|
background: var(--background);
|
||||||
border-radius: var(--radius-wrap);
|
border-radius: var(--radius-wrap);
|
||||||
box-shadow: var(--box-shadow);
|
box-shadow: var(--box-shadow);
|
||||||
padding: 60px 15px 15px;
|
padding: 60px 15px 15px;
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
&-title {
|
&-title {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 15px;
|
top: 15px;
|
||||||
left: -10px;
|
left: -10px;
|
||||||
background: var(--theme);
|
background: var(--theme);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
box-shadow: 2px 5px 10px rgba(49, 58, 70, 0.15);
|
box-shadow: 2px 5px 10px rgba(49, 58, 70, 0.15);
|
||||||
height: 30px;
|
height: 30px;
|
||||||
line-height: 30px;
|
line-height: 30px;
|
||||||
padding: 0 12px;
|
padding: 0 12px;
|
||||||
border-radius: 2px 2px 2px 0;
|
border-radius: 2px 2px 2px 0;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
&::before {
|
&::before {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-width: 10px;
|
border-width: 10px;
|
||||||
bottom: -20px;
|
bottom: -20px;
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
border-color: var(--theme) transparent transparent;
|
border-color: var(--theme) transparent transparent;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&-list {
|
&-list {
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: 15px;
|
gap: 15px;
|
||||||
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
|
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
|
||||||
border-top: 1px solid var(--classC);
|
border-top: 1px solid var(--classC);
|
||||||
padding-top: 15px;
|
padding-top: 15px;
|
||||||
.item {
|
.item {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background: var(--classD);
|
background: var(--classD);
|
||||||
height: 28px;
|
height: 28px;
|
||||||
line-height: 28px;
|
line-height: 28px;
|
||||||
border-radius: 14px;
|
border-radius: 14px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: var(--routine);
|
color: var(--routine);
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
padding: 0 15px;
|
padding: 0 15px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
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;
|
||||||
&.active {
|
&.active {
|
||||||
transform: translateY(-2px);
|
transform: translateY(-2px);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background: var(--theme);
|
background: var(--theme);
|
||||||
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
&:hover {
|
&:hover {
|
||||||
transform: translateY(-2px);
|
transform: translateY(-2px);
|
||||||
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.error {
|
.error {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: var(--routine);
|
color: var(--routine);
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&__list {
|
&__list {
|
||||||
column-count: 5;
|
display: grid;
|
||||||
column-gap: 0;
|
grid-template-columns: repeat(5, 1fr);
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
.item {
|
.item {
|
||||||
display: block;
|
display: block;
|
||||||
break-inside: avoid;
|
img {
|
||||||
img {
|
max-width: 100%;
|
||||||
transition: 0.35s;
|
object-fit: cover;
|
||||||
max-width: 100%;
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
&__pagination {
|
||||||
&__pagination {
|
display: flex;
|
||||||
display: flex;
|
align-items: center;
|
||||||
align-items: center;
|
justify-content: flex-end;
|
||||||
justify-content: flex-end;
|
&-item {
|
||||||
&-item {
|
user-select: none;
|
||||||
user-select: none;
|
cursor: pointer;
|
||||||
cursor: pointer;
|
margin-left: 5px;
|
||||||
margin-left: 5px;
|
height: 32px;
|
||||||
height: 32px;
|
line-height: 32px;
|
||||||
line-height: 32px;
|
padding: 0 15px;
|
||||||
padding: 0 15px;
|
background: var(--background);
|
||||||
background: var(--background);
|
color: var(--main);
|
||||||
color: var(--main);
|
border-radius: 2px;
|
||||||
border-radius: 2px;
|
transition: background 0.35s, color 0.35s;
|
||||||
transition: background 0.35s, color 0.35s;
|
svg {
|
||||||
svg {
|
fill: var(--routine);
|
||||||
fill: var(--routine);
|
transition: fill 0.35s;
|
||||||
transition: fill 0.35s;
|
}
|
||||||
}
|
.next {
|
||||||
.next {
|
transform: rotate(180deg);
|
||||||
transform: rotate(180deg);
|
}
|
||||||
}
|
&.active,
|
||||||
&.active,
|
&:hover {
|
||||||
&:hover {
|
color: #fff;
|
||||||
color: #fff;
|
background: var(--theme);
|
||||||
background: var(--theme);
|
svg {
|
||||||
svg {
|
fill: #fff;
|
||||||
fill: #fff;
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
&__loading {
|
||||||
&__loading {
|
display: none;
|
||||||
display: none;
|
align-items: center;
|
||||||
align-items: center;
|
justify-content: center;
|
||||||
justify-content: center;
|
padding: 50px 0;
|
||||||
padding: 50px 0;
|
}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user