ffplayout/resources/css/style.css

/* -----------------------------------------------------------------------------
main grid
------------------------------------------------------------------------------*/

body {
    display: grid;
    grid-template-areas: "player header header" "nav article cal" "nav footer footer";
    grid-template-columns: .5fr 5fr 1fr;
    grid-template-rows: .5fr 4fr .8fr;
    height: 100vh;
    margin: 0;
    overflow: hidden;
    /*	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
*/

    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
}

footer {
    padding: 1em;
    background: #404040;
    color: #d0d0d0;
}

header {
    padding: .5em 1em .9em 1em;
    background: #404040;
    color: #d0d0d0;
}

article {
    padding: 0 1em 1em 1em;
    background: #404040;
    color: #d0d0d0;
}

#cal {

    background: #404040;
    color: #d0d0d0;
}

#pageHeader {
    grid-area: header;
}

#pagePlayer {
    grid-area: player;
    background: #404040;
    padding: .5em 0 .5em .5em;
}

.vjs-progress-holder {
    display: none !important;
}

#pageFooter {
    grid-area: footer;
}

#playlist-editor {
    grid-area: article;
    width: 5fr;
    height: 4fr;
}

#mainNav {
    grid-area: nav;
    background: #404040;
    width: 400px;
    min-width: 220px;
    max-width: 700px;
    padding-bottom: 1em;
}

#cal {
    grid-area: cal;
    margin: 0;
    padding: 1.4em 0;
}

.calender-bold {
    font-weight: bold;
}

/* Desktops and laptops ----------- */
@media only screen and (max-width : 1824px) {}

/* iPads (landscape) ----------- */
@media only screen and (max-width : 1224px) {}

/* iPads (portrait) ----------- */
@media only screen and (max-width : 1024px) {}

/* Smartphones (landscape) ----------- */
@media only screen and (max-width : 768px) {}

/* Big smartphones (portrait) (ie: Galaxy 3 has 360)*/
@media only screen and (max-width : 640px) {}

/* Smartphones (portrait) (ie: Galaxy 1) */
@media only screen and (max-width : 321px) {}


/* Stack the layout on small devices/viewports. */

@media all and (max-width: 575px) {
    body {
        grid-template-areas: "header" "player" "article" "footer";
        grid-template-rows: .2fr 1fr 70% 1fr;
        grid-template-columns: 1fr;
    }

    #current-track,
    #mainNav,
    #cal,
    #playlistCtr {
        display: none;
    }

    #pagePlayer {
        padding: 1em;
    }

    #log-area {
        width: 100%;
    }

    #streamer-ctr {
        width: 100% !important;
        padding: 0 !important;
    }

    .row-preview,
    .row-duration,
    .row-in,
    .row-out,
    .row-del,
    .row-del-head {
        display: none !important;
    }

    .row-start {
        width: 23% !important;
    }

    .row-file {
        width: 77% !important;
    }

    .handle {
        display: none !important;
    }
}

/* ---------------------------------------------------------------------------------------------- */

/* -----| HEADER |------------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------------------------- */


#headerCtr {
    width: 100%;
    height: 100%;
    float: left;
    overflow: hidden;
    float: left;
    display: table;
}

.header-element {
    display: inline-block;
    display: table-cell;
    vertical-align: middle;
}

#current-track {
    position: relative;
    width: 83.8%;
    height: 50%;
    vertical-align: middle;
}

#track {
    background: #8C8C8C;
    color: #111;
    height: 50%;
    width: 100%;
    display: table;
}

#track div {
    vertical-align: middle;
    display: table-cell;
}

#clock,
#countdown {
    font-size: 5em;
    font-weight: bold;
    width: 20%;
    border-right: 6px solid #404040;
    text-align: center;

}

#title {
    width: 60%;
    font-size: 1.1em;
    font-weight: bold;
    padding-left: 15px;
}

#streamer-ctr {
    position: relative;
    width: 16.2%;
    height: 50%;
    vertical-align: middle;
    padding-left: 17px;
}

#start-stop {
    background: #8C8C8C;
    color: #111;
    height: 50%;
    width: 100%;
    display: table;
    text-align: center;
}

