finnstonks.less

@import url('https://fonts.googleapis.com/css?family=Fredoka+One|Signika+Negative:300,400,700');

@base-size:         20px;
@base-size-xs:      12px;
@large:             36px;

@vmargin:            1em;
@hmargin:           .5em;

@col1:              100%;
@colh:               15%;   
@col2:               20%;
@padd:                 0;

@bg:                #222;
@base-color:        #bbb;
@positive:          #696;
@negative:          #a66;
@negative-highlight:#a54;
@bright:            #fff;
@cashout:           #996;

@hline: 1px solid rgba(250,250,250,.1);
@hline-thicc: 2px solid rgba(250,250,250,.1);

@screen-xs:          480px;
@screen-sm:          768px;
@screen-md:          992px;
@screen-lg:         1400px;

@screen-xs-max:     (@screen-sm-min - 1);
@screen-sm-min:     @screen-sm;
@screen-sm-max:     (@screen-md - 1);
@screen-md-min:     @screen-md;
@screen-md-max:     (@screen-lg - 1);
@screen-lg-min:     @screen-lg;

html {
    font-size: @base-size;
    @media(max-width: @screen-md-max){
        font-size: @base-size-xs;
    }
}

body {
    font-family: 'Signika Negative', sans-serif;
    font-weight: 600;
    overflow: visible;
    background: @bg;
    &.light {
        background: #fff;
    }
    .bgs {
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-blend-mode: screen;
        background: url(stocks-bg.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
}

form {
    margin: 0;
    padding: 0;
}

.hidden, .permahidden {
    display: none !important;
}

.vmid {
    // position: relative;
    // top: 50%;
    // transform: translateY(-50%);
}

.hr {
    margin: @hmargin*2 0;
    border-bottom: @hline;
}

.secondary {
    color: darken(@base-color, 20%);
    font-size: @base-size-xs;
    .highlight {
        color: darken(@base-color, 5%);
    }
}

.xs {
    font-size: @base-size-xs;
}

.dim {
    .secondary;
}

.highlight {
    color: @base-color;
}

.interest .right-chart canvas {
    width: 100% !important;
    border-left: @hline-thicc;
}

.query-ticker {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: @bg;
    z-index: 2;
    padding: 40px;
    color: #fff;
    input, button {
        border: 0;
        border-radius: 4px;
        background: #fff;
        color: @bg;
        padding: 10px;
    }
    .results {
        margin-top: 20px;
        .result {
            margin: 5px 0;
            .ticker, .info {
                display: inline-block;
            }
            .ticker {
                width: 130px;
            }
            .info {
                color: #888;
                font-weight: 300;
            }
        }
    }
}

.container-fluid {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
}

.stocks-container {
    text-align: center;
    height: 100%;
    width: 100%;
    margin: auto;
    max-width: 600px;
}

.message {
    .vmid;
    display: none;
    transition: 1s ease-in-out;
    max-width: 60%;
    height: auto;
    margin: auto;
    color: @negative;
    .err {
        color: @bright;
        margin-bottom: 10px;
    }
}

.stocks, .portfolio, .lookout {
    text-align: left;
    display: none;
    color: @base-color;
    width: 100%;
    // max-width: 560px;
    padding: 10px;
    margin: auto;
    transition: .5s ease-in-out;

    .pos {
        color: @positive;
    }
    .neg {
        color: @negative;
    }

    &.box {
        background: rgba(0,0,0,.4);
        border-radius: 5px;
    }

    &.light {
        color: darken(@base-color, 15%);
        .pos {
            color: saturate(@positive, 15%);
        }
        .neg {
            color: lighten(@negative, 15%);
        }
        &.box {
            background: rgba(255,255,255,.4);
        }
        .base.alarm {
            background: rgba(250, 180, 180, .3);
        }
    }

    .base {
        display: table;
        position: relative;
        margin-bottom: @hmargin;
        transition: .2s linear;
        width: 100%;
        &.full {
            width: 100%;
        }
        &.half {
            width: 50%;
        }
        > div {
            padding: @padd;
        }
        &.very-compact {
            margin-bottom: 0;
        }
        .stock {
            padding-right: @vmargin;
            display: table-cell;
            vertical-align: top;
        }
        .title, .purchase, .market, .cashoutd {
            display: table-cell;   
            vertical-align: top;
        }
        .cashoutd {
            cursor: pointer;
            text-align: right;
            color: @cashout;
            font-size: @base-size;
            .pos {
                color: @cashout;
            }
            .pos:before {
                content: '+';
            }
            .neg:before {
                // content: '-';
            }
            .cpercent:after {
                content: ' %';
            }
        }
        &.alarm {
            cursor: pointer;
            background: rgba(70, 20, 20, .7);
            padding: 0 .5em;
            margin-left: -.5em;
            width: calc(100% + 1em);
            border-radius: 5px;
            .title {
                color: @negative-highlight;
            }
            .trend .neg {
                color: @negative-highlight;
            }
        }
    }

    .inline {
        display: inline-block;
        width: auto;
    }

    .title {
        display: table-cell;
        font-size:  @base-size;
    }
    .meta {
        font-size: @base-size-xs;
        .secondary;
        .pcs {
            display: none;
        }
    }
    .purchase, .prices {
        cursor: pointer;
        display: table-cell;
        text-align: right;
        width: @colh;
        padding-right: @vmargin;
        font-size: @base-size;
        vertical-align: top;
        .price {
            
        }
        .pcs {
            .secondary;
            .highligh {
                color: @base-color;
            }
        }
        .add {
            font-size: @base-size-xs;
            line-height: @base-size-xs;
        }
    }
    .prices {
        width: 10%;
    }
    .market {
        cursor: pointer;
        display: table-cell;
        width: @col2;
        padding-right: @vmargin;
        text-align: right;
        font-size: @base-size;
        .price.eur.pos:before {
            content: '+';
        }
        .price.percent:after {
            content: ' %';
        }
    }
    .percents {
        cursor: pointer;
        display: table-cell;
        text-align: right;
        width: @col2;
        font-size: @base-size;
        .percent:after{
            content: ' %';
        }
    }
    .trend {
        cursor: pointer;
        display: table-cell;
        vertical-align: middle;
        width: 10%;
        font-size: @base-size-xs;
        line-height: calc(@base-size-xs - 1px);
        text-align: right;
        height: 100%;
    }

    .charts {
        margin-left: 2em;
        width: 60px;
        height: 48px;
        display: inline-block;
        vertical-align: top;
    }

    .interest .charts {
        display: table-cell;
        width: 30%;
        vertical-align: top;
        height: 40px;
        max-height: 40px;

        &.left-chart {
            padding-left: @vmargin;
            width: 35%;
        }
        &.right-chart {
            width: 20%;
        }
    }

    .interest.compact {
        .charts {
            height: 20px;
            max-height: 20px;
        }
    }

    .tops {
        font-size: @large;
        margin-right: -3px;
        &:not(:first-child) {
            margin-bottom: @hmargin;
            padding-bottom: @hmargin;
            border-bottom: @hline;
        }
        &.titles {
            .secondary;
            margin-bottom: 0;
        }
        &.values .difference {
            white-space: nowrap;
            cursor: pointer;
            .eur, .eur-with-sales, .percent {
                display: inline;
                &.neg:before {
                    // content: '-';
                }
                &.pos:before {
                    content: '+';
                }
            }
            .percent:after {
                content: ' %';
            }
        }
        > div {
            width: 33.333%;
            display: inline-block;
            line-height: .9em;
        }
        .difference {
            text-align: center;
        }
        .paid {
            cursor: pointer;
        }
        .value, .value-with-liquid, .value-only-liquid {
            cursor: pointer;
            text-align: right;
        }
    }
    #totale {
        padding: @padd;
        width: 100%;
        margin-top: @hmargin;
        padding-top: @hmargin;
        border-top: @hline;
        font-size: @base-size;
        .percents:after{
            content: ' %';
        }
    }
}

.portfolio, .lookout {
    padding: 10px;
    margin: 0;
}

.loader {
    .vmid;
    display: inline-block;
    width: 80px;
    height: 80px;
    transition: 1s ease-in-out;
    z-index: 3;
    &:after {
        content: " ";
        display: block;
        width: 64px;
        height: 64px;
        margin: 8px;
        border-radius: 50%;
        border: 6px solid #fff;
        border-color: #fff transparent #fff transparent;
        animation: lds-dual-ring 1.2s linear infinite;
    }
}

@keyframes lds-dual-ring {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}