From a89d45327424db955d082411c2b205d46b29bd6e Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Tue, 5 Jul 2016 01:32:09 +0800
Subject: [PATCH] refactor code

---
 src/index.html                                |   15 +-
 src/styles/aria-ng.css                        | 1042 -----------------
 .../controls/angular-promise-buttons.css      |  113 ++
 src/styles/controls/chart.css                 |   35 +
 src/styles/controls/global-status.css         |   20 +
 src/styles/controls/new-task-table.css        |   24 +
 src/styles/controls/piece-bar-map.css         |   43 +
 src/styles/controls/settings-table.css        |   77 ++
 src/styles/controls/task-table.css            |  103 ++
 src/styles/core/core.css                      |  131 +++
 src/styles/core/extend.css                    |   50 +
 src/styles/theme/default.css                  |  439 +++++++
 12 files changed, 1048 insertions(+), 1044 deletions(-)
 delete mode 100644 src/styles/aria-ng.css
 create mode 100644 src/styles/controls/angular-promise-buttons.css
 create mode 100644 src/styles/controls/chart.css
 create mode 100644 src/styles/controls/global-status.css
 create mode 100644 src/styles/controls/new-task-table.css
 create mode 100644 src/styles/controls/piece-bar-map.css
 create mode 100644 src/styles/controls/settings-table.css
 create mode 100644 src/styles/controls/task-table.css
 create mode 100644 src/styles/core/core.css
 create mode 100644 src/styles/core/extend.css
 create mode 100644 src/styles/theme/default.css
diff --git a/src/index.html b/src/index.html
index a17961b..bb06380 100644
--- a/src/index.html
+++ b/src/index.html
@@ -25,7 +25,16 @@
     <link rel="stylesheet" href="../bower_components/angular-dragula/dist/dragula.min.css"/>
     <!-- endbuild -->
     <!-- build:css css/aria-ng.min.css -->
-    <link rel="stylesheet" href="styles/aria-ng.css">
+    <link rel="stylesheet" href="styles/core/core.css">
+    <link rel="stylesheet" href="styles/core/extend.css">
+    <link rel="stylesheet" href="styles/controls/global-status.css"/>
+    <link rel="stylesheet" href="styles/controls/task-table.css"/>
+    <link rel="stylesheet" href="styles/controls/settings-table.css"/>
+    <link rel="stylesheet" href="styles/controls/new-task-table.css"/>
+    <link rel="stylesheet" href="styles/controls/piece-bar-map.css"/>
+    <link rel="stylesheet" href="styles/controls/chart.css"/>
+    <link rel="stylesheet" href="styles/controls/angular-promise-buttons.css"/>
+    <link rel="stylesheet" href="styles/theme/default.css">
     <!-- endbuild -->
 </head>
 <body class="hold-transition skin-aria-ng sidebar-mini fixed">
@@ -167,7 +176,9 @@
                     <a href="javascript:void(0);">
                         <i class="fa fa-cogs"></i>
                         <span translate>Aria2 Settings</span>
-                        <i class="fa fa-angle-left pull-right"></i>
+                        <span class="pull-right-container">
+                            <i class="fa fa-angle-left pull-right"></i>
+                        </span>
                     </a>
                     <ul class="treeview-menu">
                         <li data-href-match="/settings/aria2/basic">
