summaryrefslogtreecommitdiffstats
path: root/pyload/web/app/styles
diff options
context:
space:
mode:
Diffstat (limited to 'pyload/web/app/styles')
-rw-r--r--pyload/web/app/styles/default/accounts.less43
-rw-r--r--pyload/web/app/styles/default/admin.less17
-rw-r--r--pyload/web/app/styles/default/dashboard.less335
-rw-r--r--pyload/web/app/styles/default/linkgrabber.less65
-rw-r--r--pyload/web/app/styles/default/main.less22
-rw-r--r--pyload/web/app/styles/default/settings.less121
-rw-r--r--pyload/web/app/styles/default/setup.less0
-rw-r--r--pyload/web/app/styles/default/style.less287
-rw-r--r--pyload/web/app/styles/font.css13
9 files changed, 903 insertions, 0 deletions
diff --git a/pyload/web/app/styles/default/accounts.less b/pyload/web/app/styles/default/accounts.less
new file mode 100644
index 000000000..efc8b5518
--- /dev/null
+++ b/pyload/web/app/styles/default/accounts.less
@@ -0,0 +1,43 @@
+@import "common";
+
+.account-list {
+
+ .account-type {
+ background-size: 32px 32px;
+ background-repeat: no-repeat;
+ background-position: left;
+ padding-left: 40px;
+ font-weight: bold;
+ }
+
+ .account-name {
+ padding-top: 8px;
+ }
+
+}
+
+.form-account {
+
+ // Bit wider control labels / same as config page
+ .control-label {
+ width: 180px;
+ }
+ .controls {
+ margin-left: 200px;
+ }
+ .form-actions {
+ padding-left: 200px;
+ }
+
+}
+
+.logo-select {
+ width: 20px;
+ height: 20px;
+}
+
+.vertical-header {
+ .rotate(-90deg);
+ font-weight: bold;
+ text-transform: uppercase;
+} \ No newline at end of file
diff --git a/pyload/web/app/styles/default/admin.less b/pyload/web/app/styles/default/admin.less
new file mode 100644
index 000000000..92524c153
--- /dev/null
+++ b/pyload/web/app/styles/default/admin.less
@@ -0,0 +1,17 @@
+@import "common";
+
+/*
+ Admin
+*/
+
+#btn_newuser {
+ float: right;
+}
+
+#user_permissions {
+ float: right;
+}
+
+.userperm {
+ width: 115px;
+} \ No newline at end of file
diff --git a/pyload/web/app/styles/default/dashboard.less b/pyload/web/app/styles/default/dashboard.less
new file mode 100644
index 000000000..336070737
--- /dev/null
+++ b/pyload/web/app/styles/default/dashboard.less
@@ -0,0 +1,335 @@
+@import "bootstrap/less/mixins";
+@import "common";
+
+/*
+ Dashboard
+*/
+
+#dashboard ul {
+ margin: 0;
+ list-style: none;
+}
+
+.sidebar-header {
+ font-size: 25px;
+ line-height: 25px;
+ margin: 4px 0;
+ border-bottom: 1px dashed @grey;
+}
+
+/*
+ Packages
+*/
+.package-list {
+ list-style: none;
+ margin-left: 0;
+}
+
+@frame-top: 20px;
+@frame-bottom: 18px;
+
+.package-frame {
+ position: absolute;
+ top: -@frame-top;
+ left: -@frame-top / 2;
+ right: -@frame-top / 2;
+ bottom: -@frame-bottom + 2px; // + size of visible bar
+ z-index: -1; // lies under package
+ border: 1px solid @grey;
+ border-radius: 5px;
+ box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.75);
+}
+
+.package-view {
+ padding-bottom: 4px;
+ margin: 8px 0;
+ position: relative;
+ overflow: hidden;
+ .hyphens;
+
+
+ i {
+ cursor: pointer;
+ }
+
+ & > i {
+ vertical-align: middle;
+ }
+
+ .progress {
+ position: absolute;
+ height: @frame-bottom;
+ line-height: @frame-bottom;
+ font-size: 12px;
+ text-align: center;
+ border-radius: 0;
+ border-bottom-left-radius: 5px;
+ border-bottom-right-radius: 5px;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ margin-bottom: 0;
+ background-image: none;
+ color: @light;
+ background-color: @yellow;
+ }
+
+ .bar-info {
+ background-image: none;
+ background-color: @blue;
+ }
+
+ &:hover {
+ overflow: visible;
+ z-index: 10;
+
+ .package-frame {
+ background-color: @light;
+ }
+ }
+
+ &.ui-selected:hover {
+ color: @light;
+
+ .package-frame {
+ background-color: @dark;
+ }
+
+ }
+}
+
+.package-name {
+ cursor: pointer;
+}
+
+.package-indicator {
+ position: absolute;
+ top: 0;
+ right: 0;
+ float: right;
+ color: @blue;
+ text-shadow: @yellowDark 1px 1px;
+ height: @frame-top;
+ line-height: @frame-top;
+
+ & > i:hover {
+ color: @green;
+ }
+
+ .dropdown-menu {
+ text-shadow: none;
+ }
+
+ .tooltip {
+ text-shadow: none;
+ width: 100%;
+ }
+
+ .btn-move {
+ color: @green;
+ display: none;
+ }
+
+}
+
+.ui-files-selected .btn-move {
+ display: inline;
+}
+
+// Tag area with different effect on hover
+.tag-area {
+ position: absolute;
+ top: -2px;
+ left: 0;
+
+ .badge {
+ font-size: 11px;
+ line-height: 11px;
+ }
+
+ .badge i {
+ cursor: pointer;
+ &:hover:before {
+ content: "\f024"; // show Remove icon
+ }
+ }
+
+ .badge-ghost {
+ visibility: hidden;
+ cursor: pointer;
+ opacity: 0.5;
+ }
+
+ &:hover .badge-ghost {
+ visibility: visible;
+ }
+
+}
+
+/*
+ File View
+*/
+
+.file-list {
+ list-style: none;
+ margin: 0;
+}
+
+@file-height: 22px;
+
+.file-view {
+ position: relative;
+ padding: 0 4px;
+ border-top: 1px solid #dddddd;
+ line-height: @file-height;
+
+ &:first-child {
+ border-top: none;
+ }
+
+ &:hover, &.ui-selected:hover {
+ border-radius: 5px;
+ .gradient(top, @blue, @blueLight);
+ color: @light;
+ }
+
+ &.ui-selected {
+ .gradient(top, @yellow, @yellowDark);
+ color: @dark;
+ border-color: @greenDark;
+
+ .file-row.downloading .bar {
+ .gradient(top, @green, @greenLight);
+ }
+
+ }
+
+ img { // plugin logo
+ margin-top: -2px;
+ padding: 0 2px;
+ height: @file-height;
+ width: @file-height;
+ }
+
+ .icon-chevron-down:hover {
+ cursor: pointer;
+ color: @yellow;
+ }
+
+}
+
+.file-row {
+ min-height: 0 !important;
+// padding-left: 5px;
+ padding-top: 4px;
+ padding-bottom: 4px;
+
+ // TODO: better styling for filestatus
+ &.second {
+// border-radius: 4px;
+// background: @light;
+ font-size: small;
+ font-weight: bold;
+// box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.75);
+// .default-shadow;
+ }
+
+ &.third {
+ margin-left: 0;
+ position: relative;
+ font-size: small;
+ }
+
+ .dropdown-menu {
+ font-size: medium;
+ }
+}
+
+/*
+ TODO: more colorful states
+ better fileView design
+*/
+
+.file-row.finished {
+// .gradient(top, @green, @greenLight);
+// color: @light;
+ color: @green;
+}
+
+.file-row.failed {
+// .gradient(top, @red, @redLight);
+// color: @light;
+ color: @red;
+}
+
+.file-row.downloading {
+
+ .progress {
+ height: @file-height;
+ background: @light;
+ margin: 0;
+ }
+
+ .bar {
+ text-align: left;
+ .gradient(top, @yellow, @yellowDark);
+ .transition-duration(2s);
+ color: @dark;
+ }
+
+}
+
+/*
+FANCY CHECKBOXES
+*/
+.file-view .checkbox {
+ width: 20px;
+ height: 21px;
+ background: url(../../images/default/checks_sheet.png) left top no-repeat;
+ cursor: pointer;
+}
+
+.file-view.ui-selected .checkbox {
+ background: url(../../images/default/checks_sheet.png) -21px top no-repeat;
+}
+
+/*
+ Actionbar
+*/
+
+.form-search {
+ position: relative;
+
+ .dropdown-menu {
+ min-width: 100%;
+ position: absolute;
+ right: 0;
+ left: auto;
+ }
+
+}
+
+.li-check > a {
+ padding-left: 8px !important;
+ padding-right: 8px !important;
+}
+
+li.finished > a, li.finished:hover > a {
+ background-color: @green;
+ color: @light;
+
+ .caret, .caret:hover {
+ border-bottom-color: @light !important;
+ border-top-color: @light !important;
+ }
+}
+
+li.failed > a, li.failed:hover > a {
+ background-color: @red;
+ color: @light;
+
+ .caret, .caret:hover {
+ border-bottom-color: @light !important;
+ border-top-color: @light !important;
+ }
+} \ No newline at end of file
diff --git a/pyload/web/app/styles/default/linkgrabber.less b/pyload/web/app/styles/default/linkgrabber.less
new file mode 100644
index 000000000..010dbadec
--- /dev/null
+++ b/pyload/web/app/styles/default/linkgrabber.less
@@ -0,0 +1,65 @@
+.linkgrabber {
+ width: 800px !important;
+
+ .pull-left {
+ padding-right: 20px;
+ }
+
+ input, textarea {
+ width: 130px;
+ }
+
+}
+
+.prepared-packages {
+ hr {
+ margin: 0;
+ }
+
+ .package {
+ margin-bottom: 10px;
+
+ & > .btn {
+ margin-bottom: 3px;
+ }
+
+ }
+
+ .name {
+ padding: 0 2px;
+
+ input {
+ display: none;
+ }
+
+ &:hover {
+ border: 1px @grey dashed;
+ }
+
+ &.edit {
+ border: none;
+ input {
+ display: inline;
+ }
+
+ strong {
+ display: none;
+ }
+ }
+
+ }
+
+ .link-name {
+ .hyphens();
+ width: 50%;
+ }
+
+ img {
+ height: 22px;
+ }
+
+ .table {
+ margin-bottom: 0;
+ }
+
+} \ No newline at end of file
diff --git a/pyload/web/app/styles/default/main.less b/pyload/web/app/styles/default/main.less
new file mode 100644
index 000000000..6153b576e
--- /dev/null
+++ b/pyload/web/app/styles/default/main.less
@@ -0,0 +1,22 @@
+@import "bootstrap/less/bootstrap";
+@import "bootstrap/less/responsive";
+@import "font-awesome/less/font-awesome";
+
+@FontAwesomePath: "../../fonts";
+
+@import "pyload-common/styles/base";
+@import "pyload-common/styles/basic-layout";
+
+@import "style";
+@import "linkgrabber";
+@import "dashboard";
+@import "settings";
+@import "accounts";
+@import "admin";
+@import "setup";
+
+@ResourcePath: "../..";
+@DefaultFont: 'Abel', sans-serif;
+
+// Changed dimensions
+@header-height: 70px;; \ No newline at end of file
diff --git a/pyload/web/app/styles/default/settings.less b/pyload/web/app/styles/default/settings.less
new file mode 100644
index 000000000..34bfcb92a
--- /dev/null
+++ b/pyload/web/app/styles/default/settings.less
@@ -0,0 +1,121 @@
+@import "common";
+
+/*
+ Settings
+*/
+.settings-menu {
+ background-color: #FFF;
+ box-shadow: 0 0 5px #000; // border: 10px solid #EEE;
+
+ .nav-header {
+ background: @blueDark;
+ color: @light;
+ }
+
+ li > a, .nav-header {
+ margin-left: -16px;
+ margin-right: -16px;
+ text-shadow: none;
+ }
+
+ i {
+ margin-top: 0;
+ }
+
+ .plugin, .addon {
+ a {
+ padding-left: 28px;
+ background-position: 4px 2px;
+ background-repeat: no-repeat;
+ background-size: 20px 20px;
+ }
+
+ .icon-remove {
+ display: none;
+ }
+
+ &:hover {
+ i {
+ display: block;
+ }
+ }
+
+ }
+
+ .addon {
+ div {
+ font-size: small;
+ }
+ .addon-on {
+ color: @green;
+ }
+
+ .addon-off {
+ color: @red;
+ }
+
+ }
+
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+
+ .nav > li > a:hover {
+ color: @blueDark;
+ }
+}
+
+.setting-box {
+ border: 10px solid @blueDark;
+ box-shadow: 0 0 5px @dark; // .gradient(bottom, @yellowLightest, @light);
+ overflow: hidden;
+
+ .page-header {
+ margin: 0;
+
+ .btn {
+ float: right;
+ margin-top: 5px;
+ }
+
+ .popover {
+ font-size: medium;
+ }
+
+ }
+
+ // Bit wider control labels
+ .control-label {
+ width: 180px;
+ }
+ .controls {
+ margin-left: 200px;
+ }
+ .form-actions {
+ padding-left: 200px;
+ }
+
+}
+
+/*
+ Plugin select
+*/
+
+.plugin-select {
+ background-position: left 2px;
+ background-repeat: no-repeat;
+ background-size: 20px 20px;
+ padding-left: 24px;
+
+ font-weight: bold;
+ span {
+ line-height: 14px;
+ font-size: small;
+ font-weight: normal;
+ }
+
+}
+
+.logo-select {
+ width: 20px;
+ height: 20px;
+} \ No newline at end of file
diff --git a/pyload/web/app/styles/default/setup.less b/pyload/web/app/styles/default/setup.less
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/pyload/web/app/styles/default/setup.less
diff --git a/pyload/web/app/styles/default/style.less b/pyload/web/app/styles/default/style.less
new file mode 100644
index 000000000..ad60e5b59
--- /dev/null
+++ b/pyload/web/app/styles/default/style.less
@@ -0,0 +1,287 @@
+@import "bootstrap/less/mixins";
+@import "common";
+
+/*
+ Header
+*/
+header { // background-color: @greyDark;
+ .gradient(to bottom, #222222, #111111);
+ height: @header-height;
+ position: fixed;
+ top: 0;
+ vertical-align: top;
+ width: 100%;
+ z-index: 10;
+ color: #ffffff;
+
+ a {
+ color: #ffffff;
+ }
+ .container-fluid, .row-fluid {
+ height: @header-height;
+ }
+
+ span.title {
+ color: white;
+ float: left;
+ font-family: SansationRegular, sans-serif;
+ font-size: 40px;
+ line-height: @header-height;
+ cursor: default;
+ }
+
+ .logo {
+ margin-right: 10px;
+ margin-top: 10px;
+ width: 105px;
+ height: 107px;
+ background-size: auto;
+ cursor: pointer;
+ }
+
+}
+
+@header-inner-height: @header-height - 16px;
+
+// centered header element
+.centered {
+ height: @header-inner-height;
+ margin: 8px 0;
+}
+
+.header-block {
+ .centered;
+ float: left;
+ line-height: @header-inner-height / 3; // 3 rows
+ font-size: small;
+}
+
+.status-block {
+ min-width: 15%;
+}
+
+.header-btn {
+ float: right;
+ position: relative;
+ .centered;
+
+ .lower {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ margin-left: 0;
+
+ button {
+ width: 100% / 3; // 3 buttons
+ }
+
+ }
+}
+
+#progress-area {
+ .centered;
+ position: relative;
+ margin-top: 8px;
+ line-height: 16px;
+
+ .sub {
+ font-size: small;
+ }
+
+ .popover { // display: block;
+ max-width: none;
+ width: 120%;
+ left: -60%; // Half of width
+ margin-left: 50%;
+ top: 100%;
+ }
+
+ .popover-title, .popover-content {
+ color: @greyDark;
+ }
+
+ .icon-list {
+ cursor: pointer;
+ margin-right: 2px; // same as globalprogress margin
+
+ &:hover {
+ color: @yellow;
+ }
+ }
+ .close {
+ line-height: 14px;
+ }
+}
+
+.progress-list {
+ list-style: none;
+ margin: 0;
+ font-size: small;
+
+ li {
+ background-repeat: no-repeat;
+ background-size: 32px 32px;
+ background-position: 0px 8px;
+ padding-left: 40px;
+
+ &:not(:last-child) {
+ margin-bottom: 5px;
+ padding-bottom: 5px;
+ border-bottom: 1px dashed @greyLight;
+ }
+
+ .progress {
+ height: 8px;
+ margin-bottom: 0;
+
+ .bar {
+ .transition-duration(2s);
+ .gradient(bottom, @blue, @blueLight);
+ }
+ }
+ }
+}
+
+#globalprogress {
+ background-color: @greyDark;
+ background-image: none;
+ height: 8px;
+ margin: 4px 0;
+ border-radius: 8px;
+ border: 2px solid @grey;
+
+ .bar {
+ color: @dark;
+ background-image: none;
+ background-color: @yellow;
+ .transition-duration(2s);
+
+ &.running {
+ width: 100%;
+ .stripes(@yellowLighter, @yellowDark);
+ }
+ }
+}
+
+.speedgraph-container {
+ // Allows speedgraph to take up remaining space
+ display: block;
+ overflow: hidden;
+ padding: 0 8px;
+
+ #speedgraph {
+ float: right;
+ width: 100%;
+ .centered;
+ // height: @header-height - 16px;
+ // margin: 8px 0;
+ font-family: sans-serif;
+ }
+}
+
+.header-area {
+ display: none; // hidden by default
+ position: absolute;
+ bottom: -28px;
+ line-height: 18px;
+ top: @header-height;
+ padding: 4px 10px 6px 10px;
+ text-align: center;
+ border-radius: 0 0 6px 6px;
+ color: @light;
+ background-color: @greyDark;
+ .default-shadow;
+}
+
+#notification-area {
+ .header-area;
+ left: 140px;
+
+ .badge {
+ vertical-align: top;
+ }
+
+ .btn-query, .btn-notification {
+ cursor: pointer;
+ }
+}
+
+#selection-area {
+ .header-area;
+ left: 50%;
+ min-width: 15%;
+
+ i {
+ cursor: pointer;
+
+ &:hover {
+ color: @yellow;
+ }
+ }
+
+}
+
+/*
+ Actionbar
+*/
+
+.nav > li > a:hover {
+ color: @blue;
+}
+
+.actionbar {
+ padding-top: 2px;
+ padding-bottom: 3px;
+ margin-bottom: 5px;
+ border-bottom: 1px dashed @grey;
+
+ height: @actionbar-height;
+
+ & > li > a, & > li > button {
+ margin-top: 4px;
+ }
+
+ .breadcrumb {
+ margin: 0;
+ padding-top: 10px;
+ padding-bottom: 0;
+
+ .active {
+ color: @grey;
+ }
+ }
+
+ form {
+ margin-top: 6px;
+ margin-bottom: 0;
+ }
+
+ select {
+ margin: 2px 0 0;
+ }
+
+ input, button {
+ padding-top: 2px;
+ padding-bottom: 2px;
+ }
+
+ .dropdown-menu i {
+ margin-top: 4px;
+ padding-right: 5px;
+ }
+
+}
+
+/*
+ Login
+*/
+.login {
+ vertical-align: middle;
+ border: 2px solid @dark;
+ padding: 15px 50px;
+ font-size: 17px;
+ border-radius: 15px;
+ -moz-border-radius: 15px;
+ -webkit-border-radius: 15px;
+} \ No newline at end of file
diff --git a/pyload/web/app/styles/font.css b/pyload/web/app/styles/font.css
new file mode 100644
index 000000000..088b6f14c
--- /dev/null
+++ b/pyload/web/app/styles/font.css
@@ -0,0 +1,13 @@
+/**
+ * @file
+ * Font styling
+ */
+
+@font-face {
+ font-family: 'Abel';
+ font-style: normal;
+ font-weight: 400;
+ src: local('Abel'), local('Abel-Regular');
+ src: url(../fonts/Abel-Regular.woff) format('woff');
+ url(../fonts/Abel-Regular.ttf) format('truetype');
+}
generated by cgit v1.2.3 (git 2.25.1) at 2025-02-23 13:42:42 +0100