mirror of
https://github.com/qbittorrent/qBittorrent.git
synced 2026-01-03 06:02:29 -06:00
WebUI: Apply box-sizing reset
Box-sizing: border-box is now applied globally. A lot of tiny changes were made but they were necessary to correct resulting inconsistencies. Everything should be pretty much as it was with just some minor exceptions. Looks like this PR also indirectly fixed #21414. PR #21464.
This commit is contained in:
skomerko
GitHub
@@ -18,10 +18,6 @@ Required by:
|
||||
/* Layout
|
||||
---------------------------------------------------------------- */
|
||||
|
||||
body {
|
||||
margin: 0; /* Required */
|
||||
}
|
||||
|
||||
#desktop {
|
||||
cursor: default; /* Fix for issue in IE7. IE7 wants to use the I-bar text cursor */
|
||||
height: 100%;
|
||||
@@ -88,13 +84,11 @@ body {
|
||||
|
||||
#desktopNavbar {
|
||||
background-color: var(--color-background-default);
|
||||
margin: 0 0px;
|
||||
overflow: hidden; /* Remove this line if you want the menu to be backward compatible with Firefox 2 */
|
||||
}
|
||||
|
||||
#desktopNavbar ul {
|
||||
font-size: 12px;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
user-select: none;
|
||||
@@ -164,8 +158,8 @@ body {
|
||||
#desktopNavbar li ul li a {
|
||||
color: var(--color-text-default);
|
||||
font-weight: normal;
|
||||
min-width: 120px;
|
||||
padding: 4px 10px 4px 25px;
|
||||
min-width: 155px;
|
||||
padding: 4px 10px 4px 23px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@@ -200,14 +194,17 @@ li.divider {
|
||||
border-top: 1px solid var(--color-border-default);
|
||||
overflow: hidden; /* This can be set to hidden or auto */
|
||||
position: relative;
|
||||
/*height: 100%;*/
|
||||
}
|
||||
|
||||
#propertiesPanel_header {
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
|
||||
#desktopFooterWrapper {
|
||||
bottom: 0;
|
||||
height: 30px;
|
||||
height: 28px;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
@@ -217,8 +214,8 @@ li.divider {
|
||||
#desktopFooter {
|
||||
font-family: Verdana, Arial, Helvetica, sans-serif;
|
||||
font-size: 11px;
|
||||
height: 24px;
|
||||
padding: 6px 8px 0;
|
||||
height: 28px;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
/* Panel Layout
|
||||
@@ -266,7 +263,6 @@ li.divider {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
height: 22px;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
padding: 3px 8px 0;
|
||||
}
|
||||
@@ -302,7 +298,7 @@ li.divider {
|
||||
background: url("../images/handle-icon-horizontal.gif") center center
|
||||
no-repeat;
|
||||
font-size: 1px;
|
||||
height: 4px;
|
||||
height: 6px;
|
||||
line-height: 1px;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
@@ -316,7 +312,7 @@ li.divider {
|
||||
float: left;
|
||||
min-height: 10px;
|
||||
overflow: hidden;
|
||||
width: 4px;
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
/* Toolboxes */
|
||||
@@ -324,7 +320,7 @@ li.divider {
|
||||
.toolbox {
|
||||
float: right;
|
||||
height: 24px;
|
||||
margin-top: 3px;
|
||||
margin-top: 1px;
|
||||
overflow: hidden;
|
||||
padding: 0 5px;
|
||||
text-align: right;
|
||||
|
||||
@@ -24,9 +24,7 @@ Required by:
|
||||
|
||||
.tab-menu {
|
||||
font-size: 11px;
|
||||
line-height: 16px;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@@ -43,16 +41,19 @@ Required by:
|
||||
.tab-menu li a {
|
||||
align-items: center;
|
||||
background-color: var(--color-background-default);
|
||||
border-radius: 5px 5px 0 0;
|
||||
border-radius: 3px 3px 0 0;
|
||||
color: var(--color-text-default);
|
||||
display: flex;
|
||||
font-weight: normal;
|
||||
gap: 5px;
|
||||
margin-left: 6px;
|
||||
padding: 5px 8px;
|
||||
padding: 5px 7px 3px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tab-menu li:first-child a {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.tab-menu li:hover a {
|
||||
background-color: var(--color-background-hover);
|
||||
color: var(--color-text-white);
|
||||
|
||||
@@ -56,7 +56,6 @@ Required by:
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
line-height: 15px;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
padding: 5px 10px 4px 12px;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
@@ -45,7 +45,6 @@ tr.dynamicTableHeader {
|
||||
|
||||
.dynamicTable th {
|
||||
border-right: 1px solid var(--color-border-default);
|
||||
box-sizing: border-box;
|
||||
padding: 4px 2px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -68,9 +67,9 @@ tr.dynamicTableHeader {
|
||||
|
||||
.dynamicTable th.sorted {
|
||||
background-image: url("../images/go-up.svg");
|
||||
background-position: right;
|
||||
background-position: right 3px center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 15px;
|
||||
background-size: 12px;
|
||||
}
|
||||
|
||||
.dynamicTable th.sorted.reverse {
|
||||
@@ -87,6 +86,11 @@ tr.dynamicTableHeader {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#propertiesPanel .dynamicTableFixedHeaderDiv,
|
||||
#torrentsTableFixedHeaderDiv {
|
||||
border-bottom: 1px solid var(--color-border-default);
|
||||
}
|
||||
|
||||
.dynamicTableDiv {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
@@ -55,12 +55,34 @@
|
||||
|
||||
/* Reset */
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
input,
|
||||
button,
|
||||
textarea,
|
||||
select {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
a img,
|
||||
:link img,
|
||||
:visited img {
|
||||
border: none;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* Forms */
|
||||
|
||||
input[type="text"],
|
||||
@@ -72,27 +94,31 @@ select {
|
||||
border: 1px solid var(--color-border-default);
|
||||
border-radius: 3px;
|
||||
color: var(--color-text-default);
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
select {
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
accent-color: var(--color-accent-blue);
|
||||
margin: 3px 3px 3px 4px;
|
||||
}
|
||||
|
||||
input[type="button"],
|
||||
input[type="submit"],
|
||||
button {
|
||||
cursor: pointer;
|
||||
padding: 4px 16px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
cursor: initial;
|
||||
}
|
||||
|
||||
/*table { border-collapse: collapse; border-spacing: 0; }*/
|
||||
|
||||
:focus {
|
||||
outline: none;
|
||||
}
|
||||
@@ -103,8 +129,7 @@ body {
|
||||
color: var(--color-text-default);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@@ -123,7 +148,6 @@ h3,
|
||||
h4 {
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
padding: 0 0 5px;
|
||||
}
|
||||
|
||||
@@ -164,17 +188,11 @@ a:hover {
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
padding: 0 0 9px;
|
||||
}
|
||||
|
||||
/* List Elements */
|
||||
|
||||
ul {
|
||||
list-style: outside;
|
||||
margin: 0 0 9px 16px;
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
@@ -187,7 +205,8 @@ dd {
|
||||
|
||||
fieldset {
|
||||
border: 1px solid var(--color-border-default);
|
||||
border-radius: 5px;
|
||||
border-radius: 1px;
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
/* Code */
|
||||
@@ -212,6 +231,7 @@ hr {
|
||||
border: 0px;
|
||||
color: var(--color-text-default);
|
||||
height: 1px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.vcenter {
|
||||
@@ -224,7 +244,9 @@ hr {
|
||||
}
|
||||
|
||||
#trackersUrls {
|
||||
display: block;
|
||||
height: 100%;
|
||||
margin: 0 auto 10px;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
@@ -232,10 +254,6 @@ hr {
|
||||
overflow-x: hidden !important; /* override for default mocha inline style */
|
||||
}
|
||||
|
||||
#Filters ul {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
#Filters ul img {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
@@ -249,7 +267,6 @@ a.propButton {
|
||||
border: 1px solid rgb(85 81 91);
|
||||
margin-left: 3px;
|
||||
margin-right: 3px;
|
||||
/*border-radius: 3px;*/
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
@@ -267,7 +284,6 @@ a.propButton img {
|
||||
background-color: var(--color-background-default);
|
||||
border: 1px solid var(--color-border-default);
|
||||
display: none;
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@@ -280,7 +296,6 @@ a.propButton img {
|
||||
}
|
||||
|
||||
.contextMenu li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
user-select: none;
|
||||
}
|
||||
@@ -299,9 +314,7 @@ a.propButton img {
|
||||
align-items: center;
|
||||
color: var(--color-text-default);
|
||||
display: flex;
|
||||
font-family: Tahoma, Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
gap: 7px;
|
||||
gap: 2px;
|
||||
padding: 5px 20px 5px 5px;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
@@ -320,11 +333,10 @@ a.propButton img {
|
||||
background: var(--color-background-default);
|
||||
border: 1px solid var(--color-border-default);
|
||||
left: -999em;
|
||||
list-style-type: none;
|
||||
margin: -29px 0 0 100%;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 164px;
|
||||
width: max-content;
|
||||
z-index: 8000;
|
||||
}
|
||||
|
||||
@@ -345,16 +357,18 @@ a.propButton img {
|
||||
|
||||
.contextMenu li img {
|
||||
height: 16px;
|
||||
margin-right: 0.5em;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
.contextMenu li input[type="checkbox"] {
|
||||
position: relative;
|
||||
top: 3px;
|
||||
margin: 0 0.5em 0 0;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
#contextCategoryList img {
|
||||
border: 1px solid transparent;
|
||||
box-sizing: content-box;
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
@@ -390,7 +404,6 @@ a.propButton img {
|
||||
height: 7px;
|
||||
left: 0;
|
||||
line-height: 1px;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
@@ -438,9 +451,7 @@ a.propButton img {
|
||||
}
|
||||
|
||||
.MyMenuIcon {
|
||||
margin-bottom: -3px;
|
||||
margin-left: -18px;
|
||||
padding-right: 5px;
|
||||
margin: 0 6px -3px -18px;
|
||||
}
|
||||
|
||||
#mainWindowTabs {
|
||||
@@ -462,7 +473,7 @@ a.propButton img {
|
||||
border: 1px solid var(--color-border-default);
|
||||
border-radius: 3px;
|
||||
min-width: 160px;
|
||||
padding: 4px 4px 4px 25px;
|
||||
padding: 2px 12px 2px 25px;
|
||||
}
|
||||
|
||||
#torrentsFilterRegexBox {
|
||||
@@ -510,8 +521,11 @@ a.propButton img {
|
||||
background-position: left;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1.5em;
|
||||
margin-top: -1px;
|
||||
padding-bottom: 1px;
|
||||
padding-left: 2em;
|
||||
width: 250px;
|
||||
padding-top: 1px;
|
||||
width: 190px;
|
||||
}
|
||||
|
||||
/* Tri-state checkbox */
|
||||
@@ -537,8 +551,7 @@ label.partial {
|
||||
|
||||
fieldset.settings {
|
||||
border: 1px solid var(--color-border-default);
|
||||
border-radius: 8px;
|
||||
padding: 4px 4px 4px 10px;
|
||||
padding: 4px 4px 6px 6px;
|
||||
}
|
||||
|
||||
fieldset.settings legend {
|
||||
@@ -561,7 +574,6 @@ div.formRow {
|
||||
}
|
||||
|
||||
.filterTitle {
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
font-weight: bold;
|
||||
@@ -575,7 +587,6 @@ div.formRow {
|
||||
}
|
||||
|
||||
.filterTitle img {
|
||||
box-sizing: border-box;
|
||||
height: 16px;
|
||||
padding: 2px;
|
||||
width: 16px;
|
||||
@@ -590,10 +601,6 @@ div.formRow {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
ul.filterList * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
ul.filterList {
|
||||
margin: 0;
|
||||
padding-left: 0;
|
||||
@@ -605,6 +612,7 @@ ul.filterList .selectedFilter > .link :is(img, button) {
|
||||
}
|
||||
|
||||
ul.filterList span.link {
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
@@ -664,6 +672,11 @@ td.generalLabel {
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
#tristate_cb {
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.filesTableCollapseIcon {
|
||||
cursor: pointer;
|
||||
height: 15px;
|
||||
@@ -710,8 +723,8 @@ td.generalLabel {
|
||||
}
|
||||
|
||||
.select-watched-folder-editable {
|
||||
border: solid grey 1px;
|
||||
height: 20px;
|
||||
border: 1px solid var(--color-border-default);
|
||||
height: 22px;
|
||||
position: relative;
|
||||
width: 160px;
|
||||
}
|
||||
@@ -720,16 +733,16 @@ td.generalLabel {
|
||||
border: none;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
width: 160px;
|
||||
width: 158px;
|
||||
}
|
||||
|
||||
.select-watched-folder-editable input {
|
||||
border: none;
|
||||
left: 0px;
|
||||
padding: 1px;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
width: 140px;
|
||||
@@ -750,6 +763,7 @@ td.generalLabel {
|
||||
|
||||
.combo_priority {
|
||||
font-size: 1em;
|
||||
padding: 2px 6px;
|
||||
}
|
||||
|
||||
td.statusBarSeparator {
|
||||
@@ -757,14 +771,10 @@ td.statusBarSeparator {
|
||||
background-position: center 1px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 2px 18px;
|
||||
width: 22px;
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
/* Statistics window */
|
||||
#statisticspage * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#statisticsContent {
|
||||
& table {
|
||||
background-color: var(--color-background-default);
|
||||
@@ -832,11 +842,6 @@ td.statusBarSeparator {
|
||||
}
|
||||
|
||||
/* Modals */
|
||||
|
||||
.modalDialog * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.modalDialog .mochaContent.pad {
|
||||
display: flex !important; /* override for default mocha inline style */
|
||||
flex-direction: column;
|
||||
|
||||
Reference in New Issue
Block a user