295 lines
7.6 KiB
CSS
295 lines
7.6 KiB
CSS
/*
|
|
* jQuery CSSEmoticons plugin 0.2.9
|
|
*
|
|
* Copyright (c) 2010 Steve Schwartz (JangoSteve)
|
|
*
|
|
* Dual licensed under the MIT and GPL licenses:
|
|
* http://www.opensource.org/licenses/mit-license.php
|
|
* http://www.gnu.org/licenses/gpl.html
|
|
*
|
|
* Date: Sun Oct 22 1:00:00 2010 -0500
|
|
*/
|
|
|
|
/* Basic styles for emoticons */
|
|
span.css-emoticon {
|
|
font-family: "Trebuchet MS"; /* seems to give the best and most consistent emoticon appearance */
|
|
font-size: 0.65em;
|
|
font-weight: bold;
|
|
color: #000000;
|
|
display: inline-block;
|
|
overflow: hidden;
|
|
vertical-align: middle;
|
|
transform: rotate(90deg);
|
|
-webkit-transform: rotate(90deg);
|
|
-moz-transform: rotate(90deg);
|
|
-o-transform: rotate(90deg);
|
|
width: 1.54em; /* note that this is a multiple of this span's font-size, not containing text font-size */
|
|
height: 1.54em; /* so, relative to containing text, width and height are 0.9 x 1.6 = 1.44em */
|
|
text-align: center;
|
|
padding: 0;
|
|
line-height: 1.34em;
|
|
-moz-border-radius: 1.54em;
|
|
-webkit-border-radius: 1.54em;
|
|
border-radius: 1.54em;
|
|
-moz-box-shadow: 1px -1px 2px rgba(0,0,0,0.5);
|
|
-webkit-box-shadow: 1px -1px 2px rgba(0,0,0,0.5);
|
|
box-shadow: 1px -1px 2px rgba(0,0,0,0.5);
|
|
border: 1px solid rgba(0,0,0,0.25);
|
|
background-color: #ffcc00;
|
|
background-image: -webkit-gradient(
|
|
linear,
|
|
right top,
|
|
left top,
|
|
color-stop(0.41, rgb(255,204,0)),
|
|
color-stop(0.56, rgb(255,221,85)),
|
|
color-stop(1, rgb(255,238,170))
|
|
);
|
|
background-image: -moz-linear-gradient(
|
|
center right,
|
|
rgb(255,204,0) 41%,
|
|
rgb(255,221,85) 56%,
|
|
rgb(255,238,170) 100%
|
|
);
|
|
-webkit-transition-property:color, background, transform;
|
|
-webkit-transition-duration: 1s, 1s;
|
|
-webkit-transition-timing-function: linear, ease-in;
|
|
}
|
|
|
|
/* Styles for two-character emoticons that need more letter-spacing for proportionality */
|
|
span.css-emoticon.spaced-emoticon {
|
|
padding-left: 0.2em;
|
|
width: 1.34em;
|
|
letter-spacing: 0.2em;
|
|
}
|
|
|
|
/* This is a dirty dirty hack, because webkit doesn't properly do the padding+width=total-width as it should
|
|
I think the width of the border may be throwing things off, because it's more noticable for small icons */
|
|
@media screen and (-webkit-min-device-pixel-ratio:0) {
|
|
span.css-emoticon.spaced-emoticon {
|
|
width: 1.4em;
|
|
}
|
|
}
|
|
|
|
/* Styles for emoticons that need to have smaller characters to fit inside the circle */
|
|
span.css-emoticon.small-emoticon {
|
|
font-size: 0.55em;
|
|
width: 1.82em;
|
|
height: 1.82em;
|
|
line-height: 1.72em;
|
|
-moz-border-radius: 1.82em;
|
|
-webkit-border-radius: 1.82em;
|
|
border-radius: 1.82em;
|
|
}
|
|
|
|
span.css-emoticon.small-emoticon.spaced-emoticon {
|
|
padding-left: 0;
|
|
width: 1.82em;
|
|
letter-spacing: 0.1em;
|
|
}
|
|
|
|
/* Styles for additional colors */
|
|
span.css-emoticon.red-emoticon {
|
|
background-color: #eb0542;
|
|
background-image: -webkit-gradient(
|
|
linear,
|
|
right top,
|
|
left top,
|
|
color-stop(0.41, rgb(235,5,66)),
|
|
color-stop(0.56, rgb(235,38,90)),
|
|
color-stop(1, rgb(250,55,110))
|
|
);
|
|
background-image: -moz-linear-gradient(
|
|
center right,
|
|
rgb(235,5,66) 41%,
|
|
rgb(235,38,90) 56%,
|
|
rgb(250,55,110) 100%
|
|
);
|
|
}
|
|
|
|
span.css-emoticon.pink-emoticon {
|
|
background-color: #ff8fd4;
|
|
background-image: -webkit-gradient(
|
|
linear,
|
|
right top,
|
|
left top,
|
|
color-stop(0.41, rgb(255,143,212)),
|
|
color-stop(0.56, rgb(255,153,216)),
|
|
color-stop(1, rgb(255,173,225))
|
|
);
|
|
background-image: -moz-linear-gradient(
|
|
center right,
|
|
rgb(255,143,212) 41%,
|
|
rgb(255,153,216) 56%,
|
|
rgb(255,173,225) 100%
|
|
);
|
|
}
|
|
|
|
/* styles for emoticons that need no rotation, like O_o */
|
|
span.css-emoticon.no-rotate {
|
|
transform: rotate(0deg);
|
|
-webkit-transform: rotate(0deg);
|
|
-moz-transform: rotate(0deg);
|
|
-o-transform: rotate(0deg);
|
|
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
|
|
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
|
|
box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
|
|
font-size: 0.45em;
|
|
width: 2.2em;
|
|
height: 2.2em;
|
|
line-height: 1.9em;
|
|
-moz-border-radius: 2.2em;
|
|
-webkit-border-radius: 2.2em;
|
|
border-radius: 2.2em;
|
|
background-image: -webkit-gradient(
|
|
linear,
|
|
right bottom,
|
|
right top,
|
|
color-stop(0.41, rgb(255,204,0)),
|
|
color-stop(0.56, rgb(255,221,85)),
|
|
color-stop(1, rgb(255,238,170))
|
|
);
|
|
background-image: -moz-linear-gradient(
|
|
center bottom,
|
|
rgb(255,204,0) 41%,
|
|
rgb(255,221,85) 56%,
|
|
rgb(255,238,170) 100%
|
|
);
|
|
}
|
|
|
|
span.css-emoticon.no-rotate.red-emoticon {
|
|
background-image: -webkit-gradient(
|
|
linear,
|
|
right bottom,
|
|
right top,
|
|
color-stop(0.41, rgb(235,5,66)),
|
|
color-stop(0.56, rgb(235,38,90)),
|
|
color-stop(1, rgb(250,55,110))
|
|
);
|
|
background-image: -moz-linear-gradient(
|
|
center bottom,
|
|
rgb(235,5,66) 41%,
|
|
rgb(235,38,90) 56%,
|
|
rgb(250,55,110) 100%
|
|
);
|
|
}
|
|
|
|
span.css-emoticon.no-rotate.pink-emoticon {
|
|
background-image: -webkit-gradient(
|
|
linear,
|
|
right bottom,
|
|
right top,
|
|
color-stop(0.41, rgb(255,143,212)),
|
|
color-stop(0.56, rgb(255,153,216)),
|
|
color-stop(1, rgb(255,173,225))
|
|
);
|
|
background-image: -moz-linear-gradient(
|
|
center bottom,
|
|
rgb(255,143,212) 41%,
|
|
rgb(255,153,216) 56%,
|
|
rgb(255,173,225) 100%
|
|
);
|
|
}
|
|
|
|
/* Styles for emoticons that need to be rotated counter-clockwise, like <3 */
|
|
span.css-emoticon.counter-rotated {
|
|
transform: rotate(-90deg);
|
|
-webkit-transform: rotate(-90deg);
|
|
-moz-transform: rotate(-90deg);
|
|
-o-transform: rotate(-90deg);
|
|
-moz-box-shadow: -1px 1px 2px rgba(0,0,0,0.5);
|
|
-webkit-box-shadow: -1px 1px 2px rgba(0,0,0,0.5);
|
|
box-shadow: -1px 1px 2px rgba(0,0,0,0.5);
|
|
background-image: -webkit-gradient(
|
|
linear,
|
|
left top,
|
|
right top,
|
|
color-stop(0.41, rgb(255,204,0)),
|
|
color-stop(0.56, rgb(255,221,85)),
|
|
color-stop(1, rgb(255,238,170))
|
|
);
|
|
background-image: -moz-linear-gradient(
|
|
center left,
|
|
rgb(255,204,0) 41%,
|
|
rgb(255,221,85) 56%,
|
|
rgb(255,238,170) 100%
|
|
);
|
|
}
|
|
|
|
span.css-emoticon.counter-rotated.red-emoticon {
|
|
background-image: -webkit-gradient(
|
|
linear,
|
|
left top,
|
|
right top,
|
|
color-stop(0.41, rgb(235,5,66)),
|
|
color-stop(0.56, rgb(235,38,90)),
|
|
color-stop(1, rgb(250,55,110))
|
|
);
|
|
background-image: -moz-linear-gradient(
|
|
center left,
|
|
rgb(235,5,66) 41%,
|
|
rgb(235,38,90) 56%,
|
|
rgb(250,55,110) 100%
|
|
);
|
|
}
|
|
|
|
span.css-emoticon.counter-rotated.pink-emoticon {
|
|
background-image: -webkit-gradient(
|
|
linear,
|
|
left top,
|
|
right top,
|
|
color-stop(0.41, rgb(255,143,212)),
|
|
color-stop(0.56, rgb(255,153,216)),
|
|
color-stop(1, rgb(255,173,225))
|
|
);
|
|
background-image: -moz-linear-gradient(
|
|
center left,
|
|
rgb(255,143,212) 41%,
|
|
rgb(255,153,216) 56%,
|
|
rgb(255,173,225) 100%
|
|
);
|
|
}
|
|
|
|
/* Styles for animated states */
|
|
span.css-emoticon.un-transformed-emoticon, span.css-emoticon.animated-emoticon:hover {
|
|
/* font-size: inherit;
|
|
font-weight: inherit;
|
|
vertical-align: inherit;
|
|
line-height: inherit;
|
|
font-family: inherit; */
|
|
letter-spacing: inherit;
|
|
color: inherit;
|
|
overflow: visible;
|
|
transform: rotate(0deg);
|
|
-webkit-transform: rotate(0deg);
|
|
-moz-transform: rotate(0deg);
|
|
-o-transform: rotate(0deg);
|
|
background: none;
|
|
background-image: none;
|
|
box-shadow: none;
|
|
-moz-box-shadow: none;
|
|
-webkit-box-shadow: none;
|
|
border-color: transparent;
|
|
}
|
|
|
|
span.css-emoticon.nintendo-controller {
|
|
font-size: .8em;
|
|
height: 1.2em;
|
|
line-height: 1em;
|
|
width: 2.7em;
|
|
vertical-align: bottom;
|
|
border-radius: 0;
|
|
-webkit-border-radius: 0;
|
|
-moz-border-radius: 0;
|
|
background: -webkit-gradient(
|
|
linear,
|
|
left bottom,
|
|
left top,
|
|
color-stop(0.09, rgb(116,121,140)),
|
|
color-stop(0.55, rgb(165,170,189))
|
|
);
|
|
background: -moz-linear-gradient(
|
|
center bottom,
|
|
rgb(116,121,140) 9%,
|
|
rgb(165,170,189) 55%
|
|
);
|
|
} |