Single post in Coding Diaries
Forum Index > PokéFarm > Journals > Coding Diaries >
Name
Another version was made specifically for veltavle.
Header 1
Header 2
Header 3
[Link] [Link] [Link] [Link] [Link] [Link] [Link] [Link]Tooltip
Tooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
- List Item
- List Item
- List Item
QUOTE originally posted by User
Content
Display box
Content
Hide box
Content
Accordion 1
Content 1
Accordion 2
Content 2
Accordion 3
Content 3
Stackbox 1
Content 1
Stackbox 2
Content 2
Stackbox 3
Content 3
| Header | Header | Header | Header | Header | Header | |
|---|---|---|---|---|---|---|
| Header | Data | Data | Data | Data | Data | Data |
| Header | Data | Data | Data | Data | Data | Data |
| Header | Data | Data | Data | Data | Data | Data |
Code
[styleclass=about][sc=header][sc=icon][/sc][h1]Name[/h1][/sc][
][styleclass=tabbed_interface horizontal][
][ul][
][li][/li][
][li][/li][
][li][/li][
][li][/li][
][/ul][
][sc=tab tab-active]tab one do not put text in the li's![/sc][
][sc=tab]two[/sc][
][sc=tab]three[/sc][
][sc=tab]four[/sc][
][/styleclass][/styleclass][sc=credits]coded by [url=https://pokefarm.com/forum/post/6419911]aemilia[/url] || [url=https://placekitten.com/75/75]image[/url][/sc]
[style]
@bg = #ca8cd3;
@border = darken(@bg, 35%);
@text = #000000;
@link = #13375D;
@icon-img = url('https://placehold.co/75x75');
@margin-tabs = 30px;
@list-img = url('https://pfq-static.com/img/navbar/party.png');
/***************************************
* IGNORES WHITESPACE BETWEEN ELEMENTS *
***************************************/
.tabbed_interface {
white-space: nowrap;
& > ul > li, & > div
{
white-space: pre-line;
}
}
/****************
* RESET STYLES *
****************/
table, tr, th, td, .panel *, .panel, .tabbed_interface, .tabbed_interface > ul, .tabbed_interface > ul > li, .tabbed_interface > div
{
padding: 0;
margin: 0;
background: none;
box-shadow: none;
border: none;
border-radius: 0;
}
.about
{
box-sizing: border-box;
position: relative;
width: 310px;
background: @bg;
border: 5px solid @border;
padding: 1%;
color: @text;
font-size: 12pt;
z-index: 5;
margin-bottom: 20px;
>.header
{
display: flex;
flex-flow: row nowrap;
align-items: center;
> .icon
{
height: 75px;
width: 75px;
border-radius: 100%;
border: 3px solid @border;
background: @icon-img;
box-shadow: 0 0 5px black;
}
> h1
{
margin-left: 10px;
font-family: 'Milonga';
font-weight: bold;
font-size: 2em;
}
}
> .tabbed_interface
{
display: grid;
grid-template-areas:
"cont"
"tabbar";
> ul
{
background: transparent;
grid-area: tabbar;
display: flex;
flex-flow: row nowrap;
justify-content: space-evenly;
margin-bottom: -30px;
> li
{
grid-area: tab;
display: inline-block;
flex: initial;
height: 40px;
width: 40px;
border-radius: 100%;
border: 3px solid @border;
background: @bg;
box-shadow: 0 0 5px #000000;
transition: all 0.15s ease-in-out;
&:hover
{
cursor: pointer;
}
}
&:hover li
{
filter:blur(3px);
opacity:.5;
transform: scale(.95);
box-shadow:none;
}
&:hover li:hover
{
transform:scale(1);
filter:blur(0px);
opacity:1;
box-shadow: 0 0 5px #000000;
}
}
> .tab
{
grid-area: cont;
padding: 10px 0;
color: @text;
ul > li:not(.tabbed_interface > ul > li)
{
list-style-image: @list-img;
}
h1, h2, h3
{
margin: 0;
}
a:not(.panel > h3 > a), a:not(.panel > h3 > a):link, a:not(.panel > h3 > a):hover, a:not(.panel > h3 > a):active, a:not(.panel > h3 > a):visited
{
color: @link;
display: inline-block;
text-decoration: none;
position: relative;
}
a:not(.panel > h3 > a)::before
{
content: '';
background-color: hsla(0, 0%, 100%, .5);
position: absolute;
left: 0;
bottom: 3px;
width: 100%;
height: 8px;
z-index: -1;
transition: all .3s ease-in-out;
}
a:not(.panel > h3 > a):hover::before {
bottom: -3px;
height: 110%;
width: 110%;
left: -3px;
}
table
{
margin: 0 auto;
text-align: center;
border-collapse: separate;
border-spacing: 5px;
border: none;
display: flex;
width: 285px;
overflow-x: auto;
tr
{
th
{
width: fit-content;
padding: 5px;
background: @border;
color: #ffffff;
border: none;
}
td
{
background: @bg;
color: @text;
border: 1px solid @border;
padding: 5px;
}
}
}
.expbar
{
padding: 5px;
background: @bg;
color: @text;
border: 2px solid @link;
border-radius: 0;
div
{
background: lighten(@link, 75%);
border: 2px solid @bg;
border-radius: 0;
}
span
{
color: @text;
}
}
hr
{
height: 10px;
border: none;
color: black;
background-image: linear-gradient(
black,
black 33.33%,
transparent 33.33%,
transparent 100%);
background-size: 100% 3px;
width: 250px;
}
span.bbcode_tooltip
{
border-bottom: 1px dotted @text;
}
.tooltip_content
{
background: @link;
color: black;
border-radius: 0;
border: 2px solid @border;
}
.panel
{
box-shadow: none;
border: none;
border-radius: 0;
background: transparent;
> h3
{
border-radius: 0;
border: 2px solid @border;
background: @accent1;
padding: 1%;
color: @text;
& > a
{
color: inherit;
}
&:not(.panel > h3:first-child)
{
margin-top: 3px;
}
}
> div
{
background: none;
border: 2px solid @border;
color: @text;
padding: 2%;
margin-top: 3px;
}
}
}
}
}
/* latin */
@font-face {
font-family: 'Milonga';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/milonga/v18/SZc53FHnIaK9W5kfTzrMkA.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]
Buying:
BSDs 20 ZC
Prisms 70 ZC
BSDs 20 ZC
Prisms 70 ZC
