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.
249 lines
3.6 KiB
249 lines
3.6 KiB
9 years ago
|
* {
|
||
|
margin: 0;
|
||
|
padding: 0;
|
||
|
}
|
||
|
|
||
9 years ago
|
@media (min-resolution: 120dpi) {
|
||
|
html {
|
||
|
font-size: 120%;
|
||
|
}
|
||
|
}
|
||
|
|
||
9 years ago
|
p {
|
||
|
padding: .5em 0 1em 0;
|
||
|
}
|
||
|
|
||
|
form {
|
||
|
padding: .5em 0 1em 0;
|
||
|
display: flex;
|
||
|
flex-direction: row;
|
||
|
flex-wrap: nowrap;
|
||
|
}
|
||
|
|
||
9 years ago
|
ul li {
|
||
|
margin-left: 1em;
|
||
|
}
|
||
|
|
||
9 years ago
|
@media (max-width: 45em) {
|
||
|
form {
|
||
|
flex-direction: column;
|
||
|
flex-wrap: wrap;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
form > * {
|
||
|
flex-grow: 1;
|
||
|
}
|
||
|
form input[type="submit"] {
|
||
|
flex-grow: 0;
|
||
|
}
|
||
|
form input#msg {
|
||
|
flex-grow: 4;
|
||
|
}
|
||
|
|
||
9 years ago
|
.buttongroup {
|
||
|
flex-grow: 0;
|
||
|
display: flex;
|
||
|
flex-direction: row;
|
||
|
flex-wrap: nowrap;
|
||
|
}
|
||
|
.buttongroup .toolbutton {
|
||
|
flex-grow: 1;
|
||
9 years ago
|
flex-basis: 0;
|
||
|
text-align: center;
|
||
9 years ago
|
text-align: center;
|
||
9 years ago
|
cursor: pointer;
|
||
9 years ago
|
}
|
||
|
.toolbutton label img {
|
||
|
height: 1.5em;
|
||
|
}
|
||
|
.toolbutton input {
|
||
|
display:none;
|
||
|
}
|
||
9 years ago
|
.toolbutton.bad:first-line,
|
||
|
.toolbutton.good:first-line {
|
||
|
font-weight: bold;
|
||
|
}
|
||
|
.toolbutton.bad {
|
||
|
background-color: #f77;
|
||
|
border: 1px solid black;
|
||
|
}
|
||
|
.toolbutton.good {
|
||
|
background-color: #7f7;
|
||
|
border: 1px solid black;
|
||
|
}
|
||
9 years ago
|
|
||
9 years ago
|
table {
|
||
|
width: 100%;
|
||
|
}
|
||
|
tr {
|
||
|
display: flex;
|
||
|
align-items: stretch;
|
||
|
}
|
||
|
td:last-child {
|
||
|
flex:1; /* last td to fill remaining width */
|
||
|
}
|
||
|
|
||
9 years ago
|
.warning {
|
||
|
padding: 1em;
|
||
|
margin: 1em;
|
||
|
background-color: red;
|
||
|
color: yellow;
|
||
|
font-size: large;
|
||
|
border: 2px inset yellow;
|
||
|
}
|
||
|
|
||
9 years ago
|
#header {
|
||
|
position: fixed;
|
||
|
left: 0;
|
||
|
right: 0;
|
||
|
top: 0;
|
||
|
margin: 0;
|
||
|
padding: 0 1em 0 1em;
|
||
|
background-color: green;
|
||
|
color: white;
|
||
|
}
|
||
9 years ago
|
#header #togglemenu {
|
||
|
display: inline;
|
||
|
float: right;
|
||
|
}
|
||
9 years ago
|
#header h1 {
|
||
|
font-weight: bold;
|
||
|
font-size: 100%;
|
||
9 years ago
|
display: inline;
|
||
9 years ago
|
}
|
||
|
|
||
9 years ago
|
#status {
|
||
9 years ago
|
position: fixed;
|
||
9 years ago
|
left: 0;
|
||
|
right: 0;
|
||
|
bottom: 0;
|
||
|
margin: 0;
|
||
|
padding: 0 1em 0 1em;
|
||
|
text-align: right;
|
||
|
}
|
||
9 years ago
|
@media (max-width: 45em) {
|
||
|
#username {
|
||
|
display: none;
|
||
9 years ago
|
}
|
||
|
}
|
||
9 years ago
|
#status.error {
|
||
9 years ago
|
background-color: red;
|
||
|
color: black;
|
||
9 years ago
|
}
|
||
|
#status.notice {
|
||
|
background-color: yellow;
|
||
9 years ago
|
color: black;
|
||
9 years ago
|
}
|
||
|
#status.success {
|
||
|
background-color: lightgreen;
|
||
9 years ago
|
color: black;
|
||
9 years ago
|
}
|
||
9 years ago
|
|
||
9 years ago
|
#connectionstatus #good {
|
||
|
color: lightgreen;
|
||
|
}
|
||
|
#connectionstatus #bad {
|
||
|
color: red;
|
||
|
}
|
||
|
|
||
9 years ago
|
#menuicon {
|
||
|
cursor: pointer;
|
||
|
}
|
||
|
|
||
9 years ago
|
#menu {
|
||
|
clear: both;
|
||
|
padding: 2em 0em 1em 0em;
|
||
|
margin: 0 1em 0 1em;
|
||
|
float: right;
|
||
|
background-color: lightblue;
|
||
|
list-style-type: none;
|
||
|
border: 1px solid black;
|
||
|
}
|
||
9 years ago
|
#menu li {
|
||
|
margin-left: 0;
|
||
|
}
|
||
9 years ago
|
#menu a {
|
||
|
text-decoration: inherit;
|
||
|
color: inherit;
|
||
|
}
|
||
9 years ago
|
#menu li {
|
||
9 years ago
|
padding: 0 1em 0 1em;
|
||
9 years ago
|
}
|
||
|
#menu li, #menu li * {
|
||
9 years ago
|
cursor: pointer;
|
||
9 years ago
|
text-align: left;
|
||
9 years ago
|
}
|
||
|
#menu li + li {
|
||
|
border-top: 1px solid black;
|
||
|
margin-top: 0.5em;
|
||
|
padding-top: 0.5em;
|
||
|
}
|
||
|
|
||
9 years ago
|
#main {
|
||
9 years ago
|
padding: 2em 1em 2em 1em;
|
||
9 years ago
|
clear: both;
|
||
9 years ago
|
}
|
||
|
|
||
|
.clear {
|
||
|
clear: both;
|
||
|
}
|
||
|
#msgs .msg {
|
||
|
border: 1px solid black;
|
||
|
margin: 1ex;
|
||
|
border-radius: 2ex;
|
||
9 years ago
|
-moz-border-radius: 2ex;
|
||
|
-webkit-border-radius: 2ex;
|
||
|
display: block;
|
||
|
width: auto;
|
||
|
height: auto;
|
||
|
max-width: 60%;
|
||
9 years ago
|
}
|
||
|
#msgs .me {
|
||
|
float: left;
|
||
9 years ago
|
background-color: lightgray;
|
||
9 years ago
|
}
|
||
|
#msgs .other {
|
||
|
float: right;
|
||
9 years ago
|
background-color: lightyellow;
|
||
9 years ago
|
}
|
||
|
#msgs .msg .header {
|
||
9 years ago
|
border: 1px solid black;
|
||
|
border-radius: 2ex 2ex 0 0;
|
||
|
-moz-border-radius: 2ex 2ex 0 0;
|
||
|
-webkit-border-radius: 2ex 2ex 0 0;
|
||
|
/*border-radius: 2ex;
|
||
|
-moz-border-radius: 2ex;
|
||
|
-webkit-border-radius: 2ex;*/
|
||
9 years ago
|
margin-bottom: .25ex;
|
||
|
padding-bottom: .25ex;
|
||
|
position: relative;
|
||
|
height: 1em;
|
||
9 years ago
|
padding: .5ex 1ex .5ex 1ex;
|
||
|
}
|
||
|
#msgs .msg .header {
|
||
|
background-color: lightgreen;
|
||
9 years ago
|
}
|
||
|
#msgs .msg .header .date {
|
||
|
font-size: xx-small;
|
||
|
float: left;
|
||
9 years ago
|
padding: 0 1ex 0 0;
|
||
9 years ago
|
}
|
||
|
#msgs .msg .header .sender {
|
||
|
font-size: small;
|
||
|
float: right;
|
||
9 years ago
|
padding: 0 0 0 1ex;
|
||
9 years ago
|
}
|
||
|
#msgs .msg .text {
|
||
|
float: left;
|
||
9 years ago
|
padding: .5ex 1ex .5ex 1ex;
|
||
|
}
|
||
|
#msgs .msg img {
|
||
|
display: block;
|
||
|
width: 99%;
|
||
|
}
|
||
|
|
||
|
#preview img {
|
||
|
height: 4em;
|
||
9 years ago
|
}
|