Browse Source

Merge pull request #15017 from Chocobo1/css_formatting

Format and lint CSS code
adaptive-webui-19844
Chocobo1 4 years ago committed by GitHub
parent
commit
3b4bf90a13
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 18
      src/webui/www/.stylelintrc.json
  2. 10
      src/webui/www/package.json
  3. 1
      src/webui/www/private/css/Core.css
  4. 179
      src/webui/www/private/css/Layout.css
  5. 25
      src/webui/www/private/css/Tabs.css
  6. 174
      src/webui/www/private/css/Window.css
  7. 18
      src/webui/www/private/css/dynamicTable.css
  8. 228
      src/webui/www/private/css/style.css
  9. 10
      src/webui/www/public/css/login.css

18
src/webui/www/.stylelintrc.json

@ -0,0 +1,18 @@ @@ -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
}
}

10
src/webui/www/package.json

@ -6,12 +6,16 @@ @@ -6,12 +6,16 @@
"url": "https://github.com/qbittorrent/qBittorrent.git"
},
"scripts": {
"format": "js-beautify 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"
"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 && stylelint **/*.css"
},
"devDependencies": {
"eslint": "*",
"eslint-plugin-html": "*",
"js-beautify": "*"
"js-beautify": "*",
"prettier": "*",
"stylelint": "*",
"stylelint-config-standard": "*",
"stylelint-order": "*"
}
}

1
src/webui/www/private/css/Core.css

@ -43,7 +43,6 @@ Notes: @@ -43,7 +43,6 @@ Notes:
margin-top: 2px;
}
/* Theme Specific Adjustments to Default Plugin Styles
---------------------------------------------------------------- */

179
src/webui/www/private/css/Layout.css

