Deltarune shop About me for PFQ (BBcode + CSS)

[sc=banner][

credits below here! DO NOT remove any credits there are already here!

][sc=credits][
][tip="* Code by [url=https://pfq.link/@J9RL]swatchlings[/url]
* Images from [url=https://www.spriters-resource.com/pc_computer/deltarune/]DELTARUNE[/url]
* PKMN panel by [url=https://pokefarm.com/forum/post/8103319]Mirzam[/url]"][

------------

upper right icon below here
you can change it but it might move around, if you would like to fix the position or the size you need to go to to the "credits" styleclass

][img]https://files.catbox.moe/fhyqr4.png[/img][/tip][/sc][

------------

banner image below here
if you don't want to use a banner, make sure to add the credits in one of the tabs, otherwise they wont be visible
DO NOT remove the styleclass bbcode if you remove the image

][img]https://files.catbox.moe/dd2fbl.gif[/img][/sc][

------------

][sc=b][sc=c][

][sc=tabbed_interface horizontal][ul]
[li][sc=soul][/sc]Buy[/li]
[li][sc=soul][/sc]Sell[/li]
[li][sc=soul][/sc]Talk[/li]
[li][sc=soul][/sc]Exit[/li]
[li]$[math][inventory=Gold]+[inventory=Gold/safe][/math][/li]
[/ul][

If you want to add more tabs you should add the "soul" class before the name of the tab, that adds the soul heart and makes it appear if the tab is active! (or don't if you don't want it)
the 5th tab is the amount of GP in your inventory and it auto updates

------------

][sc=tab][ul]

[li][size=13]Welcome to Color Cafe. Let us warm your day.[/size][/li]

