Toggle search
Toggle menu
1K
1K
32
6.2K
The Petit Planet Wiki
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

Template:CustomTabs/styles.css: Difference between revisions

Template page
More actions
Browse history interactively
← Older edit
m Stevium moved page MediaWiki:CustomTabs.css to Template:CustomTabs/styles.css without leaving a redirect: Changing how the CustomTabs stylesheet is loaded: now uses TemplateStyles instead of @import
Stevium changed the content model of the page Template:CustomTabs/styles.css from "CSS" to "Sanitized CSS": TemplateStyles
 
(One intermediate revision by the same user not shown)
Line 1: Line 1:
/* For Template:CustomTabs */
.custom-tabs {
 
    display: flex;
/* Hide dummy infobox layout junk on desktop */
    flex-direction: row;
aside.pi-theme-dummy,
    gap: 5px;
aside.pi-theme-dummy ~ aside.portable-infobox + p > br:first-child,
    width: 100%;
aside.pi-theme-dummy ~ aside.portable-infobox + p:empty + p > br:first-child {
    margin: 5px 0;
  display: none;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
}


.custom-tabs {
.custom-tabs > span {
  display: flex;
  flex-direction: row;
  gap: 5px;
  width: 100%;
  margin: 5px 0;
  flex-wrap: wrap;
  justify-content: space-evenly;
 
  > span {
     border-radius: 10px;
     border-radius: 10px;
     display: flex;
     display: flex;
Line 25: Line 17:
     text-align: center;
     text-align: center;
     transition: 0.25s;
     transition: 0.25s;
  }
}


  a,
.custom-tabs a,
  .selflink,
.custom-tabs .selflink,
  span.new {
.custom-tabs span.new {
     display: flex;
     display: flex;
     width: 100%;
     width: 100%;
Line 39: Line 31:
     text-align: center;
     text-align: center;
     font-weight: 900 !important;
     font-weight: 900 !important;
  }
}


  /* Apply Color Scheme */
.custom-tabs span.active-tab {
  span {
    background-color: var(--color-accent);
    &.active-tab {
}
      background-color: var(--active-tab-background-color);


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


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


/* Mobile 2-column layout */
.custom-tabs span.inactive-tab a:not(.new),
.skin-fandommobile {
.custom-tabs span.inactive-tab:hover a:not(.new) {
  .custom-tabs {
    color: var(--color-base);
    display: grid;
    grid-template-columns: repeat(2, 50%);
    grid-auto-flow: row;
 
    a,
    .selflink,
    span.new {
      font-size: 90%;
    }
  }
}
}


/* Default Color Scheme */
.custom-tabs span.inactive-tab:hover {
.custom-tabs-default {
     background: var(--background-color-3);
  --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);
 
  .skin-theme-clientpref-night &, .skin-theme-clientpref-os & {
     --active-tab-color: var(--background-color-base);
  }
}
}
Retrieved from "https://petitplanet.wiki/Template:CustomTabs/styles.css"