API tools faq
paste
Advertisement
Guest User

Operative.Code

a guest
Feb 6th, 2020
55
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 36.01 KB | None | 0 0
raw download clone embed print report
  1. [nobr]
  2.  
  3.  
  4. [comment]
  5. Designed and coded by Nano.
  6. Please do not remove the credits or claim the code as your own work.
  7. [/comment]
  8.  
  9.  
  10. [comment]--------------------CS Details--------------------[/comment]
  11.  
  12. [div class="borderline"]
  13. [div class="bgmain"]
  14. [div class="flexwrap"]
  15. [div class="imgwrapper"]
  16. [div class="imgmain"]
  17. [div class="nameplate clicker"]
  18. [div class="name"]
  19. elise friedhelm
  20. [/div]
  21. [div class="instruct"]
  22. click to access files
  23. [/div]
  24. [/div]
  25. [/div]
  26. [/div]
  27. [div class="rwrapper"]
  28. [div class="tabwrap"]
  29. [div class="tabs basicstabs tabselect" style="max-width: 49px;"][div=display: none;]basics#[/div]
  30. basics
  31. [/div]
  32. [div class="tabs historytabs" style="max-width: 61px;"][div=display: none;]history#[/div]
  33. history
  34. [/div]
  35. [div class="tabs abilitytabs" style="max-width: 54px;"][div=display: none;]ability#[/div]
  36. ability
  37. [/div]
  38. [div class="tabs extratabs" style="max-width: 45px;"][div=display: none;]extra#[/div]
  39. extra
  40. [/div]
  41. [div class="hometab unclicker"]
  42. home
  43. [/div]
  44. [/div]
  45. [div class="contentbox"]
  46. [div class="content basicsinfo"]
  47. [div class="categorywrap"]
  48. [div class="circle"]
  49. [/div]
  50. [div class="category"]
  51. basic information
  52. [/div]
  53. [/div]
  54. [div class="categorybox"]
  55. [div class="listwrap"]
  56. [div class="question"]
  57. name
  58. [/div]
  59. [div class="answer"]
  60. elise friedhelm
  61. [/div]
  62. [/div]
  63. [div class="listwrap"]
  64. [div class="question"]
  65. nicknames
  66. [/div]
  67. [div class="answer"]
  68. ellie
  69. [/div]
  70. [/div]
  71. [div class="listwrap"]
  72. [div class="question"]
  73. age
  74. [/div]
  75. [div class="answer"]
  76. nineteen (19)
  77. [/div]
  78. [/div]
  79. [div class="listwrap"]
  80. [div class="question"]
  81. role
  82. [/div]
  83. [div class="answer"]
  84. 2nd generation student
  85. [/div]
  86. [/div]
  87. [div class="listwrap"]
  88. [div class="question"]
  89. marking
  90. [/div]
  91. [div class="answer"]
  92. back of hand (left)
  93. [/div]
  94. [/div]
  95. [/div]
  96.  
  97. [div class="categorywrap"]
  98. [div class="circle"]
  99. [/div]
  100. [div class="category"]
  101. appearance
  102. [/div]
  103. [/div]
  104. [div class="categorybox"]
  105. [div class="listwrap"]
  106. [div class="question"]
  107. height
  108. [/div]
  109. [div class="answer"]
  110. 5'0" (153cm)
  111. [/div]
  112. [/div]
  113. [div class="listwrap"]
  114. [div class="question"]
  115. weight
  116. [/div]
  117. [div class="answer" style="margin-bottom: 10px;"]
  118. 119lbs (54kg);
  119. [/div]
  120. [/div]
  121. In spite of her mature demeanor, Elise is neither particularly blessed in height nor does her subtle muscle tone show through her clothes. With every fiber of her clothes and strand of her ash blonde hair perfectly set, she comes off as more so an elegant young lady than a warrior. However, as a true specialist, any who have seen her use those deceptively thin arms to hoist up her near-comically massive shield know her as one of the best amongst her peers when it comes to defensive counters.
  122.  
  123. [br][/br][br][/br]
  124.  
  125. As a side note, she tends to wear a pair of open palm black gloves to cover the mark on the back of her left hand without obstructing her grip on her shield.
  126. [/div]
  127.  
  128. [div class="categorywrap"]
  129. [div class="circle"]
  130. [/div]
  131. [div class="category"]
  132. personality
  133. [/div]
  134. [/div]
  135. [div class="categorybox"]
  136. Shy but optimistic and compassionate, Elise was often compared to the likes of a sunflower that always faced the sunlit path. Her reserved nature and crybaby tendencies thoroughly convinced her that she was the least outstanding of the seven 2nd generation OtherWorlders, yet all knew and acknowledged her merits both on and off of the battlefield. In spite of her lack of offensive contributions, her specialty as a stalwart defensive pillar and moral support served as one of the backbones of her generation. No matter how much her spirit was shaken, she never despaired and her determination burned brilliantly—until the events from a year ago.
  137.  
  138. [br][/br][br][/br]
  139.  
  140. In one night, the crybaby lost her ability to shed tears; her naive expressions were forcibly moulded into ones that were much more mature. It wasn’t as if she had devolved into a cold tyrant, yet there was a sense of a subtle change in the girl who had once smiled so freely. If someone came up to her, her words were still as gentle as before, but there was a much more placid quality to her tone, not out of shyness but weariness. Gradually, the barriers increased, and she began to refuse to consult even her old friends and comrades about her internal conflicts. It was as if she believed that it was a weight she could not afford to burden others with ever again: her shield was hers alone to bear.
  141.  
  142. [br][/br][br][/br]
  143.  
  144. Most notably, the girl who had seemed to be oblivious to fury and resentment acquired the taste of bitterness and anger. Where she would have once mediated between two incenses individuals, there now exists moments in which she may impulsively fan the flames or start the altercation herself. This behavior is most often roused when the topic of [i]The Incident[/i] from a year ago arises. She is particularly unforgiving towards those who badmouth her fallen comrades, especially Rei Fey and the Professor. For they were people who had sacrificed themselves for this foreign land. Nothing they had done deserved public scorn.
  145. [/div]
  146.  
  147. [div class="categorywrap"]
  148. [div class="circle"]
  149. [/div]
  150. [div class="category"]
  151. preferences
  152. [/div]
  153. [/div]
  154. [div class="categorybox"]
  155. [div class="listwrap"]
  156. [div class="column"]
  157. [b]LIKES[/b][br][/br]
  158. - glass marbles[br][/br]
  159. - floral accessories[br][/br]
  160. - muscat oolong[br][/br]
  161. - curry[br][/br]
  162. - dalgona[br][/br]
  163. - making sweets[br][/br]
  164. - the book thief[br][/br][br][/br]
  165. [/div]
  166. [div class="column"]
  167. [b]DISLIKES[/b][br][/br]
  168. - gossipmongers[br][/br]
  169. - hypocrites[br][/br]
  170. - chewing noises[br][/br]
  171. - insects[br][/br]
  172. - cilantro[br][/br]
  173. - bitter melon[br][/br]
  174. - wool sweaters
  175. [/div]
  176. [/div]
  177. [/div]
  178.  
  179. [div class="spacer"]
  180. [/div]
  181. [/div]
  182. [div class="content historyinfo hidecontent"]
  183. [div class="categorywrap"]
  184. [div class="circle"]
  185. [/div]
  186. [div class="category"]
  187. background
  188. [/div]
  189. [/div]
  190. [div class="categorybox"]
  191. Her father was a highly acclaimed screenwriter, her mother was an employee at a top tech firm, her elder brother was an academic genius, and her elder sister was a musical virtuoso. Then, there was the Friedhelm’s mediocre youngest child, as if their blood’s talent had run dry.
  192.  
  193. [br][/br][br][/br]
  194.  
  195. “Such a pity,” said many with a sigh, feeling sorry for the Elise who was the very definition of mediocrity born into a house of geniuses. However, the small girl would meet their patronizing gazes with a gentle smile free of worries. She didn’t covet her siblings’ trophies; no ribbon on her bedroom wall could amount to her family’s unconditional love. Towards the Elise who cheered them on while radiating happiness, her family asked for nothing more than just that. Regardless of her shortcomings, she was their precious daughter and youngest sibling, and the child herself felt content with her lot in life as long as she could continue to smile by her family’s side.
  196.  
  197. [br][/br][br][/br]
  198.  
  199. When had that changed? No, when had she finally noticed? Having grown complacent with her lack of talent and desire, she had long convinced herself that her mediocrity was inevitable. Like a harsh slap, someone, with a look of disgust distorting their face, rebuked her with the words, “in the end, that’s just an excuse to avoid failure instead of putting in your best effort.” Yet her epiphany arrived far too late, for she was a child who had developed neither hobbies nor ambitions.
  200.  
  201. [br][/br][br][/br]
  202.  
  203. Still, she understood that the startline, no matter how late, was the turning point of every development. Though completely aimless, she strove to increase her grades and made other small goals for herself as the first step. Enlisting her parents and siblings for aid in her studies, she began to see steady improvements in her grades—and an observation that she would have rather never noticed.
  204.  
  205. [br][/br][br][/br]
  206.  
  207. Her family loved and accepted her for who she was, yet she could finally tell that behind their smiles hid subtle sighs and hints of disappointment in their eyes, expressing thoughts of, “why can’t she understand something so simple?” It was as if she were but a puppy in their eyes: affectionate and perfectly lovable, but a creature incapable of reaching the same view of the world that they possessed. Instead of words of encouragement, questions asking whether she was pushing herself too hard and statements that she should stay as is were haphazardly tossed her way.
  208.  
  209. [br][/br][br][/br]
  210.  
  211. Was this truly how it felt to “belong?” To be treated as a precious decoration?
  212.  
  213. [br][/br][br][/br]
  214.  
  215. She had grown past her false sense of fulfillment in indolence, only to learn that the people she loved most had never trusted her as an equal.
  216.  
  217. [br][/br][br][/br]
  218.  
  219. As if symbolizing the closing off of her heart, she then discovered her ability to create invisible walls around herself. For a year, she used this power as discreetly as she possibly could to avoid people. However, as soon as she began to bear the thoughts of isolating herself forever, she found herself in a strange place: a foreign world.
  220.  
  221. [br][/br][br][/br]
  222.  
  223. Despite her reserved and passive nature, she quickly found herself settling comfortably into the ranks of her fellow otherworlders. To them, she was just “Elise,” not a Friedhelm or the disappointing daughter of a genius. Away from the judging eyes of her original world, the girl began to thrive for the first time. Though her achievements as a defensive support weren’t nearly as highly praised as her comrades, she was proud of both herself and her friends nonetheless. However, no one expected the tragedy of the Fangen Theater incident.
  224.  
  225. [br][/br][br][/br]
  226.  
  227. "I'll be fine! Focus on shielding the civilians!"
  228.  
  229. [br][/br][br][/br]
  230.  
  231. Those were the last words she heard from Luri, her best friend since her arrival in the world. Though Elise had been left shell-shocked by Rei Fey’s sudden mania, Luri’s words and confidence snapped her focus back to the matter at hand. With a nod of her head, she headed back towards the crowd, setting up boundaries and raising her shield to fend off the falling rubble and monsters alike.
  232.  
  233. [br][/br][br][/br]
  234.  
  235. Though exhausted by the overuse of her powers, Elise, noticing her friend was still missing, made a final trip back into the building. However, her panic had left her blind to the debris crashing down from above, thus deploying her shield far too late. It was then that she laid her eyes upon her friend being overwhelmed by monsters amidst the rubble. Yet no matter how she willed her body, it refused to move.
  236.  
  237. [br][/br][br][/br]
  238.  
  239. The last thing she could recall before blacking out was Luri being devoured.
  240.  
  241. [br][/br][br][/br]
  242.  
  243. A day later, Elise learned that by some miracle, she had remained undetected by the monsters, and a student had managed to drag her back out of the building in time. Unfortunately, what she had seen before losing consciousness was the hard truth—her friend had not shared in her fortune.
  244.  
  245. [br][/br][br][/br]
  246.  
  247. Ever since, the questionable details of the incident never left her mind. She’d discover the truth for Professor Yue, for Rei Fey and the other late 2nd generation students, and, most importantly, for Luri.
  248. [/div]
  249.  
  250. [div class="spacer"]
  251. [/div]
  252. [/div]
  253. [div class="content abilityinfo hidecontent"]
  254. [div class="categorywrap"]
  255. [div class="circle"]
  256. [/div]
  257. [div class="category"]
  258. powers
  259. [/div]
  260. [/div]
  261. [div class="categorybox"]
  262. [b][MAJOR: BOUNDARY][/b] For what she lacks in offensive power, Elise is blessed with a high aptitude for supporting her team brought about by her unique ability to “draw boundaries” as she calls it. At its core, this ability merely exists as a singular action: to create a line that separates. However, years of experience has cultivated various techniques derived from this singular action, making it a truly flexible ability.
  263.  
  264. [br][/br][br][/br]
  265.  
  266. As an ability whose sole purpose is to separate, Elise’s boundaries strictly adhere to that law of separation. Though it has led to certain interesting applications such as using the act of “separating the feet from the ground” to use a boundary’s repulsive force to aid a target’s jump, the ability is hence accompanied by the rule that it requires at least one “anchor” at all times. That is, Elise cannot draw a boundary without the intention to separate or completely isolate “something” from “other things.” Furthermore, Elise’s current level of stamina and familiarity with the anchor is directly proportional to the maximum applicable strength of her boundaries. As a result, friends and close comrades are always granted stronger remote shielding as compared to complete strangers. She is also far more proficient at caging monsters whose type she has run into several times rather than at her first encounter with them. Even then, her boundaries are not completely shatter-proof.
  267.  
  268. [br][/br][br][/br]
  269.  
  270. Due to the aforementioned stipulations, Elise’s ability was limited to reinforcing her shield and creating a barrier before it at the start of her first year at the academy, and her shield still remains as the anchor capable of hosting her most sturdy boundaries. However, the gradual increase in her understanding and command over her boundaries has nurtured the ability to remotely cast barriers over allies and later utilize her boundaries to entrap targets within cages should the need arise. This finer control over her ability has also expanded to manipulating the exact shape her boundaries take, such as spike-like structures on the outer walls of her boundaries to further discourage things from attacking her boundaries, though they provide very little damage coverage. Other resultant physical applications consist of creating a soundproof (and potentially other senses) bubble, and, at its most malicious of uses, an airtight bubble. However, she feels the latter application is both immoral and difficult to pull off due to the energy consumption and expectation that whoever is trapped inside should be able to break the boundary after just a few hits.
  271.  
  272. [br][/br][br][/br]
  273.  
  274. During her Sophomore year, she also discovered that this ability to separate was not limited to the physical when she found out that she could use her boundary to separate the mind from outside influences, theoretically shielding them from mental abilities such as mind control. However, her current level of control over this type of boundary is shaky and is more to stall for time rather than completely prevent it. Incidentally, she regrets that she had not discovered and developed this facet of her power sooner...
  275.  
  276. [br][/br][br][/br]
  277.  
  278. Furthermore, her power is a preventative measure and not a cure. If the proposed anchor is already connected to something else, she cannot create a boundary to forcefully separate the two. For example, if she wished to create a boundary around a weapon to prevent someone from accessing it, someone else would have to knock it out of that person’s hand first. She also cannot use another boundary as an anchor, meaning that she currently cannot stack barriers, leaving her at a disadvantage when using her more fragile boundaries.
  279.  
  280. [br][/br][br][/br]
  281.  
  282. [b][MINOR: STRENGTH][/b] Though its effects are minimal compared to others with strength augmenting abilities, Elise’s boosted strength allows her to carry and deploy her shield with ease in spite of its weight. Because she isn’t suited for martial arts, she doesn’t use her strength for much else.
  283. [/div]
  284.  
  285. [div class="categorywrap"]
  286. [div class="circle"]
  287. [/div]
  288. [div class="category"]
  289. weapons
  290. [/div]
  291. [/div]
  292. [div class="categorybox"]
  293. [b][ANDRASTE][/b] Andraste, meaning “indestructible” or “unconquerable”, is the weapon that was custom made for Elise Friedhelm upon her initiation into the academy. True to its name, Andraste is a black mechanical shield forged with special alloys and a particular structure meant to defend against heavy impacts. Though its drawback is that it’s heavy to the point where the average civilian cannot lift it, Elise’s natural ability and further training allows her to carry and swing around her shield seemingly with little effort in spite of her petite stature and demure looks.
  294.  
  295. [br][/br][br][/br]
  296.  
  297. Due to its full size nearly reaching Elise’s own height, Andraste was built with the intention of being collapsed into a rectangular mass approximately the size of a violin case. Complete with a shoulder strap, the shield is often seen slung over the girl’s shoulder when in transit, ready to be deployed at a moment’s notice.
  298.  
  299. [br][/br][br][/br]
  300.  
  301. Incidentally, Elise has used her shield to sled down a snowy slope at some point on a childish whim. She received a lengthy lecture from Professor Yue afterwards.
  302. [/div]
  303.  
  304. [div class="spacer"]
  305. [/div]
  306. [/div]
  307. [div class="content extrainfo hidecontent"]
  308. [div class="categorywrap"]
  309. [div class="circle"]
  310. [/div]
  311. [div class="category"]
  312. notes
  313. [/div]
  314. [/div]
  315. [div class="categorybox"]
  316. [b][1][/b] The flower accessory that Elise always wears in her hair was a pre-graduation gift from Luri. She considers it to be a good luck charm for missions, as well as a reminder of her past failures.
  317. [/div]
  318.  
  319. [div class="categorywrap"]
  320. [div class="circle"]
  321. [/div]
  322. [div class="category"]
  323. gallery
  324. [/div]
  325. [/div]
  326. [div class="categorybox" style="text-align: left;"]
  327. [IMG]https://i.imgur.com/EzwysM6.jpg[/IMG]
  328. [/div]
  329.  
  330. [div class="spacer"]
  331. [/div]
  332. [/div]
  333. [/div]
  334. [/div]
  335. [/div]
  336. [/div]
  337. [/div]
  338. [div=margin: -5px auto 25px; width: 100%; max-width: 1050px; text-align: right; opacity: 0.6;][size=1]code by [USER=20950]@Nano[/USER][color=transparent]x[/color][/size][/div]
  339.  
  340. [comment]
  341. [font=Expletus Sans]font[/font]
  342. [font=Roboto]font[/font]
  343. [/comment]
  344.  
  345. [comment]--------------------CSS--------------------[/comment]
  346.  
  347. [class name="borderline"]
  348. --accent: #b72c27;
  349. --hcolor: #282828;
  350. --bcolor: #fcfcfc;
  351. --header: 'Expletus Sans', cursive;
  352. --body: 'Roboto', sans-serif;
  353. --h1: 35px;
  354. --h2: 25px;
  355. --s1: 14px;
  356. --s2: .8em;
  357. --fa: 30px;
  358. --LH: 150%;
  359. margin: 25px auto 0;
  360. padding: 25px;
  361. width: calc(100% - 52px);
  362. max-width: 1000px;
  363. height: 500px;
  364. border: 1px solid #e8e8e8;
  365. font-size: initial;
  366. [/class]
  367.  
  368. [class name="bgmain"]
  369. margin: 0 auto;
  370. width: 100%;
  371. max-width: 1000px;
  372. height: 500px;
  373. background: url('https://i.imgur.com/UWdpTmY.jpg') right center/1000px 500px no-repeat;
  374. [/class]
  375.  
  376. [class name="flexwrap" minWidth=750px]
  377. display: flex;
  378. flex-flow: row wrap;
  379. margin-left: -20px;
  380. width: calc(100% + 20px);
  381. max-width: 1020px;
  382. height: 500px;
  383. [/class]
  384.  
  385. [class name="flexwrap" maxWidth=749px]
  386. width: 100%;
  387. max-width: 550px;
  388. height: 500px;
  389. [/class]
  390.  
  391. [class name="imgwrapper" minWidth=750px]
  392. display: flex;
  393. flex-direction: row;
  394. justify-content: center;
  395. margin-left: 20px;
  396. flex: 1 0 300px;
  397. width: calc(100% - 20px);
  398. max-width: 1000px;
  399. height: 500px;
  400. overflow: hidden;
  401. [/class]
  402.  
  403. [class name="imgmain" minWidth=750px]
  404. display: flex;
  405. flex-direction: row;
  406. justify-content: center;
  407. margin-left: 0px;
  408. width: 100%;
  409. max-width: 550px;
  410. height: 500px;
  411. background: url('https://i.imgur.com/uINparG.png') right center/550px 500px no-repeat;
  412. position: relative;
  413. [/class]
  414.  
  415. [class name="imgmain" maxWidth=749px]
  416. display: flex;
  417. flex-direction: row;
  418. justify-content: center;
  419. width: 100%;
  420. max-width: 550px;
  421. height: 500px;
  422. background: url('https://i.imgur.com/uINparG.png') 65% 50%/550px 500px no-repeat;
  423. opacity: 1;
  424. position: relative;
  425. transition: opacity 0.7s ease-in-out 2.1s, height 0.1s ease 2.0s, width 0.1s ease 2.0s;
  426. [/class]
  427.  
  428. [class name="fade" maxWidth=749px]
  429. opacity: 0;
  430. height: 0;
  431. width: 0;
  432. transition: opacity 0.7s ease-in-out 1.0s, height 1.7s step-end, width 1.7s step-end;
  433. [/class]
  434.  
  435. [class name="nameplate" minWidth=750px]
  436. display: flex;
  437. flex-direction: column;
  438. justify-content: center;
  439. margin-left: 50px;
  440. top: calc(50% - 50px);
  441. width: calc(90% - 50px);
  442. max-width: 400px;
  443. height: 100px;
  444. background-color: rgba(252, 252, 252, 0.7);
  445. opacity: 1.0;
  446. position: relative;
  447. cursor: pointer;
  448. transition: opacity 0.7s ease-in-out 3.8s, height 0.1s ease 3.7s, width 0.1s ease 3.7s;
  449. [/class]
  450.  
  451. [class name="nameplate" maxWidth=749px]
  452. display: flex;
  453. flex-direction: column;
  454. justify-content: center;
  455. top: calc(50% - 50px);
  456. width: 90%;
  457. max-width: 300px;
  458. height: 100px;
  459. background-color: rgba(252, 252, 252, 0.7);
  460. opacity: 1.0;
  461. position: relative;
  462. cursor: pointer;
  463. transition: opacity 0.7s ease-in-out 2.9s, height 0.1s ease 2.8s, width 0.1s ease 2.8s;
  464. [/class]
  465.  
  466. [class name="nameselect"]
  467. height: 0;
  468. width: 0;
  469. opacity: 0;
  470. transition: opacity 0.7s ease-in-out 0.2s, height 0.9s step-end, width 0.9s step-end;
  471. [/class]
  472.  
  473. [class name="name"]
  474. width: 100%;
  475. font-family: var(--header);
  476. font-size: var(--h1);
  477. color: var(--accent);
  478. text-transform: uppercase;
  479. text-align: center;
  480. font-weight: bold;
  481. line-height: 100%;
  482. [/class]
  483.  
  484. [class name="instruct"]
  485. width: 100%;
  486. font-family: var(--header);
  487. font-size: var(--s2);
  488. color: var(--hcolor);
  489. text-transform: uppercase;
  490. text-align: center;
  491. font-weight: bold;
  492. line-height: 100%;
  493. [/class]
  494.  
  495. [class name="rwrapper" minWidth=750px]
  496. box-sizing: border-box;
  497. margin-left: 20px;
  498. padding: 20px 20px 20px 0;
  499. flex: 0;
  500. width: 0;
  501. max-width: 1000px;
  502. height: 500px;
  503. opacity: 0;
  504. position: relative;
  505. transition: width 2.0s ease-in-out 1.7s, flex 2.0s ease-in-out 1.7s, opacity 0.7s ease-in-out 1.0s;
  506. [/class]
  507.  
  508. [class name="rwrapper" maxWidth=749px]
  509. box-sizing: border-box;
  510. padding: 20px;
  511. width: 0;
  512. max-width: 1000px;
  513. height: 500px;
  514. opacity: 0;
  515. transition: width 0.1s ease-in-out 1.7s, opacity 0.7s ease-in-out 1.0s;
  516. [/class]
  517.  
  518. [class name="shift" minWidth=750px]
  519. flex: 5 0 300px;
  520. width: 100%;
  521. opacity: 1;
  522. transition: width 2.0s ease-in-out 0.9s, flex 2.0s ease-in-out 0.9s, opacity 0.7s ease-in-out 2.9s;
  523. [/class]
  524.  
  525. [class name="shift" maxWidth=749px]
  526. width: 100%;
  527. opacity: 1;
  528. transition: width 0.1s ease-in-out 1.7s, opacity 0.7s ease-in-out 1.9s;
  529. [/class]
  530.  
  531. [class name="tabwrap"]
  532. margin-left: -5%;
  533. display: flex;
  534. flex-flow: row wrap;
  535. justify-content: flex-end;
  536. width: 100%;
  537. height: 30px;
  538. position: relative;
  539. z-index: 2;
  540. [/class]
  541.  
  542. [class name="tabs"]
  543. margin-left: 15px;
  544. flex: 1 0 30px;
  545. max-width: 50px;
  546. font-size: var(--s1);
  547. line-height: 200%;
  548. color: var(--bcolor);
  549. text-transform: uppercase;
  550. font-weight: bold;
  551. cursor: pointer;
  552. transition: color .7s ease .2s;
  553. [/class]
  554.  
  555. [class name="tabs" state=hover]
  556. color: var(--accent);
  557. transition: color .7s ease .2s;
  558. [/class]
  559.  
  560. [class name="tabselect"]
  561. color: var(--accent);
  562. transition: color .7s ease .2s;
  563. [/class]
  564.  
  565. [class name="hometab"]
  566. margin-left: 15px;
  567. flex: 1 0 30px;
  568. max-width: 43px;
  569. font-size: var(--s1);
  570. line-height: 200%;
  571. color: var(--bcolor);
  572. text-transform: uppercase;
  573. font-weight: bold;
  574. cursor: pointer;
  575. transition: color .7s ease .2s, max-width .7s ease .2s;
  576. [/class]
  577.  
  578. [class name="hometab" state=hover]
  579. color: var(--accent);
  580. transition: color .7s ease .2s;
  581. [/class]
  582.  
  583. [class name="contentbox"]
  584. margin-top: 15px;
  585. width: 0;
  586. height: 0;
  587. opacity: 0;
  588. overflow: hidden;
  589. position: relative;
  590. transition: opacity 0.7s ease-in-out 0.2s, height 0.9s step-end, width 0.9s step-end;
  591. [/class]
  592.  
  593. [class name="unfade" minWidth=750px]
  594. width: 100%;
  595. height: 415px;
  596. opacity: 1;
  597. transition: opacity 0.7s ease-in-out 3.7s, height 0.1s ease 3.6s, width 0.1s ease 3.6s;
  598. [/class]
  599.  
  600. [class name="unfade" maxWidth=749px]
  601. width: 100%;
  602. height: 415px;
  603. opacity: 1;
  604. transition: opacity 0.7s ease-in-out 2.7s, height 0.1s ease 2.6s, width 0.1s ease 2.6s;
  605. [/class]
  606.  
  607. [class name="content"]
  608. padding: 20px 38px 0px 20px;
  609. width: calc(100% - 40px);
  610. height: 415px;
  611. background: rgba(40, 40, 40, 0.6);
  612. overflow-y: auto;
  613. opacity: 1;
  614. position: absolute;
  615. transition: opacity 0.7s ease-in-out 0.9s;
  616. [/class]
  617.  
  618. [class name="hidecontent"]
  619. opacity: 0;
  620. pointer-events: none;
  621. transition: opacity 0.7s ease-in-out 0.1s;
  622. [/class]
  623.  
  624. [class name="categorywrap"]
  625. display: flex;
  626. flex-flow: row nowrap;
  627. margin-left: -15px;
  628. width: 100%;
  629. height: 40px;
  630. [/class]
  631.  
  632. [class name="circle"]
  633. margin-left: 15px;
  634. flex: 1 0 40px;
  635. max-width: 40px;
  636. height: 40px;
  637. border-radius: 20px;
  638. background-color: var(--accent);
  639. [/class]
  640.  
  641. [class name="category"]
  642. margin-left: 15px;
  643. flex: 5 0 100px;
  644. width: 100%:
  645. font-family: var(--header);
  646. font-size: var(--h2);
  647. color: var(--hcolor);
  648. line-height: 150%;
  649. text-transform: uppercase;
  650. font-weight: bold;
  651. [/class]
  652.  
  653. [class name="categorybox"]
  654. margin-top: -5px;
  655. margin-left: 20px;
  656. padding: 20px 20px 25px 20px;
  657. width: calc(100% - 42px);
  658. border-left: 3px solid var(--accent);
  659. font-family: var(--text);
  660. font-size: var(--s1);
  661. color: var(--bcolor);
  662. line-height: var(--LH);
  663. text-align: justify;
  664. [/class]
  665.  
  666. [class name="spacer"]
  667. height: 60px;
  668. [/class]
  669.  
  670. [class name="listwrap"]
  671. display: flex;
  672. flex-flow: row wrap;
  673. width: 100%;
  674. text-align: left;
  675. [/class]
  676.  
  677. [class name="question"]
  678. flex: 1 0 100px;
  679. font-family: var(--text);
  680. font-size: var(--s1);
  681. color: var(--text);
  682. line-height: (--LH);
  683. font-weight: bold;
  684. text-transform: uppercase;
  685. [/class]
  686.  
  687. [class name="answer"]
  688. flex: 5 0 100px;
  689. font-family: var(--text);
  690. font-size: var(--s1);
  691. color: var(--text);
  692. line-height: var(--LH);
  693. text-transform: uppercase;
  694. [/class]
  695.  
  696. [class name="column"]
  697. flex: 1 0 100px;
  698. font-family: var(--text);
  699. font-size: var(--s1);
  700. color: var(--text);
  701. line-height: var(--LH);
  702. [/class]
  703.  
  704. [comment]--------------------SCRIPTS--------------------[/comment]
  705.  
  706. [script class=clicker on=click]
  707. addClass nameselect nameplate
  708. addClass fade imgmain
  709. addClass shift rwrapper
  710. addClass unfade contentbox
  711. fadeOut 900 name
  712. fadeOut 900 instruct
  713. [/script]
  714.  
  715. [script class=unclicker on=click]
  716. removeClass nameselect nameplate
  717. removeClass fade imgmain
  718. removeClass shift rwrapper
  719. removeClass unfade contentbox
  720. fadeIn 900 name
  721. fadeIn 900 instruct
  722. [/script]
  723.  
  724. [script class="tabs" version=2]
  725. (= select "basics")
  726. [/script]
  727.  
  728. [script class="tabs" version=2 on=click]
  729. (addClass "hidecontent" "content")
  730. (removeClass "tabselect" "tabs")
  731.  
  732. (= select (index (split (getText) "#") 0 ))
  733.  
  734. (addClass "tabselect" (+ select "tabs"))
  735. (removeClass "hidecontent" (+ select "info"))
  736. [/script]
  737.  
  738.  
  739. [/nobr]
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!