diff --git a/airtime_mvc/public/css/images/source-info_lines.png b/airtime_mvc/public/css/images/source-info_lines.png new file mode 100644 index 000000000..75a1f435d Binary files /dev/null and b/airtime_mvc/public/css/images/source-info_lines.png differ diff --git a/airtime_mvc/public/css/images/thin_delete.png b/airtime_mvc/public/css/images/thin_delete.png new file mode 100644 index 000000000..282b818b0 Binary files /dev/null and b/airtime_mvc/public/css/images/thin_delete.png differ diff --git a/airtime_mvc/public/css/masterpanel.css b/airtime_mvc/public/css/masterpanel.css new file mode 100644 index 000000000..1da45dabe --- /dev/null +++ b/airtime_mvc/public/css/masterpanel.css @@ -0,0 +1,315 @@ +@charset "utf-8"; +/* CSS Document */ + +/*---//////////////////// SOURCE INFO ////////////////////---*/ +.source-info-block { + padding:0 0 0 2px; + background: url(images/masterpanel_spacer.png) no-repeat 0 0; + margin-right: 0; + } + .source-info-block h3, .on-air-block h3 { + margin: 0 0 10px -1px; + padding:3px 0 2px 8px; + background: rgba(0, 0, 0, 0.10); + color:#acacac; + font-size:10px; + text-transform:uppercase; + border-bottom:1px solid #494949; + -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07); + -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07); + box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07); + text-shadow: 0 -1px rgba(0, 0, 0, 0.3); + } + .on-air-block h3 { + margin-left:0; + } + .source-info-block ul { + margin:0 0 0 7px; + padding:0; + } + .source-info-block li { + list-style-type:none; + font-size:11px; + color:#bdbdbd; + margin:0; + height:15px; + padding-right:20px; + background:url(images/source-info_lines.png) no-repeat right 0; + } + .source-info-block li:first-child { + background-position: right -50px; + padding-bottom:3px; + } + .source-info-block li:last-child { + background-position: right -150px; + padding-top:3px; + } + .source-info-block li div { + display:inline-block; + margin-right:10px; + min-width:95px; + float:left; + height:15px; + line-height:14px; + padding:0 2px 0 3px; + background:#3e3e3e; + -webkit-border-radius:2px; + -moz-border-radius:2px; + border-radius:2px; + border-right:2px solid #3e3e3e; + } + +.source-info-block li.ready { + background-position: right -15px; + } + .source-info-block li.ready:first-child { + background-position: right -70px; + } + .source-info-block li.ready:last-child { + background-position: right -170px; + padding-top:3px; + } +.source-info-block li.active { + background-position: right -30px; + } + .source-info-block li.active:first-child { + background-position: right -90px; + } + .source-info-block li.active:last-child { + background-position: right -190px; + padding-top:3px; + } +.source-info-block li.ready div, .source-info-block li.active div { + background:#2f2e2e; + border-color:#ff611f; + color:#fff; + } +.source-info-block li.kicked div { + color:#737373; + } + + + +.source-switch-button { + font-size:11px; + padding:0; + border:1px solid #2d2d2d; + -webkit-border-radius:2px; + -moz-border-radius:2px; + border-radius:2px; + float:left; + display:block; + text-align:center; + width: 27px; + height:13px; + text-indent: 100%; + white-space: nowrap; + overflow: hidden; + background-color: #434343; + background: -moz-linear-gradient(top, #555555 0, #434343 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #555555), color-stop(100%, #434343)); + background: linear-gradient(top, #555555 0, #434343 100%); + -webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.5); + -moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.5); + box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.5); + background-clip:border-box; +} + +.source-switch-button.active { + background-color: #ff611f; + background: -moz-linear-gradient(top, #ff8451 0, #ff611f 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ff8451), color-stop(100%, #ff611f)); + background: linear-gradient(top, #ff8451 0, #ff611f 100%); + -webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.5); + -moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.5); + box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.5); +} + +.source-switch-button span { + background-color: #7c7c7c; + background: -moz-linear-gradient(top, #959595 0, #7c7c7c 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #959595), color-stop(100%, #7c7c7c)); + background: -moz-linear-gradient(top, #959595 0, #7c7c7c 100%); + border:1px solid #2d2d2d; + border-width:0 0 0 1px; + width:13px; + float:right; + height:13px; + -webkit-border-radius:0px 2px 2px 0px; + -moz-border-radius:0px 2px 2px 0px; + border-radius:0px 2px 2px 0px; + -webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.2); + -moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.2); + box-shadow:inset 0 1px 1px 0(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.2); +} +.source-switch-button.active span { + border-width:0 1px 0 0; + float:left; + border-width: 0 1px 0 1px; + width:13px; + margin-left:-1px; + -webkit-border-radius:1px 0px 0px 1px; + -moz-border-radius:1px 0px 0px 1px; + border-radius:1px 0px 0px 1px; +} + +.source-switch-button:hover span { + background-color: #bfbfbf; + background: -moz-linear-gradient(top, #bfbfbf 0, #7c7c7c 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #bfbfbf), color-stop(100%, #7c7c7c)); + background: -moz-linear-gradient(top, #bfbfbf 0, #7c7c7c 100%); +} + +.source-kick-button { + height:15px; + width:15px; + margin: 0 4px 0 -3px; + float: left; + -webkit-border-radius:2px; + -moz-border-radius:2px; + border-radius:2px; + background: #262626 url(images/thin_delete.png) no-repeat 0 0; +} + +.source-kick-button:hover{ + cursor:pointer; + background-color:#000; + background-position:0 -15px; +} +.source-info-block li.kicked div .source-kick-button, .source-info-block li.kicked div .source-kick-button:hover { + opacity: 0.3; + filter: alpha(opacity = 30); + cursor:default; + background-color:#262626; + background-position:0 0; + } + +.source-info-block + .on-air-block { + padding-right:2px; +} + +.source-info-block + .on-air-block .on-air-info, .source-info-block + .on-air-block .listen-control-button { + margin-right:7px; +} + +.on-air-info { + height:26px; + border:1px solid #242424; + border-width:1px 1px 0 1px; + min-width:85px; + font-size:16px; + line-height:100%; + font-weight:bold; + text-shadow: #242424 0px -1px; + text-align:center; + padding: 10px 0 0 0; + background-color:#464646; + margin-top:30px; + + -webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.2); + -moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.2); + box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.2); +} +.on-air-info.off { + background-color: #3f3a3a; + background: -moz-linear-gradient(top, #575050 0, #3f3a3a 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #575050), color-stop(100%, #3f3a3a)); + background: -moz-linear-gradient(top, #575050 0, #3f3a3a 100%); + color:#A5A5A5; +} +.on-air-info.on { + background-color: #c21717; + background: -moz-linear-gradient(top, #c21717 0, #8d1010 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #c21717), color-stop(100%, #8d1010)); + background: -moz-linear-gradient(top, #c21717 0, #8d1010 100%); + color:#fff; + + -webkit-box-shadow:inset 0 1px 0px rgba(255, 255, 255, 0.3); + -moz-box-shadow:inset 0 1px 0px rgba(255, 255, 255, 0.3); + box-shadow:inset 0 1px 0px rgba(255, 255, 255, 0.3); +} + + +.on-air-block h3 + .on-air-info { + height:30px; + border-width:1px 1px 0 1px; + margin-top:-3px; + padding: 15px 0 0 0; +} + +.on-air-block h3 + .on-air-info + .listen-control-button { + margin-top:0px; +} + +.listen-control-block a, .listen-control-button { + font-size:11px; + text-transform:uppercase; + padding:0; + border:1px solid #242424; + color:#fff; + text-decoration:none; + font-weight:bold; + margin-top:34px; + display:block; + text-align:center; + +} +.listen-control-button { + margin-top:6px; +} + + + +.personal-block.solo { + position: absolute; + right: 145px; + top: 104px; + width: auto; + z-index: 1000; + height:auto; + margin:0; +} +.time-info-block.pull-right { + margin-right:0; + text-align:right !important; + background-position:0 0; + padding: 0 14px 0 10px; + } + .time-info-block li, .time-info-block li.time { + text-align: right; + } + +/*.line-to-switch { + float: right; + width: 10px; + height:6px; + border:1px solid #242424; + border-width:1px 1px 0 1px; + margin-left: 5px; +} + +.line-to-switch.off{ + background:#FFFFFF +} + +.line-to-switch.on{ + background:#D40000 +} + +.line-to-on-air { + float: right; + height:6px; + border:1px solid #242424; + border-width:1px 1px 0 1px; + width: 10px; +} + +.line-to-on-air.off{ + background:#FFFFFF +} + +.line-to-on-air.on{ + background:#D40000 +} + +*/ \ No newline at end of file diff --git a/airtime_mvc/public/css/styles.css b/airtime_mvc/public/css/styles.css index b637a2534..da3d89481 100644 --- a/airtime_mvc/public/css/styles.css +++ b/airtime_mvc/public/css/styles.css @@ -288,46 +288,6 @@ select { font-size:17px; margin-bottom:0; } - -.source-info-block { - padding:0 14px 0 2px; - min-width:200px; -} - -.source-info-block li { - list-style-type:none; - font-size:14px; - color:#bdbdbd; - margin:0 0 6px; -} - -.source-info-block ul { - margin:0; - padding:6px 0 0; -} -.on-air-info { - height:26px; - border:1px solid #242424; - border-width:1px 1px 0 1px; - color:#fff; - min-width:85px; - font-size:16px; - line-height:100%; - font-weight:bold; - text-shadow: #242424 0px -1px; - text-align:center; - padding: 10px 0 0 0; - background-color:#464646; - margin-top:30px; -} -.on, .off { - background:#c21717 url(images/on-off-air.png) repeat-x 0 0; -} -.off { - background:#575050 url(images/on-off-air.png) repeat-x 0 -36px; - color:#a5a5a5; -} - .listen-control-block a, .listen-control-button { font-size:11px; text-transform:uppercase; @@ -378,97 +338,6 @@ select { color:#fff; } -.source-switch-button { - font-size:11px; - text-transform:uppercase; - padding:0; - border:1px solid #242424; - color:#fff; - text-decoration:none; - font-weight:bold; - display:block; - text-align:center; - width: 40px; - float: right; -} - -.source-switch-button span { - background-color: #6e6e6e; - background: -moz-linear-gradient(top, #868686 0, #6e6e6e 100%); - background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #868686), color-stop(100%, #6e6e6e)); - border:1px solid #a1a1a1; - border-width:1px 0; - border-bottom-color:#646464; - color:#dcdcdc; - text-shadow: #555555 0px -1px; - display:block; -} - -.source-switch-button:hover { - border:1px solid #000; -} - -.source-switch-button:hover span { - background-color: #292929; - background: -moz-linear-gradient(top, #3b3b3b 0, #292929 100%); - background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #3b3b3b), color-stop(100%, #292929)); - border:1px solid #555555; - border-width:1px 0; - border-bottom-color:#1e1e1e; - color:#fff; - color:#0C0; - text-shadow: #000 0px -1px; - display:block; -} - -.source-kick-button { - border:1px solid #242424; - color:#fff; - min-height:14px; - min-width:14px; - background-color:#464646; - margin-right: 2px; - float: left; -} - -.source-kick-button:hover{ - cursor:pointer; - background-color:#FFFFFF; -} - -.line-to-switch { - float: right; - width: 10px; - height:6px; - border:1px solid #242424; - border-width:1px 1px 0 1px; - margin-left: 5px; -} - -.line-to-switch.off{ - background:#FFFFFF -} - -.line-to-switch.on{ - background:#D40000 -} - -.line-to-on-air { - float: right; - height:6px; - border:1px solid #242424; - border-width:1px 1px 0 1px; - width: 10px; -} - -.line-to-on-air.off{ - background:#FFFFFF -} - -.line-to-on-air.on{ - background:#D40000 -} - /* END Master Panel */