bookmarklet.styl

@import 'nib'
@import 'constants'

Dark = rgba(0,0,5,0.3)
Light = rgba(255,255,255,0.9)
InactiveColor = #999
Falloff = 40px
Saturated = 20px

body
    font-family: 'helvetica'
    margin: 0
    padding: 0
    background-color: #F9FBFA 
    background-image: url(images/paper-fibers-64-2.png);

@keyframes phong {
    0% {
        background-position-x: -100px
        opacity: 1
    }
    25% {
        background-position-x: -100px
        opacity: 1
    }
    75% {
        background-position-x: SBWidth
        opacity: 0
    }
    100% {
        background-position-x: SBWidth
        opacity: 0
    }
}


.filter
    position: absolute
    left: 0px
    top: 0px
    z-index: 10
    width: 200%
    height: 100%
    background-image: linear-gradient(left, Dark, Falloff Light, Falloff+Saturated Light, Falloff*2+Saturated Dark);
    background-repeat: repeat-x

.filter.foldout
    animation: phong Duration
    opacity: 0
    
h1
    font-size: 1em
    display: inline
a
    text-decoration: none
    &:hover
        text-decoration: underline
    &:visited
        color: InactiveColor

ol.resource_list
    margin-top: 2em
    margin-right: 1em
    .page, .pageControl
        display: none 
    .description, .counts
        display: none
    li
        color: InactiveColor
        margin-top: .8em

        ul.pageControl
            margin-left: auto;
            margin-right: auto;
            text-align: center;
            padding: 0 0;
            padding-right: 1em; 
            
            li
                opacity: 0.3
                display: inline-block;
                width: .8em;
                height: .8em;
                border-radius: .4em;
                background-color: black;
 
            li.note
                background-color: yellow;
                box-shadow: inset 0px 0px 0px .3em black;

    li.current
        color: #222
        a:visited, a
            color: initial
        div.description
            display: block
        ul.pageControl
            display: block 
            li.current
                opacity: 1.0
        div.page.current
            display: block;
            background-color: rgba(254,254,176,0.7)
            padding: 0em .5em;
            border: 1px solid #fff;
            color: #393838;
            margin-top: .6em;
            margin-left: -.5em;
            box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
            
            code
                background-color: yellow;
                font-weight: 800;
                color: red;