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%; }}

.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;

    div.control-links {

        color: lighten($greyTxt, 20%);
        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;
            }
        }
    }

}

.last-bar {
    border-bottom-width: $iBorWidth;
    @include rounded2(bottom, right, 0.5em);
    @include rounded2(bottom, left, 0.5em);
}

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 {

    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; }
}