diff --git a/src/styles/aria-ng.css b/src/styles/aria-ng.css
deleted file mode 100644
index 60ef3c6..0000000
--- a/src/styles/aria-ng.css
+++ /dev/null
@@ -1,1042 +0,0 @@
-/*!
- * AriaNg
- * https://github.com/mayswind/AriaNg
- */
-
-/* basic */
-body {
-    -ms-user-select: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    user-select: none;
-}
-
-td {
-    vertical-align: middle !important;
-}
-
-.main-header .navbar .navbar-searchbar {
-    padding-top: 8px;
-    padding-right: 20px;
-    float: right;
-}
-
-.content-wrapper > .content-body {
-    overflow-y: scroll;
-}
-
-.dropdown-menu.right-align {
-    left: inherit;
-    right: 0;
-}
-
-.default-cursor {
-    cursor: default !important;
-}
-
-.pointer-cursor {
-    cursor: pointer !important;
-}
-
-@media (max-width: 767px) {
-    .navbar-nav .open .dropdown-menu {
-        position: absolute;
-        background-color: #fff;
-    }
-}
-
-/* toolbar */
-.toolbar {
-    cursor: pointer;
-}
-
-.toolbar:active {
-    -webkit-box-shadow: inset 0 2px 6px rgba(0, 0, 0, .125);
-    -moz-box-shadow: inset 0 2px 6px rgba(0, 0, 0, .125);
-    box-shadow: inset 0 2px 6px rgba(0, 0, 0, .125);
-}
-
-/* dropdown-submenu */
-.dropdown-menu small {
-    color: #999;
-}
-
-.dropdown-submenu {
-    position: relative;
-}
-
-.dropdown-submenu > .dropdown-menu {
-    top: 0;
-    left: 100%;
-    margin-top: -6px;
-    margin-left: -1px;
-    -webkit-border-radius: 0 6px 6px 6px;
-    -moz-border-radius: 0 6px 6px;
-    border-radius: 0 6px 6px 6px;
-}
-
-.dropdown-submenu:hover > .dropdown-menu {
-    display: block;
-}
-
-.dropdown-submenu > a:after {
-    display: block;
-    content: " ";
-    float: right;
-    width: 0;
-    height: 0;
-    border-color: transparent;
-    border-style: solid;
-    border-width: 5px 0 5px 5px;
-    border-left-color: #ccc;
-    margin-top: 5px;
-    margin-right: -10px;
-}
-
-.dropdown-submenu:hover > a:after {
-    border-left-color: #fff;
-}
-
-.dropdown-submenu.pull-left {
-    float: none;
-}
-
-.dropdown-submenu.pull-left > .dropdown-menu {
-    left: -100%;
-    margin-left: 10px;
-    -webkit-border-radius: 6px 0 6px 6px;
-    -moz-border-radius: 6px 0 6px 6px;
-    border-radius: 6px 0 6px 6px;
-}
-
-/* scrollbar */
-::-webkit-scrollbar {
-    width: 10px;
-}
-
-::-webkit-scrollbar-thumb {
-    background-clip: padding-box;
-    background-color: #c4d2db;
-    min-height: 28px;
-}
-
-::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active {
-    background-color: #d4dfe7;
-}
-
-@media (max-width: 767px) {
-    ::-webkit-scrollbar {
-        width: 6px;
-    }
-}
-
-/* skin-aria-ng */
-.skin-aria-ng {
-    overflow-y: hidden;
-}
-
-.skin-aria-ng, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .sweet-alert {
-    font-family: 'Hiragino Sans GB', 'Microsoft YaHei', 'STHeiti', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-}
-
-.skin-aria-ng .main-header .navbar {
-    background-color: #f6f6f6;
-    border-bottom: 1px solid #ddd;
-}
-
-.skin-aria-ng .main-header .navbar .navbar-nav {
-    margin-left: 5px;
-}
-
-.skin-aria-ng .main-header .navbar .nav > li {
-    display: inline-block;
-}
-
-.skin-aria-ng .main-header .navbar .nav > li > a {
-    color: #707070;
-    font-size: 16px;
-    padding-left: 10px;
-    padding-right: 10px;
-}
-
-.skin-aria-ng .main-header .navbar .nav > li > a:hover,
-.skin-aria-ng .main-header .navbar .nav > li > a:active,
-.skin-aria-ng .main-header .navbar .nav > li > a:focus,
-.skin-aria-ng .main-header .navbar .nav .open > a,
-.skin-aria-ng .main-header .navbar .nav .open > a:hover,
-.skin-aria-ng .main-header .navbar .nav .open > a:focus,
-.skin-aria-ng .main-header .navbar .nav > .active > a {
-    color: #0080ff;
-}
-
-.skin-aria-ng .main-header .navbar .nav > li.disabled > a {
-    color: #ccc !important;
-    pointer-events: none !important;
-}
-
-.skin-aria-ng .main-header .navbar .nav > li.divider {
-    padding: 10px 0 10px 0;
-    margin-left: 4px;
-    margin-right: 4px;
-    border-right: 1px solid #ccc;
-    position: relative;
-    top: 15px;
-}
-
-.skin-aria-ng .main-header .navbar .sidebar-toggle, .skin-aria-ng .main-footer .sidebar-toggle {
-    color: #707070;
-}
-
-.skin-aria-ng .main-header .navbar .sidebar-toggle:hover, .skin-aria-ng .main-footer .sidebar-toggle:hover {
-    color: #0080ff;
-}
-
-.skin-aria-ng .main-header .navbar .navbar-searchbar .form-control-icon {
-    color: #999999;
-}
-
-@media (max-width: 767px) {
-    .skin-aria-ng .main-header .navbar {
-        padding-left: 20px;
-    }
-
-    .skin-aria-ng .main-header .navbar .navbar-nav {
-        margin-left: -10px;
-    }
-
-    .skin-aria-ng .main-header .navbar .nav > li.divider {
-        margin-left: 0;
-        margin-right: 0;
-        top: 5px;
-    }
-
-    .skin-aria-ng .main-header .navbar .dropdown-menu li.divider {
-        background-color: rgba(255, 255, 255, 0.1);
-    }
-}
-
-.skin-aria-ng .main-header .logo {
-    background-color: #3c4852;
-    color: #ffffff;
-    border-bottom: 1px solid #59636b;
-}
-
-.skin-aria-ng .main-header .logo:hover {
-    color: #cccccc;
-}
-
-.skin-aria-ng .content-header {
-    background: transparent;
-}
-
-.skin-aria-ng .wrapper,
-.skin-aria-ng .main-sidebar,
-.skin-aria-ng .left-side {
-    background-color: #3c4852;
-}
-
-.skin-aria-ng .sidebar-menu > li.header {
-    color: #707070;
-    background-color: #2e343c;
-    padding-top: 3px;
-    padding-bottom: 3px;
-}
-
-.skin-aria-ng .sidebar-menu > li > a {
-    border-left: 3px solid transparent;
-    padding-top: 9px;
-    padding-bottom: 9px;
-}
-
-.skin-aria-ng .sidebar-menu > li:hover > a {
-    color: #dfdfdf;
-    background-color: #313a42;
-}
-
-.skin-aria-ng .sidebar-menu > li.active > a {
-    color: #5399e8;
-    background-color: #252c30;
-}
-
-.skin-aria-ng .sidebar-menu > li.treeview:hover > a {
-    color: #a2b5b9;
-    background-color: #3c4852;
-}
-
-.skin-aria-ng .sidebar-menu > li.treeview.active > a, .skin-aria-ng .sidebar-menu > li.treeview.active:hover > a {
-    color: #5399e8;
-    background-color: #3c4852;
-}
-
-.skin-aria-ng .sidebar-menu > li.treeview > a:hover {
-    color: #dfdfdf;
-    background-color: #313a42;
-}
-
-.skin-aria-ng .sidebar-menu > li.treeview > ul.treeview-menu {
-    margin: 0;
-    padding: 0;
-    background-color: #3c4852;
-}
-
-.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 {
-    color: #dfdfdf;
-    background-color: #313a42;
-}
-
-.skin-aria-ng .sidebar-menu > li.treeview > ul.treeview-menu > li.active > a {
-    color: #5399e8;
-    background-color: #252c30;
-}
-
-.skin-aria-ng .sidebar-menu i.fa {
-    font-size: 16px;
-}
-
-.skin-aria-ng .sidebar a {
-    color: #a2b5b9;
-}
-
-.skin-aria-ng .sidebar a:hover {
-    text-decoration: none;
-}
-
-@media (max-width: 767px) {
-    .skin-aria-ng .main-sidebar {
-        margin-top: 5px;
-    }
-}
-
-.skin-aria-ng .content-wrapper, .right-side {
-    background-color: #fff;
-}
-
-.skin-aria-ng .content-wrapper .form-control[type='text'] {
-    padding-left: 14px;
-}
-
-@media screen and (max-width: 767px) {
-    .skin-aria-ng .content-wrapper .content {
-        margin-top: 5px;
-    }
-}
-
-.skin-aria-ng .main-footer {
-    font-size: 12px;
-}
-
-.skin-aria-ng .main-footer .sidebar-toggle {
-    float: left;
-    background-color: transparent;
-    background-image: none;
-    padding: 0 15px 0 0;
-    font-family: fontAwesome;
-}
-
-.skin-aria-ng .main-footer .sidebar-toggle:before {
-    content: "\f0c9";
-}
-
-.skin-aria-ng .global-status {
-    margin-right: 10px;
-    color: inherit;
-}
-
-.skin-aria-ng .global-status:hover {
-    border: 1px solid #ccc;
-    margin-right: 9px;
-    margin-top: -1px
-}
-
-.skin-aria-ng .progress-bar-primary {
-    background-color: #208fe5;
-}
-
-.skin-aria-ng .icon-primary {
-    color: #3c8dbc;
-}
-
-.skin-aria-ng .icon-download {
-    color: #3a89e9;
-}
-
-.skin-aria-ng .icon-upload {
-    color: #74a329;
-}
-
-.skin-aria-ng .icon-seeder {
-    color: #da7362;
-}
-
-.skin-aria-ng .nav-tabs-custom {
-    -webkit-box-shadow: none;
-    -moz-box-shadow: none;
-    box-shadow: none;
-    margin-bottom: 0;
-}
-
-.skin-aria-ng .nav-tabs-custom > .nav-tabs {
-    border-bottom: 1px dotted #ddd;
-}
-
-.skin-aria-ng .nav-tabs-custom > .nav-tabs > li {
-    border-top: 0;
-    margin-top: 1px;
-    margin-right: 2px;
-}
-
-.skin-aria-ng .nav-tabs-custom > .nav-tabs > li.active {
-    border-bottom: 2px solid #208fe5;
-}
-
-.skin-aria-ng .nav-tabs-custom > .nav-tabs > li.slim > a {
-    padding-left: 5px;
-    padding-right: 5px;
-}
-
-.skin-aria-ng .nav-tabs-custom > .nav-tabs > li.slim.active {
-    margin-bottom: -1px;
-    border-bottom: inherit;
-}
-
-.skin-aria-ng .nav-tabs-custom > .nav-tabs > li > a {
-    color: #aaa;
-    border: 0;
-}
-
-.skin-aria-ng .nav-tabs-custom > .nav-tabs > li > a:hover,
-.skin-aria-ng .nav-tabs-custom > .nav-tabs > li > a:active,
-.skin-aria-ng .nav-tabs-custom > .nav-tabs > li.active > a{
-    color: #208fe5;
-}
-
-.skin-aria-ng .tooltip.tooltip-success.in, .skin-aria-ng .tooltip.tooltip-warning.in, .skin-aria-ng .tooltip.tooltip-error.in {
-    filter: alpha(opacity=95);
-    opacity: 0.95
-}
-
-.skin-aria-ng .tooltip.tooltip-success.top .tooltip-arrow,
-.skin-aria-ng .tooltip.tooltip-success.top-left .tooltip-arrow,
-.skin-aria-ng .tooltip.tooltip-success.top-right .tooltip-arrow {
-    border-top-color: #00a65a;
-}
-
-.skin-aria-ng .tooltip.tooltip-warning.top .tooltip-arrow,
-.skin-aria-ng .tooltip.tooltip-warning.top-left .tooltip-arrow,
-.skin-aria-ng .tooltip.tooltip-warning.top-right .tooltip-arrow {
-    border-top-color: #f39c12;
-}
-
-.skin-aria-ng .tooltip.tooltip-error.top .tooltip-arrow,
-.skin-aria-ng .tooltip.tooltip-error.top-left .tooltip-arrow,
-.skin-aria-ng .tooltip.tooltip-error.top-right .tooltip-arrow {
-    border-top-color: #dd4b39;
-}
-
-.skin-aria-ng .tooltip.tooltip-success.left .tooltip-arrow {
-    border-left-color: #00a65a;
-}
-
-.skin-aria-ng .tooltip.tooltip-warning.left .tooltip-arrow {
-    border-left-color: #f39c12;
-}
-
-.skin-aria-ng .tooltip.tooltip-error.left .tooltip-arrow {
-    border-left-color: #dd4b39;
-}
-
-.skin-aria-ng .tooltip.tooltip-success.right .tooltip-arrow {
-    border-right-color: #00a65a;
-}
-
-.skin-aria-ng .tooltip.tooltip-warning.right .tooltip-arrow {
-    border-right-color: #f39c12;
-}
-
-.skin-aria-ng .tooltip.tooltip-error.right .tooltip-arrow {
-    border-right-color: #dd4b39;
-}
-
-.skin-aria-ng .tooltip.tooltip-success.bottom .tooltip-arrow,
-.skin-aria-ng .tooltip.tooltip-success.bottom-left .tooltip-arrow,
-.skin-aria-ng .tooltip.tooltip-success.bottom-right .tooltip-arrow {
-    border-bottom-color: #00a65a;
-}
-
-.skin-aria-ng .tooltip.tooltip-warning.bottom .tooltip-arrow,
-.skin-aria-ng .tooltip.tooltip-warning.bottom-left .tooltip-arrow,
-.skin-aria-ng .tooltip.tooltip-warning.bottom-right .tooltip-arrow {
-    border-bottom-color: #f39c12;
-}
-
-.skin-aria-ng .tooltip.tooltip-error.bottom .tooltip-arrow,
-.skin-aria-ng .tooltip.tooltip-error.bottom-left .tooltip-arrow,
-.skin-aria-ng .tooltip.tooltip-error.bottom-right .tooltip-arrow {
-    border-bottom-color: #dd4b39;
-}
-
-.skin-aria-ng .tooltip.tooltip-success .tooltip-inner {
-    background-color: #00a65a;
-}
-
-.skin-aria-ng .tooltip.tooltip-warning .tooltip-inner {
-    background-color: #f39c12;
-}
-
-.skin-aria-ng .tooltip.tooltip-error .tooltip-inner {
-    background-color: #dd4b39;
-}
-
-.skin-aria-ng .input-group .form-group.has-success + .input-group-addon {
-    border-color: #00a65a;
-    background-color: #00a65a;
-    color: #ffffff;
-}
-
-.skin-aria-ng .input-group .form-group.has-warning + .input-group-addon {
-    border-color: #f39c12;
-    background-color: #f39c12;
-    color: #ffffff;
-}
-
-.skin-aria-ng .input-group .form-group.has-error + .input-group-addon {
-    border-color: #dd4b39;
-    background-color: #dd4b39;
-    color: #ffffff;
-}
-
-.skin-aria-ng input::-webkit-input-placeholder,
-.skin-aria-ng input:-moz-placeholder,
-.skin-aria-ng input::-moz-placeholder,
-.skin-aria-ng input:-ms-input-placeholder {
-    color: #999;
-}
-
-.skin-aria-ng select.placeholder {
-    color: #999;
-}
-
-/* font-awesome extend */
-.fa-half {
-    font-size: 0.5em;
-}
-
-.fa-rotate-45 {
-    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
-    -webkit-transform: rotate(45deg);
-    -ms-transform: rotate(45deg);
-    transform: rotate(45deg);
-    filter: none;
-}
-
-.fa-right-bottom {
-    position: relative;
-    right: 0;
-    bottom: -6px;
-}
-
-.fa-order-asc, .fa-order-desc {
-    position: relative;
-}
-
-.fa-order-asc {
-    bottom: -2px;
-}
-
-.fa-order-desc {
-    bottom: 2px;
-}
-
-/* awesome-bootstrap-checkbox extend */
-.checkbox.checkbox-hide {
-    padding-left: 0;
-}
-
-.checkbox.checkbox-hide > input, .checkbox.checkbox-hide > input + label::before, .checkbox.checkbox-hide > input + label::after {
-    display: none !important;
-}
-
-.checkbox.checkbox-hide > label {
-    padding-left: 0;
-}
-
-.skin-aria-ng .checkbox-primary input[type="checkbox"]:checked + label::before, .checkbox-primary input[type="radio"]:checked + label::before {
-    background-color: #208fe5;
-    border-color: #208fe5;
-}
-
-/* angular-promise-buttons */
-@-webkit-keyframes three-quarters {
-    0% {
-        -webkit-transform: rotate(0deg);
-        -moz-transform: rotate(0deg);
-        -ms-transform: rotate(0deg);
-        -o-transform: rotate(0deg);
-        transform: rotate(0deg);
-    }
-
-    100% {
-        -webkit-transform: rotate(360deg);
-        -moz-transform: rotate(360deg);
-        -ms-transform: rotate(360deg);
-        -o-transform: rotate(360deg);
-        transform: rotate(360deg);
-    }
-}
-
-@-moz-keyframes three-quarters {
-    0% {
-        -webkit-transform: rotate(0deg);
-        -moz-transform: rotate(0deg);
-        -ms-transform: rotate(0deg);
-        -o-transform: rotate(0deg);
-        transform: rotate(0deg);
-    }
-
-    100% {
-        -webkit-transform: rotate(360deg);
-        -moz-transform: rotate(360deg);
-        -ms-transform: rotate(360deg);
-        -o-transform: rotate(360deg);
-        transform: rotate(360deg);
-    }
-}
-
-@-o-keyframes three-quarters {
-    0% {
-        -webkit-transform: rotate(0deg);
-        -moz-transform: rotate(0deg);
-        -ms-transform: rotate(0deg);
-        -o-transform: rotate(0deg);
-        transform: rotate(0deg);
-    }
-
-    100% {
-        -webkit-transform: rotate(360deg);
-        -moz-transform: rotate(360deg);
-        -ms-transform: rotate(360deg);
-        -o-transform: rotate(360deg);
-        transform: rotate(360deg);
-    }
-}
-
-@keyframes three-quarters {
-    0% {
-        -webkit-transform: rotate(0deg);
-        -moz-transform: rotate(0deg);
-        -ms-transform: rotate(0deg);
-        -o-transform: rotate(0deg);
-        transform: rotate(0deg);
-    }
-
-    100% {
-        -webkit-transform: rotate(360deg);
-        -moz-transform: rotate(360deg);
-        -ms-transform: rotate(360deg);
-        -o-transform: rotate(360deg);
-        transform: rotate(360deg);
-    }
-}
-
-.btn-spinner {
-    font-family: sans-serif;
-    font-weight: 100;
-}
-
-.btn-spinner:not(:required) {
-    -webkit-animation: three-quarters 1250ms infinite linear;
-    -moz-animation: three-quarters 1250ms infinite linear;
-    -ms-animation: three-quarters 1250ms infinite linear;
-    -o-animation: three-quarters 1250ms infinite linear;
-    animation: three-quarters 1250ms infinite linear;
-    border: 3px solid #8c8c8c;
-    border-right-color: transparent;
-    border-radius: 100%;
-    box-sizing: border-box;
-    display: inline-block;
-    position: relative;
-    vertical-align: middle;
-    overflow: hidden;
-    text-indent: -9999px;
-    width: 18px;
-    height: 18px;
-}
-
-.btn-primary .btn-spinner:not(:required), .btn-danger .btn-spinner:not(:required) {
-    border: 3px solid #efefef;
-    border-right-color: transparent;
-}
-
-.btn-spinner:not(:required) {
-    margin-left: -22px;
-    opacity: 0;
-    transition: 0.4s margin ease-out, 0.2s opacity ease-out;
-}
-
-.is-loading .btn-spinner {
-    transition: 0.2s margin ease-in, 0.4s opacity ease-in;
-    margin-left: 5px;
-    opacity: 1;
-}
-
-/* angular-dragula extend */
-.gu-mirror {
-    cursor: grabbing;
-    cursor: -moz-grabbing;
-    cursor: -webkit-grabbing;
-}
-
-/* global-status */
-.global-status {
-    cursor: pointer;
-}
-
-.global-status > .realtime-speed {
-    padding: 0 15px 0 15px;
-}
-
-.global-status > .realtime-speed:first-child {
-    padding-left: 5px;
-}
-
-.global-status > .realtime-speed:last-child {
-    padding-right: 5px;
-}
-
-.global-status span.realtime-speed > i {
-    padding-right: 2px;
-}
-
-/* chart */
-.chart-popover {
-    max-width: 320px;
-}
-
-.chart-popover .popover-content {
-    padding: 0;
-}
-
-.chart-pop-wrapper {
-    padding-left: 4px;
-    padding-right: 4px;
-    overflow-x: hidden;
-}
-
-.chart-pop {
-    display: table;
-}
-
-.chart-pop .loading {
-    width: 100%;
-    height: 100%;
-    display: table-cell;
-    text-align: center;
-    vertical-align: middle;
-}
-
-.global-status-chart {
-    width: 312px;
-    height: 200px;
-}
-
-.task-status-chart-wrapper {
-    overflow-x: hidden;
-}
-
-/* piece-bar / piece-map */
-.piece-bar-wrapper {
-    height: 20px;
-}
-
-.piece-bar {
-    width: 100%;
-}
-
-.piece-map {
-    padding-left: 6px;
-    padding-right: 2px;
-    line-height: 11px;
-}
-
-.piece-legends {
-    text-align: center;
-    margin-top: 4px;
-    margin-bottom: 4px;
-}
-
-.piece-legend {
-    display: inline-block;
-    margin-right: 4px;
-}
-
-.piece-legend .piece {
-    margin-right: 2px;
-}
-
-.piece-map .piece, .piece-legend .piece {
-    width: 10px;
-    height: 10px;
-    background-color: #eef2f4;
-    border: #dee2e5 solid 1px;
-    display: inline-block;
-    margin-right: 1px;
-}
-
-.piece-map .piece.piece-completed, .piece-legend .piece.piece-completed {
-    background-color: #b8dd69;
-    border-color: #b8dd69;
-}
-
-/* task-table */
-.task-table {
-    margin-left: 15px;
-    margin-right: 15px;
-}
-
-.skin-aria-ng .task-table {
-    background-color: #fff;
-}
-
-.task-table .task-table-title {
-    font-size: 12px;
-    padding-top: 4px;
-    padding-bottom: 4px;
-}
-
-.task-table .task-table-title a {
-    color: #000;
-    cursor: pointer;
-}
-
-.task-table > .task-table-body.draggable {
-    cursor: move;
-    cursor: grab;
-    cursor: -moz-grab;
-    cursor: -webkit-grab;
-}
-
-.task-table > .task-table-body > div.row {
-    padding-top: 8px;
-    padding-bottom: 8px;
-    border-top: 1px solid #ddd;
-}
-
-.task-table > div.row:first-child {
-    border-top: inherit;
-}
-
-@media (max-width: 767px) {
-    .task-table > .task-table-title {
-        display: none !important;
-    }
-
-    .task-table > .task-table-body > div.row:first-child {
-        border-top: inherit;
-    }
-}
-
-.skin-aria-ng .task-table > .task-table-body > div.row:nth-of-type(odd) {
-    background-color: #f9f9f9;
-}
-
-.skin-aria-ng .task-table > .task-table-body > div.row:hover {
-    background-color: #f5f5f5;
-}
-
-.task-table .task-name {
-    font-size: 14px;
-    display: block;
-    word-break: keep-all;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.task-table .task-files, .task-table .task-size {
-    font-size: 12px;
-    display: block;
-}
-
-.task-table .progress {
-    margin-bottom: 0;
-}
-
-.task-table .task-last-time, .task-table .task-seeders, .task-table .task-last-time + .task-download-speed {
-    color: #888;
-    font-size: 12px;
-}
-
-.task-table .task-seeders, .task-table .task-last-time + .task-download-speed {
-    margin-top: 1px;
-}
-
-.task-table .task-last-time + .task-download-speed {
-    padding-left: 20px;
-}
-
-.task-table .task-download-speed, .task-table .task-peer-download-speed {
-    font-size: 12px;
-}
-
-.task-table .checkbox, .task-table .radio {
-    margin-top: 0;
-    margin-bottom: 0;
-}
-
-.task-table .progress {
-    position: relative;
-}
-
-.task-table .progress span {
-    position: absolute;
-    display: block;
-    width: 100%;
-}
-
-.task-table .progress span.progress-lower {
-    color: #000;
-}
-
-@media (max-width: 767px) {
-    .task-table .task-peer-download-speed {
-        float: right;
-    }
-}
-
-/* settings-table */
-.settings-table {
-    margin-left: 15px;
-    margin-right: 15px;
-}
-
-.skin-aria-ng .settings-table {
-    background-color: #fff;
-}
-
-.settings-table > div.row {
-    padding-top: 8px;
-    padding-bottom: 8px;
-    border-top: 1px solid #ddd;
-}
-
-.settings-table > div.row:first-child {
-    border-top: inherit;
-}
-
-.skin-aria-ng .settings-table.striped > div.row:nth-of-type(odd) {
-    background-color: #f9f9f9;
-}
-
-.skin-aria-ng .settings-table.striped > div.row.no-background {
-    background-color: inherit;
-}
-
-.skin-aria-ng .settings-table.hoverable > div.row:hover {
-    background-color: #f5f5f5;
-}
-
-.skin-aria-ng .settings-table.hoverable > div.row.no-hover:hover {
-    background-color: inherit;
-}
-
-.skin-aria-ng .settings-table.hoverable > div.row:nth-of-type(odd).no-hover:hover {
-    background-color: #f9f9f9;
-}
-
-.settings-table .input-group-addon {
-    background-color: #eee;
-}
-
-.settings-table .asterisk {
-    color: red;
-}
-
-.settings-table .description {
-    color: #888;
-    font-size: 12px;
-    font-weight: normal;
-    display: block;
-}
-
-.settings-table em {
-    color: #888;
-    font-size: 12px;
-    font-weight: normal;
-}
-
-.settings-table .wholeline {
-    display: block;
-}
-
-.settings-table .setting-value .form-group {
-    margin-bottom: 0;
-}
-
-.settings-table .setting-value .form-group .form-control-icon {
-    color: #3c8dbc;
-}
-
-.settings-table .setting-value .form-group select.form-control + .form-control-icon > .form-control-feedback {
-    right: 10px;
-}
-
-.settings-table .setting-value .input-group .form-group .form-control:focus {
-    z-index: inherit;
-}
-
-.settings-table .tip {
-    font-size: 12px;
-    padding: 4px 8px 4px 8px;
-}
-
-@media (max-width: 767px) {
-    .settings-table .setting-key {
-        font-weight: bold;
-    }
-
-    .settings-table .description {
-        display: inline-block;
-    }
-}
-
-@media (min-width: 768px) {
-    .settings-table .setting-key-without-desc {
-        padding-top: 6px;
-    }
-}
-
-/* new-task-table */
-.new-task-table {
-    margin-left: 15px;
-    margin-right: 15px;
-}
-
-.skin-aria-ng .new-task-table {
-    background-color: #fff;
-}
-
-.new-task-table > div.row {
-    padding-top: 8px;
-    padding-bottom: 8px;
-}
-
-.new-task-table > div.row:first-child {
-    border-top: inherit;
-}
-
-.new-task-table .new-task-toollink > a {
-    margin-right: 20px;
-}
-
-@media (max-width: 767px) {
-    .new-task-table .new-task-toollink > a {
-        display: block;
-    }
-}
-
-/* miscellaneous */
diff --git a/src/styles/controls/angular-promise-buttons.css b/src/styles/controls/angular-promise-buttons.css
new file mode 100644
index 0000000..c58aa87
--- /dev/null
+++ b/src/styles/controls/angular-promise-buttons.css
@@ -0,0 +1,113 @@
+/* angular-promise-buttons */
+@-webkit-keyframes three-quarters {
+    0% {
+        -webkit-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -ms-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+
+    100% {
+        -webkit-transform: rotate(360deg);
+        -moz-transform: rotate(360deg);
+        -ms-transform: rotate(360deg);
+        -o-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+
+@-moz-keyframes three-quarters {
+    0% {
+        -webkit-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -ms-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+
+    100% {
+        -webkit-transform: rotate(360deg);
+        -moz-transform: rotate(360deg);
+        -ms-transform: rotate(360deg);
+        -o-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+
+@-o-keyframes three-quarters {
+    0% {
+        -webkit-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -ms-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+
+    100% {
+        -webkit-transform: rotate(360deg);
+        -moz-transform: rotate(360deg);
+        -ms-transform: rotate(360deg);
+        -o-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes three-quarters {
+    0% {
+        -webkit-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -ms-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+
+    100% {
+        -webkit-transform: rotate(360deg);
+        -moz-transform: rotate(360deg);
+        -ms-transform: rotate(360deg);
+        -o-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+
+.btn-spinner {
+    font-family: sans-serif;
+    font-weight: 100;
+}
+
+.btn-spinner:not(:required) {
+    -webkit-animation: three-quarters 1250ms infinite linear;
+    -moz-animation: three-quarters 1250ms infinite linear;
+    -ms-animation: three-quarters 1250ms infinite linear;
+    -o-animation: three-quarters 1250ms infinite linear;
+    animation: three-quarters 1250ms infinite linear;
+    border: 3px solid #8c8c8c;
+    border-right-color: transparent;
+    border-radius: 100%;
+    box-sizing: border-box;
+    display: inline-block;
+    position: relative;
+    vertical-align: middle;
+    overflow: hidden;
+    text-indent: -9999px;
+    width: 18px;
+    height: 18px;
+}
+
+.btn-primary .btn-spinner:not(:required), .btn-danger .btn-spinner:not(:required) {
+    border: 3px solid #efefef;
+    border-right-color: transparent;
+}
+
+.btn-spinner:not(:required) {
+    margin-left: -22px;
+    opacity: 0;
+    transition: 0.4s margin ease-out, 0.2s opacity ease-out;
+}
+
+.is-loading .btn-spinner {
+    transition: 0.2s margin ease-in, 0.4s opacity ease-in;
+    margin-left: 5px;
+    opacity: 1;
+}
diff --git a/src/styles/controls/chart.css b/src/styles/controls/chart.css
new file mode 100644
index 0000000..ae7d684
--- /dev/null
+++ b/src/styles/controls/chart.css
@@ -0,0 +1,35 @@
+/* chart */
+.chart-popover {
+    max-width: 320px;
+}
+
+.chart-popover .popover-content {
+    padding: 0;
+}
+
+.chart-pop-wrapper {
+    padding-left: 4px;
+    padding-right: 4px;
+    overflow-x: hidden;
+}
+
+.chart-pop {
+    display: table;
+}
+
+.chart-pop .loading {
+    width: 100%;
+    height: 100%;
+    display: table-cell;
+    text-align: center;
+    vertical-align: middle;
+}
+
+.global-status-chart {
+    width: 312px;
+    height: 200px;
+}
+
+.task-status-chart-wrapper {
+    overflow-x: hidden;
+}
diff --git a/src/styles/controls/global-status.css b/src/styles/controls/global-status.css
new file mode 100644
index 0000000..d397721
--- /dev/null
+++ b/src/styles/controls/global-status.css
@@ -0,0 +1,20 @@
+/* global-status */
+.global-status {
+    cursor: pointer;
+}
+
+.global-status > .realtime-speed {
+    padding: 0 15px 0 15px;
+}
+
+.global-status > .realtime-speed:first-child {
+    padding-left: 5px;
+}
+
+.global-status > .realtime-speed:last-child {
+    padding-right: 5px;
+}
+
+.global-status span.realtime-speed > i {
+    padding-right: 2px;
+}
diff --git a/src/styles/controls/new-task-table.css b/src/styles/controls/new-task-table.css
new file mode 100644
index 0000000..06472f4
--- /dev/null
+++ b/src/styles/controls/new-task-table.css
@@ -0,0 +1,24 @@
+/* new-task-table */
+.new-task-table {
+    margin-left: 15px;
+    margin-right: 15px;
+}
+
+.new-task-table > div.row {
+    padding-top: 8px;
+    padding-bottom: 8px;
+}
+
+.new-task-table > div.row:first-child {
+    border-top: inherit;
+}
+
+.new-task-table .new-task-toollink > a {
+    margin-right: 20px;
+}
+
+@media (max-width: 767px) {
+    .new-task-table .new-task-toollink > a {
+        display: block;
+    }
+}
diff --git a/src/styles/controls/piece-bar-map.css b/src/styles/controls/piece-bar-map.css
new file mode 100644
index 0000000..0e8e634
--- /dev/null
+++ b/src/styles/controls/piece-bar-map.css
@@ -0,0 +1,43 @@
+/* piece-bar / piece-map */
+.piece-bar-wrapper {
+    height: 20px;
+}
+
+.piece-bar {
+    width: 100%;
+}
+
+.piece-map {
+    padding-left: 6px;
+    padding-right: 2px;
+    line-height: 11px;
+}
+
+.piece-legends {
+    text-align: center;
+    margin-top: 4px;
+    margin-bottom: 4px;
+}
+
+.piece-legend {
+    display: inline-block;
+    margin-right: 4px;
+}
+
+.piece-legend .piece {
+    margin-right: 2px;
+}
+
+.piece-map .piece, .piece-legend .piece {
+    width: 10px;
+    height: 10px;
+    background-color: #eef2f4;
+    border: #dee2e5 solid 1px;
+    display: inline-block;
+    margin-right: 1px;
+}
+
+.piece-map .piece.piece-completed, .piece-legend .piece.piece-completed {
+    background-color: #b8dd69;
+    border-color: #b8dd69;
+}
diff --git a/src/styles/controls/settings-table.css b/src/styles/controls/settings-table.css
new file mode 100644
index 0000000..7ea633a
--- /dev/null
+++ b/src/styles/controls/settings-table.css
@@ -0,0 +1,77 @@
+/* settings-table */
+.settings-table {
+    margin-left: 15px;
+    margin-right: 15px;
+}
+
+.settings-table > div.row {
+    padding-top: 8px;
+    padding-bottom: 8px;
+    border-top: 1px solid #ddd;
+}
+
+.settings-table > div.row:first-child {
+    border-top: inherit;
+}
+
+.settings-table .input-group-addon {
+    background-color: #eee;
+}
+
+.settings-table .asterisk {
+    color: red;
+}
+
+.settings-table .description {
+    color: #888;
+    font-size: 12px;
+    font-weight: normal;
+    display: block;
+}
+
+.settings-table em {
+    color: #888;
+    font-size: 12px;
+    font-weight: normal;
+}
+
+.settings-table .wholeline {
+    display: block;
+}
+
+.settings-table .setting-value .form-group {
+    margin-bottom: 0;
+}
+
+.settings-table .setting-value .form-group .form-control-icon {
+    color: #3c8dbc;
+}
+
+.settings-table .setting-value .form-group select.form-control + .form-control-icon > .form-control-feedback {
+    right: 10px;
+}
+
+.settings-table .setting-value .input-group .form-group .form-control:focus {
+    z-index: inherit;
+}
+
+.settings-table .tip {
+    font-size: 12px;
+    padding: 4px 8px 4px 8px;
+}
+
+@media (max-width: 767px) {
+    .settings-table .setting-key {
+        font-weight: bold;
+    }
+
+    .settings-table .description {
+        display: inline-block;
+    }
+}
+
+@media (min-width: 768px) {
+    .settings-table .setting-key-without-desc {
+        padding-top: 6px;
+    }
+}
diff --git a/src/styles/controls/task-table.css b/src/styles/controls/task-table.css
new file mode 100644
index 0000000..952b834
--- /dev/null
+++ b/src/styles/controls/task-table.css
@@ -0,0 +1,103 @@
+/* task-table */
+.task-table {
+    margin-left: 15px;
+    margin-right: 15px;
+}
+
+.task-table .task-table-title {
+    font-size: 12px;
+    padding-top: 4px;
+    padding-bottom: 4px;
+}
+
+.task-table .task-table-title a {
+    color: #000;
+    cursor: pointer;
+}
+
+.task-table > .task-table-body.draggable {
+    cursor: move;
+    cursor: grab;
+    cursor: -moz-grab;
+    cursor: -webkit-grab;
+}
+
+.task-table > .task-table-body > div.row {
+    padding-top: 8px;
+    padding-bottom: 8px;
+    border-top: 1px solid #ddd;
+}
+
+.task-table > div.row:first-child {
+    border-top: inherit;
+}
+
+@media (max-width: 767px) {
+    .task-table > .task-table-title {
+        display: none !important;
+    }
+
+    .task-table > .task-table-body > div.row:first-child {
+        border-top: inherit;
+    }
+}
+
+.task-table .task-name {
+    font-size: 14px;
+    display: block;
+    word-break: keep-all;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.task-table .task-files, .task-table .task-size {
+    font-size: 12px;
+    display: block;
+}
+
+.task-table .progress {
+    margin-bottom: 0;
+}
+
+.task-table .task-last-time, .task-table .task-seeders, .task-table .task-last-time + .task-download-speed {
+    color: #888;
+    font-size: 12px;
+}
+
+.task-table .task-seeders, .task-table .task-last-time + .task-download-speed {
+    margin-top: 1px;
+}
+
+.task-table .task-last-time + .task-download-speed {
+    padding-left: 20px;
+}
+
+.task-table .task-download-speed, .task-table .task-peer-download-speed {
+    font-size: 12px;
+}
+
+.task-table .checkbox, .task-table .radio {
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+.task-table .progress {
+    position: relative;
+}
+
+.task-table .progress span {
+    position: absolute;
+    display: block;
+    width: 100%;
+}
+
+.task-table .progress span.progress-lower {
+    color: #000;
+}
+
+@media (max-width: 767px) {
+    .task-table .task-peer-download-speed {
+        float: right;
+    }
+}
diff --git a/src/styles/core/core.css b/src/styles/core/core.css
new file mode 100644
index 0000000..cafa4c4
--- /dev/null
+++ b/src/styles/core/core.css
@@ -0,0 +1,131 @@
+/*!
+ * AriaNg
+ * https://github.com/mayswind/AriaNg
+ */
+
+/* basic */
+body {
+    -ms-user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+}
+
+td {
+    vertical-align: middle !important;
+}
+
+.main-header .navbar .navbar-searchbar {
+    padding-top: 8px;
+    padding-right: 20px;
+    float: right;
+}
+
+.content-wrapper > .content-body {
+    overflow-y: scroll;
+}
+
+.dropdown-menu.right-align {
+    left: inherit;
+    right: 0;
+}
+
+.default-cursor {
+    cursor: default !important;
+}
+
+.pointer-cursor {
+    cursor: pointer !important;
+}
+
+@media (max-width: 767px) {
+    .navbar-nav .open .dropdown-menu {
+        position: absolute;
+        background-color: #fff;
+    }
+}
+
+/* toolbar */
+.toolbar {
+    cursor: pointer;
+}
+
+.toolbar:active {
+    -webkit-box-shadow: inset 0 2px 6px rgba(0, 0, 0, .125);
+    -moz-box-shadow: inset 0 2px 6px rgba(0, 0, 0, .125);
+    box-shadow: inset 0 2px 6px rgba(0, 0, 0, .125);
+}
+
+/* dropdown-submenu */
+.dropdown-menu small {
+    color: #999;
+}
+
+.dropdown-submenu {
+    position: relative;
+}
+
+.dropdown-submenu > .dropdown-menu {
+    top: 0;
+    left: 100%;
+    margin-top: -6px;
+    margin-left: -1px;
+    -webkit-border-radius: 0 6px 6px 6px;
+    -moz-border-radius: 0 6px 6px;
+    border-radius: 0 6px 6px 6px;
+}
+
+.dropdown-submenu:hover > .dropdown-menu {
+    display: block;
+}
+
+.dropdown-submenu > a:after {
+    display: block;
+    content: " ";
+    float: right;
+    width: 0;
+    height: 0;
+    border-color: transparent;
+    border-style: solid;
+    border-width: 5px 0 5px 5px;
+    border-left-color: #ccc;
+    margin-top: 5px;
+    margin-right: -10px;
+}
+
+.dropdown-submenu:hover > a:after {
+    border-left-color: #fff;
+}
+
+.dropdown-submenu.pull-left {
+    float: none;
+}
+
+.dropdown-submenu.pull-left > .dropdown-menu {
+    left: -100%;
+    margin-left: 10px;
+    -webkit-border-radius: 6px 0 6px 6px;
+    -moz-border-radius: 6px 0 6px 6px;
+    border-radius: 6px 0 6px 6px;
+}
+
+/* scrollbar */
+::-webkit-scrollbar {
+    width: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+    background-clip: padding-box;
+    background-color: #c4d2db;
+    min-height: 28px;
+}
+
+::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active {
+    background-color: #d4dfe7;
+}
+
+@media (max-width: 767px) {
+    ::-webkit-scrollbar {
+        width: 6px;
+    }
+}
diff --git a/src/styles/core/extend.css b/src/styles/core/extend.css
new file mode 100644
index 0000000..97c19dc
--- /dev/null
+++ b/src/styles/core/extend.css
@@ -0,0 +1,50 @@
+/* font-awesome extend */
+.fa-half {
+    font-size: 0.5em;
+}
+
+.fa-rotate-45 {
+    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
+    -webkit-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    transform: rotate(45deg);
+    filter: none;
+}
+
+.fa-right-bottom {
+    position: relative;
+    right: 0;
+    bottom: -6px;
+}
+
+.fa-order-asc, .fa-order-desc {
+    position: relative;
+}
+
+.fa-order-asc {
+    bottom: -2px;
+}
+
+.fa-order-desc {
+    bottom: 2px;
+}
+
+/* awesome-bootstrap-checkbox extend */
+.checkbox.checkbox-hide {
+    padding-left: 0;
+}
+
+.checkbox.checkbox-hide > input, .checkbox.checkbox-hide > input + label::before, .checkbox.checkbox-hide > input + label::after {
+    display: none !important;
+}
+
+.checkbox.checkbox-hide > label {
+    padding-left: 0;
+}
+
+/* angular-dragula extend */
+.gu-mirror {
+    cursor: grabbing;
+    cursor: -moz-grabbing;
+    cursor: -webkit-grabbing;
+}
diff --git a/src/styles/theme/default.css b/src/styles/theme/default.css
new file mode 100644
index 0000000..dfc3651
--- /dev/null
+++ b/src/styles/theme/default.css
@@ -0,0 +1,439 @@
+/* skin-aria-ng core */
+.skin-aria-ng {
+    overflow-y: hidden;
+}
+
+.skin-aria-ng, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .sweet-alert {
+    font-family: 'Hiragino Sans GB', 'Microsoft YaHei', 'STHeiti', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+.skin-aria-ng .main-header .navbar {
+    background-color: #f6f6f6;
+    border-bottom: 1px solid #ddd;
+}
+
+.skin-aria-ng .main-header .navbar .navbar-nav {
+    margin-left: 5px;
+}
+
+.skin-aria-ng .main-header .navbar .nav > li {
+    display: inline-block;
+}
+
+.skin-aria-ng .main-header .navbar .nav > li > a {
+    color: #707070;
+    font-size: 16px;
+    padding-left: 10px;
+    padding-right: 10px;
+}
+
+.skin-aria-ng .main-header .navbar .nav > li > a:hover,
+.skin-aria-ng .main-header .navbar .nav > li > a:active,
+.skin-aria-ng .main-header .navbar .nav > li > a:focus,
+.skin-aria-ng .main-header .navbar .nav .open > a,
+.skin-aria-ng .main-header .navbar .nav .open > a:hover,
+.skin-aria-ng .main-header .navbar .nav .open > a:focus,
+.skin-aria-ng .main-header .navbar .nav > .active > a {
+    color: #0080ff;
+}
+
+.skin-aria-ng .main-header .navbar .nav > li.disabled > a {
+    color: #ccc !important;
+    pointer-events: none !important;
+}
+
+.skin-aria-ng .main-header .navbar .nav > li.divider {
+    padding: 10px 0 10px 0;
+    margin-left: 4px;
+    margin-right: 4px;
+    border-right: 1px solid #ccc;
+    position: relative;
+    top: 15px;
+}
+
+.skin-aria-ng .main-header .navbar .sidebar-toggle, .skin-aria-ng .main-footer .sidebar-toggle {
+    color: #707070;
+}
+
+.skin-aria-ng .main-header .navbar .sidebar-toggle:hover, .skin-aria-ng .main-footer .sidebar-toggle:hover {
+    color: #0080ff;
+}
+
+.skin-aria-ng .main-header .navbar .navbar-searchbar .form-control-icon {
+    color: #999999;
+}
+
+@media (max-width: 767px) {
+    .skin-aria-ng .main-header .navbar {
+        padding-left: 20px;
+    }
+
+    .skin-aria-ng .main-header .navbar .navbar-nav {
+        margin-left: -10px;
+    }
+
+    .skin-aria-ng .main-header .navbar .nav > li.divider {
+        margin-left: 0;
+        margin-right: 0;
+        top: 5px;
+    }
+
+    .skin-aria-ng .main-header .navbar .dropdown-menu li.divider {
+        background-color: rgba(255, 255, 255, 0.1);
+    }
+}
+
+.skin-aria-ng .main-header .logo {
+    background-color: #3c4852;
+    color: #ffffff;
+    border-bottom: 1px solid #59636b;
+}
+
+.skin-aria-ng .main-header .logo:hover {
+    color: #cccccc;
+}
+
+.skin-aria-ng .content-header {
+    background: transparent;
+}
+
+.skin-aria-ng .wrapper,
+.skin-aria-ng .main-sidebar,
+.skin-aria-ng .left-side {
+    background-color: #3c4852;
+}
+
+.skin-aria-ng .sidebar-menu > li.header {
+    color: #707070;
+    background-color: #2e343c;
+    padding-top: 3px;
+    padding-bottom: 3px;
+}
+
+.skin-aria-ng .sidebar-menu > li > a {
+    border-left: 3px solid transparent;
+    padding-top: 9px;
+    padding-bottom: 9px;
+}
+
+.skin-aria-ng .sidebar-menu > li:hover > a {
+    color: #dfdfdf;
+    background-color: #313a42;
+}
+
+.skin-aria-ng .sidebar-menu > li.active > a {
+    color: #5399e8;
+    background-color: #252c30;
+}
+
+.skin-aria-ng .sidebar-menu > li.treeview:hover > a {
+    color: #a2b5b9;
+    background-color: #3c4852;
+}
+
+.skin-aria-ng .sidebar-menu > li.treeview.active > a, .skin-aria-ng .sidebar-menu > li.treeview.active:hover > a {
+    color: #5399e8;
+    background-color: #3c4852;
+}
+
+.skin-aria-ng .sidebar-menu > li.treeview > a:hover {
+    color: #dfdfdf;
+    background-color: #313a42;
+}
+
+.skin-aria-ng .sidebar-menu > li.treeview > ul.treeview-menu {
+    margin: 0;
+    padding: 0;
+    background-color: #3c4852;
+}
+
+.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 {
+    color: #dfdfdf;
+    background-color: #313a42;
+}
+
+.skin-aria-ng .sidebar-menu > li.treeview > ul.treeview-menu > li.active > a {
+    color: #5399e8;
+    background-color: #252c30;
+}
+
+.skin-aria-ng .sidebar-menu i.fa {
+    font-size: 16px;
+}
+
+.skin-aria-ng .sidebar a {
+    color: #a2b5b9;
+}
+
+.skin-aria-ng .sidebar a:hover {
+    text-decoration: none;
+}
+
+@media (max-width: 767px) {
+    .skin-aria-ng .main-sidebar {
+        margin-top: 5px;
+    }
+}
+
+.skin-aria-ng .content-wrapper, .right-side {
+    background-color: #fff;
+}
+
+.skin-aria-ng .content-wrapper .form-control[type='text'] {
+    padding-left: 14px;
+}
+
+@media screen and (max-width: 767px) {
+    .skin-aria-ng .content-wrapper .content {
+        margin-top: 5px;
+    }
+}
+
+.skin-aria-ng .main-footer {
+    font-size: 12px;
+}
+
+.skin-aria-ng .main-footer .sidebar-toggle {
+    float: left;
+    background-color: transparent;
+    background-image: none;
+    padding: 0 15px 0 0;
+    font-family: fontAwesome;
+}
+
+.skin-aria-ng .main-footer .sidebar-toggle:before {
+    content: "\f0c9";
+}
+
+.skin-aria-ng .global-status {
+    margin-right: 10px;
+    color: inherit;
+}
+
+.skin-aria-ng .global-status:hover {
+    border: 1px solid #ccc;
+    margin-right: 9px;
+    margin-top: -1px
+}
+
+.skin-aria-ng .progress-bar-primary {
+    background-color: #208fe5;
+}
+
+.skin-aria-ng .icon-primary {
+    color: #3c8dbc;
+}
+
+.skin-aria-ng .icon-download {
+    color: #3a89e9;
+}
+
+.skin-aria-ng .icon-upload {
+    color: #74a329;
+}
+
+.skin-aria-ng .icon-seeder {
+    color: #da7362;
+}
+
+.skin-aria-ng .nav-tabs-custom {
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+    box-shadow: none;
+    margin-bottom: 0;
+}
+
+.skin-aria-ng .nav-tabs-custom > .nav-tabs {
+    border-bottom: 1px dotted #ddd;
+}
+
+.skin-aria-ng .nav-tabs-custom > .nav-tabs > li {
+    border-top: 0;
+    margin-top: 1px;
+    margin-right: 2px;
+}
+
+.skin-aria-ng .nav-tabs-custom > .nav-tabs > li.active {
+    border-bottom: 2px solid #208fe5;
+}
+
+.skin-aria-ng .nav-tabs-custom > .nav-tabs > li.slim > a {
+    padding-left: 5px;
+    padding-right: 5px;
+}
+
+.skin-aria-ng .nav-tabs-custom > .nav-tabs > li.slim.active {
+    margin-bottom: -1px;
+    border-bottom: inherit;
+}
+
+.skin-aria-ng .nav-tabs-custom > .nav-tabs > li > a {
+    color: #aaa;
+    border: 0;
+}
+
+.skin-aria-ng .nav-tabs-custom > .nav-tabs > li > a:hover,
+.skin-aria-ng .nav-tabs-custom > .nav-tabs > li > a:active,
+.skin-aria-ng .nav-tabs-custom > .nav-tabs > li.active > a {
+    color: #208fe5;
+}
+
+.skin-aria-ng .tooltip.tooltip-success.in, .skin-aria-ng .tooltip.tooltip-warning.in, .skin-aria-ng .tooltip.tooltip-error.in {
+    filter: alpha(opacity=95);
+    opacity: 0.95
+}
+
+.skin-aria-ng .tooltip.tooltip-success.top .tooltip-arrow,
+.skin-aria-ng .tooltip.tooltip-success.top-left .tooltip-arrow,
+.skin-aria-ng .tooltip.tooltip-success.top-right .tooltip-arrow {
+    border-top-color: #00a65a;
+}
+
+.skin-aria-ng .tooltip.tooltip-warning.top .tooltip-arrow,
+.skin-aria-ng .tooltip.tooltip-warning.top-left .tooltip-arrow,
+.skin-aria-ng .tooltip.tooltip-warning.top-right .tooltip-arrow {
+    border-top-color: #f39c12;
+}
+
+.skin-aria-ng .tooltip.tooltip-error.top .tooltip-arrow,
+.skin-aria-ng .tooltip.tooltip-error.top-left .tooltip-arrow,
+.skin-aria-ng .tooltip.tooltip-error.top-right .tooltip-arrow {
+    border-top-color: #dd4b39;
+}
+
+.skin-aria-ng .tooltip.tooltip-success.left .tooltip-arrow {
+    border-left-color: #00a65a;
+}
+
+.skin-aria-ng .tooltip.tooltip-warning.left .tooltip-arrow {
+    border-left-color: #f39c12;
+}
+
+.skin-aria-ng .tooltip.tooltip-error.left .tooltip-arrow {
+    border-left-color: #dd4b39;
+}
+
+.skin-aria-ng .tooltip.tooltip-success.right .tooltip-arrow {
+    border-right-color: #00a65a;
+}
+
+.skin-aria-ng .tooltip.tooltip-warning.right .tooltip-arrow {
+    border-right-color: #f39c12;
+}
+
+.skin-aria-ng .tooltip.tooltip-error.right .tooltip-arrow {
+    border-right-color: #dd4b39;
+}
+
+.skin-aria-ng .tooltip.tooltip-success.bottom .tooltip-arrow,
+.skin-aria-ng .tooltip.tooltip-success.bottom-left .tooltip-arrow,
+.skin-aria-ng .tooltip.tooltip-success.bottom-right .tooltip-arrow {
+    border-bottom-color: #00a65a;
+}
+
+.skin-aria-ng .tooltip.tooltip-warning.bottom .tooltip-arrow,
+.skin-aria-ng .tooltip.tooltip-warning.bottom-left .tooltip-arrow,
+.skin-aria-ng .tooltip.tooltip-warning.bottom-right .tooltip-arrow {
+    border-bottom-color: #f39c12;
+}
+
+.skin-aria-ng .tooltip.tooltip-error.bottom .tooltip-arrow,
+.skin-aria-ng .tooltip.tooltip-error.bottom-left .tooltip-arrow,
+.skin-aria-ng .tooltip.tooltip-error.bottom-right .tooltip-arrow {
+    border-bottom-color: #dd4b39;
+}
+
+.skin-aria-ng .tooltip.tooltip-success .tooltip-inner {
+    background-color: #00a65a;
+}
+
+.skin-aria-ng .tooltip.tooltip-warning .tooltip-inner {
+    background-color: #f39c12;
+}
+
+.skin-aria-ng .tooltip.tooltip-error .tooltip-inner {
+    background-color: #dd4b39;
+}
+
+.skin-aria-ng .input-group .form-group.has-success + .input-group-addon {
+    border-color: #00a65a;
+    background-color: #00a65a;
+    color: #ffffff;
+}
+
+.skin-aria-ng .input-group .form-group.has-warning + .input-group-addon {
+    border-color: #f39c12;
+    background-color: #f39c12;
+    color: #ffffff;
+}
+
+.skin-aria-ng .input-group .form-group.has-error + .input-group-addon {
+    border-color: #dd4b39;
+    background-color: #dd4b39;
+    color: #ffffff;
+}
+
+.skin-aria-ng input::-webkit-input-placeholder,
+.skin-aria-ng input:-moz-placeholder,
+.skin-aria-ng input::-moz-placeholder,
+.skin-aria-ng input:-ms-input-placeholder {
+    color: #999;
+}
+
+.skin-aria-ng select.placeholder {
+    color: #999;
+}
+
+/* awesome-bootstrap-checkbox extend */
+.skin-aria-ng .checkbox-primary input[type="checkbox"]:checked + label::before, .checkbox-primary input[type="radio"]:checked + label::before {
+    background-color: #208fe5;
+    border-color: #208fe5;
+}
+
+/* task-table */
+.skin-aria-ng .task-table {
+    background-color: #fff;
+}
+
+.skin-aria-ng .task-table > .task-table-body > div.row:nth-of-type(odd) {
+    background-color: #f9f9f9;
+}
+
+.skin-aria-ng .task-table > .task-table-body > div.row:hover {
+    background-color: #f5f5f5;
+}
+
+/* settings-table */
+.skin-aria-ng .settings-table {
+    background-color: #fff;
+}
+
+.skin-aria-ng .settings-table.striped > div.row:nth-of-type(odd) {
+    background-color: #f9f9f9;
+}
+
+.skin-aria-ng .settings-table.striped > div.row.no-background {
+    background-color: inherit;
+}
+
+.skin-aria-ng .settings-table.hoverable > div.row:hover {
+    background-color: #f5f5f5;
+}
+
+.skin-aria-ng .settings-table.hoverable > div.row.no-hover:hover {
+    background-color: inherit;
+}
+
+.skin-aria-ng .settings-table.hoverable > div.row:nth-of-type(odd).no-hover:hover {
+    background-color: #f9f9f9;
+}
+
+/* new-task-table */
+.skin-aria-ng .new-task-table {
+    background-color: #fff;
+}
