API tools faq
paste
Advertisement
Guest User

✿ hgc ［cs shell］

a guest
Sep 5th, 2018
131
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.14 KB | None | 0 0
raw download clone embed print report
  1. [export][nobr]
  2.  
  3. [comment][font=Inconsolata]help[/font][font=Montserrat]help[/font][/comment]
  4.  
  5.  
  6. [comment]main divs[/comment]
  7. [class name=aspectratio]
  8. --mainbg: #fdfdfd;
  9. --accentcolor: #626262;
  10. --boxcolor: #ffffff;
  11. --bordercolor: #f5f5f5;
  12. --textcolor: #898989;
  13. display: block;
  14. position: relative;
  15. overflow: hidden;
  16. height: 0px;
  17. width: 100%;
  18. padding-top: 55%;
  19. background: var(--mainbg);
  20. font-size: initial;
  21. font-smoothing: antialiased;
  22. -webkit-font-smoothing: antialiased;
  23. -moz-osx-font-smoothing: grayscale;
  24. [/class]
  25. [class name=aspectratio maxWidth=850px]
  26. width: 100%;
  27. padding-top: 160%;
  28. [/class]
  29. [class name=maincontainer]
  30. position: absolute;
  31. display: flex;
  32. flex-flow: row wrap;
  33. align-items: center;
  34. align-content: center;
  35. justify-content: center;
  36. width: 100%;
  37. height: 100%;
  38. top: 0px;
  39. bottom: 0px;
  40. left: 0px;
  41. right: 0px;
  42. margin: -4px;
  43. box-sizing: border-box;
  44. padding: 10% 15%;
  45. overflow: hidden;
  46. [/class]
  47. [class name=maincontainer maxWidth=850px]
  48. padding: 2%;
  49. flex-flow: column nowrap;
  50. [/class]
  51. [class name=pagetitle]
  52. display: block;
  53. width: 100%;
  54. margin: 2px;
  55. background: var(--accentcolor);
  56. padding: 13px 20px;
  57. box-sizing: border-box;
  58. text-transform: uppercase;
  59. color: var(--boxcolor);
  60. font-size: .8em;
  61. font-family: 'Inconsolata', monospace;
  62. letter-spacing: 2px;
  63. [/class]
  64. [class name=pagetitle maxWidth=850px]
  65. width: calc(100% - 4px);
  66. font-size: 1.25vh;
  67. [/class]
  68. [class name=reqtext]
  69. display: inline;
  70. [/class]
  71.  
  72. [comment]image[/comment]
  73. [class name=imgcontainer]
  74. flex: 2 0 80px;
  75. height: calc(100% - 3px);
  76. box-sizing: border-box;
  77. width: 100%;
  78. background-color: var(--boxcolor);
  79. border: 1px solid var(--bordercolor);
  80. margin: 2px;
  81. position: relative;
  82. [/class]
  83. [class name=imgcontainer maxWidth=850px]
  84. flex: 1 0 80px;
  85. max-height: 12vh;
  86. width: calc(100% - 4px);
  87. [/class]
  88. [class name=imgfilter]
  89. width: calc(100% - 20px);
  90. height: calc(100% - 20px);
  91. position: absolute;
  92. top: 10px;
  93. left: 10px;
  94. right: 10px;
  95. bottom: 10px;
  96. font-size: 0px;
  97. background: var(--mainimg);
  98. filter: saturate(0%) brightness(101%);
  99. transition: all .5s ease-in-out;
  100. [/class]
  101. [class name=imgfilter state=hover]
  102. filter: none;
  103. transition: all .8s ease-in-out;
  104. [/class]
  105. [class name=smallimgcontainer]
  106. flex: 0 0 13vh;
  107. display: inline-block;
  108. width: 13vh;
  109. height: 13vh;
  110. box-sizing: border-box;
  111. margin: 2px;
  112. background-color: var(--boxcolor);
  113. border: 1px solid var(--bordercolor);
  114. font-size: 0px;
  115. position: relative;
  116. --mainimg: var(--iconimg);
  117. [/class]
  118. [class name=smallimgcontainer maxWidth=850px]
  119. flex: 1 0 50px;
  120. width: 100%;
  121. height: auto;
  122. align-self: stretch;
  123. display: inline-block;
  124. [/class]
  125.  
  126. [comment]text[/comment]
  127. [class name=textarea]
  128. flex: 3.5 0 100px;
  129. height: 100%;
  130. display: flex;
  131. flex-flow: column nowrap;
  132. align-items: center;
  133. align-content: center;
  134. justify-content: center;
  135. overflow: hidden;
  136. position: relative;
  137. [/class]
  138. [class name=textarea maxWidth=850px]
  139. width: 100%;
  140. [/class]
  141. [class name=rowflex]
  142. flex: 0 0 auto;
  143. width: 100%;
  144. display: flex;
  145. flex-flow: row wrap;
  146. align-items: stretch;
  147. align-content: center;
  148. justify-content: center;
  149. [/class]
  150.  
  151. [comment]info[/comment]
  152. [class name=basicinfo]
  153. flex: 6 0 25px;
  154. display: flex;
  155. flex-flow: column nowrap;
  156. justify-content: space-evenly;
  157. align-content: stretch;
  158. overflow: hidden;
  159. [/class]
  160. [class name=infoblock]
  161. flex: 1 0 auto;
  162. display: flex;
  163. flex-flow: row nowrap;
  164. justify-content: flex-start;
  165. align-content: center;
  166. align-items: center;
  167. width: calc(100% - 4px);
  168. box-sizing: border-box;
  169. font-size: 1.2vh;
  170. box-sizing: border-box;
  171. color: var(--accentcolor);
  172. border: 1px solid var(--bordercolor);
  173. background: var(--boxcolor);
  174. padding: 2px 8px;
  175. font-family: 'Inconsolata', monospace;
  176. text-transform: uppercase;
  177. margin: 2px;
  178. position: relative;
  179. [/class]
  180. [class name=infoblock maxWidth=850px]
  181. font-size: 1.5vh;
  182. [/class]
  183. [class name=metadata]
  184. flex: 1 0 10px;
  185. font-weight: bold;
  186. text-align: left;
  187. white-space: nowrap;
  188. overflow: hidden;
  189. text-overflow: ellipsis;
  190. position: relative;
  191. [/class]
  192. [class name=data]
  193. flex: 5 0 10px;
  194. white-space: nowrap;
  195. overflow: hidden;
  196. text-overflow: ellipsis;
  197. text-align: left;
  198. position: relative;
  199. [/class]
  200.  
  201. [comment]tab nav[/comment]
  202. [class name=tabbtn]
  203. flex: 1 0 auto;
  204. box-sizing: border-box;
  205. margin: 2px;
  206. padding: 5px;
  207. display: flex;
  208. flex-flow: row wrap;
  209. align-items: center;
  210. align-content: center;
  211. justify-content: center;
  212. font-size: .9vh;
  213. text-transform: uppercase;
  214. color: var(--accentcolor);
  215. background-color: var(--boxcolor);
  216. border: 1px solid var(--bordercolor);
  217. position: relative;
  218. cursor: pointer;
  219. transition: all .3s ease-in-out;
  220. [/class]
  221. [class name=tabbtnselect]
  222. --boxcolor: #626262;
  223. --accentcolor: #FFFFFF;
  224. transition: all .3s ease-in-out;
  225. [/class]
  226. [class name=englishtxt]
  227. position: absolute;
  228. top: 0px;
  229. bottom: 0px;
  230. left: 0px;
  231. right: 0px;
  232. box-sizing: border-box;
  233. padding: 5px;
  234. color: var(--accentcolor);
  235. background-color: var(--boxcolor);
  236. opacity: 0;
  237. text-align: center;
  238. transition: all .5s ease-in-out;
  239. overflow: hidden;
  240. text-overflow: ellipsis;
  241. white-space: nowrap;
  242. [/class]
  243. [class name=englishtxt state=hover]
  244. opacity: 1;
  245. [/class]
  246.  
  247. [comment]tabs[/comment]
  248. [class name=tabbg]
  249. flex: 1 0 20px;
  250. width: calc(100% - 4px);
  251. height: 100%;
  252. color: var(--textcolor);
  253. background-color: var(--boxcolor);
  254. border: 1px solid var(--bordercolor);
  255. margin: 2px;
  256. box-sizing: border-box;
  257. overflow: hidden;
  258. position: relative;
  259. [/class]
  260. [class name=tabcontent]
  261. position: absolute;
  262. top: 7%;
  263. left: 7%;
  264. right: 7%;
  265. bottom: 7%;
  266. width: 86%;
  267. height: 86%;
  268. color: var(--textcolor);
  269. background-color: var(--boxcolor);
  270. font-family: 'Montserrat', sanserif;
  271. font-size: .8em;
  272. overflow: hidden;
  273. text-align: justify;
  274. opacity: 1;
  275. transition: all .5s ease-in-out .5s;
  276. pointer-events: auto;
  277. [/class]
  278. [class name=tabcontenthide]
  279. opacity: 0;
  280. pointer-events: none;
  281. transition: all .5s ease-in-out 0s;
  282. [/class]
  283. [class name=scrollbox]
  284. display: block;
  285. height: 100%;
  286. width: 100%;
  287. padding-right: 150px;
  288. overflow-x: hidden;
  289. overflow-y: scroll;
  290. position: relative;
  291. white-space: pre-line;
  292. [/class]
  293.  
  294. [comment]relations[/comment]
  295. [class name=rblock]
  296. position: relative;
  297. width: 100%;
  298. display: flex;
  299. flex-flow: row wrap;
  300. align-items: flex-start;
  301. align-content: flex-start;
  302. justify-content: center;
  303. font-size: .9em;
  304. padding-bottom: 35px;
  305. [/class]
  306. [class name=rimgcontainer]
  307. display: inline-block;
  308. width: 10vh;
  309. height: 10vh;
  310. font-size: 0px;
  311. position: relative;
  312. background: var(--bordercolor);
  313. margin-right: 10px;
  314. --mainimg: var(--rimg);
  315. box-sizing: border-box;
  316. [/class]
  317. [class name=rimgcontainer maxWidth=850px]
  318. display: block;
  319. width: 100%;
  320. margin-right: 0px;
  321. margin-bottom: 10px;
  322. height: 12vh;
  323. [/class]
  324. [class name=rcontent]
  325. flex: 3 0 100px;
  326. position: relative;
  327. [/class]
  328. [class name=rcontent maxWidth=850px]
  329. flex: 0 0 100%;
  330. display: block;
  331. [/class]
  332. [class name=rrole]
  333. display: block;
  334. width: 100%;
  335. font-size: 2em;
  336. box-sizing: border-box;
  337. color: var(--accentcolor);
  338. text-transform: uppercase;
  339. font-family: 'Inconsolata', monospace;
  340. [/class]
  341. [class name=rtext]
  342. display: block;
  343. margin-top: 5px;
  344. white-space: pre-line;
  345. [/class]
  346. [class name=output]
  347. display: none;
  348. [/class]
  349. [class name=infoarray]
  350. display: none;
  351. [/class]
  352.  
  353. [comment]variables[/comment]
  354. [class name=variables]
  355. --mainimg: #fdfdfd url(https://i.imgur.com/hzrATSW.jpg) center center/cover no-repeat;
  356. --iconimg: #fdfdfd url(https://i.imgur.com/G1jCh22.jpg) center center/cover no-repeat;
  357. [/class]
  358. [class name=freesia]
  359. --rimg: #fdfdfd url(https://i.imgur.com/G1jCh22.jpg) center center/cover no-repeat;
  360. [/class]
  361. [class name=daffodil]
  362. --rimg: #fdfdfd url(https://i.imgur.com/hzrATSW.jpg) center center/cover no-repeat;
  363. [/class]
  364. [class name=gardenia]
  365. --rimg: #fdfdfd url(https://i.imgur.com/hzrATSW.jpg) center center/cover no-repeat;
  366. [/class]
  367. [class name=erica]
  368. --rimg: #fdfdfd url(https://i.imgur.com/hzrATSW.jpg) center center/cover no-repeat;
  369. [/class]
  370. [class name=iris]
  371. --rimg: #fdfdfd url(https://i.imgur.com/hzrATSW.jpg) center center/cover no-repeat;
  372. [/class]
  373. [class name=hydrangea]
  374. --rimg: #fdfdfd url(https://i.imgur.com/hzrATSW.jpg) center center/cover no-repeat;
  375. [/class]
  376. [class name=primrose]
  377. --rimg: #fdfdfd url(https://i.imgur.com/hzrATSW.jpg) center center/cover no-repeat;
  378. [/class]
  379.  
  380. [script class="englishtxt" on=click version=2]
  381. (removeClass "tabbtnselect" "tabbtn")
  382. (addClass "tabcontenthide" "tabcontent")
  383.  
  384. (= currenttab (trim (getText)))
  385.  
  386. (addClass "tabbtnselect" (+ currenttab "btn"))
  387. (removeClass "tabcontenthide" (+ currenttab "tab"))
  388. [/script]
  389.  
  390. [script class="aspectratio" version=2]
  391. (= basics (split (getText "infoarray") "#"))
  392. (each basics (group
  393. (= cvalue (getText (+ _ "output")))
  394. (setText cvalue (+ _ "content"))
  395. ))
  396.  
  397. (hide "rblock")
  398.  
  399. (= rarray (split (getText "rrolearray") "#"))
  400. (each rarray (group
  401. (= rvalue (lower (trim (index (split _ "$") 0))))
  402. (addClass rvalue (+ rvalue "block"))
  403. (show (+ rvalue "block"))
  404. (= rtext (trim (index (split _ "$") 1)))
  405. (setText rtext (+ rvalue "text"))
  406. ))
  407. [/script]
  408.  
  409.  
  410. [/nobr][div class="infoarray"]fullname#chunmi#role#age#gender#personality#biography#miscellaneous[/div][div class="aspectratio variables"][div class="maincontainer"][div class="pagetitle"][div class="reqtext fullnamecontent"]NAME HERE[/div] (@[div class="reqtext chunmicontent"]CHUNMI[/div])[/div][div class="imgcontainer"][div class="imgfilter"][USER=32692]@sugarvine[/USER][/div][/div][div class="textarea"][div class="rowflex"][div class="smallimgcontainer"][div class="imgfilter"][USER=32692]@sugarvine[/USER][/div][/div][div class="basicinfo"][div class="infoblock"][div class="metadata"]name[/div][div class="data fullnamecontent"]name[/div][/div][div class="infoblock"][div class="metadata"]role[/div][div class="data rolecontent"]role here[/div][/div][div class="infoblock"][div class="metadata"]age[/div][div class="data agecontent"]age here (#)[/div][/div][div class="infoblock"][div class="metadata"]gender[/div][div class="data gendercontent"]gender here[/div][/div][/div][/div][div class="rowflex"][div class="tabbtn personalitybtn tabbtnselect"]性格[div class="englishtxt personalitytxt tabbtnselect"]personality[/div][/div][div class="tabbtn biographybtn"]略歴[div class="englishtxt biographytxt"]biography[/div][/div][div class="tabbtn miscellaneousbtn"]雑記[div class="englishtxt miscellaneoustxt"]miscellaneous[/div][/div][div class="tabbtn relationsbtn"]関係[div class="englishtxt miscellaneoustxt"]relations[/div][/div][/div][div class="tabbg"][div class="tabcontent personalitytab"][div class="scrollbox personalitycontent"]personality[/div][/div][div class="tabcontent biographytab tabcontenthide"][div class="scrollbox biographycontent"]biography[/div][/div][div class="tabcontent miscellaneoustab tabcontenthide"][div class="scrollbox miscellaneouscontent"]misc[/div][/div][div class="tabcontent relationstab tabcontenthide"][div class="scrollbox"][div class="rblock freesiablock freesia"][div class="rimgcontainer"][div class="imgfilter"][USER=32692]@sugarvine[/USER][/div][div style="display: none;"]#[/div][/div][div class="rcontent"][div class="rrole"][b]freesia[/b][/div][div style="display: none;"]#[/div][div class="rtext freesiatext"]freesia desc[/div][/div][/div][div class="rblock daffodilblock daffodil"][div class="rimgcontainer"][div class="imgfilter"][USER=32692]@sugarvine[/USER][/div][div style="display: none;"]#[/div][/div][div class="rcontent"][div class="rrole"][b]daffodil[/b][/div][div style="display: none;"]#[/div][div class="rtext daffodiltext"]daffodil desc[/div][/div][/div][div class="rblock gardeniablock gardenia"][div class="rimgcontainer"][div class="imgfilter"][USER=32692]@sugarvine[/USER][/div][div style="display: none;"]#[/div][/div][div class="rcontent"][div class="rrole"][b]gardenia[/b][/div][div style="display: none;"]#[/div][div class="rtext gardeniatext"]gardenia desc[/div][/div][/div][div class="rblock ericablock erica"][div class="rimgcontainer"][div class="imgfilter"][USER=32692]@sugarvine[/USER][/div][div style="display: none;"]#[/div][/div][div class="rcontent"][div class="rrole"][b]erica[/b][/div][div style="display: none;"]#[/div][div class="rtext ericatext"]erica desc[/div][/div][/div][div class="rblock irisblock iris"][div class="rimgcontainer"][div class="imgfilter"][USER=32692]@sugarvine[/USER][/div][div style="display: none;"]#[/div][/div][div class="rcontent"][div class="rrole"][b]iris[/b][/div][div style="display: none;"]#[/div][div class="rtext iristext"]primrose desc[/div][/div][/div][div class="rblock hydrangeablock hydrangea"][div class="rimgcontainer"][div class="imgfilter"][USER=32692]@sugarvine[/USER][/div][div style="display: none;"]#[/div][/div][div class="rcontent"][div class="rrole"][b]hydrangea[/b][/div][div style="display: none;"]#[/div][div class="rtext hydrangeatext"]hydrangea desc[/div][/div][/div][div class="rblock primroseblock primrose"][div class="rimgcontainer"][div class="imgfilter"][USER=32692]@sugarvine[/USER][/div][div style="display: none;"]#[/div][/div][div class="rcontent"][div class="rrole"][b]primrose[/b][/div][div style="display: none;"]#[/div][div class="rtext primrosetext"]primrose desc[/div][/div][/div][/div][/div][/div][/div][/div][/div][/export][comment]cs
  411.  
  412.  
  413.  
  414. [/comment]
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!