diff options
Diffstat (limited to 'static/css')
| -rw-r--r-- | static/css/harlem-shake.css | 424 | ||||
| -rw-r--r-- | static/css/sidebar.css | 110 | ||||
| -rw-r--r-- | static/css/styles.css | 6 |
3 files changed, 492 insertions, 48 deletions
diff --git a/static/css/harlem-shake.css b/static/css/harlem-shake.css new file mode 100644 index 00000000..65597b30 --- /dev/null +++ b/static/css/harlem-shake.css @@ -0,0 +1,424 @@ +/* .im_drunk, .im_baked, .im_trippin, .im_blown */ + +.mw-strobe_light { + position: fixed; + width: 100%; + height: 100%; + top: 0; + left: 0; + z-index: 100000; + background-color: rgba(250, 250, 250, 0.8); + display: block; +} + +.mw-harlem_shake_me { + transition: all 0.8s ease-in-out; + -moz-transition: all 0.8s ease-in-out; + -webkit-transition: all 0.8s ease-in-out; + -o-transition: all 0.8s ease-in-out; + -ms-transition: all 0.8s ease-in-out; + + animation: spin 1s infinite linear; + -moz-animation: spin 1s infinite linear; + -webkit-animation: spin 1s infinite linear; + -o-animation: spin 1s infinite linear; + -ms-animation: spin 1s infinite linear; +} + +.mw-harlem_shake_slow { + transition: all 3.2s ease-in-out; + -moz-transition: all 3.2s ease-in-out; + -webkit-transition: all 3.2s ease-in-out; + -o-transition: all 3.2s ease-in-out; + -ms-transition: all 3.2s ease-in-out; + + animation: spin 4s infinite linear; + -moz-animation: spin 4s infinite linear; + -webkit-animation: spin 4s infinite linear; + -o-animation: spin 4s infinite linear; + -ms-animation: spin 4s infinite linear; +} + +/* + Animate.css - http://daneden.me/animate + Licensed under the ☺ license (http://licence.visualidiot.com/) + But we have it modified for our use. + */ +body { + -webkit-backface-visibility: hidden; +} + +.mw-harlem_shake_me { + -webkit-animation-duration: 0.4s; + -moz-animation-duration: 0.4s; + -o-animation-duration: 0.4s; + animation-duration: 0.4s; + -webkit-animation-fill-mode: both; + -moz-animation-fill-mode: both; + -o-animation-fill-mode: both; + animation-fill-mode: both; +} + +.mw-harlem_shake_slow { + -webkit-animation-duration: 1.6s; + -moz-animation-duration: 1.6s; + -o-animation-duration: 1.6s; + animation-duration: 1.6s; + -webkit-animation-fill-mode: both; + -moz-animation-fill-mode: both; + -o-animation-fill-mode: both; + animation-fill-mode: both; +} + +.flash, +.mw-strobe_light { + -webkit-animation-name: flash; + -moz-animation-name: flash; + -o-animation-name: flash; + animation-name: flash; +} + +@-webkit-keyframes shake { + 0%, + 100% { + -webkit-transform: translateX(0); + } + 10%, + 30%, + 50%, + 70%, + 90% { + -webkit-transform: translateX(-10px); + } + 20%, + 40%, + 60%, + 80% { + -webkit-transform: translateX(10px); + } +} + +@-moz-keyframes shake { + 0%, + 100% { + -moz-transform: translateX(0); + } + 10%, + 30%, + 50%, + 70%, + 90% { + -moz-transform: translateX(-10px); + } + 20%, + 40%, + 60%, + 80% { + -moz-transform: translateX(10px); + } +} + +@-o-keyframes shake { + 0%, + 100% { + -o-transform: translateX(0); + } + 10%, + 30%, + 50%, + 70%, + 90% { + -o-transform: translateX(-10px); + } + 20%, + 40%, + 60%, + 80% { + -o-transform: translateX(10px); + } +} + +@keyframes shake { + 0%, + 100% { + transform: translateX(0); + } + 10%, + 30%, + 50%, + 70%, + 90% { + transform: translateX(-10px); + } + 20%, + 40%, + 60%, + 80% { + transform: translateX(10px); + } +} + +.shake, +.im_baked { + -webkit-animation-name: shake; + -moz-animation-name: shake; + -o-animation-name: shake; + animation-name: shake; +} + +.swing, +.im_drunk { + -webkit-transform-origin: top center; + -moz-transform-origin: top center; + -o-transform-origin: top center; + transform-origin: top center; + -webkit-animation-name: swing; + -moz-animation-name: swing; + -o-animation-name: swing; + animation-name: swing; +} + +@-webkit-keyframes wobble { + 0% { + -webkit-transform: translateX(0%); + } + 15% { + -webkit-transform: translateX(-15%) rotate(-4deg); + } + 30% { + -webkit-transform: translateX(12%) rotate(3deg); + } + 45% { + -webkit-transform: translateX(-9%) rotate(-2deg); + } + 60% { + -webkit-transform: translateX(6%) rotate(2deg); + } + 75% { + -webkit-transform: translateX(-3%) rotate(-1deg); + } + 100% { + -webkit-transform: translateX(0%); + } +} + +@-moz-keyframes wobble { + 0% { + -moz-transform: translateX(0%); + } + 15% { + -moz-transform: translateX(-15%) rotate(-5deg); + } + 30% { + -moz-transform: translateX(12%) rotate(3deg); + } + 45% { + -moz-transform: translateX(-9%) rotate(-3deg); + } + 60% { + -moz-transform: translateX(6%) rotate(2deg); + } + 75% { + -moz-transform: translateX(-3%) rotate(-1deg); + } + 100% { + -moz-transform: translateX(0%); + } +} + +@-o-keyframes wobble { + 0% { + -o-transform: translateX(0%); + } + 15% { + -o-transform: translateX(-15%) rotate(-5deg); + } + 30% { + -o-transform: translateX(12%) rotate(3deg); + } + 45% { + -o-transform: translateX(-9%) rotate(-3deg); + } + 60% { + -o-transform: translateX(6%) rotate(2deg); + } + 75% { + -o-transform: translateX(-3%) rotate(-1deg); + } + 100% { + -o-transform: translateX(0%); + } +} + +@keyframes wobble { + 0% { + transform: translateX(0%); + } + ` 15% { + transform: translateX(-15%) rotate(-5deg); + } + 30% { + transform: translateX(12%) rotate(3deg); + } + 45% { + transform: translateX(-9%) rotate(-3deg); + } + 60% { + transform: translateX(6%) rotate(2deg); + } + 75% { + transform: translateX(-3%) rotate(-1deg); + } + 100% { + transform: translateX(0%); + } +} + +.wobble, +.im_first { + -webkit-animation-name: wobble; + -moz-animation-name: wobble; + -o-animation-name: wobble; + animation-name: wobble; +} + +@-webkit-keyframes pulse { + 0% { + -webkit-transform: scale(1); + } + 50% { + -webkit-transform: scale(1.1); + } + 100% { + -webkit-transform: scale(1); + } +} +@-moz-keyframes pulse { + 0% { + -moz-transform: scale(1); + } + 50% { + -moz-transform: scale(1.1); + } + 100% { + -moz-transform: scale(1); + } +} +@-o-keyframes pulse { + 0% { + -o-transform: scale(1); + } + 50% { + -o-transform: scale(1.1); + } + 100% { + -o-transform: scale(1); + } +} +@keyframes pulse { + 0% { + transform: scale(1); + } + 50% { + transform: scale(1.1); + } + 100% { + transform: scale(1); + } +} + +.pulse, +.im_blown { + -webkit-animation-name: pulse; + -moz-animation-name: pulse; + -o-animation-name: pulse; + animation-name: pulse; +} + +@-webkit-keyframes bounceIn { + 0% { + opacity: 0; + -webkit-transform: scale(0.3); + } + + 50% { + opacity: 1; + -webkit-transform: scale(1.05); + } + + 70% { + -webkit-transform: scale(0.9); + } + + 100% { + -webkit-transform: scale(1); + } +} + +@-moz-keyframes bounceIn { + 0% { + opacity: 0; + -moz-transform: scale(0.3); + } + + 50% { + opacity: 1; + -moz-transform: scale(1.05); + } + + 70% { + -moz-transform: scale(0.9); + } + + 100% { + -moz-transform: scale(1); + } +} + +@-o-keyframes bounceIn { + 0% { + opacity: 0; + -o-transform: scale(0.3); + } + + 50% { + opacity: 1; + -o-transform: scale(1.05); + } + + 70% { + -o-transform: scale(0.9); + } + + 100% { + -o-transform: scale(1); + } +} + +@keyframes bounceIn { + 0% { + opacity: 0; + transform: scale(0.3); + } + + 50% { + opacity: 1; + transform: scale(1.05); + } + + 70% { + transform: scale(0.9); + } + + 100% { + transform: scale(1); + } +} + +.bounceIn, +.im_trippin { + -webkit-animation-name: bounceIn; + -moz-animation-name: bounceIn; + -o-animation-name: bounceIn; + animation-name: bounceIn; +} diff --git a/static/css/sidebar.css b/static/css/sidebar.css index 35e7a853..fc795fd4 100644 --- a/static/css/sidebar.css +++ b/static/css/sidebar.css @@ -1,8 +1,8 @@ - #sidebar { - width: 250px; + width: 250px; } +#site-spells ul, #navigation-area ul, #archives-area ul, #categories-area ul, @@ -10,7 +10,8 @@ #announcements ul, #user-area ul, #fun-stuff ul, -#activity ul, +#activity ul, +#site-spells li, #navigation-area li, #archives-area li, #categories-area li, @@ -19,15 +20,16 @@ #user-area li, #fun-stuff li, #activity li { - margin: 0px; - padding: 0px; + margin: 0px; + padding: 0px; } #register_form ul { - padding: 0px; - list-style-type: none; + padding: 0px; + list-style-type: none; } +#site-spells li, #navigation-area li, #archives-area li, #categories-area li, @@ -36,24 +38,26 @@ #user-area li, #fun-stuff li, #activity li { - display: block; - list-style-type: none; + display: block; + list-style-type: none; } +#site-spells img, #navigation-area img, #archives-area img, #categories-area img, #user-area img, #fun-stuff img { - width: 24px; - vertical-align: middle; + width: 24px; + vertical-align: middle; } #admin-area img { - width: 14px; - vertical-align: middle; + width: 14px; + vertical-align: middle; } +#site-spells span, #navigation-area span, #archives-area span, #categories-area span, @@ -61,65 +65,87 @@ #announcements span, #user-area span, #fun-stuff span { - margin-right: 10px; + margin-right: 10px; } #user-area { - background: url('../images/backgrounds/user-area.png') no-repeat; - background-size: 250px 150px; - width: 250px; - height: 150px; + background: url("../images/backgrounds/user-area.png") no-repeat; + background-size: 250px 150px; + width: 250px; + height: 150px; } #user-area > h2 { - margin: 0; - padding: 0; - border: none; - position: relative; - left: 100px; - top: 15px; + margin: 0; + padding: 0; + border: none; + position: relative; + left: 100px; + top: 15px; } #user-area > ul { - position: absolute; - left: 110px; - top: 58px; + position: absolute; + left: 110px; + top: 58px; } +#site-spells h2, #navigation-area h2, #archives-area h2, #categories-area h2, #admin-area h2, #fun-stuff h2, #online-users h2 { - background: #311b4f; - padding: 10px 15px; - text-align: left; - margin: 0; - border-top-left-radius: 8px; - border-top-right-radius: 8px; - border-bottom: none; - font-size: 13px; - text-transform: capitalize; + background: #311b4f; + padding: 10px 15px; + text-align: left; + margin: 0; + border-top-left-radius: 8px; + border-top-right-radius: 8px; + border-bottom: none; + font-size: 13px; + text-transform: capitalize; } +#site-spells ul, #navigation-area ul, #archives-area ul, #categories-area ul, #admin-area ul, #fun-stuff ul, #online-users div { - background: #f4f1e90f; - padding: 10px; - border-bottom-left-radius: 8px; - border-bottom-right-radius: 8px; + background: #f4f1e90f; + padding: 10px; + border-bottom-left-radius: 8px; + border-bottom-right-radius: 8px; } #online-users div > ul { - padding: 0 0 0 20px; + padding: 0 0 0 20px; } #online-users p { - margin: 0; + margin: 0; +} + +#black { + height: 100vh; + width: 100vw; + position: relative; + background: #00000069; + z-index: 3; } +#dvd { + position: absolute; + left: 0px; + top: 0px; + height: 100px; + width: 200px; + mask: url("https://upload.wikimedia.org/wikipedia/commons/9/9b/DVD_logo.svg"); + -webkit-mask: url("https://upload.wikimedia.org/wikipedia/commons/9/9b/DVD_logo.svg"); + background-repeat: no-repeat; + background-size: 150px; + background-position: center; +} diff --git a/static/css/styles.css b/static/css/styles.css index d208597d..326148c5 100644 --- a/static/css/styles.css +++ b/static/css/styles.css @@ -499,12 +499,6 @@ blockquote { margin-bottom: 10px; } -#categories-area>ul, -#archives-area>ul { - position: relative; - z-index: 1; -} - #anonymous-profile-info > div, #anonymous-profile-info > #creds > div { margin: 10px 0; } |