Update: style update + new theme
This commit is contained in:
parent
0cffa068d4
commit
cfc228c89b
|
@ -80,7 +80,7 @@ User page ([URL to this page](https://pixivfe.exozy.me/users/11764388)):
|
||||||
- [ ] Local history
|
- [ ] Local history
|
||||||
- [ ] Toggling R-18, R-18G, AI (?)
|
- [ ] Toggling R-18, R-18G, AI (?)
|
||||||
- [x] Custom `pximg` proxy
|
- [x] Custom `pximg` proxy
|
||||||
- [x] Optimization
|
- [ ] Optimization
|
||||||
- [x] Split web components into smaller templates
|
- [x] Split web components into smaller templates
|
||||||
- [x] Clean the models + JSON
|
- [x] Clean the models + JSON
|
||||||
- [x] Navigation between pages
|
- [x] Navigation between pages
|
||||||
|
|
|
@ -7,8 +7,8 @@ body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-family: "Noto Sans CJK JP", "Open Sans", "Noto Sans", sans-serif;
|
font-family: "Noto Sans CJK JP", "Open Sans", "Noto Sans", sans-serif;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
color: #f5f5f5;
|
color: #c0caf5;
|
||||||
background-color: #131516;
|
background-color: #1a1b26;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
|
@ -42,7 +42,7 @@ body {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
color: #f5f5f5;
|
color: #c0caf5;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
.navbar .navbar-brand img {
|
.navbar .navbar-brand img {
|
||||||
|
@ -61,14 +61,14 @@ body {
|
||||||
}
|
}
|
||||||
.navbar .search-bar .search-form-text {
|
.navbar .search-bar .search-form-text {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: #262a2b;
|
background-color: #24283b;
|
||||||
padding: 7px 10px;
|
padding: 7px 10px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
border: none;
|
border: none;
|
||||||
color: #f5f5f5;
|
color: #c0caf5;
|
||||||
}
|
}
|
||||||
.navbar .search-bar .search-form-text::placeholder {
|
.navbar .search-bar .search-form-text::placeholder {
|
||||||
color: #f5f5f5;
|
color: #c0caf5;
|
||||||
}
|
}
|
||||||
.navbar .navbar-button {
|
.navbar .navbar-button {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
@ -88,7 +88,7 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar {
|
.sidebar {
|
||||||
background-color: #131516;
|
background-color: #1a1b26;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
margin-top: 16px;
|
margin-top: 16px;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
@ -106,13 +106,13 @@ body {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
color: #f5f5f5;
|
color: #c0caf5;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
.sidebar .sidebar-list .sidebar-item:hover {
|
.sidebar .sidebar-list .sidebar-item:hover {
|
||||||
background-color: #262a2b;
|
background-color: #24283b;
|
||||||
}
|
}
|
||||||
.sidebar .sidebar-list .sidebar-item img {
|
.sidebar .sidebar-list .sidebar-item img {
|
||||||
width: 30px;
|
width: 30px;
|
||||||
|
@ -142,7 +142,7 @@ body {
|
||||||
left: 0.3rem;
|
left: 0.3rem;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
background-color: #262a2b;
|
background-color: #24283b;
|
||||||
}
|
}
|
||||||
.artwork-thumbnail .artwork-page-count {
|
.artwork-thumbnail .artwork-page-count {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -153,7 +153,7 @@ body {
|
||||||
right: 0.3rem;
|
right: 0.3rem;
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
padding: 0.3rem;
|
padding: 0.3rem;
|
||||||
background-color: rgba(38, 42, 43, 0.6);
|
background-color: rgba(26, 27, 38, 0.6);
|
||||||
}
|
}
|
||||||
.artwork-thumbnail .artwork-page-count span {
|
.artwork-thumbnail .artwork-page-count span {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -173,7 +173,8 @@ body {
|
||||||
left: 0.3rem;
|
left: 0.3rem;
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
padding: 0.3rem;
|
padding: 0.3rem;
|
||||||
background-color: #ff4060;
|
background-color: #f7768e;
|
||||||
|
color: white;
|
||||||
}
|
}
|
||||||
.artwork-thumbnail .artwork-profanity-label span {
|
.artwork-thumbnail .artwork-profanity-label span {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -266,7 +267,7 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
.artwork-page {
|
.artwork-page {
|
||||||
background: #262a2b;
|
background: #24283b;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
.artwork-page .artwork-content {
|
.artwork-page .artwork-content {
|
||||||
|
@ -274,7 +275,7 @@ body {
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
}
|
}
|
||||||
.artwork-page .artwork-content a {
|
.artwork-page .artwork-content a {
|
||||||
color: #3d7699;
|
color: #7aa2f7;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
.artwork-page .artwork-content a:hover {
|
.artwork-page .artwork-content a:hover {
|
||||||
|
@ -295,14 +296,14 @@ body {
|
||||||
}
|
}
|
||||||
.artwork-page .artwork-tags .artwork-tag-name {
|
.artwork-page .artwork-tags .artwork-tag-name {
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
color: #3d7699;
|
color: #7aa2f7;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
.artwork-page .artwork-tags .artwork-tag-altname {
|
.artwork-page .artwork-tags .artwork-tag-altname {
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
}
|
}
|
||||||
.artwork-page .artwork-tags .emphasize {
|
.artwork-page .artwork-tags .emphasize {
|
||||||
color: #ff4060;
|
color: #f7768e;
|
||||||
}
|
}
|
||||||
.artwork-page .artwork-images {
|
.artwork-page .artwork-images {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -356,7 +357,7 @@ body {
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 10vw;
|
height: 10vw;
|
||||||
min-height: 100px;
|
min-height: 100px;
|
||||||
background-color: #262a2b;
|
background-color: #24283b;
|
||||||
}
|
}
|
||||||
|
|
||||||
.user-page {
|
.user-page {
|
||||||
|
@ -380,7 +381,7 @@ body {
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
}
|
}
|
||||||
.user-page .user-details .user-comment a {
|
.user-page .user-details .user-comment a {
|
||||||
color: #3d7699;
|
color: #7aa2f7;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -400,7 +401,7 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
.tag-container {
|
.tag-container {
|
||||||
background-color: #262a2b;
|
background-color: #24283b;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
@ -411,7 +412,7 @@ body {
|
||||||
margin-bottom: 4px;
|
margin-bottom: 4px;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #f5f5f5;
|
color: #c0caf5;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
|
@ -432,16 +433,19 @@ body {
|
||||||
}
|
}
|
||||||
.switcher .switch-button {
|
.switcher .switch-button {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 8px 5px;
|
transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1);
|
||||||
|
padding: 8px 12px;
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
background-color: #262a2b;
|
background-color: #24283b;
|
||||||
color: #f5f5f5;
|
color: #c0caf5;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-decoration-color: #f5f5f5;
|
text-decoration-color: #c0caf5;
|
||||||
}
|
}
|
||||||
.switcher .switch-button:hover {
|
.switcher .switch-button:hover {
|
||||||
background-color: rgba(38, 42, 43, 0.6);
|
background-color: rgba(26, 27, 38, 0.6);
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
|
box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
|
||||||
|
transform: translateY(-2px);
|
||||||
}
|
}
|
||||||
.switcher .switch-seperator {
|
.switcher .switch-seperator {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
@ -456,12 +460,24 @@ body {
|
||||||
}
|
}
|
||||||
.pagination .pagination-button {
|
.pagination .pagination-button {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 5px;
|
transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1);
|
||||||
color: #f5f5f5;
|
padding: 8px 12px;
|
||||||
|
margin-top: 5px;
|
||||||
|
background-color: #24283b;
|
||||||
|
color: #c0caf5;
|
||||||
|
text-decoration: none;
|
||||||
|
text-decoration-color: #c0caf5;
|
||||||
|
}
|
||||||
|
.pagination .pagination-button:hover {
|
||||||
|
background-color: rgba(26, 27, 38, 0.6);
|
||||||
|
text-decoration: underline;
|
||||||
|
box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
|
||||||
|
transform: translateY(-2px);
|
||||||
}
|
}
|
||||||
.pagination .disabled {
|
.pagination .disabled {
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
background-color: #333;
|
background-color: rgba(26, 27, 38, 0.6);
|
||||||
|
color: #a9b1d6;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
|
@ -471,7 +487,7 @@ body {
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
.footer a {
|
.footer a {
|
||||||
color: #f5f5f5;
|
color: #c0caf5;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,9 +1,17 @@
|
||||||
$bg: #131516;
|
// $bg: #131516;
|
||||||
$fg: #f5f5f5;
|
// $fg: #f5f5f5;
|
||||||
$bg-alt: #262a2b;
|
// $bg-alt: #262a2b;
|
||||||
$bg-alt-dimmed: #262a2b99;
|
// $bg-alt-dimmed: #262a2b99;
|
||||||
$blue: #3d7699;
|
// $blue: #3d7699;
|
||||||
$red: #ff4060;
|
// $red: #ff4060;
|
||||||
|
|
||||||
|
$bg: #1a1b26;
|
||||||
|
$bg-alt: #24283b;
|
||||||
|
$bg-alt-dimmed: #1a1b2699;
|
||||||
|
$fg: #c0caf5;
|
||||||
|
$fg-alt: #a9b1d6;
|
||||||
|
$blue: #7aa2f7;
|
||||||
|
$red: #f7768e;
|
||||||
|
|
||||||
* {
|
* {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
@ -202,6 +210,7 @@ body {
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
padding: 0.3rem;
|
padding: 0.3rem;
|
||||||
background-color: $red;
|
background-color: $red;
|
||||||
|
color: white;
|
||||||
|
|
||||||
span {
|
span {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -504,7 +513,8 @@ body {
|
||||||
|
|
||||||
.switch-button {
|
.switch-button {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 8px 5px;
|
transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);
|
||||||
|
padding: 8px 12px;
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
background-color: $bg-alt;
|
background-color: $bg-alt;
|
||||||
color: $fg;
|
color: $fg;
|
||||||
|
@ -514,6 +524,8 @@ body {
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: $bg-alt-dimmed;
|
background-color: $bg-alt-dimmed;
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
|
box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
|
||||||
|
transform: translateY(-2px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -531,13 +543,26 @@ body {
|
||||||
|
|
||||||
.pagination-button {
|
.pagination-button {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 5px;
|
transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);
|
||||||
|
padding: 8px 12px;
|
||||||
|
margin-top: 5px;
|
||||||
|
background-color: $bg-alt;
|
||||||
color: $fg;
|
color: $fg;
|
||||||
|
text-decoration: none;
|
||||||
|
text-decoration-color: $fg;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $bg-alt-dimmed;
|
||||||
|
text-decoration: underline;
|
||||||
|
box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.disabled {
|
.disabled {
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
background-color: #333;
|
background-color: $bg-alt-dimmed;
|
||||||
|
color: $fg-alt;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue