Advertisement
lightbeam24

Unfinished Kevlar theme for Hitchhiker

Oct 28th, 2023 (edited)
141
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 5.66 KB | None | 0 0
  1. /* ==UserStyle==
  2. @name Kevlar for Hitchhiker
  3. @namespace github.com/openstyles/stylus
  4. @version 1.0.1
  5. @description A new userstyle
  6. @author lightbeam24
  7. ==/UserStyle== */
  8.  
  9. @-moz-document domain("archive.org") {
  10. #body-container {
  11. background: rgb(250, 250, 250);
  12. }
  13. #yt-masthead-container {
  14. border-bottom: none;
  15. padding-bottom: 12px;
  16. padding-bottom: 3px;
  17. padding-top: 10px;
  18. box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  19. z-index: 10;
  20. }
  21. #yt-masthead .yt-masthead-logo-container {
  22. width: 210px;
  23. }
  24. #masthead-appbar-container {
  25. display: none;
  26. }
  27. #guide {
  28. z-index: 1;
  29. position: fixed;
  30. }
  31. .appbar-guide-menu-layout {
  32. margin-top: 56px;
  33. z-index: 1;
  34. position: fixed;
  35. background: rgb(245, 245, 245) !important;
  36. border-right: none !important;
  37. }
  38. #guide-container {
  39. width: 240px;
  40. padding: 13px 0px;
  41. }
  42. #appbar-guide-menu {
  43. width: 240px;
  44. height: auto;
  45. max-height: 100%;
  46. }
  47. .guide-item,
  48. .guide-view-more {
  49. height: 40px;
  50. font-size: 14px;
  51. }
  52. #guide-container .guide-item.guide-item-selected {
  53. background-color: #ddd;
  54. color: #000;
  55. text-shadow: none;
  56. }
  57. .guide-flyout-trigger.on-hover,
  58. .guide-item:hover,
  59. .guide-item:hover .yt-deemphasized-text,
  60. .guide-collapsible-item .yt-uix-expander-head:hover {
  61. background: #ddd;
  62. color: #222;
  63. }
  64. .guide-item .thumb {
  65. margin-left: 16px;
  66. }
  67. .guide-item .display-name {
  68. margin-left: 16px;
  69. }
  70. .guide-pinned.show-guide .guide-pinning-enabled #page,
  71. .guide-pinned.show-guide .guide-pinning-enabled #appbar-content {
  72. padding-left: 240px;
  73. }
  74. .content-snap-width-3 .flex-width-enabled.flex-width-enabled-snap .content-alignment {
  75. width: 1506px;
  76. }
  77. .yt-card {
  78. background: transparent;
  79. box-shadow: none;
  80. }
  81. #browse-items-primary .item-section > li > .yt-lockup-tile,
  82. .branded-page-box, .branded-page-box-padding {
  83. padding: 20px;
  84. border-bottom: none !important;
  85. }
  86. .branded-page-module-title {
  87. padding-bottom: 20px;
  88. font-size: 20px;
  89. }
  90. .yt-shelf-grid-item {
  91. width: 360px;
  92. margin-left: 0px;
  93. }
  94. .yt-shelf-grid-item .yt-thumb-simple img {
  95. width: 360px;
  96. height: 202px;
  97. }
  98. .yt-lockup-grid .yt-lockup-thumbnail {
  99. margin-bottom: 12px;
  100. }
  101. .yt-lockup-grid .yt-lockup-title {
  102. font-size: 16px;
  103. max-width: 360px;
  104. margin-bottom: 4px;
  105. }
  106. .yt-lockup-title a,
  107. .yt-lockup:hover a,
  108. .yt-lockup:hover .yt-lockup-meta a,
  109. .yt-lockup:hover .yt-lockup-description a {
  110. color: #111;
  111. text-decoration: none !important;
  112. }
  113. .yt-lockup.yt-lockup-grid {
  114. font-size: 14px !important;
  115. }
  116. .yt-uix-button-primary,
  117. .yt-uix-button-primary[disabled],
  118. .yt-uix-button-primary[disabled]:hover,
  119. .yt-uix-button-primary[disabled]:active,
  120. .yt-uix-button-primary[disabled]:focus {
  121. border-color: transparent;
  122. background: none !important;
  123. color: #f00;
  124. text-transform: uppercase;
  125. font-size: 14px;
  126. box-shadow: none;
  127. }
  128. .yt-uix-button:not(#search-btn):not(#appbar-guide-button):not(#upload-btn):not(.yt-uix-subscription-button):not(.yt-uix-button-has-icon):not(.yt-uix-button-expander) {
  129. height: 40px;
  130. padding: 0 16px;
  131. border-radius: 2px;
  132. text-transform: uppercase;
  133. background: #f0f0f0;
  134. border: none;
  135. font-size: 14px;
  136. }
  137. .yt-uix-button:not(#search-btn):not(#appbar-guide-button):not(#upload-btn):not(.yt-uix-subscription-button):not(.yt-uix-button-has-icon):not(.yt-uix-button-expander):not([role="link"]) {
  138. box-shadow: 0 2px 2px rgba(0,0,0,0.25);
  139. }
  140. #yt-masthead-signin {
  141. margin-top: 0;
  142. margin-bottom: 3px;
  143. }
  144. .yt-user-photo .yt-thumb,
  145. .yt-user-photo img {
  146. border-radius: 50%;
  147. }
  148. /* watch */
  149. #eow-title {
  150. font-size: 18px;
  151. }
  152. #watch-header {
  153. display: flex;
  154. flex-direction: column;
  155. padding: 5px 0 0 0;
  156. }
  157. #watch7-headline {
  158. order: 1;
  159. }
  160. #watch7-user-header {
  161. order: 3;
  162. margin-top: 5px;
  163. }
  164. #watch8-action-buttons {
  165. order: 2;
  166. display: flex;
  167. flex-direction: row-reverse;
  168. border-top: none;
  169. border-bottom: 1px solid #d1d1d1;
  170. padding-bottom: 3px;
  171. }
  172. #watch7-views-info {
  173. bottom: 0;
  174. left: unset;
  175. right: unset;
  176. position: static;
  177. }
  178. .video-extras-sparkbars {
  179. min-width: 160px;
  180. margin-left: auto;
  181. margin-bottom: -32px;
  182. margin-top: 30px;
  183. }
  184. .watch-view-count {
  185. position: absolute;
  186. left: 0;
  187. bottom: 0;
  188. font-size: 14px;
  189. }
  190. #watch8-sentiment-actions {
  191. margin-right: 16px;
  192. }
  193. .yt-uix-button-has-icon {
  194. text-transform: uppercase !important;
  195. }
  196. #watch7-subscription-container {
  197. right: 0;
  198. position: absolute;
  199. margin-top: -18px;
  200. }
  201. .yt-uix-button-subscribe-branded::before {
  202. display: none;
  203. }
  204. .yt-uix-button-subscription-container {
  205. background: #f00;
  206. color: #fff !important;
  207. border-radius: 2px;
  208. }
  209. .yt-uix-subscription-button {
  210. padding: 0 14px !important;
  211. padding-right: 50px !important;
  212. z-index: 5;
  213. height: 36px !important;
  214. position: relative;
  215. }
  216. .yt-uix-subscription-button,
  217. .yt-subscriber-count {
  218. background: none !important;
  219. box-shadow: none;
  220. border: none !important;
  221. }
  222. .yt-uix-subscription-button span,
  223. .yt-subscriber-count {
  224. text-transform: uppercase !important;
  225. color: #fff !important;
  226. font-size: 14px;
  227. font-weight: 500;
  228. }
  229. .yt-subscriber-count {
  230. opacity: 0.8;
  231. position: absolute;
  232. margin-top: 6px;
  233. margin-left: -48px;
  234. background: #f00;
  235. z-index: 4;
  236. }
  237. #watch-description {
  238. overflow: visible;
  239. margin-top: -40px;
  240. margin-left: 42px !important;
  241. }
  242. #watch-uploader-info {
  243. position: absolute;
  244. margin-top: -32px;
  245. left: 3px;
  246. color: #888;
  247. font-weight: 300 !important;
  248. }
  249. .yt-uix-button-expander {
  250. width: fit-content !important;
  251. border: none !important;
  252. font-size: 13px;
  253. letter-spacing: 0 !important;
  254. margin-left: 32px !important;
  255. color: #666 !important;
  256. }
  257. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement