timestamper/www/css/ts-screen.scss

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

@import "rounded";

$txtClr: #222;

* {
    color: $txtClr;
    margin: 0;
    padding: 0;
}

body {
    width: 70%;
    margin: auto;
}

#top {
    position: fixed;
    top: 0px;
    background: white;
    width: 70%;

    #fade-bar {
        background: url('img/fade.png') repeat-x;
        height: 32px;
        width: 100%;
    }
}

#user {

    font-family: "Josefin Sans";
    width: 100%;

    .fullname, .username {
        display: inline-block;
        font-size: larger;
    }

    .fullname-input { display: none; }

    &.fullname-edit {
        .fullname-input { display: inline-block; }
        .fullname { display: none; }
    }

    .drop-menu { display: inline-block; }

    .drop-menu .drop-menu-items {

        float: right;
        list-style: none;

        li {
            float: right;
            text-align: center;
            //margin-top: -0.5em;
            padding-right: 1em;
        }
    }

    a {
        display: inline-block;
        text-decoration: none;

        &:hover {
            text-decoration: underline;
        }
    }
}

#timeline {

    border-bottom: thin solid black;
    font-family: Arvo;
    font-size: 1.5em;

    .timeline-desc {
        display: inline-block;
        width: 70%;
    }

    .timeline-desc-input { width: 70% } 

    .timeline-id { display: inline-block; }

    .timeline-desc-input, .timeline-id-input { display: none; }

    &.edit-id {
        .timeline-id-input { display: inline-block; }
        .timeline-id { display: none; }
    }

    &.edit-desc {
        .timeline-desc-input { display: inline-block; }
        .timeline-desc { display: none; }
    }
    
    .drop-menu {
        text-align: right;
        display: inline-block;
        width: 29%;

        .drop-menu-items  {
            text-align: right;
            right: 0;
        }
    }
}

#new-entry {
    margin-top: 5.5em;
    padding: 0.5em 0.5em;

    .mark-input, .timestamp-input {
        border: solid thin lighten($txtClr, 20%);
        -webkit-box-shadow: inset 0px 2px 4px #CCC;
        box-shadow: inset 0px 2px 4px #CCC;
        margin-bottom: 0.5em;
        font-family: Cantarell;
    }

    .mark-input { width: 78%; }

    .edit-mark {
        .mark-input { display: inline-block; }
        .mark { display: none; }
    }

    .edit-timestamp {
        .timestamp-input { display: inline-block; }
        .timestamp { display: none; }
    }
}

#entries {
    
    padding: 0.5em 0.5em;

    .entry {

        font-family: Cantarell;

        div { display: inline-block; }

        .timestamp, .timestamp-input { width: 10%; }

        .duration { width: 10%; }

        .mark { width: 78%; }

        .mark-input, .timestamp-input { display: none; }

        .notes { display: none; }
            
    }

}

.drop-menu {
    position: relative;
    
    .drop-menu-items {
        background: white;
        display: none;
        list-style: none;
        position: absolute;
    }

    &:hover .drop-menu-items, .drop-menu-items:hover {
        display: block;
    }

}

.footer {

    border-top: thin solid black;
    color: lighten($txtClr, 40%);
    font-family: Bentham;
    margin: 1em 0;
    padding-top: 1em;
    text-align: center;
    width: 100%;

    a {
        color: lighten($txtClr, 40%);
        text-decoration: none;

        &:hover { text-decoration: underline; }

    }
}

.logo {
    font-family: Bentham;
    text-decoration: overline underline;
    color: inherit;
}