mermaid
Version:
Markdownish syntax for generating flowcharts, sequence diagrams and gantt charts.
82 lines (75 loc) • 13.5 kB
HTML
<html>
<head>
<title>tipsy.css</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" media="all" href="../../../doc-style.css" />
<script src="../../../doc-filelist.js"></script>
<script>
var relativeDir = "../../../", thisFile = "Users/knut/Documents/source/mermaid/bower_components/dagre-d3/demo/tipsy.css", defaultSidebar = true;
</script>
<script src="../../../doc-script.js"></script>
<script src="../../../mermaid.js"></script>
<link rel="stylesheet" href="../../../mermaid.css" />
</head>
<body>
<div id="sidebar_wrapper">
<div id="sidebar_switch">
<span class="tree">Files</span>
<span class="headings">Headings</span>
</div>
<div id="tree"></div>
<div id="headings">
<div class="heading h1">
<a href="#tipsy.css">tipsy.css</a>
</div>
</div>
</div>
<div id="sidebar-toggle"></div>
<div id="container"><div class="background highlight"></div>
<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="docs">
<div class="pilwrap" id="tipsy.css">
<h1>
<a href="#tipsy.css" name="tipsy.css" class="pilcrow">¶</a>tipsy.css
</h1>
</div>
</td>
<td class="code highlight"></td>
</tr>
<tr>
<td class="docs">
<div class="pilwrap">
<a class="pilcrow" href="#section-1" id="section-1">¶</a>
</div>
</td>
<td class="code highlight"><div class="highlight"><pre><span class="nc">.tipsy</span> <span class="p">{</span> <span class="k">font-size</span><span class="o">:</span> <span class="m">10px</span><span class="p">;</span> <span class="k">position</span><span class="o">:</span> <span class="k">absolute</span><span class="p">;</span> <span class="k">padding</span><span class="o">:</span> <span class="m">5px</span><span class="p">;</span> <span class="k">z-index</span><span class="o">:</span> <span class="m">100000</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.tipsy-inner</span> <span class="p">{</span> <span class="k">background-color</span><span class="o">:</span> <span class="m">#000</span><span class="p">;</span> <span class="k">color</span><span class="o">:</span> <span class="m">#FFF</span><span class="p">;</span> <span class="k">max-width</span><span class="o">:</span> <span class="m">200px</span><span class="p">;</span> <span class="k">padding</span><span class="o">:</span> <span class="m">5px</span> <span class="m">8px</span> <span class="m">4px</span> <span class="m">8px</span><span class="p">;</span> <span class="k">text-align</span><span class="o">:</span> <span class="k">center</span><span class="p">;</span> <span class="p">}</span>
<span class="c">/* Rounded corners */</span>
<span class="nc">.tipsy-inner</span> <span class="p">{</span> <span class="k">border</span><span class="o">-</span><span class="n">radius</span><span class="o">:</span> <span class="m">3px</span><span class="p">;</span> <span class="o">-</span><span class="n">moz</span><span class="o">-</span><span class="k">border</span><span class="o">-</span><span class="n">radius</span><span class="o">:</span> <span class="m">3px</span><span class="p">;</span> <span class="o">-</span><span class="n">webkit</span><span class="o">-</span><span class="k">border</span><span class="o">-</span><span class="n">radius</span><span class="o">:</span> <span class="m">3px</span><span class="p">;</span> <span class="p">}</span>
<span class="c">/* Uncomment for shadow */</span>
<span class="nc">.tipsy-inner</span> <span class="p">{</span> <span class="n">box</span><span class="o">-</span><span class="n">shadow</span><span class="o">:</span> <span class="m">0</span> <span class="m">0</span> <span class="m">5px</span> <span class="m">#000000</span><span class="p">;</span> <span class="o">-</span><span class="n">webkit</span><span class="o">-</span><span class="n">box</span><span class="o">-</span><span class="n">shadow</span><span class="o">:</span> <span class="m">0</span> <span class="m">0</span> <span class="m">5px</span> <span class="m">#000000</span><span class="p">;</span> <span class="o">-</span><span class="n">moz</span><span class="o">-</span><span class="n">box</span><span class="o">-</span><span class="n">shadow</span><span class="o">:</span> <span class="m">0</span> <span class="m">0</span> <span class="m">5px</span> <span class="m">#000000</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.tipsy-arrow</span> <span class="p">{</span> <span class="k">position</span><span class="o">:</span> <span class="k">absolute</span><span class="p">;</span> <span class="k">width</span><span class="o">:</span> <span class="m">0</span><span class="p">;</span> <span class="k">height</span><span class="o">:</span> <span class="m">0</span><span class="p">;</span> <span class="k">line-height</span><span class="o">:</span> <span class="m">0</span><span class="p">;</span> <span class="k">border</span><span class="o">:</span> <span class="m">5px</span> <span class="k">dashed</span> <span class="m">#000</span><span class="p">;</span> <span class="p">}</span>
<span class="c">/* Rules to colour arrows */</span>
<span class="nc">.tipsy-arrow-n</span> <span class="p">{</span> <span class="k">border-bottom-color</span><span class="o">:</span> <span class="m">#000</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.tipsy-arrow-s</span> <span class="p">{</span> <span class="k">border-top-color</span><span class="o">:</span> <span class="m">#000</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.tipsy-arrow-e</span> <span class="p">{</span> <span class="k">border-left-color</span><span class="o">:</span> <span class="m">#000</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.tipsy-arrow-w</span> <span class="p">{</span> <span class="k">border-right</span><span class="o">-</span><span class="k">color</span><span class="o">:</span> <span class="m">#000</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.tipsy-n</span> <span class="nc">.tipsy-arrow</span> <span class="p">{</span> <span class="k">top</span><span class="o">:</span> <span class="m">0px</span><span class="p">;</span> <span class="k">left</span><span class="o">:</span> <span class="m">50</span><span class="o">%</span><span class="p">;</span> <span class="k">margin-left</span><span class="o">:</span> <span class="m">-5px</span><span class="p">;</span> <span class="k">border-bottom-style</span><span class="o">:</span> <span class="k">solid</span><span class="p">;</span> <span class="k">border-top</span><span class="o">:</span> <span class="k">none</span><span class="p">;</span> <span class="k">border-left-color</span><span class="o">:</span> <span class="k">transparent</span><span class="p">;</span> <span class="k">border-right</span><span class="o">-</span><span class="k">color</span><span class="o">:</span> <span class="k">transparent</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.tipsy-nw</span> <span class="nc">.tipsy-arrow</span> <span class="p">{</span> <span class="k">top</span><span class="o">:</span> <span class="m">0</span><span class="p">;</span> <span class="k">left</span><span class="o">:</span> <span class="m">10px</span><span class="p">;</span> <span class="k">border-bottom-style</span><span class="o">:</span> <span class="k">solid</span><span class="p">;</span> <span class="k">border-top</span><span class="o">:</span> <span class="k">none</span><span class="p">;</span> <span class="k">border-left-color</span><span class="o">:</span> <span class="k">transparent</span><span class="p">;</span> <span class="k">border-right</span><span class="o">-</span><span class="k">color</span><span class="o">:</span> <span class="k">transparent</span><span class="p">;}</span>
<span class="nc">.tipsy-ne</span> <span class="nc">.tipsy-arrow</span> <span class="p">{</span> <span class="k">top</span><span class="o">:</span> <span class="m">0</span><span class="p">;</span> <span class="k">right</span><span class="o">:</span> <span class="m">10px</span><span class="p">;</span> <span class="k">border-bottom-style</span><span class="o">:</span> <span class="k">solid</span><span class="p">;</span> <span class="k">border-top</span><span class="o">:</span> <span class="k">none</span><span class="p">;</span> <span class="k">border-left-color</span><span class="o">:</span> <span class="k">transparent</span><span class="p">;</span> <span class="k">border-right</span><span class="o">-</span><span class="k">color</span><span class="o">:</span> <span class="k">transparent</span><span class="p">;}</span>
<span class="nc">.tipsy-s</span> <span class="nc">.tipsy-arrow</span> <span class="p">{</span> <span class="k">bottom</span><span class="o">:</span> <span class="m">0</span><span class="p">;</span> <span class="k">left</span><span class="o">:</span> <span class="m">50</span><span class="o">%</span><span class="p">;</span> <span class="k">margin-left</span><span class="o">:</span> <span class="m">-5px</span><span class="p">;</span> <span class="k">border-top-style</span><span class="o">:</span> <span class="k">solid</span><span class="p">;</span> <span class="k">border-bottom</span><span class="o">:</span> <span class="k">none</span><span class="p">;</span> <span class="k">border-left-color</span><span class="o">:</span> <span class="k">transparent</span><span class="p">;</span> <span class="k">border-right</span><span class="o">-</span><span class="k">color</span><span class="o">:</span> <span class="k">transparent</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.tipsy-sw</span> <span class="nc">.tipsy-arrow</span> <span class="p">{</span> <span class="k">bottom</span><span class="o">:</span> <span class="m">0</span><span class="p">;</span> <span class="k">left</span><span class="o">:</span> <span class="m">10px</span><span class="p">;</span> <span class="k">border-top-style</span><span class="o">:</span> <span class="k">solid</span><span class="p">;</span> <span class="k">border-bottom</span><span class="o">:</span> <span class="k">none</span><span class="p">;</span> <span class="k">border-left-color</span><span class="o">:</span> <span class="k">transparent</span><span class="p">;</span> <span class="k">border-right</span><span class="o">-</span><span class="k">color</span><span class="o">:</span> <span class="k">transparent</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.tipsy-se</span> <span class="nc">.tipsy-arrow</span> <span class="p">{</span> <span class="k">bottom</span><span class="o">:</span> <span class="m">0</span><span class="p">;</span> <span class="k">right</span><span class="o">:</span> <span class="m">10px</span><span class="p">;</span> <span class="k">border-top-style</span><span class="o">:</span> <span class="k">solid</span><span class="p">;</span> <span class="k">border-bottom</span><span class="o">:</span> <span class="k">none</span><span class="p">;</span> <span class="k">border-left-color</span><span class="o">:</span> <span class="k">transparent</span><span class="p">;</span> <span class="k">border-right</span><span class="o">-</span><span class="k">color</span><span class="o">:</span> <span class="k">transparent</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.tipsy-e</span> <span class="nc">.tipsy-arrow</span> <span class="p">{</span> <span class="k">right</span><span class="o">:</span> <span class="m">0</span><span class="p">;</span> <span class="k">top</span><span class="o">:</span> <span class="m">50</span><span class="o">%</span><span class="p">;</span> <span class="k">margin-top</span><span class="o">:</span> <span class="m">-5px</span><span class="p">;</span> <span class="k">border-left-style</span><span class="o">:</span> <span class="k">solid</span><span class="p">;</span> <span class="k">border-right</span><span class="o">:</span> <span class="k">none</span><span class="p">;</span> <span class="k">border-top-color</span><span class="o">:</span> <span class="k">transparent</span><span class="p">;</span> <span class="k">border-bottom-color</span><span class="o">:</span> <span class="k">transparent</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.tipsy-w</span> <span class="nc">.tipsy-arrow</span> <span class="p">{</span> <span class="k">left</span><span class="o">:</span> <span class="m">0</span><span class="p">;</span> <span class="k">top</span><span class="o">:</span> <span class="m">50</span><span class="o">%</span><span class="p">;</span> <span class="k">margin-top</span><span class="o">:</span> <span class="m">-5px</span><span class="p">;</span> <span class="k">border-right</span><span class="o">-</span><span class="n">style</span><span class="o">:</span> <span class="k">solid</span><span class="p">;</span> <span class="k">border-left</span><span class="o">:</span> <span class="k">none</span><span class="p">;</span> <span class="k">border-top-color</span><span class="o">:</span> <span class="k">transparent</span><span class="p">;</span> <span class="k">border-bottom-color</span><span class="o">:</span> <span class="k">transparent</span><span class="p">;</span> <span class="p">}</span>
</pre></div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>