The Petit Planet Wiki

Template:CustomTabs/styles.css: Difference between revisions

Browse history interactively
← Older edit

ReisuDesign (talk | contribs)

3 user groups
4,145 edits
undo
Added skin-theme-clientpref-os
ReisuDesign (talk | contribs)
confirmed, Interface administrators, moderator
4,145 edits
No edit summary
 
(8 intermediate revisions by 2 users not shown)
Line 1: Line 1:
/* For Template:CustomTabs */
.skin-theme-clientpref-night {
    --secondary-tab-text: var(--color-base);
}


/* Hide dummy infobox layout junk on desktop */
.skin-theme-clientpref-day {
aside.pi-theme-dummy,
    --secondary-tab-text: var(--color-accent-text);
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;
}


  > span {
.custom-tabs > 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;
  }
}


  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 39:
     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 {
.custom-tabs span.inactive-tab {
      background: var(--inactive-tab-background-color);
    background: var(--background-color-1);
}


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


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


        a:not(.new) {
/* Secondary Tabs */
          color: var(--inactive-tab-hover-color);
.custom-tabs-secondary span.active-tab {
        }
    background: rgba(56, 147, 165, 0.6) !important;
      }
    }
  }
}
}


/* Mobile 2-column layout */
.custom-tabs-secondary span.active-tab strong,
.skin-fandommobile {
.custom-tabs-secondary span.active-tab a:not(.new) {
  .custom-tabs {
color:  var(--secondary-tab-text) !important;
    display: grid;
}
    grid-template-columns: repeat(2, 50%);
    grid-auto-flow: row;


    a,
/* Tertiary Tabs */
    .selflink,
.custom-tabs-tertiary span.active-tab  {
    span.new {
    background-color: var(--background-color-3) !important;
      font-size: 90%;
    }
  }
}
}


/* Default Color Scheme */
.custom-tabs-tertiary span.active-tab strong,
.custom-tabs-default {
.custom-tabs-tertiary span.active-tab a:not(.new) {
  --active-tab-background-color: var(--theme-accent-color);
color: var(--secondary-tab-text) !important;
  --active-tab-color: var(--page-text-color);
  --inactive-tab-background-color: var(--theme-color-1);
  --inactive-tab-color: var(--page-text-color);
  --inactive-tab-hover-background-color: var(--theme-color-3);
  --inactive-tab-hover-color: var(--inactive-tab-color);
 
  .skin-theme-clientpref-night &, .skin-theme-clientpref-os & {
    --active-tab-color: var(--page-background-color);
  }
}
}
Retrieved from "https://petitplanet.wiki/Template:CustomTabs/styles.css"