@import colors
@import mixins

$active-tab-text-color = $text-color
$active-tab-text-color-darktheme = $text-color-darktheme
$inactive-tab-text-color = $inactive-link-color
$inactive-tab-text-color-darktheme = $inactive-link-color-darktheme

/* latin */
@font-face
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans'), local('OpenSans'), url(../fonts/open_sans.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;

/* make <body> cover entire viewport */
html
    height: 100%
body
    min-height: 100%

body
    background: $window-color
    overflow-y: scroll
    margin: 0
    color: $text-color
    font-family: 'Open Sans', sans-serif
    font-size: 1em
    line-height: 1.4
    @media (max-width: 800px)
        font-size: 0.875em
    @media (max-width: 1200px)
        font-size: 0.95em

body.darktheme
    color: $text-color-darktheme
    background: $window-color-darktheme

h1, h2, h3
    font-weight: normal
    margin-bottom: 1em

h1
    font-size: 2em

h2
    font-size: 1.5em

p,
ol,
ul
    margin: 1em 0

th
    font-weight: normal

a
    cursor: pointer
    color: $main-color
    text-decoration: none
    transition: color 0.1s linear
    &.inactive
        color: $inactive-link-color
        cursor: default
    &.icon
        color: $inactive-link-color
        opacity: .5
    &:focus
        outline: 2px solid $main-color
    .vim-nav-hint
        position: absolute
        visibility: hidden
.darktheme a
    &.inactive
        color: $inactive-link-color-darktheme
    &.icon
        color: $inactive-link-color-darktheme

a.append, span.append
    margin-left: 1em
form .fa-question-circle-o
    font-size: 110%
    vertical-align: middle

#content-holder
    padding: 1.5em
    text-align: center
    @media (max-width: 1000px)
        padding: 1em
    >.content-wrapper
        box-sizing: border-box /* make max-width: 100% on this element include padding */
        text-align: left
        display: inline-block
        margin: 0 auto
        >*:first-child, form h1
            margin-top: 0
        nav.buttons
            ul
                display: block
                max-width: 100%
                white-space: nowrap
                overflow-x: auto
                &::-webkit-scrollbar
                    height: 6px
                    background-color: $scrollbar-bg-color
                &::-webkit-scrollbar-thumb
                    background-color: $scrollbar-thumb-color
    >.content-wrapper:not(.transparent)
        background: $top-navigation-color
        padding: 1.8em
        @media (max-width: 1000px)
            padding: 1.5em
        .content,
        .content .subcontent
            >*:last-child
                margin-bottom: 0

.darktheme #content-holder
    >.content-wrapper:not(.transparent)
        background: $top-navigation-color-darktheme

hr
    border: 0
    border-top: 1px solid $line-color
    margin: 1em 0
    padding: 0

.darktheme hr
    border-top: 1px solid darken($line-color, 25%)

nav
    ul
        list-style-type: none
        padding: 0
        margin: 0
        display: inline-block
        li
            display: block
            padding: 0
            margin: 0
            a
                display: inline-block
            img
                margin: 0
                vertical-align: top /* fix ghost margin under the image */

    &.buttons
        margin: 1em 0
        line-height: 2.3em
        vertical-align: middle
        ul
            li
                display: inline-block
            li a
                padding: 0 1.2em
            li:not(.active) a
                color: $inactive-tab-text-color
            li:hover:not(.active) a
                color: $active-tab-text-color
            li.active a
                background: $active-tab-background-color
                color: $active-tab-text-color
            :focus
                background: $focused-tab-background-color
                outline: 0

    &#top-navigation
        background: $top-navigation-color
        margin: 0
        ul
            display: block
            text-align: right
            li
                display: inline-block
                float: left
                a
                    padding: 0 1.5em
            #mobile-navigation-toggle
                display: none
                width: 100%
                padding: 0 1em
                line-height: 2.3em
                font-family: inherit
                border: none
                background: none
                color: $active-tab-text-color
                .site-name
                    display: block
                    float: left
                    max-width: 50vw
                    overflow: hidden
                    text-overflow: ellipsis
                .toggle-icon
                    display: block
                    float: right
            @media (max-width: 1000px)
                text-align: left
                li
                    display: none
                    float: none
                    a
                        display: block
                        padding: 0 1em
                #mobile-navigation-toggle
                    display: block
                &.opened
                    li
                        display: block
        ul li[data-name=account],
        ul li[data-name=register],
        ul li[data-name=login],
        ul li[data-name=logout],
        ul li[data-name=settings],
        ul li[data-name=help]
            float: none
        .access-key
            text-decoration: underline
        .thumbnail
            width: 1.5em
            height: 1.5em
            margin: calc((2.3em - 1.5em) / 2)
            margin-right: 0.6em
            margin-left: calc(0.6em - 1.2em)
            float: left
            @media (max-width: 1000px)
                display: none

.darktheme nav
    &.buttons
        ul
            li:not(.active) a
                color: $inactive-tab-text-color-darktheme
            li:hover:not(.active) a
                color: $active-tab-text-color-darktheme
            li.active a
                background: $active-tab-background-color-darktheme
                color: $active-tab-text-color-darktheme
            :focus
                background: $focused-tab-background-color-darktheme
    &#top-navigation
        background: $top-navigation-color-darktheme
        ul
            #mobile-navigation-toggle
                color: $text-color-darktheme

a .access-key
    text-decoration: underline

.messages
    margin: 0 auto
    text-align: left
    .message
        box-sizing: border-box
        width: 100%
        max-width: 40em
        margin: 0 0 1em 0
        display: inline-block
        text-align: left
        padding: 0.5em 1em
        &.info
            border: 1px solid $message-info-border-color
            background: $message-info-background-color
        &.error
            border: 1px solid $message-error-border-color
            background: $message-error-background-color
        &.success
            border: 1px solid $message-success-border-color
            background: $message-success-background-color

.darktheme .messages
    .message
        &.info
            border: 1px solid darken($message-info-border-color, 30%)
            background: darken($message-info-background-color, 60%)
        &.error
            border: 1px solid darken($message-error-border-color, 30%)
            background: darken($message-error-background-color, 60%)
        &.success
            border: 1px solid darken($message-success-border-color, 30%)
            background: darken($message-success-background-color, 80%)

.thumbnail
    /*background-image: attr(data-src url)*/ /* not available yet */
    vertical-align: middle
    background-repeat: no-repeat
    background-size: cover
    background-position: center
    display: inline-block
    width: 20px
    height: 20px
    &.empty
        background-image:
            linear-gradient(45deg, $transparency-grid-square-color 25%, transparent 25%),
            linear-gradient(-45deg, $transparency-grid-square-color 25%, transparent 25%),
            linear-gradient(45deg, transparent 75%, $transparency-grid-square-color 75%),
            linear-gradient(-45deg, transparent 75%, $transparency-grid-square-color 75%)
        background-position: 0 0, 0 10px, 10px -10px, -10px 0px
        background-repeat: repeat
        background-size: 20px 20px
    img
        opacity: 0
        width: auto
        height: 100%
    video
        width: auto
        height: 100%

.flexbox-dummy
    height: 0 !important
    padding-top: 0 !important
    padding-bottom: 0 !important
    margin-top: 0 !important
    margin-bottom: 0 !important

.table-wrap
    overflow-x: auto
    &::-webkit-scrollbar
        height: 6px
        background-color: $scrollbar-bg-color
    &::-webkit-scrollbar-thumb
        background-color: $scrollbar-thumb-color

/* hack to prevent text from being copied */
[data-pseudo-content]:before {
    content: attr(data-pseudo-content)
}
