1
0
mirror of https://github.com/gilbN/theme.park.git synced 2024-11-04 10:12:31 +01:00
theme.park/css/base/qbittorrent/qbittorrent-base.css
2022-07-24 11:25:08 +02:00

665 lines
15 KiB
CSS

/* dP dP dP */
/* 88 88 88 */
/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */
/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */
/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */
/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */
/* 88 */
/* dP */
/* Made by @gilbN */
/* https://github.com/gilbN/theme.park */
@import url("/css/defaults/placeholders.css");
@import url("/css/defaults/transparent.css");
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-corner {
background: var(--transparency-dark-10);
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 5px;
border-radius: 5px;
background: var(--transparency-dark-10);
}
html,
body {
color: var(--text);
background: transparent;
}
body {
background: var(--main-bg-color);
background-repeat: repeat, no-repeat;
background-attachment: fixed, fixed;
background-position: center center, center center;
background-size: auto, cover;
-webkit-background-size: auto, cover;
-moz-background-size: auto, cover;
-o-background-size: auto, cover;
color: var(--text);
}
#desktop {
background: var(--main-bg-color);
background-repeat: repeat, no-repeat;
background-attachment: fixed, fixed;
background-position: center center, center center;
background-size: auto, cover;
-webkit-background-size: auto, cover;
-moz-background-size: auto, cover;
-o-background-size: auto, cover;
}
input:disabled {
color: rgb(84, 84, 84);
cursor: default;
background: var(--transparency-light-05) !important;
border: none !important;
}
input[type="text"i] {
color: var(--text-hover);
background: var(--transparency-dark-25);
border-width: 0px;
outline: none;
border: none;
border-radius: 3px;
}
input[type="password"i] {
color: var(--text-hover);
background: var(--transparency-dark-25);
border-width: 0px;
outline: none;
border: none;
border-radius: 3px;
}
input[type="number"i] {
color: var(--text-hover);
background: var(--transparency-dark-25);
border-width: 0px;
outline: none;
border: none;
}
input[type="file"i] {
color: var(--text-hover);
background: var(--transparency-dark-25);
border-width: 0px;
outline: none;
border: none;
}
input[name="category"i] {
color: #000;
background-color: #fff;
border-width: 0px;
outline: none;
border: none;
}
input[type="file"i] {
border: none;
}
select {
border: none !important;
}
a,
h2,
h3,
h4,
.mochaTitlebar h3 {
color: var(--text-hover);
}
/* Login */
#main h1 {
display: block;
font-size: 2em;
margin-block-start: 2em;
margin-block-end: -.9em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
color: var(--text-hover);
}
#error_msg {
text-transform: uppercase;
color: #D8000C;
background-color: #FFD2D2;
font-family: Helvetica, Arial, sans-serif;
left: 50%;
top: 20%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
margin-left: auto;
margin-right: auto;
text-align: center;
position: absolute;
border-radius: 4px;
}
#main {
margin-left: auto;
margin-right: auto;
text-align: center;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
padding-top: 0;
/* background: var(--transparency-dark-25) */
width: 400px;
height: 460px;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
}
#logo img {
height: 11em;
position: absolute;
left: 50%;
/* top: 50%; */
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -160%);
}
#formplace {
text-transform: uppercase;
text-align: left;
font-size: 12px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
font-weight: 300 !important;
padding: 10px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
label {
cursor: default;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
font-weight: 300 !important;
}
#desktopNavbar {
background: var(--transparency-dark-25);
height: 20px;
border-bottom: 1px solid transparent;
}
#desktopNavbar ul li a {
color: var(--text);
}
#desktopNavbar ul li a:hover {
color: var(--text-hover);
background: var(--transparency-light-10);
}
#desktopNavbar li ul li a:hover {
background: var(--transparency-light-10);
color: var(--text-hover);
}
#desktopNavbar li ul {
border: 1px solid transparent;
background: var(--modal-bg-color);
background-repeat: repeat, no-repeat;
background-attachment: fixed, fixed;
background-position: center center, center center;
background-size: auto, cover;
-webkit-background-size: auto, cover;
-moz-background-size: auto, cover;
-o-background-size: auto, cover;
}
#desktopNavbar li ul li a {
color: var(--text);
}
#desktopHeader {
background: var(--main-bg-color);
background-repeat: repeat, no-repeat;
background-attachment: fixed, fixed;
background-position: center center, center center;
background-size: auto, cover;
-webkit-background-size: auto, cover;
-moz-background-size: auto, cover;
-o-background-size: auto, cover;
}
#desktopFooter {
background: transparent;
}
.dynamicTable th {
background: var(--transparency-dark-25) !important;
border-right-color: rgba(255, 255, 255, .08) !important;
color: var(--text-hover);
}
.dynamicTable thead tr {
background-color: transparent !important;
}
.dynamicTable thead tr {
background-color: transparent !important;
}
.dynamicTable {
background: var(--transparency-dark-25)
}
.dynamicTable tbody tr {
background: var(--transparency-dark-10) !important;
}
.dynamicTable tbody tr:nth-child(even),
.dynamicTable tbody tr.alt {
background: var(--transparency-light-10) !important;
}
.dynamicTable tbody tr:hover {
background: var(--transparency-light-15) !important;
color: var(--text-hover);
}
.dynamicTable tbody tr.selected {
background-color: rgba(var(--accent-color), 0.6) !important;
color: var(--label-text-color);
}
.panel {
background: var(--main-bg-color);
background-repeat: repeat, no-repeat;
background-attachment: fixed, fixed;
background-position: center center, center center;
background-size: auto, cover;
-webkit-background-size: auto, cover;
-moz-background-size: auto, cover;
-o-background-size: auto, cover;
border-bottom: 1px solid transparent;
}
#pageWrapper {
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
}
li.divider {
border-top: 1px solid var(--transparency-light-25) !important;
}
#main input[type="text"i] {
color: var(--text-hover);
background: var(--transparency-dark-25);
border-width: 0px;
outline: none;
border: none;
border-radius: 4px;
width: 250px;
height: 24px;
padding: 7px 12px;
}
#main input[type="text"i]:focus {
background: var(--transparency-dark-45);
}
#main input[type="password"i] {
color: var(--text-hover);
background: var(--transparency-dark-25);
border-width: 0px;
outline: none;
border: none;
border-radius: 4px;
width: 250px;
height: 24px;
padding: 7px 12px;
}
#main input[type="password"i] {
background: var(--transparency-dark-45);
}
#loginform #login {
padding: 6px 15px !important;
width: 100%;
margin-top: 35px;
background-color: var(--button-color) !important;
border: none;
border-radius: 4px;
color: var(--button-text) !important;
outline: none;
text-transform: uppercase;
font-size: 18px;
font-weight: 300;
height: 44px;
line-height: 1.3333333;
}
#loginform #login:hover {
background-color: var(--button-color-hover) !important;
padding: 6px 15px;
border-radius: 4px;
cursor: pointer;
border: none;
color: var(--button-text-hover) !important;
}
/*right click menu */
.contextMenu {
border: 1px solid transparent;
background: var(--modal-bg-color);
background-repeat: repeat, no-repeat;
background-attachment: fixed, fixed;
background-position: center center, center center;
background-size: auto, cover;
-webkit-background-size: auto, cover;
-moz-background-size: auto, cover;
-o-background-size: auto, cover;
}
.contextMenu li a {
color: var(--text);
}
.contextMenu li a:hover {
background-color: rgba(255, 255, 255, .08) !important;
color: var(--text-hover);
}
.contextMenu li ul {
border: 1px solid transparent;
background: var(--modal-bg-color);
background-repeat: repeat, no-repeat;
background-attachment: fixed, fixed;
background-position: center center, center center;
background-size: auto, cover;
-webkit-background-size: auto, cover;
-moz-background-size: auto, cover;
-o-background-size: auto, cover;
}
.contextMenu .separator {
border-top: 1px solid var(--transparency-light-10);
}
/* Sidemenu */
.selectedFilter {
background-color: var(--button-color);
color: var(--button-text);
}
.selectedFilter:before {
color: var(--button-color-hover) !important;
}
ul.filterList li:hover {
background-color: var(--transparency-light-15);
color: var(--text-hover) !important;
}
ul.filterList .selectedFilter:hover {
background-color: var(--button-color-hover);
color: var(--button-text-hover);
}
ul.filterList li:hover:before {
color: var(--button-color-hover) !important;
}
.columnHandle {
background: var(--transparency-dark-45);
border: 1px solid transparent;
}
/*Sidemenu - Bottom menu*/
.bottomPanel {
background: var(--transparency-dark-25) !important;
}
/* Bottom menu */
#progress {
border: 1px solid var(--transparency-light-25);
}
hr {
background-color: var(--transparency-light-25);
color: var(--text);
}
.panel-headerContent.tabs {
background: none !important;
}
.panel-header {
background: var(--transparency-dark-25) !important;
border-bottom: 1px solid transparent !important;
}
.horizontalHandle {
background: none !important;
}
.tab-menu li.selected a {
color: rgb(var(--accent-color)) !important;
background: transparent !important;
font-weight: normal !important;
}
.tab-menu li a {
color: var(--text) !important;
background: transparent !important;
}
.tab-menu li.selected {
background: none !important;
}
.tab-menu li {
background: none !important;
}
.tab-menu li a:hover {
color: rgb(var(--accent-color)) !important;
}
.toolbarTabs {
background: var(--transparency-dark-25) !important;
}
.progressbar_dark {
background: rgb(var(--accent-color)) !important;
color: var(--label-text-color) !important;
}
.progressbar_light {
background: var(--transparency-dark-25) !important;
color: var(--text-hover) !important;
}
.progressbar_wrapper {
border: 1px solid transparent !important;
}
.stateIcon {
background-image: red !important;
}
fieldset {
border-width: 1px !important;
border-style: solid !important;
border-color: var(--transparency-light-25) !important;
}
/*Modal */
.mochaOverlay {
position: absolute;
top: 0;
left: 0;
background: var(--modal-bg-color);
background-repeat: repeat, no-repeat;
background-attachment: fixed, fixed;
background-position: center center, center center;
background-size: auto, cover;
-webkit-background-size: auto, cover;
-moz-background-size: auto, cover;
-o-background-size: auto, cover;
}
.mochaToolbarWrapper {
width: 100%;
position: relative;
height: 29px;
background: var(--transparency-dark-25) !important;
overflow: hidden;
border-top: none !important;
}
.mochaToolbar {
width: 100%;
border-top: none !important;
}
.mochaContentBorder {
border-top: 1px solid var(--transparency-light-25) !important;
border-bottom: 1px solid var(--transparency-light-25) !important;
}
.mocha.isFocused .mochaTitlebar h3 {
color: var(--text-hover);
}
fieldset.settings legend {
color: var(--text-hover);
}
.mochaContentWrapper {
font-size: 12px;
overflow: auto;
background: transparent !important;
}
fieldset.settings {
border: solid 1px var(--transparency-light-25) !important;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
padding: 4px 4px 4px 10px;
}
textarea:disabled {
color: var(--text-muted);
cursor: default;
background: var(--transparency-light-05) !important;
border: none !important;
}
textarea {
color: var(--text-hover) !important;
cursor: default;
background: var(--transparency-dark-25) !important;
border: none !important;
}
#watched_folders_tab td,
#watched_folders_tab th {
padding: 2px 4px;
border: 1px solid var(--transparency-light-25) !important;
}
input[type="button"i]:hover {
background-color: var(--button-color-hover);
padding: 6px 15px;
cursor: pointer;
border: none;
color: var(--button-text);
}
input[type="button"i] {
padding: 6px 15px !important;
background-color: var(--button-color);
cursor: pointer;
border: none;
color: var(--button-text);
}
button {
background-color: var(--button-color) !important;
cursor: pointer;
border: 2px solid transparent;
color: var(--button-text);
}
button:hover {
background-color: var(--button-color-hover) !important;
cursor: pointer;
border: 2px solid transparent;
color: var(--button-text);
}
input[type="submit"i] {
padding: 6px 15px !important;
width: 100%;
margin-top: 15px;
background-color: var(--button-color) !important;
border: none;
color: var(--button-text);
outline: none;
text-transform: uppercase;
}
input[type="submit"i]:hover {
padding: 6px 15px !important;
background-color: var(--button-color-hover) !important;
width: 100%;
cursor: pointer;
border: none;
color: var(--button-text);
outline: none;
text-transform: uppercase;
}
.contextMenu,
#contextCategoryList {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
select {
background: var(--transparency-dark-25);
color: var(--text);
}
select:focus {
background: var(--drop-down-menu-bg);
color: var(--text)
}
.select-watched-folder-editable {
background-color: var(--transparency-dark-05);
border: solid var(--transparency-light-10) 1px;
}