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

42
css/modals.css
View File

@ -3,42 +3,42 @@
} }
.modal-advanced-title { .modal-advanced-title {
font-weight: bold; font-weight: bold;
margin-bottom: 0px; margin-bottom: 0;
background-color: rgb(245, 245, 245); background-color: rgb(245, 245, 245);
border: 1px solid rgba(0, 0, 0, 0.05); border: 1px solid rgba(0, 0, 0, 0.05);
border-bottom: 0px; border-bottom: 0;
border-radius: 4px 4px 0px 0px; border-radius: 4px 4px 0 0;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
cursor: pointer; cursor: pointer;
padding: 5px 15px; padding: 5px 15px;
} }
.modal-advanced-options { .modal-advanced-options {
/*width: 100%; /*width: 100%;
margin-bottom: 10px;*/ margin-bottom: 10px;*/
margin-top:0px; margin-top: 0;
margin-bottom: 2px; margin-bottom: 2px;
background-color: rgb(245, 245, 245); background-color: rgb(245, 245, 245);
border: 1px solid rgba(0, 0, 0, 0.05); border: 1px solid rgba(0, 0, 0, 0.05);
border-top: 0px; border-top: 0;
border-radius: 0px 0px 4px 4px; border-radius: 0 0 4px 4px;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
} }
.modal-form-input-verylarge { .modal-form-input-verylarge {
width: 95%; width: 95%;
} }
.modal-form-input-number { .modal-form-input-number {
width: 80px; width: 80px;
} }
.selectFiles > div > .control-label
{ .selectFiles > div > .control-label {
font-weight: normal; font-weight: normal;
margin-left:30px; margin-left: 30px;
} }
.selectFiles > div > .controls
{ .selectFiles > div > .controls {
margin-left:30px; 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 { .label-active, .badge-active, .progress-active .bar {
background-color: #62C462; background-color: #62C462;
} }
.progress-success .bar { .progress-success .bar {
background-color: #468847 !important; background-color: #468847 !important;
} }
@ -47,18 +48,13 @@ input[type=checkbox], input[type=radio] {
position: absolute; position: absolute;
} }
.download-graph { #global-graph {
font-size: x-small; width: 100%;
font-family: sans-serif;
} }
#download-graph { @media (min-width: 767px) and (max-width: 992px) {
float: right; #global-graph {
} width: 80%;
@media (max-width: 767px) {
#download-graph {
float: none;
width: 100%;
} }
} }
@ -84,10 +80,11 @@ input[type=checkbox], input[type=radio] {
} }
.main-navbar { .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; background-color: #00897B;
border-color: #00897B; border-color: #00897B;
} }
.main-navbar .navbar-brand { .main-navbar .navbar-brand {
color: #fff; color: #fff;
} }
@ -106,12 +103,12 @@ input[type=checkbox], input[type=radio] {
.main-navbar.nav .open > a:focus, .main-navbar.nav .open > a:focus,
.main-navbar .nav > li > a:focus, .main-navbar .nav > li > a:focus,
.main-navbar .nav > li > a:hover { .main-navbar .nav > li > a:hover {
background-color: rgba(0,0,0,0.2); background-color: rgba(0, 0, 0, 0.2);
} }
.sidebar-nav { .sidebar-nav {
margin-bottom: 30px; margin-bottom: 30px;
background-color: #fff; background-color: #fff;
padding: 10px 20px 20px; 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 class="nav-header" ng-show="totalAria2Downloads()">{{ 'Global Statistics' | translate }}</li>
<li> <li>
<div <div
id="global-graph"
yticks="3" yticks="3"
xticks="1" xticks="1"
dspeed="gstats.downloadSpeed" dspeed="gstats.downloadSpeed"
@ -329,14 +330,15 @@
draw="true"> draw="true">
</div> </div>
</li> </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> </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 /> <br />
<!-- {{{ download filters --> <!-- {{{ download filters -->
<ul id="filters" class="clearfix nav nav-list" ng-show="enable.sidebar.filters"> <ul id="filters" class="clearfix nav nav-list" ng-show="enable.sidebar.filters">
<li class="nav-header">{{ 'Download Filters' | translate }}</li> <li class="nav-header">{{ 'Download Filters' | translate }}</li>
@ -438,7 +440,7 @@
ng-repeat="download in getDownloads()" ng-repeat="download in getDownloads()"
class="row-fluid download" data-gid="{{download.gid}}" class="row-fluid download" data-gid="{{download.gid}}"
ng-click="toggleCollapsed(download)"> ng-click="toggleCollapsed(download)">
<div class="download-name download-item download-controls"> <div class="download-name download-item download-controls clearfix">
<!-- {{{ download control buttons --> <!-- {{{ download control buttons -->
<div class="btn-group" role="group" ng-click="$event.stopPropagation()"> <div class="btn-group" role="group" ng-click="$event.stopPropagation()">
<button <button