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

#user {

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

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

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

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

#user-info {
    display: none;
}

#timeline {

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

    #timeline-desc { color: $greyTxt; }

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

#timeline-info {
    display: none;
}