From ee79c196df6edfab7bf12886aa42f7c3cbf2e681 Mon Sep 17 00:00:00 2001 From: Chocobo1 Date: Tue, 25 May 2021 11:16:53 +0800 Subject: [PATCH 1/9] Use prettier for formatting CSS code --- src/webui/www/package.json | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/webui/www/package.json b/src/webui/www/package.json index e94124882..c90ae7ec9 100644 --- a/src/webui/www/package.json +++ b/src/webui/www/package.json @@ -6,12 +6,13 @@ "url": "https://github.com/qbittorrent/qBittorrent.git" }, "scripts": { - "format": "js-beautify private/*.html private/scripts/*.js private/views/*.html public/*.html public/scripts/*.js", + "format": "js-beautify private/*.html private/scripts/*.js private/views/*.html public/*.html public/scripts/*.js && prettier --write **.css", "lint": "eslint private/*.html private/scripts/*.js private/views/*.html public/*.html public/scripts/*.js" }, "devDependencies": { "eslint": "*", "eslint-plugin-html": "*", - "js-beautify": "*" + "js-beautify": "*", + "prettier": "*" } } From 65bdc4cf4370dcd8294d63201a82a2fe86e07afb Mon Sep 17 00:00:00 2001 From: Chocobo1 Date: Tue, 25 May 2021 11:21:58 +0800 Subject: [PATCH 2/9] Format CSS code with prettier --- src/webui/www/private/css/Core.css | 1 - src/webui/www/private/css/Layout.css | 41 +++++++++++-------- src/webui/www/private/css/Window.css | 61 ++++++++++++++++------------ src/webui/www/private/css/style.css | 38 ++++++++++------- 4 files changed, 83 insertions(+), 58 deletions(-) diff --git a/src/webui/www/private/css/Core.css b/src/webui/www/private/css/Core.css index 8ce1c8a41..173bd64b5 100644 --- a/src/webui/www/private/css/Core.css +++ b/src/webui/www/private/css/Core.css @@ -43,7 +43,6 @@ Notes: margin-top: 2px; } - /* Theme Specific Adjustments to Default Plugin Styles ---------------------------------------------------------------- */ diff --git a/src/webui/www/private/css/Layout.css b/src/webui/www/private/css/Layout.css index 03372b07c..f8da1f073 100644 --- a/src/webui/www/private/css/Layout.css +++ b/src/webui/www/private/css/Layout.css @@ -18,21 +18,22 @@ Required by: /* Layout ---------------------------------------------------------------- */ -html, body { +html, +body { background: #fff; } body { - margin: 0; /* Required */ + margin: 0; /* Required */ } #desktop { position: relative; - min-width: 400px; /* Helps keep header content from wrapping */ + min-width: 400px; /* Helps keep header content from wrapping */ height: 100%; min-height: 100%; overflow: hidden; - cursor: default; /* Fix for issue in IE7. IE7 wants to use the I-bar text cursor */ + cursor: default; /* Fix for issue in IE7. IE7 wants to use the I-bar text cursor */ } #desktopHeader { @@ -43,7 +44,7 @@ body { position: relative; height: 45px; overflow: hidden; - background: #718BA6 url(../images/bg-header.gif) repeat-x; + background: #718ba6 url(../images/bg-header.gif) repeat-x; } #desktopTitlebar { @@ -104,7 +105,7 @@ body { background: #f2f2f2; /*height: 30px;*/ margin: 0 0px; - overflow: hidden; /* Remove this line if you want the menu to be backward compatible with Firefox 2 */ + overflow: hidden; /* Remove this line if you want the menu to be backward compatible with Firefox 2 */ /* Fixes by Chris */ /*background-color: #ccc;*/ height: 20px; @@ -118,7 +119,7 @@ body { font-size: 12px; } -#desktopNavbar>ul>li { +#desktopNavbar > ul > li { float: left; } @@ -140,7 +141,8 @@ body { background-color: #fff; } -#desktopNavbar ul li a.arrow-right, #desktopNavbar ul li a:hover.arrow-right { +#desktopNavbar ul li a.arrow-right, +#desktopNavbar ul li a:hover.arrow-right { background-image: url(../images/arrow-right.gif); background-repeat: no-repeat; background-position: right 7px; @@ -163,7 +165,8 @@ body { left: -999em; } -#desktopNavbar li ul ul { /* third-and-above-level lists */ +#desktopNavbar li ul ul { + /* third-and-above-level lists */ margin: -22px 0 0 163px; } @@ -191,7 +194,7 @@ body { } #desktopNavbar li ul li a:hover { - background: #6C98D9; + background: #6c98d9; color: #fff; -moz-border-radius: 2px; } @@ -200,16 +203,18 @@ body { background: #fff; } +/* lists nested under hovered list items */ #desktopNavbar li:hover ul, #desktopNavbar li.ieHover ul, #desktopNavbar li li.ieHover ul, #desktopNavbar li li li.ieHover ul, #desktopNavbar li li:hover ul, -#desktopNavbar li li li:hover ul { /* lists nested under hovered list items */ +#desktopNavbar li li li:hover ul { left: auto; } -#desktopNavbar li:hover { /* For IE7 */ +/* For IE7 */ +#desktopNavbar li:hover { position: static; } @@ -221,7 +226,7 @@ li.divider { #pageWrapper { position: relative; - overflow: hidden; /* This can be set to hidden or auto */ + overflow: hidden; /* This can be set to hidden or auto */ border-top: 1px solid #909090; border-bottom: 1px solid #909090; /*height: 100%;*/ @@ -246,8 +251,6 @@ li.divider { background: #f2f2f2; } - - /* Panel Layout ---------------------------------------------------------------- */ @@ -256,7 +259,7 @@ li.divider { .column { position: relative; float: left; - overflow: hidden; /* Required by IE6 */ + overflow: hidden; /* Required by IE6 */ } /* Panels */ @@ -349,7 +352,8 @@ li.divider { line-height: 1px; font-size: 1px; overflow: hidden; - background: url(../images/handle-icon-horizontal.gif) center center no-repeat; + background: url(../images/handle-icon-horizontal.gif) center center + no-repeat; } .columnHandle { @@ -377,7 +381,8 @@ li.divider { .panel-header-toolbox { } -div.toolbox.divider { /* Have to specify div here for IE6's sake */ +/* Have to specify div here for IE6's sake */ +div.toolbox.divider { background: url(../images/toolbox-divider.gif) repeat-y; padding-left: 8px; } diff --git a/src/webui/www/private/css/Window.css b/src/webui/www/private/css/Window.css index 3f6291d70..bbfbd7c21 100644 --- a/src/webui/www/private/css/Window.css +++ b/src/webui/www/private/css/Window.css @@ -24,10 +24,11 @@ Required by: background-color: #e5e5e5; } -.mocha.isFocused {} +.mocha.isFocused { +} .mochaOverlay { - position: absolute; /* This is also set in theme.js in order to make theme transitions smoother */ + position: absolute; /* This is also set in theme.js in order to make theme transitions smoother */ top: 0; left: 0; } @@ -63,7 +64,7 @@ Required by: } .mochaToolbarWrapper { - width: 100%; /* For IE */ + width: 100%; /* For IE */ position: relative; height: 29px; background: #f1f1f1; @@ -77,7 +78,7 @@ div.mochaToolbarWrapper.bottom { } .mochaToolbar { - width: 100%; /* For IE */ + width: 100%; /* For IE */ border-top: 1px solid #fff; } @@ -86,7 +87,8 @@ div.mochaToolbarWrapper.bottom { border-bottom: 1px solid #dadada; } -.mochaContentWrapper { /* Has a fixed height and scrollbars if required. */ +/* Has a fixed height and scrollbars if required. */ +.mochaContentWrapper { font-size: 12px; overflow: auto; background: #fff; @@ -102,24 +104,26 @@ div.mochaToolbarWrapper.bottom { width: 3px; height: 3px; z-index: 2; - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE8 */ - filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); /* IE6 and 7*/ - opacity: .0; - -moz-opacity: .0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE8 */ + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); /* IE6 and 7*/ + opacity: 0; + -moz-opacity: 0; overflow: hidden; - font-size: 1px; /* For IE6 */ + font-size: 1px; /* For IE6 */ } -.mocha .corner { /* Corner resize handles */ +/* Corner resize handles */ +.mocha .corner { width: 10px; height: 10px; background: #f00; } -.mocha .cornerSE { /* Bottom right resize handle */ +/* Bottom right resize handle */ +.mocha .cornerSE { width: 20px; height: 20px; - background: #fefefe; /* This is the color of the visible resize handle */ + background: #fefefe; /* This is the color of the visible resize handle */ } .mochaCanvasHeader { @@ -158,7 +162,9 @@ div.mochaToolbarWrapper.bottom { 2. Replcac the background-color with a background-image for each button. */ -.mochaMinimizeButton, .mochaMaximizeButton, .mochaCloseButton { +.mochaMinimizeButton, +.mochaMaximizeButton, +.mochaCloseButton { float: right; width: 14px; height: 14px; @@ -217,8 +223,8 @@ div.mochaToolbarWrapper.bottom { left: 0; width: 100%; background: #000; - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE8 */ - filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); /* IE6 and 7*/ + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE8 */ + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); /* IE6 and 7*/ opacity: 0; -moz-opacity: 0; z-index: 10000; @@ -231,8 +237,8 @@ div.mochaToolbarWrapper.bottom { top: 0; left: 0; width: 100%; - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE8 */ - filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); /* IE6 and 7*/ + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE8 */ + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); /* IE6 and 7*/ opacity: 0; -moz-opacity: 0; z-index: 9999; @@ -254,8 +260,11 @@ div.mochaToolbarWrapper.bottom { /* The replaced class is used internally when converting CSS values to Canvas. These classes should not be removed. */ -.mocha.replaced, .mochaTitlebar.replaced, .mochaMinimizeButton.replaced, -.mochaMaximizeButton.replaced, .mochaCloseButton.replaced { +.mocha.replaced, +.mochaTitlebar.replaced, +.mochaMinimizeButton.replaced, +.mochaMaximizeButton.replaced, +.mochaCloseButton.replaced { background-color: transparent !important; } @@ -269,8 +278,10 @@ div.mochaToolbarWrapper.bottom { overflow: hidden; } -.windowClosed .mochaContentBorder, .windowClosed .mochaToolbarWrapper, -.windowClosed .mochaTitlebar, .windowClosed .mochaControls, +.windowClosed .mochaContentBorder, +.windowClosed .mochaToolbarWrapper, +.windowClosed .mochaTitlebar, +.windowClosed .mochaControls, .windowClosed .mochaCanvasControls { position: absolute; top: 0; @@ -315,9 +326,9 @@ div.mochaToolbarWrapper.bottom { } .mocha.notification .mochaTitlebar { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE8 */ - filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); /* IE6 and 7*/ - opacity: .0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE8 */ + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); /* IE6 and 7*/ + opacity: 0; -moz-opacity: 0; } diff --git a/src/webui/www/private/css/style.css b/src/webui/www/private/css/style.css index 3b4a04543..8817eca00 100644 --- a/src/webui/www/private/css/style.css +++ b/src/webui/www/private/css/style.css @@ -2,7 +2,9 @@ /*ul,ol,dl,li,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input,object,iframe { margin: 0; padding: 0; }*/ -a img, :link img, :visited img { +a img, +:link img, +:visited img { border: none; } @@ -33,7 +35,9 @@ body { /* Typography */ -h2, h3, h4 { +h2, +h3, +h4 { margin: 0; padding: 0 0 5px 0; font-size: 12px; @@ -100,7 +104,7 @@ pre { background-color: #f6f6f6; color: #006600; display: block; - font-family: 'Courier New', Courier, monospace; + font-family: "Courier New", Courier, monospace; font-size: 11px; max-height: 250px; overflow: auto; @@ -148,12 +152,12 @@ hr { } .selectedFilter { - background-color: #415A8D; - color: #FFFFFF; + background-color: #415a8d; + color: #ffffff; } .selectedFilter a { - color: #FFFFFF; + color: #ffffff; } #properties { @@ -236,7 +240,8 @@ a.propButton img { position: relative; } -.contextMenu li a.arrow-right, .contextMenu li a:hover.arrow-right { +.contextMenu li a.arrow-right, +.contextMenu li a:hover.arrow-right { background-image: url(../images/arrow-right.gif); background-repeat: no-repeat; background-position: right center; @@ -247,7 +252,8 @@ a.propButton img { .contextMenu li li.ieHover ul, .contextMenu li li li.ieHover ul, .contextMenu li li:hover ul, -.contextMenu li li li:hover ul { /* lists nested under hovered list items */ +.contextMenu li li li:hover ul { + /* lists nested under hovered list items */ left: auto; } @@ -258,7 +264,7 @@ a.propButton img { -ms-interpolation-mode: bicubic; } -.contextMenu li input[type=checkbox] { +.contextMenu li input[type="checkbox"] { position: relative; top: 3px; } @@ -384,7 +390,7 @@ label.tristate { display: block; float: left; height: 13px; - margin: .15em 8px 5px 0px; + margin: 0.15em 8px 5px 0px; overflow: hidden; text-indent: -999em; width: 13px; @@ -514,7 +520,8 @@ td.generalLabel { border-collapse: collapse; } -#watched_folders_tab td, #watched_folders_tab th { +#watched_folders_tab td, +#watched_folders_tab th { padding: 2px 4px; border: 1px solid black; } @@ -546,7 +553,8 @@ td.generalLabel { border: none; } -.select-watched-folder-editable select:focus, .select-editable input:focus { +.select-watched-folder-editable select:focus, +.select-editable input:focus { outline: none; } @@ -569,7 +577,7 @@ td.generalLabel { td.statusBarSeparator { width: 22px; - background-image: url('../images/toolbox-divider.gif'); + background-image: url("../images/toolbox-divider.gif"); background-repeat: no-repeat; background-position: center 1px; background-size: 2px 18px; @@ -582,7 +590,9 @@ td.statusBarSeparator { /* Search tab */ -#SearchPanel, #SearchPanel_wrapper, #SearchPanel_pad { +#SearchPanel, +#SearchPanel_wrapper, +#SearchPanel_pad { height: inherit; } From d8eac56f5e5b244be2fd747aa41647717b54d0b4 Mon Sep 17 00:00:00 2001 From: Chocobo1 Date: Tue, 25 May 2021 11:36:58 +0800 Subject: [PATCH 3/9] Use stylelint for CSS linting --- src/webui/www/.stylelintrc.json | 18 ++++++++++++++++++ src/webui/www/package.json | 7 +++++-- 2 files changed, 23 insertions(+), 2 deletions(-) create mode 100644 src/webui/www/.stylelintrc.json diff --git a/src/webui/www/.stylelintrc.json b/src/webui/www/.stylelintrc.json new file mode 100644 index 000000000..a1a4aa148 --- /dev/null +++ b/src/webui/www/.stylelintrc.json @@ -0,0 +1,18 @@ +{ + "extends": "stylelint-config-standard", + "plugins": [ + "stylelint-order" + ], + "rules": { + "color-hex-length": null, + "comment-empty-line-before": null, + "comment-whitespace-inside": null, + "declaration-colon-newline-after": null, + "function-name-case": null, + "indentation": 4, + "length-zero-no-unit": null, + "no-descending-specificity": null, + "value-keyword-case": null, + "order/properties-alphabetical-order": true + } +} diff --git a/src/webui/www/package.json b/src/webui/www/package.json index c90ae7ec9..3370ee55e 100644 --- a/src/webui/www/package.json +++ b/src/webui/www/package.json @@ -7,12 +7,15 @@ }, "scripts": { "format": "js-beautify private/*.html private/scripts/*.js private/views/*.html public/*.html public/scripts/*.js && prettier --write **.css", - "lint": "eslint private/*.html private/scripts/*.js private/views/*.html public/*.html public/scripts/*.js" + "lint": "eslint private/*.html private/scripts/*.js private/views/*.html public/*.html public/scripts/*.js && stylelint **/*.css" }, "devDependencies": { "eslint": "*", "eslint-plugin-html": "*", "js-beautify": "*", - "prettier": "*" + "prettier": "*", + "stylelint": "*", + "stylelint-config-standard": "*", + "stylelint-order": "*" } } From 87e7085c228ea685ff91746c0286cf80026db903 Mon Sep 17 00:00:00 2001 From: Chocobo1 Date: Tue, 25 May 2021 11:46:36 +0800 Subject: [PATCH 4/9] Remove empty block --- src/webui/www/private/css/Layout.css | 3 --- src/webui/www/private/css/Window.css | 9 --------- 2 files changed, 12 deletions(-) diff --git a/src/webui/www/private/css/Layout.css b/src/webui/www/private/css/Layout.css index f8da1f073..45f75a586 100644 --- a/src/webui/www/private/css/Layout.css +++ b/src/webui/www/private/css/Layout.css @@ -378,9 +378,6 @@ li.divider { text-align: right; } -.panel-header-toolbox { -} - /* Have to specify div here for IE6's sake */ div.toolbox.divider { background: url(../images/toolbox-divider.gif) repeat-y; diff --git a/src/webui/www/private/css/Window.css b/src/webui/www/private/css/Window.css index bbfbd7c21..ba7a06846 100644 --- a/src/webui/www/private/css/Window.css +++ b/src/webui/www/private/css/Window.css @@ -24,9 +24,6 @@ Required by: background-color: #e5e5e5; } -.mocha.isFocused { -} - .mochaOverlay { position: absolute; /* This is also set in theme.js in order to make theme transitions smoother */ top: 0; @@ -180,12 +177,6 @@ div.mochaToolbarWrapper.bottom { margin-left: 0; } -.mochaMaximizeButton { -} - -.mochaCloseButton { -} - .mochaSpinner { display: none; position: absolute; From 9f3d36bab0cde607b87b44f84de95f6b46605844 Mon Sep 17 00:00:00 2001 From: Chocobo1 Date: Tue, 25 May 2021 11:46:49 +0800 Subject: [PATCH 5/9] Remove useless property The `padding` will override the former `padding-top`. --- src/webui/www/private/css/Tabs.css | 1 - 1 file changed, 1 deletion(-) diff --git a/src/webui/www/private/css/Tabs.css b/src/webui/www/private/css/Tabs.css index 0de8965ee..fdf6b1f38 100644 --- a/src/webui/www/private/css/Tabs.css +++ b/src/webui/www/private/css/Tabs.css @@ -25,7 +25,6 @@ Required by: } .tab-menu { - padding-top: 1px; list-style: none; margin: 0; padding: 0; From 5522725f5d5e5ce9356a033ce8b56254dbff14e9 Mon Sep 17 00:00:00 2001 From: Chocobo1 Date: Tue, 25 May 2021 11:49:34 +0800 Subject: [PATCH 6/9] Remove duplicate property --- src/webui/www/private/css/style.css | 1 - 1 file changed, 1 deletion(-) diff --git a/src/webui/www/private/css/style.css b/src/webui/www/private/css/style.css index 8817eca00..e7528b886 100644 --- a/src/webui/www/private/css/style.css +++ b/src/webui/www/private/css/style.css @@ -226,7 +226,6 @@ a.propButton img { .contextMenu li ul { padding: 0; border: 1px solid #999; - padding: 0; background: #eee; list-style-type: none; position: absolute; From f960934eb951f9e1647c9223e885c421ec3acec7 Mon Sep 17 00:00:00 2001 From: Chocobo1 Date: Tue, 25 May 2021 11:55:22 +0800 Subject: [PATCH 7/9] Merge same selector --- src/webui/www/private/css/style.css | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/webui/www/private/css/style.css b/src/webui/www/private/css/style.css index e7528b886..6b923a637 100644 --- a/src/webui/www/private/css/style.css +++ b/src/webui/www/private/css/style.css @@ -61,6 +61,8 @@ h2 { #error_div { color: #f00; + float: left; + font-size: 14px; font-weight: bold; } @@ -565,10 +567,6 @@ td.generalLabel { margin-left: -1px; } -#error_div { - float: left; - font-size: 14px; -} .combo_priority { font-size: 1em; From b2081faf87f6613d7c4b312aa85d969c2f7d5659 Mon Sep 17 00:00:00 2001 From: Chocobo1 Date: Tue, 25 May 2021 11:58:22 +0800 Subject: [PATCH 8/9] Remove redundant empty line --- src/webui/www/private/css/style.css | 1 - 1 file changed, 1 deletion(-) diff --git a/src/webui/www/private/css/style.css b/src/webui/www/private/css/style.css index 6b923a637..78d297890 100644 --- a/src/webui/www/private/css/style.css +++ b/src/webui/www/private/css/style.css @@ -567,7 +567,6 @@ td.generalLabel { margin-left: -1px; } - .combo_priority { font-size: 1em; } From af49a4dd5adaf437f9464d0c1c57b51b81aff6ed Mon Sep 17 00:00:00 2001 From: Chocobo1 Date: Tue, 25 May 2021 13:12:00 +0800 Subject: [PATCH 9/9] Sort CSS properties --- src/webui/www/private/css/Layout.css | 155 +++++++++--------- src/webui/www/private/css/Tabs.css | 24 +-- src/webui/www/private/css/Window.css | 138 ++++++++-------- src/webui/www/private/css/dynamicTable.css | 18 +- src/webui/www/private/css/style.css | 182 ++++++++++----------- src/webui/www/public/css/login.css | 10 +- 6 files changed, 259 insertions(+), 268 deletions(-) diff --git a/src/webui/www/private/css/Layout.css b/src/webui/www/private/css/Layout.css index 45f75a586..876344186 100644 --- a/src/webui/www/private/css/Layout.css +++ b/src/webui/www/private/css/Layout.css @@ -28,12 +28,12 @@ body { } #desktop { - position: relative; - min-width: 400px; /* Helps keep header content from wrapping */ + cursor: default; /* Fix for issue in IE7. IE7 wants to use the I-bar text cursor */ height: 100%; min-height: 100%; + min-width: 400px; /* Helps keep header content from wrapping */ overflow: hidden; - cursor: default; /* Fix for issue in IE7. IE7 wants to use the I-bar text cursor */ + position: relative; } #desktopHeader { @@ -41,35 +41,35 @@ body { } #desktopTitlebarWrapper { - position: relative; + background: #718ba6 url(../images/bg-header.gif) repeat-x; height: 45px; overflow: hidden; - background: #718ba6 url(../images/bg-header.gif) repeat-x; + position: relative; } #desktopTitlebar { - padding: 7px 8px 6px 8px; - height: 32px; background: url(../images/logo.gif) no-repeat; background-position: left 0; + height: 32px; + padding: 7px 8px 6px 8px; } #desktopTitlebar h1.applicationTitle { + color: #fff; display: none; - margin: 0; - padding: 0 5px 0 0; font-size: 20px; - line-height: 25px; font-weight: bold; - color: #fff; + line-height: 25px; + margin: 0; + padding: 0 5px 0 0; } #desktopTitlebar h2.tagline { - padding: 7px 0 0 0; + color: #d4dce4; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; - color: #d4dce4; font-weight: bold; + padding: 7px 0 0 0; text-align: center; text-transform: uppercase; } @@ -80,14 +80,14 @@ body { } #topNav { + color: #d4dce4; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; + padding: 13px 10px 0 0; position: absolute; right: 0; - top: 0; - color: #d4dce4; text-align: right; - padding: 13px 10px 0 0; + top: 0; } #topNav a { @@ -103,20 +103,18 @@ body { #desktopNavbar { background: #f2f2f2; - /*height: 30px;*/ - margin: 0 0px; - overflow: hidden; /* Remove this line if you want the menu to be backward compatible with Firefox 2 */ - /* Fixes by Chris */ /*background-color: #ccc;*/ - height: 20px; border-bottom: 1px solid #3f3f3f; + height: 20px; + margin: 0 0px; + overflow: hidden; /* Remove this line if you want the menu to be backward compatible with Firefox 2 */ } #desktopNavbar ul { - padding: 0; - margin: 0; - list-style: none; font-size: 12px; + list-style: none; + margin: 0; + padding: 0; } #desktopNavbar > ul > li { @@ -128,34 +126,30 @@ body { } #desktopNavbar ul li a { - /*padding: 6px 10px 6px 10px;*/ color: #333; font-weight: normal; - /* Fix by Chris */ padding: 2px 10px 6px 10px; } #desktopNavbar ul li a:hover { - color: #333; - /* Fix By Chris */ background-color: #fff; + color: #333; } #desktopNavbar ul li a.arrow-right, #desktopNavbar ul li a:hover.arrow-right { background-image: url(../images/arrow-right.gif); - background-repeat: no-repeat; background-position: right 7px; + background-repeat: no-repeat; } #desktopNavbar li ul { - border: 1px solid #3f3f3f; background: #fff url(../images/bg-dropdown.gif) repeat-y; - position: absolute; + border: 1px solid #3f3f3f; left: -999em; - z-index: 8000; - /* Fix by Chris */ margin-top: -6px; + position: absolute; + z-index: 8000; } #desktopNavbar li:hover ul ul, @@ -171,32 +165,29 @@ body { } #desktopNavbar li ul li .check { + background: #555; + font-size: 1px; + height: 5px; + left: 6px; + line-height: 1px; + overflow: hidden; position: absolute; top: 8px; - left: 6px; width: 5px; - height: 5px; - background: #555; - overflow: hidden; - line-height: 1px; - font-size: 1px; } #desktopNavbar li ul li a { - position: relative; - /*padding: 1px 9px 1px 25px;*/ - min-width: 120px; color: #3f3f3f; font-weight: normal; - /* Fix By Chris */ + min-width: 120px; padding: 1px 10px 1px 20px; - /* Reduce left padding */ + position: relative; } #desktopNavbar li ul li a:hover { background: #6c98d9; - color: #fff; -moz-border-radius: 2px; + color: #fff; } #desktopNavbar li ul li a:hover .check { @@ -219,36 +210,36 @@ body { } li.divider { + border-top: 1px solid #ebebeb; margin-top: 2px; padding-top: 3px; - border-top: 1px solid #ebebeb; } #pageWrapper { - position: relative; - overflow: hidden; /* This can be set to hidden or auto */ - border-top: 1px solid #909090; border-bottom: 1px solid #909090; + border-top: 1px solid #909090; + overflow: hidden; /* This can be set to hidden or auto */ + position: relative; /*height: 100%;*/ } /* Footer */ #desktopFooterWrapper { - position: absolute; - left: 0; bottom: 0; - width: 100%; height: 30px; + left: 0; overflow: hidden; + position: absolute; + width: 100%; } #desktopFooter { + background: #f2f2f2; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; height: 24px; padding: 6px 8px 0 8px; - background: #f2f2f2; } /* Panel Layout @@ -257,18 +248,18 @@ li.divider { /* Columns */ .column { - position: relative; float: left; overflow: hidden; /* Required by IE6 */ + position: relative; } /* Panels */ .panel { - position: relative; - overflow: auto; background: #f8f8f8; border-bottom: 1px solid #b9b9b9; + overflow: auto; + position: relative; } .panelWrapper.collapsed .panel-header { @@ -292,11 +283,11 @@ li.divider { } .panel-header { - position: relative; background: #f1f1f1 url(../images/bg-panel-header.gif) repeat-x; + border-bottom: 1px solid #d3d3d3; height: 30px; overflow: hidden; - border-bottom: 1px solid #d3d3d3; + position: relative; } .panel-headerContent { @@ -309,13 +300,13 @@ li.divider { } .panel-header h2 { + color: #333; display: inline-block; font-size: 12px; - margin: 0; - padding: 3px 8px 0 8px; height: 22px; + margin: 0; overflow: hidden; - color: #333; + padding: 3px 8px 0 8px; } .panel-collapse { @@ -328,18 +319,18 @@ li.divider { } .icon16 { - margin: 4px 0 0 2px; cursor: pointer; + margin: 4px 0 0 2px; } /* Column and Panel Handles */ .horizontalHandle { + background: #eee url(../images/bg-handle-horizontal.gif) repeat-x; + font-size: 1px; height: 4px; line-height: 1px; - font-size: 1px; overflow: hidden; - background: #eee url(../images/bg-handle-horizontal.gif) repeat-x; } .horizontalHandle.detached .handleIcon { @@ -347,34 +338,34 @@ li.divider { } .horizontalHandle .handleIcon { - margin: 0 auto; + background: url(../images/handle-icon-horizontal.gif) center center + no-repeat; + font-size: 1px; height: 4px; line-height: 1px; - font-size: 1px; + margin: 0 auto; overflow: hidden; - background: url(../images/handle-icon-horizontal.gif) center center - no-repeat; } .columnHandle { - min-height: 10px; - float: left; - width: 4px; - overflow: hidden; background: #c3c3c3 url(../images/handle-icon.gif) center center no-repeat; border: 1px solid #909090; - border-top: 0; border-bottom: 0; + border-top: 0; + float: left; + min-height: 10px; + overflow: hidden; + width: 4px; } /* Toolboxes */ .toolbox { float: right; - margin-top: 3px; - padding: 0 5px; height: 24px; + margin-top: 3px; overflow: hidden; + padding: 0 5px; text-align: right; } @@ -389,16 +380,16 @@ div.toolbox.divider { } .iconWrapper { + border: 1px solid transparent; display: inline-block; height: 22px; min-width: 22px; overflow: hidden; - border: 1px solid transparent; } * html .iconWrapper { - padding: 1px; border: 0; + padding: 1px; } .iconWrapper img { @@ -413,22 +404,22 @@ div.toolbox.divider { } #spinnerWrapper { - width: 16px; - height: 16px; background: url(../images/spinner-placeholder.gif) no-repeat; + height: 16px; margin: 4px 5px 0 5px; + width: 16px; } #spinner { - display: none; background: url(../images/spinner.gif) no-repeat; - width: 16px; + display: none; height: 16px; + width: 16px; } #desktopFooter td { - vertical-align: top; text-align: left; + vertical-align: top; } td.speedLabel { diff --git a/src/webui/www/private/css/Tabs.css b/src/webui/www/private/css/Tabs.css index fdf6b1f38..d99354735 100644 --- a/src/webui/www/private/css/Tabs.css +++ b/src/webui/www/private/css/Tabs.css @@ -18,26 +18,26 @@ Required by: /* Toolbar Tabs */ .toolbarTabs { - padding: 0 5px 2px 2px; background: url(../images/tabs.gif) repeat-x; background-position: left -70px; overflow: visible; + padding: 0 5px 2px 2px; } .tab-menu { + font-size: 11px; + line-height: 16px; list-style: none; margin: 0; padding: 0; - line-height: 16px; - font-size: 11px; } .tab-menu li { - float: left; - margin: 0 0 5px 0; - cursor: pointer; background: url(../images/tabs.gif) repeat-x; background-position: left -35px; + cursor: pointer; + float: left; + margin: 0 0 5px 0; } .tab-menu li.selected { @@ -46,19 +46,19 @@ Required by: } .tab-menu li a { + background: url(../images/tabs.gif) repeat-x; + background-position: right -35px; + color: #181818; display: block; + font-weight: normal; margin-left: 8px; padding: 6px 15px 5px 9px; text-align: center; - font-weight: normal; - color: #181818; - background: url(../images/tabs.gif) repeat-x; - background-position: right -35px; } .tab-menu li.selected a { - color: #181818; - font-weight: bold; background: url(../images/tabs.gif) repeat-x; background-position: right 0; + color: #181818; + font-weight: bold; } diff --git a/src/webui/www/private/css/Window.css b/src/webui/www/private/css/Window.css index ba7a06846..10704ec5d 100644 --- a/src/webui/www/private/css/Window.css +++ b/src/webui/www/private/css/Window.css @@ -19,15 +19,15 @@ Required by: ---------------------------------------------------------------- */ .mocha { + background-color: #e5e5e5; display: none; overflow: hidden; - background-color: #e5e5e5; } .mochaOverlay { + left: 0; position: absolute; /* This is also set in theme.js in order to make theme transitions smoother */ top: 0; - left: 0; } /* @@ -42,18 +42,18 @@ Required by: */ .mochaTitlebar { - width: 100%; - overflow: hidden; background: url(../images/spacer.gif?from=fafafa&to=e5e5e5); + overflow: hidden; + width: 100%; } .mochaTitlebar h3 { + color: #888; font-size: 12px; - line-height: 15px; font-weight: bold; + line-height: 15px; margin: 0; padding: 5px 10px 4px 12px; - color: #888; } .mocha.isFocused .mochaTitlebar h3 { @@ -61,12 +61,12 @@ Required by: } .mochaToolbarWrapper { - width: 100%; /* For IE */ - position: relative; - height: 29px; background: #f1f1f1; - overflow: hidden; border-top: 1px solid #d9d9d9; + height: 29px; + overflow: hidden; + position: relative; + width: 100%; /* For IE */ } div.mochaToolbarWrapper.bottom { @@ -75,20 +75,20 @@ div.mochaToolbarWrapper.bottom { } .mochaToolbar { - width: 100%; /* For IE */ border-top: 1px solid #fff; + width: 100%; /* For IE */ } .mochaContentBorder { - border-top: 1px solid #dadada; border-bottom: 1px solid #dadada; + border-top: 1px solid #dadada; } /* Has a fixed height and scrollbars if required. */ .mochaContentWrapper { + background: #fff; font-size: 12px; overflow: auto; - background: #fff; } .mochaContent { @@ -96,59 +96,59 @@ div.mochaToolbarWrapper.bottom { } .mocha .handle { - position: absolute; background: #0f0; - width: 3px; - height: 3px; - z-index: 2; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE8 */ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); /* IE6 and 7*/ - opacity: 0; + font-size: 1px; /* For IE6 */ + height: 3px; -moz-opacity: 0; + opacity: 0; overflow: hidden; - font-size: 1px; /* For IE6 */ + position: absolute; + width: 3px; + z-index: 2; } /* Corner resize handles */ .mocha .corner { - width: 10px; - height: 10px; background: #f00; + height: 10px; + width: 10px; } /* Bottom right resize handle */ .mocha .cornerSE { - width: 20px; - height: 20px; background: #fefefe; /* This is the color of the visible resize handle */ + height: 20px; + width: 20px; } .mochaCanvasHeader { + background: transparent; + left: 0; + overflow: hidden; position: absolute; top: 0; - left: 0; - background: transparent; - z-index: -1; visibility: hidden; - overflow: hidden; + z-index: -1; } .mochaControls { + background: transparent; + height: 14px; position: absolute; - width: 52px; - top: 8px; right: 8px; - height: 14px; + top: 8px; + width: 52px; z-index: 4; - background: transparent; } .mochaCanvasControls { + background: transparent; position: absolute; - top: 8px; right: 8px; + top: 8px; z-index: 3; - background: transparent; } /* @@ -162,15 +162,15 @@ div.mochaToolbarWrapper.bottom { .mochaMinimizeButton, .mochaMaximizeButton, .mochaCloseButton { + background-color: #fff; + color: #666; + cursor: pointer; float: right; - width: 14px; - height: 14px; font-size: 1px; - cursor: pointer; - z-index: 4; - color: #666; - background-color: #fff; + height: 14px; margin-left: 5px; + width: 14px; + z-index: 4; } .mochaMinimizeButton { @@ -178,13 +178,13 @@ div.mochaToolbarWrapper.bottom { } .mochaSpinner { - display: none; - position: absolute; + background: url(../images/spinner.gif) no-repeat; bottom: 7px; + display: none; + height: 16px; left: 6px; + position: absolute; width: 16px; - height: 16px; - background: url(../images/spinner.gif) no-repeat; } .mochaIframe { @@ -193,56 +193,56 @@ div.mochaToolbarWrapper.bottom { /* Fix for IE6 select z-index issue */ .zIndexFix { + border: 1px solid transparent; display: block; + filter: mask(); + height: 100px; + left: 0; position: absolute; top: 0; - left: 0; - z-index: -1; - filter: mask(); width: 100px; - height: 100px; - border: 1px solid transparent; + z-index: -1; } /* Viewport overlays ---------------------------------------------------------------- */ #modalOverlay { - display: none; - position: fixed; - top: 0; - left: 0; - width: 100%; background: #000; + display: none; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE8 */ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); /* IE6 and 7*/ - opacity: 0; + left: 0; -moz-opacity: 0; + opacity: 0; + position: fixed; + top: 0; + width: 100%; z-index: 10000; } /* Fix for IE6 select z-index issue */ #modalFix { display: none; - position: absolute; - top: 0; - left: 0; - width: 100%; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE8 */ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); /* IE6 and 7*/ - opacity: 0; + left: 0; -moz-opacity: 0; + opacity: 0; + position: absolute; + top: 0; + width: 100%; z-index: 9999; } /* Underlay */ #windowUnderlay { + background: #fff; + left: 0; position: fixed; top: 0; - left: 0; width: 100%; - background: #fff; } * html #windowUnderlay { @@ -260,13 +260,13 @@ div.mochaToolbarWrapper.bottom { } .windowClosed { - visibility: hidden; display: none; + left: -20000px; + overflow: hidden; position: absolute; top: -20000px; - left: -20000px; + visibility: hidden; z-index: -1; - overflow: hidden; } .windowClosed .mochaContentBorder, @@ -274,11 +274,11 @@ div.mochaToolbarWrapper.bottom { .windowClosed .mochaTitlebar, .windowClosed .mochaControls, .windowClosed .mochaCanvasControls { + display: none; + left: 0; position: absolute; top: 0; - left: 0; visibility: hidden; - display: none; z-index: -1; } @@ -319,8 +319,8 @@ div.mochaToolbarWrapper.bottom { .mocha.notification .mochaTitlebar { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE8 */ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); /* IE6 and 7*/ - opacity: 0; -moz-opacity: 0; + opacity: 0; } .mocha.notification .mochaContentBorder { @@ -328,10 +328,10 @@ div.mochaToolbarWrapper.bottom { } .mocha.notification .mochaContentWrapper { - text-align: center; + background: transparent; font-size: 12px; font-weight: bold; - background: transparent; + text-align: center; } /* Example Window Themes */ diff --git a/src/webui/www/private/css/dynamicTable.css b/src/webui/www/private/css/dynamicTable.css index b12b9f694..68804ba01 100644 --- a/src/webui/www/private/css/dynamicTable.css +++ b/src/webui/www/private/css/dynamicTable.css @@ -34,8 +34,8 @@ #transferList img.stateIcon { height: 1.3em; - vertical-align: middle; margin-bottom: -1px; + vertical-align: middle; } tr.dynamicTableHeader { @@ -43,22 +43,22 @@ tr.dynamicTableHeader { } .dynamicTable { + border-spacing: 0; + padding: 0; table-layout: fixed; width: 1%; - padding: 0; - border-spacing: 0; } .dynamicTable th { background-color: #eee; - padding: 4px; - white-space: nowrap; border-right-color: #ccc; border-right-style: solid; border-right-width: 1px; - box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; + box-sizing: border-box; + padding: 4px; + white-space: nowrap; } .dynamicTable td { @@ -72,8 +72,8 @@ tr.dynamicTableHeader { .dynamicTable th, .dynamicTable td { - text-overflow: ellipsis; overflow: hidden; + text-overflow: ellipsis; white-space: nowrap; } @@ -102,8 +102,8 @@ tr.dynamicTableHeader { } .dynamicTableDiv thead th { - line-height: 0px !important; height: 0px !important; - padding-top: 0px !important; + line-height: 0px !important; padding-bottom: 0px !important; + padding-top: 0px !important; } diff --git a/src/webui/www/private/css/style.css b/src/webui/www/private/css/style.css index 78d297890..6a4f96bfc 100644 --- a/src/webui/www/private/css/style.css +++ b/src/webui/www/private/css/style.css @@ -17,12 +17,12 @@ a img, /* Structure */ body { - margin: 0; - text-align: left; + color: #555; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px; - color: #555; + margin: 0; + text-align: left; } .aside { @@ -38,25 +38,25 @@ body { h2, h3, h4 { - margin: 0; - padding: 0 0 5px 0; + color: #333; font-size: 12px; font-weight: bold; - color: #333; + margin: 0; + padding: 0 0 5px 0; } h2 { - font-size: 14px; color: #555; + font-size: 14px; font-weight: bold; } #mochaPage h3 { + border-bottom: 1px solid #bbb; display: block; font-size: 12px; - padding: 6px 0 6px 0; margin: 0 0 8px 0; - border-bottom: 1px solid #bbb; + padding: 6px 0 6px 0; } #error_div { @@ -72,8 +72,8 @@ h4 { a { color: #e60; - text-decoration: none; cursor: pointer; + text-decoration: none; } a:hover { @@ -104,24 +104,24 @@ dd { pre { background-color: #f6f6f6; + border: 1px solid #d1d7dc; color: #006600; display: block; font-family: "Courier New", Courier, monospace; font-size: 11px; + margin: 0 0 10px 0; max-height: 250px; overflow: auto; - margin: 0 0 10px 0; padding: 10px; - border: 1px solid #d1d7dc; } /* Dividers */ hr { background-color: #ddd; + border: 0px; color: #ccc; height: 1px; - border: 0px; } .vcenter { @@ -129,13 +129,13 @@ hr { } #urls { - width: 90%; height: 100%; + width: 90%; } #trackersUrls { - width: 90%; height: 100%; + width: 90%; } #Filters ul { @@ -147,10 +147,10 @@ hr { } #Filters ul img { + height: 16px; padding: 2px 4px; vertical-align: middle; width: 16px; - height: 16px; } .selectedFilter { @@ -168,10 +168,10 @@ hr { a.propButton { border: 1px solid rgb(85, 81, 91); - /*border-radius: 3px;*/ - padding: 2px; margin-left: 3px; margin-right: 3px; + /*border-radius: 3px;*/ + padding: 2px; } a.propButton img { @@ -179,18 +179,18 @@ a.propButton img { } .scrollableMenu { - overflow-y: auto; overflow-x: hidden; + overflow-y: auto; } /* context menu specific */ .contextMenu { - border: 1px solid #999; - padding: 0; background: #eee; - list-style-type: none; + border: 1px solid #999; display: none; + list-style-type: none; + padding: 0; } .contextMenu .separator { @@ -203,12 +203,12 @@ a.propButton img { } .contextMenu li a { + color: #000; display: block; - padding: 5px 20px 5px 5px; + font-family: tahoma, arial, sans-serif; font-size: 12px; + padding: 5px 20px 5px 5px; text-decoration: none; - font-family: tahoma, arial, sans-serif; - color: #000; white-space: nowrap; } @@ -226,15 +226,15 @@ a.propButton img { } .contextMenu li ul { - padding: 0; - border: 1px solid #999; background: #eee; - list-style-type: none; - position: absolute; + border: 1px solid #999; left: -999em; - z-index: 8000; + list-style-type: none; margin: -29px 0 0 100%; + padding: 0; + position: absolute; width: 164px; + z-index: 8000; } .contextMenu li ul li a { @@ -244,8 +244,8 @@ a.propButton img { .contextMenu li a.arrow-right, .contextMenu li a:hover.arrow-right { background-image: url(../images/arrow-right.gif); - background-repeat: no-repeat; background-position: right center; + background-repeat: no-repeat; } .contextMenu li:hover ul, @@ -259,10 +259,10 @@ a.propButton img { } .contextMenu li img { - width: 16px; height: 16px; - margin-bottom: -4px; -ms-interpolation-mode: bicubic; + margin-bottom: -4px; + width: 16px; } .contextMenu li input[type="checkbox"] { @@ -274,49 +274,49 @@ a.propButton img { .slider { clear: both; - position: relative; font-size: 12px; font-weight: bold; - width: 400px; margin-bottom: 15px; + position: relative; + width: 400px; } .sliderWrapper { - position: relative; font-size: 1px; - line-height: 1px; height: 9px; + line-height: 1px; + position: relative; width: 422px; } .sliderarea { - position: absolute; - top: 0; - left: 0; - height: 7px; - width: 420px; - font-size: 1px; - line-height: 1px; background: #f2f2f2 url(../images/slider-area.gif) repeat-x; border: 1px solid #a3a3a3; border-bottom: 1px solid #ccc; border-left: 1px solid #ccc; + font-size: 1px; + height: 7px; + left: 0; + line-height: 1px; margin: 0; - padding: 0; overflow: hidden; + padding: 0; + position: absolute; + top: 0; + width: 420px; } .sliderknob { - position: absolute; - top: 0; - left: 0; - height: 9px; - width: 19px; - font-size: 1px; - line-height: 1px; background: url(../images/knob.gif) no-repeat; cursor: pointer; + font-size: 1px; + height: 9px; + left: 0; + line-height: 1px; overflow: hidden; + position: absolute; + top: 0; + width: 19px; z-index: 2; } @@ -331,23 +331,23 @@ a.propButton img { /* Mocha Customization */ #mochaToolbar { - margin-top: 5px; - position: relative; height: 29px; + margin-top: 5px; overflow-y: hidden; + position: relative; } #mochaToolbar .divider { background-image: url(../images/toolbox-divider.gif); - background-repeat: no-repeat; background-position: left center; + background-repeat: no-repeat; padding-left: 14px; padding-top: 15px; } .MyMenuIcon { - margin-left: -18px; margin-bottom: -3px; + margin-left: -18px; padding-right: 5px; } @@ -362,12 +362,12 @@ a.propButton img { } #torrentsFilterInput { - width: 160px; - padding-left: 2em; background-image: url("../icons/edit-find.svg"); + background-position: left; background-repeat: no-repeat; background-size: 1.5em; - background-position: left; + padding-left: 2em; + width: 160px; } #torrentFilesFilterToolbar { @@ -376,12 +376,12 @@ a.propButton img { } #torrentFilesFilterInput { - width: 160px; - padding-left: 2em; background-image: url("../icons/edit-find.svg"); + background-position: left; background-repeat: no-repeat; background-size: 1.5em; - background-position: left; + padding-left: 2em; + width: 160px; } /* Tri-state checkbox */ @@ -407,16 +407,16 @@ label.partial { fieldset.settings { border: solid 1px black; - border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; + border-radius: 8px; padding: 4px 4px 4px 10px; } fieldset.settings legend { + font-weight: bold; margin-left: 8px; padding: 4px; - font-weight: bold; } fieldset.settings label { @@ -433,21 +433,21 @@ div.formRow { } .filterTitle { + display: block; font-weight: bold; - text-transform: uppercase; + overflow: hidden; padding-left: 5px; padding-top: 5px; - display: block; - overflow: hidden; - white-space: nowrap; text-overflow: ellipsis; + text-transform: uppercase; + white-space: nowrap; } .filterTitle img { - width: 16px; height: 16px; margin-bottom: -3px; padding: 0 5px; + width: 16px; } .filterTitle img.rotate { @@ -460,11 +460,11 @@ ul.filterList { } ul.filterList a { + color: inherit; display: block; overflow: hidden; - white-space: nowrap; text-overflow: ellipsis; - color: inherit; + white-space: nowrap; } ul.filterList li:hover { @@ -476,10 +476,10 @@ ul.filterList li:hover a { } td.generalLabel { - white-space: nowrap; text-align: right; - width: 1px; vertical-align: top; + white-space: nowrap; + width: 1px; } #torrentFilesTableDiv { @@ -492,16 +492,16 @@ td.generalLabel { } .filesTableCollapseIcon { - width: 15px; - height: 15px; cursor: pointer; + height: 15px; margin-bottom: -3px; padding-right: 5px; + width: 15px; } .filesTableCollapseIcon.rotate { - transform: rotate(270deg); margin-bottom: -1px; + transform: rotate(270deg); } .unselectable { @@ -523,35 +523,35 @@ td.generalLabel { #watched_folders_tab td, #watched_folders_tab th { - padding: 2px 4px; border: 1px solid black; + padding: 2px 4px; } .select-watched-folder-editable { - position: relative; background-color: white; border: solid grey 1px; - width: 160px; height: 20px; + position: relative; + width: 160px; } .select-watched-folder-editable select { - position: absolute; - top: 0px; + border: none; bottom: 0px; left: 0px; - border: none; - width: 160px; margin: 0; + position: absolute; + top: 0px; + width: 160px; } .select-watched-folder-editable input { + border: none; + left: 0px; + padding: 1px; position: absolute; top: 0px; - left: 0px; width: 140px; - padding: 1px; - border: none; } .select-watched-folder-editable select:focus, @@ -572,11 +572,11 @@ td.generalLabel { } td.statusBarSeparator { - width: 22px; background-image: url("../images/toolbox-divider.gif"); - background-repeat: no-repeat; background-position: center 1px; + background-repeat: no-repeat; background-size: 2px 18px; + width: 22px; } /* Statistics window */ @@ -593,21 +593,21 @@ td.statusBarSeparator { } #searchResults { - padding: 0 20px; height: 100%; + padding: 0 20px; } #searchResultsTableContainer { - height: calc(100% - 140px); -moz-height: calc(100% - 140px); -webkit-height: calc(100% - 140px); + height: calc(100% - 140px); overflow: auto; } #searchResultsTableDiv { - height: calc(100% - 26px) !important; -moz-height: calc(100% - 26px) !important; -webkit-height: calc(100% - 26px) !important; + height: calc(100% - 26px) !important; } #searchResults .dynamicTable { diff --git a/src/webui/www/public/css/login.css b/src/webui/www/public/css/login.css index 0c9a5396e..61aec4e32 100644 --- a/src/webui/www/public/css/login.css +++ b/src/webui/www/public/css/login.css @@ -1,10 +1,10 @@ body { - margin: 0; - text-align: left; + color: #555; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px; - color: #555; + margin: 0; + text-align: left; } .col { @@ -19,13 +19,13 @@ body { #main { margin-left: auto; margin-right: auto; - text-align: center; padding-top: 5em; + text-align: center; } #formplace { - text-align: left; padding: 10px; + text-align: left; } #error_msg {