☰

FurAffinity.net - Tweaks [Ath]

FurAffinity.net: various usability tweaks.

  1. /* ==UserStyle==
  2. @name           FurAffinity.net - Tweaks [Ath]
  3. @namespace      furaffinity
  4. @version        1.0.1
  5. @description    FurAffinity.net: various usability tweaks.
  6. @author         Athari (https://github.com/Athari)
  7. @homepageURL    https://github.com/Athari/AthariUserCSS
  8. @supportURL     https://github.com/Athari/AthariUserCSS/issues
  9. @license        MIT
  10. @preprocessor   less
  11. @var            checkbox ath-round-corners "Round corners" 1
  12. @var            checkbox ath-search-top "Search form on top" 1
  13. @var            checkbox ath-show-header-banner "Show header banner" 0
  14. @var            checkbox ath-show-plus "Show FA+ & virtue signalling" 0
  15. @var            checkbox ath-show-sub-extras "Show submission page redundancy" 0
  16. @var            checkbox ath-limit-page-width "Constrain page width" 0
  17. @var            checkbox ath-limit-image-height "Constrain submission height" 1
  18. @var            checkbox ath-static-prev-next "Static prev & next buttons" 1
  19. @var            range ath-rating-thickness "Submission rating border" [1, 0, 5, 1, 'px']
  20. ==/UserStyle== */
  21. @-moz-document domain("furaffinity.net") {
  22.  
  23.   :root {
  24.     --ath-border-radius: 16px;
  25.     --ath-border-radius-inner: calc(var(--ath-border-radius) - 0px);
  26.   }
  27.  
  28.   & when (@ath-limit-page-width = 0) {
  29.     html,
  30.     body,
  31.     .newsBlock,
  32.     .generic-message-block,
  33.     #ddmenu,
  34.     userpage-nav-header {
  35.       max-width: none;
  36.     }
  37.   }
  38.  
  39.   section.gallery figure u>a {
  40.     border-width: @ath-rating-thickness !important;
  41.   }
  42.  
  43.   & when (@ath-show-sub-extras = 0) {
  44.  
  45.     .submission-sidebar {
  46.       .buttons,
  47.       .info.text > :nth-child(2),
  48.       .info.text > :nth-child(3) {
  49.         display: none !important;
  50.       }
  51.     }
  52.   }
  53.  
  54.   & when (@ath-limit-image-height = 1) {
  55.  
  56.     #submissionImg {
  57.       max-height: calc(100vh - 50px) !important;
  58.     }
  59.     .submission-area {
  60.       padding: 0 !important;
  61.       margin: 0 0 10px 0 !important;
  62.     }
  63.   }
  64.  
  65.   & when (@ath-static-prev-next = 1) {
  66.  
  67.     .submission-content {
  68.       position: relative !important;
  69.  
  70.       .favorite-nav {
  71.         a:first-child[href*=view],
  72.         a:last-child[href*=view] {
  73.           position: absolute !important;
  74.           opacity: 0.2 !important;
  75.           transition: 150ms;
  76.           transition-property: opacity;
  77.         }
  78.         &:hover a[href*=view] {
  79.           opacity: 1.0 !important;
  80.         }
  81.         a:first-child[href*=view] {
  82.           inset: 10px auto auto 10px !important;
  83.         }
  84.         a:last-child[href*=view] {
  85.           inset: 10px 10px auto auto !important;
  86.         }
  87.       }
  88.       
  89.       &:has(.submission-area:hover) .favorite-nav {
  90.         a:first-child,
  91.         a:last-child {
  92.           opacity: 1.0 !important;
  93.         }
  94.       }
  95.     }
  96.   }
  97.  
  98.   & when (@ath-round-corners = 1) {
  99.  
  100.     section,
  101.     .stats-page,
  102.     .submission-preview,
  103.     #page-userpage :is(.userpage-profile, .userpage-section-right, .userpage-section-left) {
  104.       border: none !important;
  105.       border-radius: var(--ath-border-radius);
  106.       box-shadow: #0016 2px 2px 3px 1px;
  107.  
  108.       > :first-child {
  109.         border-radius: var(--ath-border-radius-inner) var(--ath-border-radius-inner) 0 0;
  110.       }
  111.       > :last-child,
  112.       :has(+ .section-footer:last-child),
  113.       #gallery-latest-favorites {
  114.         border-radius: 0 0 var(--ath-border-radius-inner) var(--ath-border-radius-inner);
  115.       }
  116.       > :only-child {
  117.         border-radius: var(--ath-border-radius-inner) var(--ath-border-radius-inner) var(--ath-border-radius-inner) var(--ath-border-radius-inner);
  118.       }
  119.     }
  120.     :is(section, #page-userpage, .submission-sidebar) section {
  121.       box-shadow: none;
  122.     }
  123.  
  124.     .tags a {
  125.       border-radius: 12px !important;
  126.     }
  127.  
  128.     button,
  129.     .button {
  130.       border-radius: 8px !important;
  131.     }
  132.   }
  133.  
  134.   & when (@ath-show-header-banner = 0) {
  135.  
  136.     #header {
  137.       height: 0 !important;
  138.     }
  139.     #pageid-submission #header.has-adminmessage {
  140.       padding-top: 54px;
  141.     }
  142.     site-banner {
  143.       display: none !important;
  144.     }
  145.     userpage-nav-header {
  146.       margin: 0 !important;
  147.     }
  148.     .news-block {
  149.       top: 0px;
  150.       background: none;
  151.       z-index: 100000000;
  152.       margin: 0 550px 0 750px;
  153.       width: auto;
  154.       #admin_notice_do_not_adblock2:only-child {
  155.         margin-top: 13px;
  156.       }
  157.     }
  158.     .newsBlock {
  159.       font-size: inherit;
  160.       line-height: 1.1em;
  161.       padding: 3px;
  162.       background: none;
  163.       backdrop-filter: none;
  164.     }
  165.   }
  166.  
  167.   & when (@ath-show-plus = 0) {
  168.  
  169.     #ddmenu li {
  170.       &.lileft:has(a[href^="/plus"]),
  171.       a[href*="/blm/"] {
  172.         display: none !important;
  173.       }
  174.     }
  175.     #footer {
  176.       a[href^="/plus"],
  177.       small,
  178.       br {
  179.         display: none !important;
  180.       }
  181.     }
  182.     usericon-block-before {
  183.       display: none !important;
  184.     }
  185.   }
  186.  
  187.   & when (@ath-search-top = 1) {
  188.  
  189.     .ath-search-header-text(@text) {
  190.       > h4 {
  191.         font-size: 0 !important;
  192.         &::after {
  193.           content: @text;
  194.           font-size: 15px !important;
  195.         }
  196.       }
  197.     }
  198.     .ath-search-label-text(@text) {
  199.       > label {
  200.         font-size: 0 !important;
  201.         &::after {
  202.           content: " " @text;
  203.           font-size: 15px !important;
  204.         }
  205.       }
  206.     }
  207.  
  208.     #browse-search {
  209.       flex-flow: column-reverse !important;
  210.  
  211.       .browse-sidebar-container {
  212.         width: auto !important;
  213.         padding: 12px 8px !important;
  214.         display: flex !important;
  215.         flex-flow: row wrap;
  216.         gap: 8px 24px !important;
  217.         align-items: center !important;
  218.         white-space: nowrap;
  219.  
  220.         .sidebar-browse-container > h4 {
  221.           display: none !important;
  222.         }
  223.         .browser-sidebar-search-box {
  224.           padding: 0 !important;
  225.         }
  226.  
  227.         .flex-container:has(input[name="order-by"]) {
  228.           .ath-search-header-text("Sort by");
  229.         }
  230.         .jsDateRangeInputs .gridContainer {
  231.           .ath-search-header-text("Date range");
  232.           .gridContainer__item:has(input[value="1day"]) {
  233.             .ath-search-label-text("1d");
  234.           }
  235.           .gridContainer__item:has(input[value="3days"]) {
  236.             .ath-search-label-text("3d");
  237.           }
  238.           .gridContainer__item:has(input[value="7days"]) {
  239.             .ath-search-label-text("7d");
  240.           }
  241.           .gridContainer__item:has(input[value="30days"]) {
  242.             .ath-search-label-text("30d");
  243.           }
  244.           .gridContainer__item:has(input[value="90days"]) {
  245.             .ath-search-label-text("90d");
  246.           }
  247.           .gridContainer__item:has(input[value="1year"]) {
  248.             .ath-search-label-text("1y");
  249.           }
  250.           .gridContainer__item:has(input[value="3years"]) {
  251.             .ath-search-label-text("3y");
  252.           }
  253.           .gridContainer__item:has(input[value="5years"]) {
  254.             .ath-search-label-text("5y");
  255.           }
  256.         }
  257.         .gridContainer:has(input[name="rating-general"]) {
  258.           .ath-search-header-text("Rating");
  259.         }
  260.         .gridContainer:has(input[name="type-art"]) {
  261.           .ath-search-header-text("Type");
  262.         }
  263.         .gridContainer:has(input[name="mode"]) {
  264.           .ath-search-header-text("Search for");
  265.           .gridContainer__item:has(input[value="all"]) {
  266.             .ath-search-label-text("All words");
  267.           }
  268.           .gridContainer__item:has(input[value="any"]) {
  269.             .ath-search-label-text("Any words");
  270.           }
  271.           .gridContainer__item:has(input[value="extended"]) {
  272.             .ath-search-label-text("Advanced syntax");
  273.           }
  274.         }
  275.  
  276.         .jsDateRangeInputs,
  277.         .jsManualRangeContainer__item,
  278.         .flex-container,
  279.         .gridContainer {
  280.           display: flex !important;
  281.           flex-flow: row !important;
  282.           width: auto !important;
  283.           gap: 8px 12px !important;
  284.           margin: 0 !important;
  285.           align-items: center !important;
  286.         }
  287.  
  288.         .jsManualRangeContainer__item {
  289.           height: auto !important;
  290.           line-height: normal !important;
  291.           flex-direction: row-reverse !important;
  292.           input,
  293.           span {
  294.             width: auto !important;
  295.           }
  296.         }
  297.  
  298.         .browse-sidebar-content,
  299.         #sidebar-options,
  300.         .sidebar-options-content,
  301.         .sidebar-browse-container,
  302.         #search-flex-container,
  303.         #search-advanced,
  304.         .jsManualRangeContainer:not(.hidden) {
  305.           display: contents !important;
  306.         }
  307.  
  308.         h4 {
  309.           font-size: inherit !important;
  310.           line-height: 1 !important;
  311.           letter-spacing: normal !important;
  312.           padding: 0 !important;
  313.           width: auto !important;
  314.         }
  315.  
  316.         #search-advanced2 {
  317.           > [style*=margin] {
  318.             margin: 0 !important;
  319.             float: right !important;
  320.           }
  321.         }
  322.  
  323.         .tallRectangleAd {
  324.           margin: 0 !important;
  325.         }
  326.       }
  327.  
  328.       .browse-search-flex-container {
  329.         display: flex !important;
  330.         flex-flow: row wrap;
  331.         gap: 4px 16px !important;
  332.         align-items: center !important;
  333.         white-space: nowrap;
  334.  
  335.         .browse-search-flex-item {
  336.           flex: 0 !important;
  337.           padding: 0 !important;
  338.  
  339.           input,
  340.           select {
  341.             width: 200px !important;
  342.           }
  343.         }
  344.  
  345.         .search-flex-item-title,
  346.         .search-flex-item-3 {
  347.           width: auto !important;
  348.         }
  349.       }
  350.  
  351.       #query-stats {
  352.         display: flex !important;
  353.         flex-flow: row wrap !important;
  354.         gap: 0 16px !important;
  355.  
  356.         div {
  357.           display: flex !important;
  358.           flex-flow: row wrap !important;
  359.           gap: 0 3px !important;
  360.           font-size: 0 !important;
  361.  
  362.           h3 {
  363.             line-height: normal !important;
  364.             padding: 0 !important;
  365.           }
  366.           span {
  367.             font-size: 13px !important;
  368.           }
  369.         }
  370.       }
  371.     }
  372.   }
  373. }