User:Sukiina/Sandbox2

Reference: http://akiinus.wikia.com/wiki/User:Sukiina/Sandbox

CSS code with White Monokuma Eye /* .OGG Player - Test1 */ .ogg_custom div { display: inline; } .ogg_custom, .ogg_custom:hover { opacity: 0.6; -webkit-transition: all .9s ease; -moz-transition: all .9s ease; -o-transition: all .9s ease; } .ogg_custom:hover { opacity: 1; } .ogg_custom button>img, .ogg_custom .image img { display: none; } .ogg_custom button { border: none !important; } .ogg-player-options+a:after { content: "More..."; } .ogg_custom .image, .ogg_custom .ogg-player-options+a:after { content:""; height: 30px; vertical-align: bottom; background-size: 100%; display: inline-block; } .ogg_custom audio { border-radius:4px } .ogg_custom>.ogg_player>div>button:after { content: url("http://vignette3.wikia.nocookie.net/akiinus/images/c/c9/Small_monokuma_eye_%28white%29.png") !important; } .ogg_custom .ogg-player-options { margin-left: 3px; } div.ogg_player .ogg-player-options { background: white !important; } .ogg_player>div+div:hover .ogg-player-options { display: inline-block !important; position: absolute; z-index: 2; } .ogg_custom .ogg_player button, .ogg_custom audio { background-image: gradient(linear, 0% 0%, 0% 100%, color-stop(10%, #E061BA), color-stop(90%, #70CBE2)); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(10%, #E061BA), color-stop(90%, #70CBE2)); background-image: -moz-linear-gradient(top, #E061BA 10%, #70CBE2 90%); background-image: -o-linear-gradient(top, #E061BA 10%, #70CBE2 90%); background-image: -ms-linear-gradient(top, #E061BA 10%, #70CBE2 90%); } .ogg_custom audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel { background-image: gradient(linear, 0% 0%, 0% 100%, color-stop(10%, #E061BA), color-stop(90%, #70CBE2)); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(10%, #E061BA), color-stop(90%, #70CBE2)); background-image: -moz-linear-gradient(top, #E061BA 10%, #70CBE2 90%); background-image: -o-linear-gradient(top, #E061BA 10%, #70CBE2 90%); background-image: -ms-linear-gradient(top, #E061BA 10%, #70CBE2 90%); } .ogg_custom .image, .ogg_custom .ogg-player-options+a:after { background-image: url("http://vignette4.wikia.nocookie.net/akiinus/images/3/37/Crosshair2_ogg.png"); width: 50px; height: 39px; } .ogg_custom .ogg-player-options { border: 1px solid; border-color: #E061BA #70CBE2 #70CBE2 #E061BA; }

CSS code with Red Monokuma Eye /* .OGG Player - Test 2 */ .ogg_custom2 div { display: inline; } .ogg_custom2, .ogg_custom2:hover { opacity: 0.6; -webkit-transition: all .9s ease; -moz-transition: all .9s ease; -o-transition: all .9s ease; } .ogg_custom2:hover { opacity: 1; } .ogg_custom2 button>img, .ogg_custom2 .image img { display: none; } .ogg_custom2 button { border: none !important; } .ogg-player-options+a:after { content: "More..."; } .ogg_custom2 .image, .ogg_custom2 .ogg-player-options+a:after { content:""; height: 30px; vertical-align: bottom; background-size: 100%; display: inline-block; } .ogg_custom2 audio { border-radius:4px } .ogg_custom2>.ogg_player>div>button:after { content: url("http://vignette1.wikia.nocookie.net/akiinus/images/7/75/Small_monokuma_eye_%28red%29.png") !important; } .ogg_custom2 .ogg-player-options { margin-left: 3px; } div.ogg_player .ogg-player-options { background: white !important; } .ogg_player>div+div:hover .ogg-player-options { display: inline-block !important; position: absolute; z-index: 2; } .ogg_custom2 .ogg_player button, .ogg_custom2 audio { background-image: gradient(linear, 0% 0%, 0% 100%, color-stop(10%, #E061BA), color-stop(90%, #70CBE2)); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(10%, #E061BA), color-stop(90%, #70CBE2)); background-image: -moz-linear-gradient(top, #E061BA 10%, #70CBE2 90%); background-image: -o-linear-gradient(top, #E061BA 10%, #70CBE2 90%); background-image: -ms-linear-gradient(top, #E061BA 10%, #70CBE2 90%); } .ogg_custom2 audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel { background-image: gradient(linear, 0% 0%, 0% 100%, color-stop(10%, #E061BA), color-stop(90%, #70CBE2)); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(10%, #E061BA), color-stop(90%, #70CBE2)); background-image: -moz-linear-gradient(top, #E061BA 10%, #70CBE2 90%); background-image: -o-linear-gradient(top, #E061BA 10%, #70CBE2 90%); background-image: -ms-linear-gradient(top, #E061BA 10%, #70CBE2 90%); } .ogg_custom2 .image, .ogg_custom2 .ogg-player-options+a:after { background-image: url("http://vignette4.wikia.nocookie.net/akiinus/images/3/37/Crosshair2_ogg.png"); width: 50px; height: 39px; } .ogg_custom .ogg-player-options { border: 1px solid; border-color: #E061BA #70CBE2 #70CBE2 #E061BA; }

Same as above, but with b&w colouration

/* .OGG Player - Test 3 */ .ogg_custom3 div { display: inline; } .ogg_custom3, .ogg_custom3:hover { opacity: 0.6; -webkit-transition: all .9s ease; -moz-transition: all .9s ease; -o-transition: all .9s ease; } .ogg_custom3:hover { opacity: 1; } .ogg_custom3 button>img, .ogg_custom3 .image img { display: none; } .ogg_custom3 button { border: none !important; } .ogg-player-options+a:after { content: "More..."; } .ogg_custom3 .image, .ogg_custom3 .ogg-player-options+a:after { content:""; height: 30px; vertical-align: bottom; background-size: 100%; display: inline-block; } .ogg_custom3 audio { border-radius:4px } .ogg_custom3>.ogg_player>div>button:after { content: url("http://vignette3.wikia.nocookie.net/akiinus/images/c/c9/Small_monokuma_eye_%28white%29.png") !important; } .ogg_custom3 .ogg-player-options { margin-left: 3px; } div.ogg_player .ogg-player-options { background: white !important; } .ogg_player>div+div:hover .ogg-player-options { display: inline-block !important; position: absolute; z-index: 2; } .ogg_custom3 .ogg_player button, .ogg_custom3 audio { background-image: gradient(linear, 0% 0%, 0% 100%, color-stop(10%, #000000), color-stop(90%, #E1E1E1)); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(10%, #000000), color-stop(90%, #E1E1E1)); background-image: -moz-linear-gradient(top, #000000 10%, #E1E1E1 90%); background-image: -o-linear-gradient(top, #000000 10%, #E1E1E1 90%); background-image: -ms-linear-gradient(top, #000000 10%, #E1E1E1 90%); } .ogg_custom3 audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel { background-image: gradient(linear, 0% 0%, 0% 100%, color-stop(10%, #000000), color-stop(90%, #E1E1E1)); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(10%, #000000), color-stop(90%, #E1E1E1)); background-image: -moz-linear-gradient(top, #000000 10%, #E1E1E1 90%); background-image: -o-linear-gradient(top, #000000 10%, #E1E1E1 90%); background-image: -ms-linear-gradient(top, #000000 10%, #E1E1E1 90%); } .ogg_custom3 .image, .ogg_custom3 .ogg-player-options+a:after { background-image: url("http://vignette4.wikia.nocookie.net/akiinus/images/3/37/Crosshair2_ogg.png"); width: 50px; height: 39px; } .ogg_custom3 .ogg-player-options { border: 1px solid; border-color: #000000 #E1E1E1 #E1E1E1 #000000; }