517a473b94
This generally removes a lot of whitespace on mobile while still improving readability In particular, it makes it easier to see which lines belong together
473 lines
8.8 KiB
CSS
473 lines
8.8 KiB
CSS
html,
|
|
body {
|
|
height: 100%;
|
|
/* The html and body elements cannot have any padding or margin. */
|
|
}
|
|
|
|
/* Wrapper for page content to push down footer */
|
|
#wrap {
|
|
min-height: 100%;
|
|
height: auto !important;
|
|
height: 100%;
|
|
/* Negative indent footer by it's height */
|
|
margin: 0 auto -25px;
|
|
}
|
|
|
|
/* Set the fixed height of the footer here */
|
|
#push,
|
|
#footer {
|
|
height: 25px;
|
|
}
|
|
.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;
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
}
|
|
tr {
|
|
line-height: 100%;
|
|
}
|
|
tr:hover {
|
|
background-color: #222222;
|
|
}
|
|
td.time {
|
|
padding: 1px 5px 1px 1px;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.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 {
|
|
word-wrap: break-word;
|
|
word-break: break-word;
|
|
vertical-align: top;
|
|
width: 100%;
|
|
padding: 1px 1px 1px 5px;
|
|
}
|
|
hr {
|
|
margin: 0;
|
|
border-color: darkgreen;
|
|
}
|
|
.text {
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
body {
|
|
color: #ddd;
|
|
background-color: #181818;
|
|
padding-left: 0;
|
|
padding-right: 5px;
|
|
padding-bottom:70px;
|
|
}
|
|
|
|
input#sendMessage {
|
|
width: 100%;
|
|
}
|
|
#footer button {
|
|
border-radius: 0;
|
|
}
|
|
.panel input, .panel .input-group {
|
|
max-width: 300px;
|
|
}
|
|
input[type=text], input[type=password], .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);
|
|
}
|
|
#topbar {
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 35px;
|
|
max-height: 35px;
|
|
z-index: 2;
|
|
line-height: 35px;
|
|
white-space: nowrap;
|
|
-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;
|
|
}
|
|
#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;
|
|
-webkit-transition:0.35s ease all;
|
|
transition:0.35s ease all;
|
|
}
|
|
#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: -15px;
|
|
}
|
|
|
|
#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: 35px;
|
|
padding-left: 5px;
|
|
padding-bottom: 35px;
|
|
}
|
|
#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;
|
|
}
|
|
.nav-pills > li > a:hover, .nav-pills > li > a:hover span {
|
|
color: #222;
|
|
}
|
|
.content {
|
|
height: 100%;
|
|
min-height: 100%;
|
|
}
|
|
|
|
.monospace {
|
|
font-family: 'Terminus', 'Consolas', 'Monaco', 'Inconsolata', 'Ubuntu Mono', monospace;
|
|
}
|
|
|
|
#bufferlines {
|
|
position: relative;
|
|
height: 98%;
|
|
overflow-y: auto;
|
|
width: auto;
|
|
top: 35px; /* topbar */
|
|
padding-bottom: 10px;
|
|
margin-right: -5px;
|
|
-webkit-transition:0.35s ease all;
|
|
transition:0.35s ease all;
|
|
}
|
|
.withnicklist {
|
|
margin-right: 100px !important; /* nicklist */
|
|
}
|
|
.withsidebar {
|
|
margin-left: 145px; /* sidebar */
|
|
}
|
|
#bufferlines .btn {
|
|
font-family: sans-serif;
|
|
}
|
|
|
|
.navbar-fixed-bottom {
|
|
margin: 0 5px 0 145px; /* sidebar */
|
|
-webkit-transition:0.35s ease all;
|
|
transition:0.35s ease all;
|
|
}
|
|
.navbar-inverse {
|
|
background-color: #181818;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
img.embed {
|
|
max-height: 300px;
|
|
}
|
|
|
|
|
|
table.notimestamp td.time {
|
|
display: none !important;
|
|
}
|
|
|
|
.modal ul {
|
|
list-style: none;
|
|
padding-left: 15px;
|
|
}
|
|
.modal li {
|
|
font-size: larger;
|
|
margin-bottom: 10px;
|
|
}
|
|
.modal-header {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
/* */
|
|
/* Mobile layout */
|
|
/* */
|
|
@media (max-width: 968px) {
|
|
.message span {
|
|
color: #C7C7C7;
|
|
}
|
|
|
|
.bufferline {
|
|
display: inline-block;
|
|
padding-top: 4px;
|
|
padding-bottom: 3px;
|
|
line-height: 15px;
|
|
}
|
|
|
|
#sidebar {
|
|
font-size: normal;
|
|
z-index: 1;
|
|
bottom: 0px;
|
|
width: auto;
|
|
max-width: 60%;
|
|
top: 0px;
|
|
padding-bottom: 35px;
|
|
}
|
|
|
|
#sidebar.in, #sidebar.collapsing {
|
|
-webkit-box-shadow: 0px 0px 120px #000;
|
|
box-shadow: 0px 0px 120px #000;
|
|
bottom: 0px;
|
|
}
|
|
|
|
#topbar .title {
|
|
left: 40px;
|
|
}
|
|
|
|
#topbar .actions {
|
|
line-height: 30px;
|
|
font-size: 30px;
|
|
margin-right: 0;
|
|
height: 32px;
|
|
padding-top: 3px;
|
|
}
|
|
|
|
#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 {
|
|
display: inline;
|
|
padding-right: 0;
|
|
}
|
|
|
|
#bufferlines td.prefix {
|
|
display: inline;
|
|
padding-right: 0;
|
|
border: 0;
|
|
}
|
|
|
|
#bufferlines td.message {
|
|
padding-left: 0;
|
|
display: inline;
|
|
}
|
|
|
|
#bufferlines td.prefix:before {
|
|
content: "<";
|
|
}
|
|
|
|
#bufferlines td.prefix:after {
|
|
content: ">";
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 5px;
|
|
height: 5px;
|
|
}
|
|
}
|