@finos/perspective-viewer/dist/themes/vaporwave.less

/******************************************************************************
 *
 * Copyright (c) 2017, the Perspective Authors.
 *
 * This file is part of the Perspective library, distributed under the terms of
 * the Apache License 2.0.  The full license can be found in the LICENSE file.
 *
 */

@import "../less/variables";
@import (reference) "material";

@import (css) url("https://fonts.googleapis.com/css?family=Material+Icons");
@import (css) url("https://fonts.googleapis.com/css?family=Roboto+Mono");
@import (css) url("https://fonts.googleapis.com/css?family=Orbitron");
@import (css) url("https://fonts.googleapis.com/css?family=Open+Sans");

@background: #150442;
@plugin_background: #1C0658;
@plugin_background_highlight: rgb(58, 12, 184);

perspective-viewer[settings] {
    --settings-button--content: "check_box_outline_blank";
}

perspective-viewer, .perspective-viewer-vaporwave{
    .perspective-viewer-material-base();
    padding: 24px;
    background-color: @background;
    color: #cfd8dc;
    font-family: "Orbitron";

    --active--color: #F4D676;
    --active--border: 1px solid #F4D676;
    --active--background: rgba(244, 214, 118,0.7);
    --inactive--color: #5C2686;

    --settings-button--content: "check_box_outline_blank";
    
    ////////////////////////////////////////////////////////////////////////////
    ////
    //// Type-specific
    ////

    --float--column-type--content: "DBL";
    --float--column-type--color: #36CDC4;

    --float--hypergrid--font-family: "Roboto Mono";
    --float--hypergrid--font-size: 12px;
    --float--hypergrid--background: hsl(256, 87%, 14%);
    --float--hypergrid--color: rgb(60,51,94);
    --float--hypergrid-positive--color: white;
    --float--hypergrid-positive--background: rgb(54, 205, 196);
    --float--hypergrid-negative--color: white;
    --float--hypergrid-negative--background: rgb(255, 22, 144);
    --float--hypergrid-positive--border-bottom-color: rgb(36, 146, 139);
    --float--hypergrid-positive--border-right-color: rgb(36, 146, 139);
    --float--hypergrid-negative--border-bottom-color: rgb(219, 18, 122);
    --float--hypergrid-negative--border-right-color: rgb(219, 18, 122);
    
    --integer--column-type--content: "INT";
    --integer--column-type--color: #36CDC4;

    --integer--hypergrid--font-family: "Roboto Mono";
    --integer--hypergrid--font-size: 12px;
    --integer--hypergrid--background: hsl(256, 87%, 14%);
    --integer--hypergrid--color: rgb(60,51,94);
    --integer--hypergrid-positive--color: #8bde8b;
    --integer--hypergrid-negative--color: #ff6a8b;

    --string--column-type--content: "STR";
    --string--column-type--color: #FF1690;

    --date--column-type--content: "MDY";
    --datetime--column-type--content: "MDY";

    --plugin--background: @plugin_background;
    --plugin--border: 1px solid hsla(256, 87%, 28%, 1);
    --plugin--box-shadow: 0px 10px 10px rgba(0,0,0,0.4);
   
    --hypergrid-row-hover--background: rgba(0,0,0,0.1);
    --hypergrid-cell-hover--background: rgba(0,0,0,0.2);
    --hypergrid--color: #eee;
    --hypergrid--font-family: "Open Sans";

    --d3fc-full--gradient: linear-gradient(
        #f9897b 0%,
        #d7509f 10%,
        #f9247e 20%,
        #ae1357 30%,
        #661246 40%,
        #222222 50%,
        #392682 60%, #7a3a9a 70%, #3f86bc 80%, #28ada8 90%, #83dde0 100%
    );

    --d3fc-positive--gradient: linear-gradient(
        #392682 0%, #7a3a9a 25%, #3f86bc 50%, #28ada8 75%, #83dde0 100%
    );

    --d3fc-negative--gradient: linear-gradient(
        #f9897b 0%,
        #d7509f 25%,
        #f9247e 50%,
        #ae1357 75%,
        #661246 100%
    );

    --highcharts-full--gradient: linear-gradient(
        #f9897b 0%,
        #d7509f 10%,
        #f9247e 20%,
        #ae1357 30%,
        #661246 40%,
        #222222 50%,
        #392682 60%, #7a3a9a 70%, #3f86bc 80%, #28ada8 90%, #83dde0 100%
    );

    --highcharts-positive--gradient: linear-gradient(
        #392682 0%, #7a3a9a 25%, #3f86bc 50%, #28ada8 75%, #83dde0 100%
    );

    --highcharts-negative--gradient: linear-gradient(
        #f9897b 0%,
        #d7509f 25%,
        #f9247e 50%,
        #ae1357 75%,
        #661246 100%
    );

    ////////////////////////////////////////////////////////////////////////////
    ////
    //// Not Stable
    ////

    --hypergrid-gridline--color: #cfd8dc;

    --active-column-selector--content: "check";
    --hypergrid-header--font-family: "Open Sans";
    --hypergrid--padding: 24px;

    --hypergrid--background: @plugin_background;
    --hypergrid-tree-header--background: @plugin_background;
    --hypergrid-tree-header--color: #eee;
    --hypergrid-header--background:@plugin_background;
    --hypergrid-separator--color: #8BC4EE;
    --hypergrid-header--color: #eee;

    --hypergrid--font-size: 12px;
    --hypergrid-header--font-size: 12px;

    --highcharts-label--fill: @coolgrey200;
    --highcharts-rect--opacity: 0.85;
    
    --highcharts-tooltip--background: @coolgrey800;

    --d3fc-gridline--color: #5C2686;
    --d3fc-legend--text: rgb(187, 187, 187);
    --d3fc-treedata--labels: rgb(187, 187, 187);
    --d3fc-treedata--hover-highlight: rgb(255, 255, 255);
    --d3fc-axis--ticks: rgb(187, 187, 187);
    --d3fc-axis--lines: #5C2686;
    --d3fc-tooltip--background: #333333;
    --d3fc-tooltip--color: rgb(207, 216, 220);

    --d3fc-series: #36CDC4;
    --d3fc-series-1: #FF1690;
    --d3fc-series-2: #36CDC4;
    --d3fc-series-3: #F4D676;
    --d3fc-series-4: #966bff;
    --d3fc-series-5: #C774E8;
    --d3fc-series-6: #FF6AD5;
    --d3fc-series-7: #ff8b8b;
    --d3fc-series-8: #ffde8b;
    --d3fc-series-9: #8bde8b;
    --d3fc-series-10: #20de8b;

    --d3fc-full--gradient: linear-gradient(
        #f9897b 0%,
        #d7509f 10%,
        #f9247e 20%,
        #ae1357 30%,
        #661246 40%,
        #222222 50%,
        #392682 60%, #7a3a9a 70%, #3f86bc 80%, #28ada8 90%, #83dde0 100%
    );

    --d3fc-positive--gradient: linear-gradient(
        #392682 0%, #7a3a9a 25%, #3f86bc 50%, #28ada8 75%, #83dde0 100%
    );

    --d3fc-negative--gradient: linear-gradient(
        #f9897b 0%,
        #d7509f 25%,
        #f9247e 50%,
        #ae1357 75%,
        #661246 100%
    );

    --highcharts-full--gradient: linear-gradient(
        #f9897b 0%,
        #d7509f 10%,
        #f9247e 20%,
        #ae1357 30%,
        #661246 40%,
        #222222 50%,
        #392682 60%, #7a3a9a 70%, #3f86bc 80%, #28ada8 90%, #83dde0 100%
    );

    --highcharts-positive--gradient: linear-gradient(
        #392682 0%, #7a3a9a 25%, #3f86bc 50%, #28ada8 75%, #83dde0 100%
    );

    --highcharts-negative--gradient: linear-gradient(
        #f9897b 0%,
        #d7509f 25%,
        #f9247e 50%,
        #ae1357 75%,
        #661246 100%
    );
    --warning--color: #333;
}