@ -18,7 +18,8 @@ Required by: @@ -18,7 +18,8 @@ Required by:
/* Layout
---------------------------------------------------------------- */
html, body {
html,
body {
background: #fff;
}
@ -27,12 +28,12 @@ body { @@ -27,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 {
@ -40,35 +41,35 @@ body { @@ -40,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;
}
@ -79,14 +80,14 @@ body { @@ -79,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 {
@ -102,20 +103,18 @@ body { @@ -102,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 {
@ -127,33 +126,30 @@ body { @@ -127,33 +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 {
#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,
@ -163,109 +159,107 @@ body { @@ -163,109 +159,107 @@ 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;
}
#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;
background: #6c98d9;
-moz-border-radius: 2px;
color: #fff;
}
#desktopNavbar li ul li a:hover .check {
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;
}
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
---------------------------------------------------------------- */
/* 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 {
@ -289,11 +283,11 @@ li.divider { @@ -289,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 {
@ -306,13 +300,13 @@ li.divider { @@ -306,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 {
@ -325,18 +319,18 @@ li.divider { @@ -325,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 {
@ -344,40 +338,39 @@ li.divider { @@ -344,40 +338,39 @@ 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;
}
.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;
}
@ -387,16 +380,16 @@ div.toolbox.divider { /* Have to specify div here for IE6's sake */ @@ -387,16 +380,16 @@ div.toolbox.divider { /* Have to specify div here for IE6's sake */
}
.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 {
@ -411,22 +404,22 @@ div.toolbox.divider { /* Have to specify div here for IE6's sake */ @@ -411,22 +404,22 @@ div.toolbox.divider { /* Have to specify div here for IE6's sake */
}
#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 {

25
src/webui/www/private/css/Tabs.css

@ -18,27 +18,26 @@ Required by: @@ -18,27 +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 {
padding-top: 1px;
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 {
@ -47,19 +46,19 @@ Required by: @@ -47,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;
}

174
src/webui/www/private/css/Window.css

@ -19,17 +19,15 @@ Required by: @@ -19,17 +19,15 @@ Required by:
---------------------------------------------------------------- */
.mocha {
background-color: #e5e5e5;
display: none;
overflow: hidden;
background-color: #e5e5e5;
}
.mocha.isFocused {}
.mochaOverlay {
left: 0;
position: absolute; /* This is also set in theme.js in order to make theme transitions smoother */
top: 0;
left: 0;
}
/*
@ -44,18 +42,18 @@ Required by: @@ -44,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 {
@ -63,12 +61,12 @@ Required by: @@ -63,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 {
@ -77,19 +75,20 @@ div.mochaToolbarWrapper.bottom { @@ -77,19 +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;
}
.mochaContentWrapper { /* Has a fixed height and scrollbars if required. */
/* Has a fixed height and scrollbars if required. */
.mochaContentWrapper {
background: #fff;
font-size: 12px;
overflow: auto;
background: #fff;
}
.mochaContent {
@ -97,57 +96,59 @@ div.mochaToolbarWrapper.bottom { @@ -97,57 +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;
-moz-opacity: .0;
overflow: hidden;
font-size: 1px; /* For IE6 */
height: 3px;
-moz-opacity: 0;
opacity: 0;
overflow: hidden;
position: absolute;
width: 3px;
z-index: 2;
}
.mocha .corner { /* Corner resize handles */
width: 10px;
height: 10px;
/* Corner resize handles */
.mocha .corner {
background: #f00;
height: 10px;
width: 10px;
}
.mocha .cornerSE { /* Bottom right resize handle */
width: 20px;
height: 20px;
/* Bottom right resize handle */
.mocha .cornerSE {
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;
}
/*
@ -158,36 +159,32 @@ div.mochaToolbarWrapper.bottom { @@ -158,36 +159,32 @@ div.mochaToolbarWrapper.bottom {
2. Replcac the background-color with a background-image for each button.
*/
.mochaMinimizeButton, .mochaMaximizeButton, .mochaCloseButton {
.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 {
margin-left: 0;
}
.mochaMaximizeButton {
}
.mochaCloseButton {
}
.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 {
@ -196,56 +193,56 @@ div.mochaToolbarWrapper.bottom { @@ -196,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 {
@ -254,29 +251,34 @@ div.mochaToolbarWrapper.bottom { @@ -254,29 +251,34 @@ 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;
}
.windowClosed {
visibility: hidden;
display: none;
left: -20000px;
overflow: hidden;
position: absolute;
top: -20000px;
left: -20000px;
visibility: hidden;
z-index: -1;
overflow: hidden;
}
.windowClosed .mochaContentBorder, .windowClosed .mochaToolbarWrapper,
.windowClosed .mochaTitlebar, .windowClosed .mochaControls,
.windowClosed .mochaContentBorder,
.windowClosed .mochaToolbarWrapper,
.windowClosed .mochaTitlebar,
.windowClosed .mochaControls,
.windowClosed .mochaCanvasControls {
display: none;
left: 0;
position: absolute;
top: 0;
left: 0;
visibility: hidden;
display: none;
z-index: -1;
}
@ -317,8 +319,8 @@ div.mochaToolbarWrapper.bottom { @@ -317,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 {
@ -326,10 +328,10 @@ div.mochaToolbarWrapper.bottom { @@ -326,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 */

18
src/webui/www/private/css/dynamicTable.css

@ -34,8 +34,8 @@ @@ -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 { @@ -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 { @@ -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 { @@ -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;
}

228
src/webui/www/private/css/style.css

@ -2,7 +2,9 @@ @@ -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;
}
@ -15,12 +17,12 @@ a img, :link img, :visited img { @@ -15,12 +17,12 @@ a img, :link img, :visited 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 {
@ -33,30 +35,34 @@ body { @@ -33,30 +35,34 @@ body {
/* Typography */
h2, h3, h4 {
margin: 0;
padding: 0 0 5px 0;
h2,
h3,
h4 {
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 {
color: #f00;
float: left;
font-size: 14px;
font-weight: bold;
}
@ -66,8 +72,8 @@ h4 { @@ -66,8 +72,8 @@ h4 {
a {
color: #e60;
text-decoration: none;
cursor: pointer;
text-decoration: none;
}
a:hover {
@ -98,24 +104,24 @@ dd { @@ -98,24 +104,24 @@ dd {
pre {
background-color: #f6f6f6;
border: 1px solid #d1d7dc;
color: #006600;
display: block;
font-family: 'Courier New', Courier, monospace;
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 {
@ -123,13 +129,13 @@ hr { @@ -123,13 +129,13 @@ hr {
}
#urls {
width: 90%;
height: 100%;
width: 90%;
}
#trackersUrls {
width: 90%;
height: 100%;
width: 90%;
}
#Filters ul {
@ -141,19 +147,19 @@ hr { @@ -141,19 +147,19 @@ hr {
}
#Filters ul img {
height: 16px;
padding: 2px 4px;
vertical-align: middle;
width: 16px;
height: 16px;
}
.selectedFilter {
background-color: #415A8D;
color: #FFFFFF;
background-color: #415a8d;
color: #ffffff;
}
.selectedFilter a {
color: #FFFFFF;
color: #ffffff;
}
#properties {
@ -162,10 +168,10 @@ hr { @@ -162,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 {
@ -173,18 +179,18 @@ a.propButton img { @@ -173,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 {
@ -197,12 +203,12 @@ a.propButton img { @@ -197,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;
}
@ -220,26 +226,26 @@ a.propButton img { @@ -220,26 +226,26 @@ a.propButton img {
}
.contextMenu li ul {
padding: 0;
border: 1px solid #999;
padding: 0;
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 {
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;
background-repeat: no-repeat;
}
.contextMenu li:hover ul,
@ -247,18 +253,19 @@ a.propButton img { @@ -247,18 +253,19 @@ 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;
}
.contextMenu li img {
width: 16px;
height: 16px;
margin-bottom: -4px;
-ms-interpolation-mode: bicubic;
margin-bottom: -4px;
width: 16px;
}
.contextMenu li input[type=checkbox] {
.contextMenu li input[type="checkbox"] {
position: relative;
top: 3px;
}
@ -267,49 +274,49 @@ a.propButton img { @@ -267,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;
}
@ -324,23 +331,23 @@ a.propButton img { @@ -324,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;
}
@ -355,12 +362,12 @@ a.propButton img { @@ -355,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 {
@ -369,12 +376,12 @@ a.propButton img { @@ -369,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 */
@ -384,7 +391,7 @@ label.tristate { @@ -384,7 +391,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;
@ -400,16 +407,16 @@ label.partial { @@ -400,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 {
@ -426,21 +433,21 @@ div.formRow { @@ -426,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 {
@ -453,11 +460,11 @@ ul.filterList { @@ -453,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 {
@ -469,10 +476,10 @@ ul.filterList li:hover a { @@ -469,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 {
@ -485,16 +492,16 @@ td.generalLabel { @@ -485,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 {
@ -514,39 +521,41 @@ td.generalLabel { @@ -514,39 +521,41 @@ td.generalLabel {
border-collapse: collapse;
}
#watched_folders_tab td, #watched_folders_tab th {
padding: 2px 4px;
#watched_folders_tab td,
#watched_folders_tab th {
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, .select-editable input:focus {
.select-watched-folder-editable select:focus,
.select-editable input:focus {
outline: none;
}
@ -558,21 +567,16 @@ td.generalLabel { @@ -558,21 +567,16 @@ td.generalLabel {
margin-left: -1px;
}
#error_div {
float: left;
font-size: 14px;
}
.combo_priority {
font-size: 1em;
}
td.statusBarSeparator {
width: 22px;
background-image: url('../images/toolbox-divider.gif');
background-repeat: no-repeat;
background-image: url("../images/toolbox-divider.gif");
background-position: center 1px;
background-repeat: no-repeat;
background-size: 2px 18px;
width: 22px;
}
/* Statistics window */
@ -582,26 +586,28 @@ td.statusBarSeparator { @@ -582,26 +586,28 @@ td.statusBarSeparator {
/* Search tab */
#SearchPanel, #SearchPanel_wrapper, #SearchPanel_pad {
#SearchPanel,
#SearchPanel_wrapper,
#SearchPanel_pad {
height: inherit;
}
#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 {

10
src/webui/www/public/css/login.css

@ -1,10 +1,10 @@ @@ -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 { @@ -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 {

Loading…
Cancel
Save