API tools faq
paste
Fru26

Untitled

Fru26
Jan 14th, 2026 (edited)
66
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 44.25 KB | None | 0 0
raw download clone embed print report
  1. <style>
  2. /*FOR LIZ*/
  3. </style>
  4.  
  5.   <style>
  6.  
  7.  
  8. .toggle-ui {
  9.   width: 48px;
  10.   height: 27px;
  11.   border-radius: 50px;
  12.   background-color: #000000;
  13.   border: 1px solid #4a0404;
  14.   position: relative;
  15.   transition: background-color 0.3s ease, border 0.3s ease;
  16. }
  17.  
  18.  
  19. .toggle-ui::before {
  20.   content: "𖤐";                
  21.   position: absolute;
  22.   top: 3px;
  23.   left: 4px;
  24.   width: 20px;
  25.   height: 20px;
  26.   border-radius: 50%;
  27.   background-color: #1a1a1a;
  28.   color: #4a0404;
  29.   display: flex;
  30.   align-items: center;
  31.   justify-content: center;
  32.   font-size: 14px;
  33.   line-height: 1;
  34.   transition:  
  35.     left 0.3s ease,  
  36.     transform 0.3s ease,  
  37.     content 0.3s ease,  
  38.     background-color 0.3s ease,  
  39.     color 0.3s ease;
  40. }
  41.  
  42.  
  43. .theme-toggle[open] .toggle-ui {
  44.   background-color: #fff5f8;
  45.   border: 1px solid #ffb6c1;
  46. }
  47.  
  48.  
  49. .theme-toggle[open] .toggle-ui::before {
  50.   content: "🍓";
  51.   left: 24px;
  52.   transform: rotate(0deg);
  53.   background-color: #ffd1dc;
  54.   color: #ff7096;
  55. }
  56.  
  57.  
  58. .theme-toggle {
  59.   position: fixed;
  60.   top: 10px;
  61.   right: 15px;
  62.   z-index: 9999;
  63. }
  64.  
  65.  
  66. .theme-toggle summary {
  67.   list-style: none;
  68.   cursor: pointer;
  69. }
  70. .theme-toggle summary::-webkit-details-marker {
  71.   display: none;
  72. }
  73. </style>
  74. <details class="theme-toggle">
  75.   <summary>
  76.     <div class="toggle-ui"></div>
  77.   </summary>
  78. </details>
  79.  
  80. <style>
  81.  
  82. .pfp-stage{
  83.   display:flex;
  84.   justify-content:center;
  85.   align-items:center;
  86.   padding:20px;
  87. }
  88.  
  89.  
  90. .custom-pfp{
  91.   position:relative;
  92.   width:285px;
  93.   height:470px;
  94. }
  95.  
  96.  
  97. .custom-pfp img{
  98.   position:absolute;
  99.   inset:0;
  100.   width:100%;
  101.   height:100%;
  102.   object-fit:cover;
  103.   border-radius:5px;
  104.   z-index:1;
  105.   transition:opacity .9s ease;
  106. }
  107.  
  108.  
  109. .custom-pfp .img-dark{opacity:1;}
  110. .custom-pfp .img-light{opacity:0;}
  111.  
  112.  
  113. .theme-toggle[open] ~ .pfp-stage .img-dark{opacity:0;}
  114. .theme-toggle[open] ~ .pfp-stage .img-light{opacity:1;}
  115.  
  116.  
  117. .custom-pfp::before{
  118.   content:"";
  119.   position:absolute;
  120.   inset:-18px;
  121.   background:#4a0404;
  122.   border-radius:30px;
  123.   z-index:3;
  124.   transform: scaleX(-3) scaleY(3.15) translate(31.5%, 34.2%);
  125.   pointer-events:none;
  126.   clip-path:path("M119.9 80c0-44.05.02-62.1.05-40.05.03 22.03.03 58.05 0 80.1-.03 22.03-.05 4.01-.05-40.05zM11.9 159.45c-12.82-2.07-14.78-15.42-3.55-24.21l1.65-1.29.01-8.54c0-4.69.05-11.07.12-14.18.13-6.45.11-6.65-.72-6.65-.32 0-.64-.09-.71-.19-.13-.21.65-.47 1.1-.37.15.03.31-.1.35-.29.22-.99-2.67-.03-3.21 1.07-.24.49-.33.57-.33.28 0-.88 1.17-1.73 2.74-1.99 1.09-.18 1.09-.53 0-1.17-3.2-1.88-4.47-4.64-2.64-5.72.84-.49 1.18-.56.52-.10-.58.41-.52 1.18.10 1.18.87 0 1.71 1.40 1.07 1.80-.37.23-.62-.10-.39-.51.15-.28.14-.39-.02-.39-.13 0-.54-.15-.92-.33-.84-.40-.91-.34-.66.59.50 1.81 2.76 3.40 4.89 3.42l1.40.02.06.75c.06.67.19.84 1.30 1.58 6.73 4.53 9.34 14.50 5.65 21.53-1.16 2.21-3.28 4.51-6.15 6.68-.30.23-.34.90-.39 6.32l-.05 6.06 1.27.64c2.77 1.40 2.76 3.68-.02 6.15-1.21 1.08-1.38 1.32-1.33 1.85l.06.60 4.95.09 4.94.09.20-.52c.11-.29.14-.80.08-1.14l-.13-.62-.43.55c-.66.82-2.28.94-3.00.22-1.49-1.49.89-3.12 2.83-1.94.79.49 1.27 1.38 1.32 2.47l.04.84 14.00.15c15.58.17 14.90.13 14.90.93l0 .57-1.95.12c-1.07.07-7.75.18-14.85.25l-12.90.13-.83.76c-2.04 1.87-6.89 3.02-10.37 2.46zm6.42-1.20c1.32-.33 3.29-1.38 3.43-1.82.10-.30-7.47-.34-7.66-.04-.06.10.24.33.65.53l.76.35-.88.07c-1.15.09-1.66-.05-2.36-.64-.32-.27-.89-.52-1.27-.55l-.69-.07-.17-5.20c-.20-6.00-.07-5.44-1.12-4.90-3.61 1.84-4.29 6.41-1.43 9.62 2.41 2.70 6.52 3.71 10.74 2.65zm-10.98-1.84c-3.54-3.79-2.83-8.62 1.58-10.78l1.08-.53 0-4.86c0-5.62.12-5.40-1.95-3.60-7.22 6.24-7.96 15.28-1.61 19.74 1.79 1.26 2.06 1.27.90.03zm6.18.27c-.58-.50-1.32-.67-1.32-.31 0 .26 1.00.79 1.50.80.35.01.33-.05-.18-.49zm.80-5.53c2.29-2.47 2.36-4.24.20-5.38-1.08-.58-1.52-.43-1.52.50 0 .63.07.71.75.90 1.04.28 1.74.80 1.47 1.07-.15.15-.35.08-.70-.24-.30-.29-.53-.37-.61-.24-.07.12-.31.22-.52.22-.36 0-.39.15-.37 2.10.01 2.35.06 2.40 1.30 1.07zm.40-20.79c2.11-1.81 2.77-2.77 1.59-2.27-.39.16-.99.28-1.35.26-.54-.02-.57-.04-.16-.11 1.89-.32 2.55-.90 2.21-1.94-.17-.50-.32-.66-.54-.58-.51.20-1.27-.92-1.01-1.48.11-.25.32-.46.47-.46.32 0 .36.32.07.50-.38.24.64 1.10 1.31 1.10.56 0-1.06-2.14-2.51-3.31-1.68-1.36-1.72-1.36-1.67.16.03.69.05 2.17.06 3.29.01 2.02.02 2.05.56 2.35l.55.31-.55-.12-.55-.12 0 1.72c0 2.02-.01 2.02 1.52.70zm3.86-4.74c2.70-5.35.97-10.60-3.73-11.36-.46-.07-1.07-.07-1.35 0l-.53.13.05 2.91.05 2.91 1.55 1.20c2.24 1.73 3.18 3.08 3.18 4.56 0 1.07.08 1.03.78-.35zm1.96-8.49c-.29-4.98-2.96-9.98-6.69-12.53-.76-.53-.98-.45-.92.32.02.31.04 2.46.05 4.78l.02 4.23 1.55.09c2.81.17 4.90 1.76 5.66 4.33.39 1.28.46 1.01.33-1.22zM16.31 117c-.06-.09-.38-.21-.72-.28-.44-.09-.59-.22-.55-.48.04-.25-.09-.37-.49-.41-.76-.09-.70-.44.08-.44.46 0 .80.19 1.31.73.51.54.74.67.91.50.30-.30.80-.29.70.01-.09.29-1.11.59-1.24.37zM54 155.15l0-.63 5.75.15c7.40.20 10.39.38 9.45.56-.70.14-11.05.55-13.75.55l-1.45 0 0-.63zM10.4 99.80l0-1 1.20 0 1.20 0 0 1 0 1-1.20 0-1.20 0 0-1zM10.65 98.25c-.14-.06-.25-.19-.25-.29 0-.25 2.15-.23 2.30.02.07.12-.16.20-.57.20-.38 0-.82.04-.96.08-.15.05-.38.04-.52-.01zM10.45 97.25c-.54-.22.02-.47 1.05-.47 1.07 0 1.58.25.98.48-.37.14-1.67.13-2.03-.01zM10.51 96.20c-.34-.56.81-23.80 1.17-23.40.12.14.71 12.77.85 18.33l.13 5.25-1.02 0c-.56 0-1.07-.08-1.13-.18zM108.2 87.15c-.01-.30-.11-1.87-.22-3.50-.18-2.71-.80-17.54-.80-19.32l0-.75 1.13 0 1.13 0-.12 4.45c-.28 10.02-1 22.27-1.12 19.12zM112.85 63.60c.55-.45.31-1.15-.36-1.05-.53.07-1.27-.81-1.13-1.34.06-.23.23-.42.38-.42.34 0 .36.24.05.55-.18.18-.15.27.15.36.33.11.69.26 1.56.66.37.17-.08-1.43-.58-2.09-1.06-1.39-2.67-2.25-4.33-2.32l-1.47-.06-.06-.75c-.06-.67-.20-.84-1.30-1.59-6.50-4.40-9.14-13.89-5.82-20.90 1.08-2.27 4.61-6.20 6.60-7.32.48-.27.41-12.31-.07-12.46-3.62-1.11-4.01-3.61-1.01-6.47 1.27-1.20 1.57-1.60 1.52-2l-.06-.51-5.10 0-5.10 0-.06.67c-.11 1.14.09 1.36.69.75 1.07-1.06 3.27-.56 3.27.76 0 .85-.55 1.34-1.64 1.46-1.54.17-2.96-1.26-2.96-2.96l0-.73-11.75-.13c-6.46-.07-12.95-.18-14.41-.25l-2.66-.12.06-.62.06-.63 6.30-.12c3.47-.07 10.07-.14 14.67-.15l8.37-.03.93-.83c4.98-4.43 15.65-2.98 19.40 2.64 3.91 5.85 1.69 13.61-5.47 19.10l-1.50 1.15-.02 3.12c-.01 1.71-.08 8.16-.16 14.32-.16 12.87-.20 12.10.70 12.10.38 0 .68.09.68.20 0 .11-.37.20-.81.20-.67 0-.81.06-.75.35.26 1.25 3.27-.30 3.58-1.85l.13-.60.02.62c.05 1.14-1.22 2.24-2.87 2.47-1.09.15-1.01.45.40 1.36 2.97 1.92 4.08 4.63 2.29 5.56-.78.40-.92.36-.36-.10zm-5.83-10.98c0-1.63-.06-3.78-.13-4.77l-.13-1.81-1.36-.10c-2.50-.18-4.70-1.75-5.50-3.92-.48-1.31-.68-1.45-.68-.48 0 4.97 2.81 10.83 6.48 13.48 1.31.95 1.32.93 1.32-2.40zm-.21-10.04-.02-3-1.13-.84c-2.38-1.76-3.37-3.05-3.62-4.73l-.13-.92-.64 1.30c-2.74 5.61-.55 11.19 4.41 11.20l1.15 0-.02-3.01zm-.01-7c-.02-3.03-.04-3.21-.45-3.51-.41-.29-.41-.30-.03-.24.37.05.40-.07.46-1.52.08-2.20-.03-2.21-2.13-.21-1.90 1.80-2.25 2.32-1.24 1.80.32-.17 1.02-.30 1.55-.28l.96.03-1.00.13c-1.46.19-2.75 1.11-2.10 1.51.11.07.20.31.20.54 0 .31.10.38.40.30.28-.07.52.06.79.45.42.59.36 1.41-.11 1.41-.34 0-.37-.54-.04-.65.12-.04-.15-.26-.60-.49-1.91-.94-.40 1.43 2.16 3.40 1.21.93 1.20.96 1.18-2.67zm5.14-12.38c7.36-6.31 7.85-15.52 1.06-20.02-1.26-.84-1.34-.73-.31.42 3.35 3.72 2.63 8.54-1.58 10.61l-1.28.63.08 2.03c.04 1.11.08 3.30.09 4.87.02 3.33-.12 3.22 1.94 1.46zm-5.12-9.42c0-.59-.09-.83-.35-.91-.71-.21-1.73-.79-1.80-1.03-.11-.34.34-.32.73.03.19.17.54.24.87.18l.55-.11 0-2.09 0-2.09-.80.63c-.45.35-.91.83-1.03 1.07-.13.24-.45.70-.72 1.02-.99 1.19-.39 2.98 1.25 3.73 1.17.54 1.30.49 1.30-.43zm4.65-.18c3.31-2.10 3.59-6.59.59-9.59-3.13-3.13-9.33-3.70-13.09-1.21-1.37.91-1.12.99 2.94.97 4-.03 4.63-.16 3.39-.68-.66-.27-.73-.35-.44-.52.53-.29 1.89.02 2.82.64.46.32 1.08.57 1.36.58.70 0 .78.63.78 6.13 0 4.87-.05 4.76 1.65 3.68zm-3.91-10.13c.08-.23-.76-.68-1.28-.68-.27 0-.24.10.15.51.47.50.99.58 1.13.17zM104.45 44.20c-.36-.22-.71-.54-.77-.71-.09-.22-.29-.27-.79-.17-.40.07-.68.04-.68-.07 0-.33 1.05-.43 1.85-.18.48.14.75.35.75.56 0 .21.22.39.60.47.33.07.60.21.60.32 0 .32-.87.19-1.56-.22zM107.2 62.80c0-.11.53-.20 1.20-.20.67 0 1.20.09 1.20.20 0 .11-.53.20-1.20.20-.67 0-1.20-.09-1.20-.20zM107.45 62.05c-.58-.24-.17-.47.87-.47.80 0 1.09.07 1.03.25-.08.25-1.45.41-1.90.22zM107.30 60.95c-.05-.14-.11-.62-.14-1.06l-.06-.80 1.20 0 1.20 0 0 1 0 1-1.05.06c-.73.04-1.08-.02-1.15-.20zM56.10 5.17c-8.50-.29-7.20-.58 3.95-.88l5.75-.15 0 .63 0 .63-2.35-.03c-1.29-.02-4.60-.11-7.35-.20z");
  127. }
  128.  
  129.  
  130. .theme-toggle[open] ~ .pfp-stage .custom-pfp::before{
  131.   background:#ffd1dc;
  132. }
  133. </style>
  134. <div class="pfp-stage">
  135.   <div class="custom-pfp">
  136.     <img class="img-dark" src="https://i.imgur.com/fpBVGut.jpeg">
  137.     <img class="img-light" src="https://i.imgur.com/mgU87Z0.jpeg">
  138.   </div>
  139. </div>
  140.  
  141.  
  142. <style>
  143.  
  144.  
  145. .status-badge {
  146.   position: relative;
  147.   max-width: 280px;
  148.   margin: 60px auto;
  149.   padding: 20px 16px 16px;
  150.   border: 2px solid #4a0404;
  151.   border-radius: 12px;
  152.   background: #000000;
  153.   transition: transform 0.3s ease, border-color 0.3s ease;
  154. }
  155.  
  156.  
  157. .status-badge:hover {
  158.   transform: translateY(-4px);
  159.   box-shadow: 0 8px 16px rgba(74, 4, 4, 0.8);  
  160. }
  161.  
  162.  
  163. .status-badge::before {
  164.   content: "MESSAGE";
  165.   position: absolute;
  166.   top: -16px;
  167.   left: 20px;
  168.   padding: 2px 10px;
  169.   font-size: 20px;
  170.   font-family: Grenze Gotisch;
  171.   font-weight: bold;
  172.   border-radius: 6px;
  173.   color: #ffffff;          
  174.   background-color: #4a0404;
  175.   letter-spacing: 1px;
  176.   transition: color 0.3s ease, background-color 0.3s ease;
  177. }
  178.  
  179.  
  180. .status-text {
  181.   font-family: jura;
  182.   font-style: italic;
  183.   font-size: 14px;
  184.   line-height: 1.6;
  185.   text-align: center;
  186.   color: #ffffff;
  187.   transition: color 0.3s ease;
  188. }
  189.  
  190.  
  191. .theme-toggle[open] ~ .status-badge {
  192.   border-color: #ff7096;
  193.   background: #fff5f8;
  194. }
  195.  
  196.  
  197. .theme-toggle[open] ~ .status-badge::before {
  198.   background-color: #ffd1dc;
  199.   color: #ff7096;                
  200. }
  201.  
  202.  
  203. .theme-toggle[open] ~ .status-badge .status-text {
  204.   color: #ff7096;              
  205. }
  206.  
  207. .theme-toggle[open] ~ .status-badge:hover {
  208.   box-shadow: 0 9px 16px #ff7096
  209. }
  210. </style>
  211. <div class="status-badge">
  212.   <div class="status-text">
  213.     Fighting with css again.
  214.   </div>
  215. </div>
  216.  
  217. <style>
  218.  
  219.  
  220. .pp-page-background {
  221.   filter: brightness(0.25) contrast(1.3) saturate(1.1) hue-rotate(330deg);
  222.   transition: filter 0.35s ease;
  223. }
  224.  
  225.  
  226. .pp-page-background:has(.theme-toggle[open]),
  227. .pp-page-background:has(~ * .theme-toggle[open]) {
  228.   filter: none;
  229.   transition: filter 0.35s ease;
  230. }
  231. </style>
  232.  
  233. <style>
  234.  
  235. .pp-uc-background, .pp-uc-background > div {
  236.   background: transparent !important;
  237.   max-width: 100%
  238. }
  239.  
  240. .pp-uc-background:hover {
  241.   box-shadow: none;
  242. }
  243. </style>
  244.  
  245. <style>
  246.  
  247. .profile-info-hstack{
  248.     margin-top: 20px;
  249.     flex-direction: column-reverse;
  250.     text-align:center;
  251.   }
  252.  
  253.  
  254. .pp-uc-title {
  255.     font-size: 3rem;
  256.   font-family: Grenze Gotisch;
  257.   color: #4a0404;
  258. }
  259.  
  260.  
  261. .pp-uc-followers-count, .pp-uc-member-since {
  262.   font-size: 1rem;
  263.   font-family: jura;
  264.   color: #4a0404;
  265.   }
  266.  
  267.  
  268. body:has(.theme-toggle[open])
  269. .pp-uc-title,
  270. body:has(.theme-toggle[open])
  271. .pp-uc-followers-count,
  272. body:has(.theme-toggle[open])
  273. .pp-uc-member-since{
  274.   color:#ff7096;
  275. }
  276.  
  277.  
  278. .pp-uc-avatar-container{
  279.   display: none;
  280. }
  281. </style>
  282.  
  283.  
  284. <style>
  285.  
  286. .image-stage {
  287.   display: flex;
  288.   gap: 4vw;
  289.   padding:  15px;
  290.   overflow-x: auto;
  291. }
  292. .image-stage::-webkit-scrollbar {
  293.   height: 8px;
  294. }
  295. .image-stage::-webkit-scrollbar-thumb {
  296.   background: rgba(74, 4, 4, 0.8);
  297.   border-radius: 4px;
  298. }
  299. .image-stage::-webkit-scrollbar-track {
  300.   background: transparent;
  301. }
  302. .img-box {
  303.   position: relative;
  304.   overflow: hidden;
  305.   border-radius: 16px;
  306.   transition: transform 0.8s ease, box-shadow 0.8s ease;
  307.   flex: 0 0 auto;
  308. }
  309. .img-box:nth-child(odd) {
  310.   width: 27vw;
  311.   max-width: 200px;
  312.   aspect-ratio: 2/3;
  313.   transform: scale(0.8);
  314. }
  315. .img-box:nth-child(even) {
  316.   width: 30vw;
  317.   max-width: 240px;
  318.   aspect-ratio: 3/4;
  319.   transform: scale(1.06);
  320. }
  321. .img {
  322.   position: absolute;
  323.   inset: 0;
  324.   width: 100%;
  325.   height: 100%;
  326.   object-fit: cover;
  327.   transition: opacity 0.9s ease;
  328. }
  329.  
  330.  
  331. .img-dark { opacity: 1; }
  332. .img-light { opacity: 0; }
  333. .img-box:nth-child(odd) { box-shadow: 7px 7px 3px #4a0404; }
  334. .img-box:nth-child(even) { box-shadow: 7px 7px 3px #4a0404; }
  335.  
  336.  
  337. .theme-toggle[open] ~ .image-stage .img-dark { opacity: 0; }
  338. .theme-toggle[open] ~ .image-stage .img-light { opacity: 1; }
  339. .theme-toggle[open] ~ .image-stage .img-box:nth-child(odd) {
  340.   box-shadow: 7px 7px 3px #ffd1dc;
  341.   transform: scale(0.8);
  342. }
  343. .theme-toggle[open] ~ .image-stage .img-box:nth-child(even) {
  344.   box-shadow: 7px 7px 3px #ffd1dc;
  345.   transform: scale(1.06);
  346. }
  347.  
  348.  
  349. .theme-toggle[open] ~ .image-stage::-webkit-scrollbar-thumb {
  350.   background: #ffd1dc
  351. }
  352. </style>
  353. <div class="image-stage">
  354.   <div class="img-box">
  355.     <img class="img img-dark" src="https://files.catbox.moe/uk84cn.jpg">
  356.     <img class="img img-light" src="https://files.catbox.moe/5awfvo.jpg">
  357.   </div>
  358.   <div class="img-box">
  359.     <img class="img img-dark" src="https://files.catbox.moe/mrzfgq.jpg">
  360.     <img class="img img-light" src="https://files.catbox.moe/ahp2yk.jpg">
  361.   </div>
  362.   <div class="img-box">
  363.     <img class="img img-dark" src="https://files.catbox.moe/t1p8do.jpg">
  364.     <img class="img img-light" src="https://files.catbox.moe/pvr73s.jpg">
  365.   </div>
  366.   <div class="img-box">
  367.     <img class="img img-dark" src="https://files.catbox.moe/uk84cn.jpg">
  368.     <img class="img img-light" src="https://files.catbox.moe/5awfvo.jpg">
  369.     </div>
  370.   <div class="img-box">
  371.     <img class="img img-dark" src="https://files.catbox.moe/mrzfgq.jpg">
  372.     <img class="img img-light" src="https://files.catbox.moe/ahp2yk.jpg">
  373.   </div>
  374.   <div class="img-box">
  375.     <img class="img img-dark" src="https://files.catbox.moe/t1p8do.jpg">
  376.     <img class="img img-light" src="https://files.catbox.moe/pvr73s.jpg">
  377.   </div>
  378. </div>
  379.  
  380.  
  381. <style>
  382.  
  383. .content{
  384.   display:flex;
  385.   flex-direction:column;
  386.   align-items:center;
  387. }
  388. .story-block{
  389.   position:relative;
  390.   width: fit-content;
  391.   margin: 50px 0;
  392. }
  393. .story-block summary{
  394.   list-style:none;
  395.   cursor:pointer;
  396.   display:flex;
  397.   justify-content:center;
  398.   align-items:center;
  399. }
  400.  
  401.  
  402. .story-strip{
  403.   position:relative;
  404.   width:300px;
  405.   min-height: 140px;
  406.   background:#000000;
  407.   border-radius:14px;
  408.   padding:25px;
  409.   display:flex;
  410.   align-items:center;
  411.   justify-content:center;
  412.   overflow: hidden
  413. }
  414.  
  415.  
  416. .theme-toggle[open] ~ .content .story-strip{
  417.   background:#fff5f8;
  418. }
  419.  
  420.  
  421. .story-circle{
  422.   position:absolute;
  423.   width:160px;
  424.   height:160px;
  425.   border-radius:50%;
  426.   overflow:hidden;
  427.   border:4px solid #4a0404;
  428.   z-index:2;
  429.   transition: transform .6s cubic-bezier(.22,.61,.36,1), border .3s ease;
  430. }
  431.  
  432. .theme-toggle[open] ~ .content .story-circle{
  433.   border-color:#ff7096;
  434. }
  435. .story-circle img{
  436.   position:absolute;
  437.   inset:0;
  438.   width:100%;
  439.   height:100%;
  440.   object-fit:cover;
  441.   transition:opacity .4s ease;
  442. }
  443.  
  444.  
  445. .story-circle img.dark-theme{opacity:1;}
  446. .story-circle img.light-theme{opacity:0;}
  447. .theme-toggle[open] ~ .content .story-circle img.dark-theme{opacity:0;}
  448. .theme-toggle[open] ~ .content .story-circle img.light-theme{opacity:1;}
  449.  
  450.  
  451. .story-text{
  452.   position:relative;
  453.   width:100%;
  454.   z-index:2;
  455.   color:#ffffff;
  456. }
  457.  
  458.  
  459. .theme-toggle[open] ~ .content .story-text{
  460.   color:#ff7096;
  461. }
  462.  
  463.  
  464. .story-title1{
  465.   position:absolute;
  466.   top:50%;
  467.   transform:translateY(-50%);
  468.   font-family: Grenze Gotisch;
  469.   font-size: 30px;
  470.   font-weight:700;
  471.   transition:opacity .4s ease;
  472. }
  473.  
  474.  
  475. .story-title2{
  476.   position:absolute;
  477.   top: -60px;
  478.   font-family: rock salt;
  479.   font-size:15px;
  480.   font-weight:600;
  481.   opacity:0;
  482.   transition:opacity .4s ease;
  483. }
  484.  
  485.  
  486. .story-desc{
  487.   position:absolute;
  488.   top: -20px;
  489.   width:160px;
  490.   font-family: Grenze Gotisch;
  491.   font-size:15px;
  492.   line-height:1.6;
  493.   opacity:0;
  494.   transition:opacity .4s ease;
  495.   height:70px;
  496.   overflow-y:auto;
  497. }
  498.  
  499.  
  500. .story-block:nth-child(odd) .story-desc{
  501.   left:0;
  502.   text-align:left;
  503. }
  504. .story-block:nth-child(even) .story-desc{
  505.   right:0;
  506.   text-align:right;
  507. }
  508. .story-desc::-webkit-scrollbar{display:none;}
  509.  
  510.  
  511. .story-strip::after{
  512.   content:"";
  513.   position:absolute;
  514.   inset:18px;
  515.   background:#4a0404;
  516.   transition:opacity .4s ease;
  517.   transform: translate(230%, 15%) scaleX(6) scaleY(-3.5);
  518.   clip-path:path("M32.28 72.18c-.804-.258-1.542-.822-3.096-2.37-1.332-1.326-2.826-3.042-4.122-4.74-.462-.612-.762-.93-.762-.822 0 .036.03.084.06.102.036.018.06.078.06.126 0 .048.12.336.264.642.48 1.014.636 1.362.636 1.44 0 .036.042.126.09.186.048.066.09.168.09.228 0 .054.036.192.084.3.168.39.294 1.122.258 1.506-.12 1.194-.84 2.112-1.992 2.514-.462.168-1.41.15-1.914-.036-.72-.258-1.038-.498-2.172-1.626-2.76-2.754-4.674-4.848-5.97-6.54-.306-.396-1.776-2.454-2.61-3.648-.726-1.044-3.18-4.638-3.294-4.83-.036-.054-.156-.252-.276-.432-.324-.498-.408-.708-.51-1.194-.336-1.614 1.02-3.216 2.682-3.18.252.006.486-.006.522-.03.054-.03-.228-.75-.918-2.346-.042-.096-.12-.294-.174-.432-.054-.144-.138-.372-.192-.51-.414-1.092-.486-1.308-.714-2.16-.048-.192-.132-.492-.18-.666-.048-.18-.09-.372-.09-.438 0 .06-.036.3-.084.534-.318-1.518-.36-2.736-.132-3.402.264-.774.804-1.38 1.518-1.704.432-.198.498-.21 1.08-.21.696 0 1.008.072 1.668.408.57.288.972.6 1.644 1.278.786.792 1.122 1.212 2.13 2.67.198.282.396.51.444.51.048 0 .228-.132.402-.294.546-.516 1.242-.786 2.04-.786.96 0 1.854.444 2.988 1.5.294.264.564.474.6.462.036-.012.084-.102.108-.198.132-.594.516-1.11 1.188-1.584.528-.372 1.302-.54 1.962-.42 1.488.264 2.952 1.152 4.434 2.7.234.24.432.426.45.414.018-.012.03-.48.036-1.044 0-1.11.054-1.38.396-2.124.552-1.212 1.584-1.872 2.916-1.872 1.278.006 2.34.6 3.972 2.226.582.576 1.44 1.56 1.806 2.064.108.15.228.276.27.276.048 0 .15-.144.228-.312.552-1.164 1.992-1.812 3.186-1.434.516.162.828.342 1.314.762.438.378.498.438 1.746 1.794 1.476 1.596 1.536 1.668 1.74 2.25.216.624.114 1.788-.192 2.166-.042.048-.078.114-.078.144 0 .03-.048.102-.102.162-.96.108-.084.15.306.906.222.438.528 1.008.672 1.272.144.264.306.564.36.66.048.102.126.234.162.3.042.066.318.564.624 1.11 1.002 1.818 1.32 2.394 1.392 2.55.03.066.162.366.3.66.51 1.098.594 1.296.87 2.058.192.534.228.654.276.882.03.132.84.318.12.414.108.288.084 1.326-.042 1.68-.294.846-.96 1.488-1.818 1.752-.498.15-.924.168-1.422.048-1.284-.294-1.98-.822-3.9-2.958-.612-.678-1.212-1.344-1.332-1.476-.12-.132-.36-.414-.534-.63-.528-.642-.87-1.026-.894-.996-.012.012.228.546.54 1.182 1.236 2.52 2.016 4.68 2.022 5.556 0 1.254-.81 2.364-1.998 2.73-.342.102-.51.12-.966.09-.3-.018-.642-.066-.756-.102-.36-.126-.978-.426-1.242-.6-.276-.186-.498-.276-.504-.198 0 .024-.012.252-.024.51-.042.714-.402 1.476-.918 1.914-.366.312-.99.6-1.464.666-.402.06-.498.054-1.38-.114l-.168-.03-.006.438c-.006.936-.21 1.476-.816 2.16-.192.216-.714.522-1.128.666-.408.138-1.32.138-1.77-.012z");
  519. }
  520.  
  521.  
  522. .theme-toggle[open] ~ .content .story-strip::after{
  523.   background:#ffd1dc;
  524. }
  525.  
  526.  
  527. .story-block:nth-child(odd) .story-circle{
  528.   left:calc(50% - 140px - 70px);
  529. }
  530.  
  531.  
  532. .story-block:nth-child(odd) .story-title1{
  533.   left:calc(50% - 140px + 110px);
  534. }
  535.  
  536.  
  537. .story-block:nth-child(odd) .story-title2{
  538.   left:0px;
  539.   text-align:left;
  540. }
  541.  
  542.  
  543. .story-block:nth-child(odd)[open] .story-circle{
  544.   transform:translateX(260px);
  545. }
  546.  
  547.  
  548. .story-block:nth-child(even) .story-circle{
  549.   right:calc(50% - 140px - 70px);
  550. }
  551.  
  552.  
  553. .story-block:nth-child(even) .story-title1{
  554.   right:calc(50% - 140px + 110px);
  555. }
  556.  
  557.  
  558. .story-block:nth-child(even) .story-title2{
  559.   right: 0px;
  560.   text-align:right;
  561. }
  562.  
  563.  
  564. .story-block:nth-child(even)[open] .story-circle{
  565.   transform:translateX(-260px);
  566. }
  567.  
  568.  
  569. .story-block[open] .story-title1{
  570.   opacity:0;
  571. }
  572. .story-block[open] .story-title2,
  573. .story-block[open] .story-desc
  574. {
  575.   opacity:1;
  576. }
  577.  
  578.  
  579. .story-text a{
  580.   color:inherit;
  581.   text-decoration:none;
  582.   position:relative;
  583. }
  584. .story-text a::after{
  585.   content:"";
  586.   position:absolute;
  587.   left:0;
  588.   right:0;
  589.   bottom:-2px;
  590.   border-bottom:1.5px dashed currentColor;
  591.   opacity:.6;
  592. }
  593. </style>
  594. <div class="content">
  595. <details class="story-block">
  596. <summary>
  597. <div class="story-strip">
  598. <div class="story-text">
  599. <div class="story-title1"> Nana </div>
  600. <div class="story-title2">The Black Stones</div>
  601. <div class="story-desc">
  602. Blablablablablanlanalbalnalnala
  603. </div>
  604. </div>
  605. </div>
  606. <div class="story-circle">
  607. <img class="dark-theme" src="https://i.imgur.com/WsFjoi6.jpeg">
  608. <img class="light-theme" src="https://i.imgur.com/aofgn50.jpeg">
  609. </div>
  610. </summary>
  611. </details>
  612. <details class="story-block">
  613. <summary>
  614. <div class="story-strip">
  615. <div class="story-text">
  616. <div class="story-title1"> Hachi </div>
  617. <div class="story-title2">Strawberry Dreams</div>
  618. <div class="story-desc">
  619. blablablablablanlanlablabla
  620. </div>
  621. </div>
  622. </div>
  623. <div class="story-circle">
  624. <img class="dark-theme" src="https://i.imgur.com/H3gMBEe.jpeg">
  625. <img class="light-theme" src="https://i.imgur.com/5F4eJl0.jpeg">
  626. </div>
  627. </summary>
  628. </details>
  629. </div>
  630.  
  631. <style>
  632.  
  633. .pp-mnb-wrapper{
  634.   top: 3px;
  635.   background: transparent;
  636.   height: fit-content;
  637.   backdrop-filter: none;
  638.   z-index: 4;
  639.   width: fit-content;
  640.   box-shadow: none
  641.   }
  642.  
  643. .pp-mnb-container{
  644.   flex-direction: row-reverse;
  645.   justify-content: flex-end;
  646.   gap: 30px;
  647.   margin-left: 12px
  648. }
  649.  
  650.  
  651. .pp-mnb-container svg:hover , .css-7f563p svg:hover{
  652.   transform: scale(1.5);
  653.   transition: transform .5s ease, color 0.5s ease-in;
  654.   color: #ff0000;
  655. }
  656.  
  657.  
  658. .pp-mnb-container svg, .css-7f563p svg{
  659.   color: #4a0404;
  660.   transform: scale(.8)
  661. }
  662.  
  663.  
  664. body:has(.theme-toggle[open])
  665. .pp-mnb-container svg,
  666. body:has(.theme-toggle[open])
  667. .css-7f563p svg{
  668.   color:#ff7096;
  669. }
  670.  
  671.  
  672. .pp-top-bar{
  673.   border-radius: 20px;
  674.   background: #000000;
  675.   border: 1px solid #4a0404;
  676.   margin-top: 3px
  677. }
  678.  
  679.  
  680. body:has(.theme-toggle[open]) .pp-top-bar{
  681.   background:#fff5f8;
  682.   border:1px solid #ff7096;
  683. }
  684.  
  685.  
  686. .css-7f563p{
  687.   margin-right: 70px;
  688. }
  689. .pp-top-header{
  690.   z-index: 4;
  691. }
  692.  
  693. .pp-top-bar-back-button, .pp-top-bar-title{
  694.   display: none;
  695. }
  696.  
  697.  
  698. .css-mzi0gq{
  699.   transform: unset;
  700.   z-index: 3
  701. }
  702.  
  703.  
  704. .profile-top-bar-app-menu-list {
  705.   position: fixed;
  706.   left: 0px;
  707.   background: #000000;
  708.   overflow: visible;
  709.   max-height: unset;
  710.   height: 110vh;
  711.   box-shadow: none;
  712.   transform: translate(0%, -2%) !important;
  713.   display: flex;
  714.   align-items: center;
  715.   justify-content: center;
  716.   }
  717.  
  718. :has(> .profile-top-bar-app-menu-list) {
  719.   transform: unset ! important;
  720. }
  721.  
  722.  
  723. body:has(.theme-toggle[open]) .profile-top-bar-app-menu-list{
  724.   background: #fff5f8;
  725. }
  726.  
  727.  
  728. .pp-top-bar-app-menu-list-item:nth-of-type(1) {
  729.   color: #ffffff;
  730. }
  731.  
  732. .pp-top-bar-app-menu-list-item {
  733.   color: #ffffff;
  734. }
  735.  
  736. .pp-top-bar-app-menu-list-item:nth-of-type(1):hover {
  737.   color: #ff0000;
  738. }
  739.  
  740. .pp-top-bar-app-menu-list-item:hover {
  741.   color: #ff0000;
  742. }
  743.  
  744.  
  745. body:has(.theme-toggle[open]) .pp-top-bar-app-menu-list-item:nth-of-type(1) {
  746.   color: #ff7096;
  747. }
  748.  
  749. body:has(.theme-toggle[open]) .pp-top-bar-app-menu-list-item {
  750.   color: #ff7096;
  751. }
  752.  
  753. body:has(.theme-toggle[open]) .pp-top-bar-app-menu-list-item:nth-of-type(1):hover{
  754.   color: #000000;
  755. }
  756.  
  757. body:has(.theme-toggle[open]) .pp-top-bar-app-menu-list-item:hover {
  758.   color: #000000;
  759.   }
  760. </style>
  761.  
  762.  
  763. <style>
  764.  
  765. .pp-tabs-indicator{
  766.   display: none
  767. }
  768.  
  769. .character-list-pagination-flex, .character-list-pagination-box, .profile-filters-flex-outer {
  770.   display: contents;
  771. }
  772. .profile-filters-flex-inner-hassearchfilter {
  773.   flex: 1;
  774. }
  775.  
  776. .profile-pagination-flex-outer{
  777.   align-self: center;
  778.   order: -1
  779. }
  780.  
  781.  
  782. .pp-tabs-wrapper {
  783.   width: 100%;
  784.   height: 55px;
  785.   background: #000000;
  786.   justify-content: center;
  787.   align-items: center;
  788.   border-bottom: none;
  789.   border-radius: 50px;
  790.   margin-top: 70px;
  791. }
  792.  
  793.  
  794. body:has(.theme-toggle[open]) .pp-tabs-wrapper{
  795.   background: #fff5f8;
  796. }
  797.  
  798. .pp-tabs-button{
  799.   font-size: 0;
  800.   width: 100%
  801. }
  802.  
  803. .pp-tabs-button::before{
  804.   content: "Tokyo Nights";
  805.   font-family: Abril Fatface;
  806.   font-size: 35px;
  807.   color: transparent;
  808.   -webkit-text-stroke: 1px #4a0404;
  809. }
  810.  
  811. body:has(.theme-toggle[open]) .pp-tabs-button::before {
  812.   -webkit-text-stroke: 1.5px #ff7096;
  813. }
  814.  
  815.  
  816. .pp-pg-total {
  817.   background: #000000;
  818.   border: #4a0404 1px solid;
  819.   }
  820.  
  821.  
  822. body:has(.theme-toggle[open]) .pp-pg-total {
  823.   background: #fff5f8;
  824.   border: #ff7096 1px solid;
  825. }
  826.  
  827. .pp-pg-total:before{
  828.   display: none;
  829. }
  830.  
  831. .pp-pg-total-count , .pp-pg-total-text::after {
  832.   color: #ffffff;
  833.   font-family: jura;
  834.   font-size: 15px;
  835.   }
  836.  
  837.  
  838. body:has(.theme-toggle[open]) .pp-pg-total-count , body:has(.theme-toggle[open]) .pp-pg-total-text::after {
  839.   color: #ff7096;
  840. }
  841.  
  842. .pp-pg-total-text{
  843.   font-size: 0;
  844. }
  845.  
  846. .pp-pg-total-text::after{
  847.   content: "Creations";
  848. }
  849.  
  850. .pp-pg-prev-button svg, .pp-pg-next-button svg, .pp-pg-page-button{
  851.   color: #ffffff;
  852. }
  853.  
  854.  
  855. body:has(.theme-toggle[open]) .pp-pg-prev-button svg, body:has(.theme-toggle[open]) .pp-pg-next-button svg, body:has(.theme-toggle[open]) .pp-pg-page-button{
  856.   color: #ff7096;
  857. }
  858.  
  859.  
  860. .pp-pg-page-button{
  861.   background: #000000;
  862. }
  863.  
  864.  
  865. body:has(.theme-toggle[open]) .pp-pg-page-button{
  866.   background: #fff5f8;
  867. }
  868.  
  869.  
  870. .pp-fl-search-input {
  871.   background: #000000;
  872.   font-family:  Crimson Text;
  873.   color: #ffffff;
  874. }
  875.  
  876.  
  877. body:has(.theme-toggle[open]) .pp-fl-search-input {
  878.   background: #fff5f8;
  879.   color: #ff7096;
  880. }
  881.  
  882.  
  883.  
  884. .pp-fl-search-input ~ div svg {
  885.   color: #ffffff ! important;
  886. }
  887.  
  888. body:has(.theme-toggle[open]) .pp-fl-search-input ~ div svg {
  889.   color: #ff7096 !important;
  890. }
  891.  
  892.  
  893. .pp-fl-search-input,
  894. .pp-fl-search-input:is(:hover, :focus) {
  895.   box-shadow: none;
  896.   border: 1px solid #4a0404;
  897. }
  898.  
  899.  
  900. body:has(.theme-toggle[open])
  901. .pp-fl-search-input,
  902. body:has(.theme-toggle[open])
  903. .pp-fl-search-input:is(:hover, :focus) {
  904.   border: 1px solid #ff7096;
  905. }
  906.  
  907.  
  908. .pp-fl-search-input::placeholder {
  909.   color: #4a0404;
  910. }
  911.  
  912.  
  913. body:has(.theme-toggle[open])
  914. .pp-fl-search-input::placeholder {
  915.   color: #ffb6c1;
  916. }
  917.  
  918.  
  919. .pp-fl-filter-button {
  920.     background: #000000;
  921.     border: 1px solid #4a0404;
  922. }
  923.  
  924. body:has(.theme-toggle[open]) .pp-fl-filter-button {
  925.   background: #fff5f8;
  926.   border: 1px solid #ff7096;
  927. }
  928.  
  929.  
  930. .pp-fl-filter-button svg {
  931.     fill: #ffffff;
  932. }
  933.  
  934. body:has(.theme-toggle[open]) .pp-fl-filter-button svg {
  935.   fill: #ff7096;
  936. }
  937.  
  938.  
  939. .css-1dljitb {
  940.   background: #000000 !important;
  941.   backdrop-filter: blur(14px)
  942. }
  943.  
  944. body:has(.theme-toggle[open]) .css-1dljitb {
  945.   background: #fff5f8 !important;
  946. }
  947.  
  948.  
  949. ._tag_1fwqk_6, ._tag_1fwqk_6:hover{
  950.   background: #000000;
  951.   color: #ffffff;
  952.   border: 1px solid #4a0404;
  953.   font-family: grenze gotisch
  954. }
  955.  
  956. body:has(.theme-toggle[open]) ._tag_1fwqk_6 {
  957.   background: #fff5f8;
  958.   color: #ff7096;
  959.   border: 1px solid #ff7096;
  960. }
  961.  
  962. .css-dcyl1x{
  963.   font-size: 3rem
  964. }
  965. .css-178jenf{
  966.   font-size: 2rem
  967. }
  968.  
  969. .css-dcyl1x, .css-178jenf {
  970.   font-family: Alegreya Sans SC;
  971.   color: #ffffff;
  972.   font-weight: 5;
  973.   text-align: center;
  974.   font-weight: bold;
  975. }
  976.  
  977.  
  978. body:has(.theme-toggle[open]) .css-dcyl1x, body:has(.theme-toggle[open]) .css-178jenf , body:has(.theme-toggle[open]) .css-lyo4r5 svg{
  979.   color: #ff7096;
  980. }
  981.  
  982. ._expandButton_1lgbq_153, ._expandButton_1lgbq_153:hover{
  983.   background: #000000;
  984.   border: #ffffff solid 1px;
  985. }
  986.  
  987. body:has(.theme-toggle[open]) ._expandButton_1lgbq_153, body:has(.theme-toggle[open]) ._expandButton_1lgbq_153:hover{
  988.   background: #fff5f8;
  989.   border: #ff7096 solid 1px;
  990. }
  991. </style>
  992.  
  993. <style>
  994.  
  995. *{
  996.   -webkit-tap-highlight-color: transparent;
  997. }
  998. *:focus{
  999.   outline: none;
  1000. }
  1001. *:focus-visible{
  1002.   outline: none;
  1003. }
  1004. </style>
  1005.  
  1006. <style>
  1007.  
  1008.  
  1009. .transparent .react-select__control {
  1010.   background: #000000;
  1011.   border-radius: 2px;
  1012.   height: 40px;
  1013.   width: 125px;
  1014.   border: 1px solid #4a0404;
  1015. }
  1016.  
  1017.  
  1018. body:has(.theme-toggle[open]) .transparent .react-select__control {
  1019.   background: #fff5f8;
  1020.   border: 1px solid #ff7096;
  1021. }
  1022.  
  1023.  
  1024. .transparent .react-select__control:hover{
  1025.   border: 1px solid #4a0404;
  1026. }
  1027.  
  1028.  
  1029. body:has(.theme-toggle[open]) .transparent .react-select__control:hover{
  1030.   border: 1px solid #ff7096;
  1031. }
  1032.  
  1033.  
  1034. .css-1wy0on6 span{
  1035.   background: #4a0404 ! important
  1036. }
  1037.  
  1038. body:has(.theme-toggle[open]) .css-1wy0on6 span{
  1039.   background: #ff7096 !important;
  1040. }
  1041.  
  1042.  
  1043. .transparent .react-select__value-container>div{
  1044.   color: #4a0404;
  1045.   font-family: Crimson Text;
  1046.   font-size: 1rem;
  1047. }
  1048.  
  1049. body:has(.theme-toggle[open]) .transparent .react-select__value-container > div{
  1050.   color: #ff7096;
  1051. }
  1052.  
  1053.  
  1054. .css-8mmkcg{
  1055.   fill: #4a0404
  1056. }
  1057.  
  1058. body:has(.theme-toggle[open]) .css-8mmkcg{
  1059.   fill: #ff7096;
  1060. }
  1061.  
  1062.  
  1063. .transparent .react-select__menu{
  1064.   background: #000;
  1065.   border: 1px solid #4a0404
  1066. }
  1067.  
  1068. body:has(.theme-toggle[open]) .transparent .react-select__menu{
  1069.   background: #fff5f8;
  1070.   border: 1px solid #ff7096;
  1071. }
  1072.  
  1073.  
  1074. .react-select__option:nth-of-type(1), .react-select__option:nth-of-type(2), .react-select__option:nth-of-type(3), .react-select__option:nth-of-type(4) {
  1075.   color: #4a0404;
  1076.   font-weight: bold;
  1077.   border: none;
  1078.   letter-spacing: 0.7px;
  1079.   transition: letter-spacing .3s ease-in
  1080. }
  1081.  
  1082.  
  1083. body:has(.theme-toggle[open])
  1084. .react-select__option:nth-of-type(1),
  1085. body:has(.theme-toggle[open])
  1086. .react-select__option:nth-of-type(2),
  1087. body:has(.theme-toggle[open])
  1088. .react-select__option:nth-of-type(3),
  1089. body:has(.theme-toggle[open])
  1090. .react-select__option:nth-of-type(4){
  1091.   color: #ff7096;
  1092. }
  1093.  
  1094.  
  1095. .transparent .react-select__option--is-selected {
  1096.   background: #000;
  1097.   color: #fff
  1098. }
  1099.  
  1100. body:has(.theme-toggle[open]) .transparent .react-select__option--is-selected{
  1101.   background: #fff5f8;
  1102.   color: #000;
  1103. }
  1104.  
  1105.  
  1106. .transparent .react-select__option:hover{
  1107.   letter-spacing: -.2px;
  1108.   background: #000;
  1109.   color: #fff
  1110. }
  1111.  
  1112.  
  1113.   body:has(.theme-toggle[open]) .transparent .react-select__option:hover{
  1114.   background: #fff;
  1115.   color: #000;
  1116.   }
  1117. </style>
  1118.  
  1119. <style>
  1120.  
  1121. .pp-top-bar-create-char{
  1122.   display: none;
  1123. }
  1124. .pp-top-bar-logo-name, .pp-top-bar-logo-sub-name{
  1125.   color: #4a0404;
  1126.   font-family: grenze gotisch
  1127. }
  1128. body:has(.theme-toggle[open]) .pp-top-bar-logo-name, body:has(.theme-toggle[open])  .pp-top-bar-logo-sub-name{
  1129.   color: #ff7096;
  1130. }
  1131. .pp-top-bar-search {
  1132.   background: #000000;
  1133.   border: 1px solid #4a0404
  1134. }
  1135.  
  1136. body:has(.theme-toggle[open]) .pp-top-bar-search{
  1137.   background: #fff5f8;
  1138.   border-color: #ff7096
  1139. }
  1140.  
  1141.  
  1142. .pp-top-bar-search-icon svg {
  1143.   color: #4a0404;
  1144. }
  1145. body:has(.theme-toggle[open]) .pp-top-bar-search-icon svg {
  1146.   color: #ff7096;
  1147. }
  1148.  
  1149. @media screen and (min-width: 769px) {
  1150. .pp-top-bar-app-menu{
  1151.   left: -150px
  1152. }
  1153. .theme-toggle {
  1154.   top: 17px;
  1155.   right: 20px
  1156. }                                      
  1157. }
  1158. </style>
  1159.  
  1160. <style>
  1161. /*🌸 FOLLOW N OPTIONS BUTTON - NANA STYLE*/
  1162.  
  1163. div:has(>.profile-uc-follow-flex){
  1164.   justify-content: center
  1165. }
  1166. .Btn {
  1167.   background: #000000;                  
  1168.   border: 1px solid #4a0404;        
  1169.   border-radius: 20px;
  1170.   overflow: hidden;
  1171.   transition: all 0.3s ease;
  1172.  
  1173. }
  1174. .Btn::before {
  1175.   content: '';
  1176.   position: absolute;
  1177.   top: 0; left: -100%;
  1178.   width: 200%;
  1179.   height: 100%;
  1180.   background: linear-gradient(
  1181.     to right,
  1182.     transparent,
  1183.     rgba(255, 0, 0, 0.1),
  1184.     transparent
  1185.   );
  1186.   transform: skewX(-25deg);
  1187.   z-index: 1;
  1188.   transition: left 0.4s ease;
  1189.   pointer-events: none;
  1190. }
  1191. .Btn:hover::before {
  1192.   left: 0;
  1193. }
  1194. .Btn:hover {
  1195.   background-color: #4a0404;
  1196.   transform: scale(1.05);
  1197. }
  1198. .Btn > span {
  1199.   font-size: 0;
  1200.   width: auto;
  1201.   font-family:  Crimson Text;
  1202. }
  1203. .Btn span::after {
  1204.   content: "Join Blast?";
  1205.   font-size: 1rem;
  1206.   color: #ffffff;
  1207.   font-weight: bolder;
  1208. }
  1209. .Btn[data-following=true] span::after {
  1210.   content: "You're In!";
  1211.   font-weight: bolder;
  1212.   font-size: 1rem;
  1213.   color: #ffffff;
  1214.   transition: 0.3s all ease;
  1215. }
  1216. .css-15w88gn {
  1217.   background: #000000;
  1218.   border: 1px solid #4a0404;
  1219.   border-radius: 20px;
  1220.   padding: 0.4rem 0.8rem;
  1221.   font-size: 0.9rem;
  1222.   transition: all 0.3s ease;
  1223.   color: #ffffff;
  1224. }
  1225. .css-15w88gn:hover, .css-15w88gn:active, .css-15w88gn[data-active] {
  1226.   background: #4a0404;
  1227.   transform: scale(1.03);
  1228. }
  1229. .css-1hzyiq5 {
  1230.     margin: 0;
  1231. }
  1232. body:has(.theme-toggle[open]) .Btn{
  1233.   background:#fff5f8;
  1234.   border:1px solid #ff7096;
  1235. }
  1236. body:has(.theme-toggle[open]) .Btn::before{
  1237.   background:linear-gradient(
  1238.     to right,
  1239.     transparent,
  1240.     rgba(255, 112, 150, 0.1),
  1241.     transparent
  1242.   );
  1243. }
  1244. body:has(.theme-toggle[open]) .Btn:hover{
  1245.   background-color:#ff7096;
  1246. }
  1247. body:has(.theme-toggle[open]) .Btn span::after,
  1248. body:has(.theme-toggle[open]) .Btn[data-following=true] span::after{
  1249.   color:#ff7096;
  1250. }
  1251. body:has(.theme-toggle[open]) .css-15w88gn{
  1252.   background:#fff5f8;
  1253.   border:1px solid #ff7096;
  1254.   color: #ff7096;
  1255. }
  1256. body:has(.theme-toggle[open])
  1257. .css-15w88gn:hover,
  1258. body:has(.theme-toggle[open])
  1259. .css-15w88gn:active,
  1260. body:has(.theme-toggle[open])
  1261. .css-15w88gn[data-active]{
  1262.   background:#ff7096;
  1263.   color: #fff5f8;
  1264. }
  1265.  
  1266. #menu-list-public-profile-block-menu{
  1267.     background: transparent;
  1268.     box-shadow: none;
  1269.     display: grid;
  1270.     gap: 10px
  1271. }
  1272.  
  1273. .pp-uc-options-menu-item {
  1274.   background: #000000;
  1275.   color: #ffffff;
  1276.   border: 1px solid #4a0404;
  1277.   border-radius: 20px;
  1278.   height: 30px;
  1279.   font-family: share tech
  1280. }
  1281.  
  1282. body:has(.theme-toggle[open]) .pp-uc-options-menu-item {
  1283.   background: #fff5f8;
  1284.   color: #ff7096;
  1285.   border: 1px solid #ff7096;
  1286. }
  1287.  
  1288. .pp-uc-options-menu span {
  1289.   font-family:  Crimson Text;
  1290.   font-weight: bolder;
  1291. }
  1292. body:has(.theme-toggle[open]) .Btn:hover span::after{
  1293.   color:#fff5f8;
  1294. }
  1295.  
  1296. /* HOVER + FOLLOWING (LIGHT) */
  1297. body:has(.theme-toggle[open])
  1298. .Btn[data-following="true"]:hover span::after{
  1299.   color:#fff5f8;
  1300. }
  1301. </style>
  1302.  
  1303. <style>
  1304. /*🌸 BOT CARD - NANA STYLE*/
  1305. div:has(> .css-1s5evre),
  1306. div:has(~ .css-1s5evre) {
  1307. background: transparent !important;
  1308. }
  1309. div:has(> div > .css-1s5evre) {
  1310. display: flex;
  1311. flex-flow: row wrap;
  1312. justify-content: center;
  1313. }
  1314. div:has(> .css-1s5evre) {
  1315. flex: 0 1 400px;
  1316. }
  1317. .pp-cc-wrapper {
  1318. position: relative;
  1319. height: 400px;
  1320. box-shadow: none ! important;
  1321. }
  1322. .pp-cc-wrapper > div:not(:empty)::before { content: "";
  1323. inset: 0;
  1324. z-index: -2;
  1325. background: transparent;
  1326. transition: all 500ms;
  1327. }
  1328. /*Bot image - NANA OSAKI THEME*/
  1329. .css-1q7rmf0 {
  1330. width: 200px;
  1331. height: 400px;
  1332. border-radius: 20px;
  1333. border: 2px solid #4a0404;
  1334. left: 100px;
  1335. filter: none;
  1336. backdrop-filter: none;
  1337. transition: filter 0.5s ease, left 0.4s ease-in-out
  1338. }
  1339. .pp-cc-wrapper:hover .css-1q7rmf0 {
  1340. filter: grayscale(70%);
  1341. left: 190px;
  1342. }
  1343. /*bot name container - NANA OSAKI THEME*/
  1344. .profile-character-card-stack-link-component-box {
  1345. position: absolute;
  1346. width: 70%;
  1347. height: 40px;
  1348. background: #000000;
  1349. z-index: 1;
  1350. border: 2px solid #4a0404;
  1351. border-radius: 15px;
  1352. top: 10px;
  1353. left: 60px
  1354. }
  1355. /*bot name - NANA OSAKI THEME*/
  1356. .pp-cc-name {
  1357. font-family: cinzel;
  1358. color: #ffffff;
  1359. text-align: center;
  1360. font-size: 13px;
  1361. transition: opacity 0.4s ease-in-out
  1362. }
  1363. .pp-cc-wrapper:hover .pp-cc-name{
  1364. opacity: 0
  1365. } /*tricking username container to work as custom tag*/
  1366. .profile-character-card-creator-name-link{
  1367. position: absolute;
  1368. width: 70%;
  1369. height: 40px;
  1370. z-index: 1;
  1371. top: 10px;
  1372. left: 60px;
  1373. justify-content: center;
  1374. background: transparent;
  1375. }
  1376. .profile-character-card-creator-name-link::after{
  1377. content: "Standalone";
  1378. font-family: cinzel;
  1379. color: #ffffff;
  1380. font-size: 13px;
  1381. opacity: 0;
  1382. transition: opacity 0.5s ease-in-out
  1383. }
  1384. .pp-cc-wrapper:hover .profile-character-card-creator-name-link::after{
  1385. opacity: 1
  1386. }
  1387. /🍓SERIES TAGS🍓/
  1388. .pp-cc-wrapper:has(.pp-tag-nocturneavenue) .profile-character-card-creator-name-link::after
  1389. {
  1390. content: "Nocturne Avenue";
  1391. }
  1392. .pp-cc-wrapper:has(.pp-tag-stardust) .profile-character-card-creator-name-link::after {
  1393. content: "Stardust";
  1394. }
  1395. .pp-cc-creator-name{
  1396. font-size: 0
  1397. }
  1398. /*chat ribbon*/
  1399. .css-euh5x6 {
  1400. display: none;
  1401. }
  1402. /*description text color - NANA OSAKI THEME*/
  1403. .css-199gcrh p {
  1404. color: #ffffff;
  1405. text-align: center; }
  1406. /*description container - NANA OSAKI THEME*/
  1407. .pp-cc-description {
  1408. position: absolute;
  1409. background: #000000;
  1410. width: 200px;
  1411. height: 200px;
  1412. top: 100px;
  1413. left: 0px;
  1414. padding: 20px;
  1415. border-radius: 20px;
  1416. font-family: courgette;
  1417. z-index: 2;
  1418. opacity: 0;
  1419. transition: left .3s ease-in-out, opacity 0.3s ease;
  1420. box-shadow:
  1421. inset 0 0 0 5px #000000,
  1422. inset 0 0 0 6px #4a0404,
  1423. inset 0 0 0 7px #000000;
  1424. }
  1425. .pp-cc-wrapper:hover .pp-cc-description{
  1426. left: 20px;
  1427. opacity: 1
  1428. }
  1429. /*tags - NANA OSAKI THEME*/
  1430. .pp-cc-tags * {
  1431. display: inline-block;
  1432. white-space: nowrap;
  1433. }
  1434. .pp-cc-tags{
  1435. position: absolute;
  1436. bottom: 0;
  1437. width: 70%;
  1438. max-width: 100%;
  1439. height: 70px;
  1440. background: #000000;
  1441. right: 60px;
  1442. border-radius: 20px;
  1443. border: 2px solid #4a0404;
  1444. overflow-x: auto ! important;
  1445. display: flex;
  1446. flex-direction: row;
  1447. align-items: center;
  1448. opacity: 0;
  1449. transition: opacity 0.7s ease }
  1450. .pp-cc-tags::-webkit-scrollbar {
  1451. display: none;
  1452. }
  1453. .pp-cc-wrapper:hover .pp-cc-tags{
  1454. opacity: 1
  1455. }
  1456. .pp-cc-tags-item {
  1457. display: inline-block;
  1458. border: 1px solid #4a0404;
  1459. border-radius: 20px;
  1460. color: #ffffff;
  1461. font-family: courgette;
  1462. font-size: 12px;
  1463. }
  1464. .pp-cc-tags-item:hover{
  1465. border: 1px solid #ff0000;
  1466. }
  1467. .pp-cc-tags-regular::first-letter {
  1468. font-size: 0;
  1469. }
  1470. .pp-cc-avatar {
  1471. border-radius: 0;
  1472. }
  1473. .profile-character-card-stats-box, .pp-cc-star-line, .pp-cc-star, .profile-character-card-box{
  1474. display: none;
  1475. }
  1476. .pp-tag-limitless{
  1477. background: transparent;
  1478. }
  1479. /*light theme bot card coloring - HACHI THEME*/
  1480. body:has(.theme-toggle[open]) .css-1q7rmf0{
  1481. border: 2px solid #ff7096;
  1482. }
  1483. body:has(.theme-toggle[open]) .profile-character-card-stack-link-component-box{
  1484. background: #fff5f8;
  1485. border: 2px solid #ff7096;
  1486. }
  1487. body:has(.theme-toggle[open]) .pp-cc-name{
  1488. color: #ff7096;
  1489. }
  1490. body:has(.theme-toggle[open]) .profile-character-card-creator-name-link::after{
  1491. color: #ff7096;
  1492. }
  1493. body:has(.theme-toggle[open]) .css-199gcrh p{ color: #ff7096;
  1494. }
  1495. body:has(.theme-toggle[open]) .pp-cc-description{
  1496. background: #fff5f8;
  1497. box-shadow:
  1498. inset 0 0 0 5px #fff5f8,
  1499. inset 0 0 0 6px #ff7096,
  1500. inset 0 0 0 7px #fff5f8;
  1501. }
  1502. body:has(.theme-toggle[open]) .pp-cc-tags{
  1503. background: #fff5f8;
  1504. border: 2px solid #ff7096;
  1505. }
  1506. body:has(.theme-toggle[open]) .pp-cc-tags-item{
  1507. color: #ff7096;
  1508. border: 1px solid #ff7096;
  1509. }
  1510. body:has(.theme-toggle[open]) .pp-cc-tags-item:hover{
  1511. border: 1px solid #ff85a2;
  1512. }
  1513.   </style>
  1514.  
  1515.  
  1516. <style>
  1517. /*🌸 NOTIFICATION - NANA STYLE - TRANSPARAN EFEKTİ KALDIRILDI*/
  1518. [class*="notificationsPopover_"]{
  1519. background: none;
  1520. border: none;
  1521. box-shadow: none;
  1522. }
  1523. [class*="popoverHeader_"]{
  1524. background: #000000;
  1525. border-radius: 50px;
  1526. border: 1px solid #4a0404;
  1527. }
  1528. body:has(.theme-toggle[open]) [class*="popoverHeader_"]{
  1529. background: #fff5f8;
  1530. border: 1px solid #ff7096;
  1531. }
  1532. [class*="notificationsList_"]{
  1533. background: #000000;
  1534. border: 1px solid #4a0404;
  1535. border-radius: 50px;
  1536. padding: 20px 10px;
  1537. }
  1538. body:has(.theme-toggle[open]) [class*="notificationsList_"] {
  1539. background: #fff5f8;
  1540. border: 1px solid #ff7096;
  1541. }
  1542. [class*="notificationsList_"]::-webkit-scrollbar-track,
  1543. [class*="notificationsList_"]::-webkit-scrollbar-thumb{
  1544. background: transparent;
  1545. }
  1546. [class*="notificationItem_"] {
  1547. background: #000;
  1548. border: 1px solid #4a0404;
  1549. border-radius: 20px;
  1550. margin: 20px 0px;
  1551. height: 100px
  1552. }
  1553. body:has(.theme-toggle[open]) [class*="notificationItem_"] {
  1554. background: #fff5f8;
  1555. border-color: #ff7096;
  1556. }
  1557. [class*="notificationItem_"]:hover {
  1558. background: #f0f0f0;
  1559. }
  1560. body:has(.theme-toggle[open]) [class*="notificationItem_"]:hover {
  1561. background: #ffd1dc;
  1562. }
  1563. [class*="notificationsList_"] *:is([class*="notificationItem_"] img:nth-of-type(1)){
  1564. box-shadow: unset;
  1565. border: 1px solid #4a0404;
  1566. }
  1567. [class*="notificationItem_"] img:nth-of-type(1){
  1568. height: 80px;
  1569. }
  1570. [class*="contentWrapper_"]{
  1571. background: transparent ;
  1572. }
  1573. [class*="_unreadIndicator_"]{
  1574.   background: #4a0404;
  1575.   position: absolute;
  1576.   top: 50px;
  1577.   left: 250px;
  1578.   width: 100px;
  1579.   transform: scale(-1);
  1580.   clip-path: path("M79.254 107.46c-2.16-.864-1.296-8.082 1.26-10.764.522-.54.648-.594 1.278-.486 1.638.252 4.212 1.926 5.616 3.654 1.08 1.332 1.53 2.232 1.638 3.348.09.828.036.972-.396 1.404-.252.27-.702.504-.954.54-.792.108-2.214-.288-3.42-.936-.612-.324-1.152-.558-1.188-.522-.036.036-.27.522-.54 1.062-1.062 2.142-2.25 3.114-3.294 2.7zM66.096 99c-2.088-.432-4.212-1.854-6.786-4.518-2.988-3.096-5.256-6.516-7.65-11.574-.738-1.548-1.386-2.808-1.44-2.808-.054 0-.576.954-1.17 2.124-4.5 8.802-9.63 14.04-12.744 13.014-.342-.126-.846-.414-1.116-.666l-.468-.432-1.188.36c-1.44.45-3.276.468-4.572.054-1.296-.414-2.484-1.602-3.06-3.042-.378-.954-.414-1.332-.414-3.852.018-2.916.162-3.834 1.206-7.29 3.15-10.314 11.466-21.51 19.71-26.514 2.16-1.314 5.976-2.466 5.976-1.8 0 .522-.486.864-1.476 1.044-1.692.324-2.934.828-4.878 1.998-2.268 1.368-3.33 2.232-5.598 4.554-4.194 4.302-8.766 11.538-11.214 17.838-1.548 3.942-2.142 6.57-2.196 9.576-.054 3.15.54 4.536 2.394 5.49.864.45 3.096.54 4.014.162l.54-.216-.234-1.026c-.36-1.512-.306-5.292.108-8.082.63-4.32 2.178-9.792 4.122-14.634 1.062-2.61 3.618-7.848 4.446-9.126 1.53-2.286 4.662-5.13 5.994-5.382.882-.18.666.162-.684 1.08-1.548 1.044-3.726 3.312-4.806 4.968-.45.702-1.404 2.466-2.142 3.924-4.446 8.838-7.29 19.998-6.588 25.884.108.972.288 1.854.378 1.944.612.612 5.202-2.538 8.334-5.724 3.258-3.312 4.896-5.67 6.786-9.81.36-.828 1.206-.666 1.494.27.342 1.062 4.752 5.058 7.722 6.984 4.86 3.15 10.332 4.32 12.528 2.646.396-.288.396-.306.144-1.728-1.386-7.83-5.454-16.794-10.26-22.554-1.35-1.62-3.6-3.798-4.464-4.32-.486-.288-.684-.756-.342-.756.234 0 1.89 1.314 3.042 2.412 5.148 4.878 10.404 15.156 12.222 23.886.288 1.386.558 2.304.666 2.268.108-.036.432-.504.738-1.044 1.296-2.394.594-7.11-1.818-12.168-2.088-4.374-6.516-10.98-9.324-13.896-1.422-1.494-4.248-3.744-6.444-5.184-.972-.63-1.764-1.17-1.764-1.224 0-.198 2.106.684 3.276 1.368 2.826 1.638 4.338 2.736 6.12 4.392 6.894 6.426 11.106 13.986 11.844 21.294.378 3.636-.252 6.246-1.89 7.83l-.63.612-.072 2.682c-.072 2.97-.27 4.14-1.008 5.742-1.062 2.322-3.078 3.438-5.364 2.97zm2.862-.846c1.17-.594 1.944-1.674 2.52-3.438.504-1.512.738-6.822.324-6.642-1.368.558-2.304.702-4.104.612-2.016-.09-3.474-.486-5.418-1.476-2.826-1.44-6.894-4.716-9.504-7.65-.756-.846-1.422-1.548-1.494-1.584-.09-.036-.27.252-.432.63-.288.648-.27.738.108 1.674.216.54.954 2.106 1.62 3.456 3.852 7.776 8.982 13.5 13.122 14.652 1.332.36 2.178.306 3.258-.234zm-30.06-3.96c1.98-.972 5.544-5.076 7.704-8.91.558-1.008.54-1.494-.036-.63-.432.666-3.996 4.212-5.4 5.4-1.566 1.296-3.456 2.592-4.806 3.276l-.972.486.486.432c.684.594 1.746.576 3.024-.054z")
  1581. }
  1582. body:has(.theme-toggle[open]) [class*="_unreadIndicator_"]{
  1583. background: #ff7096;
  1584. }
  1585. [class*="_subject_"],
  1586. [class*="_timestamp_"], [class*="_body_"]{
  1587. color: #4a0404;
  1588. }
  1589. [class*="_body_"]{
  1590. font-family: Crimson text;
  1591. font-size: 0.85rem
  1592. }
  1593. [class*="_subject_"]{
  1594. font-family: grenze gotisch;
  1595. font-size: 1rem
  1596. }
  1597. [class*="_subjectUnread_"] {
  1598. background: unset;
  1599. -webkit-background-clip: unset;
  1600. -webkit-text-fill-color: unset;
  1601. background-clip: unset;
  1602. color: #4a0404;
  1603. }
  1604. body:has(.theme-toggle[open]) [class*="_subject_"], body:has(.theme-toggle[open])
  1605. [class*="_timestamp_"], body:has(.theme-toggle[open]) [class*="_subjectUnread_"],
  1606. body:has(.theme-toggle[open]) [class*="_body_"]{
  1607. color: #ff7096;
  1608. }
  1609. [class*="popoverTitle_"]{
  1610. color: #ffffff;
  1611. font-family: grenze gotisch;
  1612. font-size: 2rem
  1613. }
  1614. body:has(.theme-toggle[open]) [class*="popoverTitle_"]{
  1615. color: #ff7096;
  1616. }
  1617. </style>
  1618.  
  1619. <style>
  1620. /* 🌸 Watermark or credit - NANA STYLE*/
  1621. .credit {
  1622. position: absolute;
  1623. top: -27px;
  1624. right: 10px;
  1625. font-family: 'Courgette', cursive;
  1626. font-size: 14px;
  1627. color: #4a0404;
  1628. padding: 4px 8px;
  1629. border-radius: 4px;
  1630. }
  1631. .credit a {
  1632. color: #4a0404;
  1633. text-decoration: none;
  1634. }
  1635. .credit a:hover {
  1636.   text-decoration: underline;
  1637. text-shadow: 0 0 15px #ff0000;
  1638. }
  1639. </style>
  1640. <div class="credit"> css by
  1641. <a
  1642. href="https://janitorai.com/profiles/eff11c02-441d-4da4-9839-19800ae55be5_profile-of-fiction
  1643. al_fairy">@fictional_fairy</a>
  1644. </div>
  1645.  
  1646.  
  1647. <style>
  1648.  
  1649. .img-link-row{
  1650.   display:flex;
  1651.   justify-content:center;
  1652.   gap:5px;
  1653.   padding: 10px;
  1654. }
  1655.  
  1656.  
  1657. .img-link{
  1658.   position:relative;
  1659.   text-decoration:none;
  1660.   display:flex;
  1661.   flex-direction:column;
  1662.   align-items:center;
  1663. }
  1664.  
  1665.  
  1666. .img-link img{
  1667.   width:140px;
  1668.   height:180px;
  1669.   object-fit:cover;
  1670.   border-radius:14px;
  1671.   transition:transform .4s ease;
  1672. }
  1673.  
  1674.  
  1675. .img-label{
  1676.   margin-top:10px;
  1677.   font-size: 1.2rem;
  1678.   font-weight:600;
  1679.   font-family: grenze gotisch;
  1680.   opacity:0;
  1681.   transform:translateY(-6px);
  1682.   transition:opacity .3s ease, transform .3s ease, color .3s ease;
  1683.   color:#4a0404;
  1684. }
  1685.  
  1686.  
  1687. .img-link:hover img{
  1688.   transform:scale(1.05);
  1689. }
  1690.  
  1691. .img-link:hover .img-label{
  1692.   opacity:1;
  1693.   transform:translateY(0);
  1694. }
  1695.  
  1696.  
  1697. body:has(.theme-toggle[open]) .img-label{
  1698.   color:#ff7096;
  1699. }
  1700. </style>
  1701. <div class="img-link-row">
  1702.   <a class="img-link" href="#">
  1703.     <img src="IMAGE_1_URL">
  1704.     <span class="img-label">First Link</span>
  1705.   </a>
  1706.  
  1707.   <a class="img-link" href="#">
  1708.     <img src="IMAGE_2_URL">
  1709.     <span class="img-label">Second Link</span>
  1710.   </a>
  1711. </div>
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!