add safearea support

This commit is contained in:
MaysWind 2021-02-14 02:20:51 +08:00
parent aa80ab0350
commit d153b95fc7
7 changed files with 83 additions and 3 deletions

View file

@ -4,11 +4,11 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <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="mobile-web-app-capable" content="yes">
<meta name="apple-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-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-TileColor" content="#3c4852">
<meta name="msapplication-TileImage" content="tileicon.png"> <meta name="msapplication-TileImage" content="tileicon.png">
<meta name="description" content="AriaNg, a modern web frontend making aria2 easier to use."> <meta name="description" content="AriaNg, a modern web frontend making aria2 easier to use.">

View file

@ -4,11 +4,26 @@
margin-right: 15px; 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 { .new-task-table > div.row {
padding-top: 8px; padding-top: 8px;
padding-bottom: 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 { .new-task-table > div.row:first-child {
border-top: inherit; border-top: inherit;
} }

View file

@ -13,12 +13,24 @@
line-height: 11px; line-height: 11px;
} }
@media screen and (orientation: landscape) {
.tab-pane > .piece-map {
padding-right: calc(2px + env(safe-area-inset-right));
}
}
.piece-legends { .piece-legends {
text-align: center; text-align: center;
margin-top: 4px; margin-top: 4px;
margin-bottom: 4px; margin-bottom: 4px;
} }
@media screen and (orientation: landscape) {
.tab-pane > .piece-legends {
padding-right: env(safe-area-inset-right);
}
}
.piece-legend { .piece-legend {
display: inline-block; display: inline-block;
margin-right: 4px; margin-right: 4px;

View file

@ -4,6 +4,13 @@
margin-right: 15px; 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 { .settings-table .settings-table-title {
font-size: 12px; font-size: 12px;
padding-top: 4px; padding-top: 4px;
@ -20,6 +27,14 @@
border-top: 1px solid #ddd; 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 { .settings-table > div.row:first-child {
border-top: inherit; border-top: inherit;
} }

View file

@ -4,6 +4,13 @@
margin-right: 15px; 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 { .task-table .task-table-title {
font-size: 12px; font-size: 12px;
padding-top: 4px; padding-top: 4px;
@ -22,6 +29,14 @@
cursor: -webkit-grab; 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 { .task-table > .task-table-body > div.row {
padding-top: 8px; padding-top: 8px;
padding-bottom: 8px; padding-bottom: 8px;

View file

@ -88,6 +88,24 @@ td {
z-index: 1010; 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 { .content-wrapper {
min-height: calc(100vh - 48px); min-height: calc(100vh - 48px);
} }
@ -100,6 +118,12 @@ td {
overflow-y: scroll; overflow-y: scroll;
} }
@media screen and (orientation: portrait) {
.main-footer {
padding-bottom: calc(15px + env(safe-area-inset-bottom));
}
}
.main-footer > .navbar { .main-footer > .navbar {
margin-bottom: 0; margin-bottom: 0;
min-height: inherit; min-height: inherit;

View file

@ -162,7 +162,6 @@
.skin-aria-ng .sidebar-menu > li.treeview > ul.treeview-menu > li > a { .skin-aria-ng .sidebar-menu > li.treeview > ul.treeview-menu > li > a {
color: #8aa4af; color: #8aa4af;
padding: 6px 5px 6px 41px;
} }
.skin-aria-ng .sidebar-menu > li.treeview > ul.treeview-menu > li > a:hover { .skin-aria-ng .sidebar-menu > li.treeview > ul.treeview-menu > li > a:hover {