glowingbear-mainbox/css/glowingbear.css
Lorenz Hübschle-Schneider ba31f994ca Merge pull request #558 from glowing-bear/wide-bufferlist
Introduce a new media query list for wide screens
2015-03-21 11:26:40 +01:00

704 lines
13 KiB
CSS
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
.no-overflow {
overflow: hidden;
}
a {
cursor: pointer;
}
td.prefix {
text-align: right;
vertical-align: top;
padding: 1px 5px 1px 1px;
white-space: pre;
border-right: 1px solid #444;
}
td.message {
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: 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;
margin-bottom: 5px !important;
}
.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 */
}
.glyphicon-off {
top: 1px; /* Fixes for relative glyphicon size */
font-size: 28px;
}
#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;
}
#topbar .actions > * {
padding-left: 5px;
}
#topbar .dropdown-menu form {
padding-left: 6px;
padding-right: 6px;
}
#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: -10px;
}
#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 > 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;
}
.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;
}
#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;
}
/* 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;
}
table.notimestamp td.time {
display: none !important;
}
table.notimestampseconds td.time span.seconds {
display: none !important;
}
#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 {
color: #888;
font-weight: bold;
}
li.buffer.channel_hash a span:last-of-type:before {
content: '#';
}
li.buffer.channel_plus a span:last-of-type:before {
content: '+';
}
li.buffer.channel_ampersand a span:last-of-type:before {
content: '&';
}
li.buffer.channel.active a span:last-of-type:before {
color: #444;
}
li.buffer.channel.active a:hover span:last-of-type:before {
color: #222;
}
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;
}
/* Scales emoji to font size */
img.emoji {
height: 1em;
width: 1em;
margin: 0 .05em 0 .1em;
vertical-align: -0.1em;
}
@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;
}
#nicklist {
width: 140px;
}
.withnicklist {
margin-right: 140px !important; /* nicklist */
}
.footer.withnicklist {
padding-right: 148px !important;
}
}
/* */
/* Mobile layout */
/* */
@media (max-width: 968px) {
#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;
}
#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;
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 > li > a {
padding: 10px 15px;
}
#bufferlines {
height: 100%;
padding-bottom: 0;
}
#bufferlines td.time {
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;
}
}