Reply to thread

Message: <blockquote data-quote="Lasanthajn" data-source="post: 24302896" data-attributes="member: 61219">[CODE]/* preloader */#preloader {  position: fixed;  z-index: 500;  top: 0;  right: 0;  bottom: 0;  left: 0;  height: 100%;  background: rgba(0, 178, 250, 1);  background-size: cover;}#status {  position: fixed;  top: 50%;  left: 50%;  width: 50px;  height: 30px;  margin: -25px 0 0 -15px;}.spinner {  font-size: 10px;  width: 50px;  height: 30px;  margin: 0 auto;  text-align: center;}.spinner > div {  display: inline-block;  width: 6px;  height: 100%;  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;  animation: stretchdelay 1.2s infinite ease-in-out;  background-color: #fff;}.spinner .rect2 {  -webkit-animation-delay: -1.1s;  animation-delay: -1.1s;}.spinner .rect3 {  -webkit-animation-delay: -1.0s;  animation-delay: -1.0s;}.spinner .rect4 {  -webkit-animation-delay: -.9s;  animation-delay: -.9s;}.spinner .rect5 {  -webkit-animation-delay: -.8s;  animation-delay: -.8s;}@-webkit-keyframes stretchdelay {  0%,  40%,  100% {    -webkit-transform: scaleY(.4);  }  20% {    -webkit-transform: scaleY(1.0);  }}@keyframes stretchdelay {  0%,  40%,  100% {    -webkit-transform: scaleY(.4);    transform: scaleY(.4);  }  20% {    -webkit-transform: scaleY(1.0);    transform: scaleY(1.0);  }}/* ------------------------------------- */body,html {  font-family: 'Roboto', sans-serif;  font-size: 15px;  position: relative;  z-index: 0;  width: 100%;  height: 100%;  -webkit-user-select: none;  -moz-user-select: none;  -ms-user-select: none;  user-select: none;  background-color: rgba(215, 243, 246, 1);  text-shadow: 1px 1px 1px rgba(0, 0, 0, .004);  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;  -khtml-user-select: none;}.audio_player {  position: relative;  z-index: 5;  width: 100%;  padding: 18px 0;}.player_body {  position: relative;  z-index: 10;  right: 0;  bottom: 0;  left: 0;  overflow: hidden;  width: 275px;  height: 490px;  margin: auto;  background: rgba(255, 255, 255, 1);  box-shadow: 0 5px 10px 2px rgba(0, 0, 0, .15), 0 15px 35px 0 rgba(0, 105, 92, .5);}.waves {  position: relative;  z-index: 20;  top: -220px;  -webkit-transition: top .2s ease-in-out;  transition: top .2s ease-in-out;}.player_content {  position: relative;  z-index: 50;  width: 100%;  height: 490px;}.player_header {  position: relative;  z-index: 55;  padding: 18px 0;  color: rgba(0, 178, 250, 1);  background-color: rgba(255, 255, 255, 1);}.header_name {  font-size: 13px;  font-weight: 500;  text-transform: uppercase;}/* Hamburger menu */.hamburger-menu,.playlist_btn,.nav_menu {  -webkit-transition: all .2s ease-in-out;  transition: all .2s ease-in-out;}.hamburger-menu {  position: absolute;  z-index: 70;  top: 18px;  right: 16px;  width: 15px;  height: 15px;  cursor: pointer;}.nav_menu {  position: absolute;  z-index: 70;  right: -235px;  width: 235px;  height: 100%;  background-color: rgba(255, 255, 255, 1);}.nav_list {  position: relative;}.nav_item {  padding: 15px 20px;  border-bottom: 1px solid rgba(0, 0, 0, .1);}.nav_item p {  font-size: 14px;  font-weight: 300;  margin: -1px 0;  color: rgba(0, 0, 0, .9);}.nav_item a {  font-size: 22px;  font-weight: 300;  color: rgba(0, 0, 0, 1);}.player_fade {  -webkit-transition: background .2s ease-in-out;  transition: background .2s ease-in-out;  background: rgba(0, 0, 0, 0);}.bar,.bar:after,.bar:before {  width: 15px;  height: 3px;}.bar {  position: relative;  -webkit-transition: all 0ms 300ms;  transition: all 0ms 300ms;  -webkit-transform: translateY(6px);  transform: translateY(6px);  background: rgba(0, 178, 250, 1);}.bar.active {  background: rgba(0, 178, 250, 0);}.bar:before {  position: absolute;  bottom: 6px;  left: 0;  content: '';  -webkit-transition: bottom 300ms 300ms cubic-bezier(.23, 1, .32, 1), -webkit-transform 300ms cubic-bezier(.23, 1, .32, 1);  transition: bottom 300ms 300ms cubic-bezier(.23, 1, .32, 1), -webkit-transform 300ms cubic-bezier(.23, 1, .32, 1);  transition: bottom 300ms 300ms cubic-bezier(.23, 1, .32, 1), transform 300ms cubic-bezier(.23, 1, .32, 1);  transition: bottom 300ms 300ms cubic-bezier(.23, 1, .32, 1), transform 300ms cubic-bezier(.23, 1, .32, 1), -webkit-transform 300ms cubic-bezier(.23, 1, .32, 1);  background: rgba(0, 178, 250, 1);}.bar:after {  position: absolute;  top: 6px;  left: 0;  content: '';  -webkit-transition: top 300ms 300ms cubic-bezier(.23, 1, .32, 1), -webkit-transform 300ms cubic-bezier(.23, 1, .32, 1);  transition: top 300ms 300ms cubic-bezier(.23, 1, .32, 1), -webkit-transform 300ms cubic-bezier(.23, 1, .32, 1);  transition: top 300ms 300ms cubic-bezier(.23, 1, .32, 1), transform 300ms cubic-bezier(.23, 1, .32, 1);  transition: top 300ms 300ms cubic-bezier(.23, 1, .32, 1), transform 300ms cubic-bezier(.23, 1, .32, 1), -webkit-transform 300ms cubic-bezier(.23, 1, .32, 1);  background: rgba(0, 178, 250, 1);}.bar.active:after {  top: 0;  -webkit-transition: top 300ms cubic-bezier(.23, 1, .32, 1), -webkit-transform 300ms 300ms cubic-bezier(.23, 1, .32, 1);  transition: top 300ms cubic-bezier(.23, 1, .32, 1), -webkit-transform 300ms 300ms cubic-bezier(.23, 1, .32, 1);  transition: top 300ms cubic-bezier(.23, 1, .32, 1), transform 300ms 300ms cubic-bezier(.23, 1, .32, 1);  transition: top 300ms cubic-bezier(.23, 1, .32, 1), transform 300ms 300ms cubic-bezier(.23, 1, .32, 1), -webkit-transform 300ms 300ms cubic-bezier(.23, 1, .32, 1);  -webkit-transform: rotate(45deg);  transform: rotate(45deg);}.bar.active:before {  bottom: 0;  -webkit-transition: bottom 300ms cubic-bezier(.23, 1, .32, 1), -webkit-transform 300ms 300ms cubic-bezier(.23, 1, .32, 1);  transition: bottom 300ms cubic-bezier(.23, 1, .32, 1), -webkit-transform 300ms 300ms cubic-bezier(.23, 1, .32, 1);  transition: bottom 300ms cubic-bezier(.23, 1, .32, 1), transform 300ms 300ms cubic-bezier(.23, 1, .32, 1);  transition: bottom 300ms cubic-bezier(.23, 1, .32, 1), transform 300ms 300ms cubic-bezier(.23, 1, .32, 1), -webkit-transform 300ms 300ms cubic-bezier(.23, 1, .32, 1);  -webkit-transform: rotate(-45deg);  transform: rotate(-45deg);  ;}/* ------------------------------------- */.player_playlist {  position: absolute;  z-index: 60;  top: 490px;  overflow: scroll;  overflow-x: hidden;  width: 275px;  height: 305px;  -webkit-transition: top .2s ease-in-out;  transition: top .2s ease-in-out;  background-color: rgba(255, 255, 255, 1);}.player_playlist::-webkit-scrollbar {  width: 5px !important;}.player_playlist::-webkit-scrollbar-track {  background-color: rgba(0, 0, 0, .1) !important;}.player_playlist::-webkit-scrollbar-thumb {  background-color: rgba(0, 0, 0, .3) !important;}.player_playlist_list {  position: relative;  margin-bottom: 0;}.player_playlist_item {  width: 100%;  height: 64px;  padding: 4px 18px;  cursor: pointer;  border-bottom: 1px solid rgba(0, 0, 0, .1);}.player_playlist_item:hover {  background: #e6e6e6;}.player_playlist_item:active {  background: #d2d2d2;}.song_block {  display: inline-block;  max-width: 200px;}.song_block .title_block {  font-size: 14px;  margin-top: 8px;  margin-bottom: 3px;}.song_block .artist_block {  font-size: 11px;}.song_time {  font-size: 11px;  position: relative;  top: 20px;  float: right;  max-width: 34px;  color: rgba(144, 144, 144, 1);}.glyphicon-menu-left {  -webkit-transition: all .2s ease-in-out;  transition: all .2s ease-in-out;}.album_wrap {  position: relative;  z-index: 40;  top: 0;  padding: 18px 0 30px 0;  -webkit-transition: top .3s ease-in-out;  transition: top .3s ease-in-out;}.default_cover {  width: 150px;  height: 150px;  margin-right: auto;  margin-left: auto;  background: url(https://s30.postimg.org/shr4aygpt/default_album_art_blue2.jpg);  background-repeat: no-repeat;  background-size: cover;  box-shadow: 0 10px 20px -15px rgba(0, 0, 0, .35), 0 22px 40px -15px rgba(0, 0, 0, .20);}.cover {  width: 150px;  height: 150px;  margin-right: auto;  margin-left: auto;  -webkit-transition: background-image .2s ease-in-out;  transition: background-image .2s ease-in-out;  background-image: url('');  background-repeat: no-repeat;  background-position: 50% 50%;  background-size: cover;}.song_playing {  font-size: 14.5px;  line-height: 135%;  position: relative;  top: 0;  max-width: 245px;  height: 113px;  margin-right: auto;  margin-left: auto;  padding: 6px 0 69px 0;  -webkit-transition: top .5s ease-in-out;  transition: top .5s ease-in-out;}.title_block {  font-weight: 500;}.artist_block {  font-size: 10.5px;  color: rgba(144, 144, 144, 1);}.title_block,.artist_block {  overflow: hidden;  white-space: nowrap;  text-overflow: ellipsis;}#title,#artist {  max-width: 225px;}.timeline_wrap {  position: relative;  position: relative;  top: 0;  margin-top: 5px;  -webkit-transition: top .2s ease-in-out;  transition: top .2s ease-in-out;}.line_played {  position: absolute;  top: 3px;  height: 3px;  background-color: rgba(255, 255, 255, 1);}.line_preload {  position: absolute;  top: 4px;  height: 2px;  background-color: rgb(0, 129, 181);}.timeline {  width: 100%;  height: 10px;  cursor: pointer;}.full_line {  position: absolute;  top: 4px;  width: 100%;  height: 2px;  -webkit-transition: background-color .2s ease-in-out;  transition: background-color .2s ease-in-out;  background-color: rgba(255, 255, 255, .4);}.timeline_pointer {  position: absolute;  top: 0;  right: -1px;  width: 0;  height: 0;  -webkit-transition: all .1s ease-in-out;  transition: all .1s ease-in-out;  border-radius: 50%;  background: #fff;}.timeline:hover .timeline_pointer {  top: -3px;  right: -5px;  width: 10px;  height: 10px;}.time_of_song {  font-size: 9px;  padding-top: 7px;  -webkit-transition: color .2s ease-in-out;  transition: color .2s ease-in-out;  color: rgba(255, 255, 255, 1);}.player_btns {  position: relative;  z-index: 1;  top: -5px;  left: 14px;  width: 270px;  padding-top: 33px;  -webkit-transition: all .2s ease-in-out;  transition: all .2s ease-in-out;  color: rgba(255, 255, 255, 1);}.play_btn {  position: absolute;  top: -16px;  left: 8px;  width: 51px;  height: 51px;  color: rgba(0, 178, 250, 1);  border-radius: 50%;  background-color: rgba(255, 255, 255, 1);  box-shadow: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23);}#play_circle {  top: 17px;  left: 1px;}.playlist_btn:hover {  cursor: pointer;}.random_btn:hover,.prev_btn:hover,.next_btn:hover,.repeat_btn:hover {  cursor: pointer;  /*   color: rgba(0, 47, 62, 1); */}.play_btn:hover {  cursor: pointer;  /*   background-color: rgba(0, 47, 62, 1); */}/* .player .pl-list__eq {  display: none;}.player .pl-list--current {  color: #fff;  background: #1ec279;}.player .pl-list--current .pl-list__eq {  display: block;}@keyframes eq {  0% {    height: 3px;  }  50% {    height: 15px;  }  100% {    height: 3px;  }}.player .eq {  display: flex;  width: 20px;  height: 15px;  margin: 0 auto;  justify-content: space-between;  align-items: flex-end;}.player .eq__bar {  width: 4px;  background: #fff;  filter: drop-shadow(0 0 5px #fff);}.player .eq__bar:nth-child(2) {  animation: eq 1.2s ease-in-out infinite 0s;}.player .eq__bar:nth-child(4) {  animation: eq 1.2s ease-in-out infinite .2s;}.player .eq__bar:nth-child(1) {  animation: eq 1.2s ease-in-out infinite .4s;}.player .eq__bar:nth-child(3) {  animation: eq 1.2s ease-in-out infinite .6s;} */.waves.active {  top: -430px;}.hamburger-menu.active {  margin-right: 232px;}.playlist_btn.active {  margin-left: -232px;}.nav_menu.active {  right: 0;}.player_fade.active {  position: absolute;  z-index: 65;  width: 275px;  height: 490px;  background: rgba(0, 0, 0, .5);}.player_playlist_item.active {  border-bottom-color: #7d7d7d;  background: #7d7d7d;}.player_playlist_item.active * {  color: #fff;}.glyphicon-menu-left.active {  -webkit-transform: rotate(-90deg);  transform: rotate(-90deg);}.player_playlist.active {  top: 185px;}.album_wrap.active {  top: -300px;  -webkit-transition: top .2s ease-in-out;  transition: top .2s ease-in-out;}.song_playing.active {  top: -300px;  -webkit-transition: top .2s ease-in-out;  transition: top .2s ease-in-out;}.line_preload.active {  background-color: rgba(0, 0, 0, .15);}.timeline_pointer.active {  background: rgba(0, 178, 250, 1);}.timeline_wrap.active,.player_btns.active {  top: -305px;}.player_btns .btn_shadow {  width: 20px;  margin-left: -3px;  -webkit-transition: text-shadow .2s ease-in-out;  transition: text-shadow .2s ease-in-out;}.player_btns.active .btn_shadow {  /*   color: rgba(0, 0, 0, 1); */  text-shadow: 0 2px 7px rgba(0, 0, 0, .19), 0 4px 4px rgba(0, 0, 0, .23);}.line_played.active {  top: 3px;  background-color: rgba(0, 178, 250, 1);}.full_line.active {  background-color: rgba(0, 178, 250, .4);}.time_of_song.active {  color: rgba(0, 178, 250, 1);}.random_btn.active,.repeat_btn.active,.player_btns.active .random_btn.btn_shadow.active,.player_btns.active .repeat_btn.btn_shadow.active {  color: rgb(222, 255, 180);  text-shadow: 0 2px 1px rgba(0, 0, 0, .49);}/* .touch-screen .menu_btn:hover,.touch-screen .random_btn:hover,.touch-screen .prev_btn:hover,.touch-screen .next_btn:hover,.touch-screen .repeat_btn:hover {  color: #fff;}.touch-screen .play_btn:hover {  background-color: #fff;} */[/CODE]</blockquote>

Verification: Hath warak paha keeyada? (hatha wadikireema paha)

Top Bottom