glowingbear-mainbox/css/glowingbear.css
2017-10-09 09:39:12 +02:00

915 lines
16 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;
}
.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-btn {
vertical-align: top;
}
.input-group-addon {
background: none;
border: none;
color: #ccc;
}
#jump-addon {
width: 0px;
max-width: 0px;
padding: 0;
overflow: hidden;
transition: all ease-in-out 0.5s;
}
.showjumpkeys #jump-addon {
width: auto;
max-width: 70px;
padding: 6px 12px;
}
.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-complete-nick {
position: relative;
overflow: hidden;
cursor: pointer;
}
.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;
width: 100%; /* for title modal click area */
}
#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;
margin-top: 39px;
padding-left: 5px;
padding-bottom: 44px;
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;
}
#sidebar .showjumpkeys .buffer .buffer-jump-key {
transition: all ease-in-out 0.2s;
-webkit-transition: all ease-in-out 0.2s;
transition-delay: 0s;
-webkit-transition-delay: 0s;
opacity: 0.7;
margin-left: -1.2em;
margin-right: 0.1em;
}
#sidebar .buffer .buffer-jump-key {
margin-left: -1.2em;
margin-right: -0.2em;
font-size: smaller;
transition: all ease-in-out 0.2s;
-webkit-transition: all ease-in-out 0.2s;
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;
width: initial;
}
#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;
}
}
/* ng-cloak hides elements until Angular loads, preventing flickering */
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}