API tools faq
paste
Fru26

Untitled

Fru26
Jan 7th, 2026 (edited)
107
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 47.62 KB | None | 0 0
raw download clone embed print report
  1. <style>
  2. /* ๐ŸŒธ LIGHT DARK THEME*/
  3. /*๐ŸŒธ Another version*/
  4. /*main pill container. dark bg*/
  5. .toggle-ui {
  6.   width: 48px;
  7.   height: 27px;
  8.   border-radius: 50px;
  9.   background-color: #1a1a22;
  10.   border: 1px solid #2a2a36;
  11.   position: relative;
  12.   transition: background-color 0.3s ease, border 0.3s ease;
  13. }
  14.  
  15. /*sliding moon*/
  16. .toggle-ui::before {
  17.   content: "โ˜พ";                
  18.   position: absolute;
  19.   top: 3px;
  20.   left: 4px;
  21.   width: 20px;
  22.   height: 20px;
  23.   border-radius: 50%;
  24.   background-color: #111118;
  25.   color: #e7e7ec;
  26.   display: flex;
  27.   align-items: center;
  28.   justify-content: center;
  29.   font-size: 14px;
  30.   line-height: 1;
  31.   transition:  
  32.     left 0.3s ease,  
  33.     transform 0.3s ease,  
  34.     content 0.3s ease,  
  35.     background-color 0.3s ease,  
  36.     color 0.3s ease;
  37. }
  38.  
  39. /*main pill container. Light theme bg*/
  40. .theme-toggle[open] .toggle-ui {
  41.   background-color: #e2e2e6;  
  42.   border: 1px solid #c8c8ce;
  43. }
  44.  
  45. /*sliding sun*/
  46. .theme-toggle[open] .toggle-ui::before {
  47.   content: "๐–ค“";
  48.   left: 24px;
  49.   transform: rotate(0deg);
  50.   background-color: #ffffff;
  51.   color: #111114;
  52. }
  53.  
  54. /*TOGGLE MAIN CONTAINER*/
  55. /*fixed position on screen*/
  56. .theme-toggle {
  57.   position: fixed;
  58.   top: 10px;
  59.   right: 15px;
  60.   z-index: 9999;
  61. }
  62.  
  63. /*remove default arrow + enable click*/
  64. .theme-toggle summary {
  65.   list-style: none;
  66.   cursor: pointer;
  67. }
  68. .theme-toggle summary::-webkit-details-marker {
  69.   display: none;
  70. }
  71. </style>
  72. <details class="theme-toggle">
  73.   <summary>
  74.     <div class="toggle-ui"></div>
  75.   </summary>
  76. </details>
  77.  
  78.  
  79.  
  80. <style>
  81. /*๐ŸŒธ OUR CUSTOM PFP*/
  82. .pfp-stage{
  83.   display:flex;
  84.   justify-content:center;
  85.   align-items:center;
  86.   padding:20px;
  87. }
  88.  
  89. /*main container*/
  90. .custom-pfp{
  91.   position:relative;
  92.   width:285px;
  93.   height:470px;
  94. }
  95.  
  96. /*Image layer*/
  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. /*opacity game in dark theme*/
  109. .custom-pfp .img-dark{opacity:1;}
  110. .custom-pfp .img-light{opacity:0;}
  111.  
  112. /*opacity game in light theme*/
  113. .theme-toggle[open] ~ .pfp-stage .img-dark{opacity:0;}
  114. .theme-toggle[open] ~ .pfp-stage .img-light{opacity:1;}
  115.  
  116. /*Clip pathโ€” Frame layer*/
  117. .custom-pfp::before{
  118.   content:"";
  119.   position:absolute;
  120.   inset:-18px;
  121.   background:#fff;
  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-.1-.58.41-.52 1.18.1 1.18.87 0 1.71 1.4 1.07 1.8-.37.23-.62-.1-.39-.51.15-.28.14-.39-.02-.39-.13 0-.54-.15-.92-.33-.84-.4-.91-.34-.66.59.5 1.81 2.76 3.4 4.89 3.42l1.4.02.06.75c.06.67.19.84 1.3 1.58 6.73 4.53 9.34 14.5 5.65 21.53-1.16 2.21-3.28 4.51-6.15 6.68-.3.23-.34.9-.39 6.32l-.05 6.06 1.27.64c2.77 1.4 2.76 3.68-.02 6.15-1.21 1.08-1.38 1.32-1.33 1.85l.06.6 4.95.09 4.94.09.2-.52c.11-.29.14-.8.08-1.14l-.13-.62-.43.55c-.66.82-2.28.94-3 .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 .15c15.58.17 14.9.13 14.9.93l0 .57-1.95.12c-1.07.07-7.75.18-14.85.25l-12.9.13-.83.76c-2.04 1.87-6.89 3.02-10.37 2.46zm6.42-1.2c1.32-.33 3.29-1.38 3.43-1.82.1-.3-7.47-.34-7.66-.04-.06.1.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.2c-.2-6-.07-5.44-1.12-4.9-3.61 1.84-4.29 6.41-1.43 9.62 2.41 2.7 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.4-1.95-3.6-7.22 6.24-7.96 15.28-1.61 19.74 1.79 1.26 2.06 1.27.9.03zm6.18.27c-.58-.5-1.32-.67-1.32-.31 0 .26 1 .79 1.5.8.35.01.33-.05-.18-.49zm.8-5.53c2.29-2.47 2.36-4.24.2-5.38-1.08-.58-1.52-.43-1.52.5 0 .63.07.71.75.9 1.04.28 1.74.8 1.47 1.07-.15.15-.35.08-.7-.24-.3-.29-.53-.37-.61-.24-.07.12-.31.22-.52.22-.36 0-.39.15-.37 2.1.01 2.35.06 2.4 1.3 1.07zm.4-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-.9 2.21-1.94-.17-.5-.32-.66-.54-.58-.51.2-1.27-.92-1.01-1.48.11-.25.32-.46.47-.46.32 0 .36.32.07.5-.38.24.64 1.1 1.31 1.1.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.7zm3.86-4.74c2.7-5.35.97-10.6-3.73-11.36-.46-.07-1.07-.07-1.35 0l-.53.13.05 2.91.05 2.91 1.55 1.2c2.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.9 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-.7-.44.08-.44.46 0 .8.19 1.31.73.51.54.74.67.91.5.3-.3.8-.29.7.01-.09.29-1.11.59-1.24.37zM54 155.15l0-.63 5.75.15c7.4.2 10.39.38 9.45.56-.7.14-11.05.55-13.75.55l-1.45 0 0-.63zM10.4 99.8l0-1 1.2 0 1.2 0 0 1 0 1-1.2 0-1.2 0 0-1zM10.65 98.25c-.14-.06-.25-.19-.25-.29 0-.25 2.15-.23 2.3.02.07.12-.16.2-.57.2-.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.2c-.34-.56.81-23.8 1.17-23.4.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-.3-.11-1.87-.22-3.5-.18-2.71-.8-17.54-.8-19.32l0-.75 1.13 0 1.13 0-.12 4.45c-.28 10.02-1 22.27-1.12 19.12zM112.85 63.6c.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-.2-.84-1.3-1.59-6.5-4.4-9.14-13.89-5.82-20.9 1.08-2.27 4.61-6.2 6.6-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.2 1.57-1.6 1.52-2l-.06-.51-5.1 0-5.1 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.3-.12c3.47-.07 10.07-.14 14.67-.15l8.37-.03.93-.83c4.98-4.43 15.65-2.98 19.4 2.64 3.91 5.85 1.69 13.61-5.47 19.1l-1.5 1.15-.02 3.12c-.01 1.71-.08 8.16-.16 14.32-.16 12.87-.2 12.1.7 12.1.38 0 .68.09.68.2 0 .11-.37.2-.81.2-.67 0-.81.06-.75.35.26 1.25 3.27-.3 3.58-1.85l.13-.6.02.62c.05 1.14-1.22 2.24-2.87 2.47-1.09.15-1.01.45.4 1.36 2.97 1.92 4.08 4.63 2.29 5.56-.78.4-.92.36-.36-.1zm-5.83-10.98c0-1.63-.06-3.78-.13-4.77l-.13-1.81-1.36-.1c-2.5-.18-4.7-1.75-5.5-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.4zm-.21-10.04-.02-3-1.13-.84c-2.38-1.76-3.37-3.05-3.62-4.73l-.13-.92-.64 1.3c-2.74 5.61-.55 11.19 4.41 11.2l1.15 0-.02-3.01zm-.01-7c-.02-3.03-.04-3.21-.45-3.51-.41-.29-.41-.3-.03-.24.37.05.4-.07.46-1.52.08-2.2-.03-2.21-2.13-.21-1.9 1.8-2.25 2.32-1.24 1.8.32-.17 1.02-.3 1.55-.28l.96.03-1 .13c-1.46.19-2.75 1.11-2.1 1.51.11.07.2.31.2.54 0 .31.1.38.4.3.28-.07.52.06.79.45.42.59.36 1.41-.11 1.41-.34 0-.37-.54-.04-.65.12-.04-.15-.26-.6-.49-1.91-.94-.4 1.43 2.16 3.4 1.21.93 1.2.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.3.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.8-1.03-.11-.34.34-.32.73.03.19.17.54.24.87.18l.55-.11 0-2.09 0-2.09-.8.63c-.45.35-.91.83-1.03 1.07-.13.24-.45.7-.72 1.02-.99 1.19-.39 2.98 1.25 3.73 1.17.54 1.3.49 1.3-.43zm4.65-.18c3.31-2.1 3.59-6.59.59-9.59-3.13-3.13-9.33-3.7-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.7 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.1.15.51.47.5.99.58 1.13.17zM104.45 44.2c-.36-.22-.71-.54-.77-.71-.09-.22-.29-.27-.79-.17-.4.07-.68.04-.68-.07 0-.33 1.05-.43 1.85-.18.48.14.75.35.75.56 0 .21.22.39.6.47.33.07.6.21.6.32 0 .32-.87.19-1.56-.22zM107.2 62.8c0-.11.53-.2 1.2-.2.67 0 1.2.09 1.2.2 0 .11-.53.2-1.2.2-.67 0-1.2-.09-1.2-.2zM107.45 62.05c-.58-.24-.17-.47.87-.47.8 0 1.09.07 1.03.25-.08.25-1.45.41-1.9.22zM107.3 60.95c-.05-.14-.11-.62-.14-1.06l-.06-.8 1.2 0 1.2 0 0 1 0 1-1.05.06c-.73.04-1.08-.02-1.15-.2zM56.1 5.17c-8.5-.29-7.2-.58 3.95-.88l5.75-.15 0 .63 0 .63-2.35-.03c-1.29-.02-4.6-.11-7.35-.2z");
  127. }
  128.  
  129. /*clip path color in light theme*/
  130. .theme-toggle[open] ~ .pfp-stage .custom-pfp::before{
  131.   background:#000;
  132. }
  133. </style>
  134. <div class="pfp-stage">
  135.   <div class="custom-pfp">
  136.     <img class="img-dark" src="https://files.catbox.moe/8t9niv.jpg">
  137.     <img class="img-light" src="https://files.catbox.moe/yukfjz.jpg">
  138.   </div>
  139. </div>
  140.  
  141.  
  142. <style>
  143. /* ๐ŸŒธ STATUS*/
  144. /*Main container*/
  145. .status-badge {
  146.   position: relative;
  147.   max-width: 280px;
  148.   margin: 60px auto;
  149.   padding: 20px 16px 16px;
  150.   border: 2px solid #e7e7ec;  
  151.   border-radius: 12px;
  152.   transition: transform 0.3s ease, border-color 0.3s ease;
  153. }
  154.  
  155. /*Main container on hover*/
  156. .status-badge:hover {
  157.   transform: translateY(-4px);
  158.   box-shadow: 0 8px 16px #00000066;  
  159. }
  160.  
  161. /*STATUS label. slighty up*/
  162. .status-badge::before {
  163.   content: "STATUS";
  164.   position: absolute;
  165.   top: -16px;
  166.   left: 20px;
  167.   padding: 2px 10px;
  168.   font-size: 20px;
  169.   font-family: Grenze Gotisch;
  170.   font-weight: bold;
  171.   border-radius: 6px;
  172.   color: #111114;          
  173.   background-color: #e7e7ec;
  174.   letter-spacing: 1px;
  175.   transition: color 0.3s ease, background-color 0.3s ease;
  176. }
  177.  
  178. /*font for description*/
  179. .status-text {
  180.   font-family: jura;
  181.   font-style: italic;
  182.   font-size: 14px;
  183.   line-height: 1.6;
  184.   text-align: center;
  185.   color: #e7e7ec;            
  186.   transition: color 0.3s ease;
  187. }
  188.  
  189. /*Main container. Light theme border*/
  190. .theme-toggle[open] ~ .status-badge {
  191.   border-color: #111114;
  192. }
  193.  
  194. /*Light theme label*/
  195. .theme-toggle[open] ~ .status-badge::before {
  196.   background-color: #111114;    
  197.   color: #e7e7ec;              
  198. }
  199.  
  200. /*Light theme description*/
  201. .theme-toggle[open] ~ .status-badge .status-text {
  202.   color: #0e0e12;              
  203. }
  204. </style>
  205. <div class="status-badge">
  206.   <div class="status-text">
  207.     yap yap yap yap yap yap yap yap yap yap yap yap yap yap yap yap yap yap
  208.   </div>
  209. </div>
  210.  
  211.  
  212.  
  213.  
  214. <style>
  215. /*๐ŸŒธ INBUILT PG brightening n darkening*/
  216. /*Filter added for dark theme*/
  217. .pp-page-background {
  218.   filter: brightness(0.25) contrast(1.3) saturate(1.1) hue-rotate(200deg);
  219.   transition: filter 0.35s ease;
  220. }
  221.  
  222. /*Filter removed for light theme. THAT MEANSโ€” USE LIGHT BG IMAGE FROM DEFAULT*/
  223. .pp-page-background:has(.theme-toggle[open]),
  224. .pp-page-background:has(~ * .theme-toggle[open]) {
  225.   filter: none;
  226.   transition: filter 0.35s ease;
  227. }
  228. </style>
  229.  
  230.  
  231.  
  232.  
  233.  
  234. <style>
  235. /*๐ŸŒธ USER'S PROFILE BOX*/
  236. /*remove bg. max width to center in mobile's desktop*/
  237. .pp-uc-background, .pp-uc-background > div {
  238.   background: transparent !important;
  239.   max-width: 100%
  240. }
  241.  
  242. /*remove that annoying shadow of box when hover or click*/
  243. .pp-uc-background:hover {
  244.   box-shadow: none;
  245. }
  246. </style>
  247.  
  248.  
  249.  
  250.  
  251. <style>
  252. /*๐ŸŒธ PFP (og one to hide), USERNAME, FOLLOWER COUNT, DATE JOINED*/
  253. /*set all in column reverse*/
  254.   .profile-info-hstack{
  255.     margin-top: 20px;
  256.     flex-direction: column-reverse;
  257.     text-align:center;
  258.   }
  259.  
  260. /*username*/
  261. .pp-uc-title {
  262.     font-size: 3rem;
  263.   font-family: Grenze Gotisch;
  264.   color: #fff
  265. }
  266.  
  267. /*follower count , date joined*/
  268. .pp-uc-followers-count, .pp-uc-member-since {
  269.   font-size: 1rem;
  270.   font-family: jura;
  271.   color: #fff
  272.   }
  273.  
  274. /*Light theme text color*/
  275. body:has(.theme-toggle[open])
  276. .pp-uc-title,
  277. body:has(.theme-toggle[open])
  278. .pp-uc-followers-count,
  279. body:has(.theme-toggle[open])
  280. .pp-uc-member-since{
  281.   color:#000;
  282. }
  283.  
  284. /*Hide inbuilt PFP */
  285. .pp-uc-avatar-container{
  286.   display: none;
  287. }
  288. </style>
  289.  
  290.  
  291.  
  292. <style>
  293. /*๐ŸŒธ HORIZONTAL SCROLL IMAGES AESTHETIC*/
  294. .image-stage {
  295.   display: flex;
  296.   gap: 4vw;
  297.   padding:  15px;
  298.   overflow-x: auto;
  299. }
  300. .image-stage::-webkit-scrollbar {
  301.   height: 8px;
  302. }
  303. .image-stage::-webkit-scrollbar-thumb {
  304.   background: rgba(0,0,0,0.2);
  305.   border-radius: 4px;
  306. }
  307. .image-stage::-webkit-scrollbar-track {
  308.   background: transparent;
  309. }
  310. .img-box {
  311.   position: relative;
  312.   overflow: hidden;
  313.   border-radius: 16px;
  314.   transition: transform 0.8s ease, box-shadow 0.8s ease;
  315.   flex: 0 0 auto;
  316. }
  317. .img-box:nth-child(odd) {
  318.   width: 27vw;
  319.   max-width: 200px;
  320.   aspect-ratio: 2/3;
  321.   transform: scale(0.8);
  322. }
  323. .img-box:nth-child(even) {
  324.   width: 30vw;
  325.   max-width: 240px;
  326.   aspect-ratio: 3/4;
  327.   transform: scale(1.06);
  328. }
  329. .img {
  330.   position: absolute;
  331.   inset: 0;
  332.   width: 100%;
  333.   height: 100%;
  334.   object-fit: cover;
  335.   transition: opacity 0.9s ease;
  336. }
  337.  
  338. /*dark n light images visibility status in dark theme*/
  339. .img-dark { opacity: 1; }
  340. .img-light { opacity: 0; }
  341. .img-box:nth-child(odd) { box-shadow: 7px 7px 3px #e6e6ea; }
  342. .img-box:nth-child(even) { box-shadow: 7px 7px 3px #e6e6ea; }
  343.  
  344. /*dark n light images visibility status in light theme*/
  345. .theme-toggle[open] ~ .image-stage .img-dark { opacity: 0; }
  346. .theme-toggle[open] ~ .image-stage .img-light { opacity: 1; }
  347. .theme-toggle[open] ~ .image-stage .img-box:nth-child(odd) {
  348.   box-shadow: 7px 7px 3px #0a0a0fcc;
  349.   transform: scale(0.8);
  350. }
  351. .theme-toggle[open] ~ .image-stage .img-box:nth-child(even) {
  352.   box-shadow: 7px 7px 3px #0a0a0fcc;
  353.   transform: scale(1.06);
  354. }
  355. </style>
  356. <div class="image-stage">
  357.   <div class="img-box">
  358.     <img class="img img-dark" src="https://files.catbox.moe/uk84cn.jpg">
  359.     <img class="img img-light" src="https://files.catbox.moe/5awfvo.jpg">
  360.   </div>
  361.   <div class="img-box">
  362.     <img class="img img-dark" src="https://files.catbox.moe/mrzfgq.jpg">
  363.     <img class="img img-light" src="https://files.catbox.moe/ahp2yk.jpg">
  364.   </div>
  365.   <div class="img-box">
  366.     <img class="img img-dark" src="https://files.catbox.moe/t1p8do.jpg">
  367.     <img class="img img-light" src="https://files.catbox.moe/pvr73s.jpg">
  368.   </div>
  369.   <div class="img-box">
  370.     <img class="img img-dark" src="https://files.catbox.moe/uk84cn.jpg">
  371.     <img class="img img-light" src="https://files.catbox.moe/5awfvo.jpg">
  372.     </div>
  373.   <div class="img-box">
  374.     <img class="img img-dark" src="https://files.catbox.moe/mrzfgq.jpg">
  375.     <img class="img img-light" src="https://files.catbox.moe/ahp2yk.jpg">
  376.   </div>
  377.   <div class="img-box">
  378.     <img class="img img-dark" src="https://files.catbox.moe/t1p8do.jpg">
  379.     <img class="img img-light" src="https://files.catbox.moe/pvr73s.jpg">
  380.   </div>
  381.  
  382. </div>
  383.  
  384.  
  385.  
  386. <style>
  387. /*๐ŸŒธ NOT DROP-DOWN BUT DESCRIPTION BOX WHERE CIRCLE SLIDES? idk what to call this ๐Ÿ˜…*/
  388. .content{
  389.   display:flex;
  390.   flex-direction:column;
  391.   align-items:center;
  392. }
  393. .story-block{
  394.   position:relative;
  395.   width: fit-content;
  396.   margin: 50px 0;
  397.  
  398. }
  399. .story-block summary{
  400.   list-style:none;
  401.   cursor:pointer;
  402.   display:flex;
  403.   justify-content:center;
  404.   align-items:center;
  405. }
  406.  
  407. /*box attached to circle*/
  408. .story-strip{
  409.   position:relative;
  410.   width:300px;
  411.   min-height: 140px;
  412.   background:#3b3b3b;
  413.   border-radius:14px;
  414.   padding:24px;
  415.   display:flex;
  416.   align-items:center;
  417.   justify-content:center;
  418.   overflow: hidden
  419. }
  420.  
  421. /*light theme for box attached to circle*/
  422. .theme-toggle[open] ~ .content .story-strip{
  423.   background:#ededed;
  424. }
  425.  
  426. /*circle container*/
  427. .story-circle{
  428.   position:absolute;
  429.   width:160px;
  430.   height:160px;
  431.   border-radius:50%;
  432.   overflow:hidden;
  433.   border:4px solid #9a9a9a;
  434.   z-index:2;
  435. transition: transform .6s cubic-bezier(.22,.61,.36,1), border .3s ease;
  436. }
  437. /*light theme circle container's border*/
  438. .theme-toggle[open] ~ .content .story-circle{
  439.   border-color:#fffbf4;
  440. }
  441. .story-circle img{
  442.   position:absolute;
  443.   inset:0;
  444.   width:100%;
  445.   height:100%;
  446.   object-fit:cover;
  447.   transition:opacity .4s ease;
  448. }
  449.  
  450. /*opacity game for light n dark theme*/
  451. .story-circle img.dark-theme{opacity:1;}
  452. .story-circle img.light-theme{opacity:0;}
  453. .theme-toggle[open] ~ .content .story-circle img.dark-theme{opacity:0;}
  454. .theme-toggle[open] ~ .content .story-circle img.light-theme{opacity:1;}
  455.  
  456. /*Text n it's main color*/
  457. .story-text{
  458.   position:relative;
  459.   width:100%;
  460.   z-index:2;
  461.   color:#f1f1f1;
  462. }
  463.  
  464. /*Light theme text's color*/
  465. .theme-toggle[open] ~ .content .story-text{
  466.   color:#1a1a1a;
  467. }
  468.  
  469. /*title 1 that appears before circle glides*/
  470. .story-title1{
  471.   position:absolute;
  472.   top:50%;
  473.   transform:translateY(-50%);
  474.   font-family: Grenze Gotisch;
  475.   font-size: 30px;
  476.   font-weight:700;
  477.   transition:opacity .4s ease;
  478. }
  479.  
  480. /*title 2 that appears after circle glides*/
  481. .story-title2{
  482.   position:absolute;
  483.   top: -60px;
  484.   font-family: rock salt;
  485.   font-size:15.5px;
  486.   font-weight:600;
  487.   opacity:0;
  488.   transition:opacity .4s ease;
  489. }
  490.  
  491. /*description that appears after circle glides*/
  492. .story-desc{
  493.   position:absolute;
  494.   top: -20px;
  495.   width:160px;
  496.   font-family: Grenze Gotisch;
  497.   font-size:15px;
  498.   line-height:1.6;
  499.   opacity:0;
  500.   transition:opacity .4s ease;
  501.   height:70px;
  502.   overflow-y:auto;
  503. }
  504.  
  505. /*descriptions odd and even arrangement*/
  506. .story-block:nth-child(odd) .story-desc{
  507.   left:0;
  508.   text-align:left;
  509. }
  510. .story-block:nth-child(even) .story-desc{
  511.   right:0;
  512.   text-align:right;
  513. }
  514. .story-desc::-webkit-scrollbar{display:none;}
  515.  
  516. /*clip-pathโ€” BRUSH STROKES*/
  517. .story-strip::after{
  518.   content:"";
  519.   position:absolute;
  520.   inset:18px;
  521.   background:#5e5e5e;
  522.   transition:opacity .4s ease;
  523.   transform: translate(230%, 15%) scaleX(6) scaleY(-3.5);
  524.   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-.096.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.084.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");
  525. }
  526.  
  527. /*clip path in light theme*/
  528. .theme-toggle[open] ~ .content .story-strip::after{
  529.   background:#dcd8d3;
  530. }
  531.  
  532. /*circle image's position in odd*/
  533. .story-block:nth-child(odd) .story-circle{
  534.   left:calc(50% - 140px - 70px);
  535. }
  536.  
  537. /*Title 1 position in odd*/
  538. .story-block:nth-child(odd) .story-title1{
  539.   left:calc(50% - 140px + 110px);
  540. }
  541.  
  542. /*Title 2 position in odd*/
  543. .story-block:nth-child(odd) .story-title2{
  544.   left:0px;
  545.   text-align:left;
  546. }
  547.  
  548. /*circle gliding for odd*/
  549. .story-block:nth-child(odd)[open] .story-circle{
  550.   transform:translateX(260px);
  551. }
  552.  
  553. /*circle image's position in even*/
  554. .story-block:nth-child(even) .story-circle{
  555.   right:calc(50% - 140px - 70px);
  556. }
  557.  
  558. /*Title 1 position in even*/
  559. .story-block:nth-child(even) .story-title1{
  560.   right:calc(50% - 140px + 110px);
  561. }
  562.  
  563. /*Title 2 position in even*/
  564. .story-block:nth-child(even) .story-title2{
  565.   right: 0px;
  566.   text-align:right;
  567. }
  568.  
  569. /*circle gliding for even*/
  570. .story-block:nth-child(even)[open] .story-circle{
  571.   transform:translateX(-260px);
  572. }
  573.  
  574. /*opacity game again*/
  575. .story-block[open] .story-title1{
  576.   opacity:0;
  577. }
  578. .story-block[open] .story-title2,
  579. .story-block[open] .story-desc
  580. {
  581.   opacity:1;
  582. }
  583.  
  584. /*for link. it's underlined*/
  585. .story-text a{
  586.   color:inherit;
  587.   text-decoration:none;
  588.   position:relative;
  589. }
  590. .story-text a::after{
  591.   content:"";
  592.   position:absolute;
  593.   left:0;
  594.   right:0;
  595.   bottom:-2px;
  596.   border-bottom:1.5px dashed currentColor;
  597.   opacity:.6;
  598. }
  599. </style>
  600. <div class="content">
  601. <details class="story-block">
  602. <summary>
  603. <div class="story-strip">
  604. <div class="story-text">
  605. <div class="story-title1"> About meow </div>
  606. <div class="story-title2">meow personality</div>
  607. <div class="story-desc">
  608. Call me schemer call me a freak โ€” Iโ€™m just <a href="https://janitorai.com/characters/c2c67cf2-13dc-41b7-8a4f-6ac057edbee1_character-starfire-teen-titans">unique</a>.
  609. </div>
  610. </div>
  611. </div>
  612. <div class="story-circle">
  613. <img class="dark-theme" src="https://files.catbox.moe/9dspff.gif">
  614. <img class="light-theme" src="https://files.catbox.moe/m3bqpy.gif">
  615. </div>
  616. </summary>
  617. </details>
  618. <details class="story-block">
  619. <summary>
  620. <div class="story-strip">
  621. <div class="story-text">
  622. <div class="story-title1">kitty sad</div>
  623. <div class="story-title2">meow meow meow~</div>
  624. <div class="story-desc">
  625. this world shall know meow. almighty
  626. </div>
  627. </div>
  628. </div>
  629. <div class="story-circle">
  630. <img class="dark-theme" src="https://files.catbox.moe/m3bqpy.gif">
  631. <img class="light-theme" src="https://files.catbox.moe/9dspff.gif">
  632. </div>
  633. </summary>
  634. </details>
  635. </div>
  636.  
  637.  
  638. <style>
  639. /*๐ŸŒธ HEADER AND FOOTER IN MOBILE*/
  640. /*Footer position at top*/
  641. .pp-mnb-wrapper{
  642.   top: 3px;
  643.   background: transparent;
  644.   height: fit-content;
  645.   backdrop-filter: none;
  646.   z-index: 4;
  647.   width: fit-content;
  648.   box-shadow: none
  649.   }
  650.  
  651. /*Reversing the icons arrangements of footer*/
  652. .pp-mnb-container{
  653.   flex-direction: row-reverse;
  654.   justify-content: flex-end;
  655.   gap: 30px;
  656.   margin-left: 12px
  657. }
  658.  
  659. /*footer n notification icons on hover*/
  660. .pp-mnb-container svg:hover , .css-7f563p svg:hover{
  661.   transform: scale(1.5);
  662.   transition: transform .5s ease, color 0.5s ease-in;
  663.   color: #fdfcfa
  664. }
  665.  
  666. /*footer n notification icons before hover*/
  667. .pp-mnb-container svg, .css-7f563p svg{
  668.   color: #fff9;
  669.   transform: scale(.8)
  670. }
  671.  
  672. /*Icons color of footer and notification in light theme*/
  673. body:has(.theme-toggle[open])
  674. .pp-mnb-container svg,
  675. body:has(.theme-toggle[open])
  676. .css-7f563p svg{
  677.   color:#000;
  678. }
  679.  
  680. /*Header bg color*/
  681. .pp-top-bar{
  682.   border-radius: 20px;
  683.   background: #0004;
  684.   border: 1px #fff3 solid;
  685.   margin-top: 3px
  686. }
  687.  
  688. /*header bg color in light theme*/
  689. body:has(.theme-toggle[open]) .pp-top-bar{
  690.   background:#fff6;
  691.   border:1px solid #0003;
  692. }
  693.  
  694. /*shifting icon*/
  695. .css-7f563p{
  696.   margin-right: 70px;
  697. }
  698. .pp-top-header{
  699.   z-index: 4;
  700. }
  701.  
  702. .pp-top-bar-back-button, .pp-top-bar-title{
  703.   display: none;
  704. }
  705.  
  706. /*user menu's main container*/
  707. .css-mzi0gq{
  708.   transform: unset;
  709.   z-index: 3
  710. }
  711.  
  712. /*Menu options container*/
  713. .profile-top-bar-app-menu-list {
  714.   position: fixed;
  715.   left: 0px;
  716.   background: linear-gradient(
  717.       90deg,
  718.       #ffffffdd,
  719.       #ffffff99,
  720.       #ffffff00
  721.     );
  722.   overflow: visible;
  723.   max-height: unset;
  724.   height: 110vh;
  725.   box-shadow: none;
  726.   transform: translate(0%, -2%) !important;
  727.   display: flex;
  728.   align-items: center;
  729.   justify-content: center;
  730.   }
  731.  
  732. :has(> .profile-top-bar-app-menu-list) {
  733.   transform: unset ! important;
  734. }
  735.  
  736. /*light theme's menu options container*/
  737. body:has(.theme-toggle[open]) .profile-top-bar-app-menu-list{
  738.   background: linear-gradient(
  739.       90deg,
  740.       #000000dd,
  741.       #000000aa,
  742.       #00000066,
  743.       #00000000
  744.     );
  745. }
  746.  
  747. /*icons coloring*/
  748. .pp-top-bar-app-menu-list-item:nth-of-type(1) {
  749.   color: #000;
  750. }
  751.  
  752. .pp-top-bar-app-menu-list-item {
  753.   color: #000;
  754. }
  755.  
  756. .pp-top-bar-app-menu-list-item:nth-of-type(1):hover {
  757.   color: #0006;
  758. }
  759.  
  760. .pp-top-bar-app-menu-list-item:hover {
  761.   color: #0006;
  762. }
  763.  
  764. /*icons coloring in light theme*/
  765. body:has(.theme-toggle[open]) .pp-top-bar-app-menu-list-item:nth-of-type(1) {
  766.   color: #fff;
  767. }
  768.  
  769. body:has(.theme-toggle[open]) .pp-top-bar-app-menu-list-item {
  770.   color: #fff;
  771. }
  772.  
  773. body:has(.theme-toggle[open]) .pp-top-bar-app-menu-list-item:nth-of-type(1):hover{
  774.   color: #fff6;
  775. }
  776.  
  777. body:has(.theme-toggle[open]) .pp-top-bar-app-menu-list-item:hover {
  778.   color: #fff6;
  779.   }
  780. </style>
  781.  
  782.  
  783. <style>
  784. /*๐ŸŒธ BOT CARD PAGE PORTION*/
  785. .pp-tabs-indicator{
  786.   display: none
  787. }
  788.  
  789. /*JUST ARRANGEMENTโ€” search, tag filter, latest*/
  790. .character-list-pagination-flex, .character-list-pagination-box, .profile-filters-flex-outer {
  791.   display: contents;
  792. }
  793. .profile-filters-flex-inner-hassearchfilter {
  794.   flex: 1;
  795. }
  796.  
  797. /*JUST ARRANGEMENTโ€” Numbers of characters n pg with both sides arrows*/
  798. .profile-pagination-flex-outer{
  799.   align-self: center;
  800.   order: -1
  801. }
  802.  
  803.  
  804. /*"CHARACTERs" TAB*/
  805. /*bg, width, aligned to center*/
  806. .pp-tabs-wrapper {
  807.   width: 100%;
  808.   height: 55px;
  809.   background: linear-gradient(
  810.     180deg, #fff3, #fff2, #fff1, #fff1,#fff2,
  811.   #fff3,
  812.   #fff4);
  813.   justify-content: center;
  814.   align-items: center;
  815.   border-bottom: none;
  816.   border-radius: 50px;
  817.   margin-top: 70px;
  818. }
  819.  
  820. /*bg in light theme*/
  821. body:has(.theme-toggle[open]) .pp-tabs-wrapper{
  822.   background: linear-gradient(
  823.     180deg, #0003, #0002, #0001, #0001,#0002,
  824.   #0003,
  825.   #0004);
  826. }
  827.  
  828. /*Hide "characters" text*/
  829. .pp-tabs-button{
  830.   font-size: 0;
  831.   width: 100%
  832. }
  833.  
  834. /*our text in place*/
  835. .pp-tabs-button::before{
  836.   content: "*yawn* meow";
  837.   font-family: Abril Fatface;
  838.   font-size: 45px;
  839.   color: transparent;
  840.   -webkit-text-stroke: 1px #c0c0c0;
  841. }
  842. /*our text color in light theme*/
  843. body:has(.theme-toggle[open]) .pp-tabs-button::before {
  844.   -webkit-text-stroke: 1.5px #000
  845. }
  846.  
  847. /*NUMBERS OF CHARACTERS*/
  848. /*bg n border*/
  849. .pp-pg-total {
  850.   background: #fff3;
  851.   border: #fff 1px solid;
  852.   }
  853.  
  854. /*bg n border in light theme*/
  855. body:has(.theme-toggle[open]) .pp-pg-total {
  856.   background: #0006;
  857.   border: #000 1px solid;
  858. }
  859.  
  860. .pp-pg-total:before{
  861.   display: none;
  862. }
  863.  
  864. /*text color + font for numbers and alphabets*/
  865. .pp-pg-total-count , .pp-pg-total-text::after {
  866.   color: #fff;
  867.   font-family: jura;
  868.   font-size: 15px;
  869.   }
  870.  
  871. /*light theme text color*/
  872. body:has(.theme-toggle[open]) .pp-pg-total-count , body:has(.theme-toggle[open]) .pp-pg-total-text::after {
  873.   color: #000
  874. }
  875.  
  876. /*hides actual text*/
  877. .pp-pg-total-text{
  878.   font-size: 0;
  879. }
  880.  
  881. /*shows our text*/
  882. .pp-pg-total-text::after{
  883.   content: "meow";
  884. }
  885.  
  886. /* <, pg numbers, > icons color*/
  887. .pp-pg-prev-button svg, .pp-pg-next-button svg, .pp-pg-page-button{
  888.   color: #fff ;
  889. }
  890.  
  891. /* <, pg numbers, > icons color in light theme*/
  892. 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{
  893.   color: #000 ;
  894. }
  895.  
  896. /*Bg color of 0g number*/
  897. .pp-pg-page-button{
  898.   background: #fff4
  899. }
  900.  
  901. /*it's light theme bg*/
  902. body:has(.theme-toggle[open]) .pp-pg-page-button{
  903.   background: #0004
  904. }
  905.  
  906. /*SEARCH*/
  907. /*bg (fixed) N text color (when we interact on search bar section)*/
  908. .pp-fl-search-input {
  909.   background: #fff3;
  910.   font-family:  Crimson Text;
  911.   color: #fff;
  912. }
  913.  
  914. /*it's light theme*/
  915. body:has(.theme-toggle[open]) .pp-fl-search-input {
  916.   background: #0002;
  917.   color: #0008;
  918. }
  919.  
  920.  
  921. /*cross icon's color*/
  922. .pp-fl-search-input ~ div svg {
  923.   color: #fff ! important;
  924. }
  925. /*cross icon's light theme color*/
  926. body:has(.theme-toggle[open]) .pp-fl-search-input ~ div svg {
  927.   color: #000 !important;
  928. }
  929.  
  930. /*remove purple like border around the search box*/
  931. .pp-fl-search-input,
  932. .pp-fl-search-input:is(:hover, :focus) {
  933.   box-shadow: none;
  934.   border: 1px solid #fff;
  935. }
  936.  
  937. /*border color in light theme*/
  938. body:has(.theme-toggle[open])
  939. .pp-fl-search-input,
  940. body:has(.theme-toggle[open])
  941. .pp-fl-search-input:is(:hover, :focus) {
  942.   border: 1px solid #000;
  943. }
  944.  
  945.  /*placeholder text's color*/
  946. .pp-fl-search-input::placeholder {
  947.   color: #fff5;
  948. }
  949.  
  950.  /*placeholder text's color in light theme*/
  951. body:has(.theme-toggle[open])
  952. .pp-fl-search-input::placeholder {
  953.   color: #0006;
  954. }
  955.  
  956. /*TAGS FILTER*/
  957. /*bg n border*/
  958. .pp-fl-filter-button {
  959.     background: #fff3;
  960.     border: 1px solid #fff;
  961. }
  962. /*bg n border in light theme*/
  963. body:has(.theme-toggle[open]) .pp-fl-filter-button {
  964.   background: #0003;
  965.   border: 1px solid #000;
  966. }
  967.  
  968. /*icon color*/
  969. .pp-fl-filter-button svg {
  970.     fill: #fff5;
  971. }
  972. /*icon color in light theme*/
  973. body:has(.theme-toggle[open]) .pp-fl-filter-button svg {
  974.   fill: #0005;
  975. }
  976.  
  977. /*When pop upโ€” bg color of tags filter*/
  978. .css-1dljitb {
  979.   background: #0006 !important;
  980.   backdrop-filter: blur(14px)
  981. }
  982. /*it's light theme*/
  983. body:has(.theme-toggle[open]) .css-1dljitb {
  984.   background: #fff6 !important;
  985. }
  986.  
  987. /*all those tags bg n border*/
  988. ._tag_1fwqk_6, ._tag_1fwqk_6:hover{
  989.   background: #fff3;
  990.   color: #fff;
  991.   border: 1px solid #fff;
  992.   font-family: grenze gotisch
  993. }
  994. /*it's light theme*/
  995. body:has(.theme-toggle[open]) ._tag_1fwqk_6 {
  996.   background: #0003;
  997.   color: #000;
  998.   border: 1px solid #000;
  999. }
  1000.  
  1001. /* "filters" text size*/
  1002. .css-dcyl1x{
  1003.   font-size: 3rem
  1004. }
  1005. /* "tags" text size*/
  1006. .css-178jenf{
  1007.   font-size: 2rem
  1008. }
  1009.  
  1010. /* "filters" + "tags" text color and font*/
  1011. .css-dcyl1x, .css-178jenf {
  1012.   font-family: Alegreya Sans SC;
  1013.   color: #fff;
  1014.   font-weight: 5;
  1015.   text-align: center;
  1016.   font-weight: bold;
  1017. }
  1018.  
  1019. /*Light themeโ€” "filters" + "tags" + close button icon color*/
  1020. body:has(.theme-toggle[open]) .css-dcyl1x, body:has(.theme-toggle[open]) .css-178jenf , body:has(.theme-toggle[open]) .css-lyo4r5 svg{
  1021.   color: #000
  1022. }
  1023.  
  1024. /*expand button*/
  1025. ._expandButton_1lgbq_153, ._expandButton_1lgbq_153:hover{
  1026.   background: #000;
  1027.   border: #fff6 solid 1px
  1028. }
  1029. /*expand button's light theme*/
  1030. body:has(.theme-toggle[open]) ._expandButton_1lgbq_153, body:has(.theme-toggle[open]) ._expandButton_1lgbq_153:hover{
  1031.   background: #fff;
  1032.   border: #0006 solid 1px
  1033. }
  1034. </style>
  1035.  
  1036.  
  1037. <style>
  1038. /* ๐ŸŒธ MY TOUCHโ€” TO HIDE THOSE TRANSPARENT BLUE FLASHING THINGIES WHEN WE HOVER OR TAP*/
  1039. *{
  1040.   -webkit-tap-highlight-color: transparent;
  1041. }
  1042. *:focus{
  1043.   outline: none;
  1044. }
  1045. *:focus-visible{
  1046.   outline: none;
  1047. }
  1048. </style>
  1049.  
  1050.  
  1051. <style>
  1052. /*LATEST*/
  1053. /*bg color*/
  1054. .transparent .react-select__control {
  1055.   background: #fff3;
  1056.   border-radius: 2px;
  1057.   height: 40px;
  1058.   width: 125px;
  1059.   border: 1px solid #fff;
  1060. }
  1061.  
  1062. /*light theme bg color*/
  1063. body:has(.theme-toggle[open]) .transparent .react-select__control {
  1064.   background: #0003;
  1065.   border: 1px solid #000;
  1066. }
  1067.  
  1068. /*slight touching of border on hover*/
  1069. .transparent .react-select__control:hover{
  1070.   border: 1px solid #fff;
  1071. }
  1072.  
  1073. /*Light themeโ€” slight touching of border on hover*/
  1074. body:has(.theme-toggle[open]) .transparent .react-select__control:hover{
  1075.   border: 1px solid #000;
  1076. }
  1077.  
  1078. /*divider line between "latest" + down arrow*/
  1079. .css-1wy0on6 span{
  1080.   background: #fff3 ! important
  1081. }
  1082. /*light theme*/
  1083. body:has(.theme-toggle[open]) .css-1wy0on6 span{
  1084.   background: #0003 !important;
  1085. }
  1086.  
  1087. /*"Lastest" text colorโ€ฆ NOT INSIDE THE POPUP ONE */
  1088. .transparent .react-select__value-container>div{
  1089.   color: #fff5;
  1090.   font-family: Crimson Text;
  1091.   font-size: 1rem;
  1092. }
  1093. /*Light themeโ€” "Lastest" text color*/
  1094. body:has(.theme-toggle[open]) .transparent .react-select__value-container > div{
  1095.   color: #0005;
  1096. }
  1097.  
  1098. /*down arrow icon color*/
  1099. .css-8mmkcg{
  1100.   fill: #fff5
  1101. }
  1102. /*down arrow icon color in light theme*/
  1103. body:has(.theme-toggle[open]) .css-8mmkcg{
  1104.   fill: #0005;
  1105. }
  1106.  
  1107. /*when pop upโ€” Main bg*/
  1108. .transparent .react-select__menu{
  1109.   background: #fff3;
  1110.   border: 1px solid #000
  1111. }
  1112. /*light theme's main bg*/
  1113. body:has(.theme-toggle[open]) .transparent .react-select__menu{
  1114.   background: #0003;
  1115.   border: 1px solid #fff;
  1116. }
  1117.  
  1118. /*base text color for all 4 textโ€” POPULAR, LATEST, TRENDING, TRENDING 24H*/
  1119. .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) {
  1120.   color: #000;
  1121.   border: none;
  1122.   letter-spacing: 0.7px;
  1123.   transition: letter-spacing .3s ease-in
  1124. }
  1125.  
  1126. /*it's light theme's text color*/
  1127. body:has(.theme-toggle[open])
  1128. .react-select__option:nth-of-type(1),
  1129. body:has(.theme-toggle[open])
  1130. .react-select__option:nth-of-type(2),
  1131. body:has(.theme-toggle[open])
  1132. .react-select__option:nth-of-type(3),
  1133. body:has(.theme-toggle[open])
  1134. .react-select__option:nth-of-type(4){
  1135.   color: #fff;
  1136. }
  1137.  
  1138. /*Selected text*/
  1139. .transparent .react-select__option--is-selected {
  1140.   background: #0006;
  1141.   color: #fff
  1142. }
  1143. /*selected text light theme*/
  1144. body:has(.theme-toggle[open]) .transparent .react-select__option--is-selected{
  1145.   background: #fff6;
  1146.   color: #000;
  1147. }
  1148.  
  1149. /*hover text*/
  1150. .transparent .react-select__option:hover{
  1151.   letter-spacing: -.2px;
  1152.   background: #000;
  1153.   color: #fff
  1154. }
  1155.  
  1156. /*hover text's light theme*/
  1157.   body:has(.theme-toggle[open]) .transparent .react-select__option:hover{
  1158.   background: #fff;
  1159.   color: #000;
  1160.   }
  1161. </style>
  1162.  
  1163.  
  1164. <style>
  1165. /*๐ŸŒธ FIXING DESKTOP'S HEADER*/
  1166. .pp-top-bar-create-char{
  1167.   display: none;
  1168. }
  1169. .pp-top-bar-logo-name, .pp-top-bar-logo-sub-name{
  1170.   color: #fff;
  1171.   font-family: grenze gotisch
  1172. }
  1173. body:has(.theme-toggle[open]) .pp-top-bar-logo-name, body:has(.theme-toggle[open])  .pp-top-bar-logo-sub-name{
  1174.   color: #000;}
  1175. .pp-top-bar-search {
  1176.   background: #fff3;
  1177. }
  1178. .pp-top-bar-search-icon svg {
  1179.   color: #fff;
  1180. }
  1181.  
  1182.  
  1183. @media screen and (min-width: 769px) {
  1184. .pp-top-bar-app-menu{
  1185.   left: -150px
  1186. }
  1187. .theme-toggle {
  1188.   top: 17px;
  1189.   right: 20px
  1190. }
  1191.                                      
  1192. }
  1193. </style>
  1194.  
  1195.  
  1196.  
  1197. <style>
  1198. /*๐ŸŒธ FOLLOW N OPTIONS BUTTON*/
  1199. div:has(>.profile-uc-follow-flex){
  1200.   justify-content: center
  1201. }
  1202. .Btn {
  1203.   background: #ffffff33;                  
  1204.   border: 1px solid #ffffffcc;            
  1205.   border-radius: 20px;
  1206.   overflow: hidden;
  1207.   transition: all 0.3s ease;
  1208.  
  1209. }
  1210. .Btn::before {
  1211.   content: '';
  1212.   position: absolute;
  1213.   top: 0; left: -100%;
  1214.   width: 200%;
  1215.   height: 100%;
  1216.   background: linear-gradient(
  1217.     to right,
  1218.     transparent,
  1219.     rgba(202, 199, 204, 0.1),
  1220.     transparent
  1221.   );
  1222.   transform: skewX(-25deg);
  1223.   z-index: 1;
  1224.   transition: left 0.4s ease;
  1225.   pointer-events: none;
  1226. }
  1227. .Btn:hover::before {
  1228.   left: 0;
  1229. }
  1230. .Btn:hover {
  1231.   background-color: #ffffff33;
  1232.   transform: scale(1.05);
  1233. }
  1234. .Btn > span {
  1235.   font-size: 0;
  1236.   width: auto;
  1237.   font-family:  Crimson Text;
  1238. }
  1239. .Btn span::after {
  1240.   content: "U in?";
  1241.   font-size: 1rem;
  1242.   color: #fff;
  1243.   font-weight: bolder;
  1244. }
  1245. .Btn[data-following=true] span::after {
  1246.   content: "Welcome!!";
  1247.   font-weight: bolder;
  1248.   font-size: 1rem;
  1249.   color: #fff;
  1250.   transition: 0.3s all ease;
  1251. }
  1252. .css-15w88gn {
  1253.   background: #ffffff33;
  1254.   border: 1px solid #ffffffcc;
  1255.   border-radius: 20px;
  1256.   padding: 0.4rem 0.8rem;
  1257.   font-size: 0.9rem;
  1258.   transition: all 0.3s ease;
  1259.   color: #fff
  1260. }
  1261. .css-15w88gn:hover, .css-15w88gn:active, .css-15w88gn[data-active] {
  1262.   background: #ffffff33;
  1263.   transform: scale(1.03);
  1264. }
  1265. .css-1hzyiq5 {
  1266.     margin: 0;
  1267. }
  1268. body:has(.theme-toggle[open]) .Btn{
  1269.   background:#00000033;
  1270.   border:1px solid #000000cc;
  1271. }
  1272. body:has(.theme-toggle[open]) .Btn::before{
  1273.   background:linear-gradient(
  1274.     to right,
  1275.     transparent,
  1276.     rgba(30,30,30,0.12),
  1277.     transparent
  1278.   );
  1279. }
  1280. body:has(.theme-toggle[open]) .Btn:hover{
  1281.   background-color:#00000033;
  1282. }
  1283. body:has(.theme-toggle[open]) .Btn span::after,
  1284. body:has(.theme-toggle[open]) .Btn[data-following=true] span::after{
  1285.   color:#000;
  1286. }
  1287. body:has(.theme-toggle[open]) .css-15w88gn{
  1288.   background:#00000033;
  1289.   border:1px solid #000000cc;
  1290.   color: #000
  1291. }
  1292. body:has(.theme-toggle[open])
  1293. .css-15w88gn:hover,
  1294. body:has(.theme-toggle[open])
  1295. .css-15w88gn:active,
  1296. body:has(.theme-toggle[open])
  1297. .css-15w88gn[data-active]{
  1298.   background:#00000033;
  1299. }
  1300.  
  1301. /*Container inside options*/
  1302. #menu-list-public-profile-block-menu{
  1303.     background: transparent;
  1304.     box-shadow: none;
  1305.     display: grid;
  1306.     gap: 10px
  1307. }
  1308.  
  1309. /*For "block this creator"*/
  1310. .pp-uc-options-menu-item {
  1311.   background: #fff3;
  1312.   color: #fff;
  1313.   border: 1px solid #fff;
  1314.   border-radius: 20px;
  1315.   height: 30px;
  1316.   font-family: share tech
  1317. }
  1318.  
  1319. body:has(.theme-toggle[open]) .pp-uc-options-menu-item {
  1320.   background: #0003;
  1321.   color: #000;
  1322.   border: 1px solid #000;
  1323. }
  1324.  
  1325. /*"Options" font*/
  1326. .pp-uc-options-menu span {
  1327.   font-family:  Crimson Text;
  1328.   font-weight: bolder;
  1329. }
  1330. </style>
  1331.  
  1332.  
  1333. <style>
  1334. /*๐ŸŒธ BOT CARD*/
  1335. div:has(> .css-1s5evre),
  1336. div:has(~ .css-1s5evre) {
  1337.   background: transparent !important;
  1338. }
  1339. div:has(> div > .css-1s5evre) {
  1340.     display: flex;
  1341.     flex-flow: row wrap;
  1342.     justify-content: center;
  1343. }
  1344. div:has(> .css-1s5evre) {
  1345.   flex: 0 1 400px;
  1346. }
  1347. .pp-cc-wrapper {
  1348.   position: relative;
  1349.   height: 400px;
  1350.   overflow: hidden;
  1351.   box-shadow: none ! important;
  1352. }
  1353. .pp-cc-wrapper > div:not(:empty)::before {
  1354.   position: absolute;
  1355.   content: "";
  1356.   inset: 0;
  1357.   z-index: -2;
  1358.   background: transparent;
  1359.   transition: all 500ms;
  1360. }
  1361.  
  1362. /*Bot image*/
  1363. .css-1q7rmf0 {
  1364.   width: 200px;  
  1365.   height: 400px;
  1366.   border-radius: 20px;
  1367.   border: 2px solid #fff;
  1368.   left: 100px;
  1369.   filter: none;
  1370.   backdrop-filter: none;
  1371.   transition: filter 0.5s ease, left 0.4s ease-in-out
  1372. }
  1373.  
  1374. .pp-cc-wrapper:hover .css-1q7rmf0 {
  1375.   filter: grayscale(70%);
  1376.   left: 190px;
  1377. }
  1378.  
  1379. /*bot name container*/
  1380. .profile-character-card-stack-link-component-box {
  1381.   position: absolute;
  1382.   width: 70%;
  1383.   height: 40px;
  1384.   background: #000;
  1385.   z-index: 1;
  1386.   border: 2px solid #fff;
  1387.   border-radius: 15px;
  1388.   top: 10px;
  1389.   left: 60px
  1390. }
  1391.  
  1392. /*bot name*/
  1393. .pp-cc-name {
  1394.   font-family: cinzel;
  1395.   color: #fff;
  1396.   text-align: center;
  1397.   font-size: 13px;
  1398.   transition: opacity 0.4s ease-in-out
  1399. }
  1400. .pp-cc-wrapper:hover .pp-cc-name{
  1401.   opacity: 0
  1402. }
  1403.  
  1404. /*tricking username container to work as custom tag*/
  1405. .profile-character-card-creator-name-link{
  1406.   position: absolute;
  1407.   width: 70%;
  1408.   height: 40px;
  1409.   z-index: 1;
  1410.   top: 10px;
  1411.   left: 60px;
  1412.   justify-content: center;
  1413.   background: transparent;
  1414. }
  1415. .profile-character-card-creator-name-link::after{
  1416.   content: "shru";
  1417.   font-family: cinzel;
  1418.   color: #fff;
  1419.   font-size: 13px;
  1420.   opacity: 0;
  1421.   transition: opacity 0.5s ease-in-out
  1422. }
  1423. .pp-cc-wrapper:hover .profile-character-card-creator-name-link::after{
  1424.   opacity: 1
  1425. }
  1426.  
  1427. .pp-cc-wrapper:has(.pp-tag-shru1) .profile-character-card-creator-name-link::after {          
  1428. content: "custom shru 1";          
  1429. }          
  1430. .pp-cc-wrapper:has(.pp-tag-shru2) .profile-character-card-creator-name-link::after {          
  1431. content: "shru 2";          
  1432. }
  1433.  
  1434.  
  1435. .pp-cc-creator-name{
  1436.   font-size: 0
  1437. }
  1438.  
  1439. /*chat ribbon*/
  1440. .css-euh5x6 {
  1441.   display: none;
  1442. }
  1443.  
  1444. /*description text color*/
  1445. .css-199gcrh p {
  1446.   color: #fff;
  1447.   text-align: center;
  1448. }
  1449.  
  1450. /*Description paragraph container*/
  1451.  .pp-cc-description {
  1452.   position: absolute;
  1453.   background: #000;
  1454.   width: 200px;
  1455.   height: 200px;
  1456.   top: 100px;
  1457.   left: 0px;
  1458.   padding: 20px;
  1459.   border-radius: 20px;
  1460.   font-family: courgette;
  1461.   z-index: 2;
  1462.   opacity: 0;
  1463.   transition: left .3s ease-in-out, opacity 0.3s ease;
  1464.   box-shadow:
  1465.     inset 0 0 0 5px #000000,
  1466.     inset 0 0 0 6px #ffffff,
  1467.     inset 0 0 0 7px #000000;
  1468. }
  1469. .pp-cc-wrapper:hover .pp-cc-description{
  1470.   left: 20px;
  1471.   opacity: 1
  1472. }
  1473.  
  1474. /*tags*/
  1475. .pp-cc-tags * {
  1476.   display: inline-block;
  1477.   white-space: nowrap;
  1478. }
  1479.  
  1480. .pp-cc-tags{
  1481.   position: absolute;
  1482.   bottom: 0;
  1483.   width: 70%;
  1484.   max-width: 100%;
  1485.   height: 70px;
  1486.   background: #000;
  1487.   right: 60px;
  1488.   border-radius: 20px;
  1489.   border: 2px solid #fff;
  1490.   overflow-x: auto ! important;
  1491.   display: flex;
  1492.   flex-direction: row;
  1493.   align-items: center;
  1494.   opacity: 0;
  1495.   transition: opacity 0.7s ease
  1496. }
  1497. /*Hides scrollbar*/
  1498. .pp-cc-tags::-webkit-scrollbar {
  1499.   display: none;
  1500. }
  1501. .pp-cc-wrapper:hover .pp-cc-tags{
  1502.   opacity: 1
  1503. }
  1504.  
  1505. .pp-cc-tags-item {
  1506.   display: inline-block;
  1507.   border: 1px solid #fff;
  1508.   border-radius: 20px;
  1509.   color: #fff;
  1510.   font-family: courgette;
  1511.   font-size: 12px;
  1512. }
  1513. .pp-cc-tags-item:hover{
  1514.   border: 1px solid #fff
  1515. }
  1516.  
  1517. .pp-cc-tags-regular::first-letter {
  1518.   font-size: 0;
  1519. }
  1520. .pp-cc-avatar {
  1521.   border-radius: 0;
  1522. }
  1523. .profile-character-card-stats-box, .pp-cc-star-line, .pp-cc-star, .profile-character-card-box{
  1524.   display: none;
  1525. }
  1526. .pp-tag-limitless{
  1527.   background: transparent;
  1528. }
  1529.  
  1530. /*light theme bot card coloring*/
  1531. body:has(.theme-toggle[open]) .css-1q7rmf0{
  1532.   border: 2px solid #000;
  1533. }
  1534. body:has(.theme-toggle[open]) .profile-character-card-stack-link-component-box{
  1535.   background: #fff;
  1536.   border: 2px solid #000;
  1537. }
  1538. body:has(.theme-toggle[open]) .pp-cc-name{
  1539.   color: #000;
  1540. }
  1541. body:has(.theme-toggle[open]) .profile-character-card-creator-name-link::after{
  1542.   color: #000;
  1543. }
  1544. body:has(.theme-toggle[open]) .css-199gcrh p{
  1545.   color: #000;
  1546. }
  1547. body:has(.theme-toggle[open]) .pp-cc-description{
  1548.   background: #fff;
  1549.   box-shadow:
  1550.     inset 0 0 0 5px #ffffff,
  1551.     inset 0 0 0 6px #000000,
  1552.     inset 0 0 0 7px #ffffff;
  1553. }
  1554. body:has(.theme-toggle[open]) .pp-cc-tags{
  1555.   background: #fff;
  1556.   border: 2px solid #000;
  1557. }
  1558. body:has(.theme-toggle[open]) .pp-cc-tags-item{
  1559.   color: #000;
  1560.   border: 1px solid #000;
  1561. }
  1562. body:has(.theme-toggle[open]) .pp-cc-tags-item:hover{
  1563.   border: 1px solid #000;
  1564. }
  1565. </style>
  1566.  
  1567.  
  1568. <style>
  1569. /*๐ŸŒธ NOTIFICATION*/
  1570. /*TY CUTIES TO FIND THAT UNREAD'S CLASS SELECTOR ๐Ÿ˜ญ*/
  1571. /*Main container*/
  1572.   [class*="notificationsPopover_"]{
  1573.     background: none;
  1574.     border: none;
  1575.     box-shadow: none;
  1576.   }
  1577.  
  1578. /*"notifications" section*/
  1579.   [class*="popoverHeader_"]{
  1580. background: #0005;
  1581. border-radius: 50px;
  1582. border: 1px solid #fff5
  1583. }
  1584. body:has(.theme-toggle[open]) [class*="popoverHeader_"]{
  1585. background: #fff5;
  1586. border: 1px solid #0005
  1587. }
  1588.  
  1589.  
  1590. /*notification list*/
  1591. [class*="notificationsList_"]{
  1592. background: #0005;
  1593. border: 1px solid #fff5;
  1594. border-radius: 50px;
  1595. padding: 20px 10px;
  1596. }
  1597. body:has(.theme-toggle[open]) [class*="notificationsList_"] {
  1598. background: #fff5;
  1599. border: 1px solid #0005
  1600. }
  1601.  
  1602. [class*="notificationsList_"]::-webkit-scrollbar-track, [class*="notificationsList_"]::-webkit-scrollbar-thumb{
  1603.   background: transparent;
  1604. }
  1605.  
  1606.  
  1607. /*individual notifications box bg  coloring*/
  1608. [class*="notificationItem_"] {
  1609.   background: #fff;
  1610.   border-radius: 20px;
  1611.   margin: 20px 0px;
  1612.   height: 100px
  1613. }
  1614.  
  1615. body:has(.theme-toggle[open]) [class*="notificationItem_"] {
  1616.   background: #000;
  1617. }
  1618.  
  1619.  
  1620.  
  1621. [class*="notificationItem_"]:hover {
  1622.   background: #fff5;
  1623. }
  1624. body:has(.theme-toggle[open]) [class*="notificationItem_"]:hover {
  1625.   background: #0005;
  1626. }
  1627.  
  1628.  
  1629. [class*="notificationsList_"] *:is([class*="notificationItem_"] img:nth-of-type(1)){
  1630.   box-shadow: unset;
  1631.   border: 1px solid #000
  1632. }
  1633.  
  1634. [class*="notificationItem_"] img:nth-of-type(1){
  1635.   height: 80px;
  1636. }
  1637.  
  1638.  
  1639. [class*="contentWrapper_"]{
  1640.   background: transparent ;
  1641. }
  1642.  
  1643.  
  1644. /*heart clip path*/
  1645. [class*="_unreadIndicator_"]{
  1646.   background: #000;
  1647.   position: absolute;
  1648.   top: 50px;
  1649.   left: 250px;
  1650.   width: 100px;
  1651.   transform: scale(-1);
  1652.   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")
  1653. }
  1654.  
  1655. body:has(.theme-toggle[open]) [class*="_unreadIndicator_"]{
  1656.   background: #fff
  1657. }
  1658.  
  1659. /*heading n time or date text n comment*/
  1660. [class*="_subject_"],
  1661. [class*="_timestamp_"], [class*="_body_"]{
  1662.   color: #000
  1663. }
  1664.  
  1665.  
  1666. /*Comment text size n font*/
  1667. [class*="_body_"]{
  1668.   font-family: Crimson text;
  1669.   font-size: 0.85rem
  1670. }
  1671.  
  1672. /*heading text size n font*/
  1673. [class*="_subject_"]{
  1674.   font-family: grenze gotisch;
  1675.   font-size: 1rem
  1676. }
  1677.  
  1678. /*unread text*/
  1679. [class*="_subjectUnread_"] {
  1680. background: unset;
  1681. -webkit-background-clip: unset;
  1682. -webkit-text-fill-color: unset;
  1683. background-clip: unset;
  1684. color: #000;
  1685. }
  1686.  
  1687.  
  1688. body:has(.theme-toggle[open]) [class*="_subject_"], body:has(.theme-toggle[open]) [class*="_timestamp_"], body:has(.theme-toggle[open]) [class*="_subjectUnread_"], body:has(.theme-toggle[open]) [class*="_body_"]{
  1689.   color: #fff
  1690. }
  1691.  
  1692. [class*="popoverTitle_"]{
  1693.   color: #fff;
  1694.   font-family: grenze gotisch;
  1695.   font-size: 2rem
  1696. }
  1697.  
  1698. body:has(.theme-toggle[open]) [class*="popoverTitle_"]{
  1699.   color: #000
  1700. }
  1701. </style>
  1702.  
  1703.  
  1704. <style>
  1705. /* ๐ŸŒธ Watermark or credit*/
  1706. .credit {
  1707.     position: absolute;
  1708.     top: -27px;
  1709.     right: 10px;
  1710.     font-family: 'Courgette', cursive;
  1711.     font-size: 14px;
  1712.     color: #fff6;
  1713.     padding: 4px 8px;
  1714.     border-radius: 4px;
  1715. }
  1716. .credit a {
  1717.     color: #fff6;
  1718.     text-decoration: none;
  1719. }
  1720. .credit a:hover {
  1721.   text-decoration: underline;
  1722.   text-shadow: 0 0 15px #fff;
  1723. }
  1724. </style>
  1725.  
  1726. <div class="credit">
  1727.     <a href="https://janitorai.com/profiles/eff11c02-441d-4da4-9839-19800ae55be5_profile-of-fictional-fairy">css by @fictional_fairy</a>
  1728. </div>
  1729.  
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!