File manager

File manager - Edit - /home/opticamezl/www/newok/templates/yootheme/packages/styler/tests/inverse.html

Back
<div> <nav class="uk-navbar-container uk-navbar-transparent test-inverse-background uk-light"> <div class="uk-container"> <div uk-navbar> <div class="uk-navbar-left"> <a class="uk-navbar-item uk-logo" href="#">Logo</a> <ul class="uk-navbar-nav"> <li class="uk-active"><a href="#">Active</a></li> <li> <a href="#">Dropdown</a> <div class="uk-navbar-dropdown"> <ul class="uk-nav uk-navbar-dropdown-nav"> <li class="uk-active"><a href="#">Active</a></li> <li class="uk-parent"> <a href="#">Parent</a> <ul class="uk-nav-sub"> <li><a href="#">Sub item</a></li> <li><a href="#">Sub item</a></li> </ul> </li> <li class="uk-nav-header">Header</li> <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li> <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li> <li class="uk-nav-divider"></li> <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li> </ul> </div> </li> <li> <a href="#">Dropbar <span uk-navbar-parent-icon></span></a> <div class="uk-dropbar uk-dropbar-top" uk-drop="pos: bottom-left; stretch: x; target-y: !.uk-navbar-container; animation: slide-top; animate-out: true"> <ul class="uk-nav uk-navbar-dropdown-nav"> <li class="uk-active"><a href="#">Active</a></li> <li class="uk-parent"> <a href="#">Parent</a> <ul class="uk-nav-sub"> <li><a href="#">Sub item</a></li> <li><a href="#">Sub item</a></li> </ul> </li> <li class="uk-nav-header">Header</li> <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li> <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li> <li class="uk-nav-divider"></li> <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li> </ul> </div> </li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> </ul> </div> <div class="uk-navbar-right"> <div class="uk-navbar-item"> <form class="uk-search uk-search-navbar uk-width-1-1"> <span uk-search-icon></span> <input class="uk-search-input" type="search" placeholder="Search" aria-label="Search"> </form> </div> <div class="uk-navbar-item"> <button class="uk-button uk-button-default" type="button" uk-toggle="target: .test-inverse-background; cls: uk-light uk-dark">Toggle Inverse</button> </div> </div> </div> </div> </nav> </div> <div class="uk-section test-inverse-background uk-light"> <div class="uk-container"> <div uk-grid> <div class="uk-width-2-3@m"> <nav aria-label="Breadcrumb"> <ul class="uk-breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">Blog</a></li> <li class="uk-disabled"><span>Category</span></li> <li><span aria-current="page">Post</span></li> </ul> </nav> <article class="uk-article"> <h1 class="uk-article-title"><a class="uk-link-reset" href="#">Article Title</a></h1> <hr class="uk-divider-small"> <p class="uk-text-lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p class="uk-column-1-2@s uk-dropcap">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p class="uk-article-meta">Written by <a href="#">Super User</a> on 12 April 2012. Posted in <a href="#">Blog</a></p> <hr class="uk-divider-icon uk-margin-medium"> <div class="uk-grid-small uk-child-width-auto uk-flex-middle uk-margin-medium" uk-grid> <div> <button class="uk-button uk-button-default">Default</button> <div uk-dropdown="mode: click"> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-active"><a href="#">Active</a></li> <li class="uk-parent"> <a href="#">Parent</a> <ul class="uk-nav-sub"> <li><a href="#">Sub item</a></li> <li><a href="#">Sub item</a></li> </ul> </li> <li class="uk-nav-header">Header</li> <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li> <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li> <li class="uk-nav-divider"></li> <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li> </ul> </div> </div> <div> <button class="uk-button uk-button-primary">Primary</button> </div> <div> <button class="uk-button uk-button-secondary">Secondary</button> </div> <div> <button class="uk-button uk-button-danger">Danger</button> </div> <div> <button class="uk-button uk-button-default" disabled>Disabled</button> </div> </div> <hr class="uk-margin-medium"> <div class="uk-child-width-1-2 uk-child-width-1-4@s uk-margin" uk-grid> <div> <ul class="uk-list"> <li><a href="#">a element</a></li> <li><abbr title="Title text">abbr element</abbr></li> <li><code>code element</code></li> <li><del>del element</del></li> <li><dfn title="Title text">dfn element</dfn></li> <li><a href="#" class="uk-link-muted">Link Muted</a></li> </ul> </div> <div> <ul class="uk-list"> <li><em>em element</em></li> <li><ins>ins element</ins></li> <li><mark>mark element</mark></li> <li><q>q <q>inside</q> a q</q></li> <li><strong>strong element</strong></li> <li><a href="#" class="uk-link-reset">Link Reset</a></li> </ul> </div> <div> <ul class="uk-list"> <li class="uk-text-muted">Text Muted</li> <li class="uk-text-emphasis">Text Emphasis</li> <li class="uk-text-primary">Text Primary</li> <li class="uk-text-secondary">Text Secondary</li> <li class="uk-text-success">Text Success</li> <li class="uk-text-warning">Text Warning</li> <li class="uk-text-danger">Text Danger</li> <li class="uk-text-meta">Text Meta</li> </ul> </div> <div> <ul class="uk-list"> <li><span class="uk-label">Default</span></li> <li><span class="uk-label uk-label-success">Success</span></li> <li><span class="uk-label uk-label-warning">Warning</span></li> <li><span class="uk-label uk-label-danger">Danger</span></li> <li><a class="uk-badge" href="#">1</a></li> <li> <a class="uk-icon-button" href="#" uk-icon="icon: home"></a> <a class="uk-icon-button" href="#" uk-icon="icon: github"></a> <a class="uk-icon-link" href="#" uk-icon="icon: trash"></a> </li> </ul> </div> </div> <blockquote class="uk-margin-medium" cite="#"> <p>The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element.</p> <footer>Someone famous in <cite><a href="#">Source Title</a></cite></footer> </blockquote> <div class="uk-grid-small" uk-grid> <div> <a class="uk-button uk-button-text" href="#">Read more</a> </div> <div> <a class="uk-button uk-button-text" href="#">5 Comments</a> </div> <div> <a class="uk-button uk-button-link" href="#">Button Link</a> </div> </div> </article> <hr class="uk-margin-medium"> <ul class="uk-comment-list uk-margin-medium"> <li> <article class="uk-comment uk-visible-toggle" tabindex="-1" role="comment"> <header class="uk-comment-header uk-position-relative"> <div class="uk-grid-medium uk-flex-middle" uk-grid> <div class="uk-width-auto"> <canvas class="uk-comment-avatar test-img-small" width="50" height="50"></canvas> </div> <div class="uk-width-expand"> <h4 class="uk-comment-title uk-margin-remove"><a class="uk-link-reset" href="#">Author</a></h4> <p class="uk-comment-meta uk-margin-remove-top"><a class="uk-link-reset" href="#">12 days ago</a></p> </div> </div> <div class="uk-position-top-right uk-position-small uk-hidden-hover"><a class="uk-button uk-button-text" href="#">Reply</a></div> </header> <div class="uk-comment-body"> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p> </div> </article> </li> </ul> <nav aria-label="Pagination"> <ul class="uk-pagination uk-flex-center" uk-margin> <li><a href="#"><span uk-pagination-previous></span></a></li> <li><a href="#">1</a></li> <li class="uk-disabled"><span>…</span></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> <li class="uk-active"><span aria-current="page">7</span></li> <li><a href="#">8</a></li> <li><a href="#">9</a></li> <li><a href="#">10</a></li> <li class="uk-disabled"><span>…</span></li> <li><a href="#">20</a></li> <li><a href="#"><span uk-pagination-next></span></a></li> </ul> </nav> </div> <div class="uk-width-expand@m"> <div class="uk-margin-medium-bottom"> <form class="uk-search uk-search-default uk-width-1-1"> <span uk-search-icon></span> <input class="uk-search-input" type="search" placeholder="Search" aria-label="Search"> </form> </div> <ul class="uk-nav-default uk-margin-medium" uk-nav> <li class="uk-active"><a href="#">Active</a></li> <li class="uk-parent"> <a href="#">Parent <span uk-nav-parent-icon></span></a> <ul class="uk-nav-sub"> <li><a href="#">Sub item</a></li> <li><a href="#">Sub item</a> <ul> <li><a href="#">Sub item</a></li> <li><a href="#">Sub item</a></li> </ul> </li> </ul> </li> <li class="uk-parent"> <a href="#">Parent <span uk-nav-parent-icon></span></a> <ul class="uk-nav-sub"> <li><a href="#">Sub item</a></li> <li><a href="#">Sub item</a></li> </ul> </li> <li class="uk-nav-header">Header</li> <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li> <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li> <li class="uk-nav-divider"></li> <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li> </ul> <ul class="uk-list uk-list-bullet uk-margin-medium"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <ul class="uk-list uk-list-striped uk-margin-medium"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <ul class="uk-list uk-list-divider uk-margin-medium"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <ul class="uk-margin-medium" uk-accordion> <li class="uk-open"> <a class="uk-accordion-title" href="#">Item 1</a> <div class="uk-accordion-content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p> </div> </li> <li> <a class="uk-accordion-title" href="#">Item 2</a> <div class="uk-accordion-content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p> </div> </li> <li> <a class="uk-accordion-title" href="#">Item 3</a> <div class="uk-accordion-content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p> </div> </li> </ul> <div class="uk-margin"> <div class="uk-inline"> <canvas width="800" height="600" class="test-img"></canvas> <div class="uk-position-center"> <span uk-overlay-icon></span> </div> <a class="uk-position-absolute uk-transform-center" style="left: 20%; top: 30%" href="#" uk-marker></a> <a class="uk-position-absolute uk-transform-center" style="left: 60%; top: 40%" href="#" uk-marker></a> <a class="uk-position-absolute uk-transform-center" style="left: 80%; top: 70%" href="#" uk-marker></a> </div> </div> </div> </div> <hr class="uk-margin-large"> <div class="uk-grid-divider" uk-grid> <div class="uk-width-2-3@m"> <h1 class="uk-heading-2xlarge uk-margin-small">2X-Large</h1> <h1 class="uk-heading-xlarge uk-margin-small">X-Large</h1> <h1 class="uk-heading-large uk-margin-small">Heading L</h1> <h1 class="uk-heading-medium uk-margin-small">Heading M</h1> <h1 class="uk-heading-small uk-margin-small">Heading S</h1> <h1 class="uk-margin-small">Heading H1</h1> <h2 class="uk-margin-small">Heading H2</h2> <h3 class="uk-margin-small">Heading H3</h3> <h4 class="uk-margin-small">Heading H4</h4> <h5 class="uk-margin-small">Heading H5</h5> <h6 class="uk-margin-small">Heading H6</h6> <h3 class="uk-heading-divider">Heading Divider</h3> <h3 class="uk-heading-bullet">Heading Bullet</h3> <h3 class="uk-heading-line"><span>Heading Line</span></h3> <div class="uk-overflow-auto uk-margin-large-top"> <table class="uk-table uk-table-divider uk-table-hover uk-table-small"> <thead> <tr> <th>Table Heading</th> <th>Table Heading</th> <th>Table Heading</th> </tr> </thead> <tbody> <tr> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> </tr> <tr> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> </tr> <tr> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> </tr> <tr> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> </tr> </tbody> </table> </div> <div class="uk-grid-small uk-child-width-auto uk-margin-medium-top" uk-grid js-countdown> <div> <div class="uk-countdown-number uk-countdown-days"></div> </div> <div class="uk-countdown-separator">:</div> <div> <div class="uk-countdown-number uk-countdown-hours"></div> </div> <div class="uk-countdown-separator">:</div> <div> <div class="uk-countdown-number uk-countdown-minutes"></div> </div> <div class="uk-countdown-separator">:</div> <div> <div class="uk-countdown-number uk-countdown-seconds"></div> </div> </div> <script> (function () { const date = (new Date(Date.now() + 864e5 * 7)).toISOString(); for (const el of UIkit.util.$$('[js-countdown]')) { UIkit.countdown(el, {date: date}); } })(); </script> </div> <div class="uk-width-1-3@m"> <form class="uk-form-stacked"> <div class="uk-margin-small"> <label class="uk-form-label" for="form-input-text">Text</label> <input id="form-input-text" class="uk-input" type="text" placeholder="Some text..."> </div> <div class="uk-margin-small"> <select class="uk-select" aria-label="Select"> <option>Option 01</option> <option>Option 02</option> </select> </div> <div class="uk-margin-small"> <textarea class="uk-textarea" rows="2" placeholder="Some text..." aria-label="Textarea"></textarea> </div> <div class="uk-grid-small uk-child-width-auto" uk-grid> <div> <label><input class="uk-radio" type="radio" name="radio"> Radio</label> </div> <div> <label><input class="uk-checkbox" type="checkbox"> Checkbox</label> </div> </div> <div class="uk-margin-small"> <label class="uk-form-label" for="form-input-states">States</label> <input id="form-input-states" class="uk-input" type="text" placeholder=":disabled" disabled> </div> <div class="uk-margin-small"> <input class="uk-input uk-form-danger" type="text" placeholder="form-danger" aria-label="form-danger" value="form-danger"> </div> <div class="uk-margin-small"> <input class="uk-input uk-form-success" type="text" placeholder="form-success" aria-label="form-success" value="form-success"> </div> <div class="uk-margin-small"> <input class="uk-input uk-form-blank" type="text" placeholder="form-blank" aria-label="form-blank"> </div> </form> <ul class="uk-nav uk-nav-primary uk-margin-medium"> <li class="uk-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> </ul> <ul class="uk-nav uk-nav-secondary uk-margin-medium"> <li class="uk-active"><a href="#"><div>Active<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div></a></li> <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div></a></li> <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div></a></li> <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div></a></li> </ul> </div> </div> <hr class="uk-margin-large"> <div class="uk-grid-divider uk-child-width-auto@m" uk-grid> <div> <ul class="uk-dotnav"> <li class="uk-active"><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> <li><a href="#">Item 4</a></li> <li><a href="#">Item 5</a></li> <li><a href="#">Item 6</a></li> </ul> </div> <div> <a href="#" uk-slidenav-previous></a> <a href="#" uk-slidenav-next></a> </div> <div> <ul class="uk-thumbnav"> <li class="uk-active"><a href="#"><canvas width="60" height="40" class="test-img"></canvas></a></li> <li><a href="#"><canvas width="60" height="40" class="test-img"></canvas></a></li> <li><a href="#"><canvas width="60" height="40" class="test-img"></canvas></a></li> </ul> </div> <div> <button type="button" uk-close></button> </div> <div> <a href="#" uk-totop></a> </div> </div> <hr class="uk-margin-large"> <div class="uk-grid-divider uk-child-width-auto@m" uk-grid> <div> <ul class="uk-subnav uk-subnav-divider" uk-margin> <li class="uk-active"><a href="#">Active</a></li> <li> <a href="#">Parent <span uk-drop-parent-icon></span></a> <div uk-dropdown="mode: click"> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-header">Header</li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Item</a></li> </ul> </div> </li> <li class="uk-disabled"><a>Disabled</a></li> </ul> </div> <div> <ul class="uk-subnav uk-subnav-pill" uk-margin> <li class="uk-active"><a href="#">Active</a></li> <li> <a href="#">Parent <span uk-drop-parent-icon></span></a> <div uk-dropdown="mode: click"> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-header">Header</li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Item</a></li> </ul> </div> </li> <li class="uk-disabled"><a>Disabled</a></li> </ul> </div> <div> <ul uk-tab> <li class="uk-active"><a href="#">Active</a></li> <li> <a href="#">Parent <span uk-drop-parent-icon></span></a> <div uk-dropdown="mode: click"> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-header">Header</li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Item</a></li> </ul> </div> </li> <li class="uk-disabled"><a>Disabled</a></li> </ul> </div> <div> <ul class="uk-iconnav"> <li class="uk-active"><a href="#" uk-icon="icon: plus"></a></li> <li><a href="#" uk-icon="icon: pencil"></a></li> <li><a href="#"><span uk-icon="icon: bag"></span> (2)</a></li> </ul> </div> </div> <hr class="uk-margin-large"> <div class="uk-child-width-1-4 uk-grid-large" uk-grid> <div> <div class="uk-inline tm-box-decoration-default tm-box-decoration-inverse"> <canvas width="800" height="600" class="test-img-opaque"></canvas> </div> </div> <div> <div class="uk-inline tm-box-decoration-primary tm-box-decoration-inverse"> <canvas width="800" height="600" class="test-img-opaque"></canvas> </div> </div> <div> <div class="uk-inline tm-box-decoration-secondary tm-box-decoration-inverse"> <canvas width="800" height="600" class="test-img-opaque"></canvas> </div> </div> <div> <div class="uk-inline uk-transition-toggle tm-transition-border"> <canvas width="800" height="600" class="test-img-opaque"></canvas> </div> </div> </div> </div> </div>

| ver. 1.4 | Github | . | PHP 8.3.23 | Generation time: 0.01 | proxy | phpinfo | Settings