Information.png

Welcome to the Kingdom Hearts Database! 👑 Pardon the dust! We're rolling out new updates and improvements to the design of the Kingdom Hearts Database! Stay tuned for details this week! 👑 Our Spoiler policy is in effect! All articles related to Kingdom Hearts III must have the Unreleased template until checked and cleared by a member of the site staff! 👑 Be sure to join our Discord server and meet our growing community!

Difference between revisions of "Template:TheaterList/style.css"

From Kingdom Hearts Database
Jump to: navigation, search
(KeybladeSpyMaster changed the content model of the page Template:TheaterList/style.css from "wikitext" to "Sanitized CSS")
(Tag: content model change)
 
Line 10: Line 10:
 
.theatermenu:hover{
 
.theatermenu:hover{
 
box-shadow:0 0 7px 0 #000000;
 
box-shadow:0 0 7px 0 #000000;
 +
z-index:2;
 
}
 
}
  
Line 20: Line 21:
 
flex:1;
 
flex:1;
 
z-index:2;
 
z-index:2;
 +
}
 +
 +
@media (max-width: 720px) {
 +
.theatermenu .column1{
 +
flex:1;
 +
}
 +
 +
.theatermenu .column2{
 +
display:none;
 +
}
 
}
 
}
  

Latest revision as of 19:27, 15 January 2020

.theatermenu{
	transition:0.2s ease-in-out;
	display:flex;
	flex-direction:row;
	position:relative;
	margin:0;
	padding:0;
}

.theatermenu:hover{
	box-shadow:0 0 7px 0 #000000;
	z-index:2;
}

.theatermenu .column1{
	flex:2;
	z-index:2;
}

.theatermenu .column2{
	flex:1;
	z-index:2;
}

@media (max-width: 720px) {
	.theatermenu .column1{
		flex:1;
	}

	.theatermenu .column2{
		display:none;
	}
}

.theatermenu .column1 .theaterlist{
	margin: 25px;
    padding: 15px;
    box-shadow: 0 0 4px 1px #000000;
}

.theaterlist ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.theaterlist ul li {
    transition: 0.2s ease-in-out;
}

.theaterlist ul li:hover {
    background: #8287BA;
	box-shadow: 0 0 4px 0 rgba(0,0,0,0.5);
}

.theaterlist ul li a {
	padding:7px;
	transition:0.2s ease-in-out;
	max-width:100%;
	display:block;
	width:100%;
	height:100%;
	color:#cddcef;
}

.theaterlist ul li a:hover {
    text-decoration: none;
}

.theatermenu .theaterimg{
	position:absolute;
	z-index:1;
	width:100%;
	height:100%;
	overflow:hidden;
	display:flex;
	justify-content:center;
	align-items:center;
	margin:0;
	background:#181818;
}

.theatermenu .theaterimg img{
	transition:0.5s ease-in-out;
	opacity:0.8;
}

.theatermenu:hover .theaterimg img {
    opacity: 1.0;
    transform:scale(1.02);
}