Disco/Disco.Web/ClientSource/Style/jQueryUIExtensions.less

@import "Shared";

// Watermark
.watermark {
    color: @PlaceholderColour !important;
}

::-webkit-input-placeholder {
    color: @PlaceholderColour;
}

::-moz-placeholder {
    color: @PlaceholderColour;
}
/* firefox 19+ */
:-ms-input-placeholder {
    color: @PlaceholderColour;
}
/* ie */
input:-moz-placeholder {
    color: @PlaceholderColour;
}

// Autocomplete
.ui-autocomplete-loading {
    background: white url(data:image/gif;base64,R0lGODlhEAALAPQAAP///zNah+Hm7dng6O7x9DddiTNah1d3nJqtw3+Xs8fS3k5vlm6JqaGzx4KatcrU4FFymDZciHGMq+ru8t/l7Pb3+V9+oeLo7vT2+MTP3LLB0dTc5fHz9gAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCwAAACwAAAAAEAALAAAFLSAgjmRpnqSgCuLKAq5AEIM4zDVw03ve27ifDgfkEYe04kDIDC5zrtYKRa2WQgAh+QQJCwAAACwAAAAAEAALAAAFJGBhGAVgnqhpHIeRvsDawqns0qeN5+y967tYLyicBYE7EYkYAgAh+QQJCwAAACwAAAAAEAALAAAFNiAgjothLOOIJAkiGgxjpGKiKMkbz7SN6zIawJcDwIK9W/HISxGBzdHTuBNOmcJVCyoUlk7CEAAh+QQJCwAAACwAAAAAEAALAAAFNSAgjqQIRRFUAo3jNGIkSdHqPI8Tz3V55zuaDacDyIQ+YrBH+hWPzJFzOQQaeavWi7oqnVIhACH5BAkLAAAALAAAAAAQAAsAAAUyICCOZGme1rJY5kRRk7hI0mJSVUXJtF3iOl7tltsBZsNfUegjAY3I5sgFY55KqdX1GgIAIfkECQsAAAAsAAAAABAACwAABTcgII5kaZ4kcV2EqLJipmnZhWGXaOOitm2aXQ4g7P2Ct2ER4AMul00kj5g0Al8tADY2y6C+4FIIACH5BAkLAAAALAAAAAAQAAsAAAUvICCOZGme5ERRk6iy7qpyHCVStA3gNa/7txxwlwv2isSacYUc+l4tADQGQ1mvpBAAIfkECQsAAAAsAAAAABAACwAABS8gII5kaZ7kRFGTqLLuqnIcJVK0DeA1r/u3HHCXC/aKxJpxhRz6Xi0ANAZDWa+kEAA7AAAAAAAAAAAA) /*Images/Status/loading.gif*/ right center no-repeat;
}

.ui-autocomplete {
    max-height: 150px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
    /* add padding to account for vertical scrollbar */
    //padding-right: 20px;
}
/* IE 6 doesn't support max-height
* we use height instead, but this forces the menu to always be this tall
*/
* html .ui-autocomplete {
    height: 150px;
}

// timepicker
.ui-timepicker-div .ui-widget-header {
    margin-bottom: 8px;
}

.ui-timepicker-div dl {
    text-align: left;
}

    .ui-timepicker-div dl dt {
        float: left;
        clear: left;
        padding: 0 0 0 5px;
    }

    .ui-timepicker-div dl dd {
        margin: 0 10px 10px 45%;
    }

.ui-timepicker-div td {
    font-size: 90%;
}

.ui-tpicker-grid-label {
    background: none;
    border: none;
    margin: 0;
    padding: 0;
}

.ui-timepicker-rtl {
    direction: rtl;
}

    .ui-timepicker-rtl dl {
        text-align: right;
        padding: 0 5px 0 0;
    }

        .ui-timepicker-rtl dl dt {
            float: right;
            clear: right;
        }

        .ui-timepicker-rtl dl dd {
            margin: 0 45% 10px 10px;
        }


// Progress Bar
@-moz-keyframes progressBarKeyframes {
    from {
        background-position-x: 0px;
    }

    to {
        background-position-x: 47px;
    }
}

@-webkit-keyframes progressBarKeyframes {
    from {
        background-position-x: 0px;
    }

    to {
        background-position-x: 47px;
    }
}

@keyframes progressBarKeyframes {
    from {
        background-position-x: 0px;
    }

    to {
        background-position-x: 47px;
    }
}

.ui-progressbar-value {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAYCAYAAAC8/X7cAAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QwYAwcRFZ4/TAAAAmtJREFUWMO1l+lu2kAQx/+WlqMYCGmMzRGwcUhoVbWq1Ifq2+RF+hJ9hVRpohLuCB9AwAaqfqiPfjBEhtrcO5/wrGf2N4eXWeb223cXlCSeyUHIJGi5hzqagPny9ZZKAOfyZ9TyaWrw940u5noXJB4lJ3eeqXzCtUAP/qHZgzXpIx4lILFIcACuCzBM+HOY7kz6iGs+uRHABcAcCP/YUWAZCpbcJBZWgaDGYjbs7gJp8QOqC/igBACezr+2/nv5TtBavavCmvQ9+IWexMhqAMsNwiQICgDSpRpknl7bPPU0WIYCf8u77qYK7CHp4g2kbIoafLM/hGWqCGIl8chxAaQKVZQ5evBtdQTbUBDGeVQFkvkrlC9YavAdbQw7JPOvAUQPrADLlVDm6WW+q49hmRq28R3UQgmuiEvujBr882ACZzrALmx7t9Cb8xyK2Qw1+P7QgDMfYlcu0lZfdm+brAg5EoNm/DnZH5NfWsoLfg+7e9kQy3Z2g+dFiLm3sB06s19LHWOut/e22ykAlhch5S9gu3Tgm8oYc611kO3WAJKCBLnAwaGV+cEMZr9xsP3GAJK5CuQCR61tmoMZzN7jUT6I7QQHwAoVXBWzsCldd5r6FGbv4Wg/gRVgs2VUL3lqmW9o5kngvQrYzsoxmOBF3IgF2I77Oj2HTdOuTxc6va6tP+kzTDv3/9mE7YUtvlcqwAoSagt4GlLXZzDbP07qk/y1be+D5UXUpAK1o7KuTTFp3Z3cL7FsBylBwju5dNRRuV5+v+6XOoXRvltcQlwwDBNwhfX029b9z94wx5Xw/kj4jRfw5xHM3k9qs9M/9mQP+uNoCX0AAAAASUVORK5CYII=) /*Images\Status\progressBar.png*/;
    background-position: 0px 0;
    -moz-animation: progressBarKeyframes 2s linear infinite;
    -o-animation: progressBarKeyframes 2s linear infinite;
    -webkit-animation: progressBarKeyframes 2s linear infinite;
    animation: progressBarKeyframes 2s linear infinite;
    -moz-transition-property: width;
    -o-transition-property: width;
    -webkit-transition-property: width;
    transition-property: width;
    -moz-transition-duration: .1s;
    -o-transition-duration: .1s;
    -webkit-transition-duration: .1s;
    transition-duration: .1s;
}

