Difference between revisions of "MediaWiki:Mobile.css"
Line 135: | Line 135: | ||
@media (max-width: 3840px) { | @media (max-width: 3840px) { | ||
.donkey-vine img { | .donkey-vine img { | ||
− | animation-duration: | + | animation-duration: 8s; |
} | } | ||
.diddy-vine img { | .diddy-vine img { | ||
− | animation-duration: | + | animation-duration: 8s; |
} | } | ||
} | } | ||
Line 144: | Line 144: | ||
@media (max-width: 1920px) { | @media (max-width: 1920px) { | ||
.donkey-vine img { | .donkey-vine img { | ||
− | animation-duration: | + | animation-duration: 6s; |
} | } | ||
.diddy-vine img { | .diddy-vine img { | ||
− | animation-duration: | + | animation-duration: 6s; |
} | } | ||
} | } | ||
@media (max-width: 960px) { | @media (max-width: 960px) { | ||
.donkey-vine img { | .donkey-vine img { | ||
− | animation-duration: | + | animation-duration: 4s; |
} | } | ||
.diddy-vine img { | .diddy-vine img { | ||
− | animation-duration: | + | animation-duration: 4s; |
} | } | ||
} | } | ||
Line 167: | Line 167: | ||
to { | to { | ||
top: 400px; | top: 400px; | ||
− | right: | + | right: 340%; |
transform: rotate(20deg) scale(6, 6) | transform: rotate(20deg) scale(6, 6) | ||
} | } | ||
Line 180: | Line 180: | ||
to { | to { | ||
top: 400px; | top: 400px; | ||
− | left: | + | left: 320%; |
transform: rotate(-20deg) scale(6, 6) | transform: rotate(-20deg) scale(6, 6) | ||
} | } | ||
} | } |
Revision as of 18:29, 23 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: 8s; } .diddy-vine img { animation-duration: 8s; } } @media (max-width: 1920px) { .donkey-vine img { animation-duration: 6s; } .diddy-vine img { animation-duration: 6s; } } @media (max-width: 960px) { .donkey-vine img { animation-duration: 4s; } .diddy-vine img { animation-duration: 4s; } } @keyframes donkey-swing { from { top: -100px; right: -20%; transform: rotate(-20deg) scale(0.5, 0.5) } to { top: 400px; right: 340%; 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: 320%; transform: rotate(-20deg) scale(6, 6) } }