/* **************************************************************************************************************************************************************** */ /* **************************************************************************************************************************************************************** */ /* Builder & Publisher & Designer & Coder => SysteMReloaded & Rone Ronenberg (Vedat Moğoltay & Vahe Vedat Moğoltay) */ /* **************************************************************************************************************************************************************** */ /* **************************************************************************************************************************************************************** */ /* GENERAL START */ /* **************************************************************************************************************************************************************** */ /* **************************************************************************************************************************************************************** */ * { margin: 0; padding: 0; } *,*:before,*:after { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } html { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } html, body { height: 100%; font-family: "Lucida"; font-weight: normal; cursor: default; } body { background-size: 100% 100%; background-repeat: no-repeat; background-position: center; } /* ************************************************************************************************************************************************************************************************************************************** */ /* ************************************************************************************************************************************************************************************************************************************** */ /* GENERAL END */ /* ************************************************************************************************************************************************************************************************************************************** */ /* ************************************************************************************************************************************************************************************************************************************** */ /* MAIN START */ /* ************************************************************************************************************************************************************************************************************************************** */ /* ************************************************************************************************************************************************************************************************************************************** */ #cover { position: relative; width: 272px; height: 160px; border-radius: 0.7em; } /* 272 x 160 */ #main { position: relative; width: 100%; height: 100%; border-radius: 0.7em; } /* 272 x 160 */ #up { position: relative; width: 100%; height: 10%; border-top-left-radius: 0.7em; border-top-right-radius: 0.7em; background-color: #051f4d; } /* 272 x 16 */ #center { position: relative; width: 100%; height: 80%; background-color: #b2b8c4; } /* 272 x 128 */ #down { position: relative; width: 100%; height: 10%; border-bottom-left-radius: 0.7em; border-bottom-right-radius: 0.7em; background-color: #051f4d; } /* 272 x 16 */ /* ************************************************************************************************************************************************************************************************************************************** */ /* ************************************************************************************************************************************************************************************************************************************** */ /* MAIN END */ /* ************************************************************************************************************************************************************************************************************************************** */ /* ************************************************************************************************************************************************************************************************************************************** */ /* UP START */ /* ************************************************************************************************************************************************************************************************************************************** */ /* ************************************************************************************************************************************************************************************************************************************** */ #up_inner { position: relative; width: 94.114%; height: 100%; left: 2.94%; } /* 256 x 16 - left/right: 8 */ #up_left { position: relative; width: 25%; height: 50%; top: 25%; float: left; border-top-left-radius: 0.7em; background-color: #6b768e; } /* 64 x 8 - top/bottom: 8 */ #up_center { position: relative; width: 50%; height: 100%; float: left; } /* 128 x 16 */ #up_right { position: relative; width: 25%; height: 50%; top: 25%; float: left; border-top-right-radius: 0.7em; background-color: #6b768e; } /* 64 x 8 - top/bottom: 8 */ .up-center-title { position: relative; width: 100%; height: 75%; top: 12.5%; float: left; } /* 128 x 12 - top/bottom: 2 */ .up-center-style { color: #dee0e4; font-family: "Lucida"; font-size: 0.7em; text-align: center; } /* ************************************************************************************************************************************************************************************************************************************** */ /* ************************************************************************************************************************************************************************************************************************************** */ /* UP END */ /* ************************************************************************************************************************************************************************************************************************************** */ /* ************************************************************************************************************************************************************************************************************************************** */ /* CENTER START */ /* ************************************************************************************************************************************************************************************************************************************** */ /* ************************************************************************************************************************************************************************************************************************************** */ #center_display { position: relative; width: 100%; height: 68.75%; } /* 128 x 88 */ #center_controller { position: relative; width: 100%; height: 31.25%; } /* 128 x 40 */ /* ************************************************************************************************************************************************************************************************************************************** */ /* ************************************************************************************************************************************************************************************************************************************** */ /* CENTER END */ /* ************************************************************************************************************************************************************************************************************************************** */ /* ************************************************************************************************************************************************************************************************************************************** */ /* DOWN START */ #down_inner { position: relative; width: 94.114%; height: 100%; left: 2.94%; } /* 256 x 16 - left/right: 8 */ #down_left { position: relative; width: 25%; height: 50%; top: 25%; float: left; border-bottom-left-radius: 0.7em; background-color: #6b768e; } /* 64 x 8 - top/bottom: 8 */ #down_center { position: relative; width: 50%; height: 100%; float: left; } /* 128 x 16 */ #down_right { position: relative; width: 25%; height: 50%; top: 25%; float: left; border-bottom-right-radius: 0.7em; background-color: #6b768e; } /* 64 x 8 - top/bottom: 8 */ .down-center-title { position: relative; width: 100%; height: 75%; top: 12.5%; float: left; } /* 128 x 12 - top/bottom: 2 */ .down-center-style { color: #dee0e4; font-family: "Lucida"; font-size: 0.7em; text-align: center; } /* ************************************************************************************************************************************************************************************************************************************** */ /* ************************************************************************************************************************************************************************************************************************************** */ /* DOWN END */ /* ************************************************************************************************************************************************************************************************************************************** */ /* ************************************************************************************************************************************************************************************************************************************** */ /* DISPLAY START */ /* ************************************************************************************************************************************************************************************************************************************** */ /* ************************************************************************************************************************************************************************************************************************************** */ #display_inner { position: relative; width: 93.75%; height: 90.909%; left: 3.125%; top: 9.09%; } /* 120 x 80 - left/right: 4 - top: 8 */ #display_up { position: relative; width: 100%; height: 75%; border-top-left-radius: 0.3em; border-top-right-radius: 0.3em; background: url(imgs-radio/DisplayUp.png) repeat; background-size: 100% 100%; } /* 120 x 90 */ #display_down { position: relative; width: 100%; height: 25%; border-bottom-left-radius: 0.3em; border-bottom-right-radius: 0.3em; background: url(imgs-radio/DisplayDown.png) repeat; background-size: 100% 100%; } /* 120 x 30 */ #display_up-inner { position: relative; width: 95%; height: 80%; left: 2.5%; top: 10%; float: left; } /* 114 x 72 - left/right: 3 - top/bottom: 9 */ #up-left { position: relative; width: 66.66%; height: 100%; float: left; } /* 76 x 72 */ #up-right { position: relative; width: 33.33%; height: 100%; float: left; } /* 38 x 72 */ #left-inner { position: relative; width: 97.36%; height: 100%; } /* 74 x 72 - right: 2 */ #left-up { position: relative; width: 100%; height: 75%; border-top-left-radius: 0.3em; border-top-right-radius: 0.3em; background: url(imgs-radio/StreamUp.png) repeat; background-size: 100% 100%; } /* 74 x 54 */ #top-stream { position: relative; width: 100%; height: 50%; } /* 74 x 27 */ #bottom-stream { position: relative; width: 100%; height: 50%; } /* 74 x 27 */ #top-inner { position: relative; width: 94.59%; height: 77.75%; left: 2.7%; top: 11.11%; } /* 70 x 21 - left/right: 2 - top/bottom: 3 */ #bottom-inner { position: relative; width: 94.59%; height: 77.75%; left: 2.7%; top: 11.11%; } /* 70 x 21 - left/right: 2 - top/bottom: 3 */ #top-stream-left { position: relative; width: 50%; height: 100%; float: left; } /* 35 x 21 */ #top-stream-right { position: relative; width: 50%; height: 100%; float: left; } /* 35 x 21 */ #bottom-stream-left { position: relative; width: 50%; height: 100%; float: left; } /* 35 x 21 */ #bottom-stream-right { position: relative; width: 50%; height: 100%; float: left; } /* 35 x 21 */ .StreamStyle { color: #dee0e4; font-family: "Lucida"; font-size: 0.7em; text-align: center; } .StreamTimer { opacity: 0.2; } .StreamBitrate { opacity: 0.2; } .StreamOnOff { opacity: 0.2; } .StreamRadio { opacity: 0.2; } #left-down { position: relative; width: 100%; height: 25%; border-bottom-left-radius: 0.3em; border-bottom-right-radius: 0.3em; background: url(imgs-radio/StreamDown.png) repeat; background-size: 100% 100%; } /* 74 x 18 */ #right-inner { position: relative; width: 100%; height: 100%; opacity: 0.2; background: url(imgs-radio/StreamEqualiser.png) no-repeat; background-size: 100% 100%; } /* 38 x 72 */ #down-slider { position: relative; width: 80%; height: 60%; left: 10%; top: 20%; } /* 96 x 18 - left/right: 12 - top/bottom: 6 */ #DownSliderMain { position: relative; width: 100%; height: 100%; } /* 96 x 18 - left/right: 12 - top/bottom: 6 */ #DownSliderContent { position: relative; width: 200%; height: 100%; } .down-slider-s1 { position: relative; width: 100%; height: 100%; overflow: hidden; } .down-slider-s1 div { position: absolute; width: 200%; height: 100%; display: block; overflow: hidden; animation: down-slider-s1 20s linear alternate-reverse infinite; } @keyframes down-slider-s1 { 0% { left: 0; } 100% { left: -100%; } } .down-slider-s2 { color: #e7eaed; font-size: 0.6em; font-family: "Lucida"; text-align: center; } /* DISPLAY END */ /* ************************************************************************************************************************************************************************************************************************************** */ /* ************************************************************************************************************************************************************************************************************************************** */ /* CONTROLLER START */ /* ************************************************************************************************************************************************************************************************************************************** */ /* ************************************************************************************************************************************************************************************************************************************** */ #controller_cover { position: relative; width: 93.75%; height: 60%; left: 3.125%; top: 20%; border-radius: 0.3em; background: url(imgs-radio/main.png) no-repeat; background-size: 100% 100%; } /* 120 x 24 - left/right: 4 - top/bottom: 8 */ #controller_inner { position: relative; width: 95%; height: 66.66%; left: 2.5%; top: 16.66%; } /* 114 x 16 - left/right: 3 - top/bottom: 4 */ #button-play { position: relative; width: 6%; height: 100%; float: left; object-fit: cover; background: url(imgs-radio/play-off.png); background-size: 100% 100%; border-radius: 50%; } #button-stop { position: relative; width: 6%; height: 100%; float: left; object-fit: cover; background: url(imgs-radio/stop-off.png); background-size: 100% 100%; border-radius: 50%; } #button-mute { position: relative; width: 6%; height: 100%; float: left; object-fit: cover; background: url(imgs-radio/mute-off.png); background-size: 100% 100%; border-radius: 50%; } #button-volume { position: relative; width: 42%; height: 100%; float: left; object-fit: cover; } #button-eq { position: relative; width: 20%; height: 100%; float: left; object-fit: cover; background: url(imgs-radio/equaliser-off.png); background-size: 100% 100%; border-radius: 0.2em; } #volume-inner { position: relative; width: 100%; height: 80%; top: 10%; } #btn-blank1, #btn-blank2, #btn-blank3, #btn-blank4 { position: relative; width: 5%; height: 100%; float: left; } #button-play:hover, #button-stop:hover, #button-mute:hover, #button-volume:hover { cursor: pointer; opacity: 0.7; } #button-play:active, #button-stop:active, #button-mute:active { transform: translateY(0.7px); } input[type="text"] { width: 100%; height: 100%; color: #dee0e4; font-family: Lucida; font-size: 0.7em; border: none; background: url(imgs-radio/StreamUp.png) repeat; background-size: 100% 100%; } input[type="range"] { -webkit-appearance: none; -moz-appearance: none; width: 100%; height: 6px; padding: 0; border-radius: 2px; outline: none; cursor: pointer; background-color: #aac4f5; } /* Chrome thumb */ input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; -moz-appearance: none; -webkit-border-radius: 5px; height: 11px; width: 22px; border-radius: 5px; background: #021d53; border: 1px solid #aac4f5; } /* Mozilla thumb */ input[type="range"]::-moz-range-thumb { -webkit-appearance: none; -moz-appearance: none; -moz-border-radius: 5px; height: 14px; width: 14px; border-radius: 5px; background: #021d53; border: 1px solid #aac4f5; } /* IE & Edge input */ input[type=range]::-ms-track { width: 100%; height: 7px; color: transparent; background: transparent; border-color: transparent; border-width: 2px 0; } /* IE & Edge thumb */ input[type=range]::-ms-thumb { height: 14px; width: 14px; border-radius: 5px; background: #021d53; border: 1px solid #aac4f5; } /* IE & Edge left side */ input[type=range]::-ms-fill-lower { background: #021d53; border-radius: 2px; } /* IE & Edge right side */ input[type=range]::-ms-fill-upper { background: #aac4f5; border-radius: 2px; } /* IE disable tooltip */ input[type=range]::-ms-tooltip { display: none; } /* ************************************************************************************************************************************************************************************************************************************** */ /* ************************************************************************************************************************************************************************************************************************************** */ /* CONTROLLER END */ /* ************************************************************************************************************************************************************************************************************************************** */ /* ************************************************************************************************************************************************************************************************************************************** */ /* RESPONSIVE START */ /* ************************************************************************************************************************************************************************************************************************************** */ /* ************************************************************************************************************************************************************************************************************************************** */ /* ************************************************************************************************************************************************************************************************************************************** */ /* ************************************************************************************************************************************************************************************************************************************** */ /* RESPONSIVE END */ /* ************************************************************************************************************************************************************************************************************************************** */ /* ************************************************************************************************************************************************************************************************************************************** */