stack-graphs 0.14.1

/* -*- coding: utf-8 -*-
 * ------------------------------------------------------------------------------------------------
 * Copyright © 2022, stack-graphs authors.
 * Licensed under either of Apache License, Version 2.0, or MIT license, at your option.
 * Please see the LICENSE-APACHE or LICENSE-MIT files in this distribution for license details.
 * ------------------------------------------------------------------------------------------------
*/

/* Paul Tol's Colorblind Friendly Color Scheme (vibrant)
 * Source: https://personal.sron.nl/~pault/
 *
 * In default order:
 *
 * orange  #ee7733
 * blue    #0077bb
 * cyan    #33bbee
 * magenta #ee3377
 * red     #cc3311
 * teal    #009988
 * grey    #bbbbbb
 */

/* Paul Tol's Colorblind Friendly Color Scheme (light)
 * Source: https://personal.sron.nl/~pault/
 *
 * In default order:
 *
 * light blue   #77aadd
 * orange       #ee8866
 * light yellow #eedd88
 * pink         #ffaabb
 * light cyan   #99ddff
 * mint         #44bb99
 * pear         #bbcc33
 * olive        #aaaa00
 * pale grey    #dddddd
 */

.sg {
    width: 100%;
    height: 100%;
}

.sg-background {
    width: 100%;
    height: 100%;
    fill: white;
    cursor: grab;
}

.sg-background.engaged {
    cursor: grabbing;
}

/* ------------------------------------------------------------------------------------------------
 * Nodes
 */

.sg .node {
    cursor: default;
}

.sg .node text {
    font-family: monospace;
    font-size: 16px;
}

/* --- drop scopes --- */

.sg .node.drop_scopes .background {
    r: 6px;
}

/* --- jump to scope --- */

.sg .node.jump_to_scope .background {
    r: 6px;
}

/* --- pop symbol --- */

.sg .node.pop_scoped_symbol .pop_scope {
    fill: #ee7733;
    r: 6px;
    stroke: black;
}

.sg .node.definition .background {
    stroke-width: 2px;
}

/* --- push symbol --- */

.sg .node.push_scoped_symbol .push_scope {
    fill: #bbbbbb;
    r: 6px;
    stroke: black;
}

.sg .node.push_scoped_symbol .push_scope-focus-point {
    fill: none;
    r: 3px;
}

.sg .node.push_scoped_symbol.focus .push_scope-focus-point {
    fill: black;
}

.sg .node.reference .background {
    stroke-width: 2px;
}

/* --- root --- */

.sg .node.root .background {
    r: 6px;
}

/* --- scope --- */

.sg .node.scope .border {
    fill: #0077bb;
    r: 6px;
}

.sg .node.scope .background {
    r: 6px;
}

.sg .node.scope .focus-point {
    r: 3px;
    fill: none;
}

.sg .node.scope.ref-focus .focus-point {
    fill: black;
}

.sg .node.scope.exported .background {
    stroke-width: 2px;
}

/* --- plain labeled node --- */

.sg .node.scope.plain_labeled_node .border {
    fill: #0077bb;
    rx: 6px;
}

.sg .node.scope.plain_labeled_node .background {
    rx: 6px;
}

/* --- path highlight --- */

.sg .node.path-node .border {
    stroke-width: 4px;
    stroke-dasharray: 5, 5;
}

.sg .node.path-node.path-endpoint .border {
    stroke-dasharray: none;
}

/* ------------------------------------------------------------------------------------------------
 * Edges
 */

.sg .edge {
    cursor: default;
}

.sg .edge path {
    stroke-width: 1px;
    fill: none;
}

.sg .edge text {
    font-size: 11pt;
    stroke-width: 1px;
    dominant-baseline: central;
}

.sg .edge.path-edge path
{
    stroke-width: 3px;
}

/* ------------------------------------------------------------------------------------------------
 * Jumps
 */

.sg .jump path {
    stroke: none;
    stroke-width: 1px;
    fill: none;
}

.sg .jump text {
    font-size: 11pt;
    stroke: none;
    stroke-width: 1px;
    fill: none;
    dominant-baseline: central;
}

.sg .jump.path-edge path {
    stroke: #ee3377;
    stroke-width: 3px;
    stroke-dasharray: 2, 2;
}

.sg .jump.path-edge text {
    stroke: #ee3377;
    fill: #ee3377;
}

/* ------------------------------------------------------------------------------------------------
 * Tooltip
 */

#sg-tooltip {
    position: absolute;
    top: 0px;
    left: 0px;
    visibility: hidden;
    pointer-events: none;
    border: 0px;
    border-radius: 8px;
    padding: 4px;
    background: #bbbbbb;
    font-size: 14px;
    opacity: 85%;
}

