/* ==UserStyle==
@name Sankaku Channel Tweaks
@namespace SankakuTweaks
@description Minor and major tweaks made to Sankaku Channel
@author Galinoa
@homepageURL https://userstyles.world/style/6316/sankaku-channel-tweaks
@preprocessor stylus
@version 0.2.32
@license CC-BY-SA-4.0
@var select theme "[Website] Theme" ["light:Light", "dark:Dark"]
@var color accent-color "[Website] Accent color" #FF761C
@var checkbox hide-annoyance "[Ads] Hide annoyances" 1
@var checkbox navbar-fix "[Header] Fix the clunky navbar" 1
@var checkbox hide-header "[Header] Hide logo & news" 0
@var checkbox hide-theme-buttons "[Header] Hide native theme buttons" 0
@var checkbox drawer-header "[Header] Fixed drawer header" 0
@var checkbox circular-avatars "[Avatars] Circular profile pictures" 1
@var checkbox svg-r-f-icons "Alt. rating & favorites icons" 1
@var checkbox edit-form "Tag post edit form adjustments" 1
@var checkbox autosuggest-edit "Tag autosuggest adjustment" 1
@var checkbox spacial-tags "Spacial tags in the sidebar" 1
==/UserStyle== */
// Format: UserCSS
// This userstyle uses Stylus-lang preprocessor.
// Complete preprocessor documentation at: https://stylus-lang.com
// Writing UserCSS: https://github.com/openstyles/stylus/wiki/Writing-UserCSS
@-moz-document domain("chan.sankakucomplex.com"), domain("legacy.sankakucomplex.com"), domain("idol.sankakucomplex.com"), domain("neolegacy.sankakucomplex.com")
// Helpers.
i = \!important
ac = var(--accent-color-var) // Default #FF761C
// Hide annoyances.
if hide-annoyance
// Prevents screen filling annoyences from making the page unscrollable.
body
overflow: unset i
height: unset i
position: unset i
#sank-prestitial // Screen filling premium annoyences.
#has-mail-notice // Mail notice, also used to refer to the beta channel.
#web-share // Post view "share" button.
#news-ticker // Top bar new ticker.
.scad // General annoyences.
.scad-i // Post list annoyences.
.sidebar iframe // Sidebar annoyences.
.reactions // Reactions below posts
.companion--draggable_element
div[id^="ad_"].ex-over-top // Screen filling annoyences.
a[href="https://get.sankaku.plus/"] // Beta channel refferal.
a[href="https://plus.sankakucomplx.com"] // Beta channel refferal.
a[href^="https://s.zlink"] // Ad
a[href*="tags=sankaku_ai+"] // Ad
ul#navbar li:first-child ul.subnav li:first-child
#user-index .user-home-heading > h3
display: none i
// Anti-adblock overlay.
body > div[style="z-index: 1000000;"]
#content > div[style=""]
#party-mayhem
display: none i
// Navigation bar, submenu hover fix. Now you can actually reach the submenu buttons when hovering with the cursor.
if navbar-fix
div#header
ul#subnavbar
cursor: default
height: 22px
margin: 0
ul#navbar
cursor: default
> li
border: 1px solid transparent
padding: 2px 0 3px
a
display: inline
padding: 4px 10px 5px
&:hover
margin-top: 0 i
> ul.subnav
height: 20px
padding-top: 6px
margin-top: 2px
li
border: 1px solid transparent
padding: 0
&:hover
border: 1px solid alpha(tint(accent-color, 50%), 0.1)
background-color: alpha(tint(accent-color, 50%), 0.1)
&.lang-select
padding-right: 30px
&:hover
background: none
border: 0 0 0 1px i
border-style: solid i
border-color: transparent i
&:last-child
padding: 4px 0 3px i
border-bottom: 1px solid transparent i
a
font-size: 100% i
// Edit form adjustments.
if edit-form
#edit-form
input
margin: 0.3em 0.5em 0.3em 0.1em
&#post_parent_id
width: 100px
padding: 0.4em 0.8em 0.5em
&#post_source
width: calc(863px - 1.6em)
padding: 0.4em 0.8em 0.5em
textarea#post_tags
height: 150px
width: calc(863px - 1.6em)
min-height: 100px
padding: 0.4em 0.8em
margin: 0.3em 0.5em 0.3em 0.1em
line-height: 1.7em
word-spacing: 0.6em i
resize: vertical
// User settings.
#user-edit
textarea#user_blacklisted_tags
width: calc(863px - 1.6em)
min-height: 100px
padding: 0.4em 0.8em
margin: 0.3em 0.5em 0.3em 0.1em
line-height: 1.7em
resize: vertical
input#user_email
width: 300px
padding: 0.4em 0.8em 0.5em
td.large-text
line-height: 1.5em
// Hide logo + news ticker.
if hide-header
#headerlogo
a[href="https://www.sankakucomplex.com/"]
display: none
#headerthumbs
padding-top: 2em
padding-bottom: 22px
margin-left: -302px
height: 150px
width: 600px
left: 50%
position: absolute
// Styling.
box-shadow: 0 8px 7px -8px rgba(0, 0, 0, 0.6)
background: #1B1B1B
border-width: 0 2px 2px
border-style: solid
border-color: #222
// Animation.
transform: translateY(-188px)
transition: transform 400ms, box-shadow 400ms
transition-delay: 500ms
z-index: 10001
// Thumbnail container.
ul
padding-left: 1.25em
margin: 0 auto
width: 560px
li
max-height: 164px
overflow-y: hidden
// Mouse-over to pull down.
&:hover
box-shadow: 0 10px 9px -10px rgba(0, 0, 0, 0.8)
transform: translateY(-2em)
transition: transform 400ms, box-shadow 400ms
z-index: 10001
// Moon avatars.
if circular-avatars
:is(.avatar-small, .avatar-medium, .avatar-large) img
border-radius: 50%
// Use SVG rating and favorites icons on post view pages.
if svg-r-f-icons
.favoriteIcon.clicked
background-position: left -43px
&:hover
background-position: left 1px
.favoriteIcon
background-position: left 1px
background-repeat: no-repeat
background-size: 42px 84px
background-image: var(--favorites-hearts)
&:hover
background-position: left -43px
.unit-rating
background: var(--rating-stars) left -33px repeat-x
background-size: 34px 102px
li
background: var(--rating-stars) left 2px no-repeat
background-size: 34px 102px
a:hover
background: var(--rating-stars) left -68px
background-size: 34px 102px
// Hide dark theme button in the navigation bar.
if hide-theme-buttons
div#header ul#navbar li.lang-select
padding-right: 0
button.theme-button-dark
button.theme-button-light
display: none
// Fixed drawer header
if drawer-header
body > div#header
if theme == dark
background: alpha(#1B1B1B, 0.7) i
else if theme == light
background: alpha(#FFF, 0.7) i
backdrop-filter: blur(10px)
position: fixed
top: 0
width: 100vw
transform: translateY(calc(-100% + 20px))
transition: 0.4s transform ease 0.5s
z-index: 10001
&:hover
transform: translateY(0)
transition: 0.3s transform ease 0s
ul#subnavbar
margin: 0
border-bottom: 1px solid ac i
div#content
padding-top: 1em
...
