API tools faq
paste
glucoseguardian

absolutezero 1.0

glucoseguardian
Dec 8th, 2024 (edited)
139
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 35.83 KB | None | 0 0
raw download clone embed print report
  1. [nobr]
  2. [div=display: none;]
  3. [font=Oxanium][USER=32692]@fluticasone[/USER][/font]
  4. [font=Micro 5][USER=32692]@fluticasone[/USER][/font]
  5. find the fillable areas with $$
  6. feel free to replace any FA icons with ones of your choosing
  7. [/div]
  8. [div=font-size: initial; /* root class */
  9. --bwFilter: saturate(0%) contrast(110%); /* adjust as needed for your images */
  10. --charaIMG: url('https://i.imgur.com/PeaXouD.png'); /* nav image for first */
  11. --charaIMGbwp: center center; /* position of desaturated IMG. use 'center center' if unsure */
  12. --charaIMGbws: 200% auto; /* size of desaturated IMG. use 'cover' if unsure */
  13. --navcharapos: 45% 43%; /* position of IMG on navigation button. use 'center center' if unsure */
  14. --navcharas: 390% auto; /* size of IMG on navigation button. use 'cover' if unsure */
  15. --charaIMG2: url('https://i.imgur.com/f09JqrL.jpeg'); /* image right of basic deets */
  16. --charaIMG3: url('https://i.imgur.com/uteUoYh.jpeg'); /* last image in first tab */
  17. --mechIMG: url('https://i.imgur.com/T2MaAr5.jpeg'); /* main image for second tab */
  18. --mechIMGbwp: 15% 25%; /* position of desaturated IMG. use 'center center' if unsure */
  19. --mechIMGbws: 250% auto; /* size of desaturated IMG. use 'cover' if unsure */
  20. --navmechpos: 14% 14%; /* position of IMG on navigation button. use 'center center' if unsure */
  21. --navmechs: 450% auto; /* size of IMG on navigation button. use 'cover' if unsure */
  22. --bgColor: #f3f3f3; /* main bg color */
  23. --txtColor: #1d1d1d; /* color of text */
  24. --borderColor: #a8a8a8; /* color of grid borders */
  25. --txtFont: 'Oxanium', sans-serif;
  26. --accFont: 'Micro 5', sans-serif;
  27. position: relative;
  28. overflow: hidden;
  29. margin: 1rem auto;
  30. width: clamp(250px,calc(100% - 2rem),1000px);
  31. display: flex;
  32. flex-flow: row wrap;
  33. align-items: stretch;
  34. gap: 10px;
  35. color: var(--txtColor);
  36. container-type: inline-size;
  37. --noiseIMG: url('https://i.imgur.com/UdjBt1F.png');
  38. --gridIMG: url('https://i.imgur.com/6Kp74bp.png');
  39. --border: 1px solid var(--borderColor);
  40. -webkit-font-smoothing: antialiased;
  41. -moz-osx-font-smoothing: grayscale;]
  42. [div=flex: 2 300px;
  43. min-height: 20rem;
  44. display: flex;
  45. flex-flow: column nowrap;
  46. justify-content: center;
  47. box-sizing: border-box;
  48. padding-left: 75px;
  49. padding-top: calc(15cqw + 2.25rem);
  50. overflow: hidden;
  51. line-height: calc(3.4rem + 5px);]
  52. [tabs]
  53. [tab=testingforpartonexxxxxx]
  54. [div=position: absolute; /* first tab container */
  55. top: 0px;
  56. height: 100%;
  57. left: 0px;
  58. width: 100%;
  59. line-height: normal;
  60. pointer-events: none;]
  61. [div=position: relative;
  62. display: flex;
  63. flex-flow: row wrap;
  64. align-items: stretch;
  65. gap: 10px;]
  66. [div=flex: 2 300px;
  67. min-height: 20rem;
  68. display: flex;
  69. flex-flow: row nowrap;
  70. align-items: stretch;
  71. gap: 10px;
  72. position: relative;]
  73. [div=flex: 0 50px;
  74. box-sizing: border-box;
  75. background: var(--bgColor);
  76. border: var(--border);
  77. height: 100%;
  78. position: relative;]
  79. [div=display: flex;
  80. box-sizing: border-box;
  81. width: 100%;
  82. height: 100%;
  83. flex-flow: column nowrap;
  84. align-items: center;
  85. padding: 15px 10px;
  86. gap: 1rem;]
  87. [div=flex: 0 auto; /* FA icon or you can use a mask here */
  88. box-sizing: border-box;
  89. width: 100%;
  90. aspect-ratio: 1;
  91. text-align: center;]
  92. [div=display: none;] replace with desired FA icon[/div]
  93. [fa]fal fa-sparkles[/fa]
  94. [/div]
  95. [div=flex: 1 50px;
  96. width: 1px;
  97. background: var(--borderColor);]
  98.  
  99. [/div]
  100. [/div]
  101. [/div]
  102. [div=flex: 1 200px;
  103. box-sizing: border-box;
  104. background: var(--bgColor);
  105. border: var(--border);]
  106. [div=position: absolute;
  107. box-sizing: border-box;
  108. border: var(--border);
  109. left: 70px;
  110. top: 10px;
  111. width: calc(100% - 80px);
  112. height: calc(100% - 20px);
  113. background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='675' height='900'%3E%3Cpath fill='%231d1d1d' d='m0 269 11.3 19.7c11.4 19.6 34 59 56.5 52s44.9-60.4 67.4-57.9c22.5 2.5 45.1 60.9 67.6 79.7 22.5 18.8 44.9-1.8 67.4-18.8 22.5-17 45.1-30.4 67.6 6.5C360.3 387 382.7 474 405 530.5c22.3 56.5 44.7 82.5 67.2 37.3 22.5-45.1 45.1-161.5 67.8-177 22.7-15.5 45.3 69.9 67.8 105.2s44.9 20.7 56 13.3L675 502V0H0Z'/%3E%3C/svg%3E%0A"),var(--gridIMG),linear-gradient(180deg, var(--borderColor), rgba(255,255,255,0) 100%);
  114. background-position: center top, center center,center center;
  115. background-size: 110% auto,auto,cover;
  116. background-repeat: no-repeat,repeat,no-repeat;
  117. background-blend-mode: darken;]
  118.  
  119. [/div]
  120. [div=position: absolute;
  121. right: 10%;
  122. width: 45%;
  123. bottom: 15%;
  124. height: clamp(12rem,50%,400px);
  125. border: var(--border);
  126. box-sizing: border-box;
  127. background: var(--borderColor);]
  128. [div=position: relative;
  129. display: block;
  130. height: 100%;
  131. width: 100%;
  132. background-image: var(--charaIMG);
  133. background-position: var(--charaIMGbwp);
  134. background-size: var(--charaIMGbws);
  135. filter: var(--bwFilter);
  136. mix-blend-mode: multiply;]
  137.  
  138. [/div]
  139. [/div]
  140. [div=position: absolute; /* artist credit */
  141. right: calc(10% + 10px);
  142. width: 45%;
  143. bottom: clamp(12rem + 15%,50% + 15%,400px + 15%);
  144. font-size: 18px;
  145. font-family: var(--accFont);
  146. color: var(--bgColor);
  147. text-align: right;
  148. text-transform: uppercase;]
  149. art: $$artist
  150. [/div]
  151. [div=position: relative;
  152. width: 100%;
  153. height: 100%;
  154. box-sizing: border-box;
  155. display: flex;
  156. flex-flow: column nowrap;
  157. justify-content: center;
  158. gap: 10px;
  159. padding-left: 1.75rem;
  160. padding-top: 15cqw;
  161. padding-right: 50%;]
  162. [div=flex: 0 auto;
  163. width: 100%;
  164. height: 3.5rem;
  165. pointer-events: none;
  166. background-image: var(--charaIMG);
  167. background-position: var(--navcharapos);
  168. background-size: var(--navcharas);
  169. box-sizing: border-box;
  170. border: var(--border);
  171. position: relative;]
  172.  
  173. [/div]
  174. [div=flex: 0 auto;
  175. width: 100%;
  176. height: 3.5rem;
  177. pointer-events: none;
  178. box-sizing: border-box;
  179. border: var(--border);
  180. background: var(--borderColor);
  181. position: relative;]
  182. [div=display: block;
  183. height: 100%;
  184. width: 100%;
  185. background-image: var(--mechIMG);
  186. background-position: var(--navmechpos);
  187. background-size: var(--navmechs);
  188. filter: saturate(0%) contrast(110%) blur(2px);
  189. mix-blend-mode: multiply;]
  190.  
  191. [/div]
  192. [div=display: block;
  193. height: 100%;
  194. width: 100%;
  195. position: absolute;
  196. top: 0px;
  197. left: 0px;
  198. background: var(--noiseIMG);
  199. mix-blend-mode: soft-light;
  200. opacity: .4;]
  201.  
  202. [/div]
  203. [/div]
  204. [/div]
  205. [/div]
  206. [/div]
  207. [div=flex: 3 300px;
  208. height: 33rem;
  209. min-height: 33rem;
  210. box-sizing: border-box;
  211. background: var(--bgColor);
  212. border: var(--border);
  213. position: relative;
  214. overflow: hidden;
  215. box-sizing: border-box;
  216. padding: 5cqw;
  217. pointer-events: auto;]
  218. [div=position: relative;
  219. width: 100%;
  220. container-type: inline-size;
  221. height: 100%;
  222. box-sizing: border-box;
  223. border: var(--border);
  224. overflow: hidden;]
  225. [div=position: absolute;
  226. height: 100%;
  227. width: calc(100% + 25px);
  228. top: 0px;
  229. left: 0px;
  230. box-sizing: border-box;
  231. background: var(--txtColor);
  232. overflow-x: hidden;
  233. overflow-y: scroll;
  234. pointer-events: auto;
  235. padding-right: 25px;
  236. scroll-snap-type: y proximity;]
  237. [div=display: flex;
  238. scroll-snap-align: start;
  239. flex-flow: row wrap-reverse;
  240. align-items: stretch;
  241. gap: 1px;
  242. background: var(--borderColor);
  243. border-bottom: var(--border);]
  244. [div=flex: 2 150px;
  245. background: var(--bgColor);
  246. padding: 1rem 1.25rem;
  247. font-size: .9rem;
  248. color: var(--txtColor);
  249. display: flex;
  250. flex-flow: column nowrap;
  251. align-items: flex-start;
  252. justify-content: center;
  253. gap: 8px;]
  254. [div=flex: 0 auto;]
  255. [div=display: block;
  256. font-family: var(--accFont);
  257. text-transform: uppercase;
  258. font-size: 16px;]
  259. fullname
  260. [/div]
  261. [div=display: block;
  262. font-family: var(--txtFont);]
  263. $$fullname
  264. [/div]
  265. [/div]
  266. [div=display: none;]start of info copypaste[/div]
  267. [div=flex: 0 auto;]
  268. [div=display: block;
  269. font-family: var(--accFont);
  270. text-transform: uppercase;
  271. font-size: 16px;]
  272. info
  273. [/div]
  274. [div=display: block;
  275. font-family: var(--txtFont);]
  276. $$info.answer
  277. [/div]
  278. [/div]
  279. [div=display: none;]end of info copypaste[/div]
  280. [div=flex: 0 auto;]
  281. [div=display: block;
  282. font-family: var(--accFont);
  283. text-transform: uppercase;
  284. font-size: 16px;]
  285. role
  286. [/div]
  287. [div=display: block;
  288. font-family: var(--txtFont);]
  289. $$role
  290. [/div]
  291. [/div]
  292. [div=flex: 0 auto;]
  293. [div=display: block;
  294. font-family: var(--accFont);
  295. text-transform: uppercase;
  296. font-size: 16px;]
  297. age
  298. [/div]
  299. [div=display: block;
  300. font-family: var(--txtFont);]
  301. $$age
  302. [/div]
  303. [/div]
  304. [div=display: none;]insert info copypaste BEFORE this div[/div]
  305. [/div]
  306. [div=flex: 1 125px;
  307. min-height: 15rem;
  308. background: var(--bgColor);
  309. position: relative;
  310. box-sizing: border-box;]
  311. [div=position: absolute;
  312. box-sizing: border-box;
  313. border: var(--border);
  314. background: var(--charaIMG2) no-repeat center center/cover;
  315. top: 10px;
  316. left: 10px;
  317. height: calc(100% - 20px);
  318. width: calc(100% - 20px);]
  319.  
  320. [/div]
  321. [/div]
  322. [/div]
  323. [div=display: flex;
  324. scroll-snap-align: start;
  325. flex-flow: row wrap-reverse;
  326. align-items: stretch;
  327. gap: 1px;
  328. background: var(--borderColor);
  329. border-bottom: var(--border);]
  330. [div=flex: 0 2.5rem;
  331. background: var(--bgColor);
  332. padding: 1rem 1.25rem;
  333. font-size: .9rem;
  334. color: var(--txtColor);
  335. display: flex;
  336. flex-flow: column nowrap;
  337. align-items: center;
  338. justify-content: center;]
  339. [div=flex: 0 auto;
  340. text-align: center;
  341. color: var(--borderColor);]
  342. [fa]fa-search[/fa]
  343. [/div]
  344. [/div]
  345. [div=flex: 1 150px; /* appearance section */
  346. background: var(--bgColor);
  347. padding: 1rem 1.25rem;
  348. font-size: .9rem;
  349. color: var(--txtColor);
  350. font-family: var(--txtFont);
  351. box-sizing: border-box;
  352. text-align: justify;]
  353. $$physical.description
  354. [/div]
  355. [/div]
  356. [div=display: block; /* personality section */
  357. scroll-snap-align: start;
  358. box-sizing: border-box;
  359. background: var(--bgColor);
  360. border-bottom: var(--border);
  361. padding: 1rem 1.25rem;
  362. font-size: .9rem;
  363. color: var(--txtColor);
  364. font-family: var(--txtFont);
  365. text-align: justify;]
  366. $$personality
  367. [/div]
  368. [div=display: flex;
  369. width: 100%;
  370. flex-flow: column nowrap;
  371. justify-content: flex-start;
  372. box-sizing: border-box;
  373. scroll-snap-align: start;
  374. background: var(--bgColor);
  375. border-bottom: var(--border);
  376. padding: 1rem;]
  377. [div=display: block;
  378. visibility: hidden;]
  379. [accordion=100%]
  380. {slide=[div=display: flex; width: 100%; flex-flow: row wrap; visibility: visible; align-items: center; font-weight: normal; font-variant: normal; gap: 1rem; box-sizing: border-box;][div=flex: 0 4rem; aspect-ratio: 1; border: var(--border); box-sizing: border-box; position: relative; color: var(--borderColor); display: flex; flex-flow: row wrap; align-items: center; justify-content: center;font-size: 1.5rem;][fa]fal fa-fingerprint[/fa][/div][div=flex: 5 5rem; color: var(--txtColor); font-family: var(--accFont); text-transform: uppercase; font-size: 32px; padding: 0px .5rem; white-space: normal;]advanced record[div=display: block; font-size: .9rem; font-family: var(--txtFont);]history[/div][/div][/div]}[div=display: block; line-height: 0px;visibility: visible; white-space: normal; padding-bottom: 1rem;]
  381. [div=display: block;
  382. box-sizing: border-box;
  383. padding: .5rem 1.25rem;
  384. position: relative;
  385. margin-left: 2rem;
  386. width: calc(100% - 2rem);
  387. border-left: var(--border);
  388. text-align: justify;]
  389. [div=display: block; font-size: .9rem;text-align: justify; line-height: normal;font-family: var(--txtFont); position: relative;]$$history.content[/div]
  390. [/div]
  391. [/div]{/slide}
  392. {slide=[[div=display: flex; width: 100%; flex-flow: row wrap; visibility: visible; align-items: center; font-weight: normal; font-variant: normal; gap: 1rem; box-sizing: border-box;][div=flex: 0 4rem; aspect-ratio: 1; border: var(--border); box-sizing: border-box; position: relative; color: var(--borderColor); display: flex; flex-flow: row wrap; align-items: center; justify-content: center;font-size: 1.5rem;][fa]fal fa-fingerprint[/fa][/div][div=flex: 5 5rem; color: var(--txtColor); font-family: var(--accFont); text-transform: uppercase; font-size: 32px; padding: 0px .5rem; white-space: normal;]advanced record[div=display: block; font-size: .9rem; font-family: var(--txtFont);]preferences[/div][/div][/div]}[div=display: block; line-height: 0px;visibility: visible; white-space: normal; padding-bottom: 1rem;]
  393. [div=display: block;
  394. box-sizing: border-box;
  395. padding: .5rem 1.25rem;
  396. position: relative;
  397. margin-left: 2rem;
  398. width: calc(100% - 2rem);
  399. border-left: var(--border);
  400. text-align: justify;]
  401. [div=display: block; font-size: .9rem;text-align: justify; line-height: normal;font-family: var(--txtFont); position: relative;]$$preferences.content[/div]
  402. [/div]
  403. [/div]{/slide}
  404. [div=display: none;]start of slide copypaste[/div]
  405. {slide=[div=display: flex; width: 100%; flex-flow: row wrap; visibility: visible; align-items: center; font-weight: normal; font-variant: normal; gap: 1rem; box-sizing: border-box;][div=flex: 0 4rem; aspect-ratio: 1; border: var(--border); box-sizing: border-box; position: relative; color: var(--borderColor); display: flex; flex-flow: row wrap; align-items: center; justify-content: center;font-size: 1.5rem;][fa]fal fa-fingerprint[/fa][/div][div=flex: 5 5rem; color: var(--txtColor); font-family: var(--accFont); text-transform: uppercase; font-size: 32px; padding: 0px .5rem; white-space: normal;]advanced record[div=display: block; font-size: .9rem; font-family: var(--txtFont);]additional information[/div][/div][/div]}[div=display: block; line-height: 0px;visibility: visible; white-space: normal; padding-bottom: 1rem;]
  406. [div=display: block;
  407. box-sizing: border-box;
  408. padding: .5rem 1.25rem;
  409. position: relative;
  410. margin-left: 2rem;
  411. width: calc(100% - 2rem);
  412. border-left: var(--border);
  413. text-align: justify;]
  414. [div=display: block; font-size: .9rem;text-align: justify; line-height: normal;font-family: var(--txtFont); position: relative;]$$extra.content[/div]
  415. [/div]
  416. [/div]{/slide}
  417. [div=display: none;]end of slide copypaste[/div]
  418. [div=display: none;]insert slide copypaste BEFORE this div[/div]
  419. [/accordion]
  420. [/div]
  421. [/div]
  422. [div=display: block;
  423. padding: 10px;
  424. height: 100%;
  425. box-sizing: border-box;
  426. scroll-snap-align: start;
  427. background: var(--bgColor);]
  428. [div=display: block;
  429. height: 100%;
  430. border: var(--border);
  431. background: var(--charaIMG3) no-repeat center center/cover;]
  432.  
  433. [/div]
  434. [/div]
  435. [/div]
  436. [/div]
  437. [/div]
  438. [/div]
  439. [/div]
  440. [/tab]
  441. [tab=testingforparttwoxxxxxx]
  442. [div=position: absolute; /* second tab container */
  443. top: 0px;
  444. height: 100%;
  445. left: 0px;
  446. width: 100%;
  447. line-height: normal;
  448. pointer-events: none;]
  449. [div=position: relative;
  450. display: flex;
  451. flex-flow: row wrap;
  452. align-items: stretch;
  453. gap: 10px;]
  454. [div=flex: 2 300px;
  455. min-height: 20rem;
  456. display: flex;
  457. flex-flow: row nowrap;
  458. align-items: stretch;
  459. gap: 10px;
  460. position: relative;]
  461. [div=flex: 0 50px;
  462. box-sizing: border-box;
  463. background: var(--bgColor);
  464. border: var(--border);
  465. height: 100%;
  466. position: relative;]
  467. [div=display: flex;
  468. width: 100%;
  469. height: 100%;
  470. flex-flow: column nowrap;
  471. align-items: center;
  472. box-sizing: border-box;
  473. padding: 15px 10px;
  474. gap: 1rem;]
  475. [div=flex: 0 auto; /* FA icon or you can use a mask here */
  476. box-sizing: border-box;
  477. width: 100%;
  478. aspect-ratio: 1;
  479. text-align: center;]
  480. [div=display: none;] replace with desired FA icon[/div]
  481. [fa]fal fa-wrench[/fa]
  482. [/div]
  483. [div=flex: 1 50px;
  484. width: 1px;
  485. background: var(--borderColor);]
  486.  
  487. [/div]
  488. [/div]
  489. [/div]
  490. [div=flex: 1 200px;
  491. box-sizing: border-box;
  492. background: var(--bgColor);
  493. border: var(--border);]
  494. [div=position: absolute;
  495. box-sizing: border-box;
  496. border: var(--border);
  497. left: 70px;
  498. top: 10px;
  499. width: calc(100% - 80px);
  500. height: calc(100% - 20px);
  501. background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='675' height='900'%3E%3Cpath fill='%231d1d1d' d='m0 269 11.3 19.7c11.4 19.6 34 59 56.5 52s44.9-60.4 67.4-57.9c22.5 2.5 45.1 60.9 67.6 79.7 22.5 18.8 44.9-1.8 67.4-18.8 22.5-17 45.1-30.4 67.6 6.5C360.3 387 382.7 474 405 530.5c22.3 56.5 44.7 82.5 67.2 37.3 22.5-45.1 45.1-161.5 67.8-177 22.7-15.5 45.3 69.9 67.8 105.2s44.9 20.7 56 13.3L675 502V0H0Z'/%3E%3C/svg%3E%0A"),var(--gridIMG),linear-gradient(180deg, var(--borderColor), rgba(255,255,255,0) 100%);
  502. background-position: center top, center center,center center;
  503. background-size: 110% auto,auto,cover;
  504. background-repeat: no-repeat,repeat,no-repeat;
  505. background-blend-mode: darken;]
  506.  
  507. [/div]
  508. [div=position: absolute;
  509. right: 10%;
  510. width: 45%;
  511. bottom: 15%;
  512. height: clamp(12rem,50%,400px);
  513. border: var(--border);
  514. box-sizing: border-box;
  515. background: var(--borderColor);]
  516. [div=position: relative;
  517. display: block;
  518. height: 100%;
  519. width: 100%;
  520. background-image: var(--mechIMG);
  521. background-size: var(--mechIMGbws);
  522. background-position: var(--mechIMGbwp);
  523. filter: var(--bwFilter);
  524. mix-blend-mode: multiply;]
  525.  
  526. [/div]
  527. [/div]
  528. [div=position: absolute; /* artist credit */
  529. right: calc(10% + 10px);
  530. width: 45%;
  531. bottom: clamp(12rem + 15%,50% + 15%,400px + 15%);
  532. font-size: 18px;
  533. font-family: var(--accFont);
  534. color: var(--bgColor);
  535. text-align: right;
  536. text-transform: uppercase;]
  537. art: $$artist
  538. [/div]
  539. [div=position: relative;
  540. width: 100%;
  541. height: 100%;
  542. box-sizing: border-box;
  543. display: flex;
  544. flex-flow: column nowrap;
  545. justify-content: center;
  546. gap: 10px;
  547. padding-left: 1.75rem;
  548. padding-top: 15cqw;
  549. padding-right: 50%;]
  550. [div=flex: 0 auto;
  551. width: 100%;
  552. height: 3.5rem;
  553. pointer-events: none;
  554. box-sizing: border-box;
  555. border: var(--border);
  556. background: var(--borderColor);
  557. position: relative;]
  558. [div=display: block;
  559. height: 100%;
  560. width: 100%;
  561. background-image: var(--charaIMG);
  562. background-position: var(--navcharapos);
  563. background-size: var(--navcharas);
  564. filter: saturate(0%) contrast(110%) blur(2px);
  565. mix-blend-mode: multiply;]
  566.  
  567. [/div]
  568. [div=display: block;
  569. height: 100%;
  570. width: 100%;
  571. position: absolute;
  572. top: 0px;
  573. left: 0px;
  574. background: var(--noiseIMG);
  575. mix-blend-mode: soft-light;
  576. opacity: .4;]
  577.  
  578. [/div]
  579. [/div]
  580. [div=flex: 0 auto;
  581. width: 100%;
  582. height: 3.5rem;
  583. pointer-events: none;
  584. box-sizing: border-box;
  585. border: var(--border);
  586. background-image: var(--mechIMG);
  587. background-position: var(--navmechpos);
  588. background-size: var(--navmechs);
  589. position: relative;]
  590. [/div]
  591. [/div]
  592. [/div]
  593. [/div]
  594. [div=flex: 3 300px;
  595. height: 33rem;
  596. min-height: 33rem;
  597. box-sizing: border-box;
  598. background: var(--bgColor);
  599. border: var(--border);
  600. position: relative;
  601. overflow: hidden;
  602. box-sizing: border-box;
  603. padding: 5cqw;
  604. pointer-events: auto;]
  605. [div=position: relative;
  606. width: 100%;
  607. container-type: inline-size;
  608. height: 100%;
  609. box-sizing: border-box;
  610. border: var(--border);
  611. overflow: hidden;]
  612. [div=position: absolute;
  613. height: 100%;
  614. width: calc(100% + 25px);
  615. top: 0px;
  616. left: 0px;
  617. box-sizing: border-box;
  618. background: var(--txtColor);
  619. overflow-x: hidden;
  620. overflow-y: scroll;
  621. pointer-events: auto;
  622. padding-right: 25px;
  623. scroll-snap-type: y proximity;]
  624. [div=display: flex;
  625. width: 100%;
  626. height: 100%;
  627. flex-flow: column nowrap;
  628. align-items: stretch;
  629. gap: 1px;
  630. background: var(--borderColor);
  631. border-bottom: var(--border);]
  632. [div=flex: 1 100px;
  633. box-sizing: border-box;
  634. background: var(--bgColor);
  635. position: relative;
  636. scroll-snap-align: start;]
  637. [div=position: absolute;
  638. top: 10px;
  639. left: 10px;
  640. box-sizing: border-box;
  641. border: var(--border);
  642. height: calc(100% - 20px);
  643. width: calc(100% - 20px);
  644. background: var(--mechIMG) no-repeat center center/cover;]
  645.  
  646. [/div]
  647. [/div]
  648. [div=flex: 0 auto; /* title area */
  649. box-sizing: border-box;
  650. background: var(--bgColor);
  651. padding: 1rem 1.5rem;
  652. display: flex;
  653. flex-flow: row wrap;
  654. align-items: center;
  655. color: var(--txtColor);
  656. gap: 3px 1rem;
  657. scroll-snap-align: start;]
  658. [div=flex: 0 auto; /* heading */
  659. font-family: var(--accFont);
  660. font-size: 24px;
  661. text-transform: uppercase;]
  662. $$heading
  663. [/div]
  664. [div=flex: 0 auto; /* subheading */
  665. font-family: var(--txtFont);
  666. font-size: .85rem;
  667. text-transform: uppercase;]
  668. [i]$$subheading[/i]
  669. [/div]
  670. [/div]
  671. [/div]
  672. [div=display: flex; /* equip list */
  673. scroll-snap-align: start;
  674. flex-flow: column nowrap;
  675. align-items: stretch;
  676. gap: 1px;
  677. background: var(--borderColor);
  678. border-bottom: var(--border);
  679. border-left: 10cqw solid var(--txtColor);]
  680. [div=flex: 0 auto; /* equip */
  681. display: flex;
  682. flex-flow: row wrap;
  683. align-items: stretch;
  684. gap: 1px;]
  685. [div=flex: 0 2rem;
  686. font-family: var(--accFont);
  687. color: var(--txtColor);
  688. display: flex;
  689. flex-flow: row nowrap;
  690. align-items: center;
  691. justify-content: center;]
  692. [div=display: none;]you can use numbers or FA icons[/div]
  693. [fa]fal fa-stars[/fa]
  694. [/div]
  695. [div=flex: 1 100px;
  696. font-family: var(--txtFont);
  697. color: var(--txtColor);
  698. padding: 10px;
  699. background: var(--bgColor);
  700. font-size: .85rem;
  701. display: grid;
  702. align-items: center;]
  703. $$info
  704. [/div]
  705. [/div]
  706. [div=display: none;]start of equip copypaste[/div]
  707. [div=flex: 0 auto; /* equip */
  708. display: flex;
  709. flex-flow: row wrap;
  710. align-items: stretch;
  711. gap: 1px;]
  712. [div=flex: 0 2rem;
  713. font-family: var(--accFont);
  714. color: var(--txtColor);
  715. display: flex;
  716. flex-flow: row nowrap;
  717. align-items: center;
  718. justify-content: center;]
  719. [div=display: none;]you can use numbers or FA icons[/div]
  720. [fa]fal fa-stars[/fa]
  721. [/div]
  722. [div=flex: 1 100px;
  723. font-family: var(--txtFont);
  724. color: var(--txtColor);
  725. padding: 10px;
  726. background: var(--bgColor);
  727. font-size: .85rem;
  728. display: grid;
  729. align-items: center;]
  730. $$info
  731. [/div]
  732. [/div]
  733. [div=display: none;]end of equip copypaste[/div]
  734. [div=display: none;]insert equip copypaste BEFORE this div[/div]
  735. [/div]
  736. [div=display: flex;
  737. scroll-snap-align: start;
  738. flex-flow: row nowrap;
  739. align-items: stretch;
  740. gap: 1px;
  741. background: var(--borderColor);]
  742. [div=flex: 1 150px; /* text area */
  743. background: var(--bgColor);
  744. padding: 1rem 1.25rem;
  745. font-size: .9rem;
  746. color: var(--txtColor);
  747. font-family: var(--txtFont);
  748. box-sizing: border-box;
  749. text-align: justify;]
  750. $$text.area
  751. [/div]
  752. [div=flex: 0 2.5rem;
  753. background: var(--bgColor);
  754. padding: 1rem 1.25rem;
  755. font-size: .9rem;
  756. color: var(--txtColor);
  757. display: flex;
  758. flex-flow: column nowrap;
  759. align-items: center;
  760. justify-content: center;]
  761. [div=flex: 0 auto;
  762. text-align: center;
  763. color: var(--borderColor);]
  764. [fa]far fa-cog[/fa]
  765. [/div]
  766. [/div]
  767. [/div]
  768. [/div]
  769. [/div]
  770. [/div]
  771. [/div]
  772. [/div]
  773. [/tab]
  774. [/tabs]
  775. [/div]
  776. [div=flex: 3 300px;
  777. height: 33rem;
  778. min-height: 33rem;]
  779.  
  780. [/div]
  781. [/div]
  782. [/nobr]
Advertisement
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!