/* clock-wise */
#sg-tooltip.south-east {
    transform: translate(5%, 5%);
}
#sg-tooltip.south-west {
    transform: translate(-105%, 5%);
}
#sg-tooltip.north-west {
    transform: translate(-105%, -105%);
}
#sg-tooltip.north-east {
    transform: translate(5%, -105%);
}

.sg-tooltip-table {
    border-collapse: collapse;
}

.sg-tooltip-table td {
    padding: 2px 14px;
}

.sg-tooltip-header {
    font-variant: small-caps;
    font-weight: bold;
    border-bottom: solid 1px #777777;
}

.sg-tooltip-header td {
    column-span: all;
}

.sg-tooltip-header:not(:first-child) td {
    padding-top: 8px;
}

.sg-tooltip-sub-header {
    font-variant: small-caps;
    font-style: italic;
    border-bottom: dashed 1px #555555;
}

.sg-tooltip-sub-header td {
    column-span: all;
}

.sg-tooltip-sub-header:not(:first-child) td {
    padding-top: 4px;
}

.sg-tooltip-label {
    font-variant: small-caps;
    vertical-align: text-top;
}

.sg-tooltip-value {
    vertical-align: text-top;
}

.sg-tooltip-list {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}

.sg-tooltip-list-element {
    background: #777777;
    padding: 3px;
    margin: 1px 0px;
}

.sg-tooltip-subvalue {
    vertical-align: top;
}

.sg-tooltip-sublist {
    display:inline-block;
    list-style-type: none;
    padding: 0px;
    margin-left: 10px;
}

.sg-tooltip-sublist-element {
    background: #999999;
    padding: 3px;
    display: inline-block;
    margin: 0px 1px;
}

/* ------------------------------------------------------------------------------------------------
 * Legend
 */

#sg-legend {
    position: absolute;
    left: 10px;
    top: 10px;
    background-color: #bbbbbb;
    padding: 6px;
    border-radius: 6px;
    z-index: 1;
}

#sg-legend h1 {
    font-variant: small-caps;
    font-weight: bold;
    font-size: inherit;
    border-bottom: solid 1px #777777;
    margin: 0px;
}

#sg-legend ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
}

#sg-legend li {
    padding: 3px 6px;
    margin: 3px 0px;
    border: 1px solid white;
}

/* ------------------------------------------------------------------------------------------------
 * Help
 */

#sg-help-toggle {
    visibility: hidden;
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 3;
}

.sg-help-label {
    position: absolute;
    left: 10px;
    bottom: 10px;
    background-color: #bbbbbb;
    padding: 0px;
    border-radius: 6px;
    z-index: 2;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    margin: 0px;
    font-size: 14px;
    cursor: pointer;
}

.sg-help-content {
    visibility: hidden;
    position: absolute;
    left: 10px;
    bottom: 10px;
    background-color: #bbbbbb;
    padding: 6px;
    border-radius: 6px;
    z-index: 1;
    min-height: 18px;
    min-width: 18px;
    max-width: 300px;
    margin: 0px;
    font-size: 14px;
}

#sg-help-toggle:checked ~ .sg-help-content {
    visibility: visible;
}

.sg-help-content h1 {
    font-variant: small-caps;
    font-weight: bold;
    font-size: inherit;
    border-bottom: solid 1px #777777;
}

.sg-help-content h1:first-child {
    margin-top: 0px;
}

.sg-help-content kbd {
    font-family: monospace;
    display: inline-block;
    border-radius: 3px;
    padding: 0px 4px;
    box-shadow: 1px 1px 1px #777;
    margin: 2px;
    font-size: small;
    vertical-align: text-bottom;
    background: #eee;
    font-variant: small-caps;
}

.sg-help-meta {
    font-style: italic;
}

.sg-help-byline {
    line-height: 20px;
    font-style: italic;
    width: 100%;
    margin-left: 24px;
    text-align: left;
}

/* ------------------------------------------------------------------------------------------------
 * Toggle button
 */

.sg-toggle-input {
    margin: 0px;
}

.sg-toggle-label {
    margin: 0px 6px;
    cursor: pointer;
}

/* ------------------------------------------------------------------------------------------------
 * Colors
 */

.sg .node.global .background {
    fill: #0077bb; /* blue */
}
#sg-legend .global {
    background-color: #0077bb; /* blue */
}
.sg .edge.global path,
.sg .edge.global text {
    stroke: #0077bb; /* blue */
}

