add safearea support
This commit is contained in:
parent
aa80ab0350
commit
d153b95fc7
|
@ -4,11 +4,11 @@
|
|||
<meta charset="utf-8">
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui" name="viewport">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes"/>
|
||||
<meta name="apple-mobile-web-app-title" content="AriaNg"/>
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="default"/>
|
||||
<meta name="msapplication-TileColor" content="#3c4852">
|
||||
<meta name="msapplication-TileImage" content="tileicon.png">
|
||||
<meta name="description" content="AriaNg, a modern web frontend making aria2 easier to use.">
|
||||
|
|
|
@ -4,11 +4,26 @@
|
|||
margin-right: 15px;
|
||||
}
|
||||
|
||||
@media screen and (orientation: landscape) {
|
||||
.content > .new-task-table,
|
||||
.tab-pane > .new-task-table {
|
||||
margin-right: calc(15px + env(safe-area-inset-right));
|
||||
}
|
||||
}
|
||||
|
||||
.new-task-table > div.row {
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
@media screen and (orientation: landscape) {
|
||||
.content > .new-task-table > div.row,
|
||||
.tab-pane > .new-task-table > div.row {
|
||||
margin-right: calc(-1 * calc(15px + env(safe-area-inset-right)));
|
||||
padding-right: env(safe-area-inset-right);
|
||||
}
|
||||
}
|
||||
|
||||
.new-task-table > div.row:first-child {
|
||||
border-top: inherit;
|
||||
}
|
||||
|
|
|
@ -13,12 +13,24 @@
|
|||
line-height: 11px;
|
||||
}
|
||||
|
||||
@media screen and (orientation: landscape) {
|
||||
.tab-pane > .piece-map {
|
||||
padding-right: calc(2px + env(safe-area-inset-right));
|
||||
}
|
||||
}
|
||||
|
||||
.piece-legends {
|
||||
text-align: center;
|
||||
margin-top: 4px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
@media screen and (orientation: landscape) {
|
||||
.tab-pane > .piece-legends {
|
||||
padding-right: env(safe-area-inset-right);
|
||||
}
|
||||
}
|
||||
|
||||
.piece-legend {
|
||||
display: inline-block;
|
||||
margin-right: 4px;
|
||||
|
|
|
@ -4,6 +4,13 @@
|
|||
margin-right: 15px;
|
||||
}
|
||||
|
||||
@media screen and (orientation: landscape) {
|
||||
.content > .settings-table,
|
||||
.tab-pane > .settings-table {
|
||||
margin-right: calc(15px + env(safe-area-inset-right));
|
||||
}
|
||||
}
|
||||
|
||||
.settings-table .settings-table-title {
|
||||
font-size: 12px;
|
||||
padding-top: 4px;
|
||||
|
@ -20,6 +27,14 @@
|
|||
border-top: 1px solid #ddd;
|
||||
}
|
||||
|
||||
@media screen and (orientation: landscape) {
|
||||
.content > .settings-table > div.row,
|
||||
.tab-pane > .settings-table > div.row {
|
||||
margin-right: calc(-1 * calc(15px + env(safe-area-inset-right)));
|
||||
padding-right: env(safe-area-inset-right);
|
||||
}
|
||||
}
|
||||
|
||||
.settings-table > div.row:first-child {
|
||||
border-top: inherit;
|
||||
}
|
||||
|
|
|
@ -4,6 +4,13 @@
|
|||
margin-right: 15px;
|
||||
}
|
||||
|
||||
@media screen and (orientation: landscape) {
|
||||
.content > .task-table,
|
||||
.tab-pane > .task-table {
|
||||
margin-right: calc(15px + env(safe-area-inset-right));
|
||||
}
|
||||
}
|
||||
|
||||
.task-table .task-table-title {
|
||||
font-size: 12px;
|
||||
padding-top: 4px;
|
||||
|
@ -22,6 +29,14 @@
|
|||
cursor: -webkit-grab;
|
||||
}
|
||||
|
||||
@media screen and (orientation: landscape) {
|
||||
.content > .task-table div.row,
|
||||
.tab-pane > .task-table div.row {
|
||||
margin-right: calc(-1 * calc(15px + env(safe-area-inset-right)));
|
||||
padding-right: env(safe-area-inset-right);
|
||||
}
|
||||
}
|
||||
|
||||
.task-table > .task-table-body > div.row {
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
|
|
|
@ -88,6 +88,24 @@ td {
|
|||
z-index: 1010;
|
||||
}
|
||||
|
||||
.main-sidebar .sidebar-menu > li.treeview > ul.treeview-menu > li > a {
|
||||
padding: 6px 5px 6px 41px;
|
||||
}
|
||||
|
||||
@media screen and (orientation: landscape) {
|
||||
.main-sidebar ul.sidebar-menu > li.header {
|
||||
padding-left: max(15px, env(safe-area-inset-left));
|
||||
}
|
||||
|
||||
.main-sidebar ul.sidebar-menu > li > a {
|
||||
padding-left: max(15px, env(safe-area-inset-left));
|
||||
}
|
||||
|
||||
.main-sidebar ul.sidebar-menu > li.treeview > ul.treeview-menu > li > a {
|
||||
padding-left: max(41px, calc(26px + env(safe-area-inset-left)));
|
||||
}
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
min-height: calc(100vh - 48px);
|
||||
}
|
||||
|
@ -100,6 +118,12 @@ td {
|
|||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
@media screen and (orientation: portrait) {
|
||||
.main-footer {
|
||||
padding-bottom: calc(15px + env(safe-area-inset-bottom));
|
||||
}
|
||||
}
|
||||
|
||||
.main-footer > .navbar {
|
||||
margin-bottom: 0;
|
||||
min-height: inherit;
|
||||
|
|
|
@ -162,7 +162,6 @@
|
|||
|
||||
.skin-aria-ng .sidebar-menu > li.treeview > ul.treeview-menu > li > a {
|
||||
color: #8aa4af;
|
||||
padding: 6px 5px 6px 41px;
|
||||
}
|
||||
|
||||
.skin-aria-ng .sidebar-menu > li.treeview > ul.treeview-menu > li > a:hover {
|
||||
|
|
Reference in a new issue