API tools faq
paste
MrKakeVT

css-chat

MrKakeVT
Nov 4th, 2023
670
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 18.79 KB | None | 0 0
raw download clone embed print report
  1. /* --- [Globals] --- */
  2.  
  3. * {
  4.   font-family: '{customFont}', '{googleFont}', Nunito, Arial, sans-serif;
  5.   font-size: {fontSize}px;
  6.   font-weight: {fontWeight};
  7.   overflow-wrap: break-word;
  8.   margin: 0;
  9.   padding: 0;
  10. }
  11.  
  12. /* --- [Widget Container] --- */
  13.  
  14. main {
  15.   --customBorderColor: {borderColor};
  16.   --customNameColor: {nameColor};
  17.   --customBackgroundColor: {backgroundColor};
  18.   --customTextColor: {textColor};
  19.   color: #444;
  20.   box-sizing: border-box;
  21.   position: absolute;
  22.   height: 100%;
  23.   width: 100%;
  24.   left: 0;
  25. }
  26.  
  27. /* darker than the actual color in animal crossing */
  28. /* just so that it's easier to read since it's smaller */
  29. main.theme-animal-crossing {
  30.   color: #564A39;
  31. }
  32.  
  33. main.theme-98\.css {
  34.   color: black;
  35. }
  36.  
  37. main.theme-xp\.css {
  38.   color: #222;
  39. }
  40.  
  41. main.preview-true.editor::before {
  42.   --borderSize: 10px;
  43.   content: '';
  44.   position: absolute;
  45.   height: calc(100% - {padding}px * 2);
  46.   width: calc(100% - {padding}px * 2);
  47.   bottom: calc({padding}px - var(--borderSize));
  48.   left: calc({padding}px - var(--borderSize));
  49.   border: var(--borderSize) dashed white;
  50.   box-shadow: 0 0 5px #000;
  51.   background-color: #0008;
  52.   z-index: -20;
  53. }
  54.  
  55. main.preview-true.editor::after {
  56.   --borderSize: 10px;
  57.   --space: 10px;
  58.   content: '⚠️ Preview Mode is On! ⚠️ (Only shows up in the editor)\a ➡️ Set [Preview > Preview Mode] to Off to hide this. ⬅️\a\a Whenever you change the settings, a few test message bubbles will automatically appear!';
  59.   white-space: pre-wrap;
  60.   color: white;
  61.   font-size: 24px;
  62.   position: absolute;
  63.   top: {padding}px;
  64.   left: {padding}px;
  65.   right: {padding}px;
  66.   text-align: left;
  67.   padding: 30px;
  68.   text-shadow: 0 0 5px black, 0 0 3px black, 0 0 1px black;
  69.   font-weight: bold;
  70.   font-family: Roboto, Arial, sans-serif;
  71.   background-color: #000B;
  72.   z-index: -10;
  73. }
  74.  
  75. main.preview-true.editor::before, main.preview-true.editor::after {
  76.   animation: fade .4s reverse forwards;
  77. }
  78.  
  79. main.dark-mode { color: white; }
  80. main.dark-mode.theme-animal-crossing { color: #DEFEFE; }
  81. main.dark-mode..theme-98\.css { color: black; }
  82.  
  83. main.custom-message-colors { color: var(--customTextColor) }
  84.  
  85. main.list-mode {
  86.   display: flex;
  87.   align-items: {listAlignment};
  88.   align-content: start;
  89.   overflow: hidden;
  90.   padding: {padding}px;
  91. }
  92.  
  93. main.direction-bottom {
  94.   flex-direction: column-reverse;
  95.   bottom: 0;
  96. }
  97.  
  98. main.direction-top {
  99.   flex-direction: column;
  100. }
  101.  
  102. main.direction-left {
  103.   flex-direction: row;
  104. }
  105.  
  106. main.direction-right {
  107.   flex-direction: row-reverse;
  108. }
  109.  
  110. main.direction-top main.random-mode {
  111.   top: 0;
  112. }
  113.  
  114. .spacer {
  115.   flex: 1;
  116. }
  117.  
  118. /* --- [Bubble Container] --- */
  119.  
  120. .bubble {
  121.   --defaultBackgroundColor: #FFFC;
  122.   --backgroundColor: var(--defaultBackgroundColor);
  123.   --cornerSize: 23px;
  124.   --userColor: #FF4A80;
  125.   --borderColor: var(--userColor);
  126.   --borderSize: 5px;
  127.   --marginSize: 15px;
  128.   position: absolute;
  129.   visibility: hidden;
  130. }
  131.  
  132. .theme-98\.css .bubble {
  133.   --backgroundColor: silver;
  134.   background-color: var(--backgroundColor);
  135. }
  136.  
  137. .theme-xp\.css .bubble {
  138.   --backgroundColor: #ece9d8;
  139.   background-color: var(--backgroundColor);
  140.   box-shadow:
  141.     inset -1px -1px var(--darkerColor),
  142.     inset 1px 1px var(--darkerColor),
  143.     inset -2px -2px var(--darkerColor),
  144.     inset 2px 2px var(--darkerColor),
  145.     inset -3px -3px var(--darkerColor),
  146.     inset 3px 3px var(--darkerColor)
  147.   ;
  148. }
  149.  
  150. .list-mode.direction-top .bubble {
  151.   margin-bottom: var(--marginSize);
  152. }
  153.  
  154. .list-mode.direction-bottom .bubble {
  155.   margin-top: var(--marginSize);
  156. }
  157.  
  158. .list-mode.direction-left .bubble {
  159.   margin-right: var(--marginSize);
  160. }
  161.  
  162. .list-mode.direction-right .bubble {
  163.   margin-left: var(--marginSize);
  164. }
  165.  
  166. .theme-default.corner-diagonal .bubble {
  167.   --topRightCorner: calc(var(--cornerSize) - var(--borderSize));
  168.   --bottomLeftCorner: calc(var(--cornerSize) / 2);
  169.   --bottomRightCorner: calc(var(--cornerSize) / 2);
  170.  
  171.   -webkit-mask:
  172.     linear-gradient( 135deg, transparent 0 var(--topLeftCorner, 0),     white 0) top left,
  173.     linear-gradient(-135deg, transparent 0 var(--topRightCorner, 0),    white 0) top right,
  174.     linear-gradient(  45deg, transparent 0 var(--bottomLeftCorner, 0),  white 0) bottom left,
  175.     linear-gradient( -45deg, transparent 0 var(--bottomRightCorner, 0), white 0) bottom right
  176.   ;
  177.   -webkit-mask-size: 51% 51%;
  178.   -webkit-mask-repeat: no-repeat;
  179.   padding: var(--borderSize);
  180. }
  181.  
  182. .theme-default.corner-round .bubble, .theme-default.corner-square .bubble {
  183.   border: var(--borderSize) solid var(--borderColor);
  184. }
  185.  
  186. .theme-default.corner-round .bubble {
  187.   border-radius: 10px;
  188. }
  189.  
  190. .custom-border-colors .bubble {
  191.   --borderColor: var(--customBorderColor);
  192. }
  193.  
  194. .custom-message-colors .bubble {
  195.   --backgroundColor: var(--customBackgroundColor);
  196. }
  197.  
  198. .bubble.animate {
  199.   visibility: visible;
  200. }
  201.  
  202. .theme-98\.css .highlight.bubble, .theme-xp\.css .highlight.bubble {
  203.   animation: gradientShift 5s infinite linear;
  204. }
  205.  
  206. .bubble.dynamic {
  207.   animation: pop .5s calc({lifetime}s - .5s) forwards;
  208. }
  209.  
  210. .lifetime-0 .bubble.dynamic {
  211.   animation: fade reverse 0s 1s;
  212. }
  213.  
  214. .theme-98\.css .highlight.bubble.dynamic, .theme-xp\.css .highlight.bubble.dynamic {
  215.   animation:
  216.     pop .5s calc({lifetime}s - .5s) forwards,
  217.     gradientShift 5s infinite linear
  218.   ;
  219. }
  220.  
  221. .lifetime-0.theme-98\.css .highlight.bubble.dynamic, .lifetime-0.theme-xp\.css .highlight.bubble.dynamic {
  222.   animation:
  223.     fade reverse 0s 1s,
  224.     gradientShift 5s infinite linear
  225.   ;
  226. }
  227.  
  228. .bubble.fade {
  229.   animation:
  230.     fade reverse .5s,
  231.     fade .5s calc({lifetime}s - .5s) forwards
  232.   ;
  233. }
  234.  
  235. .lifetime-0 .bubble.fade {
  236.   animation:
  237.     fade reverse .5s,
  238.     fade reverse 0s 1s
  239.   ;
  240. }
  241.  
  242. .theme-98\.css .highlight.bubble.fade, .theme-xp\.css .highlight.bubble.fade {
  243.   animation:
  244.     fade reverse .5s,
  245.     fade .5s calc({lifetime}s - .5s) forwards,
  246.     gradientShift 5s infinite linear
  247.   ;
  248. }
  249.  
  250. .lifetime-0.theme-98\.css .highlight.bubble.fade, .lifetime-0.theme-xp\.css .highlight.bubble.fade {
  251.   animation:
  252.     fade reverse .5s,
  253.     fade reverse 0s 1s,
  254.     gradientShift 5s infinite linear
  255.   ;
  256. }
  257.  
  258. .bubble.fade-up {
  259.   animation:
  260.     fade reverse .5s,
  261.     fade .5s calc({lifetime}s - .5s) forwards,
  262.     up .5s,
  263.     up reverse .5s calc({lifetime}s - .5s) forwards
  264.   ;
  265. }
  266.  
  267. .lifetime-0 .bubble.fade-up {
  268.   animation:
  269.     fade reverse .5s,
  270.     up .5s,
  271.     fade reverse 0s 1s
  272.   ;
  273. }
  274.  
  275. .theme-98\.css .highlight.bubble.fade-up, .theme-xp\.css .highlight.bubble.fade-up {
  276.   animation:
  277.     fade reverse .5s,
  278.     fade .5s calc({lifetime}s - .5s) forwards,
  279.     up .5s,
  280.     up reverse .5s calc({lifetime}s - .5s) forwards,
  281.     gradientShift 5s infinite linear
  282.   ;
  283. }
  284.  
  285. .lifetime-0.theme-98\.css .highlight.bubble.fade-up, .lifetime-0.theme-xp\.css .highlight.bubble.fade-up {
  286.   animation:
  287.     fade reverse .5s,
  288.     up .5s,
  289.     fade reverse 0s 1s,
  290.     gradientShift 5s infinite linear
  291.   ;
  292. }
  293.  
  294. .bubble.fade-down {
  295.   animation:
  296.     fade reverse .5s,
  297.     fade .5s calc({lifetime}s - .5s) forwards,
  298.     down .5s,
  299.     down reverse .5s calc({lifetime}s - .5s) forwards
  300.   ;
  301. }
  302.  
  303. .lifetime-0 .bubble.fade-down {
  304.   animation:
  305.     fade reverse .5s,
  306.     down .5s,
  307.     fade reverse 0s 1s
  308.   ;
  309. }
  310.  
  311. .theme-98\.css .highlight.bubble.fade-down, .theme-xp\.css .highlight.bubble.fade-down {
  312.   animation:
  313.     fade reverse .5s,
  314.     fade .5s calc({lifetime}s - .5s) forwards,
  315.     down .5s,
  316.     down reverse .5s calc({lifetime}s - .5s) forwards,
  317.     gradientShift 5s infinite linear
  318.   ;
  319. }
  320.  
  321. .lifetime-0.theme-98\.css .highlight.bubble.fade-down, .lifetime-0.theme-xp\.css .highlight.bubble.fade-down {
  322.   animation:
  323.     fade reverse .5s,
  324.     down .5s,
  325.     fade reverse 0s 1s,
  326.     gradientShift 5s infinite linear
  327.   ;
  328. }
  329.  
  330. .bubble.fade-left {
  331.   animation:
  332.     fade reverse .5s,
  333.     fade .5s calc({lifetime}s - .5s) forwards,
  334.     left .5s,
  335.     left reverse .5s calc({lifetime}s - .5s) forwards
  336.   ;
  337. }
  338.  
  339. .lifetime-0 .bubble.fade-left {
  340.   animation:
  341.     fade reverse .5s,
  342.     left .5s,
  343.     fade reverse 0s 1s
  344.   ;
  345. }
  346.  
  347. .theme-98\.css .highlight.bubble.fade-left, .theme-xp\.css .highlight.bubble.fade-left {
  348.   animation:
  349.     fade reverse .5s,
  350.     fade .5s calc({lifetime}s - .5s) forwards,
  351.     left .5s,
  352.     left reverse .5s calc({lifetime}s - .5s) forwards,
  353.     gradientShift 5s infinite linear
  354.   ;
  355. }
  356.  
  357. .lifetime-0.theme-98\.css .highlight.bubble.fade-left, .lifetime-0.theme-xp\.css .highlight.bubble.fade-left {
  358.   animation:
  359.     fade reverse .5s,
  360.     left .5s,
  361.     fade reverse 0s 1s,
  362.     gradientShift 5s infinite linear
  363.   ;
  364. }
  365.  
  366. .bubble.fade-right {
  367.   animation:
  368.     fade reverse .5s,
  369.     fade .5s calc({lifetime}s - .5s) forwards,
  370.     right .5s,
  371.     right reverse .5s calc({lifetime}s - .5s) forwards
  372.   ;
  373. }
  374.  
  375. .lifetime-0 .bubble.fade-right {
  376.   animation:
  377.     fade reverse .5s,
  378.     right .5s,
  379.     fade reverse 0s 1s
  380.   ;
  381. }
  382.  
  383. .theme-98\.css .highlight.bubble.fade-right, .theme-xp\.css .highlight.bubble.fade-right {
  384.   animation:
  385.     fade reverse .5s,
  386.     fade .5s calc({lifetime}s - .5s) forwards,
  387.     right .5s,
  388.     right reverse .5s calc({lifetime}s - .5s) forwards,
  389.     gradientShift 5s infinite linear
  390.   ;
  391. }
  392.  
  393. .lifetime-0.theme-98\.css .highlight.bubble.fade-right, .lifetime-0.theme-xp\.css .highlight.bubble.fade-right {
  394.   animation:
  395.     fade reverse .5s,
  396.     right .5s,
  397.     fade reverse 0s 1s,
  398.     gradientShift 5s infinite linear
  399.   ;
  400. }
  401.  
  402. .bubble.zoom {
  403.   animation:
  404.     pop reverse .5s,
  405.     pop .5s calc({lifetime}s - .5s) forwards
  406.   ;
  407. }
  408.  
  409. .lifetime-0 .bubble.zoom {
  410.   animation:
  411.     pop reverse .5s,
  412.     fade reverse 0s 1s
  413.   ;
  414. }
  415.  
  416. .theme-98\.css .highlight.bubble.zoom, .theme-xp\.css .highlight.bubble.zoom {
  417.   animation:
  418.     pop reverse .5s,
  419.     pop .5s calc({lifetime}s - .5s) forwards,
  420.     gradientShift 5s infinite linear
  421.   ;
  422. }
  423.  
  424. .lifetime-0.theme-98\.css .highlight.bubble.zoom, .lifetime-0.theme-xp\.css .highlight.bubble.zoom {
  425.   animation:
  426.     pop reverse .5s,
  427.     fade reverse 0s 1s,
  428.     gradientShift 5s infinite linear
  429.   ;
  430. }
  431.  
  432. .bubble-background {
  433.   z-index: -1;
  434.   position: absolute;
  435.   top: 0;
  436.   left: 0;
  437.   height: 100%;
  438.   width: 100%;
  439.   background-color: var(--backgroundColor);
  440. }
  441.  
  442. .theme-default.corner-diagonal .bubble-background {
  443.   background:
  444.     linear-gradient( 0deg,   var(--borderColor) calc(var(--borderSize) + 1px), transparent 0),
  445.     linear-gradient( 90deg,  var(--borderColor) calc(var(--borderSize) + 1px), transparent 0),
  446.     linear-gradient( 180deg, var(--borderColor) calc(var(--borderSize) + 1px), transparent 0),
  447.     linear-gradient( 270deg, var(--borderColor) calc(var(--borderSize) + 1px), transparent 0),
  448.     linear-gradient( 135deg, var(--borderColor) 0 calc(var(--topLeftCorner, 0px) + var(--borderSize)),     transparent 0) top left     / 50% 50%,
  449.     linear-gradient(-135deg, var(--borderColor) 0 calc(var(--topRightCorner, 0px) + var(--borderSize)),    transparent 0) top right    / 50% 50%,
  450.     linear-gradient(  45deg, var(--borderColor) 0 calc(var(--bottomLeftCorner, 0px) + var(--borderSize)),  transparent 0) bottom left  / 50% 50%,
  451.     linear-gradient( -45deg, var(--borderColor) 0 calc(var(--bottomRightCorner, 0px) + var(--borderSize)), transparent 0) bottom right / 50% 50%,
  452.     var(--backgroundColor)
  453.   ;
  454.   background-origin: border-box;
  455.   background-repeat: no-repeat;
  456. }
  457.  
  458. .theme-default.corner-round .bubble-background {
  459.   border-radius: 5px;
  460. }
  461.  
  462. .dark-mode .bubble { --defaultBackgroundColor: #000D; }
  463.  
  464. /* --- [Container Blocks] --- */
  465.  
  466. .username-box {
  467.   z-index: 1;
  468.   background-color: var(--borderColor);
  469.   box-shadow: 0 -1px 0 1px var(--borderColor);
  470.   padding: .2rem 0;
  471. }
  472.  
  473. .theme-98\.css .username-box {
  474.   background-image: linear-gradient(90deg, #000C, transparent);
  475.   padding: .1rem 0;
  476. }
  477.  
  478. .theme-xp\.css .username-box {
  479.   padding: .2rem !important;
  480.   border-color: var(--darkerColor);
  481.   background-image: linear-gradient(180deg, var(--borderColor), var(--darkerColor) 8%, var(--borderColor) 95%, var(--darkerColor));
  482.   text-shadow: 1px 1px #000B;
  483.   position: relative;
  484. }
  485.  
  486. .theme-animal-crossing .username-box {
  487.   border-radius: 30px;
  488.   display: inline-block;
  489.   padding: .2rem .5rem;
  490. }
  491.  
  492. .theme-animal-crossing.corner-square .username-box {
  493.   border-radius: 0;
  494. }
  495.  
  496. .theme-98\.css .username-box, .theme-xp\.css .username-box {
  497.   box-shadow: none;
  498. }
  499.  
  500. .username {
  501.   padding-left: .3rem;
  502.   padding-right: .3rem;
  503.   display: inline-block;
  504.   color: black;
  505. }
  506.  
  507. .user-color-dark .username {
  508.   color: #FFFC;
  509. }
  510.  
  511. .theme-xp\.css .username {
  512.   padding-left: .1rem;
  513.   padding-right: .1rem;
  514. }
  515.  
  516. .theme-98\.css .username, .theme-xp\.css .username {
  517.   color: white;
  518. }
  519.  
  520. .theme-98\.css .username, .theme-xp\.css .username {
  521.   display: flex;
  522.   align-items: center;
  523. }
  524.  
  525. .theme-98\.css .username {
  526.   -webkit-font-smoothing: none;
  527.   padding-left: .2rem;
  528.   padding-right: .2rem;
  529. }
  530.  
  531. .custom-border-colors .username {
  532.   color: var(--customNameColor);
  533. }
  534.  
  535. .message {
  536.   --dynamicWidth: {maxWidth}px;
  537.   padding: .6rem;
  538.   width: var(--dynamicWidth);
  539.   max-height: {maxHeight}px;
  540.   overflow: hidden;
  541. }
  542.  
  543. .theme-animal-crossing .message {
  544.   --backgroundColor: #FFFAE4DD;
  545.   background-color: var(--backgroundColor);
  546.   border-radius: 30px / 25px;
  547.   padding: 1.75rem .75rem .75rem .75rem;
  548.   margin-top: -1rem;
  549.   margin-left: 15px;
  550. }
  551.  
  552. .theme-animal-crossing.corner-square .message {
  553.   border-radius: 0;
  554. }
  555.  
  556. .fixed-width-false .emote-4 .message {
  557.   display: flex;
  558.   justify-content: center;
  559.   align-items: flex-start;
  560. }
  561.  
  562. .dark-mode.theme-animal-crossing .message {
  563.   --backgroundColor: #1B3852DD;
  564. }
  565.  
  566. .theme-animal-crossing.custom-message-colors .message {
  567.   --backgroundColor: var(--customBackgroundColor);
  568. }
  569.  
  570. .dynamic .message { animation: expand 2s; }
  571.  
  572. /* --- [Message Parts] --- */
  573.  
  574. .emote {
  575.   position: relative;
  576.   vertical-align: middle;
  577.   margin: -.25rem 0;
  578. }
  579.  
  580. .dynamic .text, .dynamic .emote { animation: fadeMessage 1.5s; }
  581.  
  582. .emote-1 .emote { height: 1.75rem; max-height: 112px; }
  583. .emote-2 .emote { height: 3.5rem; max-height: 112px; }
  584. .emote-4 .emote { height: 112px; }
  585.  
  586. /* --- [Message Types] --- */
  587.  
  588. .highlight .bubble-background, .theme-animal-crossing .highlight .message {
  589.   background: linear-gradient(-45deg, #FFADADDD, #FFD6A5DD, #FDFFB6DD, #CAFFBFDD, #9BF6FFDD, #A0C4FFDD, #BDB2FFDD, #FFC6FFDD, #FFADADDD, #FFD6A5DD) 100% 100% / 900% 900%;
  590. }
  591.  
  592. .theme-98\.css .highlight.bubble, .theme-xp\.css .highlight.bubble {
  593.   background: linear-gradient(-45deg, #FFADAD, #FFD6A5, #FDFFB6, #CAFFBF, #9BF6FF, #A0C4FF, #BDB2FF, #FFC6FF, #FFADAD, #FFD6A5) 100% 100% / 900% 900%;
  594. }
  595.  
  596. .highlight .bubble-background {
  597.   animation: gradientShift 5s infinite linear;
  598. }
  599.  
  600. .theme-animal-crossing .dynamic.highlight .message {
  601.   animation: gradientShift 5s infinite linear, expand 2s;
  602. }
  603.  
  604. .theme-default.corner-diagonal .highlight .bubble-background {
  605.   background:
  606.     linear-gradient( 0deg,   var(--borderColor) calc(var(--borderSize) + .1px), transparent 0),
  607.     linear-gradient( 90deg,  var(--borderColor) calc(var(--borderSize) + .1px), transparent 0),
  608.     linear-gradient( 180deg, var(--borderColor) calc(var(--borderSize) + .1px), transparent 0),
  609.     linear-gradient( 270deg, var(--borderColor) calc(var(--borderSize) + .1px), transparent 0),
  610.     linear-gradient( 135deg, var(--borderColor) 0 calc(var(--topLeftCorner, 0px) + var(--borderSize)),     transparent 0) top left     / 50% 50%,
  611.     linear-gradient(-135deg, var(--borderColor) 0 calc(var(--topRightCorner, 0px) + var(--borderSize)),    transparent 0) top right    / 50% 50%,
  612.     linear-gradient(  45deg, var(--borderColor) 0 calc(var(--bottomLeftCorner, 0px) + var(--borderSize)),  transparent 0) bottom left  / 50% 50%,
  613.     linear-gradient( -45deg, var(--borderColor) 0 calc(var(--bottomRightCorner, 0px) + var(--borderSize)), transparent 0) bottom right / 50% 50%,
  614.     linear-gradient(-45deg, #FFADADDD, #FFD6A5DD, #FDFFB6DD, #CAFFBFDD, #9BF6FFDD, #A0C4FFDD, #BDB2FFDD, #FFC6FFDD, #FFADADDD, #FFD6A5DD) 100% 100% / 900% 900%
  615.   ;
  616.   background-origin: border-box;
  617.   background-repeat: no-repeat;
  618.   animation: gradientShift-cornerDiagonal 5s infinite linear;
  619. }
  620.  
  621. .highlight .text {
  622.   color: #000B;
  623. }
  624.  
  625. .action .text {
  626.   font-style: italic;
  627. }
  628.  
  629. .action .emote {
  630.   transform: skew(-5deg);
  631. }
  632.  
  633. .badge {
  634.   height: 1.5rem;
  635.   padding-bottom: .25rem;
  636.   padding-right: .25rem;
  637.   position: relative;
  638.   vertical-align: middle;
  639. }
  640.  
  641. .theme-98\.css .badge, .theme-xp\.css .badge {
  642.   height: 1rem;
  643.   padding-bottom: 0;
  644. }
  645.  
  646. .pronouns-badge {
  647.   display: inline-block;
  648.   margin-right: .25rem;
  649.   border-radius: 5px;
  650.   border: 2px solid currentcolor;
  651.   padding-left: .25rem;
  652.   padding-right: .25rem;
  653.   margin-bottom: .25rem;
  654. }
  655.  
  656. .theme-98\.css .pronouns-badge, .theme-xp\.css .pronouns-badge {
  657.   margin-bottom: 0;
  658.   font-size: .7rem;
  659.   border-radius: 3px;
  660. }
  661.  
  662. .theme-xp\.css .pronouns-badge, .theme-xp\.css .badge {
  663.   filter: drop-shadow(1px 1px #000B);
  664. }
  665.  
  666. .theme-xp\.css .pronouns-badge {
  667.   text-shadow: none;
  668. }
  669.  
  670. .custom-pronouns-badge-colors .pronouns-badge {
  671.   color: {pronounsBadgeTextColor};
  672.   background-color: {pronounsBadgeBackgroundColor};
  673.   border-color: {pronounsBadgeBorderColor};
  674. }
  675.  
  676. .theme-animal-crossing .badge {
  677.   padding-bottom: .15rem;
  678. }
  679.  
  680. /* --- [Overrides for 98.css and xp.css] --- */
  681. .title-bar {
  682.   background-color: var(--borderColor) !important;
  683.   display: block !important;
  684. }
  685.  
  686. .title-bar-controls {
  687.   display: inline-block;
  688.   padding-left: .25rem;
  689. }
  690.  
  691. .title-bar-controls button {
  692.   display: inline-block;
  693. }
  694.  
  695. .theme-xp\.css .title-bar-controls button[aria-label=Minimize], .theme-xp\.css .title-bar-controls button[aria-label=Maximize] {
  696.   mix-blend-mode: luminosity;
  697.   display: inline-block;
  698. }
  699.  
  700. /* --- [Animations] --- */
  701.  
  702. @keyframes gradientShift-cornerDiagonal {
  703.   from { background-position: 0 0, 0 0, 0 0, 0 0, top left, top right, bottom left, bottom right, 100% 100%; }
  704.   to { background-position: 0 0, 0 0, 0 0, 0 0, top left, top right, bottom left, bottom right, 0 0; }
  705. }
  706.  
  707. @keyframes gradientShift {
  708.   from { background-position: 100% 100%; }
  709.   to { background-position: 0 0; }
  710. }
  711.  
  712. @keyframes pop {
  713.   20% { transform: scale(1.3); }
  714.   to { opacity: 0; transform: scale(0); }
  715. }
  716.  
  717. @keyframes fadeMessage {
  718.   0%, 30% { opacity: 0; }
  719. }
  720.  
  721. @keyframes fade {
  722.   from { opacity: 1; }
  723.   to { opacity: 0; }
  724. }
  725.  
  726. @keyframes up {
  727.   from { transform: translateY(50px); }
  728.   to { transform: translateY(0px); }
  729. }
  730.  
  731. @keyframes down {
  732.   from { transform: translateY(-50px); }
  733.   to { transform: translateY(0px); }
  734. }
  735.  
  736. @keyframes left {
  737.   from { transform: translateX(50px); }
  738.   to { transform: translateX(0px); }
  739. }
  740.  
  741. @keyframes right {
  742.   from { transform: translateX(-50px); }
  743.   to { transform: translateX(0px); }
  744. }
  745.  
  746. @keyframes expand {
  747.   0% {
  748.     width: 0;
  749.     max-height: 0;
  750.   }
  751.  
  752.   10% { width: calc(var(--dynamicWidth) * {dynamicModifier}); }
  753.  
  754.   30% {
  755.     width: var(--dynamicWidth);
  756.     max-height: 0;
  757.   }
  758.   70% { max-height: {maxHeight}px; }
  759. }
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!