@finos/perspective-viewer
Version:
The `<perspective-viewer>` Custom Element, frontend for Perspective.js
134 lines (133 loc) • 5.62 kB
CSS
/******************************************************************************
*
* 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 url("https://fonts.googleapis.com/css?family=Material+Icons");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@200;400&display=swap");
@import url("https://unpkg.com/monaco-editor/esm/vs/base/browser/ui/codicons/codicon/codicon.css");
.perspective-viewer-material-dense-base {
--side_panel--padding: 12px 0px 6px 8px;
--top_panel--padding: 0px 0px 12px 0px;
--column-drop-label--margin: -10px 0px 0px 0px;
--settings-button--padding: 15px 8px 6px 8px;
--column-drop-label--font-size: 8px;
--column_selector--width: 24px;
}
perspective-column-style.light,
perspective-expression-editor.light {
background-color: #ffffff;
color: #161616;
border: 1px solid #ccc;
--input--border-color: #ccc;
--active-color: #2670a9;
}
perspective-viewer,
.perspective-viewer-material-dense {
background-color: #f2f4f6;
font-family: "Open Sans";
--rt-pos-cell--color: #338dcd;
--rt-neg-cell--color: #ff471e;
--modal--class: light;
--interface-monospace--font-family: "Roboto Mono";
--inactive-column-selector--content: "\E835";
--active-column-selector--content: "\E834";
--plugin--background: #ffffff;
--float--column-type--color: #2670a9;
--string--column-type--color: #e32b16;
--date--column-type--color: #24874b;
--boolean--column-type--color: #ea7319;
--settings-button--content: "more_vert";
--button--font-family: "Material Icons";
--overflow_hint--before: "error_outline";
--overflow_hint--font-family: "Material Icons";
--overflow_hint--color: rgba(0, 0, 0, 0.2);
--overflow_hint--padding: 0 12px 0 6px;
--row_pivots--before: "Group By";
--column_pivots--before: "Split By";
--sort-order-asc--before: "arrow_upward";
--sort-order-desc--before: "arrow_downward";
--sort-order-none--before: "remove";
--close_button--before: "close";
--sort-order-col-asc--before: "arrow_forward";
--sort-order-col-desc--before: "arrow_back";
--select--background-color: none;
--select--padding: 0px;
--column-drop-container--background: none;
--column-drop-container--padding: 0px;
--column-drop-container--margin: 24px 24px 0px 0px;
--column-drop-label--margin: -12px 0px 0px 0px;
--column-drop-label--font-size: 10px;
--column-drop-label--display: inline-block;
--column-container--margin: 18px 0px 0px 0px;
--column-add--font-family: "Material Icons";
--column-add--before: "add";
--column-close--font-family: "Material Icons";
--column-close--before: "close";
--column-hide--before: "expand_more";
--column_type--padding: 0px 0px 0px 0px;
--column_type--width: 25px;
--column-selector--font-family: "Material Icons";
--active-column-selector--height: 45px;
--column_selector--width: 31px;
--column_selector--font-size: 16px;
--side_panel--padding: 24px 16px 24px 17px;
--settings-button--padding: 24px 17px 0px 17px;
--button--font-size: 16px;
--top_panel--padding: 12px 0px 24px 0px;
--top-panel-row--display: inline-flex;
--d3fc-treedata-axis--lines: none;
--d3fc-y1-label--font-family: "Material Icons";
--d3fc-y1-label--content: "arrow_upward";
--d3fc-y2-label--font-family: "Material Icons";
--d3fc-y2-label--content: "arrow_downward";
--d3fc-tooltip--background--color: rgba(155, 155, 155, 0.8);
--d3fc-tooltip--color: #161616;
--d3fc-tooltip--border-color: #fff;
--d3fc-tooltip--box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
--d3fc-gridline--color: #eaedef;
--d3fc-axis--ticks: #161616;
--d3fc-axis--lines: #c5c9d0;
--d3fc-legend--background: rgba(255, 255, 255, 0.8);
--d3fc-series: rgba(31, 119, 180, 0.5);
--d3fc-series-1: #0366d6;
--d3fc-series-2: #ff7f0e;
--d3fc-series-3: #2ca02c;
--d3fc-series-4: #d62728;
--d3fc-series-5: #9467bd;
--d3fc-series-6: #8c564b;
--d3fc-series-7: #e377c2;
--d3fc-series-8: #7f7f7f;
--d3fc-series-9: #bcbd22;
--d3fc-series-10: #17becf;
--d3fc-full--gradient: linear-gradient(#4d342f 0%, #e4521b 22.5%, #feeb65 42.5%, #f0f0f0 50%, #dcedc8 57.5%, #42b3d5 67.5%, #1a237e 100%);
--d3fc-positive--gradient: linear-gradient(#dcedc8 0%, #42b3d5 35%, #1a237e 100%);
--d3fc-negative--gradient: linear-gradient(#feeb65 100%, #e4521b 70%, #4d342f 0%);
--active--color: #2670a9;
--side_panel--padding: 12px 0px 6px 8px;
--top_panel--padding: 0px 0px 12px 0px;
--column-drop-label--margin: -10px 0px 0px 0px;
--settings-button--padding: 15px 8px 6px 8px;
--column-drop-label--font-size: 8px;
--column_selector--width: 24px;
}
perspective-viewer regular-table::-webkit-scrollbar-thumb,
.perspective-viewer-material-dense regular-table::-webkit-scrollbar-thumb {
background-color: #e0e4e9;
}
perspective-viewer regular-table,
.perspective-viewer-material-dense regular-table {
-webkit-mask-image: linear-gradient(black, black), linear-gradient(to top, transparent 10%, black 90%), linear-gradient(to left, transparent 10%, black 90%);
-webkit-mask-position: -12px -12px, bottom right, bottom right;
-webkit-mask-size: 100% 100%, 12px 1000%, 1000% 12px;
-webkit-mask-repeat: no-repeat;
transition: -webkit-mask-position 0.3s;
}
perspective-viewer regular-table:hover,
.perspective-viewer-material-dense regular-table:hover {
-webkit-mask-position: -12px -12px, top right, bottom left;
}