html&css changes for mobile usage

This commit is contained in:
Creesch 2014-02-18 14:50:38 +01:00
commit 14706d1e33
2 changed files with 94 additions and 57 deletions

View file

@ -263,60 +263,7 @@ input[type=text], input[type=password], .badge {
.navbar-inverse {
background-color: #181818;
}
@media (max-width: 968px) {
#sidebar {
font-size: normal;
z-index: 1;
width: 0;
}
#sidebar.in, #sidebar.collapsing {
-webkit-box-shadow: 0px 0px 120px #000;
box-shadow: 0px 0px 120px #000;
}
#topbar .title {
left: 40px;
}
#bufferlines, #nicklist {
position: relative;
min-height: 0;
margin-left: 0;
height: auto;
max-width: 100%;
border: 0;
}
#nicklist {
width: 100%;
text-align: center;
}
#bufferlines {
padding-bottom: 38px; /* navbar fixed bottom */
}
.navbar-fixed-bottom {
margin: 0;
}
.navbar {
min-height: 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: ">";
}
}
.color-light-green {
color: chartreuse;
}
@ -363,3 +310,92 @@ img.embed {
table.notimestamp td.time {
display: none;
}
/* */
/* Mobile layout */
/* */
@media (max-width: 968px) {
.message span {
color: #C7C7C7;
}
.bufferline {
line-height: 25px;
}
#sidebar {
font-size: normal;
z-index: 1;
bottom: 0px;
width: 60%;
top: 0px;
}
#sidebar.in, #sidebar.collapsing {
-webkit-box-shadow: 0px 0px 120px #000;
box-shadow: 0px 0px 120px #000;
bottom: 0px;
}
#topbar .title {
left: 40px;
}
#bufferlines, #nicklist {
position: relative;
min-height: 0;
margin-left: 0;
height: auto;
max-width: 100%;
border: 0;
}
#nicklist {
width: 160px;
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;
}
#bufferlines {
padding-bottom: 38px;
/* navbar fixed bottom */;
}
.navbar-fixed-bottom {
margin: 0;
}
.navbar {
min-height: 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: ">";
}
}