API tools faq
paste
ooksie

eclipse

ooksie
Dec 11th, 2021 (edited)
378
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.99 KB | None | 0 0
raw download clone embed print report
  1. [comment]coded by uxie!
  2.  
  3. [font=Libre Baskerville]name/role[/font]
  4. [font=Karla]body[/font]
  5.  
  6. to replace fonts, add/replace them here, and then in the variables below under *fonts; check uxie's tech support in nine lives for more details ( ‾́ ◡ ‾́ )
  7.  
  8. [/comment][border=transparent;
  9.  
  10. /*container background colour*/
  11. --bg-color:#fefefe;
  12. /*container border*/
  13. --border:#e1e1ea;
  14. /*accent colour 1*/
  15. --color-1: #c8a9d3;
  16. /*accent colour 2 (slightly darker/more saturated)*/
  17. --color-2: #af8fbc;
  18.  
  19. /*role/name & detail text colour*/
  20. --h1: #292e44;
  21. /*text colour*/
  22. --t-color: #343942;
  23. /*dialogue colour*/
  24. --dialogue: #af8fbc;
  25.  
  26. /*fonts used*/
  27. --header: 'Libre Baskerville', serif;
  28. --body: 'Karla', sans-serif;
  29.  
  30. /*character image*/
  31. --img-1: url('xx');
  32.  
  33. height:auto; width:100%; max-width:340px; padding:0; position:relative; display:flex; flex-flow:column nowrap; margin:15px auto 20px auto; line-height:0; overflow:hidden; position:relative;]
  34.  
  35. [comment]----header----[/comment]
  36. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row nowrap;]
  37. [comment]----image----[/comment]
  38. [border=transparent; height:100px; flex:1; min-width:80px; padding:0; background: var(--img-1); background-size:cover; border:1px solid var(--border); box-sizing:border-box;
  39.  
  40. /*edit the following to adjust the cropping of the image*/ background-position:100% 25%;][/border]
  41.  
  42. [comment]----header contents----[/comment]
  43. [border=transparent; height:100px; width:155px; padding:0; flex-shrink:0; border:1px solid var(--border); border-bottom:0; border-left:0; box-sizing:border-box; margin-left:-35px; position:relative;][border=transparent; height:100%; width:calc(100% - 35px); padding:0; position:absolute; top:-0.3px; right:0; background: var(--bg-color);][/border][border=transparent; height:100%; width:100%; padding:5px 0; box-sizing:border-box; overflow:hidden; display:flex; flex-flow:column nowrap; position:relative; z-index:2;][border=transparent;; height:100%; width:200%; padding:0; overflow-y:scroll;]
  44. [comment]----name----[/comment]
  45. [border=transparent; height:100%; width:50%; padding:0 2px 0 10px; box-sizing:border-box; display:flex; align-items:center; margin-bottom:10px; position:relative;][border=transparent; height:auto; width:auto; padding:0; position:absolute; top:0; right:0; color: var(--color-1); opacity:0.4; text-transform:uppercase; font-family: var(--body); letter-spacing:1px; font-size:9px; line-height:100%; font-weight:bold;]scroll[/border][border=transparent; height:auto; width:fit-content; width:-moz-fit-content; max-width:100%; padding:0; background: var(--bg-color); border:1px solid var(--color-1); position:relative; z-index:2;][border=transparent; height:100%; max-height:63px; overflow:hidden; width:100%; padding:8px 13px 8px 11px; box-sizing:border-box;][border=transparent; height:100%; max-height:46px; overflow:hidden; width:100%; padding:0 2px; color: var(--h1); font-family: var(--header); font-size:18px; text-transform:uppercase; letter-spacing:-1px; word-spacing:3px; line-height:130%; text-align:left;][comment]
  46.  
  47. ----* * * name/role here----
  48.  
  49. [/comment]first last[/border][/border][/border]
  50. [/border]
  51. [comment]----name end----[/comment]
  52.  
  53. [comment]----copy this whole thing to add another detail----[/comment]
  54. [border=transparent; height:auto; width:50%; padding:0 2px 0 20px; box-sizing:border-box; display:flex; align-items:center; margin:2px 0 10px 0;][border=transparent; height:29px; width:29px; padding:3.5px 3px 3px 3.5px; box-sizing:border-box; background-color: var(--color-2); flex-shrink:0;][border=transparent; height:100%; width:100%; padding:6px 5px 5px 5px; border:1px solid var(--bg-color); box-sizing:border-box; color: var(--bg-color); font-size:11px; line-height:100%; display:flex; align-items:center; justify-content:center;][comment]
  55.  
  56. ----* * * detail icon here----
  57.  
  58. [/comment][fa]fas fa-map-marker-alt[/fa][/border][/border][border=transparent; height:auto; flex:1; padding:0; margin-left:15px; color: var(--h1); font-family: var(--body); font-size:12px; line-height:14px;][comment]
  59.  
  60. ----* * * detail info here----
  61.  
  62. [/comment]location[/border]
  63. [/border]
  64. [comment]----copy me too!----[/comment]
  65.  
  66. [comment]----copy this whole thing to add another detail----[/comment]
  67. [border=transparent; height:auto; width:50%; padding:0 2px 0 19px; box-sizing:border-box; display:flex; align-items:center; margin:2px 0 10px 0;][border=transparent; height:29px; width:29px; padding:3.5px 3px 3px 3.5px; box-sizing:border-box; background-color: var(--color-2); flex-shrink:0;][border=transparent; height:100%; width:100%; padding:6px 5px 5px 5px; border:1px solid var(--bg-color); box-sizing:border-box; color: var(--bg-color); font-size:11px; line-height:100%; display:flex; align-items:center; justify-content:center;][comment]
  68.  
  69. ----* * * detail icon here----
  70.  
  71. [/comment][fa]fas fa-users[/fa][/border][/border][border=transparent; height:auto; flex:1; padding:0; margin-left:15px; color: var(--h1); font-family: var(--body); font-size:12px; line-height:14px;][comment]
  72.  
  73. ----* * * detail info here----
  74.  
  75. [/comment]interactions[/border]
  76. [/border]
  77. [comment]----copy me too!----[/comment]
  78.  
  79. [comment]----copy this whole thing to add another detail----[/comment]
  80. [border=transparent; height:auto; width:50%; padding:0 2px 0 19px; box-sizing:border-box; display:flex; align-items:center; margin:2px 0 10px 0;][border=transparent; height:29px; width:29px; padding:3.5px 3px 3px 3.5px; box-sizing:border-box; background-color: var(--color-2); flex-shrink:0;][border=transparent; height:100%; width:100%; padding:6px 5px 5px 5px; border:1px solid var(--bg-color); box-sizing:border-box; color: var(--bg-color); font-size:11px; line-height:100%; display:flex; align-items:center; justify-content:center;][comment]
  81.  
  82. ----* * * detail icon here----
  83.  
  84. [/comment][fa]fas fa-comment[/fa][/border][/border][border=transparent; height:auto; flex:1; padding:0; margin-left:15px; color: var(--h1); font-family: var(--body); font-size:12px; line-height:14px;][comment]
  85.  
  86. ----* * * detail info here----
  87.  
  88. [/comment]tags[/border]
  89. [/border]
  90. [comment]----copy me too!----[/comment]
  91.  
  92. [/border][/border][/border]
  93. [comment]----header contents end----[/comment]
  94. [/border]
  95. [comment]----header end----[/comment]
  96.  
  97. [comment]----text contents----[/comment]
  98. [border=transparent; height:320px; width:100%; padding:0; border:1px solid var(--border); border-top:0; box-sizing:border-box; position:relative; top:-1px; background: var(--bg-color);][border=transparent; height:100%; width:100%; padding:16px 0; box-sizing:border-box; display:flex; flex-flow:column nowrap; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0 8px 0 16px; box-sizing:border-box; color: var(--t-color); line-height:16px; font-size:11px; text-align:justify; font-family: var(--body);][comment]
  99.  
  100. ----* * * text starts here----
  101.  
  102. [/comment][border=0; padding:0; color: var(--dialogue); font-weight:bold; letter-spacing:0.5px; display:inline;]"dialogue dialogue"[/border] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et metus rutrum, porttitor libero sit amet, dapibus tortor. In hac habitasse platea dictumst. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent ultrices molestie pharetra. Sed quis placerat libero. Phasellus felis nulla, dapibus a pretium ut, placerat vitae ante. Maecenas auctor est nec bibendum ullamcorper. Maecenas hendrerit tortor vel leo maximus hendrerit. Curabitur eu eros ut ex tincidunt eleifend faucibus id nisl. Cras at diam libero. Mauris ornare mollis bibendum.
  103.  
  104. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis tempor leo est, interdum molestie diam consectetur non. Fusce ac lorem dolor. Donec ultrices rhoncus lorem eu malesuada. Sed eu porta massa. Cras varius dapibus cursus. Vestibulum non volutpat purus. Sed sapien nulla, tincidunt nec porta vel, finibus vel ex. Nunc rhoncus ultricies dui, id feugiat augue. Duis sit amet nisl varius, mollis sapien nec, tincidunt risus. Donec luctus enim lacinia facilisis cursus. Proin ornare sit amet ante tempor ullamcorper. Fusce diam diam, sodales sed porttitor at, sagittis ut felis. Donec sodales lectus justo, in lobortis lectus placerat vel. Integer auctor mi quis sapien convallis, et blandit eros bibendum.
  105. [/border][/border][/border][/border]
  106. [comment]----text contents end----[/comment]
  107.  
  108. [comment]
  109. ----signature! do not remove
  110. [/comment][bg=transparent; height:auto; width:auto; padding:1px 3px; box-sizing:border-box; position:absolute;z-index:6;opacity:0.6;text-align:center; top:10px; left:11px; z-index:10; background: var(--bg-color);][border=transparent; height:auto; width:auto; padding:0; color: var(--color-1); font-size:9.5px; line-height:100%; opacity:0.9;][font=Open Sans]♡coded by uxie♡[/font][/border][/bg][/border]
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!