glowingbear-mainbox/css/glowingbear.css
Lorenz Hübschle-Schneider 2475ad2c61 Bufferlist design attempt
2014-09-17 13:24:27 +02:00

670 lines
12 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. */
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;
}
.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 {
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 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);
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;
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: -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;
}
#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;
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: 42px;
padding-top: 42px; /* topbar */
-webkit-transition:0.35s ease all;
transition:0.35s ease all;
}
#bufferlines > table {
margin-top: 35px;
width: 100%;
}
tr.bufferline {
line-height: 100%;
}
tr.bufferline:hover {
background-color: #222222;
}
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;
}
.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%;
}
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;
}
.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;
}
.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;
}
/* */
/* 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;
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;
}
.col-sm-9 {
padding-right: 0px !important;
}
}