// Tabs
.ui-tabs .ui-tabs-panel {
    padding: .5em;
}

/*.ui-tabs > ul > li.ui-state-default
{
    font-weight: normal;
}

.ui-tabs > ul > li.ui-state-active
{
    font-weight: bold;
}*/

// Dialogs

.ui-dialog {
    animation-name: ui-dialog-show;
    -webkit-animation-name: ui-dialog-show;
    animation-duration: .2s;
    -webkit-animation-duration: .2s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
}

@keyframes ui-dialog-show {
    0% {
        transform: translateY(-30px);
        opacity: 0.0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@-webkit-keyframes ui-dialog-show {
    0% {
        -webkit-transform: translateY(-30px);
        opacity: 0.0;
    }

    100% {
        -webkit-transform: translateY(0);
        opacity: 1;
    }
}

.ui-widget-overlay.ui-front {
    animation-name: ui-dialog-fadeIn;
    -webkit-animation-name: ui-dialog-fadeIn;
    animation-duration: .2s;
    -webkit-animation-duration: .2s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
}

@keyframes ui-dialog-fadeIn {
    0% {
        opacity: 0.0;
    }

    100% {
        opacity: 0.5;
    }
}

@-webkit-keyframes ui-dialog-fadeIn {
    0% {
        opacity: 0.0;
    }

    100% {
        opacity: 0.5;
    }
}

// Initially hide dialogs

.page .dialog {
    display: none;
}

.ui-dialog {
    padding: 0;
    border-color: @HeaderBackgroundColour;
    background: #fcfcfc;
    box-shadow: rgba(20,20,20,.7) 0px 0px 50px;
    top: 50px !important;
}

    .ui-dialog .ui-widget-header {
        border-top: none;
        border-left: none;
        border-right: none;
        border-bottom-color: @BackgroundColour;
        background: @HeaderBackgroundColour;
        color: #fff;
        font-size: 1.1em;
        font-weight: normal;
        text-transform: uppercase;
        padding: .6em 1em;
    }

// Tooltip
body .ui-tooltip {
    border-width: 1px;
    -webkit-box-shadow: none;
    box-shadow: none;
}