Single post in pumpkin's poke problems
Forum Index > PokéFarm > Journals > Staff > pumpkin's poke problems >
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=tabbed_interface horizontal][ul]
[li][/li]
[li][/li]
[li][/li][/ul][
][sc=tab-active]
[/sc][
][sc=tab]
[/sc][
][sc=tab]
[/sc][
][sc=tab]
[/sc][
][sc=tab]
[/sc][/sc][sc=credits][url=https://pokefarm.com/forum/post/6194838]credits[/url][/sc]
[/sc]
[style]
//vars//
@yt: #F9F9F9;
@dteal: #274A5D;
@lteal: #D0E1E7;
@beige: #C2B299;
@dbeige: #2F281D;
@coral: #EF7E56;
@lcoral: #F49876;
@dcoral: #401502;
@link: #605139;
//codey//
.bg {
background-color: @yt; color: @dteal; font-size:11.2pt; padding: 3px; font-family: "merriweather";
.credits {font-size: 10pt; position: absolute; right: 1.5%; bottom:5px; }
a {color: @link;}
hr {border: 1px solid; border-image:linear-gradient(to right, rgba(0,0,0,0), @beige, @coral, @dteal, rgba(0,0,0,0)); border-image-slice: 1;}
.panel h3>a>svg {
color: @text; }
.panel {
&>h3 {background-color: @beige; color: @dbeige; border:2px solid @beige; border-radius: 5px; margin-bottom:4px; a {color:@dbeige; font-size: 11pt;}}
&>div {background-color: @yt; color: @dteal; border: 2px solid @beige; margin-bottom:4px; border-radius: 5px;}
box-shadow:none; border: none; border-radius: 0px; background: @yt;}
table {
margin: 0 auto; border-radius: 5px; border: 2px solid @dteal; padding: 1px; border-collapse: separate;
th, td {text-align: center; padding: 2px; border-radius: 5px; border: 2px solid @dteal; color: @dteal;}
th {background: @dteal; color: @yt;}
td {background-color: @yt;}}
.expbar {
color: @dcoral; background: @yt; border: 2px solid @lcoral; border-radius: 0px;
&>div {background: @lcoral; border-right: none; margin: 2px;}}
span.bbcode_tooltip {
border-bottom:1px dotted @dcoral;}
.tooltip_content{
background:@lcoral; color: @dcoral; border: none; border-radius: 5px; font-size:11pt; }
.party > div {
background: @dteal; color: @yt; border: none; border-radius: 5px; box-shadow: none;
a:link, a:visited {
color: @yt; text-shadow: 1px 1px #000;}}
.tabbed_interface {
>ul {
background: none; display: flex; flex-flow: row nowrap; justify-content: flex-start;
li {
display: inline-block; flex: initial; height: 50px; width: 50px; border-radius: 100%; border: 2px solid; margin: 2px;}
li:nth-child(1n) {background: @beige; border: 2px solid @beige; &.tab-active {box-shadow: 2px 2px 2px #575757;}}
li:nth-child(2n) {background: @coral; border: 2px solid @coral;&.tab-active {box-shadow: 2px 2px 2px #575757;}}
li:nth-child(3n) {background: @dteal; border: 2px solid @dteal; &.tab-active {box-shadow: 2px 2px 2px #575757;}}
}
>div {
box-shadow: none; background-color: @yt; border:2px solid @dteal; border-radius: 5px; color: @dteal; padding:3px; font-size:11.2pt; margin: 3px 1px 4px 1px;
ul {text-align: left; line-height:1.3; margin-left: -2%;
>li::marker {content: '●'; color: @dteal;}
>li:nth-child(even) {&::marker {content: '●'; color: @coral;}}
>li:hover::marker {content: '●'; color: @beige; transition: 0.5s;}}
//tabs in tabs//
.tabbed_interface {
>ul {
background: none; display: flex; flex-flow: row wrap; justify-content: flex-end;
li {
display: inline-block; flex: initial; border-radius: 5px; height: 20px; width: auto; border: 2px solid; margin: 2px; padding: 1px 5px;}
li:nth-child(odd) {background: @beige; border: 2px solid @beige; color: @dbeige; &.tab-active {box-shadow: 1px 1px 2px #000;}}
li:nth-child(even) {background: @lcoral; border: 2px solid @lcoral; color: @dcoral; &.tab-active {box-shadow: 1px 1px 2px #000;}}
}
>div {
box-shadow: none; background-color: @yt; border:2px solid @coral; border-radius: 5px; color: @dteal; padding:3px; font-size:11.2pt; margin: 3px 1px 4px 1px;}}}}
.mq15 & .back {
.party > div {
width:95%;
margin-left: 0px;
.action a[data-berry]:after {border:none;}}
.party > div > .name {
position:absolute;
right:0px;
top:-3px;
letter-spacing:.5px;}
.party > div > .action {
position: absolute;
right:1px;
bottom:30px;}
.party > div > .extra > .nature {
position: absolute;
right:0px;
bottom:5px;}
.party > div > .expbar {
width:160px;
position:absolute;
top:15px;
right:10px;}}}
/* latin-ext */
@font-face {
font-family: 'Merriweather';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/merriweather/v30/u-440qyriQwlOrhSvowK_l5-ciZMdeX3rsHo.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;
}
/* latin */
@font-face {
font-family: 'Merriweather';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/merriweather/v30/u-440qyriQwlOrhSvowK_l5-fCZMdeX3rg.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;
}
[/style]
