Toggle search
Toggle menu
642
657
30
4.4K
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.

MediaWiki:Card.css: Difference between revisions

MediaWiki interface page
More actions
Browse history interactively
← Older editNewer edit →
emptying page for styling in private
Tag: Blanking
No edit summary
Line 1: Line 1:
.card-container {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  vertical-align: top;
  text-align: center;
  gap: 2px;
  margin: 2px;


  &.wds-dropdown {
    &::before,
    &::after {
      display: none !important;
    }
  }
}
.card-wrapper {
  display: block;
  position: relative;
}
.card-body {
  display: block;
  width: min-content;
  border-radius: 45px;
  overflow: hidden;
  background: var(--theme-color-3);
  text-align: center;
  &:hover {
    outline: solid 2px var(--theme-color-2);
  }
}
.mini-card {
  .card-body {
    border-radius: 30px;
    background: none;
  }
  .card-image-container,
  .card-image-container figure {
    width: 48px;
    height: 48px;
    border-bottom-right-radius: initial;
    background-size: cover !important;
  }
  .card-image-container img {
    width: 48px;
    height: 48px;
  }
  .card-caption {
    width: 48px;
  }
}
.card-image-container,
.card-image-container figure {
  display: flex;
  width: 74px;
  height: 74px;
  border-bottom-right-radius: 14px;
  overflow: hidden;
  align-items: center;
  justify-content: center;
}
/* Mini on desktop – override */
.skin-fandomdesktop {
  .mini-card {
    .card-image-container,
    .card-image-container figure {
      width: 56px;
      height: 56px;
    }
    .card-image-container img {
      width: 56px;
      height: 56px;
    }
    .card-caption {
      width: 56px;
    }
    .card-image-container a.new {
      height: 56px;
      width: 56px;
      background-image: url("https://petitplanet.wiki/images/d/dd/Unknown.png");
    }
  }
  .card-mobile-text {
    display: none;
  }
}
/* Mobile adjustments */
.skin-fandommobile {
  .mini-card .card-icon img {
    width: 10px;
    height: 10px;
  }
  .card-image-container img {
    border: none;
    width: 70px;
    height: 70px;
    object-fit: contain;
  }
  .mini-card .card-image-container img {
    width: 45px;
    height: 45px;
  }
  .card-image-container figure {
    margin-bottom: 0;
  }
  /* Mobile List Mode */
  .card-mobile-list {
    .card-container {
      display: block;
      text-align: left;
      margin: 0;
    }
    .card-body,
    .card-body:hover,
    .card-image-container {
      background: none;
      box-shadow: none;
      outline: none;
    }
    .card-stars,
    .card-set-container,
    .card-equipped,
    .card-text,
    .card-caption,
    .card-refinement,
    .card-constellation,
    .card-equipped {
      display: none;
    }
    .card-image-container img {
      width: 30px;
      height: 30px;
    }
    .card-wrapper,
    .card-body,
    .card-image-container,
    .card-image-container figure,
    .card-image-container figure a {
      display: inline;
    }
    .card-icon,
    .card-icon-right {
      position: relative;
    }
  }
}
/* Card text */
.card-text {
  display: block;
  font-size: 13px;
  line-height: 24px;
  height: 24px;
  background-color: var(--page-background-color);
  border-radius: 12px !important;
  min-width: 20px !important;
  padding: 0 2px;
  overflow-wrap: anywhere;
  position: absolute;
  right: 0;
  bottom: 0;
  text-align: center;
  &.multi-line {
    height: auto;
  }
}
.card-text-small {
  font-size: 10px;
  line-height: 14px;
}
.card-text-smaller {
  font-size: 8px;
  line-height: 14px;
}
.card-font {
  color: #a29b84;
  font-family: "PetitPlanet";
}
/* Icon positions */
.card-icon {
  position: absolute;
  top: 1px;
  left: 1px;
  line-height: 0;
  z-index: 1;
}
.card-icon-right {
  position: absolute;
  top: 1px;
  right: 1px;
  line-height: 0;
}
.card-icon-bottom-left {
  position: absolute;
  bottom: 17px;
  left: 1px;
  line-height: 0;
}
.card-icon-bottom-right {
  position: absolute;
  bottom: 17px;
  right: 1px;
  line-height: 0;
}
/* Stars */
.card-stars {
  display: block;
  height: 16px;
  width: 100%;
  position: absolute;
  top: 62px;
  line-height: 0;
  pointer-events: none;
}
/* Caption */
.card-caption {
  width: 74px;
  line-height: 1;
  font-size: 12px;
  hyphens: auto;
  overflow-wrap: break-word;
  &.auto-width {
    width: min-content;
    max-width: 100%;
    min-width: 100%;
    hyphens: none;
    overflow-wrap: normal;
  }
}
/* Unknown fallback */
.card-image-container a.new {
  display: block;
  height: 74px;
  width: 74px;
  background-image: url("https://petitplanet.wiki/images/d/dd/Unknown.png");
  background-size: cover;
  font-size: 0;
}
.mini-card .card-image-container a.new {
  height: 48px;
  width: 48px;
}
/* Card List */
.card-list-container {
  text-align: left;
}
Retrieved from "https://petitplanet.wiki/MediaWiki:Card.css"