lumiera_/doc/devel/draw/TimelineCSS.svg

394 lines
69 KiB
XML
Raw Normal View History

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="840"
height="610"
viewBox="0 10 840 610"
version="1.1"
id="svg8"
inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
sodipodi:docname="TimelineCSS.svg"
inkscape:export-filename="/home/hiv/devel/lumi/doc/devel/draw/rendered/TimelineCSS.png"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96">
<title
id="title4722">Timeline CSS rules</title>
<defs
id="defs2">
<marker
inkscape:stockid="Arrow2Mend"
orient="auto"
refY="0"
refX="0"
id="Arrow2Mend"
style="overflow:visible"
inkscape:isstock="true"
inkscape:collect="always">
<path
id="arrow222"
style="fill:#2b42c9;fill-rule:evenodd;stroke:#2b42c9;stroke-width:0.625;stroke-opacity:1"
d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
transform="scale(-0.6)"
inkscape:connector-curvature="0" />
</marker>
</defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1"
inkscape:cx="239.00405"
inkscape:cy="280.24885"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1680"
inkscape:window-height="1031"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1" />
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title>Timeline CSS rules</dc:title>
<dc:date>15.Mar.2023</dc:date>
<dc:creator>
<cc:Agent>
<dc:title>Ichthyostega</dc:title>
</cc:Agent>
</dc:creator>
<cc:license
rdf:resource="http://creativecommons.org/licenses/by-sa/4.0/" />
<dc:publisher>
<cc:Agent>
<dc:title>Lumiera.org</dc:title>
</cc:Agent>
</dc:publisher>
<dc:description>Demonstration of CSS rules used for Timeline canvas custom drawing</dc:description>
</cc:Work>
<cc:License
rdf:about="http://creativecommons.org/licenses/by-sa/4.0/">
<cc:permits
rdf:resource="http://creativecommons.org/ns#Reproduction" />
<cc:permits
rdf:resource="http://creativecommons.org/ns#Distribution" />
<cc:requires
rdf:resource="http://creativecommons.org/ns#Notice" />
<cc:requires
rdf:resource="http://creativecommons.org/ns#Attribution" />
<cc:permits
rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
<cc:requires
rdf:resource="http://creativecommons.org/ns#ShareAlike" />
</cc:License>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-22.41666)">
<image
y="46.916656"
x="10"
id="image4700"
xlink:href="data:image/png;base64,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
style="image-rendering:optimizeSpeed"
preserveAspectRatio="none"
height="583"
width="496" />
<g
id="g5060">
<path
inkscape:connector-curvature="0"
id="path4724"
d="m 574,50.41665 -81,16"
style="fill:none;stroke:#2b42c9;stroke-width:2;stroke-opacity:1;marker-end:url(#Arrow2Mend)" />
<text
id="text5033"
y="56.416649"
x="578"
style="font-size:10px;font-family:'Bitstream Vera Sans';letter-spacing:0.01px;fill:#2b41c9;fill-opacity:1;stroke:none"
xml:space="preserve"><tspan
sodipodi:role="line"
id="tspan1117"
x="578"
y="56.416649">Borders shifted to demonstrate drawing</tspan><tspan
sodipodi:role="line"
id="tspan1119"
x="578"
y="67.083313"> of drop shadows</tspan></text>
</g>
<flowRoot
xml:space="preserve"
id="flowRoot5035"
style="font-size:10px;font-family:'Bitstream Vera Sans';letter-spacing:0.01px;fill:#2b41c9;fill-opacity:1;stroke:none"
transform="translate(0,32.41665)"><flowRegion
id="flowRegion5037"><rect
id="rect5039"
width="13"
height="11"
x="594"
y="29" /></flowRegion><flowPara
id="flowPara5041" /></flowRoot>
<g
id="g5068"
transform="translate(0,90)">
<path
style="fill:none;stroke:#2b42c9;stroke-width:2;stroke-opacity:1;marker-end:url(#Arrow2Mend)"
d="m 575.75,55.91665 -83.25,7.5"
id="path5062"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cc" />
<text
xml:space="preserve"
style="font-size:10px;font-family:'Bitstream Vera Sans';letter-spacing:0.01px;fill:#2b41c9;fill-opacity:1;stroke:none"
x="578"
y="56.416649"
id="text5066"><tspan
sodipodi:role="line"
x="578"
y="56.416649"
id="tspan5320">Note: clipping due to shadow beyond margin</tspan></text>
</g>
<g
transform="translate(0,132.42641)"
id="g846">
<path
sodipodi:nodetypes="cc"
inkscape:connector-curvature="0"
id="path840"
d="M 575.75,49.552689 432.39593,36.546593"
style="fill:none;stroke:#2b42c9;stroke-width:2;stroke-opacity:1;marker-end:url(#Arrow2Mend)" />
<text
id="text844"
y="56.416649"
x="578"
style="font-size:10px;font-family:'Bitstream Vera Sans';letter-spacing:0.01px;fill:#2b41c9;fill-opacity:1;stroke:none"
xml:space="preserve"><tspan
id="tspan842"
y="56.416649"
x="578"
sodipodi:role="line">box-shadow inset (DeepSkyBlue)</tspan></text>
</g>
<g
id="g1506"
transform="translate(0,148.92641)">
<path
style="fill:none;stroke:#2b42c9;stroke-width:2;stroke-opacity:1;marker-end:url(#Arrow2Mend)"
d="M 575.75,56.052689 474.39593,66.046592"
id="path1500"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cc" />
<text
xml:space="preserve"
style="font-size:10px;font-family:'Bitstream Vera Sans';letter-spacing:0.01px;fill:#2b41c9;fill-opacity:1;stroke:none"
x="578"
y="56.416649"
id="text1504"><tspan
sodipodi:role="line"
x="578"
y="56.416649"
id="tspan1502">box-shadow (ForestGreen)</tspan></text>
</g>
<g
transform="translate(0,392.4264)"
id="g1800">
<path
sodipodi:nodetypes="cc"
inkscape:connector-curvature="0"
id="path1794"
d="m 575.75,56.052689 -77.35407,2.993903"
style="fill:none;stroke:#2b42c9;stroke-width:2;stroke-opacity:1;marker-end:url(#Arrow2Mend)" />
<text
id="text1798"
y="56.416649"
x="578"
style="font-size:10px;font-family:'Bitstream Vera Sans';letter-spacing:0.01px;fill:#2b41c9;fill-opacity:1;stroke:none"
xml:space="preserve"><tspan
id="tspan1796"
y="56.416649"
x="578"
sodipodi:role="line">opening slope (next nesting level)</tspan></text>
</g>
<g
id="g2100"
transform="translate(0,205.92641)">
<path
style="fill:none;stroke:#2b42c9;stroke-width:2;stroke-opacity:1;marker-end:url(#Arrow2Mend)"
d="M 575.75,52.052689 458.89593,41.546592"
id="path2094"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cc" />
<text
xml:space="preserve"
style="font-size:10px;font-family:'Bitstream Vera Sans';letter-spacing:0.01px;fill:#2b41c9;fill-opacity:1;stroke:none"
x="578"
y="56.416649"
id="text2098"><tspan
sodipodi:role="line"
x="578"
y="56.416649"
id="tspan2096">margin-top: 2ex</tspan></text>
</g>
<g
transform="translate(0,247.92641)"
id="g2358">
<path
sodipodi:nodetypes="cc"
inkscape:connector-curvature="0"
id="path2352"
d="M 575.75,57.052689 491.39593,80.046591"
style="fill:none;stroke:#2b42c9;stroke-width:2;stroke-opacity:1;marker-end:url(#Arrow2Mend)" />
<text
id="text2356"
y="56.416649"
x="578"
style="font-size:10px;font-family:'Bitstream Vera Sans';letter-spacing:0.01px;fill:#2b41c9;fill-opacity:1;stroke:none"
xml:space="preserve"><tspan
id="tspan2354"
y="56.416649"
x="578"
sodipodi:role="line">border: 3px outset DarkGoldenRod;</tspan></text>
</g>
<g
transform="translate(0,439.4264)"
id="g2778">
<path
sodipodi:nodetypes="cc"
inkscape:connector-curvature="0"
id="path2772"
d="M 575.75,52.052689 258.39594,36.046592"
style="fill:none;stroke:#2b42c9;stroke-width:2;stroke-opacity:1;marker-end:url(#Arrow2Mend)" />
<text
id="text2776"
y="56.416649"
x="578"
style="font-size:10px;font-family:'Bitstream Vera Sans';letter-spacing:0.01px;fill:#2b41c9;fill-opacity:1;stroke:none"
xml:space="preserve"><tspan
id="tspan2774"
y="56.416649"
x="578"
sodipodi:role="line">padding-top: 10px</tspan></text>
</g>
<g
id="g3144"
transform="translate(0,524.4264)">
<path
style="fill:none;stroke:#2b42c9;stroke-width:2;stroke-opacity:1;marker-end:url(#Arrow2Mend)"
d="M 575.75,56.052689 494.89593,97.046591"
id="path3138"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cc" />
<text
xml:space="preserve"
style="font-size:10px;font-family:'Bitstream Vera Sans';letter-spacing:0.01px;fill:#2b41c9;fill-opacity:1;stroke:none"
x="578"
y="56.416649"
id="text3142"><tspan
sodipodi:role="line"
id="tspan3388"
x="578"
y="56.416649">combined closing slope</tspan><tspan
sodipodi:role="line"
id="tspan3390"
x="578"
y="67.083313" /><tspan
sodipodi:role="line"
id="tspan3392"
x="578"
y="77.749985">class .track-slope--deep2</tspan><tspan
sodipodi:role="line"
id="tspan3394"
x="578"
y="88.416649">+ border settings from fork.timeline__fork</tspan></text>
</g>
<g
id="g3402"
transform="translate(0,333.42641)">
<path
style="fill:none;stroke:#2b42c9;stroke-width:2;stroke-opacity:1;marker-end:url(#Arrow2Mend)"
d="M 575.75,49.552689 474.39593,39.046593"
id="path3396"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cc" />
<text
xml:space="preserve"
style="font-size:10px;font-family:'Bitstream Vera Sans';letter-spacing:0.01px;fill:#2b41c9;fill-opacity:1;stroke:none"
x="578"
y="56.416649"
id="text3400"><tspan
sodipodi:role="line"
id="tspan3750"
x="578"
y="56.416649">box-shadow</tspan><tspan
sodipodi:role="line"
id="tspan3752"
x="578"
y="67.083313">5px 3px 6px 4px Sienna</tspan><tspan
sodipodi:role="line"
id="tspan3754"
x="578"
y="77.749985">(note 6px blurring)</tspan></text>
</g>
<g
id="g3762"
transform="translate(0,63)">
<path
style="fill:none;stroke:#2b42c9;stroke-width:2;stroke-opacity:1;marker-end:url(#Arrow2Mend)"
d="m 574,55.91665 -173,8.5"
id="path3756"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cc" />
<text
xml:space="preserve"
style="font-size:10px;font-family:'Bitstream Vera Sans';letter-spacing:0.01px;fill:#2b41c9;fill-opacity:1;stroke:none"
x="578"
y="56.416649"
id="text3760"><tspan
sodipodi:role="line"
id="tspan3758"
x="578"
y="56.416649">fork.timeline__fork frame.timeline__ruler</tspan></text>
</g>
<g
transform="translate(0,224)"
id="g4146">
<path
sodipodi:nodetypes="cc"
inkscape:connector-curvature="0"
id="path4140"
d="M 574,55.91665 H 377"
style="fill:none;stroke:#2b42c9;stroke-width:2;stroke-opacity:1;marker-end:url(#Arrow2Mend)" />
<text
id="text4144"
y="56.416649"
x="578"
style="font-size:10px;font-family:'Bitstream Vera Sans';letter-spacing:0.01px;fill:#2b41c9;fill-opacity:1;stroke:none"
xml:space="preserve"><tspan
y="56.416649"
x="578"
id="tspan4142"
sodipodi:role="line">fork.timeline__fork</tspan></text>
</g>
</g>
</svg>