mirror of
https://codeberg.org/VnPower/PixivFE
synced 2024-12-06 19:16:23 +01:00
Complete rewriting major pages UI
This commit is contained in:
VnPower
+81
-4
@@ -6,7 +6,7 @@ html {
|
||||
body {
|
||||
top: 0;
|
||||
margin: 0;
|
||||
background-color: #111;
|
||||
background-color: #131516;
|
||||
color: #fff;
|
||||
font-size: 1.8rem;
|
||||
font-family: "Roboto", "Open Sans", "Noto Sans", sans-serif, "Noto Sans CJK JP";
|
||||
@@ -20,6 +20,15 @@ a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.special-symbol {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 1.8rem;
|
||||
height: 1.8rem;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
@@ -62,6 +71,8 @@ textarea {
|
||||
input[type=text],
|
||||
textarea {
|
||||
width: calc(100% - 1.6rem);
|
||||
background-color: #222;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
input[readonly],
|
||||
@@ -170,6 +181,7 @@ nav .navigation-wrapper .navbar-brand {
|
||||
nav .navigation-wrapper .navbar-brand span {
|
||||
font-weight: bold;
|
||||
font-size: 1.3em;
|
||||
color: #fff;
|
||||
}
|
||||
nav .navigation-wrapper .navbar-entry img {
|
||||
width: 30px;
|
||||
@@ -189,7 +201,7 @@ nav .navigation-wrapper .sidebar-label {
|
||||
cursor: pointer;
|
||||
}
|
||||
nav .navigation-wrapper .sidebar {
|
||||
background-color: #111;
|
||||
background-color: #131516;
|
||||
position: absolute;
|
||||
padding-top: 6px;
|
||||
left: 0;
|
||||
@@ -338,7 +350,7 @@ nav .navigation-wrapper .sidebar .sidebar-list .sidebar-item img {
|
||||
justify-content: center;
|
||||
font-size: 10px;
|
||||
border-radius: 20px;
|
||||
padding: 0.3rem;
|
||||
padding: 0.4rem;
|
||||
background-color: #fc365b;
|
||||
color: #fff;
|
||||
}
|
||||
@@ -445,10 +457,12 @@ nav .navigation-wrapper .sidebar .sidebar-list .sidebar-item img {
|
||||
}
|
||||
.illust .illust-attr .attr-wrap .illust-author {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
.illust .illust-attr .attr-wrap .illust-author a {
|
||||
color: #aaa;
|
||||
}
|
||||
.illust .illust-description {
|
||||
font-size: 0.9em;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
.illust .illust-tags {
|
||||
font-size: 0.9em;
|
||||
@@ -475,6 +489,31 @@ nav .navigation-wrapper .sidebar .sidebar-list .sidebar-item img {
|
||||
font-weight: bold;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.illust .comment {
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.illust .comment p {
|
||||
margin: 0;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
.illust .comment .comment-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.illust .comment .stamp {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.illust .comment .emoji {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-left: 3px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
.illust .illust-other-works > a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -578,5 +617,43 @@ nav .navigation-wrapper .sidebar .sidebar-list .sidebar-item img {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.tag-header {
|
||||
display: flex;
|
||||
}
|
||||
.tag-header .tag-thumbnail {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 5px;
|
||||
margin-right: 20px;
|
||||
object-fit: cover;
|
||||
object-position: center center;
|
||||
}
|
||||
.tag-header .tag-details .main-tag {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.tag-container {
|
||||
background-color: #222;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
margin-right: 10px;
|
||||
width: max-content;
|
||||
height: 40px;
|
||||
margin-bottom: 4px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
font-size: 1rem;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.tag-container .main {
|
||||
font-size: 1.6em;
|
||||
}
|
||||
.tag-container .sub {
|
||||
font-size: 1.2em;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=style.css.map */
|
||||
|
||||
+162
-78
@@ -1,5 +1,4 @@
|
||||
|
||||
$bg: #111;
|
||||
$bg: #131516;
|
||||
$bg-secondary: #222;
|
||||
$fg: #fff;
|
||||
$fg-secondary: #aaa;
|
||||
@@ -40,6 +39,14 @@ a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.special-symbol {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 1.8rem;
|
||||
height: 1.8rem;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
@@ -83,6 +90,8 @@ textarea {
|
||||
input[type="text"],
|
||||
textarea {
|
||||
width: calc(100% - 1.6rem);
|
||||
background-color: $bg-secondary;
|
||||
color: $fg-secondary;
|
||||
}
|
||||
|
||||
input[readonly],
|
||||
@@ -130,7 +139,7 @@ input[type="submit"],
|
||||
button,
|
||||
input[type="submit"],
|
||||
.switch-button,
|
||||
.pagination-button {
|
||||
.pagination-button {
|
||||
font-family: $font-family;
|
||||
}
|
||||
|
||||
@@ -144,8 +153,7 @@ input[type="submit"]:active,
|
||||
button:hover,
|
||||
input[type="submit"]:hover,
|
||||
.switch-button,
|
||||
.pagination-button {
|
||||
|
||||
.pagination-button {
|
||||
cursor: pointer;
|
||||
filter: brightness($hover-brightness);
|
||||
}
|
||||
@@ -155,7 +163,7 @@ a strong,
|
||||
button,
|
||||
input[type="submit"],
|
||||
.switch-button,
|
||||
.pagination-button {
|
||||
.pagination-button {
|
||||
background-color: $link;
|
||||
border: 2px solid $link;
|
||||
color: $fg;
|
||||
@@ -175,10 +183,10 @@ input[type="submit"][hidden] {
|
||||
}
|
||||
|
||||
nav {
|
||||
margin-top: 15px;
|
||||
margin-bottom: 15px;
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 15px;
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
.navigation-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -192,6 +200,7 @@ nav {
|
||||
span {
|
||||
font-weight: bold;
|
||||
font-size: 1.3em;
|
||||
color: $fg;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -308,7 +317,10 @@ nav {
|
||||
|
||||
.artwork-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(calc($small-artwork-width + 15px), 1fr));
|
||||
grid-template-columns: repeat(
|
||||
auto-fit,
|
||||
minmax(calc($small-artwork-width + 15px), 1fr)
|
||||
);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@@ -338,8 +350,7 @@ nav {
|
||||
.artwork-author {
|
||||
max-width: $large-artwork-width;
|
||||
a {
|
||||
|
||||
max-width: $small-artwork-width;
|
||||
max-width: $small-artwork-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -358,8 +369,7 @@ nav {
|
||||
max-width: $small-artwork-width;
|
||||
|
||||
a {
|
||||
|
||||
max-width: $small-artwork-width;
|
||||
max-width: $small-artwork-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -393,35 +403,35 @@ nav {
|
||||
background-color: rgba(0, 0, 0, 0.32);
|
||||
}
|
||||
.artwork-profanity-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 10px;
|
||||
border-radius: 20px;
|
||||
padding: 0.3rem;
|
||||
background-color: $highlight;
|
||||
color: $fg;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 10px;
|
||||
border-radius: 20px;
|
||||
padding: 0.4rem;
|
||||
background-color: $highlight;
|
||||
color: $fg;
|
||||
}
|
||||
|
||||
.artwork-page-count {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex: 0 0 auto;
|
||||
box-sizing: border-box;
|
||||
height: 20px;
|
||||
min-width: 20px;
|
||||
color: $fg;
|
||||
font-weight: bold;
|
||||
padding: 0px 6px;
|
||||
background: rgba(0, 0, 0, 0.32);
|
||||
border-radius: 10px;
|
||||
font-size: 10px;
|
||||
line-height: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex: 0 0 auto;
|
||||
box-sizing: border-box;
|
||||
height: 20px;
|
||||
min-width: 20px;
|
||||
color: $fg;
|
||||
font-weight: bold;
|
||||
padding: 0px 6px;
|
||||
background: rgba(0, 0, 0, 0.32);
|
||||
border-radius: 10px;
|
||||
font-size: 10px;
|
||||
line-height: 10px;
|
||||
|
||||
.boxbox {
|
||||
font-size: 9px;
|
||||
}
|
||||
.boxbox {
|
||||
font-size: 9px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -465,12 +475,11 @@ line-height: 10px;
|
||||
}
|
||||
|
||||
span {
|
||||
|
||||
font-size: 14px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
line-height: 22px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -512,13 +521,15 @@ line-height: 10px;
|
||||
}
|
||||
.illust-author {
|
||||
font-size: 0.8em;
|
||||
color: $fg-secondary;
|
||||
a {
|
||||
color: $fg-secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.illust-description {
|
||||
font-size: 0.9em;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
.illust-tags {
|
||||
@@ -552,6 +563,36 @@ line-height: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.comment {
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.comment-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.stamp {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.emoji {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-left: 3px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.illust-other-works {
|
||||
& > a {
|
||||
display: inline-flex;
|
||||
@@ -559,27 +600,25 @@ line-height: 10px;
|
||||
text-decoration: none;
|
||||
color: $fg;
|
||||
|
||||
& > img {
|
||||
aspect-ratio: 1/1;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
margin-right: 5px;
|
||||
& > img {
|
||||
aspect-ratio: 1/1;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.background-cover {
|
||||
background: repeating-linear-gradient(
|
||||
52.5deg,
|
||||
rgba(32, 32, 32, 0.8),
|
||||
rgba(32, 32, 32, 0.8) 14px,
|
||||
rgba(240, 248, 255, 0) 14px,
|
||||
rgba(240, 248, 255, 0) 28px
|
||||
);
|
||||
background: repeating-linear-gradient(
|
||||
52.5deg,
|
||||
rgba(32, 32, 32, 0.8),
|
||||
rgba(32, 32, 32, 0.8) 14px,
|
||||
rgba(240, 248, 255, 0) 14px,
|
||||
rgba(240, 248, 255, 0) 28px
|
||||
);
|
||||
height: 10vw;
|
||||
min-height: 100px;
|
||||
overflow: hidden;
|
||||
@@ -600,27 +639,26 @@ line-height: 10px;
|
||||
}
|
||||
|
||||
.user {
|
||||
transform: translateY(-8rem);
|
||||
transform: translateY(-8rem);
|
||||
|
||||
.user-avatar {
|
||||
.user-avatar {
|
||||
margin: auto;
|
||||
aspect-ratio: 1/1;
|
||||
width: 170px;
|
||||
height: 170px;
|
||||
|
||||
margin: auto;
|
||||
aspect-ratio: 1/1;
|
||||
width: 170px;
|
||||
height: 170px;
|
||||
|
||||
img {
|
||||
border-radius: 50%;
|
||||
}
|
||||
img {
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.user-details {
|
||||
text-align: center;
|
||||
.user-details {
|
||||
text-align: center;
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
}
|
||||
h2 {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#calendar {
|
||||
@@ -675,3 +713,49 @@ line-height: 10px;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.tag-header {
|
||||
display: flex;
|
||||
|
||||
.tag-thumbnail {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 5px;
|
||||
margin-right: 20px;
|
||||
|
||||
object-fit: cover;
|
||||
object-position: center center;
|
||||
}
|
||||
|
||||
.tag-details {
|
||||
.main-tag {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tag-container {
|
||||
background-color: $bg-secondary;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
margin-right: 10px;
|
||||
|
||||
width: max-content;
|
||||
height: 40px;
|
||||
margin-bottom: 4px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
font-size: 1rem;
|
||||
border-radius: 4px;
|
||||
|
||||
.main {
|
||||
font-size: 1.6em;
|
||||
}
|
||||
.sub {
|
||||
font-size: 1.2em;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -98,9 +98,8 @@
|
||||
</ul>
|
||||
</div>
|
||||
<span class="navbar-brand">
|
||||
<img src="https://pixivfe.exozy.me/favicon.ico" alt="Icon" />
|
||||
<a href="/">
|
||||
|
||||
<img src="https://pixivfe.exozy.me/favicon.ico" alt="Icon" />
|
||||
<span>PixivFE</span>
|
||||
</a>
|
||||
</span>
|
||||
|
||||
@@ -37,7 +37,9 @@
|
||||
</a>
|
||||
<div class="attr-wrap">
|
||||
<div class="illust-title">{{ Illust.Title }}</div>
|
||||
<div class="illust-author">{{ Illust.User.Name }}</div>
|
||||
<div class="illust-author">
|
||||
<a href="/users/{{ Illust.User.ID }}">{{ Illust.User.Name }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -84,8 +86,9 @@
|
||||
<br />
|
||||
<div class="illust-other-works">
|
||||
<a href="/users/{{ Illust.User.ID }}"
|
||||
><img src="{{ Illust.User.Avatar }}" alt="{{ Illust.User.Name }}" />
|
||||
Other works by {{ Illust.User.Name }}
|
||||
><img src="{{ Illust.User.Avatar }}" alt="{{ Illust.User.Name }}" /> Other
|
||||
works by {{ Illust.User.Name }}
|
||||
<span class="special-symbol">»</span>
|
||||
</a>
|
||||
<div class="artwork-container-scroll">
|
||||
{{ range Illust.RecentWorks }}
|
||||
@@ -100,7 +103,7 @@
|
||||
{{ if Illust.CommentDisabled == 1 }}
|
||||
<p>The creator turned comments off</p>
|
||||
{{ else if Illust.Comments == 0 }}
|
||||
<p>There is no comment yet</p>
|
||||
<p>There are no comments yet</p>
|
||||
{{ else }} {{ range Illust.CommentsList }}
|
||||
<div class="comment">
|
||||
<img class="comment-avatar" src="{{ .Avatar }}" alt="{{ .AuthorName }}" />
|
||||
|
||||
@@ -8,5 +8,5 @@
|
||||
{{ end }}
|
||||
</div>
|
||||
<a href="/artworks/{{ .ID }}">
|
||||
<img src="{{ .Thumbnail }}" alt="{{ .Title }}" />
|
||||
<img src="{{ .Thumbnail }}" alt="{{ .Title }}" loading="lazy" />
|
||||
</a>
|
||||
|
||||
@@ -21,9 +21,13 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="artwork-container">
|
||||
<div class="artwork-container-scroll">
|
||||
{{ range Data.RelatedTags }}
|
||||
<a class="tag-container" href="/tags/{{ . }}">#{{ . }}</a>
|
||||
<a href="/tags/{{ . }}">
|
||||
<div class="tag-container">
|
||||
<div class="main">#{{ . }}</div>
|
||||
</div>
|
||||
</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
@@ -52,7 +56,7 @@
|
||||
</div>
|
||||
{{ if Data.Popular.Recent }}
|
||||
<h2>Popular artworks</h2>
|
||||
<div class="artwork-container">
|
||||
<div class="artwork-container-scroll">
|
||||
{{ include "components/small-tn" Data.Popular.Recent }} {{ include
|
||||
"components/small-tn" Data.Popular.Permanent }}
|
||||
</div>
|
||||
@@ -60,7 +64,9 @@
|
||||
<!-- Switchers here -->
|
||||
<br />
|
||||
<h2>Works</h2>
|
||||
<div>{{ include "components/small-tn" Data.Artworks.Artworks }}</div>
|
||||
<div class="artwork-container">
|
||||
{{ include "components/small-tn" Data.Artworks.Artworks }}
|
||||
</div>
|
||||
|
||||
<div class="pagination">
|
||||
{{ url := "/tags/" + Tag.Name + "?category=" + Queries.Category + "&order="
|
||||
|
||||
Reference in New Issue
Block a user