snipt

Ctrl+h for KB shortcuts

CSS

Base & Reset styles

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed,  
figure, figcaption, footer, header, hgroup,  
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
} 
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,  
footer, header, hgroup, menu, nav, section { 
    display: block; 
} 
body { 
    background: #fff; 
    color: @Default; 
  
    .sans-serif; 
    line-height: 1; 
} 
a { 
    text-decoration: none; 
} 
blockquote, q { 
    quotes: none; 
  
    &:before, &:after { 
        content: ''; 
        content: none; 
    } 
} 
h1, h2, h3, h4, h5, h6 { 
    margin-bottom: 0.5em; 
    .serif; 
    font-style: normal; 
    font-weight: 600; 
} 
    h1 { 
        font-size: 167%; 
    } 
    h2 { 
        font-size: 146.5%; 
    } 
    h3 { 
        font-size: 123.1%; 
    } 
    h4 { 
        font-size: 113%; 
    } 
    h5 { 
        font-size: 108%;  
    } 
    h6 { 
        font-size: 104%;  
    } 
  
input[type=color], input[type=date], input[type=datetime],  
input[type=datetime-local], input[type=email], input[type=month],  
input[type=number], input[type=password], input[type=text] { 
    .input-text; 
} 
select { 
    .select; 
} 
p { 
    line-height: 125%; 
} 
ol, ul { 
    list-style: none; 
} 
    li { 
        margin-bottom: 2%; 
    } 
small { 
    font-size: 80%; 
} 
table { 
    display: table; 
    border-collapse: collapse; 
    empty-cells: show; 
} 
    td, th { 
        display: table-cell; 
        text-align: left; 
    }