.controll {
    vertical-align: middle;
    display: table-cell;
    font-size: 5em;
    width: 49%;
    background: none;
    border: none;
    cursor: pointer;
}

#bt_start {
    color: #179040;
}

#bt_stop {
    color: #8e2719;
}

#bt_start:hover {
    color: #1bb44f;
}

#bt_stop:hover {
    color: #b8301d;
}

#bt_start:active {
    color: #0f632c;
}

#bt_stop:active {
    color: #5e1a11;
}

/* ---------------------------------------------------------------------------------------------- */

/* -----| DIRECTORY LISTER |--------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------------------------- */

#browser {
    background-color: #b0b0b0;
    height: 100%;
    overflow: scroll;
    overflow-y: auto;
    overflow-x: auto;
    margin-bottom: 6px;
    padding: 0;
}

#browserHead {
    background-color: #8c8c8c;
    padding: 5px 0 0 17px;
    height: 65px;
}

.navbar-text {
    margin: 8px 0;
    padding-right: 6px;
}

.navbar-text a {
    text-decoration: none;
}

.navbar-text a:link {
    color: #41493d;
}

.navbar-text a:visited {
    color: #41493d;
}

.navbar-text a:hover {
    color: #a5b99a;
}

#directory-list-header {
    font-weight: bold;
    padding: 10px 15px;
}

#rootDirectory {
    padding: 6px 0 6px 0;
}

#rootDirectory li {
    position: relative;
    max-width: 90%;
    height: 25px;
    list-style: none;
    padding-right: 4px;
}


.clearfix {
    text-decoration: none;
    display: table;
    content: " ";
}

.nav-pills>li>a {
    border-radius: 1px;
}

.nav>li>a {
    position: relative;
    display: block;
    padding: 2px 4px;
}

.file-name {
    color: rgb(28, 38, 41);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    float: left;
    max-width: 640px;
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

.file-name i {
    color: #707070;
    font-size: 20px;
}

.file-info-button, .web-link-button {
    display: inline-block;
    cursor: pointer;
    margin-left: 100%;
    position: absolute !important;
    top: 0px;
}

.web-link-button i, .file-info-button i {
    color: #707070;
    font-size: 20px;
}

.file-info-button i:hover {
    color: #111111;
}

/* -------------------------------------------------------------------------- */

/* -----| MODAL |------------------------------------------------------------ */

/* --------------------------------------------------------------------------
*/

#preview_player {
    width: 1024px;
    height: 576px;
}

.ui-dialog .ui-dialog-content {
    background-color: #464646;
    color: #bebebe;
    z-index: 4;
    overflow: hidden;
    padding: .5em;
}

.ui-dialog .ui-dialog-buttonpane {
    margin: 0;
}

.ui-dialog-content {
    background-color: #464646;
    color: #bebebe;
    z-index: 4;
    overflow: hidden;
    padding: .5em;
}

#dialog-confirm {
    background-color: #464646;
    color: #bebebe;
}

.ui-widget-header,
.ui-widget-content {
    background-color: #b0b0b0;
    border: 1px solid #111;
}

.ui-widget-overlay {
    opacity: .70 !important;
    /* Make sure to change both of these, as IE only sees the second one */
    filter: Alpha(Opacity=70) !important;
    background-color: rgb(10, 10, 10) !important;
    /* This will make it darker */
}

.ui-dialog-titlebar-close {
    visibility: hidden;
}

.modal-icon {
    height: 80px;
    width: 80px;
    float: left;
    margin: 0;
    background: rgba(255, 255, 255, 0.8) url('../img/ajax-loader.gif') 50% 50% no-repeat;
}

/* -------------------------------------------------------------------------- */

/* -----| Playlist Table |--------------------------------------------------- */

/* -------------------------------------------------------------------------- */
#container {
    width: 100.8%;
    height: 99.5%;
    margin: 0 auto;
    position: relative;
}

#list-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    border-top: 2px solid #d0d0d0;
}


#playlistTable {
    width: calc(100% - 1em);
}

#playlistBody {
    padding: 0;
    margin: 0;
}

