file_dialog.scss

@import "../node_modules/dojox/form/resources/UploaderFileList.css";
&.fileDialog {
    color: #333;

    label {
        font-weight: bold;
        padding: 0 0.5em;
        display: inline;
    }
    th {
        font-weight: bold;
        border-bottom: 2px solid black;
    }
    .dijitDialogPaneContent > div.intro {
        width: 27em;
        text-align: justify;
        position: relative;
        left: 12%;
        margin: 1.4em 0 1em 0;
    }

    .connector {
        background: #333;
        height: 6px;
        width: 12px;
        position: absolute;

        bottom: -6px;
        left: 50%;
        margin-left: -6px;
    }

    h2, h3 {
        margin: 0;
        padding: 0;
        font-size: 125%;
    }

    .dijitDialogPaneContent > div {
        position: relative;

        width: 40em;
        padding: 0 0 0.75em 0;
        margin: 6px 0;
    }
    div.aux {
        text-align: center;
        margin-bottom: 1em;
    }
    .resourceControls {
        height: 10em;
        position: relative;
    }
    .resourceControls > div {
        width: 19.5em;
        box-sizing: border-box;
        height: 100%;
    }
    .resourceControls > div > h3 {
        height: 19%;
    }

    .soleResourceControl {
        height: 10em;
        position: relative;
    }
    .soleResourceControl > div {
        width: 40em;
        box-sizing: border-box;
        height: 100%;
    }
    .soleResourceControl > div > h3 {
        height: 19%;
    }

    .localFilesControl {
        position: absolute;
        top: 0;
        left: 0;
    }

    .dijitUploader {
        position: absolute;
        margin: 0;
    }

    .remoteURLsControl textarea,
    .localFilesControl .dragArea {
        height: 81%;
        position: relative;
        border: 1px solid #b3b3b3;
        width: 100%;
        box-sizing: border-box;
    }
    .localFilesControl .dragArea:hover {
        border: 1px dashed green;
    }

    .localFilesControl .dragArea .dragMessage {
        height: 2em;
        position: absolute;
        top: 60%;
        font-weight: bold;
        margin-top: -1em;
        text-align: center;
        width: 100%;
    }
    .remoteURLsControl textarea {
        font-size: 10px;
        background: #f2f2f2;
    }
    .remoteURLsControl textarea:hover {
        background: white;
        border-color: #333;
    }

    .remoteURLsControl {
        position: absolute;
        top: 0;
        right: 0;
    }

    .resourceList {
        background: #bcd3ef;
    }

    .dijitSelect td.dijitStretch {
        width: 6em;
    }
    .resourceList > h3, .trackList > h3 {
         padding: 0 0.6em;
         line-height: 2.1;
         margin-bottom: 0.5em;
    }

    .emptyMessage {
        width: 100%;
        font-size: 110%;
        color: #686868;
        font-weight: bold;
        text-align: center;
        line-height: 4;
    }

    .trackList {
        background: #8cb1dd;
    }

    .resourceList > table, .trackList > table {
        width: 95%;
        padding: 0 0.75em 0.5em 0.75em;
        margin: 0 auto;
        border-collapse: collapse;
    }
}