[/ul][/sc][

------------

][sc=tab][b]bold[/b], [i]italics[/i], [u]underline[/u], [tip=hello!]tooltip[/tip], [url=https://youtu.be/D83BxptHcRc?si=xWzmsy8y98R8qijr]link[/url]
[progress=50/100]progress :D[/progress]
[display=Display box]This is what it looks like![/display]
[hide=Hidebox]wawawawawa[/hide]
[table]
[tr]
 [th]Table[/th]
 [th]Table[/th]
[/tr]
[tr]
 [td]one[/td]
 [td]two[/td]
[/tr]
[tr]
 [td]one[/td]
 [td]two[/td]
[/tr]
[/table][
][sc=platform-party][pkmnpanel=Z4f_r][/sc]
[/sc][

------------

][sc=tab][ul]

[li]If you want to make the asterisk symbol appear before the text (and make the text move so it looks like the UT/DR dialogue text) you have to use the [url=https://pokefarm.wiki/BBCode#Lists,_Unordered]unordered list bbcode[/url][/li]

[/ul][/sc][

------------

][sc=tab]* contents 4[/sc][

------------

][sc=tab][ul]

[li][item=Credits][number][math][inventory=Credits]+[inventory=Credits/safe][/math][/number][/li]

[li][item=Gold][number][math][inventory=Gold]+[inventory=Gold/safe][/math][/number][/li]

[li][item=Zophan][number][math][inventory=Zophan]+[inventory=Zophan/safe][/math][/number][/li]

[/ul][/sc][

------------

][/sc][/sc][

][sc=upL][/sc][sc=upR][/sc][sc=upM][/sc][sc=downL][/sc][sc=downR][/sc][sc=downM][/sc][

][/sc]

[style]

@font-face {
     font-family: "8bitoperator-JVE";
     src: url(https://files.catbox.moe/vkna93.woff) format("woff");
     }

width: 310px;
background: black;
color: white;
font-family: "8bitoperator-JVE";
font-size: 16px;
text-shadow: 1px 1px 0px #11116F;
display: inline-block;

::selection {
     background: red;
     }

a {color: #FF7F27;}
a:hover {color: yellow;}

.b {
     width: 310px;
     background: black;
     color: white;
     font-family: "8bitoperator-JVE";
     font-size: 16px;
     text-shadow: 1px 1px 0px #11116F;
     display: inline-block;
     position: relative;
     }

.soul {
     width: 10px;
     height: 10px;
     top: 1px;
     position: relative;
     display: inline-block;
     padding: 0px 7px 0px 0px;
     user-select: none;
     content: url("https://files.catbox.moe/fhyqr4.png");
     }

.c {
     border: white 2px solid;
     box-shadow: inset 0px 0px 0px 1px #9DA2C4;
     margin: 5px;
     position: relative;
     }

.banner {
     width: stretch;
     position: relative;
     user-select: none;
     }

/*--------------------------------------------------*/

.credits {
     text-align: right;
     position: absolute;
     width: 10px;
     height: 10px;
     top: -3px;
     left: 295px;
     }

.credits .bbcode_tooltip {
     border-bottom: hidden;
     cursor: help;
     }

.credits div.tooltip_content {
     position: absolute;
     width: 135px;
     top: 22px;
     right: 10px;
     }

/*--------------------------------------------------*/

.upL {
      position: absolute;
      top: 0.5px;
      left: 0.5px;
      user-select: none;
      width: 13px;
      height: 13px;
      content: url("https://files.catbox.moe/o51r5e.gif");
      }

.upR {
      position: absolute;
      top: 0.5px;
      right: 0.5px;
      user-select: none;
      width: 13px;
      height: 13px;
      content: url("https://files.catbox.moe/2ztvvs.gif");
      }

.upM {
      position: absolute;
      top: 0.5px;
      left: 205.5px;
      user-select: none;
      width: 18px;
      height: 13px;
      content: url("https://files.catbox.moe/761tdl.gif");
      }

.downL {
      position: absolute;
      bottom: 0.5px;
      left: 0.5px;
      user-select: none;
      width: 13px;
      height: 13px;
      content: url("https://files.catbox.moe/kz6pds.gif");
      }

.downR {
      position: absolute;
      bottom: 0.5px;
      right: 0.5px;
      user-select: none;
      width: 13px;
      height: 13px;
      content: url("https://files.catbox.moe/u9bqm4.gif");
      }

.downM {
      position: absolute;
      bottom: 0.5px;
      left: 205.5px;
      user-select: none;
      width: 18px;
      height: 13px;
      content: url("https://files.catbox.moe/4gq1bd.gif");
      }

/*--------------------------------------------------*/

.tabbed_interface { margin: 0;

    >ul {
         background: none;
         width: 0px;


    >li {
         cursor: pointer;
         background: black;
         height: 15px;
         width: 50px;
         margin: 5px 0px 0px 223px;
         border-style: hidden;
         border-radius :0px;
         color :white;
         font-size: 16px;
         .soul {opacity: 0}
         }

    >li:hover {
             background:black;
             color: yellow;
             }

    >li { &.tab-active {.soul {opacity: 100}}}
         }

    >div {
         box-shadow: inset 0px 0px 0px 1px #9DA2C4, 1px 0px 0px 0px #9DA2C4;
         background: black;
         width: 190px;
         min-height: 100px;
         margin: -100px 5px 0 0px;
         padding: 5px 8px 5px;
         border-radius: 0px;
         border: 4px;
         border-style: hidden solid hidden hidden;
         color: white;
         font-size: 16px;

         ul {
             list-style: none;
             text-indent: 14px hanging each-line;
             margin: 0;
             padding: 0;
             }

         li::before {
             content: '*';
             margin-right: 5px;
             }
         }
     }

/*--------------------------------------------------*/

.expbar {
     background-color: #800000;
     color: white;
     font-weight: normal;
     border-radius: 0px;
     width: 90%;
     height: 15px;
     border-color: black;
     color: white;
     text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, -1px -1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000, 1px 1px 1px #000;
    }

.expbar >div {
     background-color: #FFA040;
     border: none;
    }

/*--------------------------------------------------*/

table {
     width: 100%;
     border: none;

    th, td {
         text-align: center;
         padding: 5px;
         border-radius: 0px;
         border: 2px solid #540054;
         }

    th {
         background-color: black;
         color: white;
         font-weight: normal;
         border: 2px solid #7d007d;
         }
}

/*--------------------------------------------------*/

.panel {
    border-radius: 0px;
    box-shadow: none;
    outline: solid 2px white;
    border: solid 1px #9DA2C4;
        >h3 {
        color: white;
            >a {
            color: white;
            }
            text-align: center;
            font-weight: normal;
            background: black;
            font-size: 16px;
            border-radius: 0px;
            border: none;

        }
        >div {
        background-color: black;
        padding: 5px;
        color: white;
        border-style: solid hidden hidden hidden;
        border-color: #9DA2C4;
        border-width: 2px;
        }
}

/*--------------------------------------------------*/

.bbcode_tooltip {
     border-bottom: 0.3px dashed white;
     cursor: help;
}

div.tooltip_content {
     width: auto;
     background: black;
     color: white;
     border: solid 1px #9DA2C4;
     outline: solid 2px white;
     border-radius: 0px;
     font-size: 13px;
    }

/*--------------------------------------------------*/
/* PKMN Panel by Mirzam below this */

--pparty-platform-base: black;
--pparty-platform-border: white;
--pparty-name-color: white;
--pparty-name-background: black;
--pparty-name-border: white;
--pparty-berry-background: #00C000;
--pparty-berry-border: white;
/* Set to "block" to show, "none" to hide */
.platform-party .helditem { display: block; } /* held item */
.platform-party .action { display: block; } /* berry buttons */

.platform-party:has(>.party), .platform-party .party {
  display: inline-block;
}
.platform-party .party {
  &,>div {
    padding: 0;
    margin: 0;
    background: transparent;
    width: 120px !important;
    height: 120px;
    overflow: hidden;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
  >div {
    display: block;
    &::after {
      display: none;
    }
    .pkmn {
      margin: 0 10px;
      float: unset;
      &::before {
        background-color: var(--pparty-platform-base);
        border-color: var(--pparty-platform-border);
      }
      .helditem {
        .itemsprite {
          cursor: unset;
        }
        .tooltip_content {
          display: none;
        }
      }
    }
    .name {
      background-color: var(--pparty-name-background);
      border: 2px solid var(--pparty-name-border);
      border-radius: 0px;
      margin-top: 1px;
      height: 16px;
      display: flex;
      flex-wrap: nowrap;
      padding: 0;
      a {
        color: var(--pparty-name-color);
        font-weight: normal;
        margin: 0 2px;
        width: 80px !important;
        flex-grow: 99;
        font-size: 12px;
      }
      img {
        display: none;
      }
      img:nth-last-of-type(-n+2) {
        display: inline;
        margin: 0;
      }
    }
    .action {
      position: absolute;
      left: 88px;
      top: 70px;
      height: unset;
      width: unset;
      .berrybuttons[data-up="any"]>a[data-berry="aspear"],
      .berrybuttons[data-up="sour"]>a[data-berry="aspear"],
      .berrybuttons[data-up="spicy"]>a[data-berry="cheri"],
      .berrybuttons[data-up="dry"]>a[data-berry="chesto"],
      .berrybuttons[data-up="sweet"]>a[data-berry="pecha"],
      .berrybuttons[data-up="bitter"]>a[data-berry="rawst"] {
        display: inline-block;
      }
      .berrybuttons {
        >a {
          display: none;
          width: 20px;
          height: 20px;
          line-height: 20px;
          padding: 5px;
          background-color: var(--pparty-berry-background);
          border-radius: 20px;
          >img {
            vertical-align: top;
            max-height: 20px;
            max-width: 20px;
          }
        }
        >a[data-berry="pecha"] img {
          /* this berry is short */
          margin-top: 1px;
        }
      }
      &.working {
        opacity: 0.5;
      }
      table, a[data-evolve] {
        /* "thank you" message and evolve button */
        display: none;
      }
    }
    .expbar, .taste, .extra {
      display: none;
    }
  }
  >div:hover>.action a[data-berry]:after {
    border-color: var(--pparty-berry-border);
  }
}
[/style]