Difference between revisions of "MediaWiki:Mobile.css"

Revision as of 21:49, 18 March 2017

/* CSS placed here will affect users of the mobile site */

/*
    _ _ _            _ _ _      _ _ _ _ _ _     _ _ _ _ _ _ _ _ _ _ _
   /\    \          /\    \    /\    \\    \  /|     |\              \
  /  \    \        /  \    \  /  \    \\    \  |     | \       _ _ _ _\
  \   \    \       \   \    \ \   \    \\    \ |     |  \     \       /
   \   \    \       \   \    \ \   \    \\    \|     |   \     \_ _ _/_ _
    \   \    \       \   \    \ \   \    \\          \    \              \
     \   \    \       \   \    \ \   \    \\     _    \    \      _ _ _ _ \
      \   \    \       \   \    \ \   \    \\    \\     \   \     \       /
       \   \    \_ _ _ _\_ _\    \_\_ _\    \\    \ \     \  \     \_ _ _/_ _
        \   \               \\               \\    \  \     \ \              \
         \   \_ _ _ _ _ _ _ _\\_ _ _ _ _ _ _ _\\ _ _\   \_ _ _\\_ _ _ _ _ _ _ \
          \  /               //               //    /   /     //              /
           \/_ _ _ _ _ _ _ _//_ _ _ _ _ _ _ _//_ _ /  \/_ _ _//_ _ _ _ _ _ _ /
*/

.donkey-vine {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	overflow: hidden;
	pointer-events: none;
}

.donkey-vine img {
    position: absolute;
    top: -200px;
    right: -300px;
    border: none;
    width: 289px;
    height: 186px;
    animation-name: donkey-swing;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-delay: 2s;
    animation-duration: 0s;
}

.diddy-vine {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	overflow: hidden;
	pointer-events: none;
}

.diddy-vine img {
    position: absolute;
    top: -200px;
    right: -300px;
    border: none;
    width: 289px;
    height: 186px;
    animation-name: diddy-swing;
    animation-duration: 0s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-delay: 2s;
}

.warning {
	position: fixed;
	display: block;
	width: 400px;
	top: 20px;
	left: 20px;
	background: #EA9999;
	border: 3px solid #990000;
        color: #000;
	padding: 20px;	
	font-size: 14px;
	font-weight: bold;
	font-family: sans-serif;
	box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.2);
}

.warning:before {
	content: '[x]';
	font-size: 11px;
	opacity: 0.5;
	position: absolute;
	top: 2px;
	right: 2px;
}

.warning:hover:before {
	cursor: pointer;
}

blockquote {
    margin: 10px;
    border-left: #ddd 4px solid;
    padding: 6px;
    color: #000;
    background: #eee;
    display: inline-block;
}

mark {
    color: #1155CC;
    background: rgba(17,85,204,0.16);
    font-family: monospace;
    font-size: 14px;
    padding: 1px 3px 1px 3px;
}

/* MOBILE */

blockquote, h3 span {
    font-family: "Helvetica Neue","Helvetica","Nimbus Sans L","Arial","Liberation Sans",sans-serif;
}

blockquote {
    font-size: 100%
}

blockquote mark {
    font-size: 115.39%
}

mark {
    font-size: 115.39%
}

blockquote:before, blockquote:after {
    display: none;
}

@media (max-width: 3840px) {
    .donkey-vine img {
        animation-duration: 6s;
    }
    .diddy-vine img {
        animation-duration: 6s;
    }
}

@media (max-width: 1920px) {
    .donkey-vine img {
        animation-duration: 4s;
    }
    .diddy-vine img {
        animation-duration: 4s;
    }
}
@media (max-width: 960px) {
    .donkey-vine img {
        animation-duration: 2s;
    }
    .diddy-vine img {
        animation-duration: 2s;
    }
}

@keyframes donkey-swing {
    from {
        top: -100px;
        right: -20%;
        transform: rotate(-20deg) scale(0.5, 0.5)
    }
    to {
        top: 400px;
        right: 250%;
        transform: rotate(20deg) scale(6, 6)
    }
}

@keyframes diddy-swing {
    from {
        top: -100px;
        left: -20%;
        transform: rotate(20deg) scale(0.5, 0.5)
    }
    to {
        top: 400px;
        left: 250%;
        transform: rotate(-20deg) scale(6, 6)
    }
}