glowingbear-mainbox/css/glowingbear.css
Tor Hveem 1dc32fd847 Merge pull request #483 from glowing-bear/key-overlays
Show quick access keys on Alt keypress
2014-10-28 01:24:11 +01:00

639 lines
11 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters

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.35s ease all;
transition:0.35s ease 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;
}
.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;
}
/* 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%;
}
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 0.5s;
-webkit-transition: all ease 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 0.5s;
-webkit-transition: all ease 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;
content: "#";
font-weight: bold;
}
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;
}
/* */
/* 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;
}
#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;
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: 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%;
}
.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;
}
}