Fully end to end encrypted anonymous chat program. Server only stores public key lookup for users and the encrypted messages. No credentials are transfered to the server, but kept in local browser storage. This allows 100% safe chatting.
https://safechat.ch
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
295 lines
7.6 KiB
295 lines
7.6 KiB
10 years ago
|
/*
|
||
|
|
* 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%
|
||
|
|
);
|
||
|
|
}
|