Fontello icon font
This commit is contained in:
khlieng
parent
fb77c29fd9
commit
d8446d0b90
12 changed files with 117 additions and 18 deletions
54
client/src/css/fontello.css
vendored
Normal file
54
client/src/css/fontello.css
vendored
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
@font-face {
|
||||
font-family: 'fontello';
|
||||
src: url('../font/fontello.eot?73444496');
|
||||
src: url('../font/fontello.eot?73444496#iefix') format('embedded-opentype'),
|
||||
url('../font/fontello.woff?73444496') format('woff'),
|
||||
url('../font/fontello.ttf?73444496') format('truetype'),
|
||||
url('../font/fontello.svg?73444496#fontello') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
|
||||
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
|
||||
/*
|
||||
@media screen and (-webkit-min-device-pixel-ratio:0) {
|
||||
@font-face {
|
||||
font-family: 'fontello';
|
||||
src: url('../font/fontello.svg?73444496#fontello') format('svg');
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
[class^="icon-"]:before, [class*=" icon-"]:before {
|
||||
font-family: "fontello";
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
speak: none;
|
||||
|
||||
display: inline-block;
|
||||
text-decoration: inherit;
|
||||
width: 1em;
|
||||
margin-right: .2em;
|
||||
text-align: center;
|
||||
/* opacity: .8; */
|
||||
|
||||
/* For safety - reset parent styles, that can break glyph codes*/
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
|
||||
/* fix buttons height, for twitter bootstrap */
|
||||
line-height: 1em;
|
||||
|
||||
/* Animation center compensation - margins should be symmetric */
|
||||
/* remove if not needed */
|
||||
margin-left: .2em;
|
||||
|
||||
/* you can be more comfortable with increased icons size */
|
||||
/* font-size: 120%; */
|
||||
|
||||
/* Uncomment for 3D effect */
|
||||
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
|
||||
}
|
||||
|
||||
.icon-cog:before { content: '\e800'; } /* '' */
|
||||
.icon-ellipsis:before { content: '\e801'; } /* '' */
|
||||
302
client/src/css/style.css
Normal file
302
client/src/css/style.css
Normal file
|
|
@ -0,0 +1,302 @@
|
|||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Ubuntu Mono, monospace;
|
||||
background: #f0f0f0;
|
||||
}
|
||||
|
||||
input {
|
||||
font: 16px Ubuntu Mono, monospace;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
button {
|
||||
font: 16px Montserrat, sans-serif;
|
||||
border: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
i[class^="icon-"]:before, i[class*=" icon-"]:before {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.tablist {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 200px;
|
||||
overflow: auto;
|
||||
background: #222;
|
||||
color: #FFF;
|
||||
font-family: Montserrat, sans-serif;
|
||||
}
|
||||
|
||||
.tablist p {
|
||||
padding: 3px 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tablist p:hover {
|
||||
background: #111;
|
||||
}
|
||||
|
||||
.tablist p.selected {
|
||||
padding-left: 10px;
|
||||
border-left: 5px solid #6BB758;
|
||||
}
|
||||
|
||||
.tab-server {
|
||||
color: #AAA;
|
||||
margin-top: 15px !important;
|
||||
}
|
||||
|
||||
.button-connect {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background: #6BB758;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.button-connect:hover {
|
||||
background: #7BBF6A;
|
||||
}
|
||||
|
||||
.button-connect:active {
|
||||
background: #6BB758;
|
||||
}
|
||||
|
||||
.side-buttons {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
height: 50px;
|
||||
width: 200px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.side-buttons i {
|
||||
color: #999;
|
||||
margin: 5px;
|
||||
line-height: 40px;
|
||||
width: 40px;
|
||||
cursor: pointer;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.side-buttons i:hover {
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.connect {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 200px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.connect-form h1 {
|
||||
font: 32px Montserrat, sans-serif;
|
||||
margin-bottom: 15px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.connect-form input {
|
||||
display: block;
|
||||
margin: 5px 0px;
|
||||
padding: 10px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.connect-form input[type="submit"],
|
||||
.connect-form input[type="text"] {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.connect-form input[type="submit"] {
|
||||
height: 50px;
|
||||
font-family: Montserrat, sans-serif;
|
||||
background: #6BB758;
|
||||
color: #FFF;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.connect-form input[type="submit"]:hover {
|
||||
background: #7BBF6A;
|
||||
}
|
||||
|
||||
.connect-form input[type="submit"]:active {
|
||||
background: #6BB758;
|
||||
}
|
||||
|
||||
.connect-form input[type="checkbox"] {
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.connect-form i {
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
color: #999;
|
||||
padding: 10px 5px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.connect-form i:hover {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.connect-form label {
|
||||
display: inline-block;
|
||||
padding: 10px 0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.chat-title-bar {
|
||||
font-family: Montserrat, sans-serif;
|
||||
position: fixed;
|
||||
left: 200px;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 50px;
|
||||
padding: 0 15px;
|
||||
line-height: 50px;
|
||||
border-bottom: 1px solid #DDD;
|
||||
}
|
||||
|
||||
.chat-title-bar div {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 100px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.chat-title {
|
||||
margin-left: 15px;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.chat-topic {
|
||||
display: none;
|
||||
font: 16px Ubuntu Mono, monospace;
|
||||
line-height: 50px;
|
||||
vertical-align: top;
|
||||
color: #222;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.chat-usercount {
|
||||
font-size: 20px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.messagebox {
|
||||
position: fixed;
|
||||
left: 200px;
|
||||
top: 50px;
|
||||
bottom: 50px;
|
||||
right: 200px;
|
||||
/*padding: 15px;*/
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.messagebox > div {
|
||||
padding: 10px 15px;
|
||||
overflow: auto !important;
|
||||
}
|
||||
|
||||
.message {
|
||||
white-space: nowrap;
|
||||
/*margin-bottom: 5px;
|
||||
padding-left: 55px;
|
||||
text-indent: -55px;*/
|
||||
}
|
||||
|
||||
.message span {
|
||||
/*margin-right: 15px;*/
|
||||
}
|
||||
|
||||
.message-info {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.message-action {
|
||||
color: #FF6698;
|
||||
}
|
||||
|
||||
.message-time {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.message-sender {
|
||||
font-weight: 700;
|
||||
color: #6BB758;
|
||||
}
|
||||
|
||||
.message-input-wrap {
|
||||
position: fixed;
|
||||
left: 200px;
|
||||
bottom: 0px;
|
||||
right: 0;
|
||||
height: 50px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.message-input {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 15px;
|
||||
border-top: 1px solid #DDD;
|
||||
}
|
||||
|
||||
.userlist {
|
||||
position: fixed;
|
||||
top: 50px;
|
||||
bottom: 50px;
|
||||
right: 0;
|
||||
width: 200px;
|
||||
border-left: 1px solid #DDD;
|
||||
}
|
||||
|
||||
.userlist > div {
|
||||
padding: 10px 0px;
|
||||
}
|
||||
|
||||
.userlist p {
|
||||
padding: 0px 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.userlist p:hover {
|
||||
background: #DDD;
|
||||
}
|
||||
|
||||
.list {
|
||||
position: fixed;
|
||||
left: 200px;
|
||||
top: 0;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.list > div {
|
||||
overflow: auto !important;
|
||||
}
|
||||
|
||||
.list p:nth-child(even) {
|
||||
background: #AAA;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue