124 lines
4.0 KiB
CSS
124 lines
4.0 KiB
CSS
/* Sprite CSS */
|
|
.sprite-account{ background-position: 0 0; width: 32px; height: 40px; }
|
|
.sprite-buying{ background-position: 0 -90px; width: 40px; height: 40px; }
|
|
.sprite-calendar{ background-position: 0 -180px; width: 35px; height: 40px; }
|
|
.sprite-dashboard{ background-position: 0 -270px; width: 40px; height: 29px; }
|
|
.sprite-feed{ background-position: 0 -349px; width: 32px; height: 40px; }
|
|
.sprite-hr{ background-position: 0 -439px; width: 40px; height: 32px; }
|
|
.sprite-kb{ background-position: 0 -521px; width: 24px; height: 39px; }
|
|
.sprite-messages{ background-position: 0 -610px; width: 40px; height: 26px; }
|
|
.sprite-production{ background-position: 0 -686px; width: 40px; height: 33px; }
|
|
.sprite-project{ background-position: 0 -769px; width: 40px; height: 22px; }
|
|
.sprite-report{ background-position: 0 -841px; width: 29px; height: 40px; }
|
|
.sprite-selling{ background-position: 0 -931px; width: 34px; height: 40px; }
|
|
.sprite-setting{ background-position: 0 -1021px; width: 37px; height: 40px; }
|
|
.sprite-stock{ background-position: 0 -1111px; width: 34px; height: 39px; }
|
|
.sprite-support{ background-position: 0 -1200px; width: 40px; height: 40px; }
|
|
.sprite-todo{ background-position: 0 -1290px; width: 40px; height: 34px; }
|
|
.sprite-website{ background-position: 0 -1374px; width: 40px; height: 40px; }
|
|
|
|
.sprite-image { background-image: url("images/sprite-desktop.png"); }
|
|
|
|
|
|
.sprite-account{ margin-top: 8px; margin-left: 12px; }
|
|
.sprite-selling{ margin-top: 8px; margin-left: 12px; }
|
|
.sprite-stock{ margin-top: 8px; margin-left: 8px; }
|
|
.sprite-buying{ margin-top: 8px; margin-left: 8px; }
|
|
.sprite-support{ margin-top: 8px; margin-left: 8px; }
|
|
.sprite-hr{ margin-top: 12px; margin-left: 8px; }
|
|
.sprite-project{ margin-top: 16px; margin-left: 8px; }
|
|
.sprite-production{ margin-top: 10px; margin-left: 8px; }
|
|
.sprite-website{ margin-top: 8px; margin-left: 8px; }
|
|
.sprite-setting{ margin-top: 8px; margin-left: 8px; }
|
|
.sprite-dashboard{ margin-top: 14px; margin-left: 8px; }
|
|
.sprite-report{ margin-top: 8px; margin-left: 14px; }
|
|
|
|
.sprite-messages{ margin-top: 14px; margin-left: 8px; }
|
|
.sprite-todo{ margin-top: 10px; margin-left: 10px; }
|
|
.sprite-calendar{ margin-top: 8px; margin-left: 10px; }
|
|
.sprite-kb{ margin-top: 8px; margin-left: 16px; }
|
|
.sprite-feed{ margin-top: 8px; margin-left: 14px; }
|
|
|
|
.case-border {
|
|
border-radius: 10px;
|
|
width: 56px;
|
|
height: 56px;
|
|
border: 4px solid white;
|
|
box-shadow: 0 0 10px 1px black;
|
|
margin: auto;
|
|
}
|
|
|
|
.case-wrapper {
|
|
margin: 24px;
|
|
float: left;
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
|
|
.case-label {
|
|
color: white;
|
|
/*font-size: 12px;*/
|
|
padding-top: 10px;
|
|
text-align: center;
|
|
text-shadow: 1px 1px 5px #000, 3px 3px 5px #000;
|
|
}
|
|
|
|
/* Hover and click effects */
|
|
.case-border:hover, .circle:hover {
|
|
animation: hover-effect 0.1s;
|
|
-moz-animation: hover-effect 0.1s; /* Firefox */
|
|
-webkit-animation: hover-effect 0.05s; /* Safari and Chrome */
|
|
|
|
animation-timing-function:linear;
|
|
-moz-animation-timing-function:linear; /* Firefox */
|
|
-webkit-animation-timing-function:linear; /* Safari and Chrome */
|
|
box-shadow: 0 0 2px 0 black, 0 0 10px 1px white;
|
|
}
|
|
|
|
.case-border:active, .case-border:focus, .circle:active, .circle:focus {
|
|
box-shadow: 0 0 5px 2px black;
|
|
}
|
|
|
|
@keyframes hover-effect
|
|
{
|
|
from {box-shadow: 0 0 10px 1px black}
|
|
to {box-shadow: 0 0 2px 0 black, 0 0 10px 1px white;}
|
|
}
|
|
|
|
@-moz-keyframes hover-effect /* Firefox */
|
|
{
|
|
from {box-shadow: 0 0 10px 1px black}
|
|
to {box-shadow: 0 0 2px 0 black, 0 0 10px 1px white;}
|
|
}
|
|
|
|
@-webkit-keyframes hover-effect /* Safari and Chrome */
|
|
{
|
|
from {box-shadow: 0 0 10px 1px black}
|
|
to {box-shadow: 0 0 2px 0 black, 0 0 10px 1px white;}
|
|
}
|
|
|
|
.circle {
|
|
border-radius: 100%;
|
|
height: 15px;
|
|
min-width: 15px;
|
|
background: #B00D07;
|
|
padding: 3px;
|
|
z-index: 2;
|
|
float: right;
|
|
margin-top: -10px;
|
|
margin-right: 10px;
|
|
border: 2px solid white;
|
|
box-shadow: 0 0 10px 1px black;
|
|
}
|
|
|
|
.circle-text {
|
|
color: white;
|
|
font-size: 12px;
|
|
vertical-align: middle;
|
|
text-align: center;
|
|
display: inline-block;
|
|
margin-top: -2px;
|
|
text-shadow: 1px 1px 5px #000;
|
|
}
|
|
|