copied files
This commit is contained in:
Marc Wäckerlin
295
html/stylesheets/jquery.cssemoticons.css
Normal file
295
html/stylesheets/jquery.cssemoticons.css
Normal file
@@ -0,0 +1,295 @@
|
||||
/*
|
||||
* 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%
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user