Sleazy Fork is available in English.

DerpiBooru.org - Tweaks [Ath]

DerpiBooru.org and TrixieBooru.org: various usability tweaks.

  1. /* ==UserStyle==
  2. @name DerpiBooru.org - Tweaks [Ath]
  3. @namespace derpibooru
  4. @version 1.0.1
  5. @description DerpiBooru.org and TrixieBooru.org: 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-long-search-box "Long search box" 1
  12. @var checkbox ath-expand-user-menu "Expand user menu" 1
  13. @var checkbox ath-collapse-news "Collapse news line" 1
  14. @var checkbox ath-compact-footer "Compact footer" 1
  15. @var checkbox ath-thumbs-nospace "Thumbnails: remove spacing" 1
  16. @var checkbox ath-thumbs-fixed-size "Thumbnails: fixed maximum size" 1
  17. @var checkbox ath-pagination "Pagination: fat static buttons" 1
  18. @var checkbox ath-download "Download: static buttons" 1
  19. @var checkbox ath-hide-hide "Disable hiding" 0
  20. @var range ath-rating-thickness "Thumbnails: rating border" [0, 0, 5, 1, 'px']
  21. ==/UserStyle== */
  22.  
  23. @-moz-document domain("derpibooru.org"), domain("trixiebooru.org") {
  24.  
  25. /* Search box: full width */
  26. & when (@ath-long-search-box = 1) {
  27. .header {
  28. .header__search {
  29. flex: 1;
  30.  
  31. input#q {
  32. flex: 1;
  33. max-width: none;
  34. }
  35. }
  36. }
  37. }
  38.  
  39. & when (@ath-expand-user-menu = 1) {
  40. .header:not(.header--secondary) {
  41. height: calc(36px + 32px);
  42.  
  43. .header__link-user__dropdown-arrow {
  44. display: none;
  45. }
  46.  
  47. .header__dropdown {
  48. .dropdown__content {
  49. display: flex;
  50. inset: unset;
  51. right: 0;
  52.  
  53. a.header__link {
  54. line-height: 32px;
  55.  
  56. &:first-child {
  57. display: none;
  58. }
  59. }
  60. }
  61. }
  62. }
  63. }
  64.  
  65. & when (@ath-collapse-news = 1) {
  66. .flash--site-notice {
  67. position: absolute;
  68. inset: calc(36px + 32px * @ath-expand-user-menu) 0 auto 700px;
  69. width: auto;
  70. height: 32px;
  71. line-height: 32px;
  72. text-align: right;
  73. background: none;
  74. }
  75. }
  76.  
  77. & when (@ath-compact-footer = 1) {
  78. #footer {
  79. display: flex;
  80. flex-flow: row wrap;
  81. align-items: center;
  82. gap: 0 24px;
  83. padding: 4px 12px;
  84.  
  85. #footer_content {
  86. display: contents;
  87. }
  88.  
  89. .footercol {
  90. flex: 0;
  91. display: flex;
  92. flex-flow: row nowrap;
  93. align-items: center;
  94. gap: 4px 12px;
  95. margin: 0 !important;
  96. white-space: nowrap;
  97. }
  98.  
  99. #serving_info {
  100. flex: 0;
  101. white-space: nowrap;
  102. }
  103.  
  104. br {
  105. display: none;
  106. }
  107. }
  108. }
  109.  
  110. & when (@ath-thumbs-nospace = 1) {
  111. #content.layout--wide {
  112. margin: 0;
  113. padding: 6px 0 !important;
  114.  
  115. .layout--narrow,
  116. h1,
  117. .js-search-form,
  118. .block__content:has(.tag-list) {
  119. padding: 6px 6px 0 6px;
  120. margin: 0;
  121. }
  122. }
  123. .media-box {
  124. margin: 0 0;
  125. border: none;
  126. }
  127. .block__content,
  128. .block__tab {
  129. padding: 6px 0;
  130. }
  131. #activity-side {
  132. .block__content,
  133. .block__tab {
  134. padding: 6px 12px;
  135. }
  136. }
  137. }
  138.  
  139. & when (@ath-thumbs-fixed-size = 1) {
  140. .js-resizable-media-container {
  141. .media-box {
  142. width: auto !important;
  143.  
  144. .media-box__content--small {
  145. width: 150px + @ath-rating-thickness * 2 !important;
  146. height: 150px + @ath-rating-thickness * 2 !important;
  147. }
  148.  
  149. .media-box__content--large {
  150. width: 250px + @ath-rating-thickness * 2 !important;
  151. height: 250px + @ath-rating-thickness * 2 !important;
  152. }
  153. }
  154. }
  155. }
  156.  
  157. & when (@ath-rating-thickness > 0) {
  158. div.image-container.thumb {
  159. outline: solid @ath-rating-thickness #ddd;
  160. outline-offset: 0;
  161. }
  162. div.image-container.thumb[data-image-tag-aliases^="grimdark, "],
  163. div.image-container.thumb[data-image-tag-aliases*=", grimdark,"],
  164. div.image-container.thumb[data-image-tag-aliases$=", grimdark"] {
  165. outline-color: #888;
  166. }
  167. div.image-container.thumb[data-image-tag-aliases^="suggestive, "],
  168. div.image-container.thumb[data-image-tag-aliases*=", suggestive,"],
  169. div.image-container.thumb[data-image-tag-aliases$=", suggestive"] {
  170. outline-color: #99f;
  171. }
  172. div.image-container.thumb[data-image-tag-aliases^="questionable, "],
  173. div.image-container.thumb[data-image-tag-aliases*=", questionable,"],
  174. div.image-container.thumb[data-image-tag-aliases$=", questionable"] {
  175. outline-color: #99f;
  176. }
  177. div.image-container.thumb[data-image-tag-aliases^="explicit, "],
  178. div.image-container.thumb[data-image-tag-aliases*=", explicit,"],
  179. div.image-container.thumb[data-image-tag-aliases$=", explicit"] {
  180. outline-color: #f66;
  181. }
  182. }
  183.  
  184. & when (@ath-pagination = 1) {
  185. .block__header:has(.page__pagination) {
  186. .page__pagination {
  187. flex: 1;
  188.  
  189. .pagination.hide-mobile-t {
  190. display: flex;
  191.  
  192. .page-current {
  193. padding: 0 12px !important;
  194. font-weight: bold;
  195. display: flex;
  196.  
  197. &:first-child {
  198. flex: 1;
  199.  
  200. &::before {
  201. content: " ";
  202. margin-left: auto;
  203. flex: 1;
  204. }
  205. }
  206.  
  207. &:last-child {
  208. flex: 1;
  209.  
  210. &::after {
  211. content: " ";
  212. margin-right: auto;
  213. flex: 1;
  214. }
  215. }
  216. }
  217.  
  218. .js-prev {
  219. flex: 1;
  220. }
  221.  
  222. .js-next {
  223. flex: 1;
  224. text-align: right;
  225. }
  226. }
  227. }
  228.  
  229. .block__header__title,
  230. .flex__right {
  231. flex: 0;
  232. white-space: nowrap;
  233. overflow: initial;
  234. }
  235. }
  236.  
  237. & when (@ath-download = 1) {
  238. .image-metabar {
  239. justify-content: space-between;
  240. }
  241. }
  242.  
  243. & when (@ath-hide-hide = 1) {
  244. a[href*="hidden=1"],
  245. a.interaction--hide {
  246. display: none !important;
  247. }
  248. }
  249. }
  250. }