API tools faq
paste
Vaellyth

Wonderland CSS

Vaellyth
May 1st, 2018
176
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.40 KB | None | 0 0
raw download clone embed print report
  1. /* BEGIN BIO TEMPLATE - USE AS A TEMPLATE FOR YOUR "ABOUT ME" INFO IN SETTINGS > PROFILE SETTINGS (OPTIONAL) */
  2. [u][size=24]Title/Quote/Lyric Here[/size][/u]
  3. Your bio text here. Text Text Text Text Text Text
  4.  
  5. [url=link1here]Link 1[/url]
  6. [url=link2here]Link 2[/url]
  7. [url=link3here]Link 3[/url]
  8.  
  9. [i]some kind of text or something here[/i]
  10. [spoiler=spoiler name]
  11. some stuff in a spoiler
  12. [/spoiler]
  13.  
  14.  
  15.  
  16. /* BEGIN PROFILE CSS - PASTE THE FOLLOWING CODE INTO YOUR CUSTOM CSS FIELD IN SETTINGS > PROFILE SETTINGS */
  17. /* WONDERLAND css v1 by Vii, please do not copy, rip, or steal!
  18. + if you need help or have questions, do not be afraid to ask ~
  19. + argyle pattern image from DA */
  20.  
  21. /* latin */
  22. @font-face {
  23. font-family: Great Vibes;
  24. font-style: normal;
  25. font-weight: 400;
  26. src: url(https://fonts.gstatic.com/s/greatvibes/v5/RWmMoKWR9v4ksMfaWd_JN9XFiaQ.woff2);
  27. unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  28. }
  29.  
  30. @font-face {
  31. font-family: Indie Flower;
  32. font-style: normal;
  33. font-weight: 400;
  34. src: url(https://fonts.gstatic.com/s/indieflower/v9/m8JVjfNVeKWVnh3QMuKkFcZVaUuH.woff2);
  35. unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  36. }
  37.  
  38. body {
  39. background: rgb(255, 255, 255);
  40. background: -webkit-linear-gradient(rgb(255, 192, 209), rgb(167, 223, 255) 50%);
  41. }
  42.  
  43. #footer > .container, div.row:nth-child(7), .copyright, section.voltie_bio h3, section.voltie_comments ul li small { display: none; }
  44.  
  45. nav#navbar { background: rgb(167, 223, 255) !important; border-bottom: 1px solid rgb(0, 0, 0) !important; }
  46.  
  47. ul.nav.navbar-nav.navbar-right {
  48. width: 60%;
  49. }
  50.  
  51. ul.nav.navbar-nav.navbar-right li {
  52. width: calc(100%/8);
  53. }
  54.  
  55. ul.nav.navbar-nav.navbar-right li a {
  56. font-size: 10px;
  57. background: rgb(255, 255, 255);
  58. border: 1px solid rgb(255, 255, 255);
  59. text-align: center;
  60. text-shadow: none;
  61. transition: all 0.3s ease;
  62. }
  63.  
  64. li#home a, #shops a, #mail a, #settings a { color: rgb(255, 192, 209) !important; border-color: inherit; }
  65.  
  66. li#home a:hover, #shops a:hover, #mail a:hover, #settings a:hover { color: rgb(255, 255, 255) !important; background: rgb(255, 192, 209) !important; }
  67.  
  68. #forums a, #donate a, #signout a { background: rgb(255, 192, 209); color: rgb(255, 255, 255) !important; }
  69.  
  70. #forums a:hover, #donate a:hover, #signout a:hover { color: rgb(255, 192, 209) !important; background: rgb(255, 255, 255); border-color: inherit; }
  71.  
  72. ul.nav.navbar-nav.navbar-right li a:hover {
  73. text-shadow: none;
  74. }
  75.  
  76. #profile a {
  77. animation: you-are-here 1s linear alternate infinite;
  78. -webkit-animation: you-are-here 1s linear alternate infinite;
  79. color: rgb(255, 255, 255) !important;
  80. text-shadow: none !important;
  81. }
  82.  
  83. @keyframes you-are-here {
  84. 0%, 60% { background: rgb(255, 255, 255); }
  85. 20%, 80% { background: rgb(255, 192, 209); }
  86. 40%, 100% { background: rgb(167, 223, 255); }
  87. }
  88.  
  89. @-webkit-keyframes you-are-here {
  90. 0%, 60% { background: rgb(255, 255, 255); }
  91. 20%, 80% { background: rgb(255, 192, 209); }
  92. 40%, 100% { background: rgb(167, 223, 255); }
  93. }
  94.  
  95. #structure {
  96. width: 60%;
  97. margin: 40px 0 0 auto;
  98. border-left: 1px solid rgb(255, 255, 255);
  99. height: calc(100% + 125px);
  100. }
  101.  
  102. header.min {
  103. box-shadow: none !important;
  104. position: fixed;
  105. width: 60%;
  106. margin: 0 0 0 auto;
  107. border: none;
  108. height: 130px;
  109. }
  110.  
  111. header.min div.container { background: url(https://i.imgur.com/yVuSA1Y.gif) fixed; height: 100%; }
  112.  
  113. #header_stats {
  114. visibility: hidden;
  115. }
  116.  
  117. #user_card {
  118. visibility: visible;
  119. position: fixed !important;
  120. left: 16.5%;
  121. top: 25%;
  122. margin: auto;
  123. background: rgb(255, 255, 255) !important;
  124. border-color: rgb(167, 223, 255) !important;
  125. box-shadow: inset 0 0 5px 2px rgba(167, 223, 255, 0.75) !important;
  126. }
  127.  
  128. .edit { background: rgb(167, 223, 255) !important; }
  129.  
  130. @media only screen and (min-width:1400px) {
  131. #user_card { left: 17%; }
  132. }
  133.  
  134. #content.container {
  135. margin: 125px 0 0 auto;
  136. padding: 0;
  137. background: url(https://i.imgur.com/yVuSA1Y.gif) fixed;
  138. }
  139.  
  140. @media only screen and (min-width:1400px) {
  141. #content, #footer > div {
  142. width: 100%;
  143. margin: 0 auto;
  144. }
  145. }
  146.  
  147. .content_header { border: none; }
  148.  
  149. .content_header h1 {
  150. width: 100%;
  151. text-align: center;
  152. font: 38px Great Vibes;
  153. margin: 5px 0;
  154. }
  155.  
  156. .content_navigation {
  157. text-align: center;
  158. width: 100%;
  159. }
  160.  
  161. .content_navigation li {
  162. width: calc(25%);
  163. margin: 0 1em auto;
  164. padding: 0;
  165. display: inline-block;
  166. background: #FFF;
  167. }
  168.  
  169. .content_navigation li a { text-transform: lowercase; border-color: rgb(0, 0, 0); color: rgb(167, 223, 255); font-family: Indie Flower; }
  170.  
  171. .content_navigation li a:hover { color: rgb(255, 192, 209); }
  172.  
  173. #voltie.row {
  174.  
  175. }
  176.  
  177. #voltie.row div.col-md-3, #voltie.row div.col-md-6 {
  178. width: 100%;
  179. }
  180.  
  181. section, h2, h3, a {
  182. border-radius: 0 !important;
  183. }
  184.  
  185. section { background: rgb(255, 255, 255) !important; border-color: rgb(0, 0, 0) !important; border-left: none !important; border-right: none !important; }
  186.  
  187. h3 { font: 26px Indie Flower !important; }
  188.  
  189. .voltie_info {}
  190.  
  191. .voltie_actions a { color: rgb(255, 255, 255); font: 16px Indie Flower; transition: all 0.3s linear; }
  192.  
  193. .voltie_actions div:nth-child(1) a { background: rgb(255, 192, 209) !important; }
  194.  
  195. .voltie_actions div:nth-child(1) a:hover { background: rgb(167, 223, 255) !important; }
  196.  
  197. .voltie_actions div:nth-child(2) a { background: rgb(167, 223, 255) !important; }
  198.  
  199. .voltie_actions div:nth-child(2) a:hover { background: rgb(255, 192, 209) !important; }
  200.  
  201. .voltie_info h2 {
  202. background: rgb(167, 223, 255) !important;
  203. color: #FFF !important;
  204. }
  205.  
  206. .voltie_username {
  207. font: 40px Great Vibes;
  208. }
  209.  
  210. .voltie_pronouns {
  211. font: 16px Indie Flower !important;
  212. }
  213.  
  214. .offline-orb, .online-orb {
  215. border: none;
  216. padding: 15px;
  217. }
  218.  
  219. .online-orb { animation: online_orb 0.7s linear normal infinite; -webkit-animation: online_orb 0.7s linear normal infinite; }
  220.  
  221. .offline-orb { animation: offline_orb 2s ease normal infinite; -webkit-animation: offline_orb 2s ease normal infinite; }
  222.  
  223. @keyframes offline_orb {
  224. 0%, 20%, 40%, 60%, 90%, 100% { background: rgb(255, 192, 209); transform: translateY(0); }
  225. 80% { background: rgb(255, 255, 255); transform: translateY(-5px); }
  226. }
  227.  
  228. @-webkit-keyframes offline_orb {
  229. 0%, 20%, 40%, 60%, 90%, 100% { background: rgb(255, 192, 209); transform: translateY(0); }
  230. 80% { background: rgb(255, 255, 255); transform: translateY(-5px); }
  231. }
  232.  
  233. @keyframes online_orb {
  234. 0%, 100% { background: radial-gradient(rgb(255, 255, 255), rgb(255, 192, 209), rgb(167, 223, 255)); }
  235. 15% { background: radial-gradient(rgb(255, 255, 255) 20%, rgb(255, 192, 209)); }
  236. 30% { background: radial-gradient(rgb(167, 223, 255), rgb(255, 255, 255), rgb(255, 192, 209)); }
  237. 45% { background: radial-gradient(rgb(167, 223, 255) 20%, rgb(255, 255, 255)); }
  238. 60% { background: radial-gradient(rgb(255, 192, 209), rgb(167, 223, 255), rgb(255, 255, 255)); transform: translateY(-5px); }
  239. 75% { background: radial-gradient(rgb(255, 192, 209) 20%, rgb(167, 223, 255)); transform: translateY(0px); }
  240. 90% { background: radial-gradient(rgb(), rgb(), rgb()); }
  241. }
  242.  
  243. @-webkit-keyframes online_orb {
  244. 0%, 100% { background: radial-gradient(rgb(255, 255, 255), rgb(255, 192, 209), rgb(167, 223, 255)); }
  245. 15% { background: radial-gradient(rgb(255, 255, 255) 20%, rgb(255, 192, 209)); }
  246. 30% { background: radial-gradient(rgb(167, 223, 255), rgb(255, 255, 255), rgb(255, 192, 209)); }
  247. 45% { background: radial-gradient(rgb(167, 223, 255) 20%, rgb(255, 255, 255)); }
  248. 60% { background: radial-gradient(rgb(255, 192, 209), rgb(167, 223, 255), rgb(255, 255, 255)); transform: translateY(-5px); }
  249. 75% { background: radial-gradient(rgb(255, 192, 209) 20%, rgb(167, 223, 255)); transform: translateY(0px); }
  250. 90% { background: radial-gradient(rgb(), rgb(), rgb()); }
  251. }
  252.  
  253. .voltie_bio {
  254. text-align: center;
  255. font: 16px Indie Flower;
  256. }
  257.  
  258. .voltie_bio > u > span { font: 34px Great Vibes !important; color: rgb(255, 192, 209); }
  259.  
  260. .voltie_bio > u { text-decoration-color: rgb(167, 223, 255); }
  261.  
  262. section.voltie_bio a { color: rgb(255, 192, 209); transition: all 0.3s linear; }
  263.  
  264. section.voltie_bio a:hover { color: rgb(167, 223, 255); }
  265.  
  266. .voltie_bio h3 { background: rgb(255, 192, 209) !important; color: rgb(255, 255, 255) !important; }
  267.  
  268. button.reveal_spoiler {
  269. border-radius: 0;
  270. border: none;
  271. background: rgb(167, 223, 255);
  272. transition: all 0.3s linear;
  273. }
  274.  
  275. div.spoiler_value {
  276. border-radius: 0;
  277. background: -webkit-linear-gradient(rgb(255, 192, 209), rgb(167, 223, 255));
  278. color: rgb(255, 255, 255);
  279. }
  280.  
  281. div.spoiler_value > u {
  282. font: 24px Great Vibes;
  283. text-decoration: none;
  284. }
  285.  
  286. button.reveal_spoiler:hover {
  287. background: rgb(255, 192, 209);
  288. }
  289.  
  290. .voltie_video {
  291. position: fixed;
  292. margin: auto;
  293. left: 10%;
  294. top: 45%;
  295. width: 20%;
  296. border-radius: 50% !important;
  297. padding: 0 !important;
  298. background: transparent !important;
  299. border: none !important;
  300. }
  301.  
  302. .embed-responsive.embed-responsive-16by9 {
  303. border-radius: 50%;
  304. width: 100% !important;
  305. height: 100% !important;
  306. padding: 50%;
  307. margin: 10px 0 0 !important;
  308. border: 1px solid;
  309. }
  310.  
  311. .embed-responsive-item { width: 180% !important; margin-left: -40% !important; }
  312.  
  313. .voltie_video h3 { display: none; }
  314.  
  315. .voltie_comments {}
  316.  
  317. .voltie_comments ul li {}
  318.  
  319. .voltie_comments ul li a { font: 18px Great Vibes; }
  320.  
  321. .voltie_comments ul li p {
  322. border: none !important;
  323. border-radius: 0 !important;
  324. box-shadow: none !important;
  325. color: rgb(255, 255, 255);
  326. font: 16px Indie Flower;
  327. }
  328.  
  329. .voltie_comments ul li:nth-child(odd) p {
  330. background: rgb(255, 192, 209) !important;
  331. }
  332.  
  333. .voltie_comments ul li:nth-child(odd) p:before { border-right-color: rgb(255, 192, 209) !important; }
  334.  
  335. .voltie_comments ul li:nth-child(odd) a { color: rgb(167, 223, 255); }
  336.  
  337. .voltie_comments ul li:nth-child(odd) a:hover { color: rgb(255, 192, 209); }
  338.  
  339. .voltie_comments ul li:nth-child(even) a { color: rgb(255, 192, 209); }
  340.  
  341. .voltie_comments ul li:nth-child(even) a:hover { color: rgb(167, 223, 255); }
  342.  
  343. .voltie_comments ul li:nth-child(even) p { background: rgb(167, 223, 255) !important; }
  344.  
  345. .voltie_comments ul li:nth-child(even) p:before { border-right-color: rgb(167, 223, 255) !important; }
  346.  
  347. .voltie_comments h3 {
  348. background: rgb(167, 223, 255) !important;
  349. color: rgb(255, 255, 255) !important;
  350. }
  351.  
  352. .voltie_comments textarea {
  353. background: rgba(167, 223, 255, 0.5);
  354. background: -webkit-linear-gradient(rgb(225, 192, 209), rgb(167, 223, 255)) fixed !important;
  355. border-radius: 0;
  356. border-color: rgb(167, 223, 255);
  357. font: 15px Indie Flower;
  358. color: rgb(255, 255, 255);
  359. }
  360.  
  361. button.comments_load_more {
  362. border-radius: 50%;
  363. padding: 2em 0.5em;
  364. text-transform: lowercase;
  365. font: 14px Indie Flower;
  366. background: rgb(255, 192, 209);
  367. color: rgb(255, 255, 255);
  368. }
  369.  
  370. button.comments_load_more:hover { background: rgb(167, 223, 255); }
  371.  
  372. .voltie_comments .col-xs-6 {
  373. width: 100%;
  374. }
  375.  
  376. .voltie_comments .col-xs-6 span { text-align: center !important; width: 100%; font: 15px Indie Flower !important; color: rgb(225, 192, 209); }
  377.  
  378. span#charsLeft { color: rgb(167, 223, 255); }
  379.  
  380. .main_button{
  381. border-radius: 0;
  382. width: 100%;
  383. border: none;
  384. font: 20px Great Vibes;
  385. color: rgb(255, 255, 255);
  386. text-shadow: none;
  387. background: rgb(167, 223, 255);
  388. box-shadow: 0 2px 2px 1px rgba(167, 223, 255, 0.5);
  389. }
  390.  
  391. .main_button:hover {
  392. background: rgb(255, 192, 209);
  393. border: none;
  394. transform: translateY(2px);
  395. box-shadow: none;
  396. background: rgb(255, 192, 209) !important;
  397. }
  398.  
  399. .voltie_likes, .voltie_dislikes, .voltie_hobbies {
  400. display: none;
  401. }
  402.  
  403. .voltie_friends h3 { background: rgb(255, 192, 209) !important; color: rgb(255, 255, 255) !important; }
  404.  
  405. .voltie_friends a img { border-radius: 50%; max-width: 100px !important; }
  406.  
  407. .voltie_friends a { border-radius: 50% !important; padding: 0 10px !important; margin: 1em 15px !important; transition: all 0.3s linear; }
  408.  
  409. .voltie_friends a:nth-child(even) img { background: rgb(167, 223, 255); }
  410.  
  411. .voltie_friends a:nth-child(odd) img { background: rgb(255, 192, 209); }
  412.  
  413. .voltie_friends a:hover { transform: translateY(-15px); }
  414.  
  415. #globalEventMarker {
  416. position: absolute;
  417. margin: 5px auto 0 !important;
  418. left: 0;
  419. right: 0;
  420. }
  421.  
  422. #footer { height: 100px; background: url(https://i.imgur.com/yVuSA1Y.gif) fixed; border: none; }
  423.  
  424. .tooltip div:nth-child(2) {
  425. background: rgb(167, 223, 255);
  426. font: 16px Indie Flower;
  427. }
  428.  
  429. .tooltip div:nth-child(1) { border-top-color: rgb(167, 223, 255) !important; }
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!