This repository has been archived on 2022-11-26. You can view files and clone it, but cannot push or open issues or pull requests.
teemant-old/public/main.styl

248 lines
8.6 KiB
Stylus
Raw Normal View History

2016-09-22 15:41:37 +00:00
// Run `stylus -w main.styl -o css` to compile
body
margin: 0
padding: 0
font-family: Open Sans, Everson Mono, Helvetica
2016-09-22 17:15:40 +00:00
.grade1
font-size: 200%
margin-bottom: 0
margin-top: 0
display: block
color: #00BCD4
text-align: center
.grade2
font-size: 150%
margin-bottom: 0
margin-top: 20px
display: block
color: #00BCD4
text-align: center
.grade3
font-size: 120%
margin-bottom: 0
margin-top: 20px
display: block
color: #00BCD4
text-align: center
.ircclient
position: absolute
width: 100%
height: 100%
background: rgb(255,255,255)
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(229,229,229,1) 100%)
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%)
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%)
.coverwindow
position: absolute
width: 100%
height: 100%
.wrapper
width: 320px
margin: auto
margin-top: 5%
padding: 15px
background-color: #f7f7f7;
border: 1px solid #dadada;
box-shadow: 4px 4px 18px #d6d6d6;
.msg.error
color: red;
label
display: block
font-size: 80%
margin-top: 5px
color: #2196F3
input[type=text], input[type=number]
padding: 8px;
width: 300px;
border-radius: 5px;
border: 1px solid #d2d2d2;
box-shadow: inset 2px 2px 4px #dcdcdc;
input[type="submit"]
width: 318px;
padding: 12px;
margin-top: 20px;
display: block;
background: rgb(135,224,253);
background: -moz-linear-gradient(top, rgba(135,224,253,1) 0%, rgba(83,203,241,1) 40%, rgba(5,171,224,1) 100%);
background: -webkit-linear-gradient(top, rgba(135,224,253,1) 0%,rgba(83,203,241,1) 40%,rgba(5,171,224,1) 100%);
background: linear-gradient(to bottom, rgba(135,224,253,1) 0%,rgba(83,203,241,1) 40%,rgba(5,171,224,1) 100%);
border: 1px solid #2196F3;
border-radius: 4px;
color: #fff;
font-size: 120%;
font-weight: bold;
text-transform: uppercase;
cursor: pointer
&:hover
background: rgb(196,239,252);
background: -moz-linear-gradient(top, rgba(196,239,252,1) 0%, rgba(127,213,239,1) 40%, rgba(57,183,221,1) 100%);
background: -webkit-linear-gradient(top, rgba(196,239,252,1) 0%,rgba(127,213,239,1) 40%,rgba(57,183,221,1) 100%);
background: linear-gradient(to bottom, rgba(196,239,252,1) 0%,rgba(127,213,239,1) 40%,rgba(57,183,221,1) 100%);
2016-09-23 07:38:47 +00:00
#chat
.ircwrapper
position: absolute
width: 100%
height: 100%
.toolbar
height: 56px
background-color: #00c7e0
position: relative
z-index: 10
box-shadow: 2px 2px 4px #cecece
.logo
width: 56px;
height: 56px;
display: inline-block;
margin: 0 5px;
.tabby
display: inline-block;
height: 56px;
position: absolute;
left: 60px;
right: 0;
.tab
display: inline-block;
min-width: 60px;
height: 25px;
margin: 5px;
margin-right: 0;
padding: 10px;
line-height: 25px;
background-color: #29e1ff;
border-radius: 5px;
border: 1px solid #00d0ea;
box-shadow: inset 4px 4px 8px #44ebff;
color: #fff;
cursor: pointer;
font-weight: 600;
2016-09-23 09:47:12 +00:00
#unread
display: inline-block;
min-width: 22px;
height: 22px;
background-color: #bf0000;
border: 1px solid #b00;
box-shadow: inset 2px 2px 3px #f00;
text-align: center;
font-size: 10px;
margin: 0 5px;
border-radius: 100%;
&.none
display: none;
2016-09-23 07:38:47 +00:00
#close
display: inline-block;
width: 12px;
text-align: center;
color: #ff3d3d;
float: right;
&:hover
background-color: #63e9ff;
box-shadow: inset 4px 4px 8px #86f2ff;
&.active
background-color: #00b9d8;
border: 1px solid #009aad;
box-shadow: inset 4px 4px 8px #009caf;
color: #ffffff;
&:hover
background-color: #00c7e8;
.chatarea
position: absolute;
top: 56px;
width: 100%;
bottom: 46px;
.topicbar
position: absolute;
top: 0;
height: 20px;
right: 0;
left: 0;
background-color: #fff;
border-bottom: 1px solid #ddd;
padding: 12px;
display: none;
.letterbox
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
2016-09-23 09:47:12 +00:00
overflow-y: auto;
white-space: pre-wrap;
word-wrap: break-word;
2016-09-23 07:38:47 +00:00
.nicklist
width: 280px;
position: absolute;
right: 0;
border-left: 1px solid #ddd;
padding: 10px;
top: 0;
bottom: 0;
display: none;
&.vnicks
.nicklist
display: block;
2016-09-23 09:47:12 +00:00
&.forceopen
display: block !important;
2016-09-23 07:38:47 +00:00
.letterbox
right: 301px;
.topicbar
right: 301px;
&.vtopic
.topicbar
display: block;
.letterbox
top: 45px;
.input
position: absolute;
bottom: 0;
height: 46px;
width: 100%;
background-color: #00c7e0;
.nickname
background-color: #00efef;
margin: 5px;
padding: 7px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
padding-right: 20px;
margin-right: 0;
width: 183px;
text-overflow: clip;
.inputwrapper
display: inline-block;
position: absolute;
margin: 5px 0;
left: 210px;
right: 46px;
top: 0;
input
width: 100%;
padding: 6px;
font-size: 120%;
border: 1px solid #929292;
border-left: 0;
box-shadow: inset 4px 4px 8px #d8d8d8;
2016-09-23 09:47:12 +00:00
.message.type_simple
.timestamp
margin-right: 5px;
color: #696969;
&:before
color: #607D8B;
content: "[";
&:after
color: #607D8B;
content: "]";
.sender
margin-right: 5px;
color: #3F51B5;
&:before
content: "<";
&:after
content: ">";