diff --git a/private/css/dynamicTable.css b/private/css/dynamicTable.css index 7f7242a..62c73b2 100644 --- a/private/css/dynamicTable.css +++ b/private/css/dynamicTable.css @@ -22,8 +22,8 @@ .dynamicTable tbody tr.selected, .dynamicTable tbody tr:hover { - background-color: #747474; - color: #f7f7f7; + background-color: var(--darkmode-text-alt); + color: var(--darkmode-background); } #transferList tr:hover { @@ -49,8 +49,8 @@ tr.dynamicTableHeader { .dynamicTable th { background: var(--darkmode-background); - color: var(--darkmode-text); - border-right: 1px solid var(--darkmode-line-color); + color: var(--darkmode-text); + border-right: 1px solid var(--darkmode-line-color); box-sizing: border-box; padding: 4px; white-space: nowrap; diff --git a/private/css/style.css b/private/css/style.css index 4939bfc..e995655 100644 --- a/private/css/style.css +++ b/private/css/style.css @@ -3,101 +3,103 @@ a img, :link img, :visited img { - border: none; + border: none; } /*table { border-collapse: collapse; border-spacing: 0; }*/ :focus { - outline: none; + outline: none; } /* Structure */ body { - background-color: var(--darkmode-background); - color: var(--darkmode-text); - font-family: 'Google Sans', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; - font-size: 12px; - line-height: 18px; - margin: 0; - text-align: left; + background-color: var(--darkmode-background); + color: var(--darkmode-text); + font-family: 'Google Sans', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; + font-size: 12px; + line-height: 18px; + margin: 0; + text-align: left; } .aside { - width: 300px; + width: 300px; } .invisible { - display: none; + display: none; } /* Buttons */ .download { - --button-bg: #353434; - --button-hover-bg: #464646; - --button-text-color: #CCCCCC; - --button-hover-text-color: #8bb9fe; - --button-border-radius: 10px; - --button-diameter: 36px; - --button-outline-width: 1px; - --button-outline-color: rgb(141, 141, 141); + --button-bg: #353434; + --button-hover-bg: #464646; + --button-text-color: #CCCCCC; + --button-hover-text-color: #8bb9fe; + --button-border-radius: 10px; + --button-diameter: 36px; + --button-outline-width: 1px; + --button-outline-color: rgb(141, 141, 141); } .download { - box-sizing: border-box; - width: var(--button-diameter); - height: var(--button-diameter); - border-radius: var(--button-border-radius); - background-color: var(--button-bg); - color: var(--button-text-color); - border: none; - cursor: pointer; - position: relative; - outline: none; - background-image: url("../images/download.svg"); - background-position: center; - background-repeat: no-repeat; - background-size: 1.25em; - display:inline-block; - bottom: 8px; + box-sizing: border-box; + width: var(--button-diameter); + height: var(--button-diameter); + border-radius: var(--button-border-radius); + background-color: var(--button-bg); + color: var(--button-text-color); + border: none; + cursor: pointer; + position: relative; + outline: none; + background-image: url("../images/download.svg"); + background-position: center; + background-repeat: no-repeat; + background-size: 1.25em; + display: inline-block; + bottom: 8px; } .download:hover, .download:focus:not(:focus-visible) .tooltip { - opacity: 1; - visibility: visible; - top: calc((100% + var(--tooltip-offset)) * -1); + opacity: 1; + visibility: visible; + top: calc((100% + var(--tooltip-offset)) * -1); } .download:hover, .download:focus { - background-color: var(--button-hover-bg); + background-color: var(--button-hover-bg); } .download:active { - outline: var(--button-outline-width) solid var(--button-outline-color); + outline: var(--button-outline-width) solid var(--button-outline-color); } .button { padding: 4px 4px; background-color: #333; - border-radius:2px; - border:1px solid #dcdcdc; - display:inline-block; - cursor:pointer; - color: #FFF; - font-family: 'Google Sans', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; - font-size:14px; + border-radius: 2px; + border: 1px solid #dcdcdc; + display: inline-block; + cursor: pointer; + color: #FFF; + font-family: 'Google Sans', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; + font-size: 14px; } + .button:hover { - background:linear-gradient(to bottom, #6c7c7c 5%, #768d87 100%); - background-color:#6c7c7c; + background: linear-gradient(to bottom, #6c7c7c 5%, #768d87 100%); + background-color: #6c7c7c; } + .button:active { - position:relative; - top:1px; + position: relative; + top: 1px; } input[type="file"] { @@ -116,13 +118,13 @@ input[type="file"] { } .custom-file-upload:hover { - background:linear-gradient(to bottom, #6c7c7c 5%, #768d87 100%); - background-color:#6c7c7c; + background: linear-gradient(to bottom, #6c7c7c 5%, #768d87 100%); + background-color: #6c7c7c; } .custom-file-upload:active { - position:relative; - top:1px; + position: relative; + top: 1px; } /* Typography */ @@ -130,217 +132,217 @@ input[type="file"] { h2, h3, h4 { - color: var(--darkmode-text-alt); - font-size: 12px; - font-weight: bold; - margin: 0; - padding: 0 0 5px; + color: var(--darkmode-text-alt); + font-size: 12px; + font-weight: bold; + margin: 0; + padding: 0 0 5px; } h2 { - color: var(--darkmode-text); - font-size: 14px; - font-weight: bold; + color: var(--darkmode-text); + font-size: 14px; + font-weight: bold; } #mochaPage h3 { - border-bottom: 1px solid #bbb; - display: block; - font-size: 12px; - margin: 0 0 8px; - padding: 6px 0; + border-bottom: 1px solid #bbb; + display: block; + font-size: 12px; + margin: 0 0 8px; + padding: 6px 0; } #error_div { - color: #f00; - float: left; - font-size: 14px; - font-weight: bold; + color: #f00; + float: left; + font-size: 14px; + font-weight: bold; } h4 { - font-size: 11px; + font-size: 11px; } a { - color: #e60; - cursor: pointer; - text-decoration: none; + color: #e60; + cursor: pointer; + text-decoration: none; } a:hover { - text-decoration: none; + text-decoration: none; } p { - margin: 0; - padding: 0 0 9px; + margin: 0; + padding: 0 0 9px; } /* List Elements */ ul { - list-style: outside; - margin: 0 0 9px 16px; + list-style: outside; + margin: 0 0 9px 16px; } dt { - font-weight: bold; + font-weight: bold; } dd { - padding: 0 0 9px; + padding: 0 0 9px; } /* Code */ pre { - background-color: #f6f6f6; - border: 1px solid #d1d7dc; - color: #006600; - display: block; - font-family: 'Google Sans Display', 'Courier New', Courier, monospace; - font-size: 11px; - margin: 0 0 10px; - max-height: 250px; - overflow: auto; - padding: 10px; + background-color: #f6f6f6; + border: 1px solid #d1d7dc; + color: #006600; + display: block; + font-family: 'Google Sans Display', 'Courier New', Courier, monospace; + font-size: 11px; + margin: 0 0 10px; + max-height: 250px; + overflow: auto; + padding: 10px; } /* Dividers */ hr { - background-color: var(--darkmode-line-color); - border: 0px; - color: var(--darkmode-text); - height: 1px; + background-color: var(--darkmode-line-color); + border: 0px; + color: var(--darkmode-text); + height: 1px; } .vcenter { - vertical-align: middle; + vertical-align: middle; } #urls { - height: 100%; - width: 90%; + height: 100%; + width: 90%; } #trackersUrls { - height: 100%; - width: 90%; + height: 100%; + width: 90%; } #Filters ul { - list-style-type: none; + list-style-type: none; } #Filters ul li { - margin-left: -16px; + margin-left: -16px; } #Filters ul img { - height: 16px; - padding: 2px 4px; - vertical-align: middle; - width: 16px; + height: 16px; + padding: 2px 4px; + vertical-align: middle; + width: 16px; } .selectedFilter { - background-color: #999; - color: var(--darkmode-background); + background-color: var(--darkmode-text-alt); + color: var(--darkmode-background); } .selectedFilter a { - color: #ffffff; + color: #ffffff; } #properties { - background-color: #e5e5e5; + background-color: #e5e5e5; } a.propButton { - border: 1px solid rgb(85 81 91); - margin-left: 3px; - margin-right: 3px; - /*border-radius: 3px;*/ - padding: 2px; + border: 1px solid rgb(85 81 91); + margin-left: 3px; + margin-right: 3px; + /*border-radius: 3px;*/ + padding: 2px; } a.propButton img { - margin-bottom: -4px; + margin-bottom: -4px; } .scrollableMenu { - overflow-x: hidden; - overflow-y: auto; + overflow-x: hidden; + overflow-y: auto; } /* context menu specific */ .contextMenu { - background-color: var(--darkmode-background); - color: var(--darkmode-text); - border: 1px solid var(--darkmode-line-color); - display: none; - list-style-type: none; - padding: 0; + background-color: var(--darkmode-background); + color: var(--darkmode-text); + border: 1px solid var(--darkmode-line-color); + display: none; + list-style-type: none; + padding: 0; } .contextMenu .separator { - border-top: 1px solid var(--darkmode-line-color); + border-top: 1px solid var(--darkmode-line-color); } .contextMenu li { - margin: 0; - padding: 0; + margin: 0; + padding: 0; } .contextMenu li a { - color: var(--darkmode-text); - display: block; - font-family: 'Google Sans', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; - font-size: 12px; - padding: 5px 20px 5px 5px; - text-decoration: none; - white-space: nowrap; + color: var(--darkmode-text); + display: block; + font-family: 'Google Sans', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; + font-size: 12px; + padding: 5px 20px 5px 5px; + text-decoration: none; + white-space: nowrap; } .contextMenu li a:hover { - background-color: var(--darkmode-text-alt); - color: var(--darkmode-line-color); + background-color: var(--darkmode-text-alt); + color: var(--darkmode-line-color); } .contextMenu li a.disabled { - color: #ccc; - font-style: italic; + color: #ccc; + font-style: italic; } .contextMenu li a.disabled:hover { - background-color: #eee; + background-color: #eee; } .contextMenu li ul { - background-color: var(--darkmode-background); - color: var(--darkmode-text); - border: 1px solid var(--darkmode-line-color); - left: -999em; - list-style-type: none; - margin: -29px 0 0 100%; - padding: 0; - position: absolute; - width: 164px; - z-index: 8000; + background-color: var(--darkmode-background); + color: var(--darkmode-text); + border: 1px solid var(--darkmode-line-color); + left: -999em; + 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; + position: relative; } .contextMenu li a.arrow-right, .contextMenu li a:hover.arrow-right { - background-image: url("../images/arrow-right.gif"); - background-position: right center; - background-repeat: no-repeat; + background-image: url("../images/arrow-right.gif"); + background-position: right center; + background-repeat: no-repeat; } .contextMenu li:hover ul, @@ -349,323 +351,323 @@ a.propButton img { .contextMenu li li li.ieHover ul, .contextMenu li li:hover ul, .contextMenu li li li:hover ul { - /* lists nested under hovered list items */ - left: auto; + /* lists nested under hovered list items */ + left: auto; } .contextMenu li img { - height: 16px; - margin-bottom: -4px; - width: 16px; + height: 16px; + margin-bottom: -4px; + width: 16px; } .contextMenu li input[type="checkbox"] { - position: relative; - top: 3px; + position: relative; + top: 3px; } /* Sliders */ .slider { - clear: both; - font-size: 12px; - font-weight: bold; - margin-bottom: 15px; - position: relative; - width: 400px; + clear: both; + font-size: 12px; + font-weight: bold; + margin-bottom: 15px; + position: relative; + width: 400px; } .sliderWrapper { - font-size: 1px; - height: 9px; - line-height: 1px; - position: relative; - width: 422px; + font-size: 1px; + height: 9px; + line-height: 1px; + position: relative; + width: 422px; } .sliderarea { - 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; - overflow: hidden; - padding: 0; - position: absolute; - top: 0; - width: 420px; + 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; + overflow: hidden; + padding: 0; + position: absolute; + top: 0; + width: 420px; } .sliderknob { - 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; + 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; } .update { - padding-bottom: 5px; + padding-bottom: 5px; } .mochaToolButton { - margin-right: 10px; + margin-right: 10px; } /* Mocha Customization */ #mochaToolbar { - height: 29px; - margin-top: 5px; - overflow-y: hidden; - position: relative; + height: 29px; + margin-top: 5px; + overflow-y: hidden; + position: relative; } #mochaToolbar .divider { - /* background-image: url("../images/toolbox-divider.gif"); + /* background-image: url("../images/toolbox-divider.gif"); background-position: left center; background-repeat: no-repeat; */ - border-left: 1px solid var(--darkmode-line-color); - padding-left: 14px; - padding-top: 15px; + border-left: 1px solid var(--darkmode-line-color); + padding-left: 14px; + padding-top: 15px; } .MyMenuIcon { - margin-bottom: -3px; - margin-left: -18px; - padding-right: 5px; + margin-bottom: -3px; + margin-left: -18px; + padding-right: 5px; } #mainWindowTabs { - float: right; - margin: 4px 5px 0 0; + float: right; + margin: 4px 5px 0 0; } #torrentsFilterToolbar { - float: right; - margin-right: 30px; + float: right; + margin-right: 30px; } #torrentsFilterInput { - background-image: url("../images/edit-find.svg"); - background-position: left; - background-repeat: no-repeat; - background-size: 1.5em; - padding-left: 2em; - width: 160px; - height: 100%; - min-height: 20px; + background-image: url("../images/edit-find.svg"); + background-position: left; + background-repeat: no-repeat; + background-size: 1.5em; + padding-left: 2em; + width: 160px; + height: 100%; + min-height: 20px; } #torrentFilesFilterToolbar { - float: right; - margin-right: 30px; + float: right; + margin-right: 30px; } #torrentFilesFilterInput { - background-image: url("../images/edit-find.svg"); - background-position: left; - background-repeat: no-repeat; - background-size: 1.5em; - padding-left: 2em; - width: 160px; + background-image: url("../images/edit-find.svg"); + background-position: left; + background-repeat: no-repeat; + background-size: 1.5em; + padding-left: 2em; + width: 160px; } /* Tri-state checkbox */ label.tristate { - background: url("../images/3-state-checkbox.gif") 0 0 no-repeat; - display: block; - float: left; - height: 13px; - margin: 0.15em 8px 5px 0px; - overflow: hidden; - text-indent: -999em; - width: 13px; + background: url("../images/3-state-checkbox.gif") 0 0 no-repeat; + display: block; + float: left; + height: 13px; + margin: 0.15em 8px 5px 0px; + overflow: hidden; + text-indent: -999em; + width: 13px; } label.checked { - background-position: 0 -13px; + background-position: 0 -13px; } label.partial { - background-position: 0 -26px; + background-position: 0 -26px; } fieldset { - border-color: var(--darkmode-line-color); + border-color: var(--darkmode-line-color); } fieldset.settings { - border: solid 1px var(--darkmode-line-color); - border-radius: 8px; - padding: 4px 4px 4px 10px; + border: solid 1px var(--darkmode-line-color); + border-radius: 8px; + padding: 4px 4px 4px 10px; } fieldset.settings legend { - font-weight: bold; - margin-left: 8px; - padding: 4px; + font-weight: bold; + margin-left: 8px; + padding: 4px; } fieldset.settings label { - padding: 2px; + padding: 2px; } fieldset.settings+div.formRow { - margin-top: 10px; + margin-top: 10px; } div.formRow { - clear: left; - display: block; + clear: left; + display: block; } .filterTitle { - display: block; - font-weight: bold; - overflow: hidden; - padding-left: 5px; - padding-top: 5px; - text-overflow: ellipsis; - text-transform: uppercase; - white-space: nowrap; + display: block; + font-weight: bold; + overflow: hidden; + padding-left: 5px; + padding-top: 5px; + text-overflow: ellipsis; + text-transform: uppercase; + white-space: nowrap; } .filterTitle img { - height: 16px; - margin-bottom: -3px; - padding: 0 5px; - width: 16px; + height: 16px; + margin-bottom: -3px; + padding: 0 5px; + width: 16px; } .filterTitle img.rotate { - transform: rotate(270deg); + transform: rotate(270deg); } ul.filterList { - margin: 0 0 0 16px; - padding-left: 0; + margin: 0 0 0 16px; + padding-left: 0; } ul.filterList a { - color: inherit; - display: block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; + color: inherit; + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } ul.filterList li:hover { - background-color: #eee; + background-color: #eee; } ul.filterList li:hover a { - color: var(--darkmode-background); + color: var(--darkmode-background); } td.generalLabel { - text-align: right; - vertical-align: top; - white-space: nowrap; - width: 1px; + text-align: right; + vertical-align: top; + white-space: nowrap; + width: 1px; } #torrentFilesTableDiv { - line-height: 20px; + line-height: 20px; } #torrentTrackersTableDiv, #webseedsTable { - line-height: 25px; + line-height: 25px; } .filesTableCollapseIcon { - cursor: pointer; - height: 15px; - margin-bottom: -3px; - padding-right: 5px; - width: 15px; + cursor: pointer; + height: 15px; + margin-bottom: -3px; + padding-right: 5px; + width: 15px; } .filesTableCollapseIcon.rotate { - margin-bottom: -1px; - transform: rotate(270deg); + margin-bottom: -1px; + transform: rotate(270deg); } .unselectable { - -webkit-touch-callout: none; - user-select: none; + -webkit-touch-callout: none; + user-select: none; } #prop_general { - padding: 2px; + padding: 2px; } .piecesbarWrapper { - position: relative; - width: 100%; + position: relative; + width: 100%; } .piecesbarCanvas { - height: 100%; - image-rendering: pixelated; - inset: 0; - position: absolute; - width: 100%; + height: 100%; + image-rendering: pixelated; + inset: 0; + position: absolute; + width: 100%; } #watched_folders_tab { - border-collapse: collapse; + border-collapse: collapse; } #watched_folders_tab td, #watched_folders_tab th { - border: 1px solid black; - padding: 2px 4px; + border: 1px solid black; + padding: 2px 4px; } .select-watched-folder-editable { - background-color: white; - border: solid grey 1px; - height: 20px; - position: relative; - width: 160px; + background-color: white; + border: solid grey 1px; + height: 20px; + position: relative; + width: 160px; } .select-watched-folder-editable select { - border: none; - bottom: 0px; - left: 0px; - margin: 0; - position: absolute; - top: 0px; - width: 160px; + border: none; + bottom: 0px; + left: 0px; + margin: 0; + position: absolute; + top: 0px; + width: 160px; } .select-watched-folder-editable input { - border: none; - left: 0px; - padding: 1px; - position: absolute; - top: 0px; - width: 140px; + border: none; + left: 0px; + padding: 1px; + position: absolute; + top: 0px; + width: 140px; } .select-watched-folder-editable select:focus, .select-editable input:focus { - outline: none; + outline: none; } /* @@ -673,24 +675,24 @@ td.generalLabel { * disappearing when zooming in the browser. */ #filtersColumn_handle { - margin-left: -1px; + margin-left: -1px; } .combo_priority { - font-size: 1em; + font-size: 1em; } td.statusBarSeparator { - background-image: url("../images/toolbox-divider.gif"); - background-position: center 1px; - background-repeat: no-repeat; - background-size: 2px 18px; - width: 22px; + background-image: url("../images/toolbox-divider.gif"); + background-position: center 1px; + background-repeat: no-repeat; + background-size: 2px 18px; + width: 22px; } /* Statistics window */ .statisticsValue { - text-align: right; + text-align: right; } /* Search tab */ @@ -698,57 +700,57 @@ td.statusBarSeparator { #SearchPanel, #SearchPanel_wrapper, #SearchPanel_pad { - height: inherit; + height: inherit; } #searchResults { - height: 100%; - padding: 0 20px; + height: 100%; + padding: 0 20px; } #searchResultsTableContainer { - -moz-height: calc(100% - 150px); - -webkit-height: calc(100% - 150px); - height: calc(100% - 150px); - overflow: auto; + -moz-height: calc(100% - 150px); + -webkit-height: calc(100% - 150px); + height: calc(100% - 150px); + overflow: auto; } #searchResultsTableDiv { - -moz-height: calc(100% - 26px) !important; - -webkit-height: calc(100% - 26px) !important; - height: calc(100% - 26px) !important; + -moz-height: calc(100% - 26px) !important; + -webkit-height: calc(100% - 26px) !important; + height: calc(100% - 26px) !important; } #searchResults .dynamicTable { - width: 100%; + width: 100%; } #searchResults .numSearchResults { - font-style: italic; + font-style: italic; } .red { - color: red; + color: red; } .green { - color: green; + color: green; } .searchPluginsTableRow { - cursor: pointer; + cursor: pointer; } #torrentFilesTableDiv .dynamicTable tr.nonAlt { - background-color: var(--darkmode-background); + background-color: var(--darkmode-background); } #torrentFilesTableDiv .dynamicTable tr.nonAlt.selected { - background-color: #354158; - color: #fff; + background-color: #354158; + color: #fff; } #torrentFilesTableDiv .dynamicTable tr.nonAlt:hover { - background-color: #ee6600; - color: #fff; + background-color: #ee6600; + color: #fff; } \ No newline at end of file