mirror of
https://github.com/mandorinn/eSix-Cafe.git
synced 2025-03-04 02:53:00 -05:00
Popular Page - pretty-ification
New - layout for popular page, all post thumbnails are now the same size. Fixed - remove post icon not having a background in the re621 notifications window Fixed - arrow to the left of the blacklist ui being black instead of the normal text color Fixed - Post navigation on top and bottom of a post not having a border radius Tweaked - Sidebar post navigation is now styled similarly to the search bar and parent/children section
This commit is contained in:
mandorinn
GitHub
parent
747eb110df
commit
d9cae7b8cf
@ -1,7 +1,7 @@
|
||||
/* ==UserStyle==
|
||||
@name eSix Café
|
||||
@namespace mandorinn
|
||||
@version 2.0.5
|
||||
@version 2.1.0
|
||||
@description A muted and easy on the eyes style for e621. Big credits to Faucet for the bug reports so far, thank you!
|
||||
@author mandorinn [(www.mandorinn.dev)], faucet [(https://e621.net/users/601225)]
|
||||
@preprocessor stylus
|
||||
@ -1662,6 +1662,13 @@ if themep == classic {
|
||||
span.ui-dialog-title {
|
||||
color: var(--base-text) !important;
|
||||
}
|
||||
div.re621-ui-dialog a.delete-link {
|
||||
background-color: var(--mode-remove-fav) !important;
|
||||
}
|
||||
div.re621-ui-dialog tabbed.config-tabs form-section.subscription-settings > form-section input[type="text"] {
|
||||
margin-left: .5rem;
|
||||
margin-right:.5rem;
|
||||
}
|
||||
/* Displays custom theme name in the theme picker */
|
||||
.re621-ui-dialog:has(label[for^="theme-customizer"]) div.ui-dialog-titlebar span::after {
|
||||
content: " - "var(--themeName);
|
||||
@ -1675,6 +1682,9 @@ if themep == classic {
|
||||
position: absolute;
|
||||
top: -.5rem;
|
||||
}
|
||||
.blacklist-header::before {
|
||||
border-color: transparent var(--base-text) var(--base-text) transparent !important;
|
||||
}
|
||||
body aside#sidebar div#re621-search {
|
||||
transition:200ms;
|
||||
border-radius:0em;
|
||||
@ -2435,6 +2445,7 @@ if themep == classic {
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow:hidden;
|
||||
}
|
||||
#c-popular h1 {
|
||||
margin-inline: auto;
|
||||
@ -2455,6 +2466,136 @@ if themep == classic {
|
||||
min-width: fit-content;
|
||||
margin-inline: auto;
|
||||
}
|
||||
/* New popular page gridification */
|
||||
#c-popular #a-index {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(10, 1fr);
|
||||
grid-template-rows: 3rem 3rem 1fr;
|
||||
grid-column-gap: 0px;
|
||||
grid-row-gap: 0px;
|
||||
position:relative;
|
||||
}
|
||||
#c-popular #a-index h1 {
|
||||
grid-area: 1 / 1 / 3 / 5;
|
||||
height:fit-content;
|
||||
}
|
||||
#c-popular #popular-nav-links {
|
||||
grid-area: 2 / 5 / 3 / 11;
|
||||
height:fit-content;
|
||||
margin:none;
|
||||
}
|
||||
#c-popular section.blacklist-ui.blacklist-ui.blacklist-inline {
|
||||
grid-area: 2/2/2/2;
|
||||
margin-right:auto;
|
||||
padding: 0 0 1rem 0;
|
||||
display:flex;
|
||||
position:relative;
|
||||
flex-direction: column;
|
||||
& .blacklist-header {
|
||||
height:fit-content;
|
||||
&::before {
|
||||
border-color: transparent var(--base-text) var(--base-text) transparent !important;
|
||||
}
|
||||
}
|
||||
&[collapsed="true"] .blacklist-filters {
|
||||
display:none;
|
||||
}
|
||||
& .blacklist-filters {
|
||||
z-index: 99;
|
||||
display:grid;
|
||||
grid-template-columns: repeat(4,1fr);
|
||||
background-color:var(--bg);
|
||||
border: 2px solid var(--bg-300);
|
||||
border-radius: 6px;
|
||||
position:absolute;
|
||||
padding:.5rem;
|
||||
top:calc(80% + 1rem);
|
||||
overflow:unset;
|
||||
max-width:calc(80ch + 2rem + 20px);
|
||||
& li[enabled="true"] a {
|
||||
border-bottom:2px solid var(--favorite-button);
|
||||
}
|
||||
& li[enabled=false] a {
|
||||
border-bottom:2px solid var(--flagged);
|
||||
}
|
||||
& a {
|
||||
height:2rem;
|
||||
width: 10ch;
|
||||
padding-inline:.5rem;
|
||||
margin-inline:auto;
|
||||
background-color: var(--bg);
|
||||
white-space:nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display:block;
|
||||
position:relative;
|
||||
-webkit-line-clamp: 2;
|
||||
-moz-line-clamp: 2;
|
||||
-ms-line-clamp: 2;
|
||||
z-index: 101;
|
||||
& span {
|
||||
position:absolute;
|
||||
bottom:0;
|
||||
right:0;
|
||||
}
|
||||
}
|
||||
&::before {
|
||||
content:"";
|
||||
width: .75rem;
|
||||
height: .75rem;
|
||||
position:absolute;
|
||||
top: calc(-.6rem + 1px);
|
||||
left: .75rem;
|
||||
background-color: var(--bg);
|
||||
border-top: 2px solid var(--bg-300);
|
||||
border-left: 2px solid var(--bg-300);
|
||||
transform:rotate(45deg);
|
||||
z-index: 100;
|
||||
}
|
||||
}
|
||||
& .blacklist-footer {
|
||||
margin-left: .5rem;
|
||||
}
|
||||
}
|
||||
#c-popular #a-index #posts {
|
||||
grid-area: 3 / 1 / 11 / 11;
|
||||
height:fit-content;
|
||||
& article a {
|
||||
height:150px;
|
||||
width:175px;
|
||||
position:relative;
|
||||
display:grid;
|
||||
place-items:center;
|
||||
overflow:hidden;
|
||||
border-radius: 6px 6px 0 0;
|
||||
& picture {
|
||||
width: 100%;
|
||||
height:100%;
|
||||
display:grid;
|
||||
place-items:center;
|
||||
}
|
||||
& img {
|
||||
height:100%;
|
||||
width:100%;
|
||||
max-height:150%;
|
||||
max-width:150%;
|
||||
object-fit:cover;
|
||||
transition:200ms;
|
||||
transform-origin:top;
|
||||
position: absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
right:0;
|
||||
bottom:0;
|
||||
}
|
||||
&:hover img {
|
||||
height:105%;
|
||||
width:105%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Image content page */
|
||||
div#image-and-nav {
|
||||
min-width: 20%;
|
||||
@ -2464,10 +2605,46 @@ if themep == classic {
|
||||
}
|
||||
div#nav-links-top {
|
||||
border-radius: 8px 8px 0 0!important;
|
||||
overflow:clip;
|
||||
}
|
||||
div#nav-links-bottom {
|
||||
border-radius: 0 0 8px 8px!important;
|
||||
margin-top: -3px;
|
||||
overflow:clip;
|
||||
}
|
||||
div#a-show div#nav-links-left {
|
||||
background-color: var(--bg-400) !important;
|
||||
border: 2px solid var(--bg-300) !important;
|
||||
border-radius:8px;
|
||||
overflow:clip;
|
||||
width:calc(100% + .25rem);
|
||||
position:relative;
|
||||
margin-inline:auto;
|
||||
& .nav-name {
|
||||
width: fit-content !important;
|
||||
max-width: 20ch;
|
||||
white-space: wrap !important;
|
||||
margin-top: .25rem;
|
||||
}
|
||||
& .active.post-nav {
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
height:fit-content;
|
||||
& .nav-left-down {
|
||||
display:flex;
|
||||
gap:1rem;
|
||||
}
|
||||
& a.nav-link {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
& *, .nav-block.search-seq-nav {
|
||||
background:none !important;
|
||||
border: none !important;
|
||||
}
|
||||
& .nav-left-down {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
div#c-posts div#a-show .pool-nav, div#c-posts div#a-show .search-seq-nav, div#c-posts div#a-show .set-nav {
|
||||
background-color: var(--bg)!important;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user