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

510 lines
16 KiB
Stylus
Raw Normal View History

2016-09-22 15:41:37 +00:00
// Run `stylus -w main.styl -o css` to compile
2016-09-25 18:48:35 +00:00
props(prop, args)
-webkit-{prop} args
-moz-{prop} args
-ms-{prop} args
-o-{prop} args
{prop} args
props2(prop, args)
-webkit-{prop} args
-moz-{prop} args
{prop} args
transition()
props('transition', arguments)
box-shadow()
props2('box-shadow', arguments)
2016-09-22 15:41:37 +00:00
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%
&#authdialog
z-index: 100
2016-09-22 17:15:40 +00:00
.wrapper
width: 320px
margin: auto
margin-top: 5%
padding: 15px
background-color: #f7f7f7;
border: 1px solid #dadada;
2016-09-25 18:48:35 +00:00
box-shadow 4px 4px 18px #d6d6d6;
2016-09-22 17:15:40 +00:00
.msg.error
color: red;
label
display: block
font-size: 80%
margin-top: 5px
color: #2196F3
2016-09-27 15:59:09 +00:00
&.autosize
width: auto
display: inline-block !important
font-size: 90% !important
margin-bottom: 10px
input[type=text], input[type=number], input[type=password]
2016-09-22 17:15:40 +00:00
padding: 8px;
width: 300px;
border-radius: 5px;
border: 1px solid #d2d2d2;
2016-09-25 18:48:35 +00:00
box-shadow inset 2px 2px 4px #dcdcdc;
2016-09-22 17:15:40 +00:00
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
2016-09-25 18:48:35 +00:00
overflow: hidden;
2016-09-23 07:38:47 +00:00
.ircwrapper
position: absolute
width: 100%
height: 100%
.toolbar
height: 56px
background-color: #00c7e0
position: relative
2016-09-23 15:42:59 +00:00
z-index: 15
2016-09-25 18:48:35 +00:00
box-shadow 2px 2px 4px #cecece
.open_settings
width: 36px;
height: 36px;
2016-09-23 07:38:47 +00:00
display: inline-block;
2016-09-25 18:48:35 +00:00
position: absolute;
right: 10px;
top: 10px;
cursor: pointer;
background-image: url(../image/settings.svg);
background-repeat: no-repeat;
background-size: contain;
transition transform 0.2s linear
&:hover
transform: rotateZ(-90deg);
2016-09-23 07:38:47 +00:00
.tabby
display: inline-block;
height: 56px;
position: absolute;
2016-09-25 18:48:35 +00:00
right: 45px;
left: 0;
2016-09-23 15:42:59 +00:00
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
2016-09-23 07:38:47 +00:00
.tab
display: inline-block;
min-width: 60px;
height: 25px;
margin: 5px;
margin-right: 0;
padding: 10px;
line-height: 25px;
background-color: #29e1ff;
2016-09-25 18:48:35 +00:00
transition background-color 0.2s linear
2016-09-23 07:38:47 +00:00
border-radius: 5px;
border: 1px solid #00d0ea;
2016-09-25 18:48:35 +00:00
box-shadow inset 4px 4px 8px #44ebff;
2016-09-23 07:38:47 +00:00
color: #fff;
cursor: pointer;
font-weight: 600;
2016-09-23 09:47:12 +00:00
#unread
display: inline-block;
2016-09-23 15:42:59 +00:00
min-width: 18px;
height: 18px;
2016-09-23 09:47:12 +00:00
background-color: #bf0000;
border: 1px solid #b00;
2016-09-25 18:48:35 +00:00
box-shadow inset 2px 2px 3px #f00;
2016-09-23 09:47:12 +00:00
text-align: center;
2016-09-23 15:42:59 +00:00
font-size: 12px;
2016-09-23 09:47:12 +00:00
margin: 0 5px;
2016-09-23 15:42:59 +00:00
line-height: 20px;
2016-09-23 09:47:12 +00:00
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;
2016-09-25 18:48:35 +00:00
margin-left: 5px
2016-09-23 07:38:47 +00:00
&:hover
background-color: #63e9ff;
2016-09-25 18:48:35 +00:00
box-shadow inset 4px 4px 8px #86f2ff;
2016-09-23 07:38:47 +00:00
&.active
background-color: #00b9d8;
border: 1px solid #009aad;
2016-09-25 18:48:35 +00:00
box-shadow inset 4px 4px 8px #009caf;
2016-09-23 07:38:47 +00:00
color: #ffffff;
&:hover
background-color: #00c7e8;
.chatarea
position: absolute;
top: 56px;
width: 100%;
bottom: 46px;
2016-09-23 15:42:59 +00:00
.smsc-nicklistbtn
2016-09-25 13:22:20 +00:00
background-image: url(../image/users.svg);
2016-09-23 15:42:59 +00:00
background-repeat: no-repeat;
background-size: contain;
width: 46px;
height: 46px;
position: absolute;
top: 16px;
right: 16px;
background-color: #00bcd4;
border-radius: 100%;
border: 5px solid #389dbb;
display: none;
opacity: 0.5;
cursor: pointer;
2016-09-23 07:38:47 +00:00
.topicbar
position: absolute;
top: 0;
height: 20px;
right: 0;
left: 0;
background-color: #fff;
border-bottom: 1px solid #ddd;
padding: 12px;
display: none;
overflow: hidden;
2016-09-24 17:30:39 +00:00
z-index: 10
2016-09-24 16:09:03 +00:00
&:hover
height: auto
2016-09-24 17:30:39 +00:00
max-height: 100px
overflow: auto
2016-09-24 16:09:03 +00:00
word-wrap: break-word
2016-09-23 07:38:47 +00:00
.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-25 18:48:35 +00:00
padding: 5px;
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;
2016-09-23 15:42:59 +00:00
z-index: 11;
background-color: #ffffff;
2016-09-24 17:30:39 +00:00
overflow: auto;
2016-09-23 15:42:59 +00:00
.nick
cursor: pointer;
&:hover
2016-09-27 18:27:18 +00:00
background-color: #aeebff;
2016-09-23 15:42:59 +00:00
.nickname
font-size: 120%;
.prefix
width: 16px;
height: 16px;
line-height: 16px;
padding: 2px;
display: inline-block;
background-color: #05abe0;
border-radius: 4px;
color: #fff;
text-align: center;
margin-right: 5px;
font-weight: bold;
.no-prefix
width: 25px;
display: inline-block;
2016-09-25 18:48:35 +00:00
.settings
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 20px;
width: 60%;
min-width: 360px;
margin: auto;
overflow: auto;
.grade1, .grade2, .grade3
text-align: left;
2016-09-23 07:38:47 +00:00
&.vnicks
.nicklist
display: block;
.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;
2016-09-23 12:36:56 +00:00
.my_nickname
2016-09-23 07:38:47 +00:00
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;
2016-09-23 15:42:59 +00:00
overflow: hidden;
2016-09-23 07:38:47 +00:00
.inputwrapper
display: inline-block
position: absolute
margin: 5px 0
left: 210px
right: 55px
top: 0
2016-09-23 07:38:47 +00:00
input
width: 100%
padding: 6px
font-size: 120%
border: 1px solid #929292
border-left: 0
2016-09-25 18:48:35 +00:00
box-shadow inset 4px 4px 8px #d8d8d8
.sendbutton
2016-09-25 13:22:20 +00:00
background-image: url(../image/send.svg);
background-repeat: no-repeat;
background-size: contain;
width: 32px;
position: absolute;
height: 32px;
float: right;
top: 5px;
right: 5px;
cursor: pointer;
2016-09-23 07:38:47 +00:00
2016-09-23 09:47:12 +00:00
.message
&.type_simple
2016-09-24 17:30:39 +00:00
&.mentioned
2016-09-27 18:27:18 +00:00
background-color: #aeebff;
.timestamp
color: #696969;
&:before
color: #607D8B;
content: "[";
&:after
color: #607D8B;
content: "]";
.sender
color: #3F51B5;
&:before
content: "<";
&:after
content: ">";
.arrowin, .arrowout
font-weight: bolder;
2016-09-24 17:30:39 +00:00
.channel
font-weight: bold;
color: #a0a0a0;
.m_listentry
.channel
min-width: 120px;
display: inline-block;
.usercount
display: inline-block;
min-width: 45px;
text-align: center;
.reason, .hostmask
2016-09-23 09:47:12 +00:00
&:before
content: "(";
2016-09-23 09:47:12 +00:00
&:after
content: ")";
&:before, &:after
color: #009606;
font-weight: bold;
.reason
color: #bf0000;
.hostmask
color: #004c88;
.arrowin
color: #00ab00;
.arrowout
color: #dc0f00;
&.m_quit, &.m_part, &.m_kick
color: red;
&.m_join
color: green;
2016-09-27 15:13:24 +00:00
&.m_topic .content, &.m_names .content
color: #03A9F4;
font-weight: bold;
2016-09-23 21:38:09 +00:00
&.m_motd .content
font-family: monospace;
&.m_nick .content, &.m_notice .content
color: #FF9800;
font-weight: bold;
&.m_action
.actionee
color: #3f51b5;
.asterisk
color: #e4c000;
2016-09-24 17:30:39 +00:00
&.m_mode
.content
font-style: italic;
.mode
color: #008000;
.asterisk
color: #05abe0
2016-09-24 17:30:39 +00:00
&.m_error .content
color: red;
font-weight: bold;
2016-09-26 15:41:48 +00:00
&.m_help .content
color: #008000;
font-weight: bold;
2016-09-23 15:42:59 +00:00
2016-09-24 12:25:47 +00:00
.message, .topicbar
.irc-bg00,.irc-bg0
background-color: white
.irc-bg01,.irc-bg1
background-color: black
.irc-bg02,.irc-bg2
background-color: navy
.irc-bg03,.irc-bg3
background-color: green
.irc-bg04,.irc-bg4
background-color: red
.irc-bg05,.irc-bg5
background-color: brown
.irc-bg06,.irc-bg6
background-color: purple
.irc-bg07,.irc-bg7
background-color: orange
.irc-bg08,.irc-bg8
background-color: yellow
.irc-bg09,.irc-bg9
background-color: lime
.irc-bg10
background-color: teal
.irc-bg11
background-color: cyan
.irc-bg12
background-color: blue
.irc-bg13
background-color: pink
.irc-bg14
background-color: grey
.irc-bg15
background-color: lightgrey
.irc-fg00,.irc-fg0
color: white
.irc-fg01,.irc-fg1
color: black
.irc-fg02,.irc-fg2
color: navy
.irc-fg03,.irc-fg3
color: green
.irc-fg04,.irc-fg4
color: red
.irc-fg05,.irc-fg5
color: brown
.irc-fg06,.irc-fg6
color: purple
.irc-fg07,.irc-fg7
color: orange
.irc-fg08,.irc-fg8
color: #dcdc00
.irc-fg09,.irc-fg9
color: #00e600
.irc-fg10
color: teal
.irc-fg11
color: #00d2d2
.irc-fg12
color: blue
.irc-fg13
color: pink
.irc-fg14
color: grey
.irc-fg15
color: lightgrey
2016-09-25 19:58:28 +00:00
.irc-bold
font-weight: bold
.irc-italic
font-style: italic
.irc-underline
text-decoration: underline
2016-09-24 12:25:47 +00:00
2016-09-23 15:42:59 +00:00
@media all and (max-width: 600px)
.vnicks
.nicklist
display: none !important;
.letterbox
right: 0 !important;
.topicbar
right: 0 !important;
&.vopentrig
.nicklist
display: block !important;
.topicbar
right: 45px;
.smsc-nicklistbtn
z-index: 12;
display: block !important;
.my_nickname
display: none;
.inputwrapper
left: 38px !important;