/*! * 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; } .skin-aria-ng .sidebar-menu > li > a { border-left: 3px solid transparent; } .skin-aria-ng .sidebar-menu > li:hover > a { color: #f8f8f8; background-color: #313a42; } .skin-aria-ng .sidebar-menu > li.active > a { color: #5399e8; background-color: #252c30; } .skin-aria-ng .sidebar-menu > li > .treeview-menu { margin: 0 1px; background-color: #2a343b; } .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 .treeview-menu > li > a { color: #8aa4af; } .skin-aria-ng .treeview-menu > li > a:hover { color: #fefefe; } .skin-aria-ng .treeview-menu > li.active > a { color: #0080ff; } .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 .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 .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; } /* 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 */