@import "include/normalize";
//+TODO: @import (inline) "include/noscript.less";
@import "themes/colours-2016";

@import "include/fonts";
@import "include/potato";
@import "include/mobile";
@import "include/animations";

// metrics
$default-spacing:        10px;
$default-corner-radius:  3px;
$side-nav-width:         220px;

$header-height:          60px; // the channel header bar
$input-height:           55px; // the input div area
$footer-height:          15px; // the branding footer
$chat-left-margin:       60px;
$alert-height:           30px;

html, body {
    overflow:            hidden;
    height:              100%;
    width:               100%;
    line-height:         $line-height;
    -webkit-user-select: text;
}

div#potato-root {
    overflow:            hidden;
    height:              100%;
    width:               100%;
}

div#potato {
    display:             flex;
    flex-direction:      column;
    width:               100%;
    height:              100%;
}

footer#potato-foot {
    height:              $footer-height;
    border-top-width:    0;
    background-color:    $classicblue;
    color:               $aquamarine;

    text-align:          center;
    line-height:         $footer-height;
}

#potato-alert {
    height:              $alert-height;
    font-family:         $fonts-list;
    font-weight:         900;
    background-color:    $strawberryice;
    color:               $white;
    text-align:          center;
    line-height:         $line-height;
    padding-top:         ($alert-height - $line-height)/1.8;
    font-size:           1.2*$font-size;
    text-shadow:         0 1px 1px rgba(0,0,0,0.25);

    a.enable {
        color:           $white;
        text-decoration: underline;
        cursor:          pointer;
    }
    a.dismiss {
        cursor:          pointer;

        &::before {
            content: '  ';
            white-space: pre;
            background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzODQgNTEyIj48cGF0aCBkPSJNMzIzLjEgNDQxbDUzLjktNTMuOWM5LjQtOS40IDkuNC0yNC41IDAtMzMuOUwyNzkuOCAyNTZsOTcuMi05Ny4yYzkuNC05LjQgOS40LTI0LjUgMC0zMy45TDMyMy4xIDcxYy05LjQtOS40LTI0LjUtOS40LTMzLjkgMEwxOTIgMTY4LjIgOTQuOCA3MWMtOS40LTkuNC0yNC41LTkuNC0zMy45IDBMNyAxMjQuOWMtOS40IDkuNC05LjQgMjQuNSAwIDMzLjlsOTcuMiA5Ny4yTDcgMzUzLjJjLTkuNCA5LjQtOS40IDI0LjUgMCAzMy45TDYwLjkgNDQxYzkuNCA5LjQgMjQuNSA5LjQgMzMuOSAwbDk3LjItOTcuMiA5Ny4yIDk3LjJjOS4zIDkuMyAyNC41IDkuMyAzMy45IDB6Ii8+PC9zdmc+") no-repeat;
            float:       right;
            padding-right: $font-size;
        }
    }
}

main#potato-core {
    margin:              0;
    width:               100%;
    flex:                1;
    display:             flex;
    flex-direction:      row;
    overflow:            hidden;

    section.channel {
        margin:          0;
        flex:            1 1 auto;
        margin:          0;
        display:         flex;
        flex-direction:  column;
        position:        relative;

        @import "channel/emoji";
        @import "channel/header";    // channel name + search
        @import "channel/history";   // article tag
        @import "channel/input";     // the input box
    }

    @import "channel/left-nav";  // domain name + channels
    @import "channel/toolbar";   // roster + etc
}

@import "user/preferences";

// -- MAIN CONTENT
#help {
    display:    none;
}

#warning {
    display:    none;
}

#warning.active {
    display:          block !important;
    position:         absolute;
    top:              0;
    left:             0;
    right:            0;
    z-index:          10;
    min-height:       50px;
    font-weight:      900 !important;
    white-space:      nowrap;
    overflow:         hidden;
    text-overflow:    ellipsis;
    font-style:       normal;
    line-height:      50px;
    font-size:        2em;
    text-align:       center;
    background-color: $strawberryice !important;
    color:            $white;
}

#upload-progress {
    display:     none;

    #show-progress {
        display: none;
    }
}

#upload-progress.active {
    display:              block !important;
    position:             absolute;
    top:                  0;
    left:                 0;
    right:                0;
    z-index:              10;
    min-height:           2*$font-size;
    height:               2*$font-size;
    opacity:              0.9;
    background-color:     $glaciergray !important;

    #uploading-text {
        position:         absolute;
        top:              0;
        left:             0;
        line-height:      2*$font-size;
        padding-left:     10px;
        z-index:          14;
        color:            $white;
    }

    #uploading-percent {
        position:         relative;
        left:             0%;
        padding-left:     10px;
        line-height:      2*$font-size;
        padding-right:    10px;
        opacity:          .96;
        z-index:          16;
        color:            $woodbine;
        background-color: $glaciergray;
    }

    #uploading-cancel {
        display: none;
    }

    #show-progress {
        position:         absolute;
        top:              0;
        left:             0;
        right:            0;
        display:          block;
        z-index:          11;
        min-height:       2*$font-size;
        height:           2*$font-size;
        background-color: $treetop !important;
    }
}

#potato-root.drop-is-active + #help, #potato-root + #help.drop-is-active, #potato.drop-is-active + #help, #potato + #help.drop-is-active {
    display:          block;
    position:         absolute;
    top:              20%;
    left:             20%;
    right:            20%;
    bottom:           20%;
    z-index:          10;
    border-width:     4px;
    border-style:     solid;
    border-radius:    20px;
    padding:          30px;
    font-size:        5em;
    text-align:       center;
    background-color: $glaciergray-background !important;
    border-color:     $titanium;
    color:            $marsala;
}

.red {
    background-color: red;
}

.unread-highlight {
    font-weight:      bold;
}

.typing-highlight > span:after {
    content:       " (typing)";
}

.chat-entry > blockquote > div p:first-child {
    margin-top:    0;
}
.chat-entry > blockquote > div p:last-child {
    margin-bottom: 0;
}

#message-list-panel {
    display:          none;
    position:         absolute;
    width:            45%;
    height:           75%;
    top:              15px;
    right:            15px;
    padding:          15px;
    border:           1px solid;
    z-index:          100;
    border-color:     $titanium;
    background-color: $glaciergray-background;
}

menu#activeBehaviour {
    position:         absolute;
    display:          none;
    overflow:         auto;
    z-index:          33 !important;
    max-height:       6*$line-height;
    border-radius:    3px;
    border:           1px solid #DDD;
    padding:          0;
    margin:           0;
    color:            black;
    background:       white;
    margin-top:       $line-height;
    margin-bottom:    0.2*$line-height;
    left:             0;
    right:            0;

    div {
        display:       block;
        padding-left:  $font-size;
    }

    div.active {
        background-color: $custard;
        font-weight:      700;
    }

    div.notice {
        display:       block;
        padding-left:  $font-size;
        font-style:    italic;
    }
}
