html, body { height: 100%; /* The html and body elements cannot have any padding or margin. */ color: #ddd; background-color: #181818; } .no-overflow { overflow: hidden; } .horizontal-line { -webkit-box-shadow: rgba(255, 255, 255, 0.07) 0 1px 0; -moz-box-shadow: rgba(255, 255, 255, 0.07) 0 1px 0; box-shadow: rgba(255, 255, 255, 0.07) 0 1px 0; border-bottom: 1px solid #121212; } .vertical-line { -webkit-box-shadow: rgba(255, 255, 255, 0.07) 1px 0 0; -moz-box-shadow: rgba(255, 255, 255, 0.07) 1px 0 0; box-shadow: rgba(255, 255, 255, 0.07) 1px 0 0; border-right: 1px solid #121212; } .vertical-line-left { -webkit-box-shadow: rgba(255, 255, 255, 0.07) -1px 0 0; -moz-box-shadow: rgba(255, 255, 255, 0.07) -1px 0 0; box-shadow: rgba(255, 255, 255, 0.07) -1px 0 0; border-left: 1px solid #121212; } .panel-group .panel-heading + .panel-collapse .panel-body, .modal-body, .modal-header, .modal-footer { -webkit-box-shadow: rgba(255, 255, 255, 0.07) 0 -1px 0; -moz-box-shadow: rgba(255, 255, 255, 0.07) 0 -1px 0; box-shadow: rgba(255, 255, 255, 0.07) 0 -1px 0; border-top: 1px solid #121212; } a { cursor: pointer; } table { width: 100%; } tr { line-height: 100%; } tr:hover { background-color: #222222; } td.time { padding: 1px 5px 1px 1px; vertical-align: top; } .repeated-time { } .repeated-time .cof-chat_time, .repeated-time .cof-chat_time_delimiters { color: #333; } .repeated-time .cob-chat_time, .repeated-time .cob-chat_time_delimiters { background-color: transparent; } td.prefix { text-align: right; vertical-align: top; padding: 1px 5px 1px 1px; white-space: pre; border-right: 1px solid #444; } td.message { word-wrap: break-word; word-break: break-word; vertical-align: top; width: 100%; padding: 1px 1px 1px 5px; } #readmarker { margin-top: 5px; margin-bottom: 5px; border-top: 1px solid rgba(255, 255, 255, 0.3); border-bottom: 1px solid #121212; height: 2px; } .text { white-space: pre-wrap; } #sendMessage { width: 100%; height: 36px; resize: none; } .footer button { border-radius: 0; } .panel input, .panel .input-group { max-width: 300px; } input[type=text], input[type=password], #sendMessage, .badge { border: 0; border-radius: 0; color: #ccc; box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.1), 0px 1px 7px 0px rgba(0, 0, 0, 0.8) inset; background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.3); } .glyphicon { top: 0; /* Fixes alignment issue in top bar */ } #topbar { position: fixed; width: 100%; height: 35px; max-height: 35px; z-index: 3; line-height: 35px; white-space: nowrap; } #topbar .brand { float: left; height: 35px; padding-left: 5px; } #topbar .brand img { height: 32px; padding: 2px; } #topbar .brand button { position: absolute; line-height: 15px; font-size: 9pt; margin-left: 10px } #topbar .title { position: fixed; left: 145px; /* sidebar */ overflow: hidden; } #topbar .actions { margin-left: 5px; padding-left: 5px; margin-right: 0; padding-right: 5px; padding-top: 2px; height: 35px; line-height: 35px; font-size: 30px; position: fixed; right: 0; background: #282828; } #topbar .actions > * { padding-left: 5px; } #topbar .dropdown-menu form { padding-left: 6px; padding-right: 6px; } #topbar, #sidebar, .panel, .dropdown-menu, .modal-content { background: #282828; } #sidebar { position: fixed; width: 140px; min-height: 100%; height: 100%; overflow-y: auto; overflow-x: hidden; padding-top: 35px; /* topbar */ padding-bottom: 1px; /* need to force a padding here */ font-size: smaller; transition:0.2s ease-in-out; z-index: 2; } #sidebar[data-state=visible] { left: 0px; } #sidebar form { } #sidebar.ng-hide-add, #sidebar.ng-hide-remove { /* this needs to be here to make it visible during the animation since the .ng-hide class is already on the element rendering it as hidden. */ display:block!important; } #sidebar .badge { border-radius: 0; margin-right: -15px; } #sidebar ul.indented li.indent span.buffername { padding-left: 10px; } #sidebar.ng-hide { width: 0; } #nicklist { position: fixed; width: 100px; min-height: 100%; height: 100%; overflow-y: auto; overflow-x: hidden; right: 0; top: 0; padding-top: 35px; padding-left: 5px; padding-bottom: 35px; z-index: 2; } #nicklist ul { padding: 0; margin: 0; } #nicklist li, #nicklist a { display: block; } #nicklist a { text-decoration: none; } #nicklist a:hover { background: #3b3b3b; } #connection-infos { float: left; max-width: 10%; padding-left: 5px; font-size: 12px; color: #aaa; overflow: hidden; } .nav-pills > li > a { border-radius: 0; color: #ddd; } .nav-pills > li > a:hover, .nav-pills > li > a:hover span { color: #222; } /* fix for mobile firefox which ignores :hover */ .nav-pills > li > a:active, .nav-pills > li > a:active span { text-decoration: none; background-color: #eee; color: #222; } .content { height: 100%; min-height: 100%; } .monospace { font-family: 'Inconsolata', 'Consolas', 'Monaco', 'Ubuntu Mono', monospace; } #bufferlines { position: relative; height: 100%; overflow-y: auto; width: auto; bottom: 42px; padding-top: 42px; /* topbar */ -webkit-transition:0.35s ease all; transition:0.35s ease all; } #bufferlines table { margin-top: 35px; } .withnicklist { margin-right: 100px !important; /* nicklist */ } .content[sidebar-state=visible] #bufferlines { margin-left: 145px; /* sidebar */ } #bufferlines .btn { font-family: sans-serif; } .footer { position: fixed; bottom: 0; height: 35px; width: 100%; -webkit-transition:0.35s ease all; transition:0.35s ease all; z-index: 1; } .content[sidebar-state=visible] .footer { margin-left: 0; padding-left: 145px; } .footer.withnicklist { padding-right: 100px; } .color-light-green { color: chartreuse; } .color-27 { color: deepskyblue; } .danger, .alert-danger, .badge .alert-danger { background-color: rgb(217, 83, 79); color: #ddd; } .alert-danger { border-color: #121212; color: black; } li.notification { color: green; } [ng-click], [data-ng-click], [x-ng-click] { cursor: pointer; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track-piece { background-color: black; } ::-webkit-scrollbar-thumb:vertical { height: 15px; background: rgba(255,255,255,0.5); } div.embed * { max-width: 100%; } /* not for all img embeds so as not to affect the yr plugin (302px) */ div.embed img.embed { max-height: 300px; max-width: 100%; } table.notimestamp td.time { display: none !important; } table.notimestampseconds td.time span.seconds { display: none !important; } .gb-modal { z-index: 1000; height: 100%; overflow-y: scroll; position: absolute; top: 0; left: 0; width: 100%; } .gb-modal[data-state=hidden] { transition: .2s ease-in-out; visibility: hidden; opacity: 0; } .gb-modal[data-state=visible] { transition: .2s ease-in-out; visibility: visible; opacity: 1; } .gb-modal[data-state=hidden] .modal-dialog { transition: top .3s ease-in; top: -150px; } .gb-modal[data-state=visible] .modal-dialog { transition: top .3s ease-out; top: 0px; } .gb-modal .backdrop { z-index: 999; position: fixed; top: 0; height: 100%; width: 100%; overflow: none; background-color:rgba(0, 0, 0, 0.5) } .gb-modal .modal-dialog { z-index: 1001; position: absolute; margin-left: auto; margin-right: auto; left: 0; right: 0; top: 35px; } .gb-modal[ng-click], .gb-modal div[ng-click] { cursor: default; } .gb-modal ul { list-style: none; padding-left: 15px; } .gb-modal li { font-size: larger; margin-bottom: 10px; } .gb-modal li li { font-size: medium; } .modal-header { padding-top: 23px; border-bottom: 0; } #fontchoice label { font-weight: normal; text-align: left; } h2 { padding-bottom: 5px; height: 72px; } h2 img { padding-right: 5px; float: left; height: 72px; } h2 span, h2 small { padding: 5px 0 0 0; display: block; } .panel[data-state=active] .panel-collapse { transition: max-height 0.5s; max-height: 60em; height: auto; display: block; } .panel[data-state=collapsed] .panel-collapse { transition: max-height 0.5s; max-height: 0; } .panel[data-state=collapsed] { border: 0px solid transparent; } /* fix for firefox being stupid */ @-moz-document url-prefix() { .panel[data-state=collapsed] .panel-collapse * { display: none; } } .make-thinner { padding-right: -15px; } /* */ /* Mobile layout */ /* */ @media (max-width: 968px) { .monospace { /* readability on mobile +9001% */ font-family: sans-serif; } #bufferlines table { border-collapse: separate; border-spacing: 2px 3px; } #sidebar { font-size: normal; bottom: 0px; top: 0px; padding-bottom: 35px; } #sidebar.in, #sidebar.collapsing { -webkit-box-shadow: 0px 0px 120px #000; box-shadow: 0px 0px 120px #000; bottom: 0px; } #sidebar[data-state=visible] { width: 200px; } #sidebar[data-state=hidden] { left: -200px; } .content[sidebar-state=visible] #bufferlines, .content[sidebar-state=visible] .footer { margin-left: 0px; } #topbar .title { left: 40px; } #topbar .actions { line-height: 35px; height: 35px; font-size: 31px; margin-right: 0; } #bufferlines, #nicklist { position: relative; min-height: 0; margin-left: 0; max-width: 100%; border: 0; } #nicklist { height: auto; width: auto; padding: 35px 7px 35px 10px; text-align: center; -webkit-box-shadow: 0px 0px 120px #000; box-shadow: 0px 0px 120px #000; position: fixed; margin-top: 10px; background: #282828; bottom: 0px; } .navbar-fixed-bottom { margin: 0; } .navbar { min-height: 0%; } #bufferlines { height: 100%; padding-bottom: 0; } #bufferlines td.time { padding-right: 3px; font-size: 12px; } #bufferlines td.time span.date { display: block; margin-top: -2px; } #bufferlines td.prefix { display: inline; padding-right: 5px; border: 0; font-weight: bold; font-size: 15px; } #bufferlines td.message { display: inline; padding: 0px !important; } .gb-modal .modal-dialog { margin: 20px 2%; width: 96%; } /* a different colour is too irregular on mobile */ .repeated-time .cof-chat_time, .repeated-time .cof-chat_time_delimiters { color: #999; } .footer { padding-left: 0px !important; padding-right: 0px !important; width: 100% !important; background: rgb(24,24,24); } .footer.withnicklist { padding-right: 108px !important; } ::-webkit-scrollbar { width: 5px; height: 5px; } }