.list-item {
    height: 20px;
    color: #111111;
    position: relative;
    display: block;
    padding: 12px;
    border-style: solid;
    border-color: #ddd;
    border-width: 1px 1px 0 1px;
}

.list-item:nth-of-type(2n+1) {
    background-color: #b0b0b0;
}

.list-item:nth-of-type(2n+2) {
    background-color: #8c8c8c;
}

.current_item:nth-of-type(2n+1) {
    background-color: #b38e8e;
}

.current_item:nth-of-type(2n+2) {
    background-color: #8c7373;
}

.next_item:nth-of-type(2n+1) {
    background-color: #b3ac8e;
}

.next_item:nth-of-type(2n+2) {
    background-color: #9e977d;
}

.last_items:nth-of-type(2n+1) {
    background-color: #a7b1a5;
}

.last_items:nth-of-type(2n+2) {
    background-color: #848b81;
}

.file-op {
    display: inline-block;
    cursor: pointer;
    font-size: 20px;
    color: #707070;
    padding-left: 10%;
}

.file-op:hover {
    color: #111111;
}

.row-start {
    width: 8%;
}

.row-file {
    width: 60%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.row-preview {
    width: 4%;
    z-index: 3;
}

.row-duration {
    width: 8%;
}

.row-in {
    width: 8%;
}

.row-out {
    width: 8%;
}

.input-in,
.input-out {
    width: 65px;
	height: 20px;
	text-align: center;
    background: inherit;
    z-index: 3;
    border: none;
    border-bottom: 1px solid #111;
    font-size: 14px;
}

.row-del {
    width: 4%;
    text-align: center;
    z-index: 3;
}

.row-del-head {
    width: 4%;
    text-align: center;
    z-index: 3;
}

.handle {
    position: absolute;
    width: 77%;
    height: 100%;
    z-index: 2;
    top: 0;
    left: 0;
    cursor: move;
    cursor: -webkit-grabbing;
}

.list {
    display: inline-block;
}

.inner-item {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    width: 100%;
    margin: 0;
    padding: 0;
}

.inner-item li {
    display: inline-block;
}

.pad-left {
    padding-left: 1em;
}

.ghost {
    opacity: .5;
    background: #393939;
}


/* -----------------------------------------------------------------------------
footer logging taps
----------------------------------------------------------------------------- */

#footer-area {
    float: left;
    overflow: hidden;
    float: left;
    width: 100%;
}

.foot {
    display: inline-block;
    *display: inline;
    vertical-align: top;
}

.logging {
    width: 83.8%;
}

.log-tabs {
   overflow: hidden;
   max-width: 263px;
   color: #111111;
}

.logwindow {
    background-color: #8c8c8c;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 5px 8px;
    font-size: 14px;
}

.logwindow:hover {
   background-color: #ddd;
}

.logwindow:active {
   background-color: #6b6868;
}

.active {
   background-color: #b0b0b0;
}

.log-content {
    display: block;
    padding: 6px 0 6px 6px;
    background-color: #b0b0b0;
    color: #111111;
}

#output {
   padding: 6px;
   background-color: #b0b0b0;
   color: #111111;
   max-height: 120px;
   overflow: scroll;
   overflow-x: hidden;
   white-space: pre-wrap;
   text-overflow: ellipsis;
   border: 1px solid #8c8c8c;
   font-size: 10px;
}

.playlist-op {
    width: 15.9%;
    height: 165px;
}

.list-save-reset {
    padding: 5px 22px;
    background-color: #b0b0b0;
    color: #111111;
    margin-left: 11px;
    height: 100%;
}

.list-save-reset p {
    margin: 0;
    padding-bottom: 10px;
}

.list-save-reset button {
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 8px 12px;
    margin: 4px;
    font-size: 14px;
}

#bt_save {
    background: #8C7373;
}

#bt_reset {
    background: #B3AC8E;
}

#bt_filler {
    background: #848B81;
}

#bt_save:hover {
    background: #b99696;
}

#bt_reset:hover {
    background: #d2caa4;
}

#bt_filler:hover {
    background: #b3beae;
}
#bt_save:active {
    background: #6a5757;
}

#bt_reset:active {
    background: #989279;
}


#bt_filler:active {
    background: #636960;
}