q3aql/webui-aria2
q3aql/webui-aria2
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adjust css style

Browse Source
This commit is contained in:
kuoruan 2016-12-30 22:55:40 +08:00
parent a64725816d
commit 8e84b96081
4 changed files with 74 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
css/download.css
View File

@ -5,6 +5,7 @@
}
.download .title {
font-size: 1.2em;
padding: 5px 0;
}
@ -25,38 +26,54 @@
font-size: small;
word-wrap: break-word;
}
.active-download, .waiting-download, .stopped-download, .download {
cursor: pointer;
width: 100%;
padding: 4px 5px;
background-color: #fff;
margin-bottom: 20px;
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2),0 1px 1px 0 rgba(0,0,0,0.14),0 2px 1px -1px rgba(0,0,0,0.12);
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
}
/* fix table layout to break words */
@media (max-width: 767px) {
.active-download, .waiting-download, .stopped-download, .download {
table-layout: fixed;
}
.active-download, .waiting-download, .stopped-download, .download {
table-layout: fixed;
}
}
.download-graph {
width: 40%;
margin-top: 1em;
margin-bottom: 1em;
margin-right: 30px;
margin: .5em 30px .5em 0;
}
@media (min-width: 1200px) {
.download-graph {
width: 50%;
}
}
@media (min-width: 767px) and (max-width: 1200px) {
.download-graph {
width: 60%;
}
}
@media (max-width: 767px) {
.download-graph {
width: 100%;
}
}
.large-graph {
width: 66%;
}
.stats {
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
margin: 0 auto;
padding: 0;
}
.stats li {
display: inline-block;
margin-bottom: 2px;
@ -67,22 +84,21 @@
.download-item {
margin: 0;
padding-left: 6px;
padding-right: 6px;
padding-top: 0.3ex;
padding-bottom: 0.5ex;
padding: 0.5ex 6px 0.5ex;
}
.download-controls .btn-group {
float: right;
}
.download-controls > .btn-group {
margin-right: 5px;
margin-top: 5px;
margin: 5px 5px 5px 0;
}
.download-controls .btn-group .btn {
height: 100%;
}
.download-controls .btn-group .btn span {
font-size: 14px;
color: gray;
@ -91,9 +107,11 @@
.download-detail h4 {
margin-left: 10px;
}
.download-files {
margin: 0;
}
.download-files li {
display: inline-block;
padding: 0.8ex;
@ -102,6 +120,7 @@
overflow: hidden;
text-overflow: ellipsis;
}
.download-files a {
color: #fff;
}

42
css/modals.css
View File

@ -3,42 +3,42 @@
}
.modal-advanced-title {
font-weight: bold;
margin-bottom: 0px;
background-color: rgb(245, 245, 245);
border: 1px solid rgba(0, 0, 0, 0.05);
border-bottom: 0px;
border-radius: 4px 4px 0px 0px;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
cursor: pointer;
padding: 5px 15px;
font-weight: bold;
margin-bottom: 0;
background-color: rgb(245, 245, 245);
border: 1px solid rgba(0, 0, 0, 0.05);
border-bottom: 0;
border-radius: 4px 4px 0 0;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
cursor: pointer;
padding: 5px 15px;
}
.modal-advanced-options {
/*width: 100%;
margin-bottom: 10px;*/
margin-top:0px;
margin-top: 0;
margin-bottom: 2px;
background-color: rgb(245, 245, 245);
border: 1px solid rgba(0, 0, 0, 0.05);
border-top: 0px;
border-radius: 0px 0px 4px 4px;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
border-top: 0;
border-radius: 0 0 4px 4px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
.modal-form-input-verylarge {
width: 95%;
width: 95%;
}
.modal-form-input-number {
width: 80px;
width: 80px;
}
.selectFiles > div > .control-label
{
.selectFiles > div > .control-label {
font-weight: normal;
margin-left:30px;
margin-left: 30px;
}
.selectFiles > div > .controls
{
margin-left:30px;
.selectFiles > div > .controls {
margin-left: 30px;
}

23
css/style.css
View File

@ -24,6 +24,7 @@ input[type=checkbox], input[type=radio] {
.label-active, .badge-active, .progress-active .bar {
background-color: #62C462;
}
.progress-success .bar {
background-color: #468847 !important;
}
@ -47,18 +48,13 @@ input[type=checkbox], input[type=radio] {
position: absolute;
}
.download-graph {
font-size: x-small;
font-family: sans-serif;
#global-graph {
width: 100%;
}
#download-graph {
float: right;
}
@media (max-width: 767px) {
#download-graph {
float: none;
width: 100%;
@media (min-width: 767px) and (max-width: 992px) {
#global-graph {
width: 80%;
}
}
@ -84,10 +80,11 @@ input[type=checkbox], input[type=radio] {
}
.main-navbar {
box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.1);
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
background-color: #00897B;
border-color: #00897B;
}
.main-navbar .navbar-brand {
color: #fff;
}
@ -106,12 +103,12 @@ input[type=checkbox], input[type=radio] {
.main-navbar.nav .open > a:focus,
.main-navbar .nav > li > a:focus,
.main-navbar .nav > li > a:hover {
background-color: rgba(0,0,0,0.2);
background-color: rgba(0, 0, 0, 0.2);
}
.sidebar-nav {
margin-bottom: 30px;
background-color: #fff;
padding: 10px 20px 20px;
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2),0 1px 1px 0 rgba(0,0,0,0.14),0 2px 1px -1px rgba(0,0,0,0.12);
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
}

10
index.html
View File

@ -320,6 +320,7 @@
<li class="nav-header" ng-show="totalAria2Downloads()">{{ 'Global Statistics' | translate }}</li>
<li>
<div
id="global-graph"
yticks="3"
xticks="1"
dspeed="gstats.downloadSpeed"
@ -329,14 +330,15 @@
draw="true">
</div>
</li>
<li>
<span title="Upload Speed"><span class="fa fa-fw fa-arrow-circle-o-up">&nbsp;</span>{{gstats.uploadSpeed | bspeed}}</span><br />
<span title="Download Speed"><span class="fa fa-fw fa-arrow-circle-o-down">&nbsp;</span>{{gstats.downloadSpeed | bspeed}}</span>
</li>
</ul>
<span title="Upload Speed"><span class="fa fa-fw fa-arrow-circle-o-up">&nbsp;</span>{{gstats.uploadSpeed | bspeed}}</span><br />
<span title="Download Speed"><span class="fa fa-fw fa-arrow-circle-o-down">&nbsp;</span>{{gstats.downloadSpeed | bspeed}}</span>
<!-- }}} -->
<br />
<!-- {{{ download filters -->
<ul id="filters" class="clearfix nav nav-list" ng-show="enable.sidebar.filters">
<li class="nav-header">{{ 'Download Filters' | translate }}</li>
@ -438,7 +440,7 @@
ng-repeat="download in getDownloads()"
class="row-fluid download" data-gid="{{download.gid}}"
ng-click="toggleCollapsed(download)">
<div class="download-name download-item download-controls">
<div class="download-name download-item download-controls clearfix">
<!-- {{{ download control buttons -->
<div class="btn-group" role="group" ng-click="$event.stopPropagation()">
<button