Graph view

graph_view.css

/* @settings
name: "Graph Settings"
id: graph-personalization
settings:
    - 
        id: title-colors
        format: heading
        level: 1
        collapsed: false
        title: Color
    -
        id: fill
        type: variable-themed-color
        format: hex
        opacity: true
        default-light: "#54b6c0"
        default-dark: "#54b6c0"
        title: Color fill
    - 
        id: fill-focused
        type: variable-themed-color
        format: hex
        opacity: true
        default-light: "#54b6c0"
        default-dark: "#54b6c0"
        title: Fill focused circle
    -
        id: tag
        type: variable-themed-color
        format: hex
        opacity: true
        default-light: "#bb7e67"
        default-dark: "#bb7e67"
        title: Tag
    -
        id: attachment
        type: variable-themed-color
        format: hex
        opacity: true
        default-light: "#87a9c1"
        default-dark: "#87a9c1"
        title: Attachment
    -
        id: arrow
        type: variable-themed-color
        format: hex
        opacity: true
        default-light: "#878bc1"
        default-dark: "#878bc1"
        title: Arrow
    -
        id: circle
        type: variable-themed-color
        format: hex
        opacity: true
        default-light: "#696a70"
        default-dark: "#696a70"
        title: Circle
    -
        id: line
        type: variable-themed-color
        format: hex
        opacity: true
        default-light: "#696a70"
        default-dark: "#696a70"
        title: Line
    -
        id: text
        type: variable-themed-color
        format: hex
        opacity: true
        default-light: "#414142"
        default-dark: "#d6d6d6"
        title: Text
    -
        id: fill-highlight
        type: variable-themed-color
        format: hex
        opacity: true
        default-light: "#acace7"
        default-dark: "#acace7"
        title: Fill Highlight
    -
        id: line-highlight
        type: variable-themed-color
        format: hex
        opacity: true
        default-light: "#9f9fb7"
        default-dark: "#9f9fb7"
        title: Line Highlight
    -
        id: unresolved
        type: variable-themed-color
        format: hex
        opacity: true
        default-light: "#e0e0e5"
        default-dark: "#e0e0e5"
        title: unresolved
    - 
        id: title-opacity
        type: heading
        level: 1
        collapsed: true
        title: Opacity
    -
        id: fill-opacity
        title: Fill
        type: variable-number-slider
        default: 1
        min: 0
        max: 1
        step: 0.1
    -
        id: focused-opacity
        title: Focused
        type: variable-number-slider
        default: 1
        min: 0
        max: 1
        step: 0.1
    -
        id: tag-opacity
        title: Tag
        type: variable-number-slider
        default: 1
        min: 0
        max: 1
        step: 0.1
    -
        id: attachment-opacity
        title: Attachment
        type: variable-number-slider
        default: 1
        min: 0
        max: 1
        step: 0.1
    -
        id: circle-opacity
        title: Circle
        type: variable-number-slider
        default: 1
        min: 0
        max: 1
        step: 0.1
    -
        id: line-opacity
        title: Line
        type: variable-number-slider
        default: 1
        min: 0
        max: 1
        step: 0.1
    -
        id: arrow-opacity
        title: Arrow
        type: variable-number-slider
        default: 1
        min: 0
        max: 1
        step: 0.1
    -
        id: text-opacity
        title: Text
        type: variable-number-slider
        default: 1
        min: 0
        max: 1
        step: 0.1
    -
        id: fill-highlight-opacity
        title: Fill Hightlight
        type: variable-number-slider
        default: 1
        min: 0
        max: 1
        step: 0.1
    -
        id: Line-highlight-opacity
        title: Line Hightlight
        type: variable-number-slider
        default: 1
        min: 0
        max: 1
        step: 0.1
    -
        id: unresolved-opacity
        title: Unresolved
        type: variable-number-slider
        default: 1
        min: 0
        max: 1
        step: 0.1

*/

.theme-light {
    --fill: #175e6671;
    --fill-focused: #1e6e77;
    --tag: #bb7e67;
    --attachment: #87a9c1;
    --arrow: #878bc1;
    --circle: #696a70;
    --line: #696a706c;
    --text: #414142;
    --fill-highlight: #acace7;
    --line-highlight: #9f9fb7;
    --unresolved: #e0e0e5;
}

.theme-dark {
    --fill: #54b6c0;
    --fill-focused: #1e6e77;
    --tag: #bb7e67;
    --attachment: #87a9c1;
    --arrow: #878bc1;
    --circle: #696a70;
    --line: #56565848;
    --text: #d6d6d6;
    --fill-highlight: #acace7;
    --line-highlight: #9f9fb7;
    --unresolved: #e0e0e5;
}

.graph-view.color-fill {
    color: var(--fill) !important;
}

.graph-view.color-fill-focused {
    color: var(--fill-focused) !important;
    opacity: var(--focused-opacity) !important;
}

.theme-dark .graph-view.color-fill-tag,
.theme-light .graph-view.color-fill-tag {
    color: var(--tag) !important;
    opacity: var(--tag-opacity) !important;
}

.theme-dark .graph-view.color-fill-attachment,
.theme-light .graph-view.color-fill-attachment {
    color: var(--attachment) !important;
    opacity: var(--attachment-opacity) !important;
}

.graph-view.color-arrow {
    color: var(--arrow) !important;
    opacity: var(--arrow-opacity) !important;
}

.graph-view.color-circle {
    color: var(--circle) !important;
    opacity: var(--circle-opacity) !important;
}

.graph-view.color-line {
    color: var(--line) !important;
    opacity: var(--line-opacity) !important;
}

.graph-view.color-text {
    color: var(--text) !important;
    opacity: var(--text-opacity) !important;
}

.graph-view.color-fill-highlight {
    color: var(--fill-highlight) !important;
    opacity: var(--fill-highlight-opacity) !important;
}

.graph-view.color-line-highlight {
    color: var(--line-highlight) !important;
    opacity: var(--line-highlight-opacity) !important;
}

.graph-view.color-fill-unresolved {
    color: var(--unresolved) !important;
    opacity: var(--unresolved-opacity) !important;
}