Advertisement
Vaellyth

SK CSS

May 18th, 2017
251
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 5.18 KB | None | 0 0
  1. /* Custom profile for Shadow Kermits by Vii */
  2.  
  3. /* Hidden modules */
  4.  
  5. #friendlist, #likes, #dislikes, #hobbies, #logo, #content:before, #content:after { display: none; }
  6.  
  7. /* Scrollbars */
  8.  
  9. ::-webkit-scrollbar {
  10. width: 5px;
  11. }
  12.  
  13. ::-webkit-scrollbar-track {
  14. background: #333;
  15. }
  16.  
  17. ::-webkit-scrollbar-thumb {
  18. background: #111;
  19. }
  20.  
  21. /* Text styles */
  22.  
  23. h2 {
  24. font-size: 18px;
  25. }
  26.  
  27. a {
  28. transition: all .5s linear;
  29. color: #111;
  30. }
  31.  
  32. a:hover {
  33. color: #A3D963;
  34. text-decoration: none;
  35. text-shadow: 0 0 1px;
  36. }
  37.  
  38. a.delete.small {
  39. float: right;
  40. font-style: italic;
  41. font-size: 9px;
  42. font-variant: small-caps;
  43. }
  44.  
  45. /* Navigation bar */
  46.  
  47. ul.navigation {
  48. position: absolute;
  49. margin: auto;
  50. width: 400px;
  51. left: 0px;
  52. right: 0px;
  53. border-radius: 0;
  54. box-sizing: border-box;
  55. border: 1px solid #111;
  56. box-shadow: 0 0 0 1px #333;
  57. background: transparent;
  58. top: 470px;
  59. }
  60.  
  61. ul.navigation li {
  62. width: 25%;
  63. background: #333;
  64. }
  65.  
  66. ul.navigation li a {
  67. color: #111;
  68. text-transform: lowercase;
  69. }
  70.  
  71. ul.navigation li a:hover {
  72. background: #A3D963;
  73. color: #111;
  74. }
  75.  
  76. body {
  77. background: #111;
  78. }
  79.  
  80. #wrap {
  81. width: 400px;
  82. box-sizing: border-box;
  83. padding: 12px;
  84. background: #333;
  85. border-radius: 0;
  86. border: 1px solid #111;
  87. box-shadow: 0 0 0px 1px #333;
  88. position: relative;
  89. top: 50px;
  90. height: 325px;
  91. }
  92.  
  93. #sidebar {
  94. width: 100%;
  95. text-align: center;
  96. }
  97.  
  98. #sidebar img {
  99. margin: auto auto 10px auto;
  100. float: left;
  101. }
  102.  
  103. #sidebar h2 {
  104. position: fixed;
  105. width: 100%;
  106. left: 0px;
  107. height: 100px;
  108. background: url(http://i.imgur.com/F2CvCE4.png) center no-repeat;
  109. color: transparent;
  110. top: 70px;
  111. }
  112.  
  113. #actions {
  114. float: right;
  115. width: 180px;
  116. margin: auto auto 10px auto;
  117. box-sizing: border-box;
  118. padding: 5px;
  119. position: relative;
  120. top: 159px;
  121. background: #111;
  122. border: 1px solid #333;
  123. box-shadow: 0 0 0 1px #111;
  124. left: -2px;
  125. color: #111;
  126. text-transform: lowercase;
  127. }
  128.  
  129. #actions li {
  130. width: 100%;
  131. margin: 10px auto;
  132. background: #333;
  133. box-sizing: border-box;
  134. border: 1px solid #111;
  135. box-shadow: 0 0 0 1px #333;
  136. }
  137.  
  138. #view-wishlist {
  139. display: none;
  140. }
  141.  
  142. #content {
  143. width: 100%;
  144. box-sizing: border-box;
  145. padding: 0;
  146. border-radius: 0;
  147. border-color: #333;
  148. box-shadow: 0 0 0 1px #111;
  149. background: #111;
  150. z-index: 3;
  151. }
  152.  
  153. #bio {
  154. position: absolute;
  155. top: -281px;
  156. height: 152px;
  157. background: #111;
  158. box-sizing: border-box;
  159. width: 180px;
  160. left: 190px;
  161. transition: all 1s linear;
  162. color: transparent;
  163. border: 1px solid #333;
  164. box-shadow: 0 0 0 1px #111;
  165. font-family: Arial;
  166. font-size: 11px;
  167. padding: 3px;
  168. z-index: 0;
  169. }
  170.  
  171. #bio:hover {
  172. height: 273px;
  173. color: #333;
  174. }
  175.  
  176. #bio:hover h2 {
  177. top: 0px;
  178. color: #A3D963;
  179. }
  180.  
  181. #bio h2 {
  182. color: #333;
  183. text-transform: lowercase;
  184. font-weight: normal;
  185. text-align: center;
  186. position: relative;
  187. top: 60px;
  188. transition: all .5s linear;
  189. }
  190.  
  191. #comments {
  192. width: 100%;
  193. transition: all .5s linear;
  194. box-sizing: border-box;
  195. padding: 0;
  196. border: 1px solid #111;
  197. box-shadow: 0 0 0 1px #111;
  198. color: transparent;
  199. z-index: 13;
  200. height: 310px;
  201. }
  202.  
  203. #comments:hover {
  204. transform: translateY(-281px);
  205. background: #111;
  206. border-color: #333;
  207. overflow-y: auto;
  208. }
  209.  
  210. #comments:hover h2 {
  211. color: #A3D963;
  212. }
  213.  
  214. #comments h2 {
  215. text-align: center;
  216. margin: 0 auto auto auto;
  217. color: #333;
  218. text-transform: lowercase;
  219. font-weight: normal;
  220. transition: all .5s linear;
  221. }
  222.  
  223. #comments img {
  224. transform: scale(0.5) rotate(-45deg);
  225. mix-blend-mode: soft-light;
  226. border-radius: 14px;
  227. border: 1px solid #333;
  228. box-shadow: 0 0 0 1px #111;
  229. transition: all .5s linear;
  230. }
  231.  
  232. #comments img:hover {
  233. mix-blend-mode: hard-light;
  234. }
  235.  
  236. #comment_list {
  237. box-sizing: border-box;
  238. padding: 10px;
  239. }
  240.  
  241. #comment_list li {
  242. background: #333;
  243. margin-bottom: 5px;
  244. box-sizing: border-box;
  245. border: 1px solid #111;
  246. box-shadow: 0 0 0 1px #333;
  247. padding: 5px;
  248. }
  249.  
  250. #comment_list li p {
  251. color: #111;
  252. font-family: Arial;
  253. }
  254.  
  255. #comment_list li a {
  256. color: #111 !important;
  257. transition: all .5s linear;
  258. }
  259.  
  260. #comment_list li a:hover {
  261. color: #A3D963 !important;
  262. }
  263.  
  264. #comment_list li small {
  265. float: left;
  266. text-align: right;
  267. width: 100%;
  268. visibility: hidden;
  269. }
  270.  
  271. #comment_list li small > small {
  272. visibility: visible;
  273. margin-bottom: 0;
  274. }
  275.  
  276. #comments form {
  277. width: 100%;
  278. padding: 0;
  279. margin: auto;
  280. text-align: center;
  281. }
  282.  
  283. textarea {
  284. width: 92%;
  285. margin: auto;
  286. box-sizing: border-box;
  287. background: #333;
  288. border: 1px solid #111;
  289. box-shadow: 0 0 0px 1px #333;
  290. padding: 4px;
  291. color: #A3D963;
  292. font-family: Arial;
  293. text-shadow: 0 0 1px;
  294. }
  295.  
  296. #load-more {
  297. display: block !important;
  298. margin: 0 auto;
  299. position: relative;
  300. top: -7px;
  301. }
  302.  
  303. #comment-button {
  304. margin: 5px auto 10px auto;
  305. position: relative;
  306. left: 39%;
  307. }
  308.  
  309. #comment-button, #load-more {
  310. font-size: 11px;
  311. padding: 2px;
  312. background: #A3D963;
  313. border: 1px solid #111;
  314. box-shadow: 0 0 0 1px #A3D963;
  315. color: #111;
  316. transition: all .5s linear;
  317. }
  318.  
  319. #comment-button:hover, #load-more:hover {
  320. background: #333;
  321. box-shadow: 0 0 0 1px #333;
  322. color: #A3D963;
  323. text-shadow: 0 0 1px;
  324. }
  325.  
  326. /* Floating Kermit */
  327.  
  328. #generic_5 {
  329. background: url(http://i.imgur.com/HQlXKWH.png);
  330. background-size: cover;
  331. width: 180px;
  332. height: 152px;
  333. position: absolute;
  334. margin: auto;
  335. top: -12px;
  336. left: 190px;
  337. right: 0px;
  338. z-index: -1;
  339. }
  340.  
  341. /* End Profile Code */
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement