MediaWiki:Common.css: Difference between revisions

Latest revision as of 16:35, 30 July 2017

/* CSS placed here will be applied to all skins */

/* default class for images. Allows a maximum width of 100%. This will down-scale images in mobile view*/
img.downscale {
  max-width: 100%;
  height: auto;
}

/* ############################################### */
/* HeroBox */
/* ############################################### */
.herobox_border {
  width: calc(100% - 40px);
  background-image: url(images/7/7e/Hero_Border_-_Top_Left.png), url(images/0/0f/Hero_Border_-_Top.png), url(images/c/cb/Hero_Border_-_Top_Right.png), url(images/0/00/Hero_Border_-_Right.png), url(images/7/7e/Hero_Border_-_Bottom_Right.png), url(images/6/64/Hero_Border_-_Bottom.png), url(images/8/81/Hero_Border_-_Bottom_Left.png), url(images/f/fb/Hero_Border_-_Left.png);
  background-position: 0 0, 50% 0, 100% 0, 100% 50%, 100% 100%, 50% 100%, 0 100%, 0 50%;
  background-size: 40px 40px, calc(100% - 80px) 40px, 40px 40px, 40px calc(100% - 80px), 40px 40px, calc(100% - 80px) 40px, 40px 40px, 40px calc(100% - 80px);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  padding: 20px;
}
.herobox_content {
  background-image: url(images/7/7e/Hero_Border_-_Top_Left.png), url(images/0/0f/Hero_Border_-_Top.png), url(images/c/cb/Hero_Border_-_Top_Right.png), url(images/0/00/Hero_Border_-_Right.png), url(images/7/7e/Hero_Border_-_Bottom_Right.png), url(images/6/64/Hero_Border_-_Bottom.png), url(images/8/81/Hero_Border_-_Bottom_Left.png), url(images/f/fb/Hero_Border_-_Left.png);
  background-position: -20px -20px, 50% -20px, calc(100% + 20px) -20px, calc(100% + 20px) 50%, calc(100% + 20px) calc(100% + 20px), 50% calc(100% + 20px), -20px calc(100% + 20px), -20px 50%;
  background-size: 40px 40px, calc(100% - 40px) 40px, 40px 40px, 40px calc(100% - 40px), 40px 40px, calc(100% - 40px) 40px, 40px 40px, 40px calc(100% - 40px);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  padding: 10px 15px 10px 15px;
}
.herobox_flexcontainer {
  width: 100%;
  text-align: center;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  border-width: 0px;
}
.herobox_image {
  width: 100%;
  max-width: 256px;
  height: auto;
  margin: auto;
}
.herobox_ability {
  border: 30px solid transparent;
  margin:10px auto 0px auto;
  border-image: url(images/1/19/Herobox_Ability.png) 65 70 stretch;
  background-color: transparent;
  align-self: flex-start;
  max-width: 470px;
}
@media all and (min-width: 900px) {
  /* We tell both sidebars to share a row */
  .herobox_flexcontainer { flex-wrap: nowrap; }
}