Single post in pumpkin's poke problems
Forum Index > PokéFarm > Journals > Staff > pumpkin's poke problems >
Fall-ing for You
This template comes tab-included! Feel free to add additional tabs onto the baseline. Please don't remove the tabbed interface entirely, however, as it's key to legibility!
Code
[sc=bg][sc=title]title?[/sc][sc=tabbed_interface horizontal][ul]
[li][/li]
[li][/li]
[li][/li][/ul][
][sc=tab-active]
[/sc][
][sc=tab]
[/sc][
][sc=tab]
[/sc][/sc][sc=credits][url=https://pokefarm.com/forum/post/6194838]credits[/url][/sc]
[/sc]
[style]
//vars//
@cream: #FCF2E3;
@text: #873317;
@link: #5F3A3A;
@yell: #EB8D0A;
@oran: #D06224;
@doran: #AE431E;
//codes//
.bg {background: @cream; color: @text; padding: 3px;
.credits {font-size: 10pt; position: absolute; right: 1.5%; bottom:5px; }
a {color: @link;}
.title {text-align: center; font-size: 30pt; font-family: "oleo script"; color: @link;}
h1, h2 {font-family: "oleo script"; color: @link;}
hr {
display:block; border:none; height:18px; width: 300px; background-image:url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/e7dc6b41-f709-43ed-947e-3dae499e274d/d9gqnbs-b5b99fd3-2090-45cb-a495-6244c63539b3.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2U3ZGM2YjQxLWY3MDktNDNlZC05NDdlLTNkYWU0OTllMjc0ZFwvZDlncW5icy1iNWI5OWZkMy0yMDkwLTQ1Y2ItYTQ5NS02MjQ0YzYzNTM5YjMucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.rkHzpPum8fZuYWP6mTIGrt858SNvmzHpoZLeJOUGwHs');}
.mq15 & hr {
display:block; border:none; height:18px; width: 140px; background-image:url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/e7dc6b41-f709-43ed-947e-3dae499e274d/d9gqnbs-b5b99fd3-2090-45cb-a495-6244c63539b3.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2U3ZGM2YjQxLWY3MDktNDNlZC05NDdlLTNkYWU0OTllMjc0ZFwvZDlncW5icy1iNWI5OWZkMy0yMDkwLTQ1Y2ItYTQ5NS02MjQ0YzYzNTM5YjMucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.rkHzpPum8fZuYWP6mTIGrt858SNvmzHpoZLeJOUGwHs');}
.panel h3>a>svg {
color: @cream; }
.panel {
&>h3 {background-color: @text; color: @cream; border:2px solid @text; border-radius: 10px; margin-bottom:4px; a {color:@cream; font-size: 11pt;}}
&>div {background-color: @cream; color: @text; border: 2px solid @text; margin-bottom:4px; border-radius: 10px;}
box-shadow:none; border: none; border-radius: 0px; background: @cream;}
table {
margin: 0 auto; border-radius: 5px; border: 2px solid @text; padding: 1px; border-collapse: separate;
th, td {text-align: center; padding: 2px; border-radius: 5px; border: 2px solid @text; color: @text;}
th {background: @text; color: @cream;}
td {background-color: @cream;}}
.tabbed_interface{
box-shadow: none; margin: 0; display: flex;
>ul {background: none; display: flex; flex-flow: column nowrap; justify-content: flex-start;
li {
display: inline-block; flex: initial; height: 35px; width: 35px; border-radius: 100%; border: 2px solid; margin: 2px}
li:nth-child(1n) {background: @yell; border: 2px solid @yell; &.tab-active {box-shadow: 2px 2px 2px #575757;}}
li:nth-child(2n) {background: @oran; border: 2px solid @oran;&.tab-active {box-shadow: 2px 2px 2px #575757;}}
li:nth-child(3n) {background: @doran; border: 2px solid @doran; &.tab-active {box-shadow: 2px 2px 2px #575757;}}}
>div {
color: @text; width: 89%; border-radius: 25px; border: 2px solid @oran; min-height: 100px; text-align: center; position: relative; background: @cream; font-size: 10.8pt; box-shadow:none; padding: 6px; margin:2px;
ul {text-align: left; line-height:1.3; margin-left: -2%;
>li::marker {content: '●'; color: @doran;}
>li:hover::marker {content: '●'; color: @yell; transition: 0.5s;}}
//tabs in tabs//
.tabbed_interface {display: block; width: 98%;
>ul {
display: inline-block;
li {
border-radius: 5px; height: 20px; width: auto; border: 2px solid; margin: 2px; padding: 1px 5px; background: @text; color: @cream; border: 2px solid @text; &.tab-active {box-shadow: 1px 1px 2px @yell;}}
}
>div {
box-shadow: none; width: auto; background-color: @cream; border:2px solid @text; border-radius: 5px; color: @text; padding:3px; font-size:10.8pt; margin: 3px 1px 4px 1px;}}}
.expbar {
color: #000; background: @cream; border: 2px solid @yell; border-radius: 10px;
&>div {background: @yell; border-right: none; }}
.party > div {
background: @text; color: @cream; border: 1px double @oran; border-radius: 5px; box-shadow: none;
a:link, a:visited {
color: @cream; text-shadow: 1px 1px #000;}}
span.bbcode_tooltip {
border-bottom:1px dotted @oran;}
.tooltip_content{
background:@cream; color: @text; border: 2px solid @text; border-radius: 10px; font-size:10.8pt; }}
.mq15 & .tabbed_interface{
box-shadow: none; margin: 0; display: flex;
>ul {background: none; display: flex; flex-flow: column nowrap; justify-content: flex-start;
li {
display: inline-block; flex: initial; height: 25px; width: 25px; border-radius: 100%; border: 2px solid; margin: 2px}
li:nth-child(1n) {background: @yell; border: 2px solid @yell; &.tab-active {box-shadow: 2px 2px 2px #575757;}}
li:nth-child(2n) {background: @oran; border: 2px solid @oran;&.tab-active {box-shadow: 2px 2px 2px #575757;}}
li:nth-child(3n) {background: @doran; border: 2px solid @doran; &.tab-active {box-shadow: 2px 2px 2px #575757;}}}
>div {
color: @text; width: 80%; border-radius: 25px; border: 2px solid @oran; min-height: 100px; text-align: center; position: relative; background: @cream; font-size: 10.8pt; box-shadow:none; padding: 6px; margin:2px;
ul {text-align: left; line-height:1.3; margin-left: -2%;
>li::marker {content: '●'; color: @doran;}
>li:hover::marker {content: '●'; color: @yell; transition: 0.5s;}}
//tabs in tabs//
.tabbed_interface {display: block; width: 98%;
>ul {
display: inline-block;
li {
border-radius: 5px; height: 20px; width: auto; border: 2px solid; margin: 2px; padding: 1px 5px; background: @text; color: @cream; border: 2px solid @text; &.tab-active {box-shadow: 1px 1px 2px @yell;}}
}
>div {
box-shadow: none; width: auto; background-color: @cream; border:2px solid @text; border-radius: 5px; color: @text; padding:3px; font-size:10.8pt; margin: 3px 1px 4px 1px;}}}}
}
/* title font */
@font-face {
font-family: 'Oleo Script';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/oleoscript/v12/rax5HieDvtMOe0iICsUccChTu0_y8zacEL4.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {
font-family: 'Oleo Script';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/oleoscript/v12/rax5HieDvtMOe0iICsUccChdu0_y8zac.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
.mq15 & .bg {
.party > div {
width:78%;
margin-left: 0px;
.action a[data-berry]:after {border: none;}
.berrybuttons > a {display: none;}
.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'],
.berrybuttons[data-up='any'] > a[data-berry='pecha']{
background: none;
border:2px solid @cream;
display:block;
position:absolute;
right:5px;
padding:0px 10px;
border-radius:5px;
width: 100px;
}}
.party > div > .name {
position:absolute;
right:5px;
top:-3px;
letter-spacing:.5px;}
.party > div > .action {
position: absolute;
width: 130px;
right:5px;
bottom:42px;}
.party > div > .extra > .nature {
font-size: 10pt;
position: absolute;
right:0px;
bottom:22px;}
.party > div > .expbar {
width:130px;
position:absolute;
top:15px;
right:10px;}}
[/style]
