Skip to content

Instantly share code, notes, and snippets.

@jaemskyle

jaemskyle/dabblet.css

Forked from LeaVerou/dabblet.css
Created October 17, 2013 05:48
Show Gist options
  • Save jaemskyle/7019660 to your computer and use it in GitHub Desktop.
Save jaemskyle/7019660 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. jaemskyle revised this gist Oct 17, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    {"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
    {"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}
  2. @LeaVerou LeaVerou revised this gist Mar 15, 2013. 1 changed file with 5 additions and 0 deletions.
    5 changes: 5 additions & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -55,6 +55,11 @@ input[type="checkbox"].switch:active + div:before {
    background-color: #aaa;
    }

    input[type="checkbox"].switch:focus + div {
    box-shadow: 0 0 .3em 1px red,
    0 1px 1px hsla(0,0%,100%,.8);
    }

    body {
    padding: 1em;
    background: silver;
  3. @LeaVerou LeaVerou revised this gist Mar 15, 2013. 2 changed files with 1 addition and 41 deletions.
    36 changes: 0 additions & 36 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -55,42 +55,6 @@ input[type="checkbox"].switch:active + div:before {
    background-color: #aaa;
    }

    .ios {
    font-size: 200%;
    }

    .ios input[type="checkbox"].switch + div {
    width: 3em;
    background-color: #eee;
    background-image: linear-gradient(rgba(0,0,0,.25), transparent);
    box-shadow: 0 1px 1px hsla(0,0%,100%,.8),
    0 .1em .1em rgba(0,0,0,.3) inset,
    0 .5em rgba(0,0,0,.05) inset;

    }

    .ios input[type="checkbox"]:checked.switch + div {
    padding-left: 2em;
    width: 1em;
    background-color: hsl(210, 90%, 60%);
    }

    .ios input[type="checkbox"].switch + div:after {
    content: 'Off';
    position: absolute;
    top: 0; right: .9em;
    color: #666;
    font: bold 55%/2 sans-serif;
    text-transform: uppercase;
    }

    .ios input[type="checkbox"]:checked.switch + div:after {
    content: 'On';
    right: auto; left: .9em;
    color: white;
    text-shadow: none;
    }

    body {
    padding: 1em;
    background: silver;
    6 changes: 1 addition & 5 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -4,8 +4,4 @@ <h2>Smaller</h2>

    <h2>With larger font-size</h2>
    <label style="font-size:200%"><input type="checkbox" class="switch" />Tools</label>
    <label style="font-size:200%"><input type="checkbox" class="switch" checked />Tools</label>

    <h2>iOS style</h2>
    <label class="ios"><input type="checkbox" class="switch" />Tools</label>
    <label class="ios"><input type="checkbox" class="switch" checked />Tools</label>
    <label style="font-size:200%"><input type="checkbox" class="switch" checked />Tools</label>
  4. @LeaVerou LeaVerou revised this gist Mar 15, 2013. 2 changed files with 43 additions and 3 deletions.
    40 changes: 38 additions & 2 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -22,8 +22,8 @@ input[type="checkbox"].switch + div {
    border: 1px solid rgba(0,0,0,.3);
    border-radius: 999px;
    margin: 0 auto .8em;
    background: gray;
    background-image: linear-gradient(#555,#888);
    background: #888;
    background-image: linear-gradient(rgba(0,0,0,.4), transparent);
    background-origin: border-box;
    background-clip: border-box;
    box-shadow: 0 1px 1px hsla(0,0%,100%,.8);
    @@ -55,6 +55,42 @@ input[type="checkbox"].switch:active + div:before {
    background-color: #aaa;
    }

    .ios {
    font-size: 200%;
    }

    .ios input[type="checkbox"].switch + div {
    width: 3em;
    background-color: #eee;
    background-image: linear-gradient(rgba(0,0,0,.25), transparent);
    box-shadow: 0 1px 1px hsla(0,0%,100%,.8),
    0 .1em .1em rgba(0,0,0,.3) inset,
    0 .5em rgba(0,0,0,.05) inset;

    }

    .ios input[type="checkbox"]:checked.switch + div {
    padding-left: 2em;
    width: 1em;
    background-color: hsl(210, 90%, 60%);
    }

    .ios input[type="checkbox"].switch + div:after {
    content: 'Off';
    position: absolute;
    top: 0; right: .9em;
    color: #666;
    font: bold 55%/2 sans-serif;
    text-transform: uppercase;
    }

    .ios input[type="checkbox"]:checked.switch + div:after {
    content: 'On';
    right: auto; left: .9em;
    color: white;
    text-shadow: none;
    }

    body {
    padding: 1em;
    background: silver;
    6 changes: 5 additions & 1 deletion dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -4,4 +4,8 @@ <h2>Smaller</h2>

    <h2>With larger font-size</h2>
    <label style="font-size:200%"><input type="checkbox" class="switch" />Tools</label>
    <label style="font-size:200%"><input type="checkbox" class="switch" checked />Tools</label>
    <label style="font-size:200%"><input type="checkbox" class="switch" checked />Tools</label>

    <h2>iOS style</h2>
    <label class="ios"><input type="checkbox" class="switch" />Tools</label>
    <label class="ios"><input type="checkbox" class="switch" checked />Tools</label>
  5. @LeaVerou LeaVerou revised this gist Mar 11, 2013. 2 changed files with 3 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -12,7 +12,7 @@ input[type="checkbox"]:checked { /* :checked here acting as a filter for older b
    label {
    position: relative;
    display: inline-block;
    margin: 1em;
    margin: 0 1em 1em 0;
    font: 75% sans-serif;
    text-shadow: 0 1px 1px white;
    }
    @@ -56,5 +56,6 @@ input[type="checkbox"].switch:active + div:before {
    }

    body {
    padding: 1em;
    background: silver;
    }
    1 change: 1 addition & 0 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,4 @@
    <h2>Smaller</h2>
    <label><input type="checkbox" class="switch" />Tools</label>
    <label><input type="checkbox" class="switch" checked />Tools</label>

  6. @LeaVerou LeaVerou revised this gist Mar 11, 2013. 2 changed files with 7 additions and 4 deletions.
    10 changes: 6 additions & 4 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -44,13 +44,15 @@ input[type="checkbox"].switch + div:before {
    margin: -1px;
    border: 1px solid rgba(0,0,0,.7);
    border-radius: inherit;
    background: silver;
    background-image: linear-gradient(hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
    box-shadow: 0 0 .5em rgba(0,0,0,.5), 0 .2em hsla(0,0%,100%,.3) inset;
    background: #c4c4c4;
    background-image: linear-gradient(hsla(0,0%,100%,.3), hsla(0,0%,100%,0));
    box-shadow: 0 0 .5em rgba(0,0,0,.5),
    0 .2em hsla(0,0%,100%,.3) inset,
    0 -.1em .3em hsla(0,0%,0%,.2) inset;
    }

    input[type="checkbox"].switch:active + div:before {
    background-color: #999;
    background-color: #aaa;
    }

    body {
    1 change: 1 addition & 0 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,6 @@
    <label><input type="checkbox" class="switch" />Tools</label>
    <label><input type="checkbox" class="switch" checked />Tools</label>

    <h2>With larger font-size</h2>
    <label style="font-size:200%"><input type="checkbox" class="switch" />Tools</label>
    <label style="font-size:200%"><input type="checkbox" class="switch" checked />Tools</label>
  7. @LeaVerou LeaVerou revised this gist Mar 11, 2013. 1 changed file with 1 addition and 2 deletions.
    3 changes: 1 addition & 2 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -49,8 +49,7 @@ input[type="checkbox"].switch + div:before {
    box-shadow: 0 0 .5em rgba(0,0,0,.5), 0 .2em hsla(0,0%,100%,.3) inset;
    }

    input[type="checkbox"].switch:active + div:before,
    input[type="checkbox"].switch:focus + div:before {
    input[type="checkbox"].switch:active + div:before {
    background-color: #999;
    }

  8. @LeaVerou LeaVerou revised this gist Mar 11, 2013. 3 changed files with 44 additions and 22 deletions.
    52 changes: 32 additions & 20 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -6,40 +6,52 @@
    input[type="checkbox"]:not(:checked),
    input[type="checkbox"]:checked { /* :checked here acting as a filter for older browsers */
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    opacity: 0;
    }

    input[type="checkbox"] + label {
    label {
    position: relative;
    background-position: left;
    transition: .4s background-position;
    display: inline-block;
    margin: 1em;
    font: 75% sans-serif;
    text-shadow: 0 1px 1px white;
    }

    input[type="checkbox"]:checked + label {
    background-position: right;
    input[type="checkbox"].switch + div {
    width: 1.8em; height: 1em;
    border: 1px solid rgba(0,0,0,.3);
    border-radius: 999px;
    margin: 0 auto .8em;
    background: gray;
    background-image: linear-gradient(#555,#888);
    background-origin: border-box;
    background-clip: border-box;
    box-shadow: 0 1px 1px hsla(0,0%,100%,.8);
    overflow: hidden;
    transition-duration: .4s;
    transition-property: padding, width;
    }

    input[type="checkbox"].switch:checked + div {
    padding-left: .8em;
    width: 1em;
    }

    input[type="checkbox"] + label:before {
    input[type="checkbox"].switch + div:before {
    content: '';
    display: block;
    width: 2.5em; height: 1.4em;
    border: 1px solid rgba(0,0,0,.3);
    border-radius: 999px;
    margin-bottom: .5em;
    background: radial-gradient(#e5e5e5, silver 50%, #888 60%, transparent 72%) no-repeat center left,
    linear-gradient(#555,#777) gray;
    background-size: 1.25em 1.25em, auto;
    background-position: inherit;
    box-shadow: 0 1px 1px hsla(0,0%,100%,.8);
    width: 1em; height: 1em;
    margin: -1px;
    border: 1px solid rgba(0,0,0,.7);
    border-radius: inherit;
    background: silver;
    background-image: linear-gradient(hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
    box-shadow: 0 0 .5em rgba(0,0,0,.5), 0 .2em hsla(0,0%,100%,.3) inset;
    }

    input[type="checkbox"]:active + label:before,
    input[type="checkbox"]:focus + label:before {
    background-image: radial-gradient(#ccc, #aaa 50%, #777 60%, transparent 72%),
    linear-gradient(#555,#777);
    input[type="checkbox"].switch:active + div:before,
    input[type="checkbox"].switch:focus + div:before {
    background-color: #999;
    }

    body {
    6 changes: 5 additions & 1 deletion dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1,5 @@
    <input type="checkbox" id="tools" /><label for="tools">Tools</label>
    <label><input type="checkbox" class="switch" />Tools</label>
    <label><input type="checkbox" class="switch" checked />Tools</label>

    <label style="font-size:200%"><input type="checkbox" class="switch" />Tools</label>
    <label style="font-size:200%"><input type="checkbox" class="switch" checked />Tools</label>
    8 changes: 7 additions & 1 deletion dabblet.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1,7 @@
    // alert('Hello world!');
    var switches = document.querySelectorAll('input[type="checkbox"].switch');

    for (var i=0, sw; sw = switches[i++]; ) {
    var div = document.createElement('div');
    div.className = 'switch';
    sw.parentNode.insertBefore(div, sw.nextSibling);
    }
  9. @LeaVerou LeaVerou revised this gist Mar 11, 2013. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -29,7 +29,7 @@ input[type="checkbox"] + label:before {
    border: 1px solid rgba(0,0,0,.3);
    border-radius: 999px;
    margin-bottom: .5em;
    background: radial-gradient(#e5e5e5, silver 60%, #888 62%, transparent 70%) no-repeat center left,
    background: radial-gradient(#e5e5e5, silver 50%, #888 60%, transparent 72%) no-repeat center left,
    linear-gradient(#555,#777) gray;
    background-size: 1.25em 1.25em, auto;
    background-position: inherit;
    @@ -38,7 +38,7 @@ input[type="checkbox"] + label:before {

    input[type="checkbox"]:active + label:before,
    input[type="checkbox"]:focus + label:before {
    background-image: radial-gradient(#ccc, #aaa 60%, #777 62%, transparent 70%),
    background-image: radial-gradient(#ccc, #aaa 50%, #777 60%, transparent 72%),
    linear-gradient(#555,#777);
    }

  10. @LeaVerou LeaVerou revised this gist Mar 9, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -14,7 +14,7 @@ input[type="checkbox"] + label {
    position: relative;
    background-position: left;
    transition: .4s background-position;
    font-size: 75%;
    font: 75% sans-serif;
    text-shadow: 0 1px 1px white;
    }

  11. @LeaVerou LeaVerou revised this gist Mar 9, 2013. 3 changed files with 28 additions and 15 deletions.
    39 changes: 26 additions & 13 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,34 +1,47 @@
    /**
    * Failed attempt at gracefully degrading switch-style checkboxes
    * without pseudoelements (which shouldn’t exist on replaced elements) and extra elements.
    * Switch-style checkboxes.
    * Inspired by Espresso’s “Tools” switch
    * DO NOT USE. Currently only works properly in WebKit :(
    */

    input[type="checkbox"]:not(:checked),
    input[type="checkbox"]:checked { /* :checked here acting as a filter for older browsers */
    appearance: none;
    width: 2.5em;
    height: 1.4em;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    opacity: 0;
    }

    input[type="checkbox"] + label {
    position: relative;
    background-position: left;
    transition: .4s background-position;
    font-size: 75%;
    text-shadow: 0 1px 1px white;
    }

    input[type="checkbox"]:checked + label {
    background-position: right;
    }

    input[type="checkbox"] + label:before {
    content: '';
    display: block;
    width: 2.5em; height: 1.4em;
    border: 1px solid rgba(0,0,0,.3);
    border-radius: 999px;
    margin-bottom: .5em;
    background: radial-gradient(#e5e5e5, silver 60%, #888 62%, transparent 70%) no-repeat center left,
    linear-gradient(#555,#777) gray;
    background-size: 1.25em 1.25em, auto;
    background-position: inherit;
    box-shadow: 0 1px 1px hsla(0,0%,100%,.8);
    transition: .4s background-position;
    }

    input[type="checkbox"]:active,
    input[type="checkbox"]:focus {
    input[type="checkbox"]:active + label:before,
    input[type="checkbox"]:focus + label:before {
    background-image: radial-gradient(#ccc, #aaa 60%, #777 62%, transparent 70%),
    linear-gradient(#555,#777);
    }

    input[type="checkbox"]:checked {
    background-position: right;
    }

    body {
    background: silver;
    }
    2 changes: 1 addition & 1 deletion dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    <input type="checkbox" />
    <input type="checkbox" id="tools" /><label for="tools">Tools</label>
    2 changes: 1 addition & 1 deletion settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    {"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
    {"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
  12. @LeaVerou LeaVerou revised this gist Mar 4, 2013. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,6 @@
    /**
    * Failed attempt at gracefully degrading switch-style checkboxes without pseudoelements (which shouldn’t exist on replaced elements).
    * Failed attempt at gracefully degrading switch-style checkboxes
    * without pseudoelements (which shouldn’t exist on replaced elements) and extra elements.
    * Inspired by Espresso’s “Tools” switch
    * DO NOT USE. Currently only works properly in WebKit :(
    */
  13. @LeaVerou LeaVerou revised this gist Mar 4, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -5,7 +5,7 @@
    */

    input[type="checkbox"]:not(:checked),
    input[type="checkbox"]:checked {
    input[type="checkbox"]:checked { /* :checked here acting as a filter for older browsers */
    appearance: none;
    width: 2.5em;
    height: 1.4em;
  14. @LeaVerou LeaVerou revised this gist Mar 4, 2013. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -9,7 +9,9 @@ input[type="checkbox"]:checked {
    appearance: none;
    width: 2.5em;
    height: 1.4em;
    border: 1px solid rgba(0,0,0,.3); border-radius: 999px; background: radial-gradient(#e5e5e5, silver 60%, #888 62%, transparent 70%) no-repeat center left,
    border: 1px solid rgba(0,0,0,.3);
    border-radius: 999px;
    background: radial-gradient(#e5e5e5, silver 60%, #888 62%, transparent 70%) no-repeat center left,
    linear-gradient(#555,#777) gray;
    background-size: 1.25em 1.25em, auto;
    box-shadow: 0 1px 1px hsla(0,0%,100%,.8);
  15. @LeaVerou LeaVerou revised this gist Mar 4, 2013. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -7,7 +7,8 @@
    input[type="checkbox"]:not(:checked),
    input[type="checkbox"]:checked {
    appearance: none;
    width: 2.5em; height: 1.4em;
    width: 2.5em;
    height: 1.4em;
    border: 1px solid rgba(0,0,0,.3); border-radius: 999px; background: radial-gradient(#e5e5e5, silver 60%, #888 62%, transparent 70%) no-repeat center left,
    linear-gradient(#555,#777) gray;
    background-size: 1.25em 1.25em, auto;
  16. @LeaVerou LeaVerou revised this gist Mar 4, 2013. 1 changed file with 4 additions and 6 deletions.
    10 changes: 4 additions & 6 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -4,13 +4,11 @@
    * DO NOT USE. Currently only works properly in WebKit :(
    */

    input[type="checkbox"] {
    input[type="checkbox"]:not(:checked),
    input[type="checkbox"]:checked {
    appearance: none;
    width: 2.5em;
    height: 1.4em;
    border: 1px solid rgba(0,0,0,.3);
    border-radius: 999px;
    background: radial-gradient(#e5e5e5, silver 60%, #888 62%, transparent 70%) no-repeat center left,
    width: 2.5em; height: 1.4em;
    border: 1px solid rgba(0,0,0,.3); border-radius: 999px; background: radial-gradient(#e5e5e5, silver 60%, #888 62%, transparent 70%) no-repeat center left,
    linear-gradient(#555,#777) gray;
    background-size: 1.25em 1.25em, auto;
    box-shadow: 0 1px 1px hsla(0,0%,100%,.8);
  17. @LeaVerou LeaVerou revised this gist Mar 4, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -4,7 +4,7 @@
    * DO NOT USE. Currently only works properly in WebKit :(
    */

    input[type="checkbox"]:not(:checked) {
    input[type="checkbox"] {
    appearance: none;
    width: 2.5em;
    height: 1.4em;
  18. @LeaVerou LeaVerou revised this gist Mar 4, 2013. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,6 @@
    /**
    * Failed attempt at gracefully degrading switch-style checkboxes without pseudoelements (which shouldn’t exist on replaced elements).
    * Inspired by Espresso’s “Tools” switch
    * DO NOT USE. Currently only works properly in WebKit :(
    */

  19. @LeaVerou LeaVerou revised this gist Mar 4, 2013. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,6 @@
    /**
    * Switch-style checkboxes
    * Failed attempt at gracefully degrading switch-style checkboxes without pseudoelements (which shouldn’t exist on replaced elements).
    * DO NOT USE. Currently only works properly in WebKit :(
    */

    input[type="checkbox"]:not(:checked) {
  20. @LeaVerou LeaVerou revised this gist Mar 4, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -2,7 +2,7 @@
    * Switch-style checkboxes
    */

    input[type="checkbox"] {
    input[type="checkbox"]:not(:checked) {
    appearance: none;
    width: 2.5em;
    height: 1.4em;
  21. @LeaVerou LeaVerou created this gist Mar 4, 2013.
    30 changes: 30 additions & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,30 @@
    /**
    * Switch-style checkboxes
    */

    input[type="checkbox"] {
    appearance: none;
    width: 2.5em;
    height: 1.4em;
    border: 1px solid rgba(0,0,0,.3);
    border-radius: 999px;
    background: radial-gradient(#e5e5e5, silver 60%, #888 62%, transparent 70%) no-repeat center left,
    linear-gradient(#555,#777) gray;
    background-size: 1.25em 1.25em, auto;
    box-shadow: 0 1px 1px hsla(0,0%,100%,.8);
    transition: .4s background-position;
    }

    input[type="checkbox"]:active,
    input[type="checkbox"]:focus {
    background-image: radial-gradient(#ccc, #aaa 60%, #777 62%, transparent 70%),
    linear-gradient(#555,#777);
    }

    input[type="checkbox"]:checked {
    background-position: right;
    }

    body {
    background: silver;
    }
    1 change: 1 addition & 0 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    <input type="checkbox" />
    1 change: 1 addition & 0 deletions dabblet.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    // alert('Hello world!');
    1 change: 1 addition & 0 deletions settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    {"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}