FFmpeg/fftools/resources/graph.css

/* Variables */
.root {
    --ff-colvideo: #6eaa7b;
    --ff-colaudio: #477fb3;
    --ff-colsubtitle: #ad76ab;
    --ff-coltext: #666;
}

/* Common & Misc */
.ff-inputfiles rect, .ff-outputfiles rect, .ff-inputstreams rect, .ff-outputstreams rect, .ff-decoders rect, .ff-encoders rect {
    stroke-width: 0;
    stroke: transparent;
    filter: none !important;
    fill: transparent !important;
    display: none !important;
}

.cluster span {
    color: var(--ff-coltext);
}

.cluster rect {
    stroke: #dfdfdf !important;
    transform: translateY(-2.3rem);
    filter: drop-shadow(1px 2px 2px rgba(185,185,185,0.2)) !important;
    rx: 8;
    ry: 8;
}

.cluster-label {
    font-size: 1.1rem;
}

    .cluster-label .nodeLabel {
        display: block;
        font-weight: 500;
        color: var(--ff-coltext);
    }

    .cluster-label div {
        max-width: unset !important;
        padding: 3px;
    }

    .cluster-label foreignObject {
        transform: translateY(-0.7rem);
    }

/* Input and output files */
.node.ff-inputfile .label foreignObject, .node.ff-outputfile .label foreignObject {
    overflow: visible;
}

.cluster.ff-inputfile .cluster-label foreignObject div:not(foreignObject div div), .cluster.ff-outputfile .cluster-label foreignObject div:not(foreignObject div div) {
    display: table !important;
}

.nodeLabel div.ff-inputfile, .nodeLabel div.ff-outputfile {
    font-size: 1.1rem;
    font-weight: 500;
    min-width: 14rem;
    width: 100%;
    display: flex;
    color: var(--ff-coltext);
    margin-top: 0.1rem;
    line-height: 1.35;
    padding-bottom: 1.9rem;
}

.nodeLabel div.ff-outputfile {
    flex-direction: row-reverse;
}

.ff-inputfile .index, .ff-outputfile .index {
    order: 2;
    color: var(--ff-coltext);
    text-align: center;
    border-radius: 0.45rem;
    border: 0.18em solid #666666db;
    font-weight: 600;
    padding: 0 0.3em;
    opacity: 0.8;
}

    .ff-inputfile .index::before {
        content: 'In ';
    }

    .ff-outputfile .index::before {
        content: 'Out ';
    }

.ff-inputfile .demuxer_name, .ff-outputfile .muxer_name {
    flex: 1;
    order: 1;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    max-width: 8rem;
    align-content: center;
    margin: 0.2rem 0.4rem 0 0.4rem;
}

.ff-inputfile .file_extension, .ff-outputfile .file_extension {
    order: 0;
    background-color: #888;
    color: white;
    text-align: center;
    border-radius: 0.45rem;
    font-weight: 600;
    padding: 0 0.4em;
    align-content: center;
    opacity: 0.8;
}

.ff-inputfile .url, .ff-outputfile .url {
    order: 4;
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.75rem;
    font-size: 0.7rem;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 0.3rem;
    direction: rtl;
    color: #999;
}

.cluster.ff-inputfile rect, .cluster.ff-outputfile rect {
    transform: translateY(-1.8rem);
    fill: url(#ff-radgradient);
}

/* Input and output streams */
.node.ff-inputstream rect, .node.ff-outputstream rect {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    fill: white;
    stroke: #e5e5e5 !important;
    height: 2.7rem;
    transform: translateY(0.2rem);
    filter: none;
    rx: 3;
    ry: 3;
}

.node.ff-inputstream .label foreignObject, .node.ff-outputstream .label foreignObject {
    transform: translateY(-0.2%);
    overflow: visible;
}

    .node.ff-inputstream .label foreignObject div:not(foreignObject div div), .node.ff-outputstream .label foreignObject div:not(foreignObject div div) {
        display: block !important;
        line-height: 1.5 !important;
    }

.nodeLabel div.ff-inputstream, .nodeLabel div.ff-outputstream {
    font-size: 1.0rem;
    font-weight: 500;
    min-width: 12rem;
    width: 100%;
    display: flex;
}

.nodeLabel div.ff-outputstream {
    flex-direction: row-reverse;
}

.ff-inputstream .name, .ff-outputstream .name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    align-content: center;
    margin-bottom: -0.15rem;
}

