Secret Llama responsive + customisations

Secret Llama website is more suitable for wide screens.

  1. /* ==UserStyle==
  2. @name Secret Llama responsive + customisations
  3. @version 1.0.0
  4. @description Secret Llama website is more suitable for wide screens.
  5. @author BreatFR (https://breat.fr)
  6. @namespace https://gitlab.com/breatfr
  7. @homepageURL https://gitlab.com/breatfr/secret-llama
  8. @supportURL https://discord.gg/Q8KSHzdBxs
  9. @license AGPL-3.0-or-later; https://www.gnu.org/licenses/agpl-3.0.txt
  10. @preprocessor stylus
  11.  
  12. @var color backgroundcolor "Background color" #1e1e1e
  13. @var color fontcolor "Font color" #cbcbcb
  14. @var text fontsize "Font size" 1.2rem
  15. @var checkbox hidescrollbars "Hide scrollbars" 1
  16. @var checkbox widemode "Wide mode" 1
  17. ==/UserStyle== */
  18.  
  19. /* === Credits ===
  20. Website https://breat.fr
  21. facebook https://www.facebook.com/breatfroff
  22. mastodon https://mastodon.social/@breat_fr
  23. telegram https://t.me/breatfr
  24. vk https://vk.com/breatfroff
  25. X (twitter) https://x.com/breatfroff
  26. === Credits === */
  27.  
  28. @-moz-document domain("secretllama.com") {
  29. /* ===================================================================================================================================
  30. Version
  31. =================================================================================================================================== */
  32. :root {
  33. --themeversion: 'Theme v1.0.0';
  34. --author: 'by BreatFR';
  35. --link: ' gitlab.com/breatfr/secret-llama ';
  36. }
  37.  
  38. .absolute.top-0.left-0.p-4.flex.items-center.gap-2::after {
  39. background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
  40. background-clip: text;
  41. -webkit-background-clip: text;
  42. color: transparent;
  43. content: var(--themeversion) ' · ' var(--author) '\A' url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBoZWlnaHQ9IjIwIiB3aWR0aD0iMjAiIHN0eWxlPSJ0cmFuc2Zvcm06IHNjYWxlWSgtMSk7Ij48IS0tIUZvbnQgQXdlc29tZSBGcmVlIDYuNS4xIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlL2ZyZWUgQ29weXJpZ2h0IDIwMjQgRm9udGljb25zLCBJbmMuLS0+PHBhdGggZmlsbD0iI2NiY2JjYiIgZD0iTTMwNyAzNC44Yy0xMS41IDUuMS0xOSAxNi42LTE5IDI5LjJ2NjRIMTc2Qzc4LjggMTI4IDAgMjA2LjggMCAzMDRDMCA0MTcuMyA4MS41IDQ2Ny45IDEwMC4yIDQ3OC4xYzIuNSAxLjQgNS4zIDEuOSA4LjEgMS45YzEwLjkgMCAxOS43LTguOSAxOS43LTE5LjdjMC03LjUtNC4zLTE0LjQtOS44LTE5LjVDMTA4LjggNDMxLjkgOTYgNDE0LjQgOTYgMzg0YzAtNTMgNDMtOTYgOTYtOTZoOTZ2NjRjMCAxMi42IDcuNCAyNC4xIDE5IDI5LjJzMjUgMyAzNC40LTUuNGwxNjAtMTQ0YzYuNy02LjEgMTAuNi0xNC43IDEwLjYtMjMuOHMtMy44LTE3LjctMTAuNi0yMy44bC0xNjAtMTQ0Yy05LjQtOC41LTIyLjktMTAuNi0zNC40LTUuNHoiLz48L3N2Zz4=") var(--link) url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBoZWlnaHQ9IjIwIiB3aWR0aD0iMjAiIHRyYW5zZm9ybT0icm90YXRlKDE4MCkiPjwhLS0hRm9udCBBd2Vzb21lIEZyZWUgNi41LjEgYnkgQGZvbnRhd2Vzb21lIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20gTGljZW5zZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tL2xpY2Vuc2UvZnJlZSBDb3B5cmlnaHQgMjAyNCBGb250aWNvbnMsIEluYy4tLT48cGF0aCBmaWxsPSIjY2JjYmNiIiBkPSJNMzA3IDM0LjhjLTExLjUgNS4xLTE5IDE2LjYtMTkgMjkuMnY2NEgxNzZDNzguOCAxMjggMCAyMDYuOCAwIDMwNEMwIDQxNy4zIDgxLjUgNDY3LjkgMTAwLjIgNDc4LjFjMi41IDEuNCA1LjMgMS45IDguMSAxLjljMTAuOSAwIDE5LjctOC45IDE5LjctMTkuN2MwLTcuNS00LjMtMTQuNC05LjgtMTkuNUMxMDguOCA0MzEuOSA5NiA0MTQuNCA5NiAzODRjMC01MyA0My05NiA5Ni05Nmg5NnY2NGMwIDEyLjYgNy40IDI0LjEgMTkgMjkuMnMyNSAzIDM0LjQtNS40bDE2MC0xNDRjNi43LTYuMSAxMC42LTE0LjcgMTAuNi0yMy44cy0zLjgtMTcuNy0xMC42LTIzLjhsLTE2MC0xNDRjLTkuNC04LjUtMjIuOS0xMC42LTM0LjQtNS40eiIvPjwvc3ZnPg==") ;
  44. display: flex;
  45. flex-direction: column;
  46. font-size: 18px;
  47. left: 294%;
  48. position: absolute;
  49. text-align: center;
  50. width: max-content;
  51. white-space: pre-line;
  52. }
  53.  
  54. /* ===================================================================================================================================
  55. Hide scrollbars
  56. =================================================================================================================================== */
  57. if hidescrollbars {
  58. :root ::-webkit-scrollbar {
  59. scrollbar-width: none !important;
  60. -ms-overflow-style: none !important;
  61. -moz-overflow-style: none !important;
  62. -webkit-overflow-style: none !important;
  63. width: 0px !important;
  64. }
  65. ::-webkit-scrollbar {
  66. display: none !important;
  67. width: 0px !important;
  68. }
  69. }
  70. /* ===================================================================================================================================
  71. Wide mode
  72. =================================================================================================================================== */
  73. if widemode {
  74. .mt-2 {
  75. max-width: 100%;
  76. }
  77. .max-w-3xl {
  78. max-width: 100%;
  79. padding-top: 35px;
  80. }
  81. .absolute.top-0.left-0.p-4.flex.items-center.gap-2 {
  82. background: backgroundcolor;
  83. width: 100%;
  84. }
  85. .absolute.top-0.left-0.p-4.flex.items-center.gap-2::after {
  86. background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
  87. background-clip: text;
  88. -webkit-background-clip: text;
  89. color: transparent;
  90. content: var(--themeversion) ' · ' var(--author) '\A' url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBoZWlnaHQ9IjIwIiB3aWR0aD0iMjAiIHN0eWxlPSJ0cmFuc2Zvcm06IHNjYWxlWSgtMSk7Ij48IS0tIUZvbnQgQXdlc29tZSBGcmVlIDYuNS4xIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlL2ZyZWUgQ29weXJpZ2h0IDIwMjQgRm9udGljb25zLCBJbmMuLS0+PHBhdGggZmlsbD0iI2NiY2JjYiIgZD0iTTMwNyAzNC44Yy0xMS41IDUuMS0xOSAxNi42LTE5IDI5LjJ2NjRIMTc2Qzc4LjggMTI4IDAgMjA2LjggMCAzMDRDMCA0MTcuMyA4MS41IDQ2Ny45IDEwMC4yIDQ3OC4xYzIuNSAxLjQgNS4zIDEuOSA4LjEgMS45YzEwLjkgMCAxOS43LTguOSAxOS43LTE5LjdjMC03LjUtNC4zLTE0LjQtOS44LTE5LjVDMTA4LjggNDMxLjkgOTYgNDE0LjQgOTYgMzg0YzAtNTMgNDMtOTYgOTYtOTZoOTZ2NjRjMCAxMi42IDcuNCAyNC4xIDE5IDI5LjJzMjUgMyAzNC40LTUuNGwxNjAtMTQ0YzYuNy02LjEgMTAuNi0xNC43IDEwLjYtMjMuOHMtMy44LTE3LjctMTAuNi0yMy44bC0xNjAtMTQ0Yy05LjQtOC41LTIyLjktMTAuNi0zNC40LTUuNHoiLz48L3N2Zz4=") var(--link) url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBoZWlnaHQ9IjIwIiB3aWR0aD0iMjAiIHRyYW5zZm9ybT0icm90YXRlKDE4MCkiPjwhLS0hRm9udCBBd2Vzb21lIEZyZWUgNi41LjEgYnkgQGZvbnRhd2Vzb21lIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20gTGljZW5zZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tL2xpY2Vuc2UvZnJlZSBDb3B5cmlnaHQgMjAyNCBGb250aWNvbnMsIEluYy4tLT48cGF0aCBmaWxsPSIjY2JjYmNiIiBkPSJNMzA3IDM0LjhjLTExLjUgNS4xLTE5IDE2LjYtMTkgMjkuMnY2NEgxNzZDNzguOCAxMjggMCAyMDYuOCAwIDMwNEMwIDQxNy4zIDgxLjUgNDY3LjkgMTAwLjIgNDc4LjFjMi41IDEuNCA1LjMgMS45IDguMSAxLjljMTAuOSAwIDE5LjctOC45IDE5LjctMTkuN2MwLTcuNS00LjMtMTQuNC05LjgtMTkuNUMxMDguOCA0MzEuOSA5NiA0MTQuNCA5NiAzODRjMC01MyA0My05NiA5Ni05Nmg5NnY2NGMwIDEyLjYgNy40IDI0LjEgMTkgMjkuMnMyNSAzIDM0LjQtNS40bDE2MC0xNDRjNi43LTYuMSAxMC42LTE0LjcgMTAuNi0yMy44cy0zLjgtMTcuNy0xMC42LTIzLjhsLTE2MC0xNDRjLTkuNC04LjUtMjIuOS0xMC42LTM0LjQtNS40eiIvPjwvc3ZnPg==") ;
  91. display: flex;
  92. flex-direction: column;
  93. font-size: 18px;
  94. left: 45%;
  95. position: absolute;
  96. text-align: center;
  97. width: max-content;
  98. white-space: pre-line;
  99. }
  100. }
  101. /* ===================================================================================================================================
  102. Custom colors
  103. =================================================================================================================================== */
  104. body,
  105. .p-2.text-xs.text-center.font-bold,
  106. .absolute.top-0.left-0.p-4.flex.items-center.gap-2 > div:nth-child(1) > button {
  107. background: backgroundcolor;
  108. color: fontcolor;
  109. }
  110. ::placeholder,
  111. h1,
  112. h2,
  113. h3,
  114. h4,
  115. h5,
  116. h6,
  117. input,
  118. li::marker,
  119. p,
  120. .text-base,
  121. .text-gray-400,
  122. .text-gray-700,
  123. .text-gray-800 {
  124. color: fontcolor !important;
  125. }
  126. a {
  127. color: rgb(0, 149, 246) !important;
  128. }
  129. /* ===================================================================================================================================
  130. Custom font size
  131. =================================================================================================================================== */
  132. h2,
  133. input,
  134. li,
  135. p,
  136. .font-bold {
  137. font-size: fontsize !important;
  138. }
  139. }