FurAffinity.net: various usability tweaks.
/* ==UserStyle==
@name FurAffinity.net – Tweaks [Ath]
@namespace athari
@version 1.3.0
@description FurAffinity.net: various usability tweaks.
@author Athari (https://github.com/Athari)
@homepageURL https://github.com/Athari/AthariUserCSS
@supportURL https://github.com/Athari/AthariUserCSS/issues
@license MIT
@preprocessor less
@var checkbox ath-round-corners "Round corners" 1
@var checkbox ath-search-top "Search form on top" 1
@var checkbox ath-show-header-banner "Show header banner" 0
@var checkbox ath-show-tab-block "Show tag block buttons" 1
@var checkbox ath-show-plus "Show FA+ & virtue signalling" 0
@var checkbox ath-show-sub-extras "Show submission page redundancy" 0
@var checkbox ath-limit-page-width "Constrain page width" 0
@var checkbox ath-limit-image-height "Constrain submission height" 0
@var checkbox ath-static-prev-next "Static prev & next buttons" 1
@var checkbox ath-story-dark "Story: dark theme" 1
@var range ath-story-scale "Story: scale" [1, 0.75, 2, 0.05]
@var range ath-rating-thickness "Submission rating border" [1, 0, 5, 1, 'px']
==/UserStyle== */
@-moz-document domain("furaffinity.net") {
:root {
--ath-border-radius: 16px;
--ath-border-radius-inner: calc(var(--ath-border-radius) - 0px);
}
/*.submission-content,
body {
overflow: visible !important;
}
.favorite-nav {
position: sticky;
bottom: 10px;
}*/
& when (@ath-limit-page-width = 0) {
html,
body,
.newsBlock,
.generic-message-block,
#ddmenu,
userpage-nav-header {
max-width: none;
}
}
section.gallery figure u>a {
border-width: @ath-rating-thickness !important;
}
& when (@ath-show-sub-extras = 0) {
.submission-sidebar {
/*.buttons,*/
section:has(a[href*="significant+amount+of+tags"]) :is(h3, br),
section.tags-row h3,
.info.text > :nth-child(1),
.info.text > :nth-child(2) {
display: none !important;
}
}
}
& when (@ath-limit-image-height = 1) {
#submissionImg {
max-height: calc(100vh - 50px) !important;
}
.submission-area {
padding: 0 !important;
margin: 0 0 10px 0 !important;
}
}
& when (@ath-static-prev-next = 1) {
.submission-content {
position: relative !important;
.favorite-nav {
a:first-child[href*=view],
a:last-child[href*=view] {
position: absolute !important;
opacity: 0.2 !important;
transition: 150ms;
transition-property: opacity;
}
&:hover a[href*=view] {
opacity: 1.0 !important;
}
a:first-child[href*=view] {
inset: 10px auto auto 10px !important;
}
a:last-child[href*=view] {
inset: 10px 10px auto auto !important;
}
}
&:has(.submission-area:hover) .favorite-nav {
a:first-child,
a:last-child {
opacity: 1.0 !important;
}
}
}
}
& when (@ath-story-dark = 1) {
html:has(> body > #c-submissionContent) {
color-scheme: dark;
body {
background: #111;
}
[style*="color: rgb(0, 0, 0)"] {
color: #eee !important;
}
}
}
div[style*="max-width"] {
transform: scale(@ath-story-scale);
#c-submissionContent:has(iframe) {
height: 800px !important;
padding-block: calc(400px * (@ath-story-scale - 1)) !important;
}
}
& when (@ath-round-corners = 1) {
section,
.stats-page,
.submission-preview,
#page-userpage :is(.userpage-profile, .userpage-section-right, .userpage-section-left) {
border: none !important;
border-radius: var(--ath-border-radius);
box-shadow: #0016 2px 2px 3px 1px;
> :first-child {
border-radius: var(--ath-border-radius-inner) var(--ath-border-radius-inner) 0 0;
}
> :last-child,
:has(+ .section-footer:last-child),
#gallery-latest-favorites {
border-radius: 0 0 var(--ath-border-radius-inner) var(--ath-border-radius-inner);
}
> :only-child {
border-radius: var(--ath-border-radius-inner) var(--ath-border-radius-inner) var(--ath-border-radius-inner) var(--ath-border-radius-inner);
}
}
:is(section, #page-userpage, .submission-sidebar) section {
box-shadow: none;
}
.tags a {
border-radius: 12px !important;
}
button,
.button {
border-radius: 8px !important;
}
}
& when (@ath-show-header-banner = 0) {
#header {
height: 0 !important;
}
#pageid-submission #header.has-adminmessage {
padding-top: 54px;
}
site-banner {
display: none !important;
}
userpage-nav-header {
margin: 0 !important;
}
.news-block {
top: 0px;
background: none;
z-index: 100000000;
margin: 0 550px 0 750px;
width: auto;
#admin_notice_do_not_adblock2:only-child {
margin-top: 13px;
}
}
.newsBlock {
font-size: inherit;
line-height: 1.1em;
padding: 3px;
background: none;
backdrop-filter: none;
}
}
& when (@ath-show-tab-block = 0) {
.tags {
span {
position: relative;
.tag-block {
position: absolute;
left: 0;
top: 100%;
display: none;
font: inherit;
z-index: 1;
opacity: 1;
&.add-tag:after {
content: 'block';
}
&.remove-tag:after {
content: 'unblock';
}
}
&:hover .tag-block {
display: block;
}
&:has(.tag-invalid) .tag-block {
display: none;
}
}
}
}
& when (@ath-show-plus = 0) {
#ddmenu li {
&.lileft:has(a[href^="/plus"]),
a[href*="/blm/"] {
display: none !important;
}
}
#footer {
a[href^="/plus"],
small,
br {
display: none !important;
}
}
usericon-block-before {
display: none !important;
}
}
& when (@ath-search-top = 1) {
.ath-search-header-text(@text) {
> h4 {
font-size: 0 !important;
&::after {
content: @text;
font-size: 15px !important;
}
}
}
.ath-search-label-text(@text) {
> label {
font-size: 0 !important;
&::after {
content: " " @text;
font-size: 15px !important;
}
}
}
#browse-search {
flex-flow: column-reverse !important;
.browse-sidebar-container {
width: auto !important;
padding: 12px 8px !important;
display: flex !important;
flex-flow: row wrap;
gap: 8px 24px !important;
align-items: center !important;
white-space: nowrap;
.hidebrowselowres,
.sidebar-browse-container > h4 {
display: none !important;
}
.browser-sidebar-search-box {
padding: 0 !important;
}
.l-sidebar__searchBox {
flex: 1;
margin: 0;
}
.l-sidebar__pageSettings,
.l-sidebar__sortCriteria {
align-self: flex-end;
}
.flex-container:has(input[name="order-by"]) {
.ath-search-header-text("Sort by");
}
.jsDateRangeInputs .gridContainer {
.ath-search-header-text("Date range");
.gridContainer__item:has(input[value="1day"]) {
.ath-search-label-text("1d");
}
.gridContainer__item:has(input[value="3days"]) {
.ath-search-label-text("3d");
}
.gridContainer__item:has(input[value="7days"]) {
.ath-search-label-text("7d");
}
.gridContainer__item:has(input[value="30days"]) {
.ath-search-label-text("30d");
}
.gridContainer__item:has(input[value="90days"]) {
.ath-search-label-text("90d");
}
.gridContainer__item:has(input[value="1year"]) {
.ath-search-label-text("1y");
}
.gridContainer__item:has(input[value="3years"]) {
.ath-search-label-text("3y");
}
.gridContainer__item:has(input[value="5years"]) {
.ath-search-label-text("5y");
}
}
.gridContainer:has(input[name="rating-general"]) {
.ath-search-header-text("Rating");
}
.gridContainer:has(input[name="type-art"]) {
.ath-search-header-text("Type");
}
.gridContainer:has(input[name="mode"]) {
.ath-search-header-text("Search for");
.gridContainer__item:has(input[value="all"]) {
.ath-search-label-text("All words");
}
.gridContainer__item:has(input[value="any"]) {
.ath-search-label-text("Any words");
}
.gridContainer__item:has(input[value="extended"]) {
.ath-search-label-text("Advanced syntax");
}
}
.jsDateRangeInputs,
.jsManualRangeContainer__item,
.flex-container,
.gridContainer {
display: flex !important;
flex-flow: row !important;
width: auto !important;
gap: 8px 12px !important;
margin: 0 !important;
align-items: center !important;
}
.jsManualRangeContainer__item {
height: auto !important;
line-height: normal !important;
flex-direction: row-reverse !important;
input,
span {
width: auto !important;
}
}
.browse-sidebar-content,
#sidebar-options,
.sidebar-options-content,
.sidebar-browse-container,
#search-flex-container,
#search-advanced,
.jsManualRangeContainer:not(.hidden) {
display: contents !important;
}
h4 {
font-size: inherit !important;
line-height: 1 !important;
letter-spacing: normal !important;
padding: 0 !important;
width: auto !important;
}
#search-advanced2 {
> [style*=margin] {
margin: 0 !important;
float: right !important;
}
}
.tallRectangleAd {
margin: 0 !important;
}
}
.browse-search-flex-container {
display: flex !important;
flex-flow: row wrap;
gap: 4px 16px !important;
align-items: center !important;
white-space: nowrap;
.browse-search-flex-item {
flex: 0 !important;
padding: 0 !important;
input,
select {
width: 200px !important;
}
}
.search-flex-item-title,
.search-flex-item-3 {
width: auto !important;
}
}
#query-stats {
display: flex !important;
flex-flow: row wrap !important;
gap: 0 16px !important;
div {
display: flex !important;
flex-flow: row wrap !important;
gap: 0 3px !important;
font-size: 0 !important;
h3 {
line-height: normal !important;
padding: 0 !important;
}
span {
font-size: 13px !important;
}
}
}
}
}
}