.sg .node.file-0 .background {
    fill: #77aadd; /* light blue */
}
#sg-legend .file-0 {
    background-color: #77aadd; /* light blue */
}
.sg .node.file-0 .arrow,
.sg .edge.file-0 text
{
    fill: #0e2236; /* light blue (darkened) */
}
.sg .node.file-0.reference .background,
.sg .node.file-0.definition .background,
.sg .node.file-0.scope.exported .background,
.sg .edge.file-0 path,
.sg .edge.file-0 text
{
    stroke: #0e2236; /* light blue (darkened) */
}

.sg .node.file-1 .background,
.sg .edge.file-1 text
{
    fill: #ee8866; /* orange */
}
#sg-legend .file-1 {
    background-color: #ee8866; /* orange */
}
.sg .node.file-1 .arrow {
    fill: #3d1407; /* orange (darkened) */
}
.sg .node.file-1.reference .background,
.sg .node.file-1.definition .background,
.sg .node.file-1.scope.exported .background,
.sg .edge.file-1 path,
.sg .edge.file-1 text
{
    stroke: #3d1407; /* orange (darkened) */
}

.sg .node.file-2 .background,
.sg .edge.file-2 text
{
    fill: #eedd88; /* light yellow */
}
#sg-legend .file-2 {
    background-color: #eedd88; /* light yellow */
}
.sg .node.file-2 .arrow {
    fill: #413809; /* light yellow (darkened) */
}
.sg .node.file-2.reference .background,
.sg .node.file-2.definition .background,
.sg .node.file-2.scope.exported .background,
.sg .edge.file-2 path,
.sg .edge.file-2 text
{
    stroke: #413809; /* light yellow (darkened) */
}

.sg .node.file-3 .background,
.sg .edge.file-3 text
{
    fill: #ffaabb; /* pink */
}
#sg-legend .file-3 {
    background-color: #ffaabb; /* pink */
}
.sg .node.file-3 .arrow {
    fill: #550011; /* pink (darkened) */
}
.sg .node.file-3.reference .background,
.sg .node.file-3.definition .background,
.sg .node.file-3.scope.exported .background,
.sg .edge.file-3 path,
.sg .edge.file-3 text
{
    stroke: #550011; /* pink (darkened) */
}

.sg .node.file-4 .background,
.sg .edge.file-4 text
{
    fill: #99ddff; /* light cyan */
}
#sg-legend .file-4 {
    background-color: #99ddff; /* light cyan */
}
.sg .node.file-4 .arrow {
    fill: #003652; /* light cyan (darkened) */
}
.sg .node.file-4.reference .background,
.sg .node.file-4.definition .background,
.sg .node.file-4.scope.exported .background,
.sg .edge.file-4 path,
.sg .edge.file-4 text
{
    stroke: #003652; /* light cyan (darkened) */
}

.sg .node.file-5 .background,
.sg .edge.file-5 text
{
    fill: #44bb99; /* mint */
}
#sg-legend .file-5 {
    background-color: #44bb99; /* mint */
}
.sg .node.file-5 .arrow {
    fill: #0e251f; /* mint (darkened) */
}
.sg .node.file-5.reference .background,
.sg .node.file-5.definition .background,
.sg .node.file-5.scope.exported .background,
.sg .edge.file-5 path,
.sg .edge.file-5 text
{
    stroke: #0e251f; /* mint (darkened) */
}

.sg .node.file-6 .background,
.sg .edge.file-6 text
{
    fill: #bbcc33; /* pear */
}
#sg-legend .file-6 {
    background-color: #bbcc33; /* pear */
}
.sg .node.file-6 .arrow {
    fill: #25290a; /* pear (darkened) */
}
.sg .node.file-6.reference .background,
.sg .node.file-6.definition .background,
.sg .node.file-6.scope.exported .background,
.sg .edge.file-6 path,
.sg .edge.file-6 text
{
    stroke: #25290a; /* pear (darkened) */
}

.sg .node.file-7 .background,
.sg .edge.file-7 text
{
    fill: #aaaa00; /* olive */
}
#sg-legend .file-7 {
    background-color: #aaaa00; /* olive */
}
.sg .node.file-7 .arrow {
    fill: #222200; /* olive (darkened) */
}
.sg .node.file-7.reference .background,
.sg .node.file-7.definition .background,
.sg .node.file-7.scope.exported .background,
.sg .edge.file-7 path,
.sg .edge.file-7 text
{
    stroke: #222200; /* olive (darkened) */
}

.sg .node.path-node .border,
.sg .edge.path-edge path,
.sg .edge.path-edge text
{
    stroke: #ee7733;
}

.sg .edge.path-edge text {
    fill: #ee7733;
}