From d9cae7b8cfe39027a076bd2e8e7a884b9d2a4cdf Mon Sep 17 00:00:00 2001 From: mandorinn <91846001+mandorinn@users.noreply.github.com> Date: Fri, 6 Sep 2024 16:12:11 -0500 Subject: [PATCH] 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 --- release/eSixCafe.user.css | 179 +++++++++++++++++++++++++++++++++++++- 1 file changed, 178 insertions(+), 1 deletion(-) diff --git a/release/eSixCafe.user.css b/release/eSixCafe.user.css index eb1a990..3569856 100644 --- a/release/eSixCafe.user.css +++ b/release/eSixCafe.user.css @@ -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;