add safearea support

src/index.html

@@ -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.">

src/styles/controls/new-task-table.css

@@ -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;
 }

src/styles/controls/piece-bar-map.css

@@ -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;

src/styles/controls/settings-table.css

@@ -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;
 }

src/styles/controls/task-table.css

@@ -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;

src/styles/core/core.css

@@ -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;

src/styles/theme/default.css

@@ -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 {