html, body { height: 100%; /* The html and body elements cannot have any padding or margin. */ } .no-overflow { overflow: hidden; } .mobile { display: none; } a { cursor: pointer; } .version { margin-right: 1em; } .hidden-bracket { position: absolute; left: -1000px; overflow: hidden; } td.prefix { text-align: right; vertical-align: top; padding: 1px 5px 1px 1px; white-space: pre; border-right: 1px solid #444; } td.message { overflow: hidden; vertical-align: top; width: 100%; padding: 1px 1px 1px 5px; -ms-word-break: break-all; word-break: break-all; /* Non standard for webkit */ word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } #readmarker { margin-top: 5px; margin-bottom: 5px; border-top: 1px solid; border-bottom: 1px solid; height: 2px; } .text { white-space: pre-wrap; } #sendMessage { width: 100%; height: 35px; resize: none; } #sendMessage:focus, #sendMessage:active { border-bottom: 2px solid #555; } .input-group-addon, .input-group-btn { vertical-align: top; } .footer button { border-radius: 0; } .panel input, .panel .input-group { max-width: 300px; } input[type=text], input[type=password], #sendMessage { border: 0; border-radius: 0; margin-bottom: 5px !important; } .btn-send-image { position: relative; overflow: hidden; cursor: pointer; } .imgur-upload { position: absolute; bottom: 0; right: 0; cursor: inherit; font-size: 1000px !important; height: 300px; margin: 0; padding: 0; opacity: 0; filter: ~"alpha(opacity=0)"; } .input-group { width: 100%; } .row { margin: 0px; max-width: 300px; } .no-gutter [class*="col"] { padding: 0px } .col-sm-9 { padding-right: 5px !important; } .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; } #topbar .brand a { display: inline-block; padding: 0 10px; } #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; height: 35px; line-height: 35px; font-size: 22px; position: fixed; right: 0; } #topbar .actions > * { padding: 0 5px; display: inline-block; } #topbar .actions .glyphicon { line-height: 35px; top: 0; } #topbar .dropdown-menu form { padding-left: 6px; padding-right: 6px; } .upload-error { width: 100%; position: absolute; top: 0; left: 0; z-index: 4; } #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 .buffer .badge { display: none; } #sidebar .buffer.unread .badge, #sidebar .buffer.notification .badge { display: inline-block; border-radius: 0; margin-right: -10px; padding: 4px 7px; } #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: 39px; 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; } #connection-infos { float: left; max-width: 10%; padding-left: 5px; font-size: 12px; overflow: hidden; } .nav-pills li { min-height: 20px; } .nav-pills li+li { margin-top: 0; } .nav-pills > li > a { border-radius: 0; color: #ddd; padding: 5px 10px; } .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; } .nav-pills > li.highlight > a, .nav-pills > li.highlight > a span { text-decoration: none; color: #fff; background: #428BCA; } .nav-pills > li > a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .content { height: 100%; min-height: 100%; } #bufferlines { position: relative; height: 100%; overflow-y: auto; width: auto; bottom: 35px; /* input bar */ padding-top: 42px; /* topbar */ padding-bottom: 7px; -webkit-transition:0.2 ease-in-out all; transition:0.2s ease-in-out all; -webkit-overflow-scrolling: touch; /* Native scroll on ios */ } #bufferlines > table { margin-top: 35px; width: 100%; } tr.bufferline { line-height: 100%; } td.time { padding: 1px 5px 1px 1px; vertical-align: top; } .withnicklist { margin-right: 100px !important; /* nicklist */ } .content[sidebar-state=visible] #bufferlines { margin-left: 145px; /* sidebar */ } #bufferlines .btn { font-family: sans-serif; } #reconnect { top: 35px; position: fixed; z-index: 9999; width: 80%; margin: 0; padding: 5px; left: 10%; } #reconnect a { color: white; } .footer { position: fixed; bottom: 0; height: 35px; width: 100%; -webkit-transition:0.2s ease-in-out all; transition:0.2s ease-in-out all; z-index: 1; } .content[sidebar-state=visible] .footer { margin-left: 0; padding-left: 145px; } .footer.withnicklist { padding-right: 100px; } #inputform { position: relative; } #imgur-upload-progress { width: 100%; height: auto; position: absolute; bottom: 100%; left: 0; } .imgur-progress-bar { width: 0%; height: 5px; margin-top: 1px; background: #428BCA; } /* fix for mobile firefox which ignores :hover */ .nav-pills > li > a:active, .nav-pills > li > a:active span { text-decoration: none; } [ng-click], [data-ng-click], [x-ng-click] { cursor: pointer; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb:vertical { height: 15px; } 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%; } video.embed { max-width: 100%; } div.colourbox { display: inline-block; border-radius: 3px; border: 1px solid #bbb; width: 14px; height: 14px; margin-bottom: -2px; } #sidebar .showquickkeys .buffer .buffer-quick-key { transition: all ease-in-out 0.5s; -webkit-transition: all ease-in-out 0.5s; transition-delay: 0.2s; -webkit-transition-delay: 0.2s; opacity: 0.7; } #sidebar .buffer .buffer-quick-key { margin-left: -0.7em; margin-right: -0.2em; font-size: smaller; transition: all ease-in-out 0.5s; -webkit-transition: all ease-in-out 0.5s; opacity: 0; text-shadow: -1px 0px 4px rgba(255, 255, 255, 0.4), 0px -1px 4px rgba(255, 255, 255, 0.4), 1px 0px 4px rgba(255, 255, 255, 0.4), 0px 1px 4px rgba(255, 255, 255, 0.4); vertical-align: baseline; display: inline-block; width: 1em; align: right; } .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; } .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; } .standard-labels 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; } .panel .panel-title:before { display: inline-block; font-size: 22px; line-height: 20px; margin: -3px 5px -3px 0; } .panel[data-state=active] .panel-title:before { content: "–"; } .panel[data-state=collapsed] .panel-title:before { content: "+"; } /* fix for firefox being stupid */ @-moz-document url-prefix() { .panel[data-state=collapsed] .panel-collapse * { display: none; } } /* bold hash before channels */ li.buffer.channel a span:last-of-type:before, #topbar .title .channel:before { color: #888; font-weight: bold; } li.buffer.channel_hash a span:last-of-type:before, #topbar .title .channel_hash:before { content: '#'; } li.buffer.channel_plus a span:last-of-type:before, #topbar .title .channel_plus:before { content: '+'; } li.buffer.channel_ampersand a span:last-of-type:before, #topbar .title .channel_ampersand:before { content: '&'; } li.buffer.channel.active a span:last-of-type:before { color: #aaa; } li.buffer.indent.private a { padding-left: 17px; } .make-thinner { padding-right: -15px; } .settings-help { display: block; margin: -5px 0 -3px 19px; font-size: small; } .unselectable { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } .emojione { font-size: inherit; height: 1em; width: 1.1em; min-height: 16px; min-width: 16px; display: inline-block; margin: -.2ex .15em .2ex; line-height: normal; vertical-align: middle; } img.emojione { width: auto; } .glyphicon-spin { -webkit-animation: spin 1000ms infinite linear; animation: spin 1000ms infinite linear; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } @keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } @media (min-width: 1400px) { #sidebar[data-state=visible], #sidebar { width: 200px; } .content[sidebar-state="visible"] #bufferlines { margin-left: 205px; } #topbar .title { left: 205px; } .content[sidebar-state=visible] .footer { padding-left: 200px; } .nav-pills { font-size: 14px; } .nav-pills li a { padding: 10px 15px; } #nicklist { width: 140px; } .withnicklist { margin-right: 140px !important; /* nicklist */ } .footer.withnicklist { padding-right: 148px !important; } } /* */ /* Mobile layout */ /* */ @media (max-width: 968px) { .mobile { display: inherit; } .desktop { display: none; } #bufferlines table { border-collapse: separate; border-spacing: 2px 3px; } #sidebar { font-size: normal; bottom: 0px; top: 0px; padding-bottom: 35px; width: 200px; } #sidebar.in, #sidebar.collapsing { -webkit-box-shadow: 0px 0px 120px #000; box-shadow: 0px 0px 120px #000; bottom: 0px; } #sidebar[data-state=visible] { transform: translate(0,0); -webkit-transform: translate(0,0); /* Safari */ } #sidebar[data-state=hidden] { transform: translate(-200px,0); -webkit-transform: translate(-200px,0); } .content[sidebar-state=visible] #bufferlines, .content[sidebar-state=visible] .footer { margin-left: 0px; transform: translate(200px,0); -webkit-transform: translate(200px,0); } #topbar .title { left: 40px; right: 60px; text-align: center; font-size: 18px; } #topbar .brand img { height: 28px; } #topbar .badge { display: none; } #bufferlines, #nicklist { position: relative; min-height: 0; margin-left: 0; max-width: 100%; border: 0; } #nicklist { height: auto; padding: 35px 7px 35px 10px; text-align: center; position: fixed; margin-top: 10px; bottom: 0px; } .navbar-fixed-bottom { margin: 0; } .navbar { min-height: 0%; } .nav-pills { font-size: 14px; } .nav-pills li a { padding: 10px 15px; } #bufferlines { height: 100%; padding-bottom: 0; } #bufferlines tr.bufferline { display: block; overflow: hidden; } #bufferlines td.time { display: inline-block; padding-right: 3px; font-size: 0.8em; } #bufferlines td.time span.date { display: block; margin-bottom: -1px; } #bufferlines td.prefix { display: inline; padding-right: 5px; border: 0; font-weight: bold; font-size: 1.06em; } #bufferlines td.message { display: inline; padding: 0px !important; } .gb-modal .modal-dialog { margin: 20px 2%; width: 96%; } .footer { padding-left: 0px !important; padding-right: 0px !important; width: 100% !important; } .footer.withnicklist { padding-right: 108px !important; } ::-webkit-scrollbar { width: 5px; height: 5px; } .col-sm-9 { padding-right: 0px !important; } }