mirror of
https://github.com/squidfunk/mkdocs-material.git
synced 2024-06-14 11:52:32 +03:00
415 lines
9.8 KiB
CSS
415 lines
9.8 KiB
CSS
/*
|
|
* Copyright (c) 2016-2023 Martin Donath <martin.donath@squidfunk.com>
|
|
*
|
|
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
* of this software and associated documentation files (the "Software"), to
|
|
* deal in the Software without restriction, including without limitation the
|
|
* rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
|
|
* sell copies of the Software, and to permit persons to whom the Software is
|
|
* furnished to do so, subject to the following conditions:
|
|
*
|
|
* The above copyright notice and this permission notice shall be included in
|
|
* all copies or substantial portions of the Software.
|
|
*
|
|
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
* FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
|
|
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
|
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
|
|
* IN THE SOFTWARE.
|
|
*/
|
|
|
|
/* ----------------------------------------------------------------------------
|
|
* Rules: general
|
|
* ------------------------------------------------------------------------- */
|
|
|
|
/* General node */
|
|
.node circle,
|
|
.node ellipse,
|
|
.node path,
|
|
.node polygon,
|
|
.node rect {
|
|
fill: var(--md-mermaid-node-bg-color);
|
|
stroke: var(--md-mermaid-node-fg-color);
|
|
}
|
|
|
|
/* General marker */
|
|
marker {
|
|
fill: var(--md-mermaid-edge-color) !important;
|
|
}
|
|
|
|
/* General edge label */
|
|
.edgeLabel .label rect {
|
|
fill: transparent;
|
|
}
|
|
|
|
/* ----------------------------------------------------------------------------
|
|
* Rules: flowcharts
|
|
* ------------------------------------------------------------------------- */
|
|
|
|
/* Flowchart node label */
|
|
.label {
|
|
color: var(--md-mermaid-label-fg-color);
|
|
font-family: var(--md-mermaid-font-family);
|
|
}
|
|
|
|
/* Flowchart node label container */
|
|
.label foreignObject {
|
|
overflow: visible;
|
|
line-height: initial;
|
|
}
|
|
|
|
/* Flowchart edge label in node label */
|
|
.label div .edgeLabel {
|
|
color: var(--md-mermaid-label-fg-color);
|
|
background-color: var(--md-mermaid-label-bg-color);
|
|
}
|
|
|
|
/* Flowchart edge label */
|
|
.edgeLabel,
|
|
.edgeLabel rect {
|
|
color: var(--md-mermaid-edge-color);
|
|
background-color: var(--md-mermaid-label-bg-color);
|
|
fill: var(--md-mermaid-label-bg-color);
|
|
}
|
|
|
|
/* Flowchart edge path */
|
|
.edgePath .path,
|
|
.flowchart-link {
|
|
stroke: var(--md-mermaid-edge-color);
|
|
stroke-width: .05rem;
|
|
}
|
|
|
|
/* Flowchart arrow head */
|
|
.edgePath .arrowheadPath {
|
|
fill: var(--md-mermaid-edge-color);
|
|
stroke: none;
|
|
}
|
|
|
|
/* Flowchart subgraph */
|
|
.cluster rect {
|
|
fill: var(--md-default-fg-color--lightest);
|
|
stroke: var(--md-default-fg-color--lighter);
|
|
}
|
|
|
|
/* Flowchart subgraph labels */
|
|
.cluster span {
|
|
color: var(--md-mermaid-label-fg-color);
|
|
font-family: var(--md-mermaid-font-family);
|
|
}
|
|
|
|
/* Flowchart markers */
|
|
g #flowchart-circleStart,
|
|
g #flowchart-circleEnd,
|
|
g #flowchart-crossStart,
|
|
g #flowchart-crossEnd,
|
|
g #flowchart-pointStart,
|
|
g #flowchart-pointEnd {
|
|
stroke: none;
|
|
}
|
|
|
|
/* ----------------------------------------------------------------------------
|
|
* Rules: class diagrams
|
|
* ------------------------------------------------------------------------- */
|
|
|
|
/* Class group node */
|
|
g.classGroup line,
|
|
g.classGroup rect {
|
|
fill: var(--md-mermaid-node-bg-color);
|
|
stroke: var(--md-mermaid-node-fg-color);
|
|
}
|
|
|
|
/* Class group node text */
|
|
g.classGroup text {
|
|
font-family: var(--md-mermaid-font-family);
|
|
fill: var(--md-mermaid-label-fg-color);
|
|
}
|
|
|
|
/* Class label box */
|
|
.classLabel .box {
|
|
background-color: var(--md-mermaid-label-bg-color);
|
|
opacity: 1;
|
|
fill: var(--md-mermaid-label-bg-color);
|
|
}
|
|
|
|
/* Class label text */
|
|
.classLabel .label {
|
|
font-family: var(--md-mermaid-font-family);
|
|
fill: var(--md-mermaid-label-fg-color);
|
|
}
|
|
|
|
/* Class group divider */
|
|
.node .divider {
|
|
stroke: var(--md-mermaid-node-fg-color);
|
|
}
|
|
|
|
/* Class relation */
|
|
.relation {
|
|
stroke: var(--md-mermaid-edge-color);
|
|
}
|
|
|
|
/* Class relation cardinality */
|
|
.cardinality {
|
|
font-family: var(--md-mermaid-font-family);
|
|
fill: var(--md-mermaid-label-fg-color);
|
|
}
|
|
|
|
/* Class relation cardinality text */
|
|
.cardinality text {
|
|
fill: inherit !important;
|
|
}
|
|
|
|
/* Class extension, composition and dependency marker */
|
|
defs #classDiagram-extensionStart,
|
|
defs #classDiagram-extensionEnd,
|
|
defs #classDiagram-compositionStart,
|
|
defs #classDiagram-compositionEnd,
|
|
defs #classDiagram-dependencyStart,
|
|
defs #classDiagram-dependencyEnd {
|
|
fill: var(--md-mermaid-edge-color) !important;
|
|
stroke: var(--md-mermaid-edge-color) !important;
|
|
}
|
|
|
|
/* Class aggregation marker */
|
|
defs #classDiagram-aggregationStart,
|
|
defs #classDiagram-aggregationEnd {
|
|
fill: var(--md-mermaid-label-bg-color) !important;
|
|
stroke: var(--md-mermaid-edge-color) !important;
|
|
}
|
|
|
|
/* ----------------------------------------------------------------------------
|
|
* Rules: state diagrams
|
|
* ------------------------------------------------------------------------- */
|
|
|
|
/* State group node */
|
|
g.stateGroup rect {
|
|
fill: var(--md-mermaid-node-bg-color);
|
|
stroke: var(--md-mermaid-node-fg-color);
|
|
}
|
|
|
|
/* State group title */
|
|
g.stateGroup .state-title {
|
|
font-family: var(--md-mermaid-font-family);
|
|
fill: var(--md-mermaid-label-fg-color) !important;
|
|
}
|
|
|
|
/* State group background */
|
|
g.stateGroup .composit {
|
|
fill: var(--md-mermaid-label-bg-color);
|
|
}
|
|
|
|
/* State node label */
|
|
.nodeLabel {
|
|
color: var(--md-mermaid-label-fg-color);
|
|
font-family: var(--md-mermaid-font-family);
|
|
}
|
|
|
|
/* State start and end marker */
|
|
.start-state,
|
|
.node circle.state-start,
|
|
.node circle.state-end {
|
|
fill: var(--md-mermaid-edge-color);
|
|
stroke: none;
|
|
}
|
|
|
|
/* State end marker */
|
|
.end-state-outer,
|
|
.end-state-inner {
|
|
fill: var(--md-mermaid-edge-color);
|
|
}
|
|
|
|
/* State end marker */
|
|
.end-state-inner,
|
|
.node circle.state-end {
|
|
stroke: var(--md-mermaid-label-bg-color);
|
|
}
|
|
|
|
/* State transition */
|
|
.transition {
|
|
stroke: var(--md-mermaid-edge-color);
|
|
}
|
|
|
|
/* State fork and join */
|
|
[id^=state-fork] rect,
|
|
[id^=state-join] rect {
|
|
fill: var(--md-mermaid-edge-color) !important;
|
|
stroke: none !important;
|
|
}
|
|
|
|
/* State cluster (yes, 2x... Mermaid WTF) */
|
|
.statediagram-cluster.statediagram-cluster .inner {
|
|
fill: var(--md-default-bg-color);
|
|
}
|
|
|
|
/* State cluster node */
|
|
.statediagram-cluster rect {
|
|
fill: var(--md-mermaid-node-bg-color);
|
|
stroke: var(--md-mermaid-node-fg-color);
|
|
}
|
|
|
|
/* State cluster divider */
|
|
.statediagram-state rect.divider {
|
|
fill: var(--md-default-fg-color--lightest);
|
|
stroke: var(--md-default-fg-color--lighter);
|
|
}
|
|
|
|
/* State diagram markers */
|
|
defs #statediagram-barbEnd {
|
|
stroke: var(--md-mermaid-edge-color);
|
|
}
|
|
|
|
/* ----------------------------------------------------------------------------
|
|
* Rules: entity-relationship diagrams
|
|
* ------------------------------------------------------------------------- */
|
|
|
|
/* Attribute box */
|
|
.attributeBoxEven,
|
|
.attributeBoxOdd {
|
|
fill: var(--md-mermaid-node-bg-color);
|
|
stroke: var(--md-mermaid-node-fg-color);
|
|
}
|
|
|
|
/* Entity node */
|
|
.entityBox {
|
|
fill: var(--md-mermaid-label-bg-color);
|
|
stroke: var(--md-mermaid-node-fg-color);
|
|
}
|
|
|
|
/* Entity node label */
|
|
.entityLabel {
|
|
font-family: var(--md-mermaid-font-family);
|
|
fill: var(--md-mermaid-label-fg-color);
|
|
}
|
|
|
|
/* Entity relationship label container */
|
|
.relationshipLabelBox {
|
|
background-color: var(--md-mermaid-label-bg-color);
|
|
opacity: 1;
|
|
fill: var(--md-mermaid-label-bg-color);
|
|
fill-opacity: 1;
|
|
}
|
|
|
|
/* Entity relationship label */
|
|
.relationshipLabel {
|
|
fill: var(--md-mermaid-label-fg-color);
|
|
}
|
|
|
|
/* Entity relationship line { */
|
|
.relationshipLine {
|
|
stroke: var(--md-mermaid-edge-color);
|
|
}
|
|
|
|
/* Entity relationship line markers */
|
|
defs #ZERO_OR_ONE_START *,
|
|
defs #ZERO_OR_ONE_END *,
|
|
defs #ZERO_OR_MORE_START *,
|
|
defs #ZERO_OR_MORE_END *,
|
|
defs #ONLY_ONE_START *,
|
|
defs #ONLY_ONE_END *,
|
|
defs #ONE_OR_MORE_START *,
|
|
defs #ONE_OR_MORE_END * {
|
|
stroke: var(--md-mermaid-edge-color) !important;
|
|
}
|
|
|
|
/* Entity relationship line markers */
|
|
defs #ZERO_OR_MORE_START circle,
|
|
defs #ZERO_OR_MORE_END circle {
|
|
fill: var(--md-mermaid-label-bg-color);
|
|
}
|
|
|
|
/* ----------------------------------------------------------------------------
|
|
* Rules: sequence diagrams
|
|
* ------------------------------------------------------------------------- */
|
|
|
|
/* Sequence actor */
|
|
.actor {
|
|
fill: var(--md-mermaid-label-bg-color);
|
|
stroke: var(--md-mermaid-node-fg-color);
|
|
}
|
|
|
|
/* Sequence actor text */
|
|
text.actor > tspan {
|
|
font-family: var(--md-mermaid-font-family);
|
|
fill: var(--md-mermaid-label-fg-color);
|
|
}
|
|
|
|
/* Sequence actor line */
|
|
line {
|
|
stroke: var(--md-default-fg-color--lighter);
|
|
}
|
|
|
|
/* Sequence actor */
|
|
.actor-man circle,
|
|
.actor-man line {
|
|
fill: var(--md-mermaid-label-bg-color);
|
|
stroke: var(--md-mermaid-node-fg-color);
|
|
}
|
|
|
|
/* Sequence message line */
|
|
.messageLine0,
|
|
.messageLine1 {
|
|
stroke: var(--md-mermaid-edge-color);
|
|
}
|
|
|
|
/* Sequence message, loop and note text */
|
|
.messageText,
|
|
.loopText,
|
|
.loopText > tspan,
|
|
.noteText > tspan {
|
|
font-family: var(--md-mermaid-font-family) !important;
|
|
fill: var(--md-mermaid-edge-color);
|
|
stroke: none;
|
|
}
|
|
|
|
/* Sequence note text */
|
|
.noteText > tspan {
|
|
fill: hsl(0, 0%, 0%);
|
|
}
|
|
|
|
/* Sequence arrow head */
|
|
#arrowhead path {
|
|
fill: var(--md-mermaid-edge-color);
|
|
stroke: none;
|
|
}
|
|
|
|
/* Sequence loop line */
|
|
.loopLine {
|
|
fill: var(--md-mermaid-node-bg-color);
|
|
stroke: var(--md-mermaid-node-fg-color);
|
|
}
|
|
|
|
/* Sequence label box */
|
|
.labelBox {
|
|
fill: var(--md-mermaid-node-bg-color);
|
|
stroke: none;
|
|
}
|
|
|
|
/* Sequence label text */
|
|
.labelText,
|
|
.labelText > span {
|
|
font-family: var(--md-mermaid-font-family);
|
|
fill: var(--md-mermaid-node-fg-color);
|
|
}
|
|
|
|
/* Sequence number */
|
|
.sequenceNumber {
|
|
fill: var(--md-accent-bg-color);
|
|
}
|
|
|
|
/* Sequence rectangle */
|
|
rect.rect {
|
|
fill: var(--md-mermaid-node-bg-color);
|
|
stroke: none;
|
|
}
|
|
|
|
/* Sequence rectangle text */
|
|
rect.rect + text.text {
|
|
fill: var(--md-mermaid-edge-color);
|
|
}
|
|
|
|
/* Sequence diagram markers */
|
|
defs #sequencenumber {
|
|
fill: var(--md-mermaid-node-fg-color) !important;
|
|
}
|