
@import "_var.sass"

// Styles only used by UGUI Developer Toolbar

body.dev
    margin-bottom: 280px

#uguiDevTools
    display: none
    width: 80%
    bottom: 0px
    left: 10%
    background-color: #FAFAFA
    border-width: 3px 3px 0px 3px
    border-style: solid
    border-color: #008CBA
    border-radius: 3px 3px 0px 0px
    margin-bottom: 7px
    padding: 0px 10px 0px 10px
    position: fixed
    color: $uguiTextColor
    font-family: sans-serif
    font-size: 14px
    line-height: 20px
    letter-spacing: 0px
    text-rendering: optimizeSpeed !important
    -webkit-font-smoothing: antialiased
    transition: $quick
    z-index: 9999
    a
        color: #428BCA
        &:hover,
        &:focus
            color: #2A6496
    nav
        margin: 0px 0px 2px 2px
        span
            +user-select-none
            font-size: 10px
            color: #666
            cursor: pointer
            &.selected
                font-weight: bold
                color: #555
                text-shadow: 1px 1px 0px #FAFAFA, -1px -1px 0px #FAFAFA, -1px 1px 0px #FAFAFA, 1px -1px 0px #FAFAFA
            &:after
                content: " | "
                color: #666
                font-weight: normal
                text-shadow: 0px 0px 0px rgba(0,0,0,0.0)
            &:last-of-type:after
                content: ""
    select
        background-color: #F5F5F5
        border: 1px solid #CCC
        margin: 0px 0px 3px 0px
        padding: 2px
        font-size: 13px
        font-family: sans-serif
    section
        display: block
        height: auto
        margin: 0px 0px 10px 0px
        padding: 1px
    img
        display: block
        width: 320px
        height: 180px
        border: 0px
        margin: 0px 7px 10px 0px
        padding: 0px
        float: left
    h3
        +bmp0
        margin-top: 18px
        color: $uguiTextColor
        font-family: sans-serif
        font-size: 18px
        font-weight: bold
        text-shadow: inherit
    p
        border: 0px
        margin: 8px 0px
        padding: 0px
        color: $uguiTextColor
        font-size: 14px
        line-height: 1.4
    code
        +bmp0
        color: $uguiTextColor
        font-size: 11px
        font-family: monospace
    ul,
    li strong
        +bmp0
        color: $uguiTextColor
        font-size: 14px
        line-height: 1.4
    li
        +bmp0
        margin-left: 23px
        color: $uguiTextColor
        line-height: 1.4
        font-size: 14px
    &.slideHide
        bottom: -7px !important
        transition: $quick
    *
        transition: $quick
    .uguiSwapper p,
    .uguiCommand span,
    .helpIntro
        color: #444
        font-size: 12px

.shrink
    height: 0px !important
    border: 0px !important
    margin: 0px !important
    padding: 0px !important
    font-size: 0px !important
    line-height: 0px !important
    opacity: 0 !important

#commandLine
    background-color: #F5F5F5
    border: 1px solid #CCC
    margin: 0px
    padding: 10px
    color: $uguiTextColor
    font-size: 11px
    font-family: monospace
    line-height: 1.4
    max-height: 92px
    overflow: auto
    &:before
        content: "Command Line Output Preview:"
        font-weight: bold

.commandLineHint
    font-family: sans-serif
    font-size: 12px
    em
        background-color: #F1F1F1
        border: 1px solid #CCC
        border-radius: 3px
        padding: 2px
        font-weight: bold
        font-size: 11px
        font-style: normal

#swatchSwapper,
span[data-nav="uguiExecutable"],
.executableName
    text-transform: capitalize

#setNewSwatch
    height: 24px
    background: #F5F5F5
    border: 1px solid #CCC
    padding: 0px 10px
    font-size: 11px
    line-height: 0px
    box-shadow: 0px 0px 2px #CCC
    vertical-align: top

.newSwatchSaved
    font-style: italic
    opacity: 0
    -webkit-transition: 0.5s ease-in-out
    transition: 0.5s ease-in-out
    &.showSaved
        opacity: 1

.executableName
    color: #555

.executableHelp
    max-height: 156px
