* { margin: 0px; padding: 0px; box-sizing: border-box; user-select: none; } body, html { position: relative; height: 100%; width: 100%; font-size: 0.7292vw; overflow: hidden; color: white; } .form { position: relative; display: flex; align-items: center; justify-content: center; width: 100vw; background-image: url('../images/bg.png'); background-size: 100% 100%; height: 100vh; } span, div:not(.form), img, svg, path, input { transition: all 0.3s ease; } .header_flex { padding: 0.625vw 1.25vw; font-size: 0.9375vw; border-radius: 0.20833vw; background: rgba(255, 255, 255, 0.05); } .header_flex span:first-child { font-family: 'Thin'; color: rgba(255, 255, 255, 0.50); } .header_flex span:last-child { font-family: 'Regular'; color: white; margin-left: 0.625vw; text-shadow: 0px 0px 1.66667vw rgba(255, 255, 255, 0.50); } .name_wrap span:first-child { font-size: 5vw; font-family: 'Bold'; text-shadow: 0px 0px 4.13542vw rgba(255, 255, 255, 0.35); } .name_wrap span:last-child { font-size: 6.66667vw; font-family: 'Shadows'; transform: skew(-15deg); margin-top: -5.89167vw; color: #0361fb ; text-shadow: 0vw 0vw 4.07292vw rgba(3, 97, 251, 0.502); } .description { text-align: center; font-size: 0.83333vw; font-family: 'GRegular'; color: rgba(255, 255, 255, 0.75); max-width: 30.98958vw; margin-top: 0.83333vw; } .music_cont { padding: 0.83333vw; width: 31.04167vw; border-radius: 0.41667vw; background: radial-gradient(40.28% 67.44% at 32.47% 116.41%, rgba(3, 97, 251, 0.25) 0%, rgba(3, 97, 251, 0.00) 100%), radial-gradient(62.23% 121.24% at 69.21% -50%, rgba(3, 97, 251, 0.25) 0%, rgba(3, 97, 251, 0.00) 100%), rgba(255, 255, 255, 0.05); } .head_description { width: 100%; padding: 0.83333vw; border-radius: 0.20833vw; background: rgba(0, 0, 0, 0.35); } .min_box { width: 1.66667vw; height: 1.66667vw; background-image: url('../images/boxheader.png'); background-size: 100% 100%; flex-shrink: 0; box-shadow: 0px 0.625vw 1.66667vw rgba(96, 107, 212, 0.502); } .min_box svg { width: 1.19792vw; height: 1.19792vw; opacity: 0.75; } .row_head span:first-child { font-size: 0.83333vw; font-family: 'Regular'; text-shadow: 0px 0px 1.25vw rgba(255, 255, 255, 0.35); } .row_head span:last-child { font-size: 0.83333vw; font-family: 'Regular'; color: rgba(255, 255, 255, 0.50); margin-top: -0.05208vw; } .row_head { gap: 0.15625vw; } .head_description { gap: 0.625vw; } .music_wrap { width: 100%; padding: 0.83333vw; border-radius: 0.20833vw; background: rgba(0, 0, 0, 0.35); } .wrap_name_music { gap: 0.52083vw; } .wrap_name_music img { width: 1.71875vw; height: 1.71875vw; border-radius: 0.15625vw; } .row_name_music span:first-child { font-size: 0.72917vw; font-family: 'Regular'; } .row_name_music span:last-child { font-size: 0.72917vw; font-family: 'Regular'; color: rgba(255, 255, 255, 0.50); } .box_skip, .box_play { width: 1.77083vw; cursor: pointer; height: 1.77083vw; border-radius: 0.15625vw; } .box_skip svg, .box_play svg { width: 0.83333vw; height: 0.83333vw; } .box_skip { background: rgba(255, 255, 255, 0.05); } .box_play { background: #0361fb ; box-shadow: 0px 0.41667vw 1.71875vw rgba(3, 97, 251, 0.50); } .box_skip:hover, .box_play:hover { background: white; box-shadow: 0px 0.41667vw 1.71875vw rgba(255, 255, 255, 0.50); } .box_skip:hover svg path, .box_play:hover svg path { fill: black; fill-opacity: 0.75; } .box_play:active, .box_skip:active { opacity: 0.75; } .functions_wrap { gap: 0.41667vw; margin-left: auto; } .volume_wrap { height: 1.77083vw; border-radius: 0.15625vw; background: rgba(255, 255, 255, 0.05); padding: 0.83333vw 0.52083vw; gap: 0.41667vw; margin-left: 0.83333vw; } .volume_wrap svg { width: 0.83333vw; height: 0.83333vw; } input[type=range] { cursor: pointer; width: 3.22917vw; height: 0.20833vw; background: rgba(255, 255, 255, 0.25); -webkit-appearance: none; outline: none; margin-left: auto; margin-right: auto; } input[type=range]::-webkit-slider-thumb { width: 0.26042vw; height: 0.57292vw; background: #0361fb ; -webkit-appearance: none; appearance: none; } .music_novalue { margin-top: 0.83333vw; width: 100%; height: 0.10417vw; background: rgba(255, 255, 255, 0.05); } .music_value { width: 0%; height: 0.10417vw; background: #0361fb ; } .music_cont { gap: 0.83333vw; } .links_cont { width: 100%; } .link_wrap { transition: all 0.3s ease; width: 100%; cursor: pointer; padding: 0.83333vw; border-radius: 0.20833vw; background: rgba(255, 255, 255, 0.05); border: 0.05208vw solid #9500ff00; gap: 0.41667vw; } .link_wrap:hover { transform: translateY(0.1vw); border: 0.05208vw solid #0361fb ; background: rgba(3, 97, 251, 0.15); } .link_wrap:active { opacity: 0.75; } .links_cont { width: 31.04167vw; margin-top: 2.91667vw; gap: 0.83333vw; } .link_wrap img { width: 1.45833vw; height: 1.45833vw; } .row_link { flex-shrink: 0; } .row_link span:first-child { font-size: 0.83333vw; font-family: 'Regular'; text-shadow: 0px 0px 1.25vw rgba(255, 255, 255, 0.35); } .row_link span:last-child { font-size: 0.83333vw; font-family: 'GRegular'; color: rgba(255, 255, 255, 0.50); } .music_cont { margin-top: 2.91667vw; } .loading_cont { margin-top: 3.22917vw; } .procent_box { font-size: 0.83333vw; font-family: 'Regular'; background-image: url('../images/procentbox.png'); background-size: 100% 100%; width: 2.55208vw; height: 1.5625vw; border-radius: 0.15625vw; } .loading_novalue { margin-top: 0.83333vw; width: 22.34375vw; height: 1.51042vw; background-image: url('../images/novalue.png'); background-size: 100% 100%; } .loading_value { overflow: hidden; width: 0%; height: 1.51042vw; filter: drop-shadow(0px 5px 1.34896vw rgba(3, 97, 251, 0.75)); } .loading_value img { width: 22.34375vw; height: 1.51042vw; } .left_cont { width: 18.4375vw; padding: 0.83333vw; border-radius: 0.41667vw; background: rgba(255, 255, 255, 0.05); } .box_news { position: relative; padding: 1.25vw; border-radius: 0.36458vw; background: radial-gradient(49.82% 49.82% at 50% 100%, rgba(3, 97, 251, 0.25) 0%, rgba(0, 0, 0, 0.00) 100%), rgba(0, 0, 0, 0.35); } .flex_news { width: 100%; } .flex_news span:first-child { font-size: 0.83333vw; font-family: 'Regular'; padding: 0.36875vw 0.41667vw; background-image: url('../images/boxnews.png'); background-size: 100% 100%; color: rgba(0, 0, 0, 0.75); border-radius: 0.15625vw; box-shadow: 0px 0px 1.66667vw rgba(3, 97, 251, 0.25); } .flex_news span:last-child { font-size: 0.83333vw; font-family: 'Regular'; margin-left: auto; text-shadow: 0px 0px 1.25vw rgba(255, 255, 255, 0.35); } .descriptionnews { margin-top: 1.25vw; font-size: 0.83333vw; font-family: 'GRegular'; color: rgba(255, 255, 255, 0.75); } .linenews { position: absolute; bottom: 0; width: 1.5625vw; height: 0.20833vw; border-radius: 1.5625vw; background: #0361fb ; } .overflow_news { height: 100%; gap: 1.25vw; display: flex; margin-top: 1.25vw; flex-direction: column; overflow-y: auto; } .overflow_news::-webkit-scrollbar { display: none; } .left_cont { position: absolute; left: 12.5vw; height: 43.85417vw; } .pannel_team { width: 16.77083vw; height: 3.80208vw; border-radius: 0.36458vw; background-size: 100% 100%; padding: 0.83333vw 1.25vw 0.83333vw 0.83333vw; } .box_img { width: 1.77083vw; height: 1.77083vw; border-radius: 0.26042vw; } .box_img img { width: 1.35417vw; height: 1.35417vw; border-radius: 0.10417vw; } .row_team span:first-child { font-size: 0.83333vw; font-family: 'Regular'; text-shadow: 0px 0px 24px rgba(255, 255, 255, 0.35); } .row_team span:last-child { font-size: 0.83333vw; font-family: 'Regular'; color: rgba(0, 0, 0, 0.75); padding: 0.2125vw 0.41667vw; background-size: 100% 100%; } .red .row_team span:last-child { background-image: url('../images/purplebx.png'); box-shadow: 0px 0px 1.66667vw #0361fb40; } .yellow .row_team span:last-child { background-image: url('../images/purplebx.png'); box-shadow: 0px 0px 1.66667vw #0361fb40; } .purple .row_team span:last-child { background-image: url('../images/purplebx.png'); box-shadow: 0px 0px 1.66667vw #0361fb40; } .red { background-image: url('../images/redpnl.png'); } .yellow { background-image: url('../images/yellowpnl.png'); } .purple { background-image: url('../images/purplepnl.png'); } .red .box_img { border: 0.05208vw solid #0361fb; background: radial-gradient(229.37% 229.37% at 50% 50%, #0361fb 0%, #0361fb00 100%); box-shadow: 0vw 0.36458vw 0.98437vw 0vw #0361fb59; } .yellow .box_img { border: 0.05208vw solid #0361fb; background: radial-gradient(229.37% 229.37% at 50% 50%, #0361fb 0%, #0361fb00 100%); box-shadow: 0vw 0.36458vw 0.98437vw 0vw #0361fb59; } .purple .box_img { border: 0.05208vw solid #0361fb; background: radial-gradient(229.37% 229.37% at 50% 50%, #0361fb 0%, #0361fb00 100%); box-shadow: 0vw 0.36458vw 0.98437vw 0vw #0361fb59; } .row_team { margin-left: 0.625vw; } .icnds { margin-left: auto; width: 1.14583vw; height: 1.14583vw; cursor: pointer; } .icnds:hover path { fill-opacity: 1; } .icnds:active { opacity: 0.75; } .team_wrap { gap: 0.41667vw; } .right_cont { position: absolute; right: 12.5vw; } .right_cont .head_description { width: 16.77083vw; } .pannel_player { width: 16.77083vw; height: 3.17708vw; border-radius: 0.36458vw; background-image: url('../images/pannelplayer.png'); background-size: 100% 100%; padding: 0.83333vw; } .pannel_player img { width: 1.04167vw; height: 1.04167vw; filter: drop-shadow(0px 0px 0.83333v rgba(3, 97, 251, 0.75)); } .row_player span:first-child { font-size: 0.83333vw; font-family: 'Regular'; color: rgba(255, 255, 255, 0.50); } .row_player span:last-child { font-size: 0.83333vw; font-family: 'Regular'; text-shadow: 0px 0px 1.25vw rgba(255, 255, 255, 0.35); } .pannel_player { gap: 0.625vw; } .player_wrap { gap: 0.41667vw; } .player_cont, .team_cont { gap: 1.25vw; padding: 0.83333vw; border-radius: 0.41667vw; background: rgba(255, 255, 255, 0.05); } .secondstyle .left_cont { transform: skew(-3deg); } .secondstyle .right_cont { transform: skew(3deg); } .middle_cont { animation: pulsefromblock 2s ease-in-out infinite; } @keyframes pulsefromblock { from { transform: scale(.98); } 50% { transform: scale(1); } to { transform: scale(.98); } } @media (min-width: 2560px) { .header_flex { padding: 1.1111vh 2.2222vh; font-size: 1.6667vh; border-radius: 0.3704vh; background: rgba(255, 255, 255, 0.05); } .header_flex span:first-child { font-family: 'Thin'; color: rgba(255, 255, 255, 0.50); } .header_flex span:last-child { font-family: 'Regular'; color: white; margin-left: 1.1111vh; text-shadow: 0vw 0vw 2.963vh rgba(255, 255, 255, 0.50); } .name_wrap span:first-child { font-size: 8.8889vh; font-family: 'Bold'; text-shadow: 0vw 0vw 7.3519vh rgba(255, 255, 255, 0.35); } .name_wrap span:last-child { font-size: 11.8519vh; font-family: 'Shadows'; transform: skew(-15deg); margin-top: -10.4741vh; color: #0361fb ; text-shadow: 0vh 0vh 7.2407vh rgba(3, 97, 251, 0.50); } .description { text-align: center; font-size: 1.4815vh; font-family: 'GRegular'; color: rgba(255, 255, 255, 0.75); max-width: 55.0926vh; margin-top: 1.4815vh; } .music_cont { padding: 1.4815vh; width: 55.1852vh; border-radius: 0.7407vh; background: radial-gradient(40.28% 67.44% at 32.47% 116.41%, rgba(3, 97, 251, 0.25) 0%, rgba(3, 97, 251, 0.00) 100%), radial-gradient(62.23% 121.24% at 69.21% -50%, rgba(3, 97, 251, 0.25) 0%, rgba(3, 97, 251, 0.00) 100%), rgba(255, 255, 255, 0.05); } .head_description { width: 100%; padding: 1.4815vh; border-radius: 0.3704vh; background: rgba(0, 0, 0, 0.35); } .min_box { width: 2.963vh; height: 2.963vh; background-image: url('../images/boxheader.png'); background-size: 100% 100%; flex-shrink: 0; box-shadow: 0vw 1.1111vh 2.963vh rgba(3, 97, 251, 0.50); } .min_box svg { width: 2.1296vh; height: 2.1296vh; opacity: 0.75; } .row_head span:first-child { font-size: 1.4815vh; font-family: 'Regular'; text-shadow: 0vw 0vw 2.2222vh rgba(255, 255, 255, 0.35); } .row_head span:last-child { font-size: 1.4815vh; font-family: 'Regular'; color: rgba(255, 255, 255, 0.50); margin-top: -0.0926vh; } .row_head { gap: 0.2778vh; } .head_description { gap: 1.1111vh; } .music_wrap { width: 100%; padding: 1.4815vh; border-radius: 0.3704vh; background: rgba(0, 0, 0, 0.35); } .wrap_name_music { gap: 0.9259vh; } .wrap_name_music img { width: 3.0556vh; height: 3.0556vh; border-radius: 0.2778vh; } .row_name_music span:first-child { font-size: 1.2963vh; font-family: 'Regular'; } .row_name_music span:last-child { font-size: 1.2963vh; font-family: 'Regular'; color: rgba(255, 255, 255, 0.50); } .box_skip, .box_play { width: 3.1481vh; cursor: pointer; height: 3.1481vh; border-radius: 0.2778vh; } .box_skip svg, .box_play svg { width: 1.4815vh; height: 1.4815vh; } .box_skip { background: rgba(255, 255, 255, 0.05); } .box_play { background: #0361fb ; box-shadow: 0vw 0.7407vh 3.0556vh rgba(3, 97, 251, 0.50); } .box_skip:hover, .box_play:hover { background: white; box-shadow: 0vw 0.7407vh 3.0556vh rgba(255, 255, 255, 0.50); } .box_skip:hover svg path, .box_play:hover svg path { fill: black; fill-opacity: 0.75; } .box_play:active, .box_skip:active { opacity: 0.75; } .functions_wrap { gap: 0.7407vh; margin-left: auto; } .volume_wrap { height: 3.1481vh; border-radius: 0.2778vh; background: rgba(255, 255, 255, 0.05); padding: 1.4815vh 0.9259vh; gap: 0.7407vh; margin-left: 1.4815vh; } .volume_wrap svg { width: 1.4815vh; height: 1.4815vh; } input[type=range] { cursor: pointer; width: 5.7407vh; height: 0.3704vh; background: rgba(255, 255, 255, 0.25); -webkit-appearance: none; outline: none; margin-left: auto; margin-right: auto; } input[type=range]::-webkit-slider-thumb { width: 0.463vh; height: 1.0185vh; background: #0361fb ; -webkit-appearance: none; appearance: none; } .music_novalue { margin-top: 1.4815vh; width: 100%; height: 0.1852vh; background: rgba(255, 255, 255, 0.05); } .music_value { width: 0%; height: 0.1852vh; background: #0361fb ; } .music_cont { gap: 1.4815vh; } .links_cont { width: 100%; } .link_wrap { transition: all 0.3s ease; width: 100%; cursor: pointer; padding: 1.4815vh; border-radius: 0.3704vh; background: rgba(255, 255, 255, 0.05); border: 0.0926vh solid #9500ff00; gap: 0.7407vh; } .link_wrap:hover { transform: translateY(0.1778vh); border: 0.0926vh solid #0361fb ; background: rgba(3, 97, 251, 0.15); } .link_wrap:active { opacity: 0.75; } .links_cont { width: 55.1852vh; margin-top: 5.1852vh; gap: 1.4815vh; } .link_wrap img { width: 2.5926vh; height: 2.5926vh; } .row_link { flex-shrink: 0; } .row_link span:first-child { font-size: 1.4815vh; font-family: 'Regular'; text-shadow: 0vw 0vw 2.2222vh rgba(255, 255, 255, 0.35); } .row_link span:last-child { font-size: 1.4815vh; font-family: 'GRegular'; color: rgba(255, 255, 255, 0.50); } .music_cont { margin-top: 5.1852vh; } .loading_cont { margin-top: 5.7407vh; } .procent_box { font-size: 1.4815vh; font-family: 'Regular'; background-image: url('../images/procentbox.png'); background-size: 100% 100%; width: 4.537vh; height: 2.7778vh; border-radius: 0.2778vh; } .loading_novalue { margin-top: 1.4815vh; width: 39.7222vh; height: 2.6852vh; background-image: url('../images/novalue.png'); background-size: 100% 100%; } .loading_value { overflow: hidden; width: 0%; height: 2.6852vh; filter: drop-shadow(0vw 0.26042vw 2.3982vh rgba(3, 97, 251, 0.75)); } .loading_value img { width: 39.7222vh; height: 2.6852vh; } .left_cont { width: 32.7778vh; padding: 1.4815vh; border-radius: 0.7407vh; background: rgba(255, 255, 255, 0.05); } .box_news { position: relative; padding: 2.2222vh; border-radius: 0.6481vh; background: radial-gradient(49.82% 49.82% at 50% 100%, rgba(3, 97, 251, 0.25) 0%, rgba(0, 0, 0, 0.00) 100%), rgba(0, 0, 0, 0.35); } .flex_news { width: 100%; } .flex_news span:first-child { font-size: 1.4815vh; font-family: 'Regular'; padding: 0.6556vh 0.7407vh; background-image: url('../images/boxnews.png'); background-size: 100% 100%; color: rgba(0, 0, 0, 0.75); border-radius: 0.2778vh; box-shadow: 0vw 0vw 2.963vh rgba(3, 97, 251, 0.25); } .flex_news span:last-child { font-size: 1.4815vh; font-family: 'Regular'; margin-left: auto; text-shadow: 0vw 0vw 2.2222vh rgba(255, 255, 255, 0.35); } .descriptionnews { margin-top: 2.2222vh; font-size: 1.4815vh; font-family: 'GRegular'; color: rgba(255, 255, 255, 0.75); } .linenews { position: absolute; bottom: 0; width: 2.7778vh; height: 0.3704vh; border-radius: 2.7778vh; background: #0361fb ; } .overflow_news { height: 100%; gap: 2.2222vh; display: flex; margin-top: 2.2222vh; flex-direction: column; overflow-y: auto; } .overflow_news::-webkit-scrollbar { display: none; } .left_cont { position: absolute; left: 22.2222vh; height: 77.963vh; } .pannel_team { width: 29.8148vh; height: 6.7593vh; border-radius: 0.6481vh; background-size: 100% 100%; padding: 1.4815vh 2.2222vh 1.4815vh 1.4815vh; } .icnds { margin-left: auto; width: 2.037vh; height: 2.037vh; cursor: pointer; } .icnds:hover path { fill-opacity: 1; } .icnds:active { opacity: 0.75; } .team_wrap { gap: 0.7407vh; } .right_cont { position: absolute; right: 22.2222vh; } .right_cont .head_description { width: 29.8148vh; } .pannel_player { width: 29.8148vh; height: 5.6481vh; border-radius: 0.6481vh; background-image: url('../images/pannelplayer.png'); background-size: 100% 100%; padding: 1.4815vh; } .pannel_player img { width: 1.8519vh; height: 1.8519vh; filter: drop-shadow(0vw 0vw 0.83333v rgba(3, 97, 251, 0.75)); } .row_player span:first-child { font-size: 1.4815vh; font-family: 'Regular'; color: rgba(255, 255, 255, 0.50); } .row_player span:last-child { font-size: 1.4815vh; font-family: 'Regular'; text-shadow: 0vw 0vw 2.2222vh rgba(255, 255, 255, 0.35); } .pannel_player { gap: 1.1111vh; } .player_wrap { gap: 0.7407vh; } .player_cont, .team_cont { gap: 2.2222vh; padding: 1.4815vh; border-radius: 0.7407vh; background: rgba(255, 255, 255, 0.05); } .middle_cont { animation: pulsefromblock 2s ease-in-out infinite; } @keyframes pulsefromblock { from { transform: scale(.98); } 50% { transform: scale(1); } to { transform: scale(.98); } } } .greenpnl { background-image: url('../images/pannelplayer.png'); } .tc { text-align: center; } .clmn { display: flex; flex-direction: column; } .flex { display: flex; } .alcn { display: flex; align-items: center; } .jlcn { display: flex; align-items: center; justify-content: center; }