timestamper/www/css/ts-screen.scss

/*
 * author: Jonathan Bernard
 * TimeStamper main CSS for screen media types
 */

/*
    $obg: #D9CEB2;
    $bor: #948C75;
    $ibg: #D5DED9;
    $txt: #7A6A53;
    $bbg: #99B2B7;
*/

/*
$obg:  #979681;
$obor: #E6DEC7;
$ibg:  #657A8B;
$bbor: #B34C2B;
$bbg:  #252D42;
$txt:  #E6DEC7;
*/

$obg:  #252D42;
$obor: #B34C2B;
$ibg:  #657A8B;
$bbor: #979681;
$bbg:  #E6DEC7;
$txt:  #252D42;
$greyTxt:  darken($bbor, 20%);

$iBorWidth: 0.2em;

@import "rounded";

html {
    //background-color: $obg;
    background: url('/img/loving_blu.png') repeat;
}

body {
    width: 50%;
    background-color: $ibg;
    margin: auto;
    padding: 1em;
    border: solid $obor;
    border-top: 0;
    @include rounded2(bottom, left, 1em);
    @include rounded2(bottom, right, 1em);
}

@media all and (min-device-width: 480) { body { width: 50%; }}

@media all and (max-device-width: 480) { body { width: 80%; }}

.control-links {

    color: lighten($greyTxt, 40%);
    float: right;
    display: block;
    height: 100%;
    font-weight: bold;
    font-size: smaller;

    &:hover { color: $txt; }

    a {
        color: inherit; //lighten($greyTxt, 20%);
        text-decoration: none;
        margin-right: 0.5em;
        &:hover {
            color: $obor;
            text-decoration: underline;
        }
    }
}

.bar {

    font-family: Helvetica, sans-serif;
    color: $txt;
    background-color: $bbg;
    border-color: $bbor;
    border-style: solid;
    border-width: $iBorWidth;
    border-bottom-width: 0;
    padding: 0.1em 1em 0.1em 1em;
    overflow: hidden;

}

.last-bar {

    border-color: $bbor;
    border-style: solid;
    border-width: $iBorWidth;
    @include rounded2(bottom, right, 0.5em);
    @include rounded2(bottom, left, 0.5em);

    background-color: $bbg;
    padding: 0.1em 1em 0.1em 1em;
    overflow: hidden;
}

#more-entries {

    overflow: hidden;

    div {
        float: right;
        left: -50%;
        position: relative;

        a {
            position: relative;
            float: right;
            left: 50%;

            border: 1px solid $bbor;
            padding: 0.1em;
            background: lighten($bbg, 10%);
            color: $greyTxt;
            text-decoration: none;
            font-size: smaller;

            &:hover { color: $obor; }
        }
    }
}

.bar form {

    border-top: solid 1px $bbor;
    padding: 0.5em 0 0.5em 2em;
    overflow: hidden;

    label {
        span {
            float: left;
            width: 6em;
            padding-top: 0.1em;
        }
        color: $greyTxt;
        display: block;
        overflow: hidden;
    }

    input.text-input { border: 1px solid $bbor; }

    .form-col {
        overflow: hidden;
        float: left;
        padding-right: 2em;

        input.text-input { width: 10em; }
    }

    div.form-submit {
        float: left;
        width: 100%;
        overflow: hidden;
        padding: 0.5em 2em 0.5em 2em;
        position: relative;
        
        div {
            position: relative;
            float: right;
            left: -50%;

            input {
                position: relative;
                left: 50%;
            }
        }
    }


    div.form-submit input, input.form-submit { 
        border: 1px solid $bbor;
        background: lighten($bbg, 10%);
    }
}

#user {

    @include rounded2(top, left, 0.5em);
    @include rounded2(top, right, 0.5em);

    .control-links { padding-top: 0.6em; }

    #fullname, #username {
        font-weight: bold;
        font-size: x-large;
        float: left;
    }

    #username {
        padding-left: 0.2em;
        color: $greyTxt;
    }

    #change-pwd { display: none; }

    #user-info .form-submit {
    }
}

#timeline {

    #timeline-name, #timeline-desc { font-weight: bold; }

    #timeline-desc { color: $greyTxt; }

    .control-links { padding-top: 0.2em; }

}

#user-info, #timeline-info {
    display: none;
    width: 100%;
    float: left;
}

#new-entry {

    @include rounded2(bottom, right, 0.5em);
    @include rounded2(bottom, left, 0.5em);
    border-bottom: solid $bbor $iBorWidth;

    margin-bottom: 1em;

    form {
        border: 0;
        margin: 0;
        padding: 0;
    }

    input { color: $greyTxt; }

    #add-notes {
        display: none;
        padding: 0.5em 0 0.5em 2em;
    }

    #new-entry-input {
        margin-right: 1em;
        width: 15em;
    }
}

.entry-bar {
    
    background-color: $bbg;
    border-color: $bbor;
    border-style: solid;
    border-width: $iBorWidth;
    border-bottom-width: 0;
    padding: 0.1em 1em 0.1em 1em;
    overflow: hidden;

    .id {
        float: left;
        @include rounded(0.5em);
        padding: 0 0.3em 0 0.3em;
        background: $obor;
        color: lighten($greyTxt, 40%);
        font-weight: bold;
        min-width: 2em;
        text-align: right;
    }

    .details {

        float: left;

        .entry-mark {
            padding-left: 0.5em;
            font-size: medium;
            font-weight: bold;
            font-family: Helvetica, sans-serif;
        }
        .entry-notes {
            display: none;
            padding-left: 1.5em;
        }
    }
}

.top-entry {

    @include rounded2(top, left, 0.5em);
    @include rounded2(top, right, 0.5em);
}

#login-dialog {
    font-size: small;

    label, input { display: block }
    input.text {
        margin-bottom: 1em;
        width: 95%;
        padding: 0.4em;
    }

    form fieldset {
        padding: 0; border: 0; margin: 0;
    }

    .validate-tips { display: none; }
}

#ui-dialog-title-login-dialog, .ui-dialog-buttonset {
    font-size: medium;
}