first steps of making the elements more readable on mobile
This commit is contained in:
parent
4bf12fd721
commit
a7d181f862
@ -151,11 +151,15 @@
|
|||||||
height: 15%;
|
height: 15%;
|
||||||
}
|
}
|
||||||
@media @mobile-portrait-with-keyboard, @mobile-portrait {
|
@media @mobile-portrait-with-keyboard, @mobile-portrait {
|
||||||
height: 60px;
|
font-size: 3vh;
|
||||||
}
|
}
|
||||||
@media @mobile-portrait-with-keyboard,
|
@media @mobile-portrait-with-keyboard {
|
||||||
@desktop-portrait,
|
height: 60%;
|
||||||
@mobile-portrait {
|
}
|
||||||
|
@media @mobile-portrait {
|
||||||
|
height: 40%;
|
||||||
|
}
|
||||||
|
@media @desktop-portrait {
|
||||||
font-size: 25px;
|
font-size: 25px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -253,7 +253,7 @@ body {
|
|||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
@media @mobile-portrait, @mobile-portrait-with-keyboard {
|
@media @mobile-portrait, @mobile-portrait-with-keyboard {
|
||||||
font-size: 30px;
|
font-size: 3vh;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -4,6 +4,7 @@
|
|||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
background: #efeaea;
|
||||||
}
|
}
|
||||||
|
|
||||||
#usericons {
|
#usericons {
|
||||||
@ -12,6 +13,12 @@
|
|||||||
margin-left: 3px;
|
margin-left: 3px;
|
||||||
padding: 2px;
|
padding: 2px;
|
||||||
border: 1px solid white;
|
border: 1px solid white;
|
||||||
|
@media @desktop-portrait {
|
||||||
|
font-size: 25px;
|
||||||
|
}
|
||||||
|
@media @mobile-portrait {
|
||||||
|
font-size: 5vh;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.raisedHandIcon, .muteIcon {
|
.raisedHandIcon, .muteIcon {
|
||||||
&:hover {
|
&:hover {
|
||||||
@ -34,9 +41,10 @@
|
|||||||
}
|
}
|
||||||
@media @desktop-portrait {
|
@media @desktop-portrait {
|
||||||
height: 25px;
|
height: 25px;
|
||||||
|
font-size: 3vh;
|
||||||
}
|
}
|
||||||
@media @desktop-portrait, @mobile-portrait {
|
@media @mobile-portrait, @mobile-portrait-with-keyboard {
|
||||||
font-size: 2vh;
|
font-size: 4vh;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -52,12 +60,15 @@
|
|||||||
order: 1;
|
order: 1;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
}
|
}
|
||||||
@media @mobile-portrait-with-keyboard, @desktop-portrait, @mobile-portrait {
|
@media @desktop-portrait, @mobile-portrait {
|
||||||
-webkit-order: 3;
|
-webkit-order: 3;
|
||||||
order: 3;
|
order: 3;
|
||||||
margin-bottom: 0px;
|
margin-bottom: 0px;
|
||||||
padding-bottom: 55px; /*so that the footer does not overlap */
|
padding-bottom: 55px; /*so that the footer does not overlap */
|
||||||
}
|
}
|
||||||
|
@media @mobile-portrait-with-keyboard {
|
||||||
|
display: none; //hide when typing
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#user-contents {
|
#user-contents {
|
||||||
@ -71,7 +82,7 @@
|
|||||||
padding-left: 10px;
|
padding-left: 10px;
|
||||||
padding-right: 10px;
|
padding-right: 10px;
|
||||||
}
|
}
|
||||||
@media @mobile-portrait-with-keyboard, @desktop-portrait, @mobile-portrait {
|
@media @desktop-portrait, @mobile-portrait {
|
||||||
max-height: 40vh; //for longer userlist a scrollbar appears
|
max-height: 40vh; //for longer userlist a scrollbar appears
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user