HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URL's added here will be added as <link>
s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
If the stylesheet you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by Skypack, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ES6 import
usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<h1><i class="ji-jicons ji-sz-xxs ji-rd-5 ji-bg-base ji-cl-white" style="display: inline-flex;"></i> Josetxu Icons</h1>
<div id="iconos" class="contenido_tab">
<h2><span>101</span> iconos en CSS</h2>
<div class="options-filter-opener hidden">OPCIONES</div>
<div class="options-filters">
<div class="cat-menu-icons">
<ul>
<li>Filtrar: </li>
<li><a href="#web-icons-list" id="web-icons">web</a></li>
<li><a href="#controls-icons-list" id="controls-icons">controls</a></li>
<li><a href="#tools-icons-list" id="tools-icons">tools</a></li>
<li><a href="#tools-icons-list" id="menus-icons">menus</a></li>
<li><a href="#arrows-icons-list" id="arrows-icons">arrows</a></li>
<li><a href="#social-icons-list" id="social-icons">social</a></li>
<li><a href="#multimedia-icons-list" id="multimedia-icons">multimedia</a></li>
<li><a href="#files-icons-list" id="files-icons">files</a></li>
<li><a href="#devices-icons-list" id="devices-icons">devices</a></li>
<li><a href="#info-icons-list" id="info-icons">info</a></li>
<li><a href="#battery-icons-list" id="battery-icons">battery</a></li>
<li><a href="#miscelanea-icons-list" id="miscelanea-icons">miscelanea</a></li>
<li><a href="#" id="all-icons" title="mostrar todo">+</a></li>
<li><a href="#" id="none-icons" title="ocultar todo">-</a></li>
</ul>
</div>
<div class="option-sz">
<ul>
<li id="opt-sz-xxs">xxs</li>
<li id="opt-sz-xs">xs</li>
<li id="opt-sz-1">1</li>
<li id="opt-sz-2">2</li>
<li id="opt-sz-3">3</li>
<li id="opt-sz-4">4</li>
<li id="opt-sz-5">5</li>
</ul>
</div>
<div class="option-bg">
<ul>
<li id="opt-bg-light"></li>
<li id="opt-bg-semilight"></li>
<li id="opt-bg-semidark"></li>
<li id="opt-bg-dark"></li>
<li id="opt-bg-basedark"></li>
<li id="opt-bg-baselight"></li>
<li id="opt-bg-base"></li>
<!--<li id="opt-bg-base"></li>-->
<li></li>
</ul>
</div>
<div class="option-bd">
<ul>
<li id="opt-bd-base"></li>
<li id="opt-bd-baselight"></li>
<li id="opt-bd-light"></li>
<li id="opt-bd-basedark"></li>
<li id="opt-bd-dark"></li>
<li></li>
</ul>
</div>
<div class="option-rd">
<ul>
<li id="opt-rd-xs"></li>
<li id="opt-rd-1"></li>
<li id="opt-rd-2"></li>
<li id="opt-rd-3"></li>
<li id="opt-rd-4"></li>
<li id="opt-rd-5"></li>
<li></li>
</ul>
</div>
<div class="option-cl">
<ul>
<li id="opt-cl-base"></li>
<li id="opt-cl-brown"></li>
<li id="opt-cl-olive"></li>
<li id="opt-cl-green"></li>
<li id="opt-cl-bluegreen"></li>
<li id="opt-cl-bluegray"></li>
<li id="opt-cl-blue"></li>
<li id="opt-cl-purple"></li>
<li id="opt-cl-violet"></li>
<li id="opt-cl-pink"></li>
<li id="opt-cl-red"></li>
<li id="opt-cl-gray"></li>
<li id="opt-cl-white"></li>
<li></li>
</ul>
</div>
</div>
<ul class="icon-list web-icons" id="web-icons-list">
<li class="list-header">web</li>
<li><i class="ji-home"></i><span class="name">home</span><span class="ji-name">ji-home</span></li>
<li><i class="ji-comment"></i><span class="name">comment</span><span class="ji-name">ji-comment</span></li>
<li><i class="ji-mail"></i><span class="name">mail</span><span class="ji-name">ji-mail</span></li>
<li><i class="ji-user"></i><span class="name">user</span><span class="ji-name">ji-user</span></li>
<li><i class="ji-bookmark"></i><span class="name">bookmark</span><span class="ji-name">ji-bookmark</span></li>
<li><i class="ji-map"></i><span class="name">map</span><span class="ji-name">ji-map</span></li>
<li><i class="ji-link"></i><span class="name">link</span><span class="ji-name">ji-link</span></li>
<li><i class="ji-star"></i><span class="name">star</span><span class="ji-name">ji-star</span></li>
</ul>
<ul class="icon-list controls-icons" id="controls-icons-list">
<li class="list-header">controls</li>
<li><i class="ji-play"></i><span class="name">play</span><span class="ji-name">ji-play</span></li>
<li><i class="ji-stop"></i><span class="name">stop</span><span class="ji-name">ji-stop</span></li>
<li><i class="ji-pause"></i><span class="name">pause</span><span class="ji-name">ji-pause</span></li>
<li><i class="ji-rec"></i><span class="name">rec</span><span class="ji-name">ji-rec</span></li>
<li><i class="ji-forward"></i><span class="name">fast forward</span><span class="ji-name">ji-forward</span></li>
<li><i class="ji-rewind"></i><span class="name">rewind</span><span class="ji-name">ji-rewind</span></li>
<li><i class="ji-slowforward"></i><span class="name">slow forward</span><span class="ji-name">ji-slowforward</span></li>
<li><i class="ji-slowrewind"></i><span class="name">slow rewind</span><span class="ji-name">ji-slowrewind</span></li>
</ul>
<ul class="icon-list tools-icons" id="tools-icons-list">
<li class="list-header">tools</li>
<li><i class="ji-gear"></i><span class="name">gear</span><span class="ji-name">ji-gear</span></li>
<li><i class="ji-edit"></i><span class="name">edit</span><span class="ji-name">ji-edit</span></li>
<li><i class="ji-hammer"></i><span class="name">hammer</span><span class="ji-name">ji-hammer</span></li>
<li><i class="ji-wrench"></i><span class="name">wrench</span><span class="ji-name">ji-wrench</span></li>
<li><i class="ji-screwdriver"></i><span class="name">screwdriver</span><span class="ji-name">ji-screwdriver</span></li>
<li><i class="ji-lock"></i><span class="name">lock</span><span class="ji-name">ji-lock</span></li>
<li><i class="ji-unlock"></i><span class="name">unlock</span><span class="ji-name">ji-unlock</span></li>
<li><i class="ji-options"></i><span class="name">options</span><span class="ji-name">ji-options</span></li>
</ul>
<ul class="icon-list menus-icons" id="menus-icons-list">
<li class="list-header">menus</li>
<li><i class="ji-menu"></i><span class="name">menu</span><span class="ji-name">ji-menu</span></li>
<li><i class="ji-list"></i><span class="name">list</span><span class="ji-name">ji-list</span></li>
<li><i class="ji-grid"></i><span class="name">grid</span><span class="ji-name">ji-grid</span></li>
<li><i class="ji-close"></i><span class="name">close</span><span class="ji-name">ji-close</span></li>
<li><i class="ji-menuy"></i><span class="name">menu y</span><span class="ji-name">ji-menuy</span></li>
<li><i class="ji-menux"></i><span class="name">menu x</span><span class="ji-name">ji-menux</span></li>
<li><i class="ji-menuycircled"></i><span class="name">menu y circled</span><span class="ji-name">ji-menuycircled</span></li>
<li><i class="ji-menuxcircled"></i><span class="name">menu x circled</span><span class="ji-name">ji-menuxcircled</span></li>
</ul>
<ul class="icon-list arrows-icons" id="arrows-icons-list">
<li class="list-header">arrows</li>
<li><i class="ji-arrowborderright"></i><span class="name">border right</span><span class="ji-name">ji-arrowborderright</span></li>
<li><i class="ji-arrowborderleft"></i><span class="name">border left</span><span class="ji-name">ji-arrowborderleft</span></li>
<li><i class="ji-arrowbordertop"></i><span class="name">border top</span><span class="ji-name">ji-arrowbordertop</span></li>
<li><i class="ji-arrowborderbottom"></i><span class="name">border bottom</span><span class="ji-name">ji-arrowborderbottom</span></li>
<li><i class="ji-arrowsolidright"></i><span class="name">solid right</span><span class="ji-name">ji-arrowsolidright</span></li>
<li><i class="ji-arrowsolidleft"></i><span class="name">solid left</span><span class="ji-name">ji-arrowsolidleft</span></li>
<li><i class="ji-arrowsolidtop"></i><span class="name">solid top</span><span class="ji-name">ji-arrowsolidtop</span></li>
<li><i class="ji-arrowsolidbottom"></i><span class="name">solid bottom</span><span class="ji-name">ji-arrowsolidbottom</span></li>
</ul>
<ul class="icon-list social-icons" id="social-icons-list">
<li class="list-header">social</li>
<li><i class="ji-social"></i><span class="name">social</span><span class="ji-name">ji-social</span></li>
<li><i class="ji-facebook"></i><span class="name">facebook</span><span class="ji-name">ji-facebook</span></li>
<li><i class="ji-twitter"></i><span class="name">twitter</span><span class="ji-name">ji-twitter</span></li>
<li><i class="ji-google"></i><span class="name">google</span><span class="ji-name">ji-google</span></li>
<li><i class="ji-linkedin"></i><span class="name">linkedin</span><span class="ji-name">ji-linkedin</span></li>
<li><i class="ji-instagram"></i><span class="name">instagram</span><span class="ji-name">ji-instagram</span></li>
<li><i class="ji-youtube"></i><span class="name">youtube</span><span class="ji-name">ji-youtube</span></li>
<li><i class="ji-rss"></i><span class="name">rss</span><span class="ji-name">ji-rss</span></li>
</ul>
<ul class="icon-list multimedia-icons" id="multimedia-icons-list">
<li class="list-header">multimedia</li>
<li><i class="ji-photo"></i><span class="name">photo</span><span class="ji-name">ji-photo</span></li>
<li><i class="ji-image"></i><span class="name">image</span><span class="ji-name">ji-image</span></li>
<li><i class="ji-video"></i><span class="name">video</span><span class="ji-name">ji-video</span></li>
<li><i class="ji-player"></i><span class="name">player</span><span class="ji-name">ji-player</span></li>
<li><i class="ji-micro"></i><span class="name">micro</span><span class="ji-name">ji-micro</span></li>
<li><i class="ji-sound"></i><span class="name">sound</span><span class="ji-name">ji-sound</span></li>
<li><i class="ji-mute"></i><span class="name">mute</span><span class="ji-name">ji-mute</span></li>
<li><i class="ji-muted"></i><span class="name">muted</span><span class="ji-name">ji-muted</span></li>
</ul>
<ul class="icon-list files-icons" id="files-icons-list">
<li class="list-header">files</li>
<li><i class="ji-file"></i><span class="name">file</span><span class="ji-name">ji-file</span></li>
<li><i class="ji-filedouble"></i><span class="name">file double</span><span class="ji-name">ji-filedouble</span></li>
<li><i class="ji-filetext"></i><span class="name">file text</span><span class="ji-name">ji-filetext</span></li>
<li><i class="ji-file ji-filenew"></i><span class="name">new file</span><span class="ji-name">ji-filenew</span></li>
<li><i class="ji-folder"></i><span class="name">folder</span><span class="ji-name">ji-folder</span></li>
<li><i class="ji-folder ji-foldernew"></i><span class="name">new folder</span><span class="ji-name">ji-foldernew</span></li>
<li><i class="ji-folderother"></i><span class="name">other folder</span><span class="ji-name">ji-folderother</span></li>
<li><i class="ji-folderopen"></i><span class="name">open folder</span><span class="ji-name">ji-folderopen</span></li>
</ul>
<ul class="icon-list devices-icons" id="devices-icons-list">
<li class="list-header">devices</li>
<li><i class="ji-desktop"></i><span class="name">desktop</span><span class="ji-name">ji-desktop</span></li>
<li><i class="ji-tablet"></i><span class="name">tablet</span><span class="ji-name">ji-tablet</span></li>
<li><i class="ji-mobile"></i><span class="name">mobile</span><span class="ji-name">ji-mobile</span></li>
<li><i class="ji-mp3"></i><span class="name">mp3</span><span class="ji-name">ji-mp3</span></li>
<li><i class="ji-headphones"></i><span class="name">headphones</span><span class="ji-name">ji-headphones</span></li>
<li><i class="ji-disc"></i><span class="name">disc</span><span class="ji-name">ji-disc</span></li>
<li><i class="ji-discbig"></i><span class="name">big disc</span><span class="ji-name">ji-discbig</span></li>
<li><i class="ji-pendrive"></i><span class="name">pendrive</span><span class="ji-name">ji-pendrive</span></li>
</ul>
<ul class="icon-list info-icons" id="info-icons-list">
<li class="list-header">info</li>
<li><i class="ji-info"></i><span class="name">info</span><span class="ji-name">ji-info</span></li>
<li><i class="ji-warning"></i><span class="name">warning</span><span class="ji-name">ji-warning</span></li>
<li><i class="ji-success"></i><span class="name">success</span><span class="ji-name">ji-success</span></li>
<li><i class="ji-error"></i><span class="name">error</span><span class="ji-name">ji-error</span></li>
<li><i class="ji-infocircled"></i><span class="name">info</span><span class="ji-name">ji-infocircled</span></li>
<li><i class="ji-warningcircled"></i><span class="name">warning</span><span class="ji-name">ji-warningcircled</span></li>
<li><i class="ji-successcircled"></i><span class="name">success</span><span class="ji-name">ji-successcircled</span></li>
<li><i class="ji-errorcircled"></i><span class="name">error</span><span class="ji-name">ji-errorcircled</span></li>
</ul>
<ul class="icon-list battery-icons" id="battery-icons-list">
<li class="list-header">batery</li>
<li><i class="ji-battery0"></i><span class="name">battery 0</span><span class="ji-name">ji-battery0</span></li>
<li><i class="ji-battery25"></i><span class="name">battery 25</span><span class="ji-name">ji-battery25</span></li>
<li><i class="ji-battery50"></i><span class="name">battery 50</span><span class="ji-name">ji-battery50</span></li>
<li><i class="ji-battery75"></i><span class="name">battery 75</span><span class="ji-name">ji-battery75</span></li>
<li><i class="ji-battery100"></i><span class="name">battery 100</span><span class="ji-name">ji-battery100</span></li>
<li><i class="ji-battery-0-4"></i><span class="name">battery 0/4</span><span class="ji-name">ji-battery-0-4</span></li>
<li><i class="ji-battery-1-4"></i><span class="name">battery 1/4</span><span class="ji-name">ji-battery-1-4</span></li>
<li><i class="ji-battery-2-4"></i><span class="name">battery 2/4</span><span class="ji-name">ji-battery-2-4</span></li>
<li><i class="ji-battery-3-4"></i><span class="name">battery 3/4</span><span class="ji-name">ji-battery-3-4</span></li>
<li><i class="ji-battery-4-4"></i><span class="name">battery 4/4</span><span class="ji-name">ji-battery-4-4</span></li>
</ul>
<ul class="icon-list miscelanea-icons" id="miscelanea-icons-list">
<li class="list-header">miscelanea</li>
<li><i class="ji-magnet"></i><span class="name">magnet</span><span class="ji-name">ji-magnet</span></li>
<li><i class="ji-reload"></i><span class="name">reload</span><span class="ji-name">ji-reload</span></li>
<li><i class="ji-banned"></i><span class="name">banned</span><span class="ji-name">ji-banned</span></li>
<li><i class="ji-pill"></i><span class="name">pill</span><span class="ji-name">ji-pill</span></li>
<li><i class="ji-pilltablet"></i><span class="name">pill tablet</span><span class="ji-name">ji-pilltablet</span></li>
<li><i class="ji-child"></i><span class="name">child</span><span class="ji-name">ji-child</span></li>
<li><i class="ji-cup"></i><span class="name">cup</span><span class="ji-name">ji-cup</span></li>
<li><i class="ji-beer"></i><span class="name">beer</span><span class="ji-name">ji-beer</span></li>
<li><i class="ji-wifi"></i><span class="name">wifi</span><span class="ji-name">ji-wifi</span></li>
<li><i class="ji-clock"></i><span class="name">clock</span><span class="ji-name">ji-clock</span></li>
<li><i class="ji-clockfilled"></i><span class="name">filled clock</span><span class="ji-name">ji-clockfilled</span></li>
</ul>
<input type="text" id="hidden-copy-field" class="hidden" value=""/>
<div id="copied-text">copiado al portapapeles<br><br><code></code></div>
</div>
<a title="Mas info en josetxu.com" target="_blank" class="icons-more-info" href="https://josetxu.com/iconos">+ info</a>
<div class="footer"><small><strong>ji-icons v1.0</strong> © 2019 <strong><a href="https:josetxu.com/iconos">josetxu.com</a></strong></small></div>
/*********** PAGE STYLES START ***********/
body {
background: #fff;
color: #333;
font-family: Arial,Helvetica,sans-serif;
font-size: 15px;
margin: 0;
padding: 0;
}
h1 {
background: #333;
color: #fff;
text-align: center;
margin: 0 0 5% 0;
padding: 0.5em 0.5em 0.75em 0.5em;
margin: 0 0 -2.4em 0;
}
h2 {
text-transform: uppercase;
font-weight: normal;
font-size: 0.7em;
color: #ff6600;
font-weight: bold;
margin-top: 1.5em;
padding-left: 13.3em;
text-align: center;
margin-bottom: -0.9em;
}
h2 span {
font-size: 15px;
line-height: 1em;
position: relative;
top: 1px;
}
a {color: #f60; padding:2px 5px 4px 5px;}
a:hover {color: #fff; background:#f60; }
a, a:hover {text-decoration: none;}
a.icons-more-info {
position: fixed;
right: 1em;
bottom: 1em;
text-transform: uppercase;
font-size: 0.85em;
background: #333;
padding: 1em;
opacity: 0.5;
color: #fff;
}
a.icons-more-info:hover {
opacity: 1;
}
.contenido_tab {
border-bottom: 5px solid #e6e6e6;
float: left;
padding: 30px 0;
width: 100%;
}
.footer {
text-align: center;
float: left;
width: 100%;
margin-top: 1em;
margin-bottom: 1em;
}
/*** ICON LIST ***/
ul.icon-list {
padding: 0;
text-align: left;
width: 100%;
max-width: 1200px;
margin: 0 auto;
float: none;
}
ul.icon-list li {
font-family: Arial, Helvetica san-serif;
display: inline-table;
text-align: center;
width: 12%;
height: 12%;
position: relative;
box-sizing: border-box;
border: 3px solid transparent;
transition: all 0.5s ease 0s;
padding: 0.25em;
}
ul.icon-list li.list-header {
display: block;
width: 100%;
margin-bottom: 2em;
padding: 5em 0 0.3em ;
border: 0;
border-bottom: 3px dotted #cccccc !important;
box-sizing: border-box;
margin-top: 2em;
color: #cccccc;
font-size: 0.85em;
text-transform: uppercase;
font-weight: 600;
}
ul.icon-list li.list-header:first-of-type {
margin-top: 0;
}
ul.icon-list li.list-header + .list-header {
margin-top: -2em;
}
ul.icon-list li .name {
font-size: 1.1em;
padding: 0.5em 0 3em;
display: block;
color: #a9a9a9;
}
/*** MEDIA QUERIES ***/
@media (max-width:1200px){
ul.icon-list li {
display: inline-block;
width: 16.2%;
}
}
@media (max-width:980px){
ul.icon-list li {
width: 24.5%;
}
}
@media (max-width:767px){
ul.icon-list li {
width: 24.4%;
}
}
@media (max-width:580px){
ul.icon-list li {
width: 32.4%;
}
}
@media (max-width:480px){
ul.icon-list li {
width: 49.3%;
}
}
#hidden-copy-field {
opacity: 0;
margin: 0;
height: 0;
padding: 0;
}
#copied-text {
position: fixed;
top: 40%;
left: 40%;
width: 20%;
text-align: center;
background: rgba(0,0,0,0.85);
color: #fff;
display: none;
padding: 1em;
border: 3px solid #fff;
z-index: 3;
}
#copied-text code {
background: #e6e6e6;
color: #333;
padding: 0.3em 0.6em;
}
@media (max-width:767px){
#copied-text {
width: 40%;
left: 30%;
}
}
@media (max-width:580px){
#copied-text {
width: 60%;
left: 15%;
}
}
ul.icon-list li:hover {
border-color: #e6e6e6;
}
ul.icon-list li span.ji-name {
position: absolute;
width: 100%;
left: 0;
font-family: monospace;
bottom: 0;
background: #e6e6e6;
padding: 1em;
box-sizing: border-box;
opacity: 0;
transition: opacity 0.5s ease 0s;
font-size: 0.8em;
cursor: pointer;
}
ul.icon-list li span.ji-name:before {
content: "";
border: 10px solid transparent;
position: absolute;
top: -20px;
border-bottom-color: #e6e6e6;
left: 40%;
}
ul.icon-list li:hover span.ji-name {
opacity: 1;
}
ul.icon-list li span.ji-name:after {
content: "copiar";
position: absolute;
width: 100%;
left: 0;
font-family: Arial;
text-transform: uppercase;
font-size: 0.8em;
font-weight: 600;
opacity: 0;
transition: opacity 0.5s ease 0s;
background: #e6e6e6;
color: #f60;
padding: 1em 0;
box-sizing: border-box;
top: 3px;
font-weight: bold;
}
ul.icon-list li span.ji-name:hover:after {
opacity: 1;
}
#iconos {
position: relative;
transition:all 0.45s ease 0s;
}
#iconos.xtra-space {
padding-top: 200px;
transition:all 0.5s ease 0s;
}
#iconos.xtra-space.hidden {
padding-top: inherit !important;
}
/*options*/
.options-filter-opener {
float: right;
font-size: 11px;
font-weight: 600;
color: #ccc;
line-height: 2.3em;
cursor: pointer;
z-index: 3;
position: relative;
}
.options-filter-opener:after, .options-filter-opener:before {
content: "-";
float: right;
margin-right: 0.2em;
background: #ccc;
color: #fff;
text-align: center;
font-weight: 600;
height: 15px;
line-height: 0.5em;
display: inline-block;
top: 1px;
position: relative;
width: 15px;
box-sizing: border-box;
font-size: 2em;
margin-top: 0.13em;
margin-left: 0.2em;
}
.options-filter-opener:before {
display:none;
}
.options-filter-opener.hidden:after {
display: none;
}
.options-filter-opener.hidden:before {
content: "+";
display:block;
line-height: 0.75em;
background: #f50;
}
.options-filter-opener.hidden + .options-filter {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease 0s;
}
.options-filter-opener.fixed {
position: fixed;
top: -4px;
right: -4px;
z-index: 999;
background: transparent;
height: 19px;
padding-left: 5px;
color: transparent;
transition: all 0.5s ease 0s;
}
.options-filter-opener.fixed.hidden {
background: #ccccccba;
color: #fff;
}
.options-filter-opener.fixed:hover {
background: #ccccccba;
color: #fff;
transition: all 0.5s ease 0s;
}
.options-filters {
float: left;
width: 100%;
margin-bottom: 5.5em;
border: 2px dotted #e6e6e6;
box-sizing: border-box;
background: #f1f1f1;
z-index: 2;
position: relative;
display:none;
}
.options-filters.fixed {
position: fixed;
background: #ebebeb;
left: 0;
top: 0;
z-index: 5;
padding: 0.22em 0 0.42em;
box-shadow: 0 0 10px 0 #cacaca;
border-bottom: 4px solid #ccc;
}
.cat-menu-icons ul {
padding: 0;
margin: 0;
text-align: center;
}
.cat-menu-icons ul li {
display: inline-block;
font-size: 0.85em;
color: #c9c9c9;
height: 24px;
}
.cat-menu-icons ul li a {
background: #f60;
color: #fff;
padding: 0.25em 0.6em 0.2em;
border-radius: 1px;
font-weight: 600;
text-transform: uppercase;
font-size: 0.85em;
}
.cat-menu-icons ul li a.hidden-filter {
background: #e6e6e6;
}
.cat-menu-icons {
float: left;
width: 98%;
min-height: 2.1em;
border-bottom: 2px dotted #e6e6e6;
margin-bottom: 0.6em;
padding-top: 0.6em;
margin-left: 1%;
margin-right: 1%;
}
/* option-sz */
.option-sz {
float: left;
width: 33%;
text-align: center;
border-right: 2px dotted #e6e6e6;
}
.option-sz ul {
margin: 0;
padding: 0;
}
.option-sz ul:before {
content: "Tamaño: ";
color: #ccc;
font-size: 0.9em;
}
.option-sz ul li {
display: inline-block;
font-size: 0.65em;
min-width: 20px;
height: 20px;
background: #fbfbfb;
cursor: pointer;
position: relative;
top: -0.1em;
box-sizing: border-box;
text-align: center;
border: 1px solid #ccc;
color: #bdbdbd;
padding: 0 0.25em;
line-height: 1.7em;
font-family: Arial, Helvetica, san-serif;
text-transform: uppercase;
}
.option-sz ul li.selectedSize {
background: #ff6600;
color: #fff;
font-weight: bold;
border-color: #f60;
}
.option-sz ul li:after{
font-size: 1.2em;
color: #fff;
position: absolute;
bottom: -3em;
text-align: center;
background: #343434;
padding: 0.3em 0.5em 0.2em;
width: max-content;
text-transform: none;
z-index: 2;
font-family: Arial, Helvetica, san-serif;
left: 0;
line-height: 1.1em;
font-weight:normal;
}
.option-sz ul li:hover:before{
border: 10px solid transparent;
border-bottom-color: #343434;
content: " ";
position: absolute;
top: 2em;
z-index: 2;
font-weight:normal;
}
.option-sz ul li#opt-sz-xxs:hover:after {
content: "Mini";
}
.option-sz ul li#opt-sz-xs:hover:after {
content: "Pequeño";
}
.option-sz ul li#opt-sz-1:hover:after {
content: "Normal";
}
.option-sz ul li#opt-sz-2:hover:after {
content: "Doble";
}
.option-sz ul li#opt-sz-3:hover:after {
content: "Triple";
}
.option-sz ul li#opt-sz-4:hover:after {
content: "Grande";
}
.option-sz ul li#opt-sz-5:hover:after {
content: "Enorme";
}
/* option-bg */
.option-bg {
float: left;
width: 33%;
text-align: center;
border-right: 2px dotted #e6e6e6;
}
.option-bg ul {
margin: 0;
padding: 0;
}
.option-bg ul:before {
content: "Fondo: ";
color: #ccc;
font-size: 0.9em;
top: -0.3em;
position: relative;
}
.option-bg ul li {
display: inline-block;
width: 20px;
height: 20px;
background: #fbfbfb;
cursor: pointer;
position: relative;
border: 1px solid #ccc0;
box-sizing: border-box;
}
.option-bg ul li:last-of-type {
border-color: #ccc;
}
.option-bg ul li#opt-bg-light {
background: #e6e6e6;
}
.option-bg ul li#opt-bg-semilight {
background: #999999;
}
.option-bg ul li#opt-bg-semidark {
background: #676767;
}
.option-bg ul li#opt-bg-dark {
background: #343434;
}
.option-bg ul li#opt-bg-basedark {
background: #ca5100;
}
.option-bg ul li#opt-bg-baselight {
background: #ffcaa6;
}
.option-bg ul li#opt-bg-base {
background: #ff6600;
}
.option-bg ul li:after{
font-size: 0.75em;
color: #fff;
position: absolute;
bottom: -3em;
text-align: center;
background: #343434;
padding: 0.3em 0.5em 0.2em;
z-index: 2;
width: max-content;
}
.option-bg ul li:hover:before{
border: 10px solid transparent;
border-bottom-color: #343434;
content: " ";
position: absolute;
top: 1.2em;
z-index: 2;
}
.option-bg ul li#opt-bg-light:hover:after {
content: "Claro";
}
.option-bg ul li#opt-bg-semilight:hover:after {
content: "Semi Claro";
}
.option-bg ul li#opt-bg-semidark:hover:after {
content: "Semi Oscuro";
}
.option-bg ul li#opt-bg-dark:hover:after {
content: "Oscuro";
}
.option-bg ul li#opt-bg-basedark:hover:after {
content: "Base Oscuro";
}
.option-bg ul li#opt-bg-baselight:hover:after {
content: "Base Claro";
}
.option-bg ul li#opt-bg-base:hover:after {
content: "Base";
}
.option-bg ul li:last-of-type:hover:after {
content: "Transparente";
}
/* option-bd */
.option-bd {
float: left;
width: 33%;
text-align: center;
}
.option-bd ul {
margin: 0;
padding: 0;
}
.option-bd ul:before {
content: "Borde: ";
color: #ccc;
font-size: 0.9em;
top: -0.3em;
position: relative;
}
.option-bd ul li {
display: inline-block;
width: 20px;
height: 20px;
background: transparent;
cursor: pointer;
position: relative;
box-sizing: border-box;
border: 2px solid #ccc;
}
.option-bd ul li.selectedBorder {
background: #ff6600;
color: #fff;
font-weight: bold;
border-color: #f60;
}
.option-bd ul li:after{
font-size: 0.75em;
color: #fff;
position: absolute;
bottom: -3em;
text-align: center;
background: #343434;
padding: 0.3em 0.5em 0.2em;
width: max-content;
z-index: 2;
}
.option-bd ul li:hover:before{
border: 10px solid transparent;
border-bottom-color: #343434;
content: " ";
position: absolute;
top: 1.2em;
z-index: 2;
}
.option-bd ul li#opt-bd-base {
border-color: #f60;
}
.option-bd ul li#opt-bd-baselight {
border-color: #ffcaa6;
}
.option-bd ul li#opt-bd-light {
border-color: #e6e6e6;
}
.option-bd ul li#opt-bd-basedark {
border-color: #ca5100;
}
.option-bd ul li#opt-bd-dark {
border-color: #343434;
}
.option-bd ul li:last-of-type {
border-width: 1px;
border-color: #e6e6e6;
border-style: dashed;
}
.option-bd ul li#opt-bd-base:hover:after {
content: "Base";
}
.option-bd ul li#opt-bd-baselight:hover:after {
content: "Base Claro";
}
.option-bd ul li#opt-bd-light:hover:after {
content: "Claro";
}
.option-bd ul li#opt-bd-basedark:hover:after {
content: "Base Oscuro";
}
.option-bd ul li#opt-bd-dark:hover:after {
content: "Oscuro";
}
.option-bd ul li:last-of-type:hover:after {
content: "Sin Borde";
}
/* option-rd */
.option-rd {
float: left;
width: 49%;
text-align: center;
border-top: 2px dotted #e6e6e6;
margin-top: 0.6em;
padding-top: 0.5em;
box-sizing: border-box;
margin-bottom: 0.75em;
margin-left: 1%;
}
.option-rd ul {
margin: 0;
padding: 0;
}
.option-rd ul:before {
content: "Redondeado: ";
color: #ccc;
font-size: 0.9em;
}
.option-rd ul:after {
border-right: 2px dotted #e6e6e6;
height: 25px;
content: "";
float: right;
position: relative;
top: 3px;
}
.option-rd ul li {
display: inline-block;
width: 20px;
height: 20px;
background: transparent;
cursor: pointer;
position: relative;
top: 0.3em;
box-sizing: border-box;
border: 2px solid #ccc;
}
.option-rd ul li.selectedBorder {
background: #ff6600;
color: #fff;
font-weight: bold;
border-color: #f60;
}
.option-rd ul li:after{
font-size: 0.75em;
color: #fff;
position: absolute;
bottom: -3em;
text-align: center;
background: #343434;
padding: 0.3em 0.5em 0.2em;
width: max-content;
z-index: 2;
}
.option-rd ul li:hover:before{
border: 10px solid transparent;
border-bottom-color: #343434;
content: " ";
position: absolute;
top: 1.2em;
z-index: 2;
}
.option-rd ul li#opt-rd-xs {
border-radius: 5%;
}
.option-rd ul li#opt-rd-1 {
border-radius: 10%;
}
.option-rd ul li#opt-rd-2 {
border-radius: 20%;
}
.option-rd ul li#opt-rd-3 {
border-radius: 30%;
}
.option-rd ul li#opt-rd-4 {
border-radius: 40%;
}
.option-rd ul li#opt-rd-5 {
border-radius: 100%;
}
.option-rd ul li:last-of-type {
border-radius: 0%;
border-color: #e6e6e6;
border-style: dotted;
}
.option-rd ul li#opt-rd-xs:hover:after {
content: "5%";
}
.option-rd ul li#opt-rd-1:hover:after {
content: "10%";
}
.option-rd ul li#opt-rd-2:hover:after {
content: "20%";
}
.option-rd ul li#opt-rd-3:hover:after {
content: "30%";
}
.option-rd ul li#opt-rd-4:hover:after {
content: "40%";
}
.option-rd ul li#opt-rd-5:hover:after {
content: "100%";
}
.option-rd ul li:last-of-type:hover:after {
content: "Sin Redondeado";
}
/* option-cl */
.option-cl {
float: left;
width: 49%;
text-align: center;
border-top: 2px dotted #e6e6e6;
margin-top: 0.6em;
padding-top: 0.5em;
margin-bottom: 0.75em;
margin-right: 1%;
}
.option-cl ul {
margin: 0;
padding: 0;
}
.option-cl ul:before {
content: "Color: ";
color: #ccc;
font-size: 0.9em;
}
.option-cl ul li {
display: inline-block;
width: 20px;
height: 20px;
background: #fbfbfb;
cursor: pointer;
position: relative;
top: 0.3em;
box-sizing: border-box;
border: 2px solid transparent;
}
.option-cl ul li.selectedBorder {
background: #ff6600;
color: #fff;
font-weight: bold;
border-color: #f60;
}
.option-cl ul li:after{
font-size: 0.75em;
color: #fff;
position: absolute;
bottom: -3em;
text-align: center;
background: #343434;
padding: 0.3em 0.5em 0.2em;
width: max-content;
z-index: 2;
}
.option-cl ul li:hover:before{
border: 10px solid transparent;
border-bottom-color: #343434;
content: " ";
position: absolute;
top: 1.2em;
z-index: 2;
}
.option-cl ul li#opt-cl-base {
background: #f60;
}
.option-cl ul li#opt-cl-brown {
background: #ae8300;
}
.option-cl ul li#opt-cl-olive {
background: #709600;
}
.option-cl ul li#opt-cl-green {
background: #00b617;
}
.option-cl ul li#opt-cl-bluegreen {
background: #00b38f;
}
.option-cl ul li#opt-cl-bluegray {
background: #00a8cb;
}
.option-cl ul li#opt-cl-blue {
background: #3386ff;
}
.option-cl ul li#opt-cl-purple {
background: #8f69ff;
}
.option-cl ul li#opt-cl-violet {
background: #cb58ff;
}
.option-cl ul li#opt-cl-pink {
background: #ff47cc;
}
.option-cl ul li#opt-cl-red {
background: #ff5051;
}
.option-cl ul li#opt-cl-gray {
background: #cdcdcd;
}
.option-cl ul li#opt-cl-white {
background: #fff;
}
.option-cl ul li:last-of-type {
background: transparent;
border-color: #dcdcdc;
border-style: dotted;
border-width: 1px;
}
.option-cl ul li:last-of-type:hover {
background: #f60;
border: 1px solid #f60;
}
.option-cl ul li#opt-cl-base:hover:after {
content: "Base";
}
.option-cl ul li#opt-cl-brown:hover:after {
content: "Marrón";
}
.option-cl ul li#opt-cl-olive:hover:after {
content: "Oliva";
}
.option-cl ul li#opt-cl-green:hover:after {
content: "Verde";
}
.option-cl ul li#opt-cl-bluegreen:hover:after {
content: "Azul Verdoso";
}
.option-cl ul li#opt-cl-bluegray:hover:after {
content: "Azul Grisaceo";
}
.option-cl ul li#opt-cl-blue:hover:after {
content: "Azul";
}
.option-cl ul li#opt-cl-purple:hover:after {
content: "Morado";
}
.option-cl ul li#opt-cl-violet:hover:after {
content: "Violeta";
}
.option-cl ul li#opt-cl-pink:hover:after {
content: "Rosa";
}
.option-cl ul li#opt-cl-red:hover:after {
content: "Rojo";
}
.option-cl ul li#opt-cl-gray:hover:after {
content: "Gris";
}
.option-cl ul li#opt-cl-white:hover:after {
content: "Blanco";
}
.option-cl ul li:last-of-type:hover:after {
content: "Original";
}
#all-icons, #none-icons {
background: #cccccc;
font-size: 1.2em;
font-weight: bold;
padding: 0.06em 0.34em;
position: relative;
top: 1px;
font-family: Arial, Helvetica, san-serif;
width: 8px;
display: block;
text-align: center;
line-height: 1.1em;
text-indent: -1px;
}
#none-icons {
line-height: .95em;
padding-bottom: 0.2em;
top: 0px;
}
#all-icons:hover, #none-icons:hover {
background: #343434;
}
/*********** PAGE STYLES END ***********/
/***************************************************************
****************************************************************
***************************************************************/
/************ ICONS STYLES START *************/
/*
Theme Name: ji-icons
Author: Josetxu.com
Description: Free CSS Icons Gallery
Version: 1.0
*/
body {
font-size: 1em !important;
}
/****************************** ICONS - START ******************************/
/****** Base Icons Styles - START ******/
i[class^="ji-"], i[class*="ji-"] {
width: 2.5em;
height: 2.5em;
border: 0.2em solid transparent;
border-radius: 0.0625em;
display: inline-block;
background: transparent;
font-size: 1em;
font-style: normal;
}
i[class^="ji-"]:after , i[class^="ji-"]:before, i[class*="ji-"]:after , i[class*="ji-"]:before {
content: " ";
border-radius: 0.125em;
float: left;
}
/******* Base Icons Styles - END *******/
/***** Specific Icons Styles - START *****/
/*************** Logo **************/
i.ji-jicons:before {
width: 0.35em;
height: 1.1em;
margin-top: 0.6em;
margin-left: 0.6em;
border-right: 0.25em solid #f60;
border-bottom: 0.25em solid #f60;
border-radius: 0 0 0.35em 0;
}
i.ji-jicons:after {
margin-left: 0.22em;
margin-top: 0.65em;
background: transparent;
border-top: 0.275em solid #f60;
height: 0.065em;
width: 0.25em;
border-bottom: 0.75em solid #f60;
border-radius: 0.005em;
}
/*************** Web ***************/
/* home */
i.ji-home:after {
border: 0.8em solid transparent;
border-bottom: 0.6em solid #ff6600;
margin-top: -0.3em;
margin-left: -1.41em;
border-radius: 0.0625em;
}
i.ji-home:before {
background: transparent;
width: 0.25em;
height: 0.5em;
margin-left: 0.65em;
margin-top: 1em;
border: 0.5em solid #ff6600;
border-bottom: 0;
}
/* comment */
i.ji-comment:after {
background: transparent;
border-radius: 0;
border: 0.437em solid #ff6600;
border-left: 0 solid transparent;
border-bottom-color: transparent;
border-right-color: transparent;
position: absolute;
transform: rotate(15deg);
-ms-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
margin-top: 1.687em;
margin-left: -1.562em;
}
i.ji-comment:before {
background: #ff6600;
width: 1.625em;
height: 1.312em;
border-radius: 0.625em;
margin-left: 0.437em;
margin-top: 0.437em;
}
/* mail */
i.ji-mail:after {
width: 0.125em;
height: 0;
margin-left: 0.438em;
margin-top: -1.437em;
background: transparent;
border: 0.750em solid #ff6600;
border-top-color: transparent;
border-bottom-width: 0.562em;
}
i.ji-mail:before {
width: 0;
height: 0;
margin-top: 0.562em;
margin-left: 0.5em;
background: transparent;
border: 0.75em solid transparent;
border-top-color: #ff6600;
}
/* user */
i.ji-user:before {
width: 0.750em;
height: 0.750em;
margin-top: 0.437em;
background: #ff6600;
margin-left: 0.9em;
border-radius: 100%;
}
i.ji-user:after {
margin-left: 0.650em;
margin-top: 0.0625em;
background: #ff6600;
width: 1.250em;
height: 0.8125em;
border-radius: 100% 100% 0 0;
}
/*bookmark*/
i.ji-bookmark:after {
margin-top: 0.4375em;
margin-left: 0.5625em;
width: 0;
height: 0.25em;
border: 0.6875em solid #ff6600;
border-bottom-color: transparent;
}
/* map */
i.ji-map:after {
margin-left: 0.875em;
margin-top: -0.3125em;
border: 0.750em solid #ff6600;
border-left: 0.375em solid transparent;
border-right: 0.375em solid transparent;
border-bottom-color: transparent;
}
i.ji-map:before {
width: 0.375em;
height: 0.375em;
margin-top: 0.437em;
margin-left: 0.625em;
background: transparent;
border-radius: 100%;
border: 0.437em solid #ff6600;
}
/* link */
i.ji-link:before, i.ji-link:after {
width: 0.750em;
height: 0.1875em;
margin-top: 0.687em;
border: 0.25em solid #ff6600;
border-radius: 0.375em;
margin-left: 0.9375em;
transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
i.ji-link:after {
margin-left: 0.375em;
margin-top: -0.1875em;
}
/* star */
i.ji-star:before, i.ji-star:after {
width: 0;
height: 0;
margin-top: 0.7em;
margin-left: 0.4em;
border: 0.8em solid transparent;
border-top: 1.4em solid #ff6600;
border-radius: 0.05em;
}
i.ji-star:after {
margin-top: -3.45em;
transform: rotate(180deg);
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
}
/*************** Controls ***************/
/* play */
i.ji-play:before {
margin-top: 0.5em;
margin-left: 0.8125em;
border: 0.75em solid transparent;
border-left: 1.125em solid #ff6600;
}
/* stop */
i.ji-stop:before , i.ji-rec:before {
margin-top: 0.625em;
margin-left: 0.625em;
height: 1.250em;
width: 1.250em;
background: #ff6600;
}
/* pause */
i.ji-pause:before {
margin-top: 0.625em;
margin-left: 0.625em;
border-left: 0.5em solid #ff6600;
border-right: 0.5em solid #ff6600;
height: 1.25em;
width: 0.25em;
border-radius: 0.05em;
}
/* rec */
i.ji-rec:before {
border-radius: 100%;
}
/* fast forward / rewind */
i.ji-forward:before , i.ji-forward:after , i.ji-rewind:before , i.ji-rewind:after {
margin-top: 0.5em;
margin-left: -0.3125em;
border: 0.75em solid transparent;
border-left: 0.875em solid #ff6600;
}
i.ji-forward:before , i.ji-forward:after {
margin-left: 0.625em;
}
i.ji-forward:after {
margin-left: 1.125em;
margin-top: -1.5em;
}
i.ji-rewind:before {
transform: rotate(180deg);
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
}
i.ji-rewind:after {
margin-left: 0.1875em;
margin-top: -1.5em;
transform: rotate(180deg);
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
}
/* slow forward / slow rewind */
i.ji-slowforward:before , i.ji-slowforward:after , i.ji-slowrewind:before , i.ji-slowrewind:after {
margin-top: 0.5em;
margin-left: -0.3125em;
border: 0.750em solid transparent;
border-left: 0.875em solid #ff6600;
border-radius: 0.1875em;
}
i.ji-slowforward:before , i.ji-slowforward:after {
margin-left: 0.625em;
}
i.ji-slowforward:after {
margin-left: 1.125em;
margin-top: -1.4375em;
}
i.ji-slowrewind:before {
transform: rotate(180deg);
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
}
i.ji-slowrewind:after {
margin-left: 0.125em;
}
i.ji-slowforward:before, i.ji-slowrewind:after {
border: 0;
width: 0.375em;
height: 1.375em;
background: #ff6600;
border-radius: 0.0625em;
margin-top: 0.562em;
}
/*************** Tools ***************/
/* gear */
i.ji-gear:before {
width: 0.375em;
height: 0.375em;
margin-top: 0.625em;
margin-left: 0.625em;
background: transparent;
border: 0.4375em solid #ff6600;
border-radius: 100%;
}
i.ji-gear:after {
margin-left: -1.4375em;
margin-top: 0.4375em;
background: transparent;
border: 0.25em dashed #ff6600;
width: 1.125em;
height: 1.125em;
border-radius: 100%;
}
/* edit */
i.ji-edit:before {
width: 0.625em;
height: 1.5em;
margin-top: 0.4375em;
margin-left: 1.0625em;
background: #ff6600;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
i.ji-edit:after {
margin-left: -1.5em;
margin-top: 1.625em;
background: transparent;
border: 0.4375em solid #ff6600;
border-bottom-color: transparent;
border-left: 0.3125em solid transparent;
border-right: 0.3125em solid transparent;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
/* hammer */
i.ji-hammer:before {
width: 0.12em;
height: 0.12em;
margin-top: 1.12em;
margin-left: 0.3075em;
background: #ff660000;
transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
border: 0.23em solid #ff6600;
border-right-width: 1em;
border-radius: 0.1em 0 0 0.1em !important;
}
i.ji-hammer:after {
margin-left: 0.985em;
margin-top: -1.55em;
background: transparent;
border: 0.475em solid #ff6600;
border-bottom: 0.4375em solid transparent;
border-left: 0 solid transparent;
border-right: 0.4375em solid transparent;
transform: rotate(225deg);
-ms-transform: rotate(225deg);
-webkit-transform: rotate(225deg);
width: 1em;
}
/* wrench */
i.ji-wrench:before {
width: 0.12em;
height: 0.12em;
margin-top: 1.2em;
margin-left: 0.4375em;
background: #ff660000;
transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
border: 0.23em solid #ff6600;
border-right-width: 0.8em;
}
i.ji-wrench:after {
margin-left: 1em;
margin-top: -1.18em;
border: 0.375em solid #ff6600;
border-top: 0 solid transparent;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
width: 0.3125em;
height: 0.375em;
border-radius: 0.3125em;
border-bottom-right-radius: 0.625em;
border-bottom-left-radius: 0.625em;
}
/* screwdriver */
i.ji-screwdriver:before {
width: 0.12em;
height: 0.12em;
margin-top: 1.45em;
margin-left: 0.375em;
background: #adb93203;
transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
border-radius: 0.625em 0.125em 0.125em 0.625em;
border: 0.25em solid #ff6600;
border-right-width: 0.5em;
}
i.ji-screwdriver:after {
margin-left: 1.5em;
margin-top: -1.8em;
transform: rotate(135deg);
-ms-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
width: 1.875em;
height: 0.375em;
border-radius: 1.8125em 0.3125em 0.3125em 1.6875em;
border-bottom: 0;
background: #ff6600;
font-size: 0.575em;
line-height: 0.385em;
text-indent: -1.9em;
content: "►";
color: #ff6600;
}
/* lock */
i.ji-lock:after {
width: 0.325em;
height: 0.375em;
margin-top: -1.55em;
margin-left: 0.82em;
border: 0.25em solid #ff6600;
border-radius: 100% 100% 0 0;
border-bottom: 0;
}
i.ji-lock:before {
width: 2.05em;
margin-left: 1.05em;
margin-top: 1.8em;
height: 1.6em;
background: #ff6600;
content: "✓";
font-size: 0.6em;
color: #fff;
line-height: 1.8em;
font-weight: bold;
}
/* unlock */
i.ji-unlock:after {
width: 0.35em;
height: 0.375em;
margin-top: -1.55em;
margin-left: 0.825em;
border: 0.25em solid #ff6600;
border-radius: 100% 100% 0 0;
border-bottom: 0;
}
i.ji-unlock:before {
width: 1.8em;
margin-left: 0.9em;
margin-top: 1.6em;
height: 1.35em;
background: #ff6600;
content: "x";
font-size: 0.7em;
color: #fff;
line-height: 1.4em;
}
/* options */
i.ji-options:before {
margin-left: 0.4375em;
margin-top: 0.4375em;
background: linear-gradient(transparent 0, transparent 0.125em, #ff6600 0.125em, #ff6600 0.375em,transparent 0.375em,transparent 0.6875em, #ff6600 0.6875em, #ff6600 0.9375em, transparent 0.9375em, transparent 1.25em, #ff6600 1.25em, #ff6600 1.5em, transparent 1.5em, transparent 1.625em);
width: 1.625em;
height: 1.625em;
border-radius: 0.0625em;
}
i.ji-options:after {
margin-left: 0.25em;
margin-top: -1.3em;
width: 1.5em;
height: 1.5625em;
line-height: 0.775em;
content: "●";
color: #ff6600;
font-size: 1.4em;
text-indent: 0.1em;
transform: rotate(-41deg);
-ms-transform: rotate(-41deg);
-webkit-transform: rotate(-41deg);
letter-spacing: 0.008em;
content: "●● ●";
}
/*************** Menus ***************/
/* menu */
i.ji-menu:before {
width: 1.625em;
height: 0.25em;
margin-top: 0.4375em;
border-top: 0.375em solid #ff6600;
border-radius: 0;
border-bottom: 0.375em solid #ff6600;
margin-left: 0.4375em;
}
i.ji-menu:after {
margin-left: 0.4375em;
margin-top: 0.25em;
background: #ff6600;
width: 1.625em;
height: 0.375em;
border-radius: 0;
}
/* menu list */
i.ji-list:after {
width: 1.625em;
height: 0.375em;
margin-top: -1.25em;
margin-left: 0.4375em;
border-radius: 0;
border-top: 0.25em solid #ffffff;
border-bottom: 0.25em solid #ffffff;
}
i.ji-list:before {
width: 0.25em;
height: 1.625em;
margin-top: 0.4375em;
margin-left: 0.4375em;
border-left: 0.375em solid #ff6600;
border-radius: 0.0625em;
border-right: 1em solid #ff6600;
}
/* menu grid */
i.ji-grid:after {
width: 1.625em;
height: 0.375em;
margin-top: -1.25em;
margin-left: 0.4375em;
border-radius: 0;
border-top: 0.25em solid #ffffff;
border-bottom: 0.25em solid #ffffff;
}
i.ji-grid:before {
width: 0.875em;
height: 1.625em;
margin-top: 0.4375em;
margin-left: 0.4375em;
border-left: 0.375em solid #ff6600;
border-radius: 0.0625em;
border-right: 0.375em solid #ff6600;
background: #ff6600;
background: linear-gradient(to right, transparent 0 ,transparent 0.25em, #ff6600 0.25em, #ff6600 0.625em, transparent 0.625em, transparent 0.875em);
}
/* menu close */
i.ji-close:after {
width: 0.375em;
height: 1.875em;
margin-left: 1.0625em;
margin-top: -1.875em;
transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
background: #ff6600;
border-radius: 0.0625em;
}
i.ji-close:before {
width: 0.375em;
height: 1.875em;
margin-right: 1.25em;
margin-top: 0.3125em;
margin-left: 1em;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
background: #ff6600;
border-radius: 0.0625em;
}
/* menu y */
i.ji-menuy:before {
width: 0.375em;
height: 0.25em;
margin-top: 0.4375em;
border-top: 0.375em solid #ff6600;
border-radius: 0;
border-bottom: 0.375em solid #ff6600;
margin-left: 1.0625em;
}
i.ji-menuy:after {
margin-left: -0.375em;
margin-top: 1.6875em;
background: #ff6600;
width: 0.375em;
height: 0.375em;
border-radius: 0;
}
/* menu x */
i.ji-menux:before {
width: 0.25em;
height: 0.375em;
margin-top: 1.0625em;
border-right: 0.375em solid #ff6600;
border-radius: 0;
border-left: 0.375em solid #ff6600;
margin-left: 0.4375em;
}
i.ji-menux:after {
margin-left: 0.25em;
margin-top: 1.0625em;
background: #ff6600;
width: 0.375em;
height: 0.375em;
border-radius: 0;
}
/* menu y-x circled */
i.ji-menuycircled:before, i.ji-menuxcircled:before {
margin-top: 0.65em;
margin-left: 0.3em;
content: "●●●";
transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
color: #ff6600;
}
i.ji-menuxcircled:before {
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
margin-left: 0.35em;
}
/*************** Arrows ***************/
/* arrow border */
i.ji-arrowborderright:after , i.ji-arrowborderleft:after , i.ji-arrowbordertop:after , i.ji-arrowborderbottom:after {
margin-top: 0.75em;
margin-left: 0.625em;
border: 0.4375em solid #ff6600;
border-bottom-width: 0;
border-left-width: 0;
width: 0.625em;
height: 0.625em;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
i.ji-arrowborderleft:after {
transform: rotate(225deg);
-ms-transform: rotate(225deg);
-webkit-transform: rotate(225deg);
margin-left: 0.8125em;
}
i.ji-arrowbordertop:after {
transform: rotate(315deg);
-ms-transform: rotate(315deg);
-webkit-transform: rotate(315deg);
margin-left: 0.75em;
margin-top: 0.9375em;
}
i.ji-arrowborderbottom:after {
transform: rotate(135deg);
-ms-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
margin-left: 0.75em;
margin-top: 0.625em;
}
/* arrow solid */
i.ji-arrowsolidright:before , i.ji-arrowsolidleft:before , i.ji-arrowsolidtop:before , i.ji-arrowsolidbottom:before {
margin-top: 0.5em;
margin-left: 0.8125em;
border: 0.75em solid transparent;
}
i.ji-arrowsolidright:before {
border-left: 1.125em solid #ff6600;
}
i.ji-arrowsolidleft:before {
border-right: 1.125em solid #ff6600; margin-left: -0.12em;
}
i.ji-arrowsolidtop:before {
border-bottom: 1.125em solid #ff6600; margin: -0.0625em 0 0 0.562em;
}
i.ji-arrowsolidbottom:before {
border-top: 1.125em solid #ff6600; margin: 0.75em 0 0 0.5em;
}
/*************** Social ***************/
/* social */
i.ji-social:before {
margin-left: 0.0625em;
margin-top: 0.15em;
width: 1.5em;
height: 1.5em;
line-height: 0.65em;
color: #ff6600;
font-size: 1.4em;
transform: rotate(90deg);
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
letter-spacing: 0;
content: "● ● ●";
text-align: center;
}
i.ji-social:after {
margin-left: 1em;
margin-top: -1.55em;
width: 0.75em;
height: 0.75em;
border-top: 0.25em solid #ff6600;
border-right: 0.25em solid #ff6600;
transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
border-radius: 0;
}
/* facebook */
i.ji-facebook:before {
width: 0.25em;
height: 1.1875em;
margin-top: 0.4375em;
border-top: 0.375em solid #ff6600;
border-left: 0.375em solid #ff6600;
margin-left: 1em;
border-radius: 0.3125em 0.0625em 0.0625em 0.0625em;
}
i.ji-facebook:after {
margin-left: 0.8125em;
margin-top: -1em;
background: #ff6600;
width: 0.75em;
height: 0.375em;
border-radius: 0;
}
/* twitter */
i.ji-twitter:before {
width: 0.625em;
height: 0.9375em;
margin-top: 0.5625em;
border-bottom: 0.375em solid #ff6600;
border-left: 0.375em solid #ff6600;
margin-left: 0.8125em;
border-radius: 0.0625em 0.0625em 0.1875em 0.3125em;
}
i.ji-twitter:after {
margin-left: 1.125em;
margin-top: -1em;
background: #ff6600;
width: 0.6875em;
height: 0.375em;
border-radius: 0 0.1875em 0.1875em 0;
}
/* google */
i.ji-google:before {
width: 0.6875em;
height: 0.6875em;
margin-top: 0.5625em;
border: 0.375em solid #ff6600;
margin-left: 0.5625em;
border-radius: 100%;
border-right-color: transparent;
}
i.ji-google:after {
margin-left: 1.23em;
margin-top: -0.825em;
width: 0.3125em;
height: 0.4375em;
border-top: 0.3125em solid #ff6600;
border-right: 0.4em solid #ff6600;
border-bottom-right-radius: 0.5em;
}
/* linkedin */
i.ji-linkedin:before {
width: 0.375em;
height: 0.0625em;
margin-top: 0.5625em;
border-bottom: 0.9375em solid #ff6600;
border-top: 0.375em solid #ff6600;
margin-left: 0.5em;
border-radius: 0.0625em;
}
i.ji-linkedin:after {
margin-left: 1em;
margin-top: -1em;
width: 0.375em;
height: 0.6875em;
border: 0.3125em solid #ff6600;
border-bottom: 0;
border-radius: 0.125em 0.4375em 0.0625em 0.0625em;
}
/* instagram */
i.ji-instagram:before {
width: 1.25em;
height: 0.6875em;
margin-top: 0.5em;
border: 0.1875em solid #ff6600;
border-top: 0.625em solid #ff6600;
margin-left: 0.4375em;
}
i.ji-instagram:after {
margin-left: 0.53em;
margin-top: -0.8em;
width: 0.32em;
height: 0.32em;
border: 0.135em solid #ff6600;
border-radius: 100%;
content: ".";
color: #fff;
font-size: 1.5em;
line-height: 0.4em;
text-indent: 0.375em;
transform: rotatex(-180deg);
-ms-transform: rotatex(-180deg);
-webkit-transform: rotatex(-180deg);
}
/* youtube */
i.ji-youtube:before {
margin-top: 0.65em;
margin-left: 0.4375em;
font-size: 1em;
color: #fff;
background: #ff6600;
height: 1.2em;
width: 1.625em;
text-indent: -0.0625em;
line-height: 0.875em;
border-radius: 0.3125em;
}
i.ji-youtube:after {
font-weight: bold;
margin-left: 1.01em;
margin-top: -0.92em;
border: 0.3125em solid transparent;
color: #ff6600;
border-left: 0.5625em solid #fff;
}
/* rss */
i.ji-rss:before {
width: 1em;
height: 1.5em;
border: 0.9375em double transparent;
border-top-color: #ff6600;
border-radius: 100%;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
margin-left: -0.9em;
margin-top: 0.32em;
}
i.ji-rss:after {
margin-left: -1.4em;
margin-top: 1.69em;
background: #ff6600;
width: 0.3em;
height: 0.3em;
border-radius: 0.3125em;
}
/*************** Multimedia ***************/
/* photo */
i.ji-photo:before {
width: 0.5em;
height: 0.5em;
margin-top: 0.89em;
background: #ff6600;
margin-left: 1.0625em;
border-radius: 100%;
z-index: 2;
position: relative;
border: 0.125em double #fff;
}
i.ji-photo:after {
margin-left: 0.38em;
margin-top: -0.9em;
background: #ff6600;
width: 1.32em;
height: 1.16em;
border-radius: 0.125em;
content: ".";
color: #fff;
line-height: 0.0625em;
text-align: left;
text-indent: 0.125em;
font-size: 1.2em;
}
/* image */
i.ji-image:before {
margin-top: 1.05em;
margin-left: 1.3875em;
position: relative;
border: 0.3125em solid transparent;
border-bottom: 0.375em solid #fff;
border-radius: 0.05em;
line-height: 0.0625em;
text-indent: -1.1em;
content: "▲";
font-size: 0.9em;
width: 0;
color: #fff;
}
i.ji-image:after {
margin-left: 0.38em;
margin-top: -1.1em;
background: #ff6600;
width: 1.8em;
height: 1.48em;
}
/* video */
i.ji-video:before {
width: 0.75em;
height: 0.3125em;
margin-top: 0.8125em;
border: 0.5em solid transparent;
margin-left: 0.8125em;
border-right-color: #ff6600;
border-top-width: 0.3125em;
border-bottom-width: 0.3125em;
border-left-width: 0;
}
i.ji-video:after {
margin-left: 0.4375em;
margin-top: -1em;
background: #ff6600;
width: 1.0625em;
height: 1.0625em;
}
/* player */
i.ji-player:before {
margin-top: 0.9375em;
border: 0.625em solid transparent;
border-left: 0.625em solid #fff;
margin-left: 1em;
border-top-width: 0.3125em;
border-bottom-width: 0.3125em;
z-index: 2;
position: relative;
}
i.ji-player:after {
margin-left: 0.4375em;
margin-top: -1em;
background: #ff6600;
width: 1.625em;
height: 1.375em;
}
/* micro */
i.ji-micro:before {
width: 0.455em;
height: 1em;
margin-top: 0.375em;
margin-left: 0.877em;
border: 0.15em solid #ff6600;
border-radius: 0.625em;
background: linear-gradient(to top, #ff6600 0, #ff6600 50%, transparent 50%,transparent 58%, #ff6600 58%, #ff6600 66%, transparent 66%, transparent 74%, #ff6600 74%, #ff6600 82%, transparent 82%, transparent 90%, #ff6600 90%, #ff6600 100%);
z-index: 2;
position: relative;
}
i.ji-micro:after {
margin-left: 0.85em;
margin-top: -0.1em;
border: 0.2em solid #ff6600;
width: 0.22em;
height: 0.3em;
border-radius: 0 0 0.1em 0.1em;
background: #ff6600;
border-color: transparent #fff #ff6600 #fff;
border-width: 0 0.3em 0.2em 0.3em;
}
/* sound */
i.ji-sound:before {
height: 0.5em;
margin-top: 0.5em;
margin-left: 0.125em;
border: 0.9375em solid #ff6600;
border-left-color: transparent;
border-top: 0.5em solid transparent;
border-bottom: 0.5em solid transparent;
}
i.ji-sound:after {
margin-left: -1.5em;
margin-top: 0.9375em;
background: #ff6600;
width: 0.5em;
height: 0.625em;
border-radius: 0.0625em;
}
/* mute */
i.ji-mute:before {
height: 0.5em;
margin-top: 0.5em;
margin-left: 0.125em;
border: 0.9375em solid #ff6600;
border-left-color: transparent;
border-top: 0.5em solid transparent;
border-bottom: 0.5em solid transparent;
}
i.ji-mute:after {
margin-left: -1.73em;
background: #ff6600;
height: 0.7em;
border-radius: 0.0625em;
content: "x";
font-weight: normal;
color: #fff;
font-size: 0.8em;
z-index: 2;
position: relative;
line-height: 0.5625em;
max-width: 0.5em;
text-indent: 0.95em;
margin-top: 1.2em;
}
/* muted */
i.ji-muted {
-webkit-perspective: 6.25em;
perspective: 6.25em;
}
i.ji-muted:before {
height: 0.8125em;
margin-top: 0.8125em;
margin-left: -0.625em;
border: 0.0625em solid #ff6600;
border-left-width: 0.4375em;
border-right-width: 0.1875em;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
transform: rotatey(-81deg);
-ms-transform: rotatey(-81deg);
-webkit-transform: rotatey(-81deg);
width: 3.4375em;
float: left;
}
i.ji-muted:after {
margin-left: -2.875em;
height: 0.5625em;
border-radius: 0.0625em;
margin-top: 0.9375em;
padding-left: 0.375em;
max-width: 0;
border: 0.0625em solid #ff6600;
}
/*************** Files ***************/
/* file */
i.ji-file:after {
margin-top: -1.61em;
margin-left: 1.415em;
border-radius: 0.125em 0.12em;
border: 0.3125em solid transparent;
border-right: 0.375em solid #ff6600;
box-shadow: 0.0625em 0.0625em 0 0 #fff;
border-bottom: 0.25em solid #ff6600;
transform: rotate(90deg);
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
i.ji-file:before {
background: #ff6600;
border: 0.275em solid #ff6600;
font-size: 1em;
width: 0;
height: 0;
padding: 0.54em 0.37em;
margin-left: 0.65em;
margin-top: 0.5em;
border-radius: 0.06em 0.8125em 0.06em 0.06em;
line-height: 0.6em;
text-indent: -0.3em;
content: " ";
}
/* file double */
i.ji-filedouble:after {
margin-top: -1.45em;
margin-left: 1.48em;
border-radius: 0.125em 0.12em;
border: 0.3125em solid transparent;
border-right: 0.375em solid #ff6600;
box-shadow: 0.0625em 0.0625em 0 0 #fff;
border-bottom: 0.25em solid #ff6600;
transform: rotate(90deg);
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
i.ji-filedouble:before {
width: 1.125em;
height: 1.375em;
margin-top: 0.4375em;
margin-left: 0.8125em;
border-radius: 0.06em 0.8125em 0.06em 0.08em;
background: #ff6600;
box-shadow: -0.25em 0.25em 0 0 #ff6600, -0.3125em 0.3125em 0 -0.0625em #ff6600, -0.3125em 0.1875em 0 -0.0625em #ff6600, -0.1875em 0.3125em 0 -0.0625em #ff6600;
border-bottom: 0.0625em solid #fff;
border-left: 0.0625em solid #fff;
}
/* file text */
i.ji-filetext:after {
margin-top: -1.61em;
margin-left: 1.415em;
border-radius: 0.125em 0.12em;
border: 0.3125em solid transparent;
border-right: 0.375em solid #ff6600;
box-shadow: 0.0625em 0.0625em 0 0 #fff;
border-bottom: 0.25em solid #ff6600;
transform: rotate(90deg);
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
i.ji-filetext:before {
background: linear-gradient(to bottom, #ff6600 0, #ff6600 35%, transparent 35%, transparent 45%, #ff6600 45%, #ff6600 55% , transparent 55%, transparent 65%, #ff6600 65%, #ff6600 75%, transparent 75%, transparent 85%, #ff6600 85%, #ff6600 100%);
border: 0.275em solid #ff6600;
font-size: 1em;
width: 0;
height: 0;
padding: 0.54em 0.37em;
margin-left: 0.65em;
margin-top: 0.5em;
border-radius: 0.06em 0.8125em 0.06em 0.06em;
line-height: 0.6em;
text-indent: -0.3em;
content: " ";
}
/* file new */
i.ji-filenew:before {
content: "+";
font-size: 1em;
width: 0;
height: 0;
margin-left: 0.65em;
margin-top: 0.5em;
border-radius: 0.06em 0.8125em 0.06em 0.06em;
line-height: 0.6em;
text-indent: -0.3em;
color: #fff;
}
/* folder */
i.ji-folder:after {
width: 1.5em;
margin-left: 0.5em;
margin-top: 0.0625em;
height: 1.25em;
border-radius: 0.0625em;
color: #fff;
line-height: 1.35em;
background: #ff6600;
}
i.ji-folder:before {
width: 0.5em;
height: 0.25em;
margin-top: 0.4375em;
margin-left: 1.3125em;
background: #ff6600;
border-radius: 0.125em 0.125em 0 0;
}
/* folder new */
i.ji-foldernew:after {
content: "+";
}
/* folder other */
i.ji-folderother:after {
width: 1.5em;
margin-left: 0.4375em;
margin-top: 0.0625em;
border: 0.0625em solid transparent;
border-top: 1.25em solid #ff6600;
border-radius: 0.0625em;
}
i.ji-folderother:before {
width: 0.5em;
height: 0.25em;
margin-top: 0.4375em;
margin-left: 1.3125em;
background: #ff6600;
border-radius: 0.125em 0.125em 0 0;
}
/* folder open */
i.ji-folderopen:after {
width: 1.4em;
margin-left: -0.85em;
margin-top: 0.8em;
border-top: 0.05em solid #fff;
border-radius: 0.0625em 0.12em 0.0625em 0.0625em;
border-right: 0.0782em solid #fff;
-ms-transform: skewx(15deg);
-webkit-transform: skewx(15deg);
transform: skewx(15deg);
height: 1.15em;
background: #ff6600;
position: absolute;
}
i.ji-folderopen:before {
width: 1.45em;
margin-left: -0.7em;
margin-top: 0.58em;
border-top: 1.4em solid #ff6600;
border-radius: 0.0625em;
position: absolute;
}
/*************** Devices ***************/
/* desktop */
i.ji-desktop:before,i.ji-tablet:before, i.ji-mobile:before {
width: 1.125em;
height: 0.6875em;
margin-top: 0.6875em;
margin-left: 0.4375em;
border: 0.25em solid #ff6600;
border-bottom-width: 0;
border-radius: 0.125em 0.125em 0 0;
}
i.ji-desktop:after, i.ji-tablet:after, i.ji-mobile:after{
/*margin-top: -0.25em;
margin-left: 1.1875em;
background: #ffffff;
border: 0.0625em solid #ffffff;
*/
margin-top: -0.125em;
margin-left: 0.751875em;
background: #ffffff00;
border: 0.2em solid #ff6600;
width: 0.1em;
height: 0.1em;
border-left-width: 0.45em;
border-right-width: 0.45em;
border-radius: 0 0 0.125em 0.125em;
}
i.ji-desktop:after {
border-left-width: 0.763em;
border-right-width: 0.763em;
margin-left: 0.44em;
}
/* tablet */
i.ji-tablet:before {
width: 0.75em;
height: 1em;
margin-top: 0.4375em;
margin-left: 0.625em;
}
i.ji-tablet:after {
border-left-width: 0.578em;
border-right-width: 0.578em;
margin-left: 0.625em;
}
/* mobile */
i.ji-mobile:before {
width: 0.5em;
height: 1em;
margin-top: 0.4375em;
margin-left: 0.75em;
}
/* mp3 */
i.ji-mp3:before {
border: 0.25em solid #ff6600;
border-bottom-width: 0.875em;
width: 0.5em;
height: 0.5em;
margin-top: 0.4375em;
margin-left: 0.75em;
}
i.ji-mp3:after {
margin-top: -0.5625em;
margin-left: 1.125em;
background: #ff6600;
border: 0.0625em solid #ffffff;
width: 0.125em;
height: 0.125em;
border-radius: 100%;
}
/* headphones */
i.ji-headphones:before {
width: 1.125em;
height: 1.25em;
margin-top: 0.5em;
margin-left: 0.4375em;
border: 0.25em solid #ff6600;
border-radius: 100%;
border-bottom-color: transparent;
}
i.ji-headphones:after {
margin-top: -1.3125em;
margin-left: 0.6875em;
border: 0.3125em solid #ff6600;
border-top-color: transparent;
border-bottom-color: transparent;
width: 0.5em;
height: 0.5em;
}
/* disc */
i.ji-disc:before {
width: 0.625em;
height: 0.625em;
margin-top: 0.4375em;
margin-left: 0.4375em;
border: 0.5em solid #ff6600;
border-radius: 100%;
}
i.ji-disc:after {
margin-top: -1.0625em;
margin-left: 1em;
border: 0.1875em solid #ff6600;
width: 0.125em;
height: 0.125em;
border-radius: 100%;
}
/* big disc */
i.ji-discbig:before {
width: 0.875em;
height: 0.875em;
margin-top: 0.4375em;
margin-left: 0.4375em;
border: 0.375em solid #ff6600;
border-radius: 100%;
}
i.ji-discbig:after {
margin-top: -1.1875em;
margin-left: 0.875em;
border: 0.25em solid #ff6600;
width: 0.25em;
height: 0.25em;
border-radius: 100%;
}
/* pendrive */
i.ji-pendrive:before {
width: 0.8125em;
height: 1.25em;
margin-top: 0.8125em;
margin-left: 0.875em;
background: #ff6600;
background: linear-gradient(to bottom, #ff6600 0%, #ff6600 70%, transparent 70%, transparent 74%, #ff6600 74%, #ff6600 100%);
}
i.ji-pendrive:after {
margin-top: -1.625em;
border-left: 0.25em solid #ff6600;
border-right: 0.25em solid #ff6600;
margin-left: 1em;
height: 0.625em;
width: 0.0625em;
}
/*************** Info ***************/
/* info */
i.ji-info:after {
background: #ff6600;
width: 0.4375em;
height: 0.4375em;
margin-left: 1em;
margin-top: -1.625em;
}
i.ji-info:before {
background: #ff6600;
width: 0.4375em;
height: 1.0625em;
margin-top: 1em;
margin-left: 1em;
}
/* warning */
i.ji-warning:after {
background: #ff6600;
width: 0.4375em;
height: 1.0625em;
margin-left: 1em;
margin-top: -1.62em;
}
i.ji-warning:before {
background: #ff6600;
width: 0.4375em;
height: 0.4375em;
margin-top: 1.62em;
margin-left: 1em;
}
/* success */
i.ji-success:after {
background: #ff6600;
width: 0.4375em;
height: 0.8125em;
margin-left: -0.9375em;
margin-top: 1.1875em;
transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
i.ji-success:before {
background: #ff6600;
width: 0.4375em;
height: 1.625em;
margin-top: 0.4375em;
margin-left: 1.1875em;
transform: rotate(35deg);
-ms-transform: rotate(35deg);
-webkit-transform: rotate(35deg);
}
/* error */
i.ji-error:after, i.ji-error:before {
width: 0.4375em;
height: 1.8125em;
margin-left: 1.0625em;
margin-top: -1.8125em;
transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
background: #ff6600;
}
i.ji-error:before {
margin-top: 0.375em;
transform: rotate(225deg);
-ms-transform: rotate(225deg);
-webkit-transform: rotate(225deg);
}
/* info circled */
i.ji-infocircled:after {
background: transparent;
width: 0.25em;
height: 0.125em;
margin-left: 1.125em;
margin-top: -1.3125em;
border-top: 0.25em solid #fff;
border-bottom: 0.5625em solid #fff;
border-radius: 0.0625em;
}
i.ji-infocircled:before {
background: #ff6600;
width: 1.625em;
height: 1.625em;
margin-top: 0.4375em;
margin-left: 0.4375em;
border-radius: 100%;
}
/* warning circled */
i.ji-warningcircled:after {
background: transparent;
width: 0.25em;
height: 0.125em;
margin-left: 1.125em;
margin-top: -1.25em;
border-bottom: 0.25em solid #fff;
border-top: 0.5625em solid #fff;
border-radius: 0.0625em;
z-index: 1;
position: relative;
}
i.ji-warningcircled:before {
background: #ff6600;
width: 1.625em;
height: 1.625em;
margin-top: 0.4375em;
margin-left: 0.4375em;
border-radius: 100%;
}
/* success circled */
i.ji-successcircled:after {
background: transparent;
width: 0.625em;
height: 0.375em;
margin-left: 0.8125em;
margin-top: -1.1875em;
border-left: 0.25em solid #fff;
border-bottom: 0.25em solid #fff;
border-radius: 0.0625em;
transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
}
i.ji-successcircled:before {
background: #ff6600;
width: 1.625em;
height: 1.625em;
margin-top: 0.4375em;
margin-left: 0.4375em;
border-radius: 100%;
}
/* error circled */
i.ji-errorcircled:after {
background: transparent;
width: 0.625em;
height: 0.375em;
margin-left: 0.41em;
margin-top: -0.66em;
border-radius: 0.0625em;
content: "+";
color: #fff;
font-weight: bold;
line-height: 0.4em;
font-size: 1.8em;
transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
text-indent: -0.0625em;
}
i.ji-errorcircled:before {
background: #ff6600;
width: 1.625em;
height: 1.625em;
margin-top: 0.4375em;
margin-left: 0.4375em;
border-radius: 100%;
}
/*************** Battery ***************/
/* battery 0 */
i.ji-battery0:before, i.ji-battery25:before, i.ji-battery50:before , i.ji-battery75:before, i.ji-battery100:before {
width: 1.1875em;
height: 0.5625em;
margin-top: 0.8125em;
margin-left: 0.4375em;
border: 0.1875em solid #ff6600;
}
i.ji-battery0:after, i.ji-battery25:after, i.ji-battery50:after, i.ji-battery75:after, i.ji-battery100:after {
width: 1.25em;
height: 0.4375em;
margin-top: -0.6875em;
margin-left: 0.6875em;
border-radius: 0 0.125em 0.125em 0;
border-left: 0 solid #ff6600;
border-right: 0.1875em solid #ff6600;
}
/* battery 25 */
i.ji-battery25:after {
width: 1em;
border-left: 0.25em solid #ff6600;
}
/* battery 50 */
i.ji-battery50:after {
width: 0.75em;
border-left: 0.5em solid #ff6600;
}
/* battery 75 */
i.ji-battery75:after {
width: 0.5em;
border-left: 0.75em solid #ff6600;
}
/* battery 100 */
i.ji-battery100:after {
width: 0.1875em;
border-left: 1.0625em solid #ff6600;
}
/* battery 0/4 */
i.ji-battery-0-4:before, i.ji-battery-1-4:before, i.ji-battery-2-4:before , i.ji-battery-3-4:before, i.ji-battery-4-4:before {
width: 1.1875em;
height: 0.5625em;
margin-top: 0.8125em;
margin-left: 0.4375em;
border: 0.1875em solid #ff6600;
}
i.ji-battery-0-4:after, i.ji-battery-1-4:after, i.ji-battery-2-4:after, i.ji-battery-3-4:after, i.ji-battery-4-4:after {
width: 1.375em;
height: 0.5625em;
margin-top: -0.75em;
margin-left: 0.625em;
border-radius: 0 0.125em 0.125em 0;
border-left: 0 solid #ff6600;
border-right: 0.1875em solid #ff6600;
}
/* battery 1/4 */
i.ji-battery-1-4:after {
width: 1.0625em;
border-left: 0.3125em solid #ff6600;
}
/* battery 2/4 */
i.ji-battery-2-4:after {
width: 0.75em;
border-left: 0.625em solid #ff6600;
}
/* battery 3/4 */
i.ji-battery-3-4:after {
width: 0.5em;
border-left: 0.875em solid #ff6600;
}
/* battery 4/4 */
i.ji-battery-4-4:after {
width: 0.1875em;
border-left: 1.1875em solid #ff6600;
}
/*************** Miscelanea ***************/
/* magnet */
i.ji-magnet:before {
width: 0.625em;
height: 0.6875em;
margin-top: 0.875em;
margin-left: 0.4375em;
border: 0.5em solid #ff6600;
border-radius: 0 0 100% 100%;
border-top: 0 solid transparent;
}
i.ji-magnet:after {
margin-top: -1.625em;
margin-left: 0.4375em;
border-left: 0.5em solid #ff6600;
width: 0.625em;
height: 0.375em;
border-right: 0.5em solid #ff6600;
border-radius: 0.05em;
}
/* reload */
i.ji-reload:before {
width: 0.9375em;
height: 0.9375em;
margin-top: 0.75em;
margin-left: 0.5625em;
border: 0.25em solid #ff6600;
border-radius: 100%;
border-left-color: transparent;
}
i.ji-reload:after {
margin-top: -1.5em;
border: 0.5em solid transparent;
border-right: 0.6875em solid #ff6600;
transform: rotate(-24deg);
border-radius: 0.3125em;
}
/* banned */
i.ji-banned:before {
width: 1em;
height: 1em;
margin-top: 0.4375em;
margin-left: 0.4375em;
border: 0.3125em solid #ff6600;
border-radius: 100%;
}
i.ji-banned:after {
margin-top: -1.5625em;
border-left: 0.3125em solid #ff6600;
transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
border-radius: 0.3125em;
margin-left: 1.08em;
height: 1.5em;
width: 0;
}
/* pill */
i.ji-pill:before {
width: 0.5em;
height: 1.25em;
margin-top: 0.375em;
margin-left: 0.75em;
border: 0.25em solid #ff6600;
border-radius: 0.625em;
background: linear-gradient(to top, #ff6600 0, #ff6600 50%, transparent 50%, transparent 100%);
}
/* pill tablet */
i.ji-pilltablet:before {
margin-top: 0.4375em;
margin-left: 0.4375em;
background: linear-gradient(to right, #ff6600 0%, #ff6600 47%, transparent 47%, transparent 53%, #ff6600 53%, #ff6600 100%);
border-radius: 100%;
transform: rotate(-45deg);
width: 1.625em;
height: 1.625em;
}
/* child */
i.ji-child:after {
margin-top: -1.5125em;
margin-left: 0.6125em;
border-right: 0.2em solid #ff6600;
border-bottom: 0.2em solid #ff6600;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
width: 0.6875em;
height: 0.6875em;
content: "●";
color: #ff6600;
font-size: 1.2em;
line-height: 0.7em;
text-indent: 0.12em;
}
i.ji-child:before {
width: 0.0625em;
height: 0.5em;
margin-top: 1em;
margin-left: 1em;
border: 0.25em solid #ff6600;
border-top-width: 0.5625em;
border-bottom-width: 0;
}
/* cup */
i.ji-cup:after {
margin-top: -1.3125em;
margin-left: 1.4375em;
border: 0.25em solid #ff6600;
border-left-color: transparent;
width: 0.25em;
height: 0.5em;
border-radius: 0.3125em;
border-right-width: 0.1875em;
}
i.ji-cup:before {
width: 0.625em;
height: 0.75em;
margin-top: 0.4375em;
margin-left: 0.5em;
border: 0.3125em solid #ff6600;
background: #ff6600;
border-top-width: 0.4375em;
border-bottom-width: 0.4375em;
}
/* beer */
i.ji-beer:after {
margin-top: -1.3125em;
margin-left: 1.4375em;
border: 0.25em solid #ff6600;
border-left-color: transparent;
width: 0.25em;
height: 0.5em;
border-radius: 0.3125em;
border-right-width: 0.1875em;
}
i.ji-beer:before {
width: 0.625em;
height: 0.75em;
margin-top: 0.4375em;
margin-left: 0.5em;
border: 0.3125em solid #ff6600;
background: #ff6600;
background: linear-gradient(to right, #ff6600 0, transparent 0, transparent 0.125em, #ff6600 0.125em, #ff6600 0.25em ,transparent 0.25em, transparent 0.375em, #ff6600 0.375em, #ff6600 0.5em, transparent 0.5em, transparent 0.625em, #ff6600 0.625em);
border-top-width: 0.4375em;
border-bottom-width: 0.4375em;
}
/* wifi */
i.ji-wifi:before {
width: 0.625em;
height: 1.5em;
margin-top: 0.5em;
border: 0.9375em double transparent;
border-top-color: #ff6600;
border-radius: 100%;
}
i.ji-wifi:after {
margin-left: -1.375em;
margin-top: 1.75em;
background: #ff6600;
width: 0.3125em;
height: 0.25em;
border-radius: 0.3125em;
}
/* clock */
i.ji-clock:before, i.ji-clockfilled:before {
width: 1.175em;
height: 1.175em;
margin-top: 0.5em;
margin-left: 0.5em;
border: 0.2em solid #ff6600;
border-radius: 100%;
}
i.ji-clock:after, i.ji-clockfilled:after {
margin-top: -1.3125em;
margin-left: 0.875em;
border-right: 0.15em solid #ff6600;
border-bottom: 0.15em solid #ff6600;
width: 0.375em;
height: 0.5em;
border-radius: 0;
}
/* clock filled */
i.ji-clockfilled:before {
background: #ff6600;
}
i.ji-clockfilled:after {
border-color: #fff;
}
/***** Specific Icons Styles - END *****/
/***** Options Icons Styles - START *****/
/* Border */
.ji-bd-base { border-color: #ff6600 !important; }
.ji-bd-baselight { border-color: #ffcaa6 !important; }
.ji-bd-basedark { border-color: #ca5100 !important }
.ji-bd-light { border-color: #e6e6e6 !important; }
.ji-bd-dark { border-color: #343434 !important }
/* Radius */
.ji-rd-xs { border-radius: 5% !important; }
.ji-rd-1 { border-radius: 10% !important; }
.ji-rd-2 { border-radius: 20% !important; }
.ji-rd-3 { border-radius: 30% !important; }
.ji-rd-4 { border-radius: 40% !important; }
.ji-rd-5 { border-radius: 100% !important; }
/* Background */
.ji-bg-dark { background: #343434!important; }
.ji-bg-semidark { background: #676767!important; }
.ji-bg-light { background: #e6e6e6 !important; }
.ji-bg-semilight { background: #999999 !important; }
.ji-bg-base { background: #ff6600 !important; }
.ji-bg-baselight { background: #ffcaa6 !important; }
.ji-bg-basedark { background: #ca5100 !important; }
/* bg-list-grid */
.ji-list.ji-bg-dark:after, .ji-grid.ji-bg-dark:after { border-color: #343434; }
.ji-list.ji-bg-semidark:after, .ji-grid.ji-bg-semidark:after { border-color: #676767; }
.ji-list.ji-bg-light:after, .ji-grid.ji-bg-light:after { border-color: #e6e6e6; }
.ji-list.ji-bg-semilight:after, .ji-grid.ji-bg-semilight:after { border-color: #999999; }
.ji-list.ji-bg-base:after, .ji-grid.ji-bg-base:after { border-color: #ff6600; }
.ji-list.ji-bg-baselight:after, .ji-grid.ji-bg-baselight:after { border-color: #ffcaa6; }
.ji-list.ji-bg-basedark:after, .ji-grid.ji-bg-basedark:after { border-color: #ca5100; }
/* bg-lock-unlock */
.ji-lock.ji-bg-dark:before, .ji-unlock.ji-bg-dark:before, .ji-instagram.ji-bg-dark:after { color: #343434; }
.ji-lock.ji-bg-semidark:before, .ji-unlock.ji-bg-semidark:before, .ji-instagram.ji-bg-semidark:after { color: #676767; }
.ji-lock.ji-bg-light:before, .ji-unlock.ji-bg-light:before, .ji-instagram.ji-bg-light:after { color: #e6e6e6; }
.ji-lock.ji-bg-semilight:before, .ji-unlock.ji-bg-semilight:before, .ji-instagram.ji-bg-semilight:after { color: #999999; }
.ji-lock.ji-bg-base:before, .ji-unlock.ji-bg-base:before, .ji-instagram.ji-bg-base:after { color: #ff6600; }
.ji-lock.ji-bg-baselight:before, .ji-unlock.ji-bg-baselight:before, .ji-instagram.ji-bg-baselight:after { color: #ffcaa6; }
.ji-lock.ji-bg-basedark:before, .ji-unlock.ji-bg-basedark:before, .ji-instagram.ji-bg-basedark:after { color: #ca5100; }
/* bg-social */
.ji-youtube.ji-bg-dark:after, .ji-player.ji-bg-dark:before { border-left-color: #343434; }
.ji-youtube.ji-bg-semidark:after, .ji-player.ji-bg-semidark:before { border-left-color: #676767; }
.ji-youtube.ji-bg-light:after, .ji-player.ji-bg-light:before { border-left-color: #e6e6e6; }
.ji-youtube.ji-bg-semilight:after, .ji-player.ji-bg-semilight:before { border-left-color: #999999; }
.ji-youtube.ji-bg-base:after, .ji-player.ji-bg-base:before { border-left-color: #ff6600; }
.ji-youtube.ji-bg-baselight:after, .ji-player.ji-bg-baselight:before { border-left-color: #ffcaa6; }
.ji-youtube.ji-bg-basedark:after, .ji-player.ji-bg-basedark:before { border-left-color: #ca5100; }
/* bg-image */
.ji-image.ji-bg-dark:before { color: #343434; border-bottom-color: #343434;}
.ji-image.ji-bg-semidark:before { color: #676767; border-bottom-color: #676767;}
.ji-image.ji-bg-light:before { color: #e6e6e6; border-bottom-color: #e6e6e6;}
.ji-image.ji-bg-semilight:before { color: #999999; border-bottom-color: #999999;}
.ji-image.ji-bg-base:before { color: #ff6600; border-bottom-color: #ff6600;}
.ji-image.ji-bg-baselight:before { color: #ffcaa6; border-bottom-color: #ffcaa6;}
.ji-image.ji-bg-basedark:before { color: #ca5100; border-bottom-color: #ca5100;}
/* bg-photo */
.ji-photo.ji-bg-dark:before { border-color: #343434;}
.ji-photo.ji-bg-dark:after { color: #343434;}
.ji-photo.ji-bg-semidark:before { border-color: #676767;}
.ji-photo.ji-bg-semidark:after { color: #676767;}
.ji-photo.ji-bg-light:before { border-color: #e6e6e6;}
.ji-photo.ji-bg-light:after { color: #e6e6e6;}
.ji-photo.ji-bg-semilight:before { border-color: #999999;}
.ji-photo.ji-bg-semilight:after { color: #999999;}
.ji-photo.ji-bg-base:before { border-color: #ff6600;}
.ji-photo.ji-bg-base:after { color: #ff6600;}
.ji-photo.ji-bg-baselight:before { border-color: #ffcaa6;}
.ji-photo.ji-bg-baselight:after { color: #ffcaa6;}
.ji-photo.ji-bg-basedark:before { border-color: #ca5100;}
.ji-photo.ji-bg-basedark:after { color: #ca5100;}
/* bg-micro */
.ji-micro.ji-bg-dark:after { border-right-color: #343434; border-left-color: #343434; }
.ji-micro.ji-bg-semidark:after { border-right-color: #676767; border-left-color: #676767; }
.ji-micro.ji-bg-light:after { border-right-color: #e6e6e6; border-left-color: #e6e6e6; }
.ji-micro.ji-bg-semilight:after { border-right-color: #999999; border-left-color: #999999; }
.ji-micro.ji-bg-base:after { border-right-color: #ff6600; border-left-color: #ff6600; }
.ji-micro.ji-bg-baselight:after { border-right-color: #ffcaa6; border-left-color: #ffcaa6; }
.ji-micro.ji-bg-basedark:after { border-right-color: #ca5100; border-left-color: #ca5100; }
/* bg-mute */
.ji-mute.ji-bg-dark:after { color: #343434; }
.ji-mute.ji-bg-semidark:after { color: #676767; }
.ji-mute.ji-bg-light:after { color: #e6e6e6; }
.ji-mute.ji-bg-semilight:after { color: #999999; }
.ji-mute.ji-bg-base:after { color: #ff6600; }
.ji-mute.ji-bg-baselight:after { color: #ffcaa6; }
.ji-mute.ji-bg-basedark:after { color: #ca5100; }
/* bg-clocks */
.ji-clockfilled.ji-bg-dark:after { border-color: #343434; }
.ji-clockfilled.ji-bg-semidark:after { border-color: #676767; }
.ji-clockfilled.ji-bg-light:after { border-color: #e6e6e6; }
.ji-clockfilled.ji-bg-semilight:after { border-color: #999999; }
.ji-clockfilled.ji-bg-base:after { border-color: #ff6600; }
.ji-clockfilled.ji-bg-baselight:after { border-color: #ffcaa6; }
.ji-clockfilled.ji-bg-basedark:after { border-color: #ca5100; }
/* bg-devices */
.ji-mp3.ji-bg-dark:after { border-color: #343434; }
.ji-mp3.ji-bg-semidark:after { border-color: #676767; }
.ji-mp3.ji-bg-light:after { border-color: #e6e6e6; }
.ji-mp3.ji-bg-semilight:after { border-color: #999999; }
.ji-mp3.ji-bg-base:after { border-color: #ff6600; }
.ji-mp3.ji-bg-baselight:after { border-color: #ffcaa6; }
.ji-mp3.ji-bg-basedark:after { border-color: #ca5100; }
/* bg-info */
.ji-infocircled.ji-bg-dark:after, i.ji-warningcircled.ji-bg-dark:after, i.ji-successcircled.ji-bg-dark:after, i.ji-errorcircled.ji-bg-dark:after { border-color: #343434; color: #343434; }
.ji-infocircled.ji-bg-semidark:after, i.ji-warningcircled.ji-bg-semidark:after, i.ji-successcircled.ji-bg-semidark:after, i.ji-errorcircled.ji-bg-semidark:after { border-color: #676767; color: #676767; }
.ji-infocircled.ji-bg-light:after, i.ji-warningcircled.ji-bg-light:after, i.ji-successcircled.ji-bg-light:after, i.ji-errorcircled.ji-bg-light:after { border-color: #e6e6e6; color: #e6e6e6; }
.ji-infocircled.ji-bg-semilight:after, i.ji-warningcircled.ji-bg-semilight:after, i.ji-successcircled.ji-bg-semilight:after, i.ji-errorcircled.ji-bg-semilight:after { border-color: #999999; color: #999999; }
.ji-infocircled.ji-bg-base:after, i.ji-warningcircled.ji-bg-base:after, i.ji-successcircled.ji-bg-base:after, i.ji-errorcircled.ji-bg-base:after { border-color: #ff6600; color: #ff6600; }
.ji-infocircled.ji-bg-baselight:after, i.ji-warningcircled.ji-bg-baselight:after, i.ji-successcircled.ji-bg-baselight:after, i.ji-errorcircled.ji-bg-baselight:after { border-color: #ffcaa6; color: #ffcaa6; }
.ji-infocircled.ji-bg-basedark:after, i.ji-warningcircled.ji-bg-basedark:after, i.ji-successcircled.ji-bg-basedark:after, i.ji-errorcircled.ji-bg-basedark:after { border-color: #ca5100; color: #ca5100; }
/* bg-files */
.ji-file.ji-bg-dark:after, .ji-filetext.ji-bg-dark:after , .ji-filedouble.ji-bg-dark:after { box-shadow: 0.0625em 0.0625em 0 0 #343434; }
.ji-file.ji-bg-semidark:after, .ji-filetext.ji-bg-semidark:after, .ji-filedouble.ji-bg-semidark:after { box-shadow: 0.0625em 0.0625em 0 0 #676767; }
.ji-file.ji-bg-light:after, .ji-filetext.ji-bg-light:after , .ji-filedouble.ji-bg-light:after { box-shadow: 0.0625em 0.0625em 0 0 #e6e6e6; }
.ji-file.ji-bg-semilight:after, .ji-filetext.ji-bg-semilight:after , .ji-filedouble.ji-bg-semilight:after { box-shadow: 0.0625em 0.0625em 0 0 #999999; }
.ji-file.ji-bg-base:after, .ji-filetext.ji-bg-base:after , .ji-filedouble.ji-bg-base:after { box-shadow: 0.0625em 0.0625em 0 0 #ff6600; }
.ji-file.ji-bg-baselight:after, .ji-filetext.ji-bg-baselight:after , .ji-filedouble.ji-bg-baselight:after { box-shadow: 0.0625em 0.0625em 0 0 #ffcaa6; }
.ji-file.ji-bg-basedark:after, .ji-filetext.ji-bg-basedark:after , .ji-filedouble.ji-bg-basedark:after { box-shadow: 0.0625em 0.0625em 0 0 #ca5100; }
.ji-filenew.ji-bg-dark:before, .ji-foldernew.ji-bg-dark:after { color: #343434; }
.ji-filenew.ji-bg-semidark:before, .ji-foldernew.ji-bg-semidark:after { color: #676767; }
.ji-filenew.ji-bg-light:before, .ji-foldernew.ji-bg-light:after { color: #e6e6e6; }
.ji-filenew.ji-bg-semilight:before, .ji-foldernew.ji-bg-semilight:after { color: #999999; }
.ji-filenew.ji-bg-base:before, .ji-foldernew.ji-bg-base:after { color: #ff6600; }
.ji-filenew.ji-bg-baselight:before, .ji-foldernew.ji-bg-baselight:after { color: #ffcaa6; }
.ji-filenew.ji-bg-basedark:before, .ji-foldernew.ji-bg-basedark:after { color: #ca5100; }
.ji-filedouble.ji-bg-dark:before, .ji-folderopen.ji-bg-dark:after { border-color: #343434; }
.ji-filedouble.ji-bg-semidark:before, .ji-folderopen.ji-bg-semidark:after { border-color: #676767; }
.ji-filedouble.ji-bg-light:before, .ji-folderopen.ji-bg-light:after { border-color: #e6e6e6; }
.ji-filedouble.ji-bg-semilight:before, .ji-folderopen.ji-bg-semilight:after { border-color: #999999; }
.ji-filedouble.ji-bg-base:before, .ji-folderopen.ji-bg-base:after { border-color: #ff6600; }
.ji-filedouble.ji-bg-baselight:before, .ji-folderopen.ji-bg-baselight:after { border-color: #ffcaa6; }
.ji-filedouble.ji-bg-basedark:before, .ji-folderopen.ji-bg-basedark:after { border-color: #ca5100; }
/* colors */
.ji-cl-gray { filter: grayscale(100%) opacity(40%); }
.ji-cl-base { filter: hue-rotate(0deg); }
.ji-cl-brown { filter: hue-rotate(30deg); }
.ji-cl-olive { filter: hue-rotate(50deg); }
.ji-cl-green { filter: hue-rotate(100deg); }
.ji-cl-bluegreen { filter: hue-rotate(140deg); }
.ji-cl-bluegray { filter: hue-rotate(160deg); }
.ji-cl-blue { filter: hue-rotate(200deg); }
.ji-cl-purple { filter: hue-rotate(230deg); }
.ji-cl-violet { filter: hue-rotate(250deg); }
.ji-cl-pink { filter: hue-rotate(290deg); }
.ji-cl-red { filter: hue-rotate(330deg); }
.ji-cl-white:before, .ji-cl-white:after { filter: grayscale(100%) brightness(200%); }
/* size */
.ji-sz-xxs { font-size: 0.5em !important; }
.ji-sz-xs { font-size: 0.75em !important; }
.ji-sz-2 { font-size: 2em !important; }
.ji-sz-3 { font-size: 3em !important; }
.ji-sz-4 { font-size: 4em !important; }
.ji-sz-5 { font-size: 5em !important; }
/***** Options Icons Styles - END *****/
/****************************** ICONS - END ******************************/
/************ ICONS STYLES END *************/
/*
Los iconos no necesitan javascript.
El siguiente codigo solo se usa para aplicar las opciones a los iconos en esta demo (incluye jquery).
*/
$(function() {
/*copy class*/
$( ".ji-name" ).each(function() {
$(this).click(function() {
var x = $(this).text();
console.log(x);
$('input#hidden-copy-field').val(x);
$('input#hidden-copy-field').select();
document.execCommand("copy");
$("#copied-text code").text(x);
$("#copied-text").show().fadeOut(2000);
});
});
/*options*/
$( ".cat-menu-icons ul li a" ).each(function(e) {
$(this).click(function(e) {
if($(this).hasClass('hidden-filter')!=true){
e.preventDefault();
}
var x = $(this).attr('id');
if(x=="all-icons"){
e.preventDefault();
$( "#iconos .cat-menu-icons ul li a" ).removeClass('hidden-filter');
$( "#iconos .icon-list, .list-header" ).slideDown('slow');
} else if(x=="none-icons"){
e.preventDefault();
$( "#iconos .cat-menu-icons ul li a" ).addClass('hidden-filter');
$( "#iconos .icon-list, .list-header" ).slideUp('slow');
} else {
$(this).toggleClass('hidden-filter');
$("#iconos ."+x+"").slideToggle( "slow" );
$("#iconos ."+x+" > .list-header").slideToggle( "slow" );
return true;
}
});
});
/*filters*/
$(".options-filter-opener").click(function() {
$(this).toggleClass('hidden');
$('#iconos').toggleClass('hidden');
$('.options-filters').slideToggle('slow');
});
/*size*/
$(".option-sz ul li").click(function() {
$(".option-sz ul li").removeClass('selectedSize');
$(this).addClass('selectedSize');
$('#iconos i').removeClass(function (index, className) {
return (className.match (/(^|\s)ji-sz-\S+/g) || []).join(' ');
});
$('#iconos i').addClass($(this).attr('id').replace('opt-','ji-'));
});
/*background*/
$(".option-bg ul li").click(function() {
$('#iconos i').removeClass(function (index, className) {
return (className.match (/(^|\s)ji-bg-\S+/g) || []).join(' ');
});
if($(this).attr('id')){
$('#iconos i').addClass($(this).attr('id').replace('opt-','ji-'));
if($(this).attr('id')=="opt-bg-base")$('#iconos i').addClass('ji-cl-white');
}
});
/*border*/
$(".option-bd ul li").click(function() {
$('#iconos i').removeClass(function (index, className) {
return (className.match (/(^|\s)ji-bd-\S+/g) || []).join(' ');
});
if($(this).attr('id')){
$('#iconos i').addClass($(this).attr('id').replace('opt-','ji-'));
//if($(this).attr('id')=="opt-bg-base")$('#iconos i').addClass('ji-cl-white');
}
});
/*rounded*/
$(".option-rd ul li").click(function() {
$('#iconos i').removeClass(function (index, className) {
return (className.match (/(^|\s)ji-rd-\S+/g) || []).join(' ');
});
if($(this).attr('id')){
$('#iconos i').addClass($(this).attr('id').replace('opt-','ji-'));
//if($(this).attr('id')=="opt-bg-base")$('#iconos i').addClass('ji-cl-white');
}
});
/*color*/
$(".option-cl ul li").click(function() {
$('#iconos i').removeClass(function (index, className) {
return (className.match (/(^|\s)ji-cl-\S+/g) || []).join(' ');
});
if($(this).attr('id')){
$('#iconos i').addClass($(this).attr('id').replace('opt-','ji-'));
$('#iconos i').removeClass('ji-bg-base');
if($(this).attr('id')=="opt-cl-white"){
var x = $('#iconos i').eq(0).attr('class');
if(x.indexOf('ji-bg-')==-1){
$('#iconos i').addClass('ji-bg-base');
}
}
} else {
$('#iconos i').removeClass('ji-bg-base');
}
});
/*scroll*/
$(window).scroll(function(){
if($(this).scrollTop()>65){
$('.options-filters, .options-filter-opener').addClass('fixed');
$('#iconos').addClass('xtra-space');
} else {
$('.options-filters, .options-filter-opener').removeClass('fixed');
$('#iconos').removeClass('xtra-space');
}
});
$('#opt-sz-2').click();
});
Also see: Tab Triggers