API tools faq
paste
Tianna_12946

Untitled

Tianna_12946
Aug 11th, 2026 (edited)
786
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 38.26 KB | None | 0 0
raw download clone embed print report
  1. <---HTML--->
  2. <---BANNER AND DOLL IMAGE LINKS--->
  3. <div class="profile">
  4. <div class="profile-banner">
  5. <img class="banner-bg" src="https://i.ibb.co/3yTJnrXN/939a527e-309f-4b6c-a9f0-bfb390862789.png">
  6. <img class="banner-doll" src="https://i.ibb.co/Xfd3FG6h/IMG-4317-Picsart-Background-Remover.png">
  7. </div>
  8. <---END OF BANNER AND BANNER IMG DOLL--->
  9. <---MAIN PROFILE PICTURE LINK AND USERNAME--->
  10. <div class="profile-info">
  11. <img class="profile-pfp" src="https://i.ibb.co/S7RTrKVT/IMG-4316-Picsart-Background-Remover.png">
  12. <div class="profile-name">
  13. USERNAME
  14. </div>
  15.  
  16. <---LINKS-->
  17. <div class="profile-links">
  18. <a href="LINK%20HERE">LINK</a>
  19. <a href="LINK%20HERE">LINK</a>
  20. <a href="LINK%20HERE">LINK</a>
  21. </div>
  22. </div>
  23. <---END--->
  24.  
  25.  
  26. <div class="status-box">
  27. <div class="status-title">
  28. STATUS -
  29. </div>
  30. <div class="status-text">
  31. Add your status here. It can be as long or as short as you'd like!
  32. </div>
  33. </div>
  34. <div class="info-layout">
  35. <div class="left-column">
  36. <div class="info-box">
  37. <div class="info-label">01 / ABOUT</div>
  38. <div class="info-title">ABOUT ME</div>
  39. <div class="info-text">
  40. YOUR CONTENT COMES HERE
  41. </div>
  42. <div class="info-tags">
  43. <span>TAG</span>
  44. <span>TAG</span>
  45. <span>TAG</span>
  46. <span>TAG</span>
  47. <span>TAG</span>
  48. </div>
  49. </div>
  50. <div class="about-dropdowns">
  51. <details>
  52. <summary>01 / DROPDOWN</summary>
  53. <div class="dropdown-content">
  54. YOUR CONTENT COMES HERE
  55. </div>
  56. </details>
  57. <details>
  58. <summary>02 / DROPDOWN</summary>
  59. <div class="dropdown-content">
  60. YOUR CONTENT COMES HERE
  61. </div>
  62. </details>
  63. <details>
  64. <summary>03 / DROPDOWN</summary>
  65. <div class="dropdown-content">
  66. YOUR CONTENT COMES HERE
  67. </div>
  68. </details>
  69. </div>
  70. </div>
  71. <div class="right-column">
  72. <div class="info-box">
  73. <div class="info-label">02 / F.A.Q</div>
  74. <div class="info-title">EXTRA</div>
  75. <div class="info-text">
  76. YOUR CONTENT COMES HERE
  77. </div>
  78. <div class="info-tags">
  79. <span>TAG</span>
  80. <span>TAG</span>
  81. <span>TAG</span>
  82. </div>
  83. </div>
  84. <div class="creators-section">
  85. <div class="creators-header">
  86. <span>03 / PEOPLE</span>
  87. <strong>CREATORS</strong>
  88. </div>
  89. <div class="creators-grid">
  90. <a href="LINK" class="creator">
  91. <img src="https://i.ibb.co/S7RTrKVT/IMG-4316-Picsart-Background-Remover.png">
  92. <span>NAME</span>
  93. </a>
  94. <a href="LINK" class="creator">
  95. <img src="https://i.ibb.co/S7RTrKVT/IMG-4316-Picsart-Background-Remover.png">
  96. <span>NAME</span>
  97. </a>
  98. <a href="LINK" class="creator">
  99. <img src="https://i.ibb.co/S7RTrKVT/IMG-4316-Picsart-Background-Remover.png">
  100. <span>NAME</span>
  101. </a>
  102. <a href="LINK" class="creator">
  103. <img src="https://i.ibb.co/S7RTrKVT/IMG-4316-Picsart-Background-Remover.png">
  104. <span>NAME</span>
  105. </a>
  106. <a href="LINK" class="creator">
  107. <img src="https://i.ibb.co/S7RTrKVT/IMG-4316-Picsart-Background-Remover.png">
  108. <span>NAME</span>
  109. </a>
  110. <a href="LINK" class="creator">
  111. <img src="https://i.ibb.co/S7RTrKVT/IMG-4316-Picsart-Background-Remover.png">
  112. <span>NAME</span>
  113. </a>
  114. </div>
  115. </div>
  116. </div>
  117. </div>
  118. </div>
  119.  
  120.  
  121. <---HTML CSS--->
  122. <style>
  123. .profile {
  124. margin-top: -55px;
  125. }
  126. .profile-banner {
  127. position: relative;
  128. width: 100%;
  129. height: 550px;
  130. overflow: hidden;
  131. border: 2px solid #110b15;
  132. border-radius: 35PX;
  133. box-sizing: border-box;
  134. background:
  135. linear-gradient(
  136. 135deg,
  137. rgba(72, 39, 99),
  138. #382744
  139. );
  140. }
  141. .banner-bg {
  142. position: absolute;
  143. width: 100%;
  144. height: 100%;
  145. filter:
  146. brightness(.85)
  147. saturate(.5)
  148. contrast(.99);
  149. object-fit: cover;
  150. object-position: center;
  151. left: 0;
  152. top: 0;
  153. border-radius: 35PX;
  154. padding: 5px;
  155. }
  156. .banner-doll {
  157. position: absolute;
  158. left: 0px;
  159. bottom: 0px;
  160. height: 520px;
  161. width: auto;
  162. object-fit: contain;
  163. z-index: 5;
  164. -webkit-mask-image:
  165. linear-gradient(to right, black 0%, black 80%, transparent 100%),
  166. linear-gradient(to bottom, black 0%, black 85%, transparent 100%);
  167. -webkit-mask-composite: source-in;
  168. mask-image:
  169. linear-gradient(to right, black 0%, black 80%, transparent 100%),
  170. linear-gradient(to bottom, black 0%, black 85%, transparent 100%);
  171. }
  172. .profile-info {
  173. position: relative;
  174. width: 100%;
  175. min-height: 230px;
  176. margin-top: 0;
  177. text-align: center;
  178. z-index: 10;
  179. }
  180. .profile-pfp {
  181. position: absolute;
  182. top: -600px;
  183. left: 80%;
  184. transform: translateX(-50%);
  185. width: auto;
  186. height: 650px;
  187. object-fit: cover;
  188. z-index: 20;
  189. -webkit-mask-image:
  190. linear-gradient(to right, black 0%, black 80%, transparent 100%),
  191. linear-gradient(to bottom, black 0%, black 85%, transparent 100%);
  192. -webkit-mask-composite: source-in;
  193. mask-image:
  194. linear-gradient(to right, black 0%, black 80%, transparent 100%),
  195. linear-gradient(to bottom, black 0%, black 85%, transparent 100%);
  196. filter: drop-shadow(5px 8px 0 #3e3150) drop-shadow(-4px 3px 0 #280637);
  197. }
  198. .profile-name {
  199. position: absolute;
  200. top: 0px;
  201. left: 84.5%;
  202. transform: translateX(-50%);
  203. white-space: nowrap;
  204. font-size: 80px;
  205. font-weight: 800;
  206. font-family: dm serif text;
  207. letter-spacing: -0.5px;
  208. background: linear-gradient(
  209. to bottom,
  210. #bda1d2 0%,
  211. #8d6aad 55%,
  212. #5b3d75 100%
  213. );
  214. -webkit-background-clip: text;
  215. -webkit-text-fill-color: transparent;
  216. filter:
  217. drop-shadow(5px 3px 0 #280637)
  218. drop-shadow(0 0 8px rgba(141, 106, 173, 0.25));
  219. }
  220. .pp-uc-followers-count {
  221. font-weight: 800;
  222. font-family: dm serif text;
  223. letter-spacing: -0.5px;
  224. background: linear-gradient(
  225. to bottom,
  226. #bda1d2 0%,
  227. #8d6aad 55%,
  228. #5b3d75 100%
  229. );
  230. -webkit-background-clip: text;
  231. -webkit-text-fill-color: transparent;
  232. filter:
  233. drop-shadow(2px 1px 0 #280637)
  234. drop-shadow(0 0 8px rgba(141, 106, 173, 0.25));
  235. margin-left: 40px;
  236. font-size: 15px;
  237. letter-spacing: 2px;
  238. z-index: 5;
  239. position: relative;
  240. top: 6px;
  241. }
  242. .status-box {
  243. position: absolute;
  244. left: 25px;
  245. top: 500px;
  246. width: 660px;
  247. padding: 25px;
  248. box-sizing: border-box;
  249. background:
  250. linear-gradient(
  251. 135deg,
  252. rgba(48, 31, 61, 0.98),
  253. rgba(22, 13, 29, 0.98)
  254. );
  255. border: 2px solid #5b4772;
  256. border-radius: 35px;
  257. box-shadow:
  258. 6px 6px 0 #280637,
  259. 0 12px 25px rgba(0, 0, 0, 0.35);
  260. z-index: 15;
  261. }
  262. .status-title {
  263. margin-bottom: 10px;
  264. font-size: 15px;
  265. font-weight: 900;
  266. letter-spacing: 5px;
  267. color: #bda6cc;
  268. text-shadow:
  269. 2px 2px 0 #110b15;
  270. font-family: dm serif text;
  271. }
  272. .status-text {
  273. font-size: 14px;
  274. line-height: 1.75;
  275. color: #c4afd0;
  276. font-family: dm serif text;
  277. overflow: auto;
  278. height: 50px;
  279. }
  280. a {
  281. color: #c49ada;
  282. }
  283. a:hover {
  284. color: #975db6;
  285. }
  286. .status-text u {
  287. font-weight: 800;
  288. }
  289. .profile-links {
  290. position: absolute;
  291. top: 106px;
  292. left: 84.5%;
  293. transform: translateX(-50%);
  294. display: flex;
  295. justify-content: center;
  296. align-items: center;
  297. gap: 12px;
  298. white-space: nowrap;
  299. z-index: 30;
  300. }
  301. .profile-links a {
  302. padding: 1px 20px;
  303. border: 1px solid #53436b;
  304. border-radius: 999px;
  305. background:
  306. linear-gradient(
  307. 135deg,
  308. rgba(40, 26, 50),
  309. #110b15
  310. );
  311. color: #a98bc9;
  312. font-family: dm serif text;
  313. font-size: 14px;
  314. font-weight: 700;
  315. text-decoration: none;
  316. transition: 0.25s ease;
  317. }
  318. .profile-links a:hover {
  319. background: #53436b;
  320. color: #eee5f5;
  321. box-shadow:
  322. 0 0 12px rgba(129, 105, 165, 0.35);
  323. transform: translateY(-2px);
  324. }
  325. .info-layout {
  326. display: grid;
  327. grid-template-columns: 1fr 1fr;
  328. gap: 25px;
  329. margin-top: -70px;
  330. padding: 0 25px 50px;
  331. position: relative;
  332. z-index: 20;
  333. }
  334. .left-column,
  335. .right-column {
  336. min-width: 0;
  337. display: flex;
  338. flex-direction: column;
  339. gap: 22px;
  340. }
  341. .info-box {
  342. position: relative;
  343. min-height: 245px;
  344. padding: 28px 32px;
  345. box-sizing: border-box;
  346. background:
  347. linear-gradient(
  348. 135deg,
  349. rgba(29, 16, 39, 0.99),
  350. rgba(15, 9, 21, 0.99)
  351. );
  352. border: 2px solid #5b4772;
  353. border-radius: 35px;
  354. box-shadow:
  355. 7px 7px 0 #280637,
  356. 0 10px 30px rgba(0, 0, 0, 0.4);
  357. overflow: hidden;
  358. }
  359. .info-label {
  360. display: inline-block;
  361. margin-bottom: 14px;
  362. border-radius: 999px;
  363. padding: 6px 14px;
  364. background: #8169a5;
  365. color: #170d20;
  366. font-family: Arial, sans-serif;
  367. font-size: 11px;
  368. font-weight: 900;
  369. letter-spacing: 2px;
  370. }
  371. .info-title {
  372. margin-bottom: 8px;
  373. font-family: dm serif text, serif;
  374. font-size: 42px;
  375. font-weight: 700;
  376. line-height: 1.1;
  377. color: #b49bc9;
  378. text-shadow:
  379. 2px 2px 0 #110b15;
  380. }
  381. .info-text {
  382. max-width: 100%;
  383. color: #a18aad;
  384. font-family: dm serif text, serif;
  385. font-size: 15px;
  386. line-height: 1.6;
  387. overflow: auto;
  388. height: 50px;
  389. }
  390. .info-tags {
  391. display: flex;
  392. flex-wrap: wrap;
  393. gap: 8px;
  394. margin-top: 18px;
  395. }
  396. .info-tags span {
  397. padding: 7px 13px;
  398. border: 1px solid #53436b;
  399. border-radius: 999px;
  400. background: rgba(129, 105, 165, 0.12);
  401. color: #a98bc9;
  402. font-family: dm serif text, serif;
  403. font-size: 11px;
  404. }
  405. .about-dropdowns {
  406. display: flex;
  407. flex-direction: column;
  408. gap: 12px;
  409. margin-top: 15px;
  410. }
  411. .about-dropdowns details {
  412. background:
  413. linear-gradient(
  414. 135deg,
  415. rgba(38, 23, 49, 0.92),
  416. rgba(15, 9, 20, 0.96)
  417. );
  418.  
  419. border: 1px solid #5b4772;
  420. border-radius: 25px;
  421. overflow: hidden;
  422. box-shadow:
  423. 4px 4px 0 #280637;
  424. }
  425. .about-dropdowns summary {
  426. padding: 16px 20px;
  427. cursor: pointer;
  428. list-style: none;
  429. color: #b49bc9;
  430. font-family: dm serif text, serif;
  431. font-size: 15px;
  432. font-weight: 700;
  433. letter-spacing: 2px;
  434. }
  435. .about-dropdowns summary::-webkit-details-marker {
  436. display: none;
  437. }
  438. .dropdown-content {
  439. background: rgba(129, 105, 165, 0.035);
  440. padding: 0 20px 18px;
  441. color: #a18aad;
  442. font-family: dm serif text, serif;
  443. font-size: 14px;
  444. line-height: 1.7;
  445. border-top: 1px solid rgba(91, 71, 114, 0.45);
  446. padding-top: 15px;
  447. }
  448. .creators-header {
  449. display: flex;
  450. align-items: center;
  451. gap: 12px;
  452. margin-bottom: 8px;
  453. }
  454. .creators-header span {
  455. padding: 6px 12px;
  456. border-radius: 999px;
  457. background: #8169a5;
  458. color: #170d20;
  459. font-family: Arial, sans-serif;
  460. font-size: 8px;
  461. font-weight: 900;
  462. letter-spacing: 2px;
  463. }
  464. .creators-header strong {
  465. color: #b49bc9;
  466. font-family: dm serif text, serif;
  467. font-size: 28px;
  468. }
  469. .creators-grid {
  470. display: flex;
  471. gap: 12px;
  472. overflow-x: auto;
  473. overflow-y: hidden;
  474. padding-bottom: 0px;
  475. }
  476. .creator {
  477. position: relative;
  478. flex: 0 0 auto;
  479. }
  480. .creator img {
  481. width: 120px;
  482. height: 150px;
  483. object-fit: cover;
  484. border: 1px solid #53436b;
  485. border-radius: 25px;
  486. transition: .3s ease;
  487. filter:
  488. brightness(.85)
  489. saturate(.5)
  490. contrast(.99);
  491. }
  492. .creator span {
  493. display: block;
  494. position: relative;
  495. top: -20px;
  496. left: 0px;
  497. font-family: "DM Serif Text", serif;
  498. letter-spacing: 2px;
  499. text-transform: uppercase;
  500. color: #b49bc9;
  501. text-shadow:
  502. 2px 2px 0 #110b15;
  503. font-size: 12px;
  504. text-align: center;
  505. }
  506. @media screen and (max-width: 900px) {
  507. .profile {
  508. margin-top: -60px;
  509. }
  510. .pp-uc-followers-count {
  511. position: relative;
  512. top: -8px;
  513. margin-left: 11px;
  514. z-index: 5;
  515. }
  516. .profile-banner {
  517. width: 100%;
  518. max-width: 100%;
  519. height: 280px;
  520. margin: 0;
  521. border-radius: 20px;
  522. overflow: hidden;
  523. }
  524. .banner-bg {
  525. width: 100%;
  526. max-width: 100%;
  527. height: 100%;
  528. padding: 3px;
  529. border-radius: 20px;
  530. object-fit: cover;
  531. object-position: center;
  532. }
  533. .banner-doll {
  534. display: none !important;
  535. }
  536. .profile-info {
  537. position: relative;
  538. width: 100%;
  539. max-width: 100%;
  540. height: 0px;
  541. min-height: 175px;
  542. text-align: center;
  543. z-index: 10;
  544. }
  545. .profile-pfp {
  546. position: absolute;
  547. top: -300px;
  548. left: 44%;
  549. transform: translateX(-50%);
  550. width: auto;
  551. max-width: 100%;
  552. height: 550px;
  553. object-fit: contain;
  554. z-index: 20;
  555. -webkit-mask-image:
  556. linear-gradient(to right, black 0%, black 80%, transparent 100%),
  557. linear-gradient(to bottom, black 0%, black 85%, transparent 100%);
  558. -webkit-mask-composite: source-in;
  559. mask-image:
  560. linear-gradient(to right, black 0%, black 80%, transparent 100%),
  561. linear-gradient(to bottom, black 0%, black 85%, transparent 100%);
  562. filter: drop-shadow(5px 8px 0 #3e3150) drop-shadow(-4px 3px 0 #280637);
  563. }
  564. .profile-name {
  565. position: absolute;
  566. top: 70px;
  567. left: 52%;
  568. transform: translateX(-50%);
  569. width: 100%;
  570. max-width: 100%;
  571. white-space: nowrap;
  572. text-align: center;
  573. font-size: 68px;
  574. z-index: 25;
  575. }
  576. .profile-links {
  577. position: absolute;
  578. top: 50px;
  579. left: 50%;
  580. transform: translateX(-50%);
  581. width: 100%;
  582. max-width: 100%;
  583. padding: 0 10px;
  584. display: flex;
  585. justify-content: center;
  586. align-items: center;
  587. flex-wrap: wrap;
  588. gap: 8px;
  589. white-space: normal;
  590. z-index: 30;
  591. }
  592. .profile-links a {
  593. flex: 0 0 auto;
  594. padding: 6px 13px;
  595. font-size: 11px;
  596. border-radius: 999px;
  597. }
  598. .status-box {
  599. position: relative;
  600. top: -10px;
  601. left: auto;
  602. width: auto;
  603. margin-bottom: -8px;
  604. padding: 20px;
  605. border-radius: 25px;
  606. z-index: 15;
  607. }
  608. .status-title {
  609. font-size: 15px;
  610. letter-spacing: 4px;
  611. }
  612. .status-text {
  613. width: 100%;
  614. max-width: 100%;
  615. height: auto;
  616. max-height: none;
  617. overflow: visible;
  618. font-size: 14px;
  619. line-height: 1.6;
  620. overflow-wrap: anywhere;
  621. word-break: normal;
  622. }
  623. .info-layout {
  624. display: grid;
  625. grid-template-columns: minmax(0, 1fr);
  626. width: 100%;
  627. max-width: 100%;
  628. min-width: 0;
  629. gap: 20px;
  630. margin: 0;
  631. padding: 0;
  632. position: relative;
  633. z-index: 20;
  634. box-sizing: border-box;
  635. }
  636. .left-column,
  637. .right-column {
  638. display: contents;
  639. min-width: 0;
  640. }
  641. .left-column .info-box {
  642. order: 1;
  643. }
  644. .right-column .info-box {
  645. order: 2;
  646. }
  647. .about-dropdowns {
  648. order: 3;
  649. }
  650. .creators-section {
  651. order: 4;
  652. }
  653. .info-box {
  654. width: 100%;
  655. max-width: 100%;
  656. min-width: 0;
  657. padding: 22px;
  658. border-radius: 25px;
  659. box-shadow:
  660. 5px 5px 0 #280637,
  661. 0 8px 20px rgba(0, 0, 0, 0.35);
  662. overflow: hidden;
  663. }
  664. .info-label {
  665. max-width: 100%;
  666. }
  667. .info-title {
  668. max-width: 100%;
  669. font-size: clamp(32px, 9vw, 42px);
  670. overflow-wrap: break-word;
  671. }
  672. .info-text {
  673. width: 100%;
  674. max-width: 100%;
  675. min-width: 0;
  676. height: 80px;
  677. max-height: none;
  678. overflow: auto;
  679. font-size: 14px;
  680. line-height: 1.6;
  681. overflow-wrap: anywhere;
  682. word-break: normal;
  683. }
  684. .info-tags {
  685. width: 100%;
  686. max-width: 100%;
  687. display: flex;
  688. flex-wrap: wrap;
  689. gap: 6px;
  690. margin-top: 15px;
  691. }
  692. .info-tags span {
  693. max-width: 100%;
  694. font-size: 10px;
  695. padding: 6px 10px;
  696. overflow-wrap: anywhere;
  697. }
  698. .about-dropdowns {
  699. width: 100%;
  700. max-width: 100%;
  701. min-width: 0;
  702. margin-top: 0;
  703. display: flex;
  704. flex-direction: column;
  705. gap: 10px;
  706. }
  707. .about-dropdowns details {
  708. width: 100%;
  709. max-width: 100%;
  710. min-width: 0;
  711. border-radius: 20px;
  712. overflow: hidden;
  713. }
  714. .about-dropdowns summary {
  715. width: 100%;
  716. max-width: 100%;
  717. padding: 15px 17px;
  718. font-size: 13px;
  719. letter-spacing: 1.5px;
  720. overflow-wrap: anywhere;
  721. }
  722. .dropdown-content {
  723. width: 100%;
  724. max-width: 100%;
  725. padding: 14px 17px 18px;
  726. font-size: 13px;
  727. line-height: 1.6;
  728. overflow-wrap: anywhere;
  729. word-break: normal;
  730. }
  731. .creators-section {
  732. width: 100%;
  733. max-width: 100%;
  734. min-width: 0;
  735. overflow: hidden;
  736. }
  737. .creators-header {
  738. width: 100%;
  739. max-width: 100%;
  740. display: flex;
  741. align-items: center;
  742. gap: 12px;
  743. margin-bottom: 8px;
  744. }
  745. .creators-header strong {
  746. font-size: 24px;
  747. }
  748. .creators-grid {
  749. display: flex;
  750. width: 100%;
  751. max-width: 100%;
  752. min-width: 0;
  753. gap: 12px;
  754. overflow-x: auto;
  755. overflow-y: hidden;
  756. padding: 0 0 10px;
  757.  
  758. }
  759. .creator {
  760. flex: 0 0 130px;
  761. width: 130px;
  762. max-width: 130px;
  763. min-width: 130px;
  764. }
  765. .creator img {
  766. display: block;
  767. width: 130px;
  768. height: 160px;
  769. max-width: 130px;
  770. object-fit: cover;
  771. border-radius: 20px;
  772. }
  773. .creator span {
  774. width: 100%;
  775. max-width: 100%;
  776. top: -18px;
  777. font-size: 11px;
  778. overflow-wrap: anywhere;
  779. }
  780. }
  781. </style>
  782.  
  783. <---THIS REMOVES THE UNIMPORTANT AND UNNECESSARY STUFF--->
  784. <style>
  785. .css-5khvnw, ._btnPrimary_1fl1d_80, .pp-uc-member-since, .css-umxegz, .css-umxegz span, .profile-badges, .pp-uc-title, .pp-uc-avatar, .css-17i40fo {
  786. display: none !important;
  787. }
  788. * {
  789. box-shadow: none !important;
  790. }
  791. *:focus {
  792. outline: none !important;
  793. box-shadow: none !important;
  794. }
  795. {-webkit-tap-highlight-color: transparent;
  796. }
  797. summary::-webkit-details-marker {
  798. display: none;
  799. }
  800. *::-webkit-scrollbar {
  801. height: 6px;
  802. }
  803. *::-webkit-scrollbar-thumb {
  804. background: rgba(0,0,0,0.3);
  805. border-radius: 999px;
  806. }
  807. .profile-page-flex {
  808. flex-direction: column !important;
  809. }
  810. .profile-page-flex > div:nth-child(1){
  811. margin: auto;
  812. }
  813. .pp-uc-background {
  814. width: 36rem;
  815. min-width: 100%;
  816. max-width: 100%;
  817. z-index: 2;
  818. }
  819. </style>
  820.  
  821. <style>
  822. <---THIS IS THE BACKGROUND. DELETE THIS IF YOU DON'T WANT IT--->
  823. .pp-page-background {
  824. background:
  825. radial-gradient(
  826. circle at 50% 30%,
  827. #28162f 0%,
  828. #110b15 45%,
  829. #080609 100%
  830. );
  831. }
  832. </style>
  833.  
  834. <---STYLING THE HEADER, NOTIFS, AND USER MENU--->
  835. <style>
  836. .pp-top-bar, .pp-mnb-wrapper {
  837. background:
  838. linear-gradient(
  839. 135deg,
  840. #120c17 0%,
  841. #28162f 50%,
  842. #150d1b 100%
  843. ) !important;
  844. border: 1px solid #493458 !important;
  845. border-radius: 999px;
  846. box-shadow:
  847. 0 0 12px rgba(91, 61, 117, 0.12);
  848. }
  849. .pp-top-bar * {
  850. color: #b49bc9;
  851. text-shadow:
  852. 2px 2px 0 #110b15;
  853. opacity: 1;
  854. font-family: serif;
  855. background: none;
  856. box-shadow: none;
  857. }
  858. .pp-top-bar *:hover {
  859. color: #b49bc9;
  860. }
  861. .pp-mnb-wrapper * {
  862. color: #b49bc9;
  863. }
  864. .glow-logo h2 {
  865. font-size: 0;
  866. }
  867. .glow-logo h2::after {
  868. font-size: 1.8rem;
  869. font-style: italic;
  870. letter-spacing: 5px;
  871. text-transform: uppercase;
  872. font-weight: bold;
  873. content: "— 紫色的爱";
  874. position: relative;
  875. top: 5px;
  876. }
  877. .css-16g2f4q {
  878. font-size: 0;
  879. }
  880. .css-16g2f4q:after {
  881. content: "— 紫色的爱";
  882. letter-spacing: 5px;
  883. font-style: italic;
  884. font-weight: bold;
  885. text-transform: uppercase;
  886. font-size: 15px;
  887. }
  888. .css-1rokoft {
  889. font-size: 0px;
  890. }
  891. .pp-top-bar-logo-sub-name {
  892. display: none;
  893. }
  894. .glow-logo:hover {
  895. text-shadow: none;
  896. }
  897. .glow-on-hover::before {
  898. background: transparent;
  899. }
  900. .glow-on-hover::after {
  901. background: transparent;
  902. top: 4px;
  903. opacity: 1;
  904. }
  905. .search-input {
  906. background: rgb(180, 155, 201, 0.3);
  907. border-radius: 99px;
  908. }
  909. #search-input::placeholder {
  910. color: #ccb1e2;
  911. text-shadow:
  912. 2px 2px 0 #110b15;
  913. font-family: serif;
  914. }
  915. .pp-top-bar-search-history {
  916. margin-top: 1rem;
  917. padding: 8px;
  918. background: none;
  919. border: none;
  920. box-shadow: none;
  921. backdrop-filter: none !important;
  922. }
  923. [class*="_historyItem_"] {
  924. border-radius: 99px;
  925. padding: 8px;
  926. height: unset;
  927. min-height: 2rem;
  928. background: rgb(63, 47, 76, 0.8);
  929. border: 2px solid #493458;
  930. }
  931. [class*="_historyItem_"]:is(:hover, :focus),
  932. [class*="_historyItemFocused_"] {
  933. background: rgb(142, 121, 160, 0.3);
  934. }
  935. [class*="_historyItem_"]:not(:only-child, :last-child) {
  936. margin-bottom: 8px;
  937. }
  938. [class*="_historyItem_"] span + span {
  939. font: 400 1rem 'DM Sans', sans-serif;
  940. }
  941. [class*="_historyItem_"]::after {
  942. content: unset;
  943. }
  944. [class*="_historyItem_"] path {
  945. fill: #c7abde;
  946. opacity: 1;
  947. }
  948. .pp-top-bar-app-menu-list {
  949. background: none;
  950. border: none;
  951. margin-top: 20px;
  952. box-shadow: none;
  953. border-radius: 15px;
  954. }
  955. .css-1hmyng0 {
  956. display: none;
  957. }
  958. .pp-top-bar-app-menu-list-item, .pp-top-bar-app-menu-list-item:nth-of-type(1) {
  959. font-family: serif;
  960. color: #c7abde;
  961. background:
  962. linear-gradient(
  963. 135deg,
  964. #120c17 0%,
  965. #28162f 50%,
  966. #150d1b 100%
  967. ) !important;
  968. border: 1px solid #493458 !important;
  969. border-radius: 999px;
  970. transition: all 0.3s ease-out;
  971. }
  972. .pp-top-bar-app-menu-list-item:hover {
  973. color: #b49bc9;
  974. border-radius: 15px;
  975. transform: translateY(-5px);
  976. }
  977. [class*="notificationsContainer"] { }
  978. [class*="notificationsButton"]:hover {
  979. background:
  980. linear-gradient(
  981. 135deg,
  982. #120c17 0%,
  983. #28162f 50%,
  984. #150d1b 100%
  985. ) !important;
  986. border-radius: 99px;
  987. }
  988. [class*="notificationsButton"]:active {
  989. background:
  990. linear-gradient(
  991. 135deg,
  992. #120c17 0%,
  993. #28162f 50%,
  994. #150d1b 100%
  995. ) !important;
  996. transform: scale(0.9);
  997. }
  998. [class*="notificationIcon"] {
  999. transition: all 500ms;
  1000. }
  1001. [class*="notificationsButton"]:is(:hover, :active) [class*="notificationIcon"] {
  1002. color: #111;
  1003. }
  1004. [class*="notificationsBadge"] {
  1005. display: flex;
  1006. align-items: center;
  1007. justify-content: center;
  1008. top: 0;
  1009. right: 0;
  1010. background:
  1011. linear-gradient(
  1012. 135deg,
  1013. #120c17 0%,
  1014. #28162f 50%,
  1015. #150d1b 100%
  1016. ) !important;
  1017. font: 600 0.75rem/0.7 serif;
  1018. padding: 0 0.25rem;
  1019. width: auto;
  1020. min-width: 1.25rem;
  1021. aspect-ratio: 1;
  1022. height: auto;
  1023. border-radius: 999px;
  1024. box-shadow: unset;
  1025. border: unset;
  1026. }
  1027. [class*="notificationsPopover"] {
  1028. max-width: 400px;
  1029. background:
  1030. linear-gradient(
  1031. 135deg,
  1032. #120c17 0%,
  1033. #28162f 50%,
  1034. #150d1b 100%
  1035. ) !important;
  1036. border: 1px solid #493458;
  1037. margin-top: 10px;
  1038. }
  1039. @media only screen and (max-width: 768px),
  1040. only screen and (max-width: 480px) {
  1041. [class*="notificationsPopover"] {
  1042. top: 3rem;
  1043. }
  1044. }
  1045. [class*="notificationsPopover"]::before { content: unset; }
  1046. [class*="_loadingSpinner_"] {
  1047. border: 3px solid #493458;
  1048. border-top: 3px solid #493458;
  1049. }
  1050. [class*="_loadingMessage_"] {
  1051. color: #b49bc9;
  1052. font-family: 'serif';
  1053. }
  1054. [class*="_emptyState_"] {
  1055. font: 900 1rem serif;
  1056. color: #b49bc9;
  1057. }
  1058. [class*="_emptyState_"]::first-letter {
  1059. text-transform: uppercase;
  1060. }
  1061. [class*="popoverHeader"] {
  1062. padding: 1rem;
  1063. border-bottom: 1px solid #493458;
  1064. background: unset;
  1065. box-shadow: unset;
  1066. }
  1067. [class*="popoverTitle"] {
  1068. font: italic 100 1.3rem/0.7 'DM Serif Text', serif;
  1069. color: #b49bc9;
  1070. letter-spacing: unset;
  1071. text-transform: capitalize;
  1072. }
  1073. [class*="headerActions"] {
  1074. gap: 0.25rem;
  1075. }
  1076. [class*="headerActions"] button {
  1077. width: 2rem;
  1078. height: 2rem;
  1079. padding: 0.375rem;
  1080. font-size: 1.5rem;
  1081. background: #28162f;
  1082. border-color: unset;
  1083. box-shadow: unset;
  1084. color: #b49bc9;
  1085. border: 1px solid #493458;
  1086. border-radius: 999px;
  1087. transition: all 500ms;
  1088. }
  1089. [class*="headerActions"] button:hover {
  1090. background: #28162f;
  1091. color: #b49bc9;
  1092. border: 1px solid #493458;
  1093. box-shadow: unset;
  1094. transform: unset;
  1095. }
  1096. button[class*="deleteAllButton"] {
  1097. color: #b49bc9;
  1098. }
  1099. button[class*="deleteAllButton"]:hover {
  1100. background: #28162f;
  1101. }
  1102. button[class*="markAllReadButton"] {
  1103. color: #b49bc9;
  1104. }
  1105. button[class*="markAllReadButton"]:hover {
  1106. background: #28162f;
  1107. }
  1108. button[class*="closeButton"] {
  1109. padding: 0.25rem;
  1110. font-size: 2rem;
  1111. }
  1112. [class*="notificationsList"] {
  1113. max-height: 550px;
  1114. }
  1115. #root [class*="notificationItem"] {
  1116. background: unset;
  1117. padding: 0.5rem;
  1118. gap: 0.5rem;
  1119. border-bottom: 1px solid #493458;
  1120. align-items: center;
  1121. transition: unset;
  1122. }
  1123. #root [class*="notificationItem"]:last-child,
  1124. #root [class*="notificationItem"]:nth-last-child(2):has(+ [class*="loadMoreWrapper"]) { border-bottom: unset; }
  1125. [class*="unreadIndicator"] {
  1126. width: 6rem;
  1127. background: radial-gradient(circle at 6rem 50%, #0000 62.5%, #493458) 200% 200%;
  1128. box-shadow: unset;
  1129. border-radius: unset;
  1130. }
  1131. [class*="avatarSection"] { display: contents; }
  1132. [class*="avatarContainer"] {
  1133. min-width: 5rem;
  1134. height: auto;
  1135. aspect-ratio: 1;
  1136. transition: transform 500ms, filter 500ms;
  1137. }
  1138. [class*="characterAvatar"] {
  1139. width: 4rem;
  1140. height: auto;
  1141. aspect-ratio: 1;
  1142. border-radius: 10px;
  1143. border: 1px solid #493458;
  1144. object-position: top;
  1145. box-shadow: unset;
  1146. }
  1147. [class*="userAvatar"] {
  1148. bottom: 0;
  1149. right: 0;
  1150. min-width: unset;
  1151. width: 2rem;
  1152. aspect-ratio: 1;
  1153. height: auto;
  1154. object-position: top;
  1155. border-radius: 999px;
  1156. box-shadow: unset;
  1157. border: unset;
  1158. }
  1159. [class*="notificationItem"]:hover *:is([class*="characterAvatar"], [class*="userAvatar"]) {
  1160. box-shadow: unset;
  1161. transform: unset;
  1162. }
  1163. a[class*="avatarContainer"]:hover {
  1164. transform: scale(1.05);
  1165. filter: drop-shadow(0 0 0.5rem #000);
  1166. }
  1167. [class*="contentWrapper"] [class*="content"] { display: contents; }
  1168. [class*="contentWrapper"] {
  1169. flex-flow: column;
  1170. padding: 0.5rem 0.75rem;
  1171. gap: 0.5rem;
  1172. border-radius: 1rem;
  1173. }
  1174. [class*="notificationItem"]:not(:has([class*="unreadIndicator"])) *:is([class*="avatarContainer"], [class*="contentWrapper"]) { filter: grayscale(0.75) opacity(0.5); }
  1175. [class*="_subject_"] {
  1176. font: 500 0.875rem serif;
  1177. color: #b49bc9;
  1178. }
  1179. [class*="highlightUsername"] {
  1180. color: #b49bc9;
  1181. font-weight: 900;
  1182. }
  1183. [class*="highlightCharacter"] {
  1184. color: #b49bc9;
  1185. font-weight: 900;
  1186. }
  1187. [class*="_body_"] {
  1188. font: 400 0.75rem serif;
  1189. color: #b49bc9;
  1190. }
  1191. [class*="highlightUsernameBody"] {
  1192. color: #b49bc9;
  1193. font-weight: 600;
  1194. }
  1195. [class*="highlightCharacterBody"] {
  1196. color: #b49bc9;
  1197. font-weight: 600;
  1198. }
  1199. [class*="_timestamp_"] {
  1200. font: 400 0.75rem serif;
  1201. color: #f9f9f980;
  1202. }
  1203. [class*="archiveSection"] {
  1204. padding: 1rem;
  1205. top: unset;
  1206. bottom: 0;
  1207. }
  1208. [class*="archiveButton"] {
  1209. width: 2rem;
  1210. height: 2rem;
  1211. padding: 0.25rem;
  1212. font-size: 1rem;
  1213. background: #28162f;
  1214. border-color: unset;
  1215. box-shadow: unset;
  1216. color: #b49bc9;
  1217. border: 1px solid #493458;
  1218. border-radius: 999px;
  1219. transition: all 500ms;
  1220. }
  1221. [class*="archiveButton"]:hover {
  1222. background: #28162f;
  1223. color: #b49bc9;
  1224. border: 1px solid #0000;
  1225. box-shadow: unset;
  1226. transform: scale(1.05);
  1227. }
  1228. [class*="loadMoreWrapper"] {
  1229. padding: 0.5rem;
  1230. border-top: 1px solid #493458;
  1231. }
  1232. [class*="loadMoreButton"] {
  1233. width: 100%;
  1234. height: auto;
  1235. padding: 0.75rem 0.875rem;
  1236. font: 600 1rem/0.7 serif;
  1237. background: #28162f;
  1238. border-color: unset;
  1239. box-shadow: unset;
  1240. color: #b49bc9;
  1241. border: 1px solid #493458;
  1242. border-radius: 999px;
  1243. transition: all 500ms;
  1244. }
  1245. [class*="loadMoreButton"]::first-letter { text-transform: uppercase; }
  1246. #root [class*="loadMoreButton"]:hover {
  1247. background: #28162f;
  1248. color: #b49bc9;
  1249. border: 1px solid #0000;
  1250. box-shadow: unset;
  1251. transform: unset;
  1252. }
  1253. </style>
  1254.  
  1255. <---FOLLOW AND OPTIONS BUTTONS--->
  1256. <style>
  1257. .css-1aq5geu{
  1258. justify-content: right;
  1259. margin-top: -10px;
  1260. }
  1261. @media screen and (max-width: 768px) {
  1262. .css-1aq5geu {
  1263. margin-top: -0px;
  1264. }
  1265. }
  1266. .Btn {
  1267. color: #c7abde;
  1268. background:
  1269. linear-gradient(
  1270. 135deg,
  1271. rgba(29, 16, 39, 0.99),
  1272. rgba(15, 9, 21, 0.99)
  1273. );
  1274. border: 1px solid #493458 !important;
  1275. border-radius: 20px;
  1276. font-weight: 900;
  1277. backdrop-filter: blur(0px);
  1278. transition: all 300ms !important;
  1279. }
  1280. .Btn::before {
  1281. display: none;
  1282. }
  1283. .Btn span {
  1284. font-size: 0;
  1285. width: auto;
  1286. }
  1287. .Btn span::after {
  1288. font-size: 1rem;
  1289. font-family: times new roman;
  1290. letter-spacing: 0.5px;
  1291. content: "Follow";
  1292. }
  1293. .Btn[data-following=true] span::after {
  1294. font-size: 1rem;
  1295. font-family: times new roman;
  1296. letter-spacing: 0.5px;
  1297. content: "Unfollow";
  1298. }
  1299. .css-15w88gn {
  1300. color: #c7abde;
  1301. background:
  1302. linear-gradient(
  1303. 135deg,
  1304. rgba(29, 16, 39, 0.99),
  1305. rgba(15, 9, 21, 0.99)
  1306. );
  1307. border: 1px solid #493458 !important;
  1308. border-radius: 20px;
  1309. font-family: times new roman;
  1310. transition: all 300ms !important;
  1311. }
  1312. .css-15w88gn:hover {
  1313. background:
  1314. linear-gradient(
  1315. 135deg,
  1316. rgba(29, 16, 39, 0.99),
  1317. rgba(15, 9, 21, 0.99)
  1318. );
  1319. }
  1320. </style>
  1321.  
  1322. <---STYLING THE TOOLTIPS AND NUMBER PAGES--->
  1323. <style>
  1324. .chakra-tooltip__arrow-wrapper {
  1325. display: none;
  1326. }
  1327. .css-jdhqy4 div {
  1328. background: linear-gradient( 135deg, #120c17 0%, #28162f 50%, #150d1b 100%)!important;
  1329. border: 1px solid #493458 !important;
  1330. color: #c7abde;
  1331. font-weight: 900;
  1332. padding: 8px;
  1333. margin: 5px;
  1334. border-radius: 20px;
  1335. font-family: SERIF;
  1336. }
  1337. .sonner-toast-container [data-sonner-toast][data-type=success] {
  1338. background: linear-gradient( 135deg, #120c17 0%, #28162f 50%, #150d1b 100%) !important;
  1339. border: 1px solid #493458 !important;
  1340. border-radius: 999px !important;
  1341. color: #c7abde !important;
  1342. }
  1343. .sonner-toast-container [data-sonner-toast][data-type=success] [data-icon] {
  1344. color: #c7abde !important;
  1345. }
  1346. [data-sonner-toast][data-styled=true] [data-title] {
  1347. font-family: dm serif text !important;
  1348. }
  1349. ::selection {
  1350. color: #c7abde;
  1351. background:#28162f;
  1352. }
  1353. @media screen and (min-width: 1024px) {
  1354. .profile-pagination-flex-outer,
  1355. .profile-pagination-prev-hstack {
  1356. width: 100%;
  1357. justify-content: center;
  1358. position: sticky;
  1359. bottom: 0;
  1360. z-index: 4;
  1361. }
  1362. }
  1363. .profile-pagination-flex-outer, .profile-pagination-prev-hstack {
  1364. width: 100%;
  1365. justify-content: center;
  1366. }
  1367. .pp-pg-page-button {
  1368. color: #c7abde;
  1369. background:
  1370. linear-gradient(
  1371. 135deg,
  1372. #120c17 0%,
  1373. #28162f 50%,
  1374. #150d1b 100%
  1375. ) !important;
  1376. border: 1px solid #493458 !important;
  1377. font-family: serif !important;
  1378. }
  1379. ._navButton_5a6y6_84 {
  1380. color: #c7abde;
  1381. }
  1382. ._outer_5a6y6_48 {
  1383. justify-content: center;
  1384. }
  1385. .pp-pg-page-button {
  1386. width: 30px;
  1387. height: 30px;
  1388. }
  1389. </style>
  1390.  
  1391. <---STYLING THE CHARACTERS, SEARCH BAR, TAG, LATEST, AND LATEST OPTIONS--->
  1392. <style>
  1393. .css-1bx5ylf {
  1394. margin-top: 1rem;
  1395. }
  1396. .css-1bx5ylf::before {
  1397. content: 'gentle lovers';
  1398. letter-spacing: 5px;
  1399. font-family: dm serif text;
  1400. text-transform: uppercase;
  1401. font-style: italic;
  1402. font-weight: bold;
  1403. line-height: 1;
  1404. font-size: 4rem;
  1405. width: 100%;
  1406. display: block;
  1407. color: #c7abde;
  1408. text-shadow: none;
  1409. }
  1410. @media only screen and (max-width: 799px) {
  1411. .css-1bx5ylf {
  1412. margin-top: 1rem;
  1413. }
  1414. .css-1bx5ylf::before {
  1415. font-size: 2rem;
  1416. }
  1417. }
  1418. .pp-tabs-button, .pp-tabs-indicator {
  1419. display: none;
  1420. }
  1421. .Btn2-purple {
  1422. box-shadow: none;
  1423. margin-top: 4px;
  1424. margin-bottom: 8px;
  1425. background:
  1426. linear-gradient(
  1427. 135deg,
  1428. rgba(29, 16, 39, 0.99),
  1429. rgba(15, 9, 21, 0.99)
  1430. );
  1431. border: 1px solid #493458;
  1432. border-radius: 20px;
  1433. }
  1434. .css-wd8hou strong {
  1435. font-family: times new roman;
  1436. font-weight: bold;
  1437. font-size: 1.3rem;
  1438. color: #c7abde;
  1439. }
  1440. .pp-pg-total-text {
  1441. font-size: 0;
  1442. }
  1443. .pp-pg-total-text::before {
  1444. content: "waiting for you";
  1445. font-size: 1.2rem;
  1446. font-family: times new roman;
  1447. font-weight: bold;
  1448. padding-left: 2px;
  1449. color: #c7abde;
  1450. }
  1451. .css-m8ywhg {
  1452. flex-direction: column;
  1453. align-items: flex-start;
  1454. }
  1455. .css-zdpt2t {
  1456. margin-left: auto;
  1457. margin-top: 2rem;
  1458. }
  1459. .Btn2-purple:before {
  1460. display: none;
  1461. }
  1462. .css-1eee8fp {
  1463. margin-top: 0;
  1464. }
  1465. .css-1cdqd3a {
  1466. display: flex;
  1467. margin-left: auto;
  1468. }
  1469. @media screen and (max-width: 768px) {
  1470. .css-1cdqd3a {
  1471. margin: auto;
  1472. }
  1473. }
  1474. :is( .react-select__control.css-13cymwt-control, .react-select__control--is-focused ) {
  1475. border: none;
  1476. }
  1477. .profile-character-search-input:is(:hover, :focus, :focus-visible) {
  1478. color: #0000;
  1479. border: 2px solid;
  1480. box-shadow: none;
  1481. outline-color: #0000;
  1482. }
  1483. .pp-fl-search-input, .pp-fl-search-input:is(:hover, :focus), .pp-fl-filter-button, .css-b62m3t-container {
  1484. color: #c7abde;
  1485. position: relative;
  1486. border-radius: 999px;
  1487. background:
  1488. linear-gradient(
  1489. 135deg,
  1490. rgba(29, 16, 39, 0.99),
  1491. rgba(15, 9, 21, 0.99)
  1492. );
  1493. border: 1px solid #493458;
  1494. }
  1495. .pp-fl-search-input::placeholder {
  1496. visibility: hidden;
  1497. }
  1498. .profile-character-search-input-group::before {
  1499. content: 'search characters. . .';
  1500. position: absolute;
  1501. color: #c7abde;
  1502. margin-top: 8px;
  1503. left: 15px;
  1504. z-index: 1;
  1505. pointer-events: none;
  1506. border-radius: 8px;
  1507. font-family: serif;
  1508. }
  1509. body:has(.pp-fl-search-input:focus, .pp-fl-search-input:not(:placeholder-shown)) .profile-character-search-input-group::before {
  1510. opacity: 0;
  1511. }
  1512. .dark .react-select__placeholder, .transparent .react-select__placeholder, .dark .react-select__single-value, .transparent .react-select__single-value, .react-select__menu-portal .react-select__placeholder, .react-select__menu-portal .react-select__single-value {
  1513. font-family: serif;
  1514. color: #c7abde;
  1515. }
  1516. .dark .react-select__indicator-separator, .transparent .react-select__indicator-separator, .react-select__menu-portal .react-select__indicator-separator {
  1517. background-color: #c7abde;
  1518. }
  1519. .css-8mmkcg, .css-1n2in4t svg {
  1520. fill: #c7abde;
  1521. }
  1522. .react-select__indicator-separator.css-1u9des2-indicatorSeparator {
  1523. background-color: #c7abde !important;
  1524. }
  1525. .react-select__option--is-selected {
  1526. display: none;
  1527. }
  1528. .dark .react-select__menu,
  1529. .colored .react-select__menu,
  1530. .transparent .react-select__menu,
  1531. .react-select__menu-portal .react-select__menu {
  1532. font-family: dm serif text;
  1533. padding: 0 !important;
  1534. background: none !important;
  1535. border: none !important;
  1536. backdrop-filter: none !important;
  1537. }
  1538. .dark .react-select__option,
  1539. .colored .react-select__option,
  1540. .transparent .react-select__option,
  1541. .react-select__menu-portal .react-select__option {
  1542. color: #c7abde;
  1543. text-align: center;
  1544. background: radial-gradient( circle at bottom, #120c17 0%, #150d1b 70%);
  1545. border: 1px solid #493458;
  1546. border-radius: 25px !important;
  1547. margin-bottom: 3px;
  1548. }
  1549. </style>
  1550.  
  1551. <---BOT CARDS--->
  1552. <style>
  1553. div:has(> .css-1s5evre),
  1554. div:has(~ .css-1s5evre) {
  1555. background: NONE !important;
  1556. }
  1557. .pp-cc-list-container{
  1558. display: flex;
  1559. flex-flow: row wrap;
  1560. justify-content: center;
  1561. }
  1562. .pp-cc-wrapper{
  1563. flex: 0 1 350px;
  1564. width: 350px;
  1565. height: 250px;
  1566. }
  1567. .css-1s5evre a{
  1568. display: contents;
  1569. }
  1570. .css-1s5evre{
  1571. background: transparent;
  1572. display: grid;
  1573. grid-template-columns: 1fr 1fr;
  1574. grid-template-rows: auto 1fr 1fr;
  1575. gap: 0px;
  1576. }
  1577. .css-1q7rmf0 {
  1578. grid-area: 2 / 1 / 4 / 2;
  1579. margin: 2px;
  1580. border: 2px solid #493458;
  1581. border-radius: 25px !important;
  1582. overflow: visible;
  1583. }
  1584. .pp-cc-avatar {
  1585. border-radius: 25px !important;
  1586. }
  1587. .pp-cc-tags{
  1588. max-height: 75px;
  1589. height: 100%;
  1590. overflow: hidden auto;
  1591. }
  1592. .css-199gcrh{
  1593. grid-area: 2 / 2 / 3 / 3;
  1594. margin: 0;
  1595. }
  1596. .css-2f7e99 svg {
  1597. font-size: 0;
  1598. }
  1599. .pp-cc-chats-count {
  1600. font-family: serif;
  1601. color: #c7abde;
  1602. text-shadow: 1px 1px 0 #000;
  1603. font-size: 10px;
  1604. opacity: 0.5;
  1605. }
  1606. .pp-cc-description {
  1607. font-weight: bold;
  1608. font-family: cardo;
  1609. text-align: justify;
  1610. color: #c7abde;
  1611. padding: 7px;
  1612. background:
  1613. linear-gradient(
  1614. 135deg,
  1615. rgba(29, 16, 39, 0.99),
  1616. rgba(15, 9, 21, 0.99)
  1617. );
  1618. border: 2px solid #493458;
  1619. max-height: 80px;
  1620. height: 100%;
  1621. overflow: hidden auto;
  1622. border-radius: 20px;
  1623. z-index: 999;
  1624. }
  1625. .pp-cc-tags{
  1626. grid-area: 3 / 2 / 4 / 3;
  1627. margin-bottom: 0;
  1628. padding-bottom: 1rem;
  1629. }
  1630. .pp-cc-star-line, .pp-cc-creator-name, .css-1c9wmts{
  1631. display: none;
  1632. }
  1633. .css-nlxhw4 {
  1634. grid-area: 1 / 1 / 2 / 1;
  1635. display: flex;
  1636. justify-content: center;
  1637. align-items: flex-start;
  1638. width: 150px;
  1639. margin: 0 auto;
  1640. z-index: 10;
  1641. }
  1642. .css-10cv7r2 {
  1643. right: unset;
  1644. display: flex;
  1645. top: 214px;
  1646. justify-content: center;
  1647. width: 50%;
  1648. }
  1649. .pp-cc-ribbon {
  1650. filter: none;
  1651. position: relative;
  1652. inset: auto;
  1653. }
  1654. .pp-cc-ribbon-wrap {
  1655. clip-path: none;
  1656. background: transparent;
  1657. box-shadow: none;
  1658. padding: 0;
  1659. }
  1660. .pp-cc-name {
  1661. border-radius: 999px;
  1662. padding: 6px 14px;
  1663. background: #8169a5;
  1664. border: 2px solid #493458;
  1665. color: #170d20;
  1666. font-family: Arial, sans-serif;
  1667. font-weight: 700;
  1668. letter-spacing: 2px;
  1669. position: relative;
  1670. top: 220px;
  1671. }
  1672. .pp-cc-tags-regular {
  1673. display: inline-block;
  1674. line-height: unset;
  1675. }
  1676. .pp-cc-tags-regular::first-letter {
  1677. font-size: 0;
  1678. }
  1679. li:has(.pp-tag-limitless) {
  1680. flex: 1 1 100%;
  1681. position: absolute;
  1682. bottom: 0px;
  1683. left: 175px;
  1684. }
  1685. .css-4a6x12 > span:not(.css-x2gqu0) {
  1686. border-radius: 12px;
  1687. background:
  1688. linear-gradient(
  1689. 135deg,
  1690. rgba(29, 16, 39, 0.99),
  1691. rgba(15, 9, 21, 0.99)
  1692. );
  1693. border: 2px solid #493458;
  1694. color: #c7abde;
  1695. z-index: 1;
  1696. font-family: serif;
  1697. font-weight: bold;
  1698. text-align: center;
  1699. }
  1700. .pp-tag-limitless {
  1701. border: none;
  1702. background: none;
  1703. color: #dbc0f2;
  1704. letter-spacing: 5px;
  1705. opacity: 0.5;
  1706. font-family: serif;
  1707. font-weight: bold;
  1708. font-size: 0;
  1709. margin-left: 5px;
  1710. }
  1711. .pp-tag-limitless::before {
  1712. content: "LIMITLESS";
  1713. font-size: 20px;
  1714. display: block;
  1715. text-align: center;
  1716. }
  1717. .pp-tag-deaddove {
  1718. font-size: 0 !important;
  1719. }
  1720. .pp-tag-deaddove::after {
  1721. content: "Dead Dove";
  1722. font-size: 0.75rem;
  1723. }
  1724. .profile-character-card-stack > a:not(:first-child),
  1725. .profile-character-card-stack > *:last-child, .pp-cc-star-line, .pp-cc-creator-name, .css-y7b0z0, .css-itvw0n, .css-1henxb,.css-8828od, .css-1awld45,.css-y395z1 {
  1726. display: none;
  1727. }
  1728. </style>
  1729.  
  1730. <---CREDITS, KEEP OR DONT, IDC EITHER WAY <33 --->
  1731. <div class="watermark">
  1732. css by
  1733. <a href="https://janitorai.com/profiles/92d6986b-2666-4859-8a6e-bf084b54a0fe_profile-of-8-tv-8-tv">
  1734. @8tv_8tv
  1735. </a>
  1736. </div>
  1737. <style>
  1738. .watermark {
  1739. position: absolute;
  1740. top: -28px;
  1741. font-family: Lobster;
  1742. font-size: 0.5rem;
  1743. color: #c7abde;
  1744. opacity: 0.4;
  1745. letter-spacing: 0.5px;
  1746. z-index: 100;
  1747. }
  1748. .watermark a {
  1749. color: inherit;
  1750. text-decoration: none;
  1751. transition: 0.25s ease;
  1752. }
  1753. .watermark a:hover {
  1754. color: #c7abde;
  1755. }
  1756. </style>
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!