.ff-inputstream .index, .ff-outputstream .index {
    flex: 0 0 1.4rem;
    background-color: #888;
    color: white;
    text-align: center;
    border-radius: 0.3rem;
    font-weight: 600;
    margin-right: -0.3rem;
    margin-left: 0.4rem;
    opacity: 0.8;
}

.ff-outputstream .index {
    margin-right: 0.6rem;
    margin-left: -0.4rem;
}

.ff-inputstream::before, .ff-outputstream::before {
    font-variant-emoji: text;
    flex: 0 0 2rem;
    margin-left: -0.8rem;
    margin-right: 0.2rem;
}

.ff-outputstream::before {
    margin-left: 0.2rem;
    margin-right: -0.6rem;
}

.ff-inputstream.video::before, .ff-outputstream.video::before {
    content: '\239A';
    color: var(--ff-colvideo);
    font-size: 2.25rem;
    line-height: 0.5;
    font-weight: bold;
}

.ff-inputstream.audio::before, .ff-outputstream.audio::before {
    content: '\1F39D';
    color: var(--ff-colaudio);
    font-size: 1.75rem;
    line-height: 0.9;
}

.ff-inputstream.subtitle::before, .ff-outputstream.subtitle::before {
    content: '\1AC';
    color: var(--ff-colsubtitle);
    font-size: 1.2rem;
    line-height: 1.1;
    transform: scaleX(1.5);
    margin-top: 0.050rem;
}

.ff-inputstream.attachment::before, .ff-outputstream.attachment::before {
    content: '\1F4CE';
    font-size: 1.3rem;
    line-height: 1.15;
}

.ff-inputstream.data::before, .ff-outputstream.data::before {
    content: '\27E8\2219\2219\2219\27E9';
    font-size: 1.15rem;
    line-height: 1.17;
    letter-spacing: -0.3px;
}

/* Filter Graphs */
.cluster.ff-filters rect {
    stroke-dasharray: 6 !important;
    stroke-width: 1.3px;
    stroke: #d1d1d1 !important;
    filter: none !important;
}

.cluster.ff-filters div.ff-filters .id {
    display: none;
}

.cluster.ff-filters div.ff-filters .name {
    margin-right: 0.5rem;
    font-size: 0.9rem;
}

.cluster.ff-filters div.ff-filters .description {
    font-weight: 400;
    font-size: 0.75rem;
    vertical-align: middle;
    color: #777;
    font-family: Cascadia Code, Lucida Console, monospace;
}

/* Filter Shapes */
.node.ff-filter rect {
    rx: 10;
    ry: 10;
    stroke-width: 1px;
    stroke: #d3d3d3;
    fill: url(#ff-filtergradient);
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.1));
}

.node.ff-filter .label foreignObject {
    transform: translateY(-0.4rem);
    overflow: visible;
}

.nodeLabel div.ff-filter {
    font-size: 1.0rem;
    font-weight: 500;
    text-transform: uppercase;
    min-width: 5.5rem;
    margin-bottom: 0.5rem;
}

    .nodeLabel div.ff-filter span {
        color: inherit;
    }

/* Decoders & Encoders */
.node.ff-decoder rect, .node.ff-encoder rect {
    stroke-width: 1px;
    stroke: #d3d3d3;
    fill: url(#ff-filtergradient);
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.1));
}

.nodeLabel div.ff-decoder, .nodeLabel div.ff-encoder {
    font-size: 0.85rem;
    font-weight: 500;
    min-width: 3.5rem;
}

/* Links and Arrows */
path.flowchart-link[id|='video'] {
    stroke: var(--ff-colvideo);
}

path.flowchart-link[id|='audio'] {
    stroke: var(--ff-colaudio);
}

path.flowchart-link[id|='subtitle'] {
    stroke: var(--ff-colsubtitle);
}

marker.marker path {
    fill: context-stroke;
}

.edgeLabel foreignObject {
    transform: translateY(-1rem);
}

.edgeLabel p {
    background: transparent;
    white-space: nowrap;
    margin: 1rem 0.5rem !important;
    font-weight: 500;
    color: var(--ff-coltext);
}

.edgeLabel, .labelBkg {
    background: transparent;
}

.edgeLabels .edgeLabel * {
    font-size: 0.8rem;
}