mirror of
https://github.com/qbittorrent/qBittorrent.git
synced 2026-01-09 17:12:31 -06:00
60feb3cce2
Make the Web UI login more mobile friendly. The main action is moving to a column layout for the logo and form. This way it's easier for mobile to view the page but it doesn't affect the desktop experience much. Secondary it set the input font size to be default text size, this in turn makes it so the mobile ui doesn't zoom in when you focus the inputs. [You can read more about it here](https://wsform.com/knowledgebase/why-forms-zoom-on-some-mobile-devices-and-browsers-and-how-to-control-it/). PR #23360.
55 lines
764 B
CSS
55 lines
764 B
CSS
body {
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
font-size: 12px;
|
|
line-height: 18px;
|
|
margin: 0;
|
|
text-align: left;
|
|
}
|
|
|
|
.col {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.row {
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
#main {
|
|
align-items: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
padding-top: 5em;
|
|
text-align: center;
|
|
}
|
|
|
|
.login-input {
|
|
box-sizing: border-box;
|
|
font-size: 1rem;
|
|
margin: 0.5rem 0;
|
|
padding: 0.5rem;
|
|
width: 100%;
|
|
}
|
|
|
|
#formplace {
|
|
padding: 10px;
|
|
text-align: left;
|
|
}
|
|
|
|
#error_msg {
|
|
color: #ff0000;
|
|
white-space: pre;
|
|
}
|
|
|
|
#loginButton {
|
|
font-size: 1rem;
|
|
padding: 0.5rem;
|
|
width: 100%;
|
|
}
|
|
|
|
#logo img {
|
|
height: 11em;
|
|
}
|