https://snipt.net/embed/9794a8d8eb20d5b8ee29c14af9a42d89/
/raw/9794a8d8eb20d5b8ee29c14af9a42d89/
9794a8d8eb20d5b8ee29c14af9a42d89
css
CSS
96
2019-06-18T04:36:45
True
False
False
/api/public/snipt/69499/
base-styles
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1"> 1</a> <a href="#L-2"> 2</a> <a href="#L-3"> 3</a> <a href="#L-4"> 4</a> <a href="#L-5"> 5</a> <a href="#L-6"> 6</a> <a href="#L-7"> 7</a> <a href="#L-8"> 8</a> <a href="#L-9"> 9</a> <a href="#L-10">10</a> <a href="#L-11">11</a> <a href="#L-12">12</a> <a href="#L-13">13</a> <a href="#L-14">14</a> <a href="#L-15">15</a> <a href="#L-16">16</a> <a href="#L-17">17</a> <a href="#L-18">18</a> <a href="#L-19">19</a> <a href="#L-20">20</a> <a href="#L-21">21</a> <a href="#L-22">22</a> <a href="#L-23">23</a> <a href="#L-24">24</a> <a href="#L-25">25</a> <a href="#L-26">26</a> <a href="#L-27">27</a> <a href="#L-28">28</a> <a href="#L-29">29</a> <a href="#L-30">30</a> <a href="#L-31">31</a> <a href="#L-32">32</a> <a href="#L-33">33</a> <a href="#L-34">34</a> <a href="#L-35">35</a> <a href="#L-36">36</a> <a href="#L-37">37</a> <a href="#L-38">38</a> <a href="#L-39">39</a> <a href="#L-40">40</a> <a href="#L-41">41</a> <a href="#L-42">42</a> <a href="#L-43">43</a> <a href="#L-44">44</a> <a href="#L-45">45</a> <a href="#L-46">46</a> <a href="#L-47">47</a> <a href="#L-48">48</a> <a href="#L-49">49</a> <a href="#L-50">50</a> <a href="#L-51">51</a> <a href="#L-52">52</a> <a href="#L-53">53</a> <a href="#L-54">54</a> <a href="#L-55">55</a> <a href="#L-56">56</a> <a href="#L-57">57</a> <a href="#L-58">58</a> <a href="#L-59">59</a> <a href="#L-60">60</a> <a href="#L-61">61</a> <a href="#L-62">62</a> <a href="#L-63">63</a> <a href="#L-64">64</a> <a href="#L-65">65</a> <a href="#L-66">66</a> <a href="#L-67">67</a> <a href="#L-68">68</a> <a href="#L-69">69</a> <a href="#L-70">70</a> <a href="#L-71">71</a> <a href="#L-72">72</a> <a href="#L-73">73</a> <a href="#L-74">74</a> <a href="#L-75">75</a> <a href="#L-76">76</a> <a href="#L-77">77</a> <a href="#L-78">78</a> <a href="#L-79">79</a> <a href="#L-80">80</a> <a href="#L-81">81</a> <a href="#L-82">82</a> <a href="#L-83">83</a> <a href="#L-84">84</a> <a href="#L-85">85</a> <a href="#L-86">86</a> <a href="#L-87">87</a> <a href="#L-88">88</a> <a href="#L-89">89</a> <a href="#L-90">90</a> <a href="#L-91">91</a> <a href="#L-92">92</a> <a href="#L-93">93</a> <a href="#L-94">94</a> <a href="#L-95">95</a> <a href="#L-96">96</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a><span class="nt">html</span><span class="o">,</span> <span class="nt">body</span><span class="o">,</span> <span class="nt">div</span><span class="o">,</span> <span class="nt">span</span><span class="o">,</span> <span class="nt">applet</span><span class="o">,</span> <span class="nt">object</span><span class="o">,</span> <span class="nt">iframe</span><span class="o">,</span> </span><span id="L-2"><a name="L-2"></a><span class="nt">h1</span><span class="o">,</span> <span class="nt">h2</span><span class="o">,</span> <span class="nt">h3</span><span class="o">,</span> <span class="nt">h4</span><span class="o">,</span> <span class="nt">h5</span><span class="o">,</span> <span class="nt">h6</span><span class="o">,</span> <span class="nt">p</span><span class="o">,</span> <span class="nt">blockquote</span><span class="o">,</span> <span class="nt">pre</span><span class="o">,</span> </span><span id="L-3"><a name="L-3"></a><span class="nt">a</span><span class="o">,</span> <span class="nt">abbr</span><span class="o">,</span> <span class="nt">acronym</span><span class="o">,</span> <span class="nt">address</span><span class="o">,</span> <span class="nt">big</span><span class="o">,</span> <span class="nt">cite</span><span class="o">,</span> <span class="nt">code</span><span class="o">,</span> </span><span id="L-4"><a name="L-4"></a><span class="nt">del</span><span class="o">,</span> <span class="nt">dfn</span><span class="o">,</span> <span class="nt">em</span><span class="o">,</span> <span class="nt">img</span><span class="o">,</span> <span class="nt">ins</span><span class="o">,</span> <span class="nt">kbd</span><span class="o">,</span> <span class="nt">q</span><span class="o">,</span> <span class="nt">s</span><span class="o">,</span> <span class="nt">samp</span><span class="o">,</span> </span><span id="L-5"><a name="L-5"></a><span class="nt">small</span><span class="o">,</span> <span class="nt">strike</span><span class="o">,</span> <span class="nt">strong</span><span class="o">,</span> <span class="nt">sub</span><span class="o">,</span> <span class="nt">sup</span><span class="o">,</span> <span class="nt">tt</span><span class="o">,</span> <span class="nt">var</span><span class="o">,</span> </span><span id="L-6"><a name="L-6"></a><span class="nt">b</span><span class="o">,</span> <span class="nt">u</span><span class="o">,</span> <span class="nt">i</span><span class="o">,</span> <span class="nt">center</span><span class="o">,</span> <span class="nt">dl</span><span class="o">,</span> <span class="nt">dt</span><span class="o">,</span> <span class="nt">dd</span><span class="o">,</span> <span class="nt">ol</span><span class="o">,</span> <span class="nt">ul</span><span class="o">,</span> <span class="nt">li</span><span class="o">,</span> </span><span id="L-7"><a name="L-7"></a><span class="nt">fieldset</span><span class="o">,</span> <span class="nt">form</span><span class="o">,</span> <span class="nt">label</span><span class="o">,</span> <span class="nt">legend</span><span class="o">,</span> </span><span id="L-8"><a name="L-8"></a><span class="nt">table</span><span class="o">,</span> <span class="nt">caption</span><span class="o">,</span> <span class="nt">tbody</span><span class="o">,</span> <span class="nt">tfoot</span><span class="o">,</span> <span class="nt">thead</span><span class="o">,</span> <span class="nt">tr</span><span class="o">,</span> <span class="nt">th</span><span class="o">,</span> <span class="nt">td</span><span class="o">,</span> </span><span id="L-9"><a name="L-9"></a><span class="nt">article</span><span class="o">,</span> <span class="nt">aside</span><span class="o">,</span> <span class="nt">canvas</span><span class="o">,</span> <span class="nt">details</span><span class="o">,</span> <span class="nt">embed</span><span class="o">,</span> </span><span id="L-10"><a name="L-10"></a><span class="nt">figure</span><span class="o">,</span> <span class="nt">figcaption</span><span class="o">,</span> <span class="nt">footer</span><span class="o">,</span> <span class="nt">header</span><span class="o">,</span> <span class="nt">hgroup</span><span class="o">,</span> </span><span id="L-11"><a name="L-11"></a><span class="nt">menu</span><span class="o">,</span> <span class="nt">nav</span><span class="o">,</span> <span class="nt">output</span><span class="o">,</span> <span class="nt">ruby</span><span class="o">,</span> <span class="nt">section</span><span class="o">,</span> <span class="nt">summary</span><span class="o">,</span> </span><span id="L-12"><a name="L-12"></a><span class="nt">time</span><span class="o">,</span> <span class="nt">mark</span><span class="o">,</span> <span class="nt">audio</span><span class="o">,</span> <span class="nt">video</span> <span class="p">{</span> </span><span id="L-13"><a name="L-13"></a> <span class="nb">margin</span><span class="o">:</span> <span class="m">0</span><span class="p">;</span> </span><span id="L-14"><a name="L-14"></a> <span class="nb">padding</span><span class="o">:</span> <span class="m">0</span><span class="p">;</span> </span><span id="L-15"><a name="L-15"></a> <span class="nb">border</span><span class="o">:</span> <span class="m">0</span><span class="p">;</span> </span><span id="L-16"><a name="L-16"></a> <span class="nb">font-size</span><span class="o">:</span> <span class="m">100%</span><span class="p">;</span> </span><span id="L-17"><a name="L-17"></a> <span class="nb">font</span><span class="o">:</span> <span class="nb">inherit</span><span class="p">;</span> </span><span id="L-18"><a name="L-18"></a> <span class="nb">vertical-align</span><span class="o">:</span> <span class="nb">baseline</span><span class="p">;</span> </span><span id="L-19"><a name="L-19"></a><span class="p">}</span> </span><span id="L-20"><a name="L-20"></a><span class="c">/* HTML5 display-role reset for older browsers */</span> </span><span id="L-21"><a name="L-21"></a><span class="nt">article</span><span class="o">,</span> <span class="nt">aside</span><span class="o">,</span> <span class="nt">details</span><span class="o">,</span> <span class="nt">figcaption</span><span class="o">,</span> <span class="nt">figure</span><span class="o">,</span> </span><span id="L-22"><a name="L-22"></a><span class="nt">footer</span><span class="o">,</span> <span class="nt">header</span><span class="o">,</span> <span class="nt">hgroup</span><span class="o">,</span> <span class="nt">menu</span><span class="o">,</span> <span class="nt">nav</span><span class="o">,</span> <span class="nt">section</span> <span class="p">{</span> </span><span id="L-23"><a name="L-23"></a> <span class="nb">display</span><span class="o">:</span> <span class="nb">block</span><span class="p">;</span> </span><span id="L-24"><a name="L-24"></a><span class="p">}</span> </span><span id="L-25"><a name="L-25"></a><span class="nt">body</span> <span class="p">{</span> </span><span id="L-26"><a name="L-26"></a> <span class="nb">background</span><span class="o">:</span> <span class="m">#fff</span><span class="p">;</span> </span><span id="L-27"><a name="L-27"></a> <span class="nb">color</span><span class="o">:</span> <span class="o">@</span><span class="n">Default</span><span class="p">;</span> </span><span id="L-28"><a name="L-28"></a> </span><span id="L-29"><a name="L-29"></a> <span class="o">.</span><span class="nb">sans-serif</span><span class="p">;</span> </span><span id="L-30"><a name="L-30"></a> <span class="nb">line-height</span><span class="o">:</span> <span class="m">1</span><span class="p">;</span> </span><span id="L-31"><a name="L-31"></a><span class="p">}</span> </span><span id="L-32"><a name="L-32"></a><span class="nt">a</span> <span class="p">{</span> </span><span id="L-33"><a name="L-33"></a> <span class="nb">text-decoration</span><span class="o">:</span> <span class="nb">none</span><span class="p">;</span> </span><span id="L-34"><a name="L-34"></a><span class="p">}</span> </span><span id="L-35"><a name="L-35"></a><span class="nt">blockquote</span><span class="o">,</span> <span class="nt">q</span> <span class="p">{</span> </span><span id="L-36"><a name="L-36"></a> <span class="nb">quotes</span><span class="o">:</span> <span class="nb">none</span><span class="p">;</span> </span><span id="L-37"><a name="L-37"></a> </span><span id="L-38"><a name="L-38"></a> <span class="o">&amp;:</span><span class="n">before</span><span class="o">,</span> <span class="o">&amp;:</span><span class="n">after</span> <span class="err">{</span> </span><span id="L-39"><a name="L-39"></a> <span class="nb">content</span><span class="o">:</span> <span class="s1">&#39;&#39;</span><span class="p">;</span> </span><span id="L-40"><a name="L-40"></a> <span class="nb">content</span><span class="o">:</span> <span class="nb">none</span><span class="p">;</span> </span><span id="L-41"><a name="L-41"></a> <span class="p">}</span> </span><span id="L-42"><a name="L-42"></a><span class="err">}</span> </span><span id="L-43"><a name="L-43"></a><span class="nt">h1</span><span class="o">,</span> <span class="nt">h2</span><span class="o">,</span> <span class="nt">h3</span><span class="o">,</span> <span class="nt">h4</span><span class="o">,</span> <span class="nt">h5</span><span class="o">,</span> <span class="nt">h6</span> <span class="p">{</span> </span><span id="L-44"><a name="L-44"></a> <span class="nb">margin-bottom</span><span class="o">:</span> <span class="m">0.5em</span><span class="p">;</span> </span><span id="L-45"><a name="L-45"></a> <span class="o">.</span><span class="nb">serif</span><span class="p">;</span> </span><span id="L-46"><a name="L-46"></a> <span class="nb">font-style</span><span class="o">:</span> <span class="nb">normal</span><span class="p">;</span> </span><span id="L-47"><a name="L-47"></a> <span class="nb">font-weight</span><span class="o">:</span> <span class="m">600</span><span class="p">;</span> </span><span id="L-48"><a name="L-48"></a><span class="p">}</span> </span><span id="L-49"><a name="L-49"></a> <span class="nt">h1</span> <span class="p">{</span> </span><span id="L-50"><a name="L-50"></a> <span class="nb">font-size</span><span class="o">:</span> <span class="m">167%</span><span class="p">;</span> </span><span id="L-51"><a name="L-51"></a> <span class="p">}</span> </span><span id="L-52"><a name="L-52"></a> <span class="nt">h2</span> <span class="p">{</span> </span><span id="L-53"><a name="L-53"></a> <span class="nb">font-size</span><span class="o">:</span> <span class="m">146.5%</span><span class="p">;</span> </span><span id="L-54"><a name="L-54"></a> <span class="p">}</span> </span><span id="L-55"><a name="L-55"></a> <span class="nt">h3</span> <span class="p">{</span> </span><span id="L-56"><a name="L-56"></a> <span class="nb">font-size</span><span class="o">:</span> <span class="m">123.1%</span><span class="p">;</span> </span><span id="L-57"><a name="L-57"></a> <span class="p">}</span> </span><span id="L-58"><a name="L-58"></a> <span class="nt">h4</span> <span class="p">{</span> </span><span id="L-59"><a name="L-59"></a> <span class="nb">font-size</span><span class="o">:</span> <span class="m">113%</span><span class="p">;</span> </span><span id="L-60"><a name="L-60"></a> <span class="p">}</span> </span><span id="L-61"><a name="L-61"></a> <span class="nt">h5</span> <span class="p">{</span> </span><span id="L-62"><a name="L-62"></a> <span class="nb">font-size</span><span class="o">:</span> <span class="m">108%</span><span class="p">;</span> </span><span id="L-63"><a name="L-63"></a> <span class="p">}</span> </span><span id="L-64"><a name="L-64"></a> <span class="nt">h6</span> <span class="p">{</span> </span><span id="L-65"><a name="L-65"></a> <span class="nb">font-size</span><span class="o">:</span> <span class="m">104%</span><span class="p">;</span> </span><span id="L-66"><a name="L-66"></a> <span class="p">}</span> </span><span id="L-67"><a name="L-67"></a> </span><span id="L-68"><a name="L-68"></a><span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="nt">color</span><span class="o">],</span> <span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="nt">date</span><span class="o">],</span> <span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="nt">datetime</span><span class="o">],</span> </span><span id="L-69"><a name="L-69"></a><span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="nt">datetime-local</span><span class="o">],</span> <span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="nt">email</span><span class="o">],</span> <span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="nt">month</span><span class="o">],</span> </span><span id="L-70"><a name="L-70"></a><span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="nt">number</span><span class="o">],</span> <span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="nt">password</span><span class="o">],</span> <span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="nt">text</span><span class="o">]</span> <span class="p">{</span> </span><span id="L-71"><a name="L-71"></a> <span class="o">.</span><span class="n">input</span><span class="o">-</span><span class="nb">text</span><span class="p">;</span> </span><span id="L-72"><a name="L-72"></a><span class="p">}</span> </span><span id="L-73"><a name="L-73"></a><span class="nt">select</span> <span class="p">{</span> </span><span id="L-74"><a name="L-74"></a> <span class="o">.</span><span class="n">select</span><span class="p">;</span> </span><span id="L-75"><a name="L-75"></a><span class="p">}</span> </span><span id="L-76"><a name="L-76"></a><span class="nt">p</span> <span class="p">{</span> </span><span id="L-77"><a name="L-77"></a> <span class="nb">line-height</span><span class="o">:</span> <span class="m">125%</span><span class="p">;</span> </span><span id="L-78"><a name="L-78"></a><span class="p">}</span> </span><span id="L-79"><a name="L-79"></a><span class="nt">ol</span><span class="o">,</span> <span class="nt">ul</span> <span class="p">{</span> </span><span id="L-80"><a name="L-80"></a> <span class="nb">list-style</span><span class="o">:</span> <span class="nb">none</span><span class="p">;</span> </span><span id="L-81"><a name="L-81"></a><span class="p">}</span> </span><span id="L-82"><a name="L-82"></a> <span class="nt">li</span> <span class="p">{</span> </span><span id="L-83"><a name="L-83"></a> <span class="nb">margin-bottom</span><span class="o">:</span> <span class="m">2%</span><span class="p">;</span> </span><span id="L-84"><a name="L-84"></a> <span class="p">}</span> </span><span id="L-85"><a name="L-85"></a><span class="nt">small</span> <span class="p">{</span> </span><span id="L-86"><a name="L-86"></a> <span class="nb">font-size</span><span class="o">:</span> <span class="m">80%</span><span class="p">;</span> </span><span id="L-87"><a name="L-87"></a><span class="p">}</span> </span><span id="L-88"><a name="L-88"></a><span class="nt">table</span> <span class="p">{</span> </span><span id="L-89"><a name="L-89"></a> <span class="nb">display</span><span class="o">:</span> <span class="n">table</span><span class="p">;</span> </span><span id="L-90"><a name="L-90"></a> <span class="nb">border-collapse</span><span class="o">:</span> <span class="nb">collapse</span><span class="p">;</span> </span><span id="L-91"><a name="L-91"></a> <span class="nb">empty-cells</span><span class="o">:</span> <span class="nb">show</span><span class="p">;</span> </span><span id="L-92"><a name="L-92"></a><span class="p">}</span> </span><span id="L-93"><a name="L-93"></a> <span class="nt">td</span><span class="o">,</span> <span class="nt">th</span> <span class="p">{</span> </span><span id="L-94"><a name="L-94"></a> <span class="nb">display</span><span class="o">:</span> <span class="nb">table-cell</span><span class="p">;</span> </span><span id="L-95"><a name="L-95"></a> <span class="nb">text-align</span><span class="o">:</span> <span class="nb">left</span><span class="p">;</span> </span><span id="L-96"><a name="L-96"></a> <span class="p">}</span> </span></pre></div> </td></tr></table>
base, css, less, reset