API tools faq
paste
Guest User

Untitled

a guest
Jun 12th, 2023
130
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.35 KB | None | 0 0
raw download clone embed print report
  1. /* ==UserStyle==
  2. @name kbin-it theme :D
  3. @homepageURL https://codeberg.org/blobcat/userstyles
  4. @supportURL https://codeberg.org/blobcat/userstyles/issues
  5. @version 0.0.6
  6. @description Crappy unfinished kbin theme that makes its layout closer to Reddit, may have issues with light themes and mobile
  7. @author blobcat
  8. @namespace blobcat
  9.  
  10. -------------------------------------------------------------------------------------------------------------------------
  11. -------- IF YOU ARE ON A DIFFERENT KBIN INSTANCE THAN THE 3 BELOW, PLEASE ADD YOURS TO 2 CODE SECTIONS BELOW!!!! --------
  12. -------- IN THE 2ND SECTION JUST DUPLICATE ONE OF THE URLS AND REPLACE DOMAIN NAME FROM "kbin.social" TO YOUR --------
  13. -------- INSTANCE IF YOU DON'T KNOW WHAT REGEX IS AND HOW TO USE IT!!! --------
  14. -------------------------------------------------------------------------------------------------------------------------
  15. ==/UserStyle== */
  16. @-moz-document domain("kbin.social"), domain("karab.in"), domain("fedia.io") {
  17. #header {
  18. border-bottom: var(--kbin-section-border);
  19. }
  20. #header > .kbin-container {
  21. max-width: 100%;
  22. }
  23. #middle > .kbin-container {
  24. margin-top: 1.5rem;
  25. }
  26.  
  27. :root {
  28. --ltextcol: #010101;
  29. --lbgcol: #fefefe;
  30. --dtextcol: #ffffff;
  31. --dbgcol: #313338;
  32. }
  33.  
  34. .options {
  35. align-items: center;
  36. border: var(--kbin-section-border);
  37. border-radius: 4px;
  38. padding: 5px 12px;
  39. height: auto;
  40. }
  41. .entry {
  42. padding: 1px 0px;
  43. }
  44. .comment {
  45. grid-gap: 0.0rem;
  46. padding: 0rem 0rem;
  47. }
  48. .options > * a {
  49. border: none !important;
  50. border-radius: 20px;
  51. margin-right: 8px;
  52. }
  53. .options > * a:hover, .options > * a.active {
  54. background-color: rgb(0 0 0 / 10%);
  55. }
  56. .options > * a.active:hover {
  57. background-color: rgb(0 0 0 / 15%);
  58. }
  59. #sidebar .section, article.entry {
  60. border: var(--kbin-section-border);
  61. border-radius: 4px;
  62. }
  63. .post {
  64. border-radius: 4px;
  65. }
  66. .vote button {
  67. background: transparent;
  68. border: var(--kbin-section-border);
  69. border-radius: 4px;
  70. }
  71. .vote .active.vote__up button {
  72. color: #64c597;
  73. }
  74. .comment-add .dropdown__menu, .comment-edit .dropdown__menu, .page-entry-create .dropdown__menu, .post-add .dropdown__menu, .post-edit .dropdown__menu {
  75. top: -17.7rem;
  76. }
  77. .dropdown__menu {
  78. line-height: 1.5;
  79. }
  80. .btn__secondary, .btn, markdown-toolbar > * {
  81. cursor: pointer;
  82. }
  83. #sidebar li:last-child, #sidebar figure:last-child {
  84. border: 0 !important;
  85. }
  86. #sidebar .section {
  87. padding: .5rem .5rem 0 .5rem;
  88. }
  89. .sidebar-options {
  90. margin-bottom: .5rem;
  91. }
  92. .dropdown__menu {
  93. border-radius: 4px;
  94. }
  95. #header .login:after {
  96. content: ' ';
  97. display: inline-block;
  98. width: 18px;
  99. height: 16px;
  100. background-image: url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/expand_more/wght300/24px.svg);
  101. margin-right: 4px;
  102. }
  103. body.theme--solarized-dark #header .login:after {
  104. filter: invert(59%) sepia(5%) saturate(661%) hue-rotate(138deg) brightness(95%) contrast(96%);
  105. }
  106. body.theme--solarized-light #header .login:after {
  107. filter: invert(44%) sepia(7%) saturate(958%) hue-rotate(148deg) brightness(91%) contrast(93%);
  108. }
  109. body.theme--dark #header .login:after, body.theme--light #header .login:after, body.theme--kbin #header .login:after {
  110. filter: invert(100%);
  111. }
  112. #header menu {
  113. margin-right: 8px;
  114. }
  115. #header menu .dropdown__menu {
  116. left: -0.75rem;
  117. }
  118. .options--top .options__main li a {
  119. display: flex;
  120. padding-left: 2.5rem;
  121. }
  122. .options--top .options__main li a:before {
  123. content: " ";
  124. display: inline-block;
  125. width: 32px;
  126. height: 32px;
  127. position: absolute;
  128. margin-left: -2rem;
  129. margin-top: -0.2rem;
  130. }
  131. .theme--dark {
  132. --kbin-bg: var(--dbgcol);
  133. --kbin-selection-color: var(--dbgcol);
  134. --kbin-section-bg: var(--dbgcol);
  135. --kbin-link-color: var(--dtextcol);
  136. --kbin-section-border: var(--dbgcol);
  137. --kbin-text-color: var(--dtextcol);
  138. }
  139. .theme--light {
  140. --kbin-bg: var(--lbgcol);
  141. --kbin-selection-color: var(--lbgcol);
  142. --kbin-section-bg: var(--lbgcol);
  143. --kbin-link-color: var(--ltextcol);
  144. --kbin-section-border: var(--lbgcol);
  145. --kbin-text-color: var(--ltextcol);
  146. }
  147. .theme--dark .options--top .options__main li a:before, .theme--kbin .options--top .options__main li a:before, .theme--light .options--top .options__main li a:before {
  148. filter: invert(100%) sepia(9%) saturate(217%) hue-rotate(171deg) brightness(105%) contrast(91%);
  149. }
  150. .theme--light .options--top .options__main li:hover a:before, .theme--light .options--top .options__main li a.active:before {
  151. filter: invert(22%) sepia(17%) saturate(1177%) hue-rotate(170deg) brightness(98%) contrast(85%);
  152. }
  153. .theme--solarized-light .options__main li a:before {
  154. filter: invert(43%) sepia(6%) saturate(1240%) hue-rotate(148deg) brightness(91%) contrast(87%);
  155. }
  156. .theme--solarized-light .options--top .options__main li:hover a:before, .theme--solarized-light .options--top .options__main li a.active:before {
  157. filter: invert(28%) sepia(26%) saturate(396%) hue-rotate(150deg) brightness(94%) contrast(85%);
  158. }
  159. .theme--solarized-dark .options--top .options__main li a:before {
  160. filter: invert(50%) sepia(7%) saturate(1061%) hue-rotate(150deg) brightness(90%) contrast(84%);
  161. }
  162. .theme--solarized-dark .options--top .options__main li:hover a:before, .theme--solarized-dark .options--top .options__main li a.active:before {
  163. filter: invert(100%);
  164. }
  165. .options--top .options__main li:nth-child(1) a:before {
  166. background-image: url(https://cdn.discordapp.com/attachments/918215375836033034/1117516946464854088/top.svg);
  167. }
  168. .options--top .options__main li:nth-child(2) a:before {
  169. background-image: url(https://cdn.discordapp.com/attachments/918215375836033034/1117516415847633056/hot.svg);
  170. }
  171. .options--top .options__main li:nth-child(3) a:before {
  172. background-image: url(https://cdn.discordapp.com/attachments/918215375836033034/1117519184331554856/new.svg);
  173. }
  174. .options--top .options__main li:nth-child(4) a:before {
  175. background-image: url(https://cdn.discordapp.com/attachments/918215375836033034/1117519585097289839/active.svg);
  176. }
  177. .options--top .options__main li:nth-child(5) a:before {
  178. background-image: url(https://cdn.discordapp.com/attachments/918215375836033034/1117519981601624176/commented.svg);
  179. }
  180. p code {
  181. padding: 4px 6px;
  182. font-size: .8em;
  183. white-space: normal;
  184. background: #272822;
  185. color: #f8f8f2;
  186. font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
  187. word-spacing: normal;
  188. word-break: break-all;
  189. word-wrap: normal;
  190. line-height: 1.5;
  191. -moz-tab-size: 4;
  192. -o-tab-size: 4;
  193. tab-size: 4;
  194. -webkit-hyphens: none;
  195. -moz-hyphens: none;
  196. -ms-hyphens: none;
  197. hyphens: none;
  198. }
  199. }
  200. @-moz-document regexp("^(?:http:\\/\\/|https:\\/\\/)?(?:kbin.social\\/)(?:\\/)?m\\b([-a-zA-Z0-9@:%_\\+.~#?&//=]*)"), regexp("^(?:http:\\/\\/|https:\\/\\/)?(?:karab.in\\/)(?:\\/)?m\\b([-a-zA-Z0-9@:%_\\+.~#?&//=]*)"), regexp("^(?:http:\\/\\/|https:\\/\\/)?(?:fedia.io\\/)(?:\\/)?m\\b([-a-zA-Z0-9@:%_\\+.~#?&//=]*)") {
  201. article.entry, .options:not(.options--top) {
  202. border: 0;
  203. margin-bottom: 0;
  204. }
  205. article.entry {
  206. border-radius: 4px 4px 0 0;
  207. order: 1;
  208. }
  209. .options:not(.options--top, .options-activity) {
  210. border-radius: 0;
  211. border-top: var(--kbin-section-border);
  212. }
  213. .options.options--top {
  214. padding: 0;
  215. }
  216. #content {
  217. display: grid;
  218. }
  219. #activity {
  220. order: 2;
  221. }
  222. .options {
  223. order: 4;
  224. z-index: 3;
  225. }
  226. #comment-add {
  227. order: 3;
  228. }
  229. #comments {
  230. order: 5;
  231. }
  232. .options:not(#activity) > .options__main:before {
  233. content: 'Sort by:';
  234. display: block;
  235. margin-right: 8px;
  236. }
  237. .sidebar-options {
  238. align-items: center;
  239. border: var(--kbin-section-border);
  240. background: var(--kbin-options-bg);
  241. border-radius: 4px;
  242. padding: 10px 12px;
  243. height: auto;
  244. }
  245. #comment-add {
  246. margin: 0;
  247. border: 0;
  248. padding-top: .5rem;
  249. }
  250. form[name="entry_comment"] > div {
  251. margin-bottom: 0;
  252. line-height: 0;
  253. }
  254. form[name="entry_comment"] {
  255. display: grid;
  256. grid-template-areas: "a a a a" "b b c c";
  257. border: var(--kbin-section-border);
  258. border-radius: 4px;
  259. }
  260. form[name="entry_comment"] > div {
  261. order: 1;
  262. grid-area: a;
  263. }
  264. form[name="entry_comment"] > div > textarea {
  265. border: 0;
  266. }
  267. form[name="entry_comment"] > markdown-toolbar {
  268. order: 2;
  269. width: fit-content;
  270. flex-direction: row;
  271. grid-area: b;
  272. }
  273. form[name="entry_comment"] > markdown-toolbar * {
  274. display: flex;
  275. align-items: center;
  276. }
  277. form[name="entry_comment"] > .row.actions {
  278. order: 3;
  279. flex-direction: row;
  280. grid-area: c;
  281. padding: .5rem;
  282. }
  283. form[name="entry_comment"] > .row.actions > ul > li > .btn {
  284. padding: 4px 20px 4px 20px;
  285. height: 100%;
  286. }
  287. #entry_comment_submit {
  288. padding: 4px 20px 4px 20px;
  289. border-radius: 20px;
  290. }
  291. #entry_comment_submit:hover {
  292. opacity: 0.8;
  293. }
  294. form[name="entry_comment"] > .row.actions select {
  295. padding: 4px 20px 4px 20px;
  296. height: 100%;
  297. }
  298. .section.comment figure {
  299. margin-left: 4px;
  300. }
  301. .section.comment {
  302. border-right: 0;
  303. border-top: 0;
  304. }
  305. .section.comment figure:before {
  306. /* content: ' '; */
  307. display: block;
  308. background-color: var(--newCommunityTheme-line);
  309. width: 2px;
  310. height: 75%;
  311. position: absolute;
  312. left: 4px;
  313. }
  314. #main {
  315. border: var(--kbin-section-border);
  316. padding: 0;
  317. border-radius: 4px;
  318. }
  319. #middle #main {
  320. padding: 0;
  321. height: fit-content;
  322. }
  323. .pagination {
  324. margin-bottom: 0;
  325. }
  326. #main > .options--top {
  327. align-items: center;
  328. border: var(--kbin-section-border);
  329. border-radius: 4px;
  330. padding: 10px 12px;
  331. height: auto;
  332. }
  333. .sidebar-options[data-controller="options"] {
  334. background: transparent;
  335. border: 0;
  336. padding: 0;
  337. }
  338. #sidebar > .sidebar-options > .options.options--top {
  339. align-items: center;
  340. border: var(--kbin-section-border);
  341. border-radius: 4px;
  342. padding: 10px 12px;
  343. height: auto;
  344. }
  345. }
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!