2,507
edits
MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
Add css for new herobox template
(Add downscale class for images) |
(Add css for new herobox template) |
||
| Line 5: | Line 5: | ||
max-width: 100%; | max-width: 100%; | ||
height: auto; | 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; } | |||
} | } | ||