Jump to content

Editing Template:CustomTabs/styles.css

Warning: You are not logged in. Your IP address will be publicly visible if you make any edits. If you log in or create an account, your edits will be attributed to your username, along with other benefits.
The edit can be undone. Please check the comparison below to verify that this is what you want to do, and then publish the changes below to finish undoing the edit.
Latest revision Your text
Line 1: Line 1:
.skin-theme-clientpref-night {
/* For Template:CustomTabs */
    --secondary-tab-text: var(--color-base);
}


.skin-theme-clientpref-day {
/* Hide dummy infobox layout junk on desktop */
    --secondary-tab-text: var(--color-accent-text);
aside.pi-theme-dummy,
aside.pi-theme-dummy ~ aside.portable-infobox + p > br:first-child,
aside.pi-theme-dummy ~ aside.portable-infobox + p:empty + p > br:first-child {
  display: none;
}
}


.custom-tabs {
.custom-tabs {
    display: flex;
  display: flex;
    flex-direction: row;
  flex-direction: row;
    gap: 5px;
  gap: 5px;
    width: 100%;
  width: 100%;
    margin: 5px 0;
  margin: 5px 0;
    flex-wrap: wrap;
  flex-wrap: wrap;
    justify-content: space-evenly;
  justify-content: space-evenly;
}


.custom-tabs > span {
  > span {
     border-radius: 10px;
     border-radius: 10px;
     display: flex;
     display: flex;
Line 25: Line 25:
     text-align: center;
     text-align: center;
     transition: 0.25s;
     transition: 0.25s;
}
  }


.custom-tabs a,
  a,
.custom-tabs .selflink,
  .selflink,
.custom-tabs span.new {
  span.new {
     display: flex;
     display: flex;
     width: 100%;
     width: 100%;
Line 39: Line 39:
     text-align: center;
     text-align: center;
     font-weight: 900 !important;
     font-weight: 900 !important;
}
  }
 
  /* Apply Color Scheme */
  span {
    &.active-tab {
      background-color: var(--active-tab-background-color);


.custom-tabs span.active-tab {
      strong,
    background-color: var(--color-accent);
      a:not(.new) {
}
        color: var(--active-tab-color);
      }
    }


.custom-tabs span.active-tab strong,
    &.inactive-tab {
.custom-tabs span.active-tab a:not(.new) {
      background: var(--inactive-tab-background-color);
    color: var(--color-accent-text);
}


.custom-tabs span.inactive-tab {
      a:not(.new) {
    background: var(--background-color-1);
        color: var(--inactive-tab-color);
}
      }


.custom-tabs span.inactive-tab a:not(.new),
      &:hover {
.custom-tabs span.inactive-tab:hover a:not(.new) {
        background: var(--inactive-tab-hover-background-color);
    color: var(--color-base);
    text-decoration: none;
}


.custom-tabs span.inactive-tab:hover {
        a:not(.new) {
    background: var(--background-color-3);
          color: var(--inactive-tab-hover-color);
        }
      }
    }
  }
}
}


/* Secondary Tabs */
/* Mobile 2-column layout */
.custom-tabs-secondary span.active-tab {
.skin-fandommobile {
     background: rgba(56, 147, 165, 0.6) !important;
  .custom-tabs {
}
     display: grid;
    grid-template-columns: repeat(2, 50%);
    grid-auto-flow: row;


.custom-tabs-secondary span.active-tab strong,
    a,
.custom-tabs-secondary span.active-tab a:not(.new) {
    .selflink,
color: var(--secondary-tab-text) !important;
    span.new {
      font-size: 90%;
    }
  }
}
}


/* Tertiary Tabs */
/* Default Color Scheme */
.custom-tabs-tertiary span.active-tab {
.custom-tabs-default {
    background-color: var(--background-color-3) !important;
  --active-tab-background-color: var(--theme-accent-color);
}
  --active-tab-color: var(--color-base);
  --inactive-tab-background-color: var(--background-color-1);
  --inactive-tab-color: var(--color-base);
  --inactive-tab-hover-background-color: var(--background-color-3);
  --inactive-tab-hover-color: var(--inactive-tab-color);


.custom-tabs-tertiary span.active-tab strong,
  .skin-theme-clientpref-night &, .skin-theme-clientpref-os & {
.custom-tabs-tertiary span.active-tab a:not(.new) {
    --active-tab-color: var(--background-color-base);
color: var(--secondary-tab-text) !important;
  }
}
}
Please note that all contributions to The Petit Planet Wiki are considered to be released under the Creative Commons Attribution-ShareAlike (see Petit Planet Wiki:Copyrights for details). If you do not want your writing to be edited mercilessly and redistributed at will, then do not submit it here.
You are also promising us that you wrote this yourself, or copied it from a public domain or similar free resource. Do not submit copyrighted work without permission!
Cancel Editing help (opens in new window)
Preview page with this template
Below are commonly used wikitext from MediaWiki:Edittools. Click on any to insert them in the edit box.
File Pages==Summary====Licensing=={{Fairuse}}{{File|}}
Dynamic Page List¦²«»²{¦}²«»«/»«!----»
Array in DPL¹^2{}^2^2{¹}^2
Parser Functions{{#if:||}}
{{#ifeq:|||}}
{{#expr:}}
{{#switch:||#default=}}
{{#replace:||}}
{{#titleparts:}}
{{#tag:|}}
Markup{{}}|[][[]][[Category:]]#REDIRECT [[]] [[Category:Redirect Pages]]<code></code><includeonly></includeonly><noinclude></noinclude><nowiki></nowiki><!----><br>§
Notices{{Stub|}}{{Stub Dialogue}}{{Upcoming}}{{Under Construction}}{{Placeholder|}}
Magic Words{{!}}{{formatnum:}}{{lc:}}{{uc:}}{{PAGENAME}}{{FULLPAGENAME}}{{ROOTPAGENAME}}{{BASEPAGENAME}}{{SUBPAGENAME}}{{DISPLAYTITLE:|noreplace}}__TOC____NOTOC____EXPECTUNUSEDCATEGORY____HIDDENCAT__
HTML Entities&mdash;&nbsp;&comma;&shy;
Retrieved from "https://petitplanet.wiki/Template:CustomTabs/styles.css"