API tools faq
paste
Advertisement
cat_inthe_cradle

TenTen

cat_inthe_cradle
Feb 5th, 2017
131
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.00 KB | None | 0 0
raw download clone embed print report
  1. <style type="text/css">
  2.  
  3. /* custom fonts 3/3 */
  4. @import url(http://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic);
  5.  
  6. /* --------------------------- DECORATION ---------------------------- */
  7.  
  8. /* body */
  9. body {
  10. color:#000;
  11. background-image:url('http://i.picpar.com/frmc.png');
  12.  
  13. font-family:Estrangelo Edessa;
  14. font-size:10px;
  15. letter-spacing:.5px;
  16.  
  17.  
  18. line-height:13px;
  19. text-align:justify;}
  20.  
  21. /*-------------------------- CREDIT; DON'T REMOVE --------------------------*/
  22.  
  23. #credit {
  24. z-index:99999;
  25. position:fixed;
  26. bottom:10px;
  27.  
  28. right:10px;
  29. width:20px; height:20px;
  30. font-size:20px;
  31. letter-spacing:1px;
  32. font-weight:bold;}
  33. #credit a {
  34. color:#dddddd;
  35. -webkit-transition: all 0.3s linear;
  36. -moz-transition: all 0.3s linear;
  37. transition: all 0.3s linear;}
  38. #credit a:hover {
  39. color:#9c83ff;}
  40.  
  41. /* --------------------------- MINOR STUFF ---------------------------- */
  42.  
  43. /* hover text */
  44. #s-m-t-tooltip {
  45. z-index: 99999;
  46. display: block;
  47. margin-left: 15px;
  48. margin-top: 5px;
  49. max-width:150px;
  50. padding: 3px 5px 4px 6px;
  51. color: #f7f7f9;
  52. font-family:Calibri;
  53.  
  54. font-size:8px;
  55.  
  56.  
  57. font-weight:bold;
  58. line-height:10px;
  59. text-transform:uppercase;
  60. letter-spacing:1px;
  61. text-align:left;
  62. background: #58648f;}
  63.  
  64. /* scrollbar */
  65. ::-webkit-scrollbar {
  66. height: 14px;
  67. width: 14px;
  68. background: #f8f8f8;}
  69. ::-webkit-scrollbar-thumb {
  70. background: #9c83ff;
  71. border:4px solid #f8f8f8;
  72. border-radius:5px;}
  73.  
  74. /* drag n' click selection */
  75. ::selection {
  76. background: #9c83ff;
  77. color: #f7f7f9;}
  78. ::-moz-selection {
  79. background: #9c83ff;
  80. color: #f7f7f9;}
  81. a::selection {
  82. background: #9c83ff;
  83. color: #dcdcdc;}
  84. a::-moz-selection {
  85. background: #9c83ff;
  86. color: #dcdcdc;}
  87.  
  88. /* top right tumblr buttons */
  89. #tumblr_controls {
  90. opacity:0.33;
  91. -webkit-filter: invert(100%) brightness(97%) hue-rotate(180deg);}
  92.  
  93. /* ------------------------- FONT STUFF --------------------------- */
  94.  
  95. /* links */
  96. a:link, a:active, a:visited{
  97. text-decoration:none;
  98. color:#9c83ff;
  99. -webkit-transition: all 0.5s linear;
  100. -moz-transition: all 0.5s linear;
  101. transition: all 0.5s linear;}
  102. a:hover {
  103. color:#cecece;
  104. -webkit-transition: all 0.2s linear;
  105. -moz-transition: all 0.2s linear;
  106. transition: all 0.2s linear;}
  107.  
  108. /* main font decorations */
  109. b, strong{color:#949494;}
  110. i, em {color:#949494;}
  111. pre {color:#aaaaaa;
  112. font-size:10px;
  113. max-width:100%;
  114. font-family:consolas;
  115. word-break: break-all;
  116. background:#eeeeee;
  117. padding:1px 6px 2px 6px;
  118. white-space: pre-wrap;
  119. white-space: -moz-pre-wrap;
  120. white-space: -pre-wrap;
  121. white-space: -o-pre-wrap;
  122. word-wrap: break-word;}
  123. code {
  124. color:#aaaaaa;
  125. font-size:10px;
  126. font-family:consolas;
  127. background:#eeeeee;
  128. padding:0px 1px 0px 1px;}
  129.  
  130. /* other font decorations */
  131. sub {font-size:9px;}
  132. sup {font-size:9px;}
  133. small {font-size:9px;}
  134. big {font-size:auto;}
  135.  
  136. /* text and link post titles */
  137. h1 {font-family:Georgia;
  138. font-weight:bold;
  139. font-style: italic;
  140. letter-spacing:0px;
  141. color:#000;
  142. font-size:18px;
  143. margin-top:0px;}
  144. /* quote and ask post titles */
  145. h2 {font-family:Georgia;
  146. font-weight:bold;
  147. font-style: italic;
  148. letter-spacing:0px;
  149. font-size:16px;
  150. line-height:16px;
  151. margin-top:0px;}
  152.  
  153. /* --------------------------------- SIDEBAR ------------------------------ */
  154.  
  155. /* before hovering the sidebar */
  156. #side {
  157. position:fixed;
  158. left:45%; margin-left:-360px;
  159. top:50%; margin-top:-90px;
  160. width:180px; height:180px;
  161. -webkit-transition: all 0.5s linear;
  162. -moz-transition: all 0.5s linear;
  163. transition: all 0.5s linear;}
  164.  
  165. /* KH symbol */
  166. #symbol {
  167. z-index:3;
  168. position:fixed;
  169. left:45%; margin-left:-350px;
  170. top:50%; margin-top:-80px;
  171. width:300px; height:300px;
  172. background:# url( ) center;
  173. -webkit-transition: all 0.5s linear;
  174. -moz-transition: all 0.5s linear;
  175. transition: all 0.5s linear;}
  176.  
  177. #desc-holder {
  178. opacity:0; z-index:2;
  179. position:fixed;
  180.  
  181. top:50%; margin-top:35px;
  182. left:55%; margin-left:-350px;
  183. width:155px; height:140px;
  184. -webkit-transition: all 0.5s linear;
  185. -moz-transition: all 0.5s linear;
  186. transition: all 0.5s linear;}
  187.  
  188. /* page navigation & description */
  189. #pagination, #description {
  190. text-transform:uppercase;
  191. font-family:Calibri;
  192. color:#000;
  193.  
  194. font-size:8px;
  195. letter-spacing:1px;
  196.  
  197. }
  198. #pagination a, #description a {
  199. font-weight:bold;
  200. color:#000;}
  201. #pagination a:hover, #description a:hover {
  202. color:#000;}
  203.  
  204. #pagination {
  205. text-align:center;
  206. margin-bottom:5px;}
  207.  
  208. #description {
  209. width:150px; padding-right:4px;
  210. max-height:90px; overflow:auto;
  211. text-align:justify;
  212. margin-bottom:10px;}
  213. #description::-webkit-scrollbar {
  214. height: 2px;
  215. width: 2px;
  216. background-color: #fff;}
  217. #description::-webkit-scrollbar-thumb {
  218. background: #dddddd;
  219. border:none;}
  220.  
  221. /* sidebar links */
  222. #sidelinks {
  223. font-size:8px;
  224.  
  225. letter-spacing:12px;
  226.  
  227.  
  228. text-align:center;}
  229. #sidelinks a {
  230. font-size:8px;
  231. text-decoration:none;
  232. display:inline-block;
  233. width:10px;
  234. height:10px;
  235. border-radius:5px;
  236. background:#8c7774;
  237. -webkit-transition: all 0.2s linear;
  238. -moz-transition: all 0.2s linear;
  239. transition: all 0.2s linear;}
  240. #sidelinks a:hover {
  241. background:#9c83ff;}
  242.  
  243. /* after hovering the sidebar */
  244. #side:hover {
  245. margin-left:-435px;
  246. width:340px;}
  247. #side:hover #symbol {
  248. position:fixed;
  249. margin-left:-425px;}
  250. #side:hover #desc-holder {
  251. opacity:1; margin-left:-260px;}
  252.  
  253. /* ----------------------------- POSTS ------------------------------- */
  254.  
  255. /* posts position */
  256. #entries {
  257. margin-top:70px;
  258. margin-left:45%;
  259. text-align:justify;}
  260. /* posts themselves */
  261. #posts {
  262. margin:0 0 70px 0;
  263. overflow:hidden;
  264. width: 500px;
  265. min-height:33px;
  266. text-align:justify;
  267. padding:20px;}
  268.  
  269. /* ------------------------------ POST TYPES ------------------------------ */
  270.  
  271. /* text post */
  272. blockquote {
  273. padding:0px;
  274. padding-left:6px;
  275. margin:-3px 0 -1px 6px;
  276. border-left:3px solid #eeeeee;}
  277. hr {display: block;
  278. margin-top: 0.5em;
  279. margin-bottom: 0.5em;
  280. margin-left: auto;
  281. margin-right: auto;
  282. border-style: solid;
  283. border-width: 1px;
  284. border-color: #eeeeee;}
  285.  
  286. /* bullet lists */
  287. ul {margin-left:-20px;
  288. list-style-type:circle;}
  289. ol {margin-left:-20px;
  290. list-style-type:decimal;}
  291. li {margin-bottom:3px;}
  292.  
  293. /* text-images */
  294. #posts img {
  295. max-width:100%;
  296. opacity:0.85;
  297. -webkit-transition-duration: 0.2s;
  298. -moz-transition-duration:0.2s;
  299. transition-duration:0.2s;
  300. -o-transition-duration:0.2s;}
  301. #posts:hover img {opacity:1;}
  302. img a{border:none; max-width:100%;}
  303.  
  304. /* photo posts */
  305. #posts #photo {
  306. opacity:0.7;
  307. -webkit-filter: grayscale(100%);
  308. -webkit-transition-duration: 0.5s;
  309. -moz-transition-duration:0.5s;
  310. transition-duration:0.5s;
  311. -o-transition-duration:0.5s;}
  312. #posts:hover #photo {
  313. opacity:1;
  314. -webkit-filter: grayscale(0%);
  315. -webkit-transition-duration: 0.5s;
  316. -moz-transition-duration:0.5s;
  317. transition-duration:0.5s;
  318. -o-transition-duration:0.5s;}
  319. #posts .html_photoset {
  320. opacity:0.7;
  321. -webkit-filter: grayscale(100%);
  322. -webkit-transition-duration: 0.5s;
  323. -moz-transition-duration:0.5s;
  324. transition-duration:0.5s;
  325. -o-transition-duration:0.5s;}
  326. #posts:hover .html_photoset {
  327. opacity:1;
  328. -webkit-filter: grayscale(0%);
  329. -webkit-transition-duration: 0.5s;
  330. -moz-transition-duration:0.5s;
  331. transition-duration:0.5s;
  332. -o-transition-duration:0.5s;}
  333.  
  334. /* ask posts */
  335. #ask {
  336. padding: 10px;
  337. background: #eeeeee;
  338. border-radius:2px;
  339. text-align: justify;}
  340.  
  341. /* audio posts */
  342. #albumart {
  343. position:absolute;
  344. margin-right:10px;
  345. width:85px; height:85px;
  346. border-radius:1px;}
  347. #posts #albumart {
  348.  
  349. -webkit-filter: grayscale(100%);
  350. -webkit-transition: all 0.2s linear;
  351. -moz-transition: all 0.2s linear;
  352. transition: all 0.2s linear;}
  353. #posts:hover #albumart {
  354. -webkit-filter: grayscale(0%);}
  355. #posts #album-opacity {
  356. opacity:.7;
  357. -webkit-transition: all 0.2s linear;
  358. -moz-transition: all 0.2s linear;
  359. transition: all 0.2s linear;}
  360. #posts:hover #album-opacity {
  361. opacity:1;}
  362.  
  363. #posts #audio-player {
  364. margin-left:97px;
  365. margin-top:3px;
  366. max-width:207px;
  367. max-height:27px;
  368. background:#808080;
  369.  
  370. border-radius:1px;
  371. -webkit-transition: all 0.2s linear;
  372. -moz-transition: all 0.2s linear;
  373. transition: all 0.2s linear;}
  374. #posts:hover #audio-player {
  375. background:#9c83ff}
  376. #audioinfo {
  377. text-transform:uppercase;
  378. font-family:Calibri;
  379.  
  380. font-size:8px;
  381.  
  382.  
  383. line-height:15px;
  384. letter-spacing:1px;
  385. margin-top:-7px;
  386. margin-left:97px;}
  387.  
  388. /* video posts */
  389. #caption #youtube_iframe {
  390. margin:5px 0px 5px 0px;
  391. width:300px; height:224px;
  392. max-width:100%; max-height:100%;}
  393.  
  394. /* chat posts */
  395. .label {
  396. color:#000;
  397. font-weight:bold}
  398. ul.chat, .chat ol, .chat li {
  399. list-style:none;
  400. margin:0px;
  401. padding:3px 0px 3px 0px;}
  402. ul.chat, .chat ol {
  403. border-top:2px solid #eeeeee;}
  404. .chat li {
  405. border-bottom:2px solid #eeeeee;}
  406.  
  407. /* ------------------------------ POSTS INFO ------------------------------ */
  408.  
  409. /* if circles */
  410. #postinfo {
  411. margin-top:20px;
  412. position:absolute;
  413. text-align:center;
  414. margin-left:-20px;
  415. width:540px;
  416. height:10px;
  417. letter-spacing:20px;}
  418. /* individual circles */
  419. #postinfo a {
  420. text-decoration:none;
  421. display:inline-block;
  422. width:10px;
  423. height:10px;
  424. border-radius:5px;
  425. background:#dddddd;
  426. -webkit-transition: all 0.2s linear;
  427. -moz-transition: all 0.2s linear;
  428. transition: all 0.2s linear;}
  429. #postinfo a:hover {
  430. background:#9c83ff;}
  431.  
  432. /* if no circles */
  433. #postending {
  434. border-radius:3px;
  435. padding:10px;
  436. width:500px;
  437. padding:10px;
  438. margin:15px 0px -10px -10px;
  439. background: #eeeeee;
  440. text-align:center;
  441. border-radius:1px;
  442. margin-top:15px;
  443. text-transform:uppercase;
  444. font-family:Calibri;
  445.  
  446. font-size:8px;
  447.  
  448.  
  449. letter-spacing:1px;
  450. color: #000;}
  451. #postending a {
  452. color:#000;}
  453. #postending a:hover {
  454. color:#000;}
  455.  
  456. /* ----------------------------- PERMALINK -------------------------------- */
  457.  
  458. /* permalink position */
  459. #permalink {
  460. margin-top:-70px;
  461. max-height:600px;
  462. padding-top:20px;
  463. padding-bottom:20px;
  464. width: 540px;
  465. max-width: 540px;
  466. text-transform:uppercase;
  467. font-family:Calibri;
  468.  
  469. font-size:8px;
  470.  
  471.  
  472. letter-spacing:1px;
  473. text-align:left;
  474. color:#000;}
  475. #permalink a {
  476. font-weight:bold;
  477. text-decoration:none;
  478. color:#000;}
  479. #permalink a:hover {
  480. color:#000;}
  481.  
  482. /* post notes container */
  483. #notescontainer {
  484. width: 500px;
  485. max-height:580px;
  486. padding-right:20px;
  487. overflow: auto;
  488. line-height:14px;}
  489. #notescontainer blockquote {
  490. margin-top:3px;
  491. margin-bottom:3px;
  492. border-left:3px solid #eeeeee;}
  493.  
  494. /* permalink etc */
  495. .notes img {
  496. width: 10px;
  497. position: relative;
  498. vertical-align: middle;
  499. padding-right: 5px;}
  500. ol.notes, .notes li {
  501. width: 480px;
  502. list-style: none;
  503. margin: 0px 5px 0px 5px;
  504. padding-left: 5px}
  505.  
  506. /* permalink scrollbar */
  507. #permalink ::-webkit-scrollbar {
  508. height: 5px;
  509. width: 5px;
  510. background: transparent;}
  511. #permalink ::-webkit-scrollbar-thumb:vertical {
  512. background: #eeeeee;
  513. border:none;
  514. border-radius: 1px;}
  515.  
  516. </style>
  517. <body>
  518.  
  519. <div id="side">
  520.  
  521. <!-- KH symbol -->
  522. <img src="http://i.picpar.com/Yqmc.png" id="symbol">
  523.  
  524. <div id="desc-holder"><div style="position:relative; top:50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);">
  525. <!-- pagination -->
  526.  
  527.  
  528. <!-- description -->
  529. <div id="description">Tenten is a kunoichi from Konohagakure's Team Guy. She idolises the Sannin Tsunade and strives to emulate her and become a powerful kunoichi. Using her unparalleled weapon skills she has become just that in her own right.</div>
  530.  
  531. <div id="sidelinks">
  532. <a href="https://roleplay.chat/profile.php?user=Hokumon no Tayuya" title="Tayuya"></a>
  533. <a href="/ask" title="..."></a>
  534. <a href="/archive" title="..."></a>
  535. <a href="/" title="Link 1"></a>
  536. <a href="/" title="Link 2"></a>
  537. <a href="/" title="Link 3"></a>
  538. <a href="/" title="Link 4"></a>
  539. </div>
  540.  
  541. </div></div>
  542. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!