Browse Source

formatting

pull/241/head
Marius 4 years ago
parent
commit
a3377c35a8
  1. 51
      CSS/themes/adguard/adguard-base.css
  2. 45
      CSS/themes/bazarr/bazarr-base.css
  3. 36
      CSS/themes/bitwarden/bitwarden-base.css
  4. 6
      CSS/themes/calibreweb/calibreweb-base.css
  5. 1079
      CSS/themes/deluge/deluge-base.css
  6. 12
      CSS/themes/dozzle/dozzle-base.css
  7. 3
      CSS/themes/duplicacy/duplicacy-base.css
  8. 186
      CSS/themes/emby/emby-base.css
  9. 26
      CSS/themes/flood/flood-base.css
  10. 8
      CSS/themes/gitea/gitea-base.css
  11. 964
      CSS/themes/grafana/grafana-base.css
  12. 507
      CSS/themes/guacamole/guacamole-base.css
  13. 196
      CSS/themes/jellyfin/jellyfin-base.css
  14. 37
      CSS/themes/librespeed/librespeed-base.css
  15. 15
      CSS/themes/lidarr/lidarr-base.css
  16. 279
      CSS/themes/logarr/logarr-base.css
  17. 225
      CSS/themes/monitorr/monitorr-base.css
  18. 83
      CSS/themes/monitorr/organizr-dashboard.css
  19. 6
      CSS/themes/moviematch/moviematch-base.css
  20. 331
      CSS/themes/nzbget/nzbget-base.css
  21. 164
      CSS/themes/nzbhydra2/nzbhydra-base.css
  22. 35
      CSS/themes/ombi/ombi-base.css
  23. 532
      CSS/themes/ombi/ombiv3-base.css
  24. 1225
      CSS/themes/organizr/organizr-base-old.css
  25. 52
      CSS/themes/organizr/organizr-base.css
  26. 25
      CSS/themes/petio/petio-base.css
  27. 286
      CSS/themes/pihole/pihole-base.css
  28. 3
      CSS/themes/plex/plex-base.css
  29. 184
      CSS/themes/plpp/plpp-base.css
  30. 11
      CSS/themes/prowlarr/prowlarr-base.css
  31. 15
      CSS/themes/qbittorrent/qbittorrent-base.css
  32. 10
      CSS/themes/radarr/radarr-base.css
  33. 14
      CSS/themes/readarr/readarr-base.css
  34. 223
      CSS/themes/requestrr/requestrr-base.css
  35. 2047
      CSS/themes/rutorrent/rutorrent-base.css
  36. 20
      CSS/themes/sonarr/sonarr-base.css
  37. 77
      CSS/themes/synclounge/synclounge-base.css
  38. 710
      CSS/themes/tautulli/tautulli-base.css
  39. 84
      CSS/themes/thelounge/thelounge-base.css
  40. 836
      CSS/themes/transmission/transmission-base.css
  41. 33
      CSS/themes/unraid/unraid-base.css
  42. 26
      CSS/themes/vuetorrent/vuetorrent-base.css
  43. 24
      CSS/themes/xbackbone/xbackbone-base.css

51
CSS/themes/adguard/adguard-base.css

@ -42,12 +42,15 @@ body {
-o-background-size: auto, cover; -o-background-size: auto, cover;
} }
} }
body *::-webkit-scrollbar-thumb { body *::-webkit-scrollbar-thumb {
background: hsla(0,0%,100%,.2); background: hsla(0, 0%, 100%, .2);
} }
body *:hover::-webkit-scrollbar-thumb { body *:hover::-webkit-scrollbar-thumb {
background: hsla(0, 0%, 100%, 0.4); background: hsla(0, 0%, 100%, 0.4);
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 14px; width: 14px;
} }
@ -85,9 +88,22 @@ a:hover {
a:-webkit-any-link:focus { a:-webkit-any-link:focus {
outline: none; outline: none;
} }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
color: var(--text-hover) color: var(--text-hover)
} }
/* LOGIN PAGE */ /* LOGIN PAGE */
.login .login__form .text-center .h-6 { .login .login__form .text-center .h-6 {
@ -214,6 +230,7 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
background: rgb(var(--accent-color)); background: rgb(var(--accent-color));
color: var(--label-text-color); color: var(--label-text-color);
} }
.toast--success { .toast--success {
background-color: rgba(90, 173, 99, 0.75); background-color: rgba(90, 173, 99, 0.75);
} }
@ -277,7 +294,8 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
border-color: #F44336; border-color: #F44336;
} }
.btn-icon--green,.icon--green { .btn-icon--green,
.icon--green {
color: var(--button-color); color: var(--button-color);
} }
@ -307,6 +325,7 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
text-decoration: none; text-decoration: none;
background-color: rgb(255 255 255 / 0.08); background-color: rgb(255 255 255 / 0.08);
} }
.select__menu { .select__menu {
background: var(--modal-bg-color) !important; background: var(--modal-bg-color) !important;
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
@ -318,17 +337,22 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
-o-background-size: auto, cover; -o-background-size: auto, cover;
box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, .5); box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, .5);
} }
.select__option:hover { .select__option:hover {
background: rgba(255, 255, 255, .08) !important; background: rgba(255, 255, 255, .08) !important;
} }
.select__option { .select__option {
background: rgba(0, 0, 0, 0) !important; background: rgba(0, 0, 0, 0) !important;
border-bottom: solid rgba(255, 255, 255, .1) 1px; border-bottom: solid rgba(255, 255, 255, .1) 1px;
} }
.select__multi-value__remove { .select__multi-value__remove {
color: black; color: black;
} }
.basic-multi-select .select__control--is-focused, .basic-multi-select .select__control--is-focused:hover {
.basic-multi-select .select__control--is-focused,
.basic-multi-select .select__control--is-focused:hover {
border-color: transparent !important; border-color: transparent !important;
} }
@ -340,6 +364,7 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
.setup__progress-wrap { .setup__progress-wrap {
background-color: rgb(0 0 0 / 50%); background-color: rgb(0 0 0 / 50%);
} }
.setup__logo { .setup__logo {
filter: invert(1); filter: invert(1);
} }
@ -376,7 +401,7 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
color: var(--text) color: var(--text)
} }
.logs__no-data{ .logs__no-data {
color: var(--text); color: var(--text);
background-color: transparent; background-color: transparent;
} }
@ -411,7 +436,8 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
background: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.5);
} }
.ReactTable .rt-thead .rt-th, .ReactTable .rt-thead .rt-td, .ReactTable .rt-thead .rt-th,
.ReactTable .rt-thead .rt-td,
.logs__cell--header__container { .logs__cell--header__container {
color: var(--text-hover); color: var(--text-hover);
} }
@ -420,7 +446,10 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
border-bottom: solid 1px rgb(255 255 255 / 20%); border-bottom: solid 1px rgb(255 255 255 / 20%);
} }
.table th, .text-wrap table th, .table td, .text-wrap table td { .table th,
.text-wrap table th,
.table td,
.text-wrap table td {
padding: 0.75rem; padding: 0.75rem;
vertical-align: top; vertical-align: top;
border-top: 1px solid rgba(255, 255, 255, 0.2); border-top: 1px solid rgba(255, 255, 255, 0.2);
@ -501,7 +530,7 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
border-color: transparent; border-color: transparent;
} }
.checkbox__input:checked + .checkbox__label:before { .checkbox__input:checked+.checkbox__label:before {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMi4zIDkuMiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiPjxwYXRoIGQ9Ik0xMS44IDAuNUw1LjMgOC41IDAuNSA0LjIiLz48L3N2Zz4=); background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMi4zIDkuMiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiPjxwYXRoIGQ9Ik0xMS44IDAuNUw1LjMgOC41IDAuNSA0LjIiLz48L3N2Zz4=);
background-color: rgb(var(--accent-color)); background-color: rgb(var(--accent-color));
@ -511,11 +540,13 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
.custom-radio .custom-control-input:disabled:checked~.custom-control-label::before { .custom-radio .custom-control-input:disabled:checked~.custom-control-label::before {
background-color: rgb(var(--accent-color)); background-color: rgb(var(--accent-color));
} }
.custom-control-input:focus~.custom-control-label::before, .custom-control-input:focus~.custom-control-label::before,
.custom-radio .custom-control-input:disabled:checked~.custom-control-label::before { .custom-radio .custom-control-input:disabled:checked~.custom-control-label::before {
-webkit-box-shadow: 0 0 0 1px rgb(var(--accent-color)), 0 0 0 2px rgb(var(--accent-color),.25); -webkit-box-shadow: 0 0 0 1px rgb(var(--accent-color)), 0 0 0 2px rgb(var(--accent-color), .25);
box-shadow: 0 0 0 1px rgb(var(--accent-color)), 0 0 0 2px rgb(var(--accent-color),.25); box-shadow: 0 0 0 1px rgb(var(--accent-color)), 0 0 0 2px rgb(var(--accent-color), .25);
} }
/* MODALS */ /* MODALS */
.modal-content { .modal-content {
background: var(--modal-bg-color); background: var(--modal-bg-color);

45
CSS/themes/bazarr/bazarr-base.css

@ -92,12 +92,20 @@ a:hover {
.table { .table {
color: var(--text); color: var(--text);
} }
.table thead th { .table thead th {
color: var(--text-hover); color: var(--text-hover);
} }
h1, h2, h3, h4, h5, h6, h1,
.custom-control-label,label,.modal-header { h2,
h3,
h4,
h5,
h6,
.custom-control-label,
label,
.modal-header {
color: var(--text-hover); color: var(--text-hover);
} }
@ -212,9 +220,10 @@ h1, h2, h3, h4, h5, h6,
background-color: transparent !important; background-color: transparent !important;
color: rgb(var(--accent-color)) !important; color: rgb(var(--accent-color)) !important;
} }
.content-header.bg-dark .btn-dark:hover { .content-header.bg-dark .btn-dark:hover {
color:rgb(var(--accent-color)); color: rgb(var(--accent-color));
} }
.sidebar-container .sidebar-button.sb-active, .sidebar-container .sidebar-button.sb-active,
.sidebar-container .sidebar-button.sb-active:hover { .sidebar-container .sidebar-button.sb-active:hover {
@ -231,10 +240,12 @@ h1, h2, h3, h4, h5, h6,
} }
.content-header.bg-dark .btn-dark { .content-header.bg-dark .btn-dark {
color:var(--text); color: var(--text);
} }
.btn-dark.disabled:hover, .btn-dark:disabled:hover {
color:var(--text) !important; .btn-dark.disabled:hover,
.btn-dark:disabled:hover {
color: var(--text) !important;
} }
@ -257,10 +268,12 @@ h1, h2, h3, h4, h5, h6,
-o-background-size: auto, cover; -o-background-size: auto, cover;
} }
} }
.sidebar-container .badge-secondary { .sidebar-container .badge-secondary {
color: var(--label-text-color); color: var(--label-text-color);
background-color: var(--queue-color); background-color: var(--queue-color);
} }
/* TOP NAV BAR */ /* TOP NAV BAR */
.header-container .bg-primary { .header-container .bg-primary {
background-color: rgba(0, 0, 0, .35) !important; background-color: rgba(0, 0, 0, .35) !important;
@ -313,13 +326,16 @@ h1, h2, h3, h4, h5, h6,
-moz-background-size: auto, cover; -moz-background-size: auto, cover;
-o-background-size: auto, cover; -o-background-size: auto, cover;
} }
.auth-card { .auth-card {
border: 1px solid transparent; border: 1px solid transparent;
} }
.auth-card .card-footer { .auth-card .card-footer {
background-color: transparent; background-color: transparent;
border-top: 1px solid rgba(255, 255, 255, .1); border-top: 1px solid rgba(255, 255, 255, .1);
} }
hr { hr {
border-top: 1px solid rgb(255 255 255 / 10%); border-top: 1px solid rgb(255 255 255 / 10%);
} }
@ -642,6 +658,7 @@ hr {
.custom-checkbox .custom-control-input:checked~.custom-control-label:after { .custom-checkbox .custom-control-input:checked~.custom-control-label:after {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath fill='%23000' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3E%3C/svg%3E"); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath fill='%23000' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3E%3C/svg%3E");
} }
input { input {
color: var(--text-hover) !important; color: var(--text-hover) !important;
} }
@ -658,7 +675,8 @@ input {
} }
/* DROPDOWN MENU */ /* DROPDOWN MENU */
.dropdown-menu,.dropdown-header { .dropdown-menu,
.dropdown-header {
color: var(--text); color: var(--text);
background: var(--drop-down-menu-bg); background: var(--drop-down-menu-bg);
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
@ -802,23 +820,24 @@ line {
-webkit-background-size: auto, cover; -webkit-background-size: auto, cover;
-moz-background-size: auto, cover; -moz-background-size: auto, cover;
-o-background-size: auto, cover; -o-background-size: auto, cover;
border: 1px solid rgba(0,0,0,.1); border: 1px solid rgba(0, 0, 0, .1);
box-shadow: 0 .25rem .75rem rgba(0,0,0,.1); box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .1);
color: var(--text) color: var(--text)
} }
.toast-header { .toast-header {
color: var(--text-hover); color: var(--text-hover);
background-color: hsla(0, 0%, 0%, .35); background-color: hsla(0, 0%, 0%, .35);
border-bottom: 1px solid rgba(0,0,0,.05); border-bottom: 1px solid rgba(0, 0, 0, .05);
} }
.alert-container .toast-container .toast .toast-body .progress .progress-bar { .alert-container .toast-container .toast .toast-body .progress .progress-bar {
text-shadow: -2px -2px 5px rgba(var(--accent-color),.35),2px -2px 5px rgba(var(--accent-color),.35),-2px 2px 5px rgba(var(--accent-color),.35),2px 2px 5px rgba(var(--accent-color),.35); text-shadow: -2px -2px 5px rgba(var(--accent-color), .35), 2px -2px 5px rgba(var(--accent-color), .35), -2px 2px 5px rgba(var(--accent-color), .35), 2px 2px 5px rgba(var(--accent-color), .35);
overflow: visible overflow: visible
} }
.progress-bar-striped { .progress-bar-striped {
background-image: linear-gradient(45deg,rgba(var(--accent-color),.5) 25%,transparent 0,transparent 50%,rgba(var(--accent-color),.5) 0,rgba(var(--accent-color),.5) 75%,transparent 0,transparent); background-image: linear-gradient(45deg, rgba(var(--accent-color), .5) 25%, transparent 0, transparent 50%, rgba(var(--accent-color), .5) 0, rgba(var(--accent-color), .5) 75%, transparent 0, transparent);
background-size: 1rem 1rem background-size: 1rem 1rem
} }

36
CSS/themes/bitwarden/bitwarden-base.css

@ -63,9 +63,23 @@ app-org-vault-groupings .card li.active>div a:first-of-type,
background-color: rgba(255, 255, 255, .08); background-color: rgba(255, 255, 255, .08);
} }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,label,label:not(.form-check-label):not(.btn), label.bold h1,
.card-header:first-child, h2,
.card-header, .modal-header { h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
label,
label:not(.form-check-label):not(.btn),
label.bold .card-header:first-child,
.card-header,
.modal-header {
color: var(--text-hover) !important; color: var(--text-hover) !important;
} }
@ -73,7 +87,11 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,label,label:not(.form-check
.navbar { .navbar {
background-color: rgb(0 0 0 / 25%) !important; background-color: rgb(0 0 0 / 25%) !important;
} }
.navbar-dark .navbar-nav .show>.nav-link, .navbar-dark .navbar-nav .active>.nav-link, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .nav-link.active {
.navbar-dark .navbar-nav .show>.nav-link,
.navbar-dark .navbar-nav .active>.nav-link,
.navbar-dark .navbar-nav .nav-link.show,
.navbar-dark .navbar-nav .nav-link.active {
color: rgb(var(--accent-color)); color: rgb(var(--accent-color));
} }
@ -316,8 +334,9 @@ a.text-danger:focus {
.swal2-popup .swal2-actions button.swal2-cancel:focus, .swal2-popup .swal2-actions button.swal2-cancel:focus,
.btn-outline-secondary.focus, .btn-outline-secondary.focus,
.swal2-popup .swal2-actions button.focus.swal2-cancel, .swal2-popup .swal2-actions button.focus.swal2-cancel,
.btn-outline-primary:focus, .btn-outline-primary.focus { .btn-outline-primary:focus,
box-shadow: 0 0 0 0.2rem rgb(var(--accent-color),.5); .btn-outline-primary.focus {
box-shadow: 0 0 0 0.2rem rgb(var(--accent-color), .5);
} }
.btn-outline-secondary:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled):active,
@ -381,6 +400,7 @@ app-vault-groupings .card .card-body a:hover.text-muted {
color: #fff !important; color: #fff !important;
opacity: 1 !important; opacity: 1 !important;
} }
app-vault-groupings .card li.active>a:first-of-type, app-vault-groupings .card li.active>a:first-of-type,
app-vault-groupings .card li.active>div a:first-of-type, app-vault-groupings .card li.active>div a:first-of-type,
app-org-vault-groupings .card li.active>a:first-of-type, app-org-vault-groupings .card li.active>a:first-of-type,
@ -393,6 +413,7 @@ app-org-vault-groupings .card li.active>div a:first-of-type {
input::-webkit-input-placeholder { input::-webkit-input-placeholder {
color: var(--text); color: var(--text);
} }
input:focus::-webkit-input-placeholder { input:focus::-webkit-input-placeholder {
color: #000; color: #000;
} }
@ -401,6 +422,7 @@ input:focus::-webkit-input-placeholder {
input:-moz-placeholder { input:-moz-placeholder {
color: var(--text); color: var(--text);
} }
input:focus:-moz-placeholder { input:focus:-moz-placeholder {
color: #000; color: #000;
} }
@ -409,6 +431,7 @@ input:focus:-moz-placeholder {
input::-moz-placeholder { input::-moz-placeholder {
color: var(--text); color: var(--text);
} }
input:focus::-moz-placeholder { input:focus::-moz-placeholder {
color: #000; color: #000;
} }
@ -417,6 +440,7 @@ input:focus::-moz-placeholder {
input:-ms-input-placeholder { input:-ms-input-placeholder {
color: var(--text); color: var(--text);
} }
input:focus:-ms-input-placeholder { input:focus:-ms-input-placeholder {
color: #000; color: #000;
} }

6
CSS/themes/calibreweb/calibreweb-base.css

@ -145,6 +145,7 @@
.modal-content { .modal-content {
background-color: var(--modal-bg-color); background-color: var(--modal-bg-color);
} }
#GeneralDeleteModal .bg-danger { #GeneralDeleteModal .bg-danger {
background: var(--modal-bg-color); background: var(--modal-bg-color);
} }
@ -173,7 +174,8 @@
.btn-toolbar>.btn-group>#btnGroupDrop2:hover>span, .btn-toolbar>.btn-group>#btnGroupDrop2:hover>span,
.btn-toolbar>.btn-group>.btn-group>#btnGroupDrop2:hover>span, .btn-toolbar>.btn-group>.btn-group>#btnGroupDrop2:hover>span,
div[aria-label="Edit/Delete book"]>.btn>span:hover, div[aria-label="Edit/Delete book"]>.btn>span:hover,
#btnGroupDrop1[aria-expanded=true] > span, #shelf-actions > .btn-group.open > #add-to-shelf > span { #btnGroupDrop1[aria-expanded=true]>span,
#shelf-actions>.btn-group.open>#add-to-shelf>span {
color: var(--text-hover); color: var(--text-hover);
} }
@ -307,4 +309,4 @@
color: var(--label-text-color); color: var(--label-text-color);
background-color: rgb(var(--accent-color)); background-color: rgb(var(--accent-color));
} }

1079
CSS/themes/deluge/deluge-base.css

File diff suppressed because it is too large

12
CSS/themes/dozzle/dozzle-base.css

@ -27,7 +27,12 @@ body {
color: var(--text); color: var(--text);
} }
h1, h2, h3, h4, h5, h6, h1,
h2,
h3,
h4,
h5,
h6,
section header, section header,
.menu-label { .menu-label {
color: var(--text-hover) !important; color: var(--text-hover) !important;
@ -206,11 +211,12 @@ section .is-scrollbar-notification button {
color: var(--button-text-hover) !important; color: var(--button-text-hover) !important;
} }
#hide-nav{ #hide-nav {
background: var(--button-color) !important; background: var(--button-color) !important;
color: var(--button-text) !important; color: var(--button-text) !important;
} }
#hide-nav:hover{
#hide-nav:hover {
border-color: var(--button-color-hover) !important; border-color: var(--button-color-hover) !important;
background: var(--button-color-hover) !important; background: var(--button-color-hover) !important;
color: var(--button-text-hover) !important; color: var(--button-text-hover) !important;

3
CSS/themes/duplicacy/duplicacy-base.css

@ -268,7 +268,8 @@ label {
background: rgb(0 0 0 / 10%); background: rgb(0 0 0 / 10%);
} }
.sidebar[data-background-color="black"] .logo, .off-canvas-sidebar[data-background-color="black"] .logo { .sidebar[data-background-color="black"] .logo,
.off-canvas-sidebar[data-background-color="black"] .logo {
border-bottom: 1px solid rgba(var(--accent-color)); border-bottom: 1px solid rgba(var(--accent-color));
} }

186
CSS/themes/emby/emby-base.css

@ -1,18 +1,22 @@
/*TP CUSTOM */ /*TP CUSTOM */
h1,h2, h3, h4, h5, h6, h1,
.inputLabel, label { h2,
h3,
h4,
h5,
h6,
.inputLabel,
label {
color: var(--text-hover); color: var(--text-hover);
} }
a:not(.emby-button), a:not(.emby-button),
.cardText.cardTextCentered.cardText-first > button { .cardText.cardTextCentered.cardText-first>button {
color: var(--link-color) !important; color: var(--link-color) !important;
} }
a:hover:not(.emby-button), a:hover:not(.emby-button),
.cardText.cardTextCentered.cardText-first > button:hover .cardText.cardTextCentered.cardText-first>button:hover {
{
color: var(--link-color-hover) !important; color: var(--link-color-hover) !important;
} }
@ -24,7 +28,7 @@ html {
} }
.emby-collapsible-button { .emby-collapsible-button {
border-color: var(--line-background)!important border-color: var(--line-background) !important
} }
.skinHeader-withBackground.skinHeader-withfulldrawer { .skinHeader-withBackground.skinHeader-withfulldrawer {
@ -42,7 +46,8 @@ html {
-o-background-size: auto, cover; -o-background-size: auto, cover;
} }
.appfooter,.formDialogFooter:not(.formDialogFooter-clear) { .appfooter,
.formDialogFooter:not(.formDialogFooter-clear) {
background: var(--footer-background); background: var(--footer-background);
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
background-attachment: fixed, fixed; background-attachment: fixed, fixed;
@ -52,6 +57,7 @@ html {
-moz-background-size: auto, cover; -moz-background-size: auto, cover;
-o-background-size: auto, cover; -o-background-size: auto, cover;
} }
.formDialogHeader:not(.formDialogHeader-clear) { .formDialogHeader:not(.formDialogHeader-clear) {
background: var(--modal-header-color); background: var(--modal-header-color);
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
@ -76,7 +82,7 @@ html {
@supports (backdrop-filter: blur(1em)) or (-webkit-backdrop-filter:blur(1em)) { @supports (backdrop-filter: blur(1em)) or (-webkit-backdrop-filter:blur(1em)) {
.skinHeader-withBackground { .skinHeader-withBackground {
background:var(--header-blur-background); background: var(--header-blur-background);
-webkit-backdrop-filter: saturate(1.8) blur(1.5em); -webkit-backdrop-filter: saturate(1.8) blur(1.5em);
backdrop-filter: saturate(1.8) blur(1.5em) backdrop-filter: saturate(1.8) blur(1.5em)
} }
@ -89,24 +95,25 @@ html {
} }
.skinHeader.semiTransparent { .skinHeader.semiTransparent {
-webkit-backdrop-filter: none!important; -webkit-backdrop-filter: none !important;
backdrop-filter: none!important; backdrop-filter: none !important;
background-color: rgba(0,0,0,.3); background-color: rgba(0, 0, 0, .3);
background: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.6)),to(rgba(0,0,0,0))); background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .6)), to(rgba(0, 0, 0, 0)));
background: -webkit-linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,0)); background: -webkit-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
background: -o-linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,0)); background: -o-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
background: linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,0)); background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
-webkit-box-shadow: none!important; -webkit-box-shadow: none !important;
box-shadow: none!important; box-shadow: none !important;
border-bottom: 0; border-bottom: 0;
color: rgba(255,255,255,.87) color: rgba(255, 255, 255, .87)
} }
.pageTitleWithDefaultLogo { .pageTitleWithDefaultLogo {
background-image: url(https://theme-park.dev/Resources/emby/logowhite.png) background-image: url(https://theme-park.dev/Resources/emby/logowhite.png)
} }
.backgroundContainer,html { .backgroundContainer,
html {
background: var(--theme-background); background: var(--theme-background);
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
background-attachment: fixed, fixed; background-attachment: fixed, fixed;
@ -118,12 +125,12 @@ html {
} }
.backgroundContainer.withBackdrop { .backgroundContainer.withBackdrop {
background-color: rgba(0,0,0,.83) background-color: rgba(0, 0, 0, .83)
} }
@media not all and (min-width: 50em) { @media not all and (min-width: 50em) {
.itemBackgroundContainer.withBackdrop { .itemBackgroundContainer.withBackdrop {
background :var(--theme-background); background: var(--theme-background);
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
background-attachment: fixed, fixed; background-attachment: fixed, fixed;
background-position: center center, center center; background-position: center center, center center;
@ -134,25 +141,28 @@ html {
} }
} }
.paper-icon-button-light-tv:focus,.paper-icon-button-light:active { .paper-icon-button-light-tv:focus,
.paper-icon-button-light:active {
color: rgb(var(--theme-primary-color)); color: rgb(var(--theme-primary-color));
background-color: var(--theme-icon-focus-background) background-color: var(--theme-icon-focus-background)
} }
@media(hover: hover) and (pointer:fine) { @media(hover: hover) and (pointer:fine) {
.paper-icon-button-light:focus { .paper-icon-button-light:focus {
color:rgb(var(--theme-primary-color)); color: rgb(var(--theme-primary-color));
background-color: var(--theme-icon-focus-background) background-color: var(--theme-icon-focus-background)
} }
} }
.detailButton-icon,.fab,.raised { .detailButton-icon,
.fab,
.raised {
background: var(--button-color); background: var(--button-color);
color: var(--button-text); color: var(--button-text);
} }
.detailButton-icon { .detailButton-icon {
border-color: rgba(255,255,255,.3) border-color: rgba(255, 255, 255, .3)
} }
.emby-select-withcolor { .emby-select-withcolor {
@ -167,27 +177,33 @@ html {
} }
@supports (backdrop-filter: blur(1em)) or (-webkit-backdrop-filter:blur(1em)) { @supports (backdrop-filter: blur(1em)) or (-webkit-backdrop-filter:blur(1em)) {
.detailButton-icon,.emby-select-withcolor.detailTrackSelect,.fab,.raised:not(.nobackdropfilter) {
background:rgba(85,85,85,.3); .detailButton-icon,
.emby-select-withcolor.detailTrackSelect,
.fab,
.raised:not(.nobackdropfilter) {
background: rgba(85, 85, 85, .3);
-webkit-backdrop-filter: saturate(1.8) blur(1.5em); -webkit-backdrop-filter: saturate(1.8) blur(1.5em);
backdrop-filter: saturate(1.8) blur(1.5em) backdrop-filter: saturate(1.8) blur(1.5em)
} }
.dialog-blur,.toast { .dialog-blur,
.toast {
color: #fff; color: #fff;
background: rgba(56,56,56,.76); background: rgba(56, 56, 56, .76);
-webkit-backdrop-filter: blur(2.5em) saturate(1.8); -webkit-backdrop-filter: blur(2.5em) saturate(1.8);
backdrop-filter: blur(2.5em) saturate(1.8); backdrop-filter: blur(2.5em) saturate(1.8);
-webkit-box-shadow: none!important; -webkit-box-shadow: none !important;
box-shadow: none!important box-shadow: none !important
} }
.toast-large { .toast-large {
color: rgba(255,255,255,.87) color: rgba(255, 255, 255, .87)
} }
} }
.fab:focus,.raised:focus { .fab:focus,
.raised:focus {
background: var(--button-color-hover); background: var(--button-color-hover);
color: var(--button-text-hover); color: var(--button-text-hover);
} }
@ -209,12 +225,12 @@ html {
} }
.emby-select-withcolor:focus { .emby-select-withcolor:focus {
border-color: rgb(var(--theme-primary-color))!important border-color: rgb(var(--theme-primary-color)) !important
} }
.emby-select-tv-withcolor:focus { .emby-select-tv-withcolor:focus {
background-color: rgb(var(--theme-primary-color))!important; background-color: rgb(var(--theme-primary-color)) !important;
color: #fff!important color: #fff !important
} }
.checkboxLabel { .checkboxLabel {
@ -225,7 +241,9 @@ html {
background-color: var(--theme-icon-focus-background) background-color: var(--theme-icon-focus-background)
} }
.inputLabelFocused,.selectLabelFocused,.textareaLabelFocused { .inputLabelFocused,
.selectLabelFocused,
.textareaLabelFocused {
color: rgb(var(--accent-color)) color: rgb(var(--accent-color))
} }
@ -237,7 +255,8 @@ html {
color: rgb(var(--accent-color)) color: rgb(var(--accent-color))
} }
.paperList,.visualCardBox { .paperList,
.visualCardBox {
background-color: var(--card-background) background-color: var(--card-background)
} }
@ -245,12 +264,16 @@ html {
border: var(--line-size) solid var(--line-background) border: var(--line-size) solid var(--line-background)
} }
.fieldDescription,.listItemBodyText-secondary,.secondaryText { .fieldDescription,
.listItemBodyText-secondary,
.secondaryText {
color: var(--theme-body-secondary-text-color) color: var(--theme-body-secondary-text-color)
} }
.cardText-secondary { .cardText-secondary {
color: var(--text) color: var(--text)
} }
.cardText-first { .cardText-first {
color: var(--theme-text-color-opaque) color: var(--theme-text-color-opaque)
} }
@ -261,7 +284,7 @@ html {
@media(hover: hover) and (pointer:fine) { @media(hover: hover) and (pointer:fine) {
.actionSheetMenuItem:hover { .actionSheetMenuItem:hover {
background-color:rgba(255,255,255,.2) background-color: rgba(255, 255, 255, .2)
} }
} }
@ -269,8 +292,9 @@ html {
background: rgb(var(--theme-primary-color)); background: rgb(var(--theme-primary-color));
color: var(--label-text-color); color: var(--label-text-color);
} }
.itemSelectionCount { .itemSelectionCount {
color: var(--label-text-color)!important; color: var(--label-text-color) !important;
} }
@ -289,20 +313,20 @@ html {
.alphaPickerButton-tv:focus { .alphaPickerButton-tv:focus {
background-color: rgb(var(--theme-primary-color)); background-color: rgb(var(--theme-primary-color));
color: #fff!important color: #fff !important
} }
.detailTableBodyRow-shaded:nth-child(even) { .detailTableBodyRow-shaded:nth-child(even) {
background: #1c1c1c; background: #1c1c1c;
background: rgba(30,30,30,.9) background: rgba(30, 30, 30, .9)
} }
.listItem-border { .listItem-border {
border-color: var(--line-background)!important border-color: var(--line-background) !important
} }
.listItem-focusscale:focus { .listItem-focusscale:focus {
background: rgba(54,54,54,.8) background: rgba(54, 54, 54, .8)
} }
.progressring-spiner { .progressring-spiner {
@ -321,13 +345,15 @@ html {
color: #cb272a color: #cb272a
} }
.emby-input,.emby-textarea { .emby-input,
.emby-textarea {
color: inherit; color: inherit;
background: rgb(0 0 0 / 25%); background: rgb(0 0 0 / 25%);
border: var(--line-size) solid rgba(255, 255, 255, 0.1) border: var(--line-size) solid rgba(255, 255, 255, 0.1)
} }
.emby-input:focus,.emby-textarea:focus { .emby-input:focus,
.emby-textarea:focus {
border-color: rgb(var(--theme-primary-color)) border-color: rgb(var(--theme-primary-color))
} }
@ -340,6 +366,7 @@ html {
background-color: rgb(var(--theme-primary-color)) !important; background-color: rgb(var(--theme-primary-color)) !important;
} }
.checkboxLabel::after { .checkboxLabel::after {
color: var(--label-text-color); color: var(--label-text-color);
} }
@ -372,16 +399,17 @@ html {
@media(hover: hover) and (pointer:fine) { @media(hover: hover) and (pointer:fine) {
.navMenuOption:hover { .navMenuOption:hover {
background:#303030 background: #303030
} }
} }
.navMenuOption-selected { .navMenuOption-selected {
background-color: var(--theme-icon-focus-background)!important; background-color: var(--theme-icon-focus-background) !important;
color: rgb(var(--accent-color)) color: rgb(var(--accent-color))
} }
.emby-button-focusscale:focus,.emby-button-focusscale:focus .detailButton-icon { .emby-button-focusscale:focus,
.emby-button-focusscale:focus .detailButton-icon {
background: rgb(var(--theme-primary-color)); background: rgb(var(--theme-primary-color));
color: #fff color: #fff
} }
@ -407,7 +435,9 @@ html {
outline-color: rgb(var(--theme-primary-color)) outline-color: rgb(var(--theme-primary-color))
} }
.channelCell,.guide-headerTimeslots,.timeslotHeaders { .channelCell,
.guide-headerTimeslots,
.timeslotHeaders {
background: var(--theme-background); background: var(--theme-background);
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
background-attachment: fixed, fixed; background-attachment: fixed, fixed;
@ -420,7 +450,7 @@ html {
@media (pointer: coarse) { @media (pointer: coarse) {
.channelCell-mobilefocus { .channelCell-mobilefocus {
background:var(--theme-background)!important; background: var(--theme-background) !important;
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
background-attachment: fixed, fixed; background-attachment: fixed, fixed;
background-position: center center, center center; background-position: center center, center center;
@ -432,7 +462,7 @@ html {
} }
.channelCell-mobilefocus:not(:focus-visible) { .channelCell-mobilefocus:not(:focus-visible) {
background: var(--theme-background)!important; background: var(--theme-background) !important;
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
background-attachment: fixed, fixed; background-attachment: fixed, fixed;
background-position: center center, center center; background-position: center center, center center;
@ -443,7 +473,7 @@ html {
} }
.channelCell-mobilefocus:not(:-moz-focusring) { .channelCell-mobilefocus:not(:-moz-focusring) {
background: var(--theme-background)!important; background: var(--theme-background) !important;
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
background-attachment: fixed, fixed; background-attachment: fixed, fixed;
background-position: center center, center center; background-position: center center, center center;
@ -453,8 +483,10 @@ html {
-o-background-size: auto, cover; -o-background-size: auto, cover;
} }
.channelCell,.epgRow,.programCell { .channelCell,
border-color: rgba(255,255,255,.05) .epgRow,
.programCell {
border-color: rgba(255, 255, 255, .05)
} }
.guide-currentTimeIndicatorDot { .guide-currentTimeIndicatorDot {
@ -470,22 +502,23 @@ html {
} }
.programCell-sports { .programCell-sports {
background: #3949ab!important background: #3949ab !important
} }
.programCell-movie { .programCell-movie {
background: #5e35b1!important background: #5e35b1 !important
} }
.programCell-kids { .programCell-kids {
background: #039be5!important background: #039be5 !important
} }
.programCell-news { .programCell-news {
background: #43a047!important background: #43a047 !important
} }
.channelCell:focus,.programCell:focus { .channelCell:focus,
.programCell:focus {
background-color: rgb(var(--theme-primary-color)); background-color: rgb(var(--theme-primary-color));
color: #fff color: #fff
} }
@ -503,7 +536,7 @@ html {
} }
.ratingbutton-icon-withrating { .ratingbutton-icon-withrating {
color: #c33!important color: #c33 !important
} }
.downloadbutton-icon-on { .downloadbutton-icon-on {
@ -515,7 +548,7 @@ html {
} }
.playstatebutton-icon-played { .playstatebutton-icon-played {
color: #c33!important color: #c33 !important
} }
.repeatButton-active { .repeatButton-active {
@ -561,7 +594,8 @@ html {
.cardOverlayButtonIcon { .cardOverlayButtonIcon {
background-color: rgb(var(--theme-primary-color)) background-color: rgb(var(--theme-primary-color))
} }
.cardScalable.cardPadder-portrait > div > button > i{
.cardScalable.cardPadder-portrait>div>button>i {
color: var(--label-text-color) !important; color: var(--label-text-color) !important;
} }
@ -607,11 +641,11 @@ html {
.scrollbuttoncontainer { .scrollbuttoncontainer {
color: #fff; color: #fff;
background: rgba(20,20,20,.5) background: rgba(20, 20, 20, .5)
} }
.recordingIcon-active { .recordingIcon-active {
color: #c33!important color: #c33 !important
} }
.drawerLogo { .drawerLogo {
@ -624,16 +658,16 @@ html {
} }
.emby-search-tab-button.emby-tab-button-active { .emby-search-tab-button.emby-tab-button-active {
background: rgb(var(--accent-color))!important background: rgb(var(--accent-color)) !important
} }
.textActionButton.dragging { .textActionButton.dragging {
background: var(--button-background)!important background: var(--button-background) !important
} }
.dragging-over.full-drop-target { .dragging-over.full-drop-target {
background: rgb(var(--theme-primary-color))!important; background: rgb(var(--theme-primary-color)) !important;
color: #fff!important color: #fff !important
} }
.dragging-over-top:before { .dragging-over-top:before {
@ -649,17 +683,17 @@ html {
background: 0 !important; background: 0 !important;
color: var(--accent-color-hover); color: var(--accent-color-hover);
} }
} }
.mainDrawer { .mainDrawer {
background: var(--header-blur-background); background: var(--header-blur-background);
-webkit-backdrop-filter: saturate(1.8) blur(1.5em); -webkit-backdrop-filter: saturate(1.8) blur(1.5em);
backdrop-filter: saturate(1.8) blur(1.5em); backdrop-filter: saturate(1.8) blur(1.5em);
} }
.jstree-default .jstree-clicked { .jstree-default .jstree-clicked {
background: rgb(var(--accent-color)); background: rgb(var(--accent-color));
-webkit-border-radius: 2px; -webkit-border-radius: 2px;
border-radius: 2px; border-radius: 2px;
color: var(--label-text-color) !important; color: var(--label-text-color) !important;
} }

26
CSS/themes/flood/flood-base.css

@ -54,8 +54,18 @@ h4,
h5, h5,
h6, h6,
p, p,
.inverse .h1, .inverse .h2, .inverse .h3, .inverse .h4, .inverse .h5, .inverse .h6, .inverse h1, .inverse h2, .inverse h3, .inverse h4, .inverse h5, .inverse h6 .inverse .h1,
.dark .torrents__alert, .inverse .h2,
.inverse .h3,
.inverse .h4,
.inverse .h5,
.inverse .h6,
.inverse h1,
.inverse h2,
.inverse h3,
.inverse h4,
.inverse h5,
.inverse h6 .dark .torrents__alert,
.torrents__alert { .torrents__alert {
color: var(--text-hover); color: var(--text-hover);
} }
@ -341,6 +351,7 @@ p,
color: #39ce83; color: #39ce83;
font-weight: 500; font-weight: 500;
} }
.dark .torrent--is-condensed.torrent--is-selected .torrent__detail, .dark .torrent--is-condensed.torrent--is-selected .torrent__detail,
.torrent--is-condensed.torrent--is-selected .torrent__detail, .torrent--is-condensed.torrent--is-selected .torrent__detail,
.dark .torrent--is-condensed.torrent--is-selected.torrent--is-stopped .torrent__detail, .dark .torrent--is-condensed.torrent--is-selected.torrent--is-stopped .torrent__detail,
@ -414,8 +425,7 @@ p,
.dark .torrent-details__table__heading--primary, .dark .torrent-details__table__heading--primary,
.torrent-details__table__heading--primary, .torrent-details__table__heading--primary,
.dark .torrent-details__table__heading--secondary .dark .torrent-details__table__heading--secondary .torrent-details__table__heading--secondary,
.torrent-details__table__heading--secondary,
.dark .torrent-details__table__heading--tertiary, .dark .torrent-details__table__heading--tertiary,
.torrent-details__table__heading--tertiary { .torrent-details__table__heading--tertiary {
color: var(--text-hover); color: var(--text-hover);
@ -480,9 +490,13 @@ p,
box-shadow: 1px 0 hsl(0deg 0% 100% / 12%); box-shadow: 1px 0 hsl(0deg 0% 100% / 12%);
color: var(--text); color: var(--text);
} }
.sidebar-filter__item--heading, .sidebar-filter__item--heading:focus-visible, .sidebar-filter__item--heading:hover {
.sidebar-filter__item--heading,
.sidebar-filter__item--heading:focus-visible,
.sidebar-filter__item--heading:hover {
color: var(--text-hover) !important; color: var(--text-hover) !important;
} }
.dark .sidebar-filter__item, .dark .sidebar-filter__item,
.sidebar-filter__item { .sidebar-filter__item {
color: var(--text); color: var(--text);
@ -565,6 +579,7 @@ p,
.torrent--is-selected.torrent--is-stopped .progress-bar__icon .icon { .torrent--is-selected.torrent--is-stopped .progress-bar__icon .icon {
color: #ffffff; color: #ffffff;
} }
.torrent--is-selected.torrent--is-stopped .progress-bar__fill { .torrent--is-selected.torrent--is-stopped .progress-bar__fill {
background: #ffffff; background: #ffffff;
} }
@ -629,6 +644,7 @@ p,
.modal__tabs .modal__tab.is-active:after { .modal__tabs .modal__tab.is-active:after {
background: rgb(var(--accent-color)); background: rgb(var(--accent-color));
} }
.modal--vertical .modal__tabs .modal__tab:after { .modal--vertical .modal__tabs .modal__tab:after {
width: 3px; width: 3px;
} }

8
CSS/themes/gitea/gitea-base.css

@ -167,8 +167,7 @@ h4,
h5, h5,
h6, h6,
.ui.header, .ui.header,
.ui.header .sub.header .ui.header .sub.header {
{
color: var(--text-hover); color: var(--text-hover);
} }
@ -324,6 +323,7 @@ b:hover,
color: var(--text-hover); color: var(--text-hover);
box-shadow: none; box-shadow: none;
} }
.feeds .list ul li:not(:last-child) { .feeds .list ul li:not(:last-child) {
border-bottom: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.1);
} }
@ -428,6 +428,7 @@ b:hover,
.ui.menu.new-menu { .ui.menu.new-menu {
background: rgb(0 0 0 / 25%); background: rgb(0 0 0 / 25%);
} }
.ui.menu.new-menu::after { .ui.menu.new-menu::after {
background: transparent; background: transparent;
} }
@ -974,7 +975,8 @@ a.ui.card:hover {
.ui.blue.labels .label, .ui.blue.labels .label,
.ui.ui.ui.blue.label, .ui.ui.ui.blue.label,
.ui.grey.labels .label, .ui.ui.ui.grey.label { .ui.grey.labels .label,
.ui.ui.ui.grey.label {
background-color: rgb(var(--accent-color)) !important; background-color: rgb(var(--accent-color)) !important;
border-color: rgb(var(--accent-color)) !important; border-color: rgb(var(--accent-color)) !important;
color: var(--label-text-color); color: var(--label-text-color);

964
CSS/themes/grafana/grafana-base.css

File diff suppressed because it is too large

507
CSS/themes/guacamole/guacamole-base.css

@ -1,4 +1,3 @@
/* dP dP dP */ /* dP dP dP */
/* 88 88 88 */ /* 88 88 88 */
/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ /* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */
@ -15,10 +14,17 @@
* { * {
outline: none !important; outline: none !important;
} }
h1,h2,h3,h4,h5,h6 {
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--text-hover); color: var(--text-hover);
} }
body {
body {
background: var(--main-bg-color) !important; background: var(--main-bg-color) !important;
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
background-attachment: fixed, fixed; background-attachment: fixed, fixed;
@ -27,9 +33,10 @@ h1,h2,h3,h4,h5,h6 {
-webkit-background-size: auto, cover; -webkit-background-size: auto, cover;
-moz-background-size: auto, cover; -moz-background-size: auto, cover;
-o-background-size: auto, cover; -o-background-size: auto, cover;
color:var(--text) !important; color: var(--text) !important;
} }
div.displayMiddle {
div.displayMiddle {
background: var(--modal-bg-color); background: var(--modal-bg-color);
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
background-attachment: fixed, fixed; background-attachment: fixed, fixed;
@ -38,10 +45,12 @@ h1,h2,h3,h4,h5,h6 {
-webkit-background-size: auto, cover; -webkit-background-size: auto, cover;
-moz-background-size: auto, cover; -moz-background-size: auto, cover;
-o-background-size: auto, cover; -o-background-size: auto, cover;
} }
input::-webkit-input-placeholder { input::-webkit-input-placeholder {
color: var(--text) !important; color: var(--text) !important;
} }
input:focus::-webkit-input-placeholder { input:focus::-webkit-input-placeholder {
color: var(--text-hover) !important; color: var(--text-hover) !important;
} }
@ -50,6 +59,7 @@ input:focus::-webkit-input-placeholder {
input:-moz-placeholder { input:-moz-placeholder {
color: var(--text) !important; color: var(--text) !important;
} }
input:focus:-moz-placeholder { input:focus:-moz-placeholder {
color: var(--text-hover) !important; color: var(--text-hover) !important;
} }
@ -58,6 +68,7 @@ input:focus:-moz-placeholder {
input::-moz-placeholder { input::-moz-placeholder {
color: var(--text) !important; color: var(--text) !important;
} }
input:focus::-moz-placeholder { input:focus::-moz-placeholder {
color: var(--text-hover) !important; color: var(--text-hover) !important;
} }
@ -66,16 +77,19 @@ input:focus::-moz-placeholder {
input:-ms-input-placeholder { input:-ms-input-placeholder {
color: var(--text) !important; color: var(--text) !important;
} }
input:focus:-ms-input-placeholder { input:focus:-ms-input-placeholder {
color: var(--text-hover) !important; color: var(--text-hover) !important;
} }
/* Scrollbar */
@media only screen and (min-width: 768px) { /* Scrollbar */
@media only screen and (min-width: 768px) {
html { html {
height: 100%; height: 100%;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
} }
body { body {
overflow-y: auto; overflow-y: auto;
height: 100%; height: 100%;
@ -88,182 +102,242 @@ input:focus:-ms-input-placeholder {
-moz-background-size: auto, cover; -moz-background-size: auto, cover;
-o-background-size: auto, cover; -o-background-size: auto, cover;
} }
} }
::-webkit-scrollbar {
::-webkit-scrollbar {
width: 14px; width: 14px;
} }
::-webkit-scrollbar-thumb {
::-webkit-scrollbar-thumb {
min-height: 50px; min-height: 50px;
border: 3px solid transparent; border: 3px solid transparent;
border-radius: 8px; border-radius: 8px;
background-color: hsla(0,0%,100%,.2); background-color: hsla(0, 0%, 100%, .2);
background-clip: padding-box; background-clip: padding-box;
} }
::-webkit-scrollbar-track {
::-webkit-scrollbar-track {
background-color: transparent; background-color: transparent;
} }
::-webkit-scrollbar-thumb:hover {
::-webkit-scrollbar-thumb:hover {
min-height: 50px; min-height: 50px;
border: 3px solid transparent; border: 3px solid transparent;
border-radius: 8px; border-radius: 8px;
background-color: hsla(0,0%,100%,.5); background-color: hsla(0, 0%, 100%, .5);
background-clip: padding-box; background-clip: padding-box;
} }
/* LOGIN MENU */
div.login-ui { /* LOGIN MENU */
div.login-ui {
background: inherit; background: inherit;
} }
.login-ui div.login-dialog {
.login-ui div.login-dialog {
background: rgba(0, 0, 0, .25); background: rgba(0, 0, 0, .25);
border: none; border: none;
} }
input[type="submit"], button, a.button {
input[type="submit"],
button,
a.button {
background-color: var(--button-color); background-color: var(--button-color);
border: none; border: none;
outline: none; outline: none;
} }
input[type="submit"]:hover, button:hover, a.button:hover {
input[type="submit"]:hover,
button:hover,
a.button:hover {
background-color: var(--button-color-hover); background-color: var(--button-color-hover);
border: none; border: none;
cursor: pointer; cursor: pointer;
} }
.login-ui .login-fields .labeled-field input:focus {
background: rgba(0,0,0,0.45) !important; .login-ui .login-fields .labeled-field input:focus {
background: rgba(0, 0, 0, 0.45) !important;
outline: none; outline: none;
} }
.login-ui .login-fields .labeled-field.empty input {
background: rgba(0,0,0,0.25) !important; .login-ui .login-fields .labeled-field.empty input {
background: rgba(0, 0, 0, 0.25) !important;
outline: none; outline: none;
} }
.login-ui .login-fields .labeled-field.empty input:focus {
background: rgba(0,0,0,0.45) !important; .login-ui .login-fields .labeled-field.empty input:focus {
background: rgba(0, 0, 0, 0.45) !important;
outline: none; outline: none;
} }
.login-ui .login-dialog .login-fields input {
background-color: rgba(0,0,0,0.45) !important; .login-ui .login-dialog .login-fields input {
} background-color: rgba(0, 0, 0, 0.45) !important;
div.location, input[type=text], input[type=email], input[type=number], input[type=password], textarea { }
div.location,
input[type=text],
input[type=email],
input[type=number],
input[type=password],
textarea {
color: white !important; color: white !important;
background: rgba(0, 0, 0, 0.25) !important; background: rgba(0, 0, 0, 0.25) !important;
} }
input[type=checkbox], input[type=number], input[type=text], input[type=email], input[type=radio], textarea {
input[type=checkbox],
input[type=number],
input[type=text],
input[type=email],
input[type=radio],
textarea {
color: var(--text-hover) !important; color: var(--text-hover) !important;
background: transparent; background: transparent;
} }
/* HOME MENU */ /* HOME MENU */
.header h2 { .header h2 {
color: var(--text-hover); color: var(--text-hover);
background-color: rgba(0, 0, 0, 0.25); background-color: rgba(0, 0, 0, 0.25);
} }
.connection .icon.vnc, .connection .icon.rdp { .connection .icon.vnc,
.connection .icon.rdp {
background-image: url(https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/guacamole/guac-monitor.png); background-image: url(https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/guacamole/guac-monitor.png);
} }
.connection .icon.ssh, .connection .icon.telnet {
.connection .icon.ssh,
.connection .icon.telnet {
background-image: url(https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/guacamole/guac-text.png); background-image: url(https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/guacamole/guac-text.png);
} }
.user-menu .menu-dropdown .menu-title { .user-menu .menu-dropdown .menu-title {
background-image: url(https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/guacamole/guac-user.png); background-image: url(https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/guacamole/guac-user.png);
background-color: transparent; background-color: transparent;
} }
.user-menu .menu-dropdown .menu-contents li a[href="#/"] {
.user-menu .menu-dropdown .menu-contents li a[href="#/"] {
background-image: url(https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/guacamole/guac-home-dark.png); background-image: url(https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/guacamole/guac-home-dark.png);
} }
.user-menu .menu-dropdown .menu-contents li a[href="#/settings/users"], .user-menu .menu-dropdown .menu-contents li a[href="#/settings/connections"], .user-menu .menu-dropdown .menu-contents li a[href="#/settings/sessions"], .user-menu .menu-dropdown .menu-contents li a[href="#/settings/preferences"] {
.user-menu .menu-dropdown .menu-contents li a[href="#/settings/users"],
.user-menu .menu-dropdown .menu-contents li a[href="#/settings/connections"],
.user-menu .menu-dropdown .menu-contents li a[href="#/settings/sessions"],
.user-menu .menu-dropdown .menu-contents li a[href="#/settings/preferences"] {
background-image: url(https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/guacamole/guac-config-dark.png); background-image: url(https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/guacamole/guac-config-dark.png);
} }
.user-menu .menu-dropdown .menu-contents li a.logout {
.user-menu .menu-dropdown .menu-contents li a.logout {
background-image: url(https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/guacamole/guac-logout-dark.png); background-image: url(https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/guacamole/guac-logout-dark.png);
} }
.icon.user {
.icon.user {
background-image: url(https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/guacamole/guac-user.png); background-image: url(https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/guacamole/guac-user.png);
} }
.pager .icon.first-page {
.pager .icon.first-page {
background-image: url(https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/guacamole/guac-first-page.png); background-image: url(https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/guacamole/guac-first-page.png);
} }
.pager .icon.prev-page {
.pager .icon.prev-page {
background-image: url(https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/guacamole/guac-prev-page.png); background-image: url(https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/guacamole/guac-prev-page.png);
} }
.pager .icon.next-page {
.pager .icon.next-page {
background-image: url(https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/guacamole/guac-next-page.png); background-image: url(https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/guacamole/guac-next-page.png);
} }
.pager .icon.last-page {
.pager .icon.last-page {
background-image: url(https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/guacamole/guac-last-page.png); background-image: url(https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/guacamole/guac-last-page.png);
} }
.loading::before{
background-image:url('https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/guacamole/cog.png'); .loading::before {
} background-image: url('https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/guacamole/cog.png');
table.sorted th.sort-primary.sort-descending:after { }
table.sorted th.sort-primary.sort-descending:after {
background-image: url(https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/guacamole/up.png); background-image: url(https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/guacamole/up.png);
} }
.menu-dropdown .menu-indicator { .menu-dropdown .menu-indicator {
background-image: url(https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/guacamole/down.png); background-image: url(https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/guacamole/down.png);
} }
.menu-dropdown .menu-indicator:hover {
.menu-dropdown .menu-indicator:hover {
background-image: url(https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/guacamole/down.png); background-image: url(https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/guacamole/down.png);
color: #f9be03; color: #f9be03;
} }
table.sorted th.sort-primary:after {
table.sorted th.sort-primary:after {
background-image: url(https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/guacamole/down.png); background-image: url(https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/guacamole/down.png);
} }
thead { thead {
color: var(--text-hover); color: var(--text-hover);
} }
table.sorted th, table.sorted td {
table.sorted th,
table.sorted td {
border: 1px solid rgb(255 255 255 / 15%); border: 1px solid rgb(255 255 255 / 15%);
} }
.settings table.session-list tr.session:hover { .settings table.session-list tr.session:hover {
background: rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.15);
} }
.menu-dropdown.open, .menu-dropdown.open:hover {
.menu-dropdown.open,
.menu-dropdown.open:hover {
background: rgba(0, 0, 0, 0.25); background: rgba(0, 0, 0, 0.25);
} }
.menu-dropdown {
.menu-dropdown {
border-left: none; border-left: none;
background: rgba(0, 0, 0, 0.25); background: rgba(0, 0, 0, 0.25);
} }
.menu-dropdown .menu-contents li a {
.menu-dropdown .menu-contents li a {
display: block; display: block;
cursor: pointer; cursor: pointer;
color: var(--text); color: var(--text);
text-decoration: none; text-decoration: none;
padding: .75em; padding: .75em;
} }
.menu-dropdown .menu-contents li a.current, .menu-dropdown .menu-contents li a.current:hover {
background-color: rgba(0,0,0,.25); .menu-dropdown .menu-contents li a.current,
color:var(--text-hover) .menu-dropdown .menu-contents li a.current:hover {
} background-color: rgba(0, 0, 0, .25);
.menu-dropdown .menu-contents li a:hover { color: var(--text-hover)
background-color: rgba(0,0,0,.25); }
.menu-dropdown .menu-contents li a:hover {
background-color: rgba(0, 0, 0, .25);
color: var(--text-hover); color: var(--text-hover);
} }
.menu-dropdown:hover {
.menu-dropdown:hover {
background: rgba(0, 0, 0, 0.25); background: rgba(0, 0, 0, 0.25);
color: var(--text-hover); color: var(--text-hover);
} }
.menu-dropdown .menu-contents { .menu-dropdown .menu-contents {
background: var(--drop-down-menu-bg); background: var(--drop-down-menu-bg);
} }
.header .filter input {
.header .filter input {
-moz-border-radius: 0; -moz-border-radius: 0;
-webkit-border-radius: 0; -webkit-border-radius: 0;
-khtml-border-radius: 0; -khtml-border-radius: 0;
border-radius: 0; border-radius: 0;
border: 0; border: 0;
border-left: 1px solid rgba(0,0,0,0.125); border-left: 1px solid rgba(0, 0, 0, 0.125);
background-color: transparent; background-color: transparent;
color: var(--text-hover); color: var(--text-hover);
} }
.header .filter {
.header .filter {
background-color: rgba(0, 0, 0, 0.25); background-color: rgba(0, 0, 0, 0.25);
} }
.filter .search-string {
.filter .search-string {
background-image: url(https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/guacamole/magnifier.png) !important; background-image: url(https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/guacamole/magnifier.png) !important;
background-repeat: no-repeat !important; background-repeat: no-repeat !important;
background-size: 1.75em !important; background-size: 1.75em !important;
@ -274,34 +348,46 @@ input:focus:-ms-input-placeholder {
max-width: none; max-width: none;
background-color: rgba(0, 0, 0, 0.25); background-color: rgba(0, 0, 0, 0.25);
border: 0; border: 0;
} }
div.location, input[type=text], input[type=email], input[type=number], input[type=password], textarea {
div.location,
input[type=text],
input[type=email],
input[type=number],
input[type=password],
textarea {
color: var(--text-hover); color: var(--text-hover);
} }
.user a:visited, .connection a:visited, .connection-group a:visited { .user a:visited,
.connection a:visited,
.connection-group a:visited {
text-decoration: none; text-decoration: none;
color: var(--link-color-hover); color: var(--link-color-hover);
} }
.recent-connections .connection:hover {
.recent-connections .connection:hover {
background: hsla(0, 0%, 100%, 0.08); background: hsla(0, 0%, 100%, 0.08);
color: var(--link-color-hover); color: var(--link-color-hover);
} }
.list-item:not(.selected) .caption:hover {
.list-item:not(.selected) .caption:hover {
background: hsla(0, 0%, 100%, 0.07); background: hsla(0, 0%, 100%, 0.07);
color: var(--link-color-hover); color: var(--link-color-hover);
} }
.list-item .name {
.list-item .name {
color: var(--link-color); color: var(--link-color);
} }
.list-item:not(.selected) .caption:hover .name { .list-item:not(.selected) .caption:hover .name {
color: var(--link-color-hover); color: var(--link-color-hover);
} }
/* SIDE MENU */ /* SIDE MENU */
.menu, .menu .header { .menu,
.menu .header {
background: var(--modal-bg-color) !important; background: var(--modal-bg-color) !important;
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
background-attachment: fixed, fixed; background-attachment: fixed, fixed;
@ -312,7 +398,10 @@ input:focus:-ms-input-placeholder {
-o-background-size: auto, cover; -o-background-size: auto, cover;
box-shadow: none; box-shadow: none;
} }
.menu-content, .menu-content .header, .menu-body {
.menu-content,
.menu-content .header,
.menu-body {
background: var(--modal-bg-color) !important; background: var(--modal-bg-color) !important;
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
background-attachment: fixed, fixed; background-attachment: fixed, fixed;
@ -322,12 +411,15 @@ input:focus:-ms-input-placeholder {
-moz-background-size: auto, cover; -moz-background-size: auto, cover;
-o-background-size: auto, cover; -o-background-size: auto, cover;
} }
.clipboard, .clipboard-service-target {
.clipboard,
.clipboard-service-target {
background: rgba(0, 0, 0, 0.25); background: rgba(0, 0, 0, 0.25);
color: white; color: white;
} }
/* NOTIFICATION BOX */
.notification.error { /* NOTIFICATION BOX */
.notification.error {
background: var(--modal-bg-color); background: var(--modal-bg-color);
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
background-attachment: fixed, fixed; background-attachment: fixed, fixed;
@ -337,8 +429,9 @@ input:focus:-ms-input-placeholder {
-moz-background-size: auto, cover; -moz-background-size: auto, cover;
-o-background-size: auto, cover; -o-background-size: auto, cover;
color: white; color: white;
} }
.notification {
.notification {
background: var(--modal-bg-color); background: var(--modal-bg-color);
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
background-attachment: fixed, fixed; background-attachment: fixed, fixed;
@ -348,60 +441,93 @@ input:focus:-ms-input-placeholder {
-moz-background-size: auto, cover; -moz-background-size: auto, cover;
-o-background-size: auto, cover; -o-background-size: auto, cover;
color: white; color: white;
} }
/* SETTINGS */ /* SETTINGS */
.page-tabs .page-list li a[href]:visited { .page-tabs .page-list li a[href]:visited {
color: white; color: white;
} }
.page-tabs .page-list li a[href] {
.page-tabs .page-list li a[href] {
color: white; color: white;
} }
.page-tabs .page-list li a[href]:hover {
.page-tabs .page-list li a[href]:hover {
background-color: rgba(0, 0, 0, 0.25); background-color: rgba(0, 0, 0, 0.25);
} }
.user a:visited, .connection a:visited, .connection-group a:visited {
.user a:visited,
.connection a:visited,
.connection-group a:visited {
text-decoration: none; text-decoration: none;
color: var(--link-color); color: var(--link-color);
} }
.user a:hover, .user-group a:hover, .connection a:hover, .connection-group a:hover, a.ng-binding:hover:not(.add-user):not(.button) {
.user a:hover,
.user-group a:hover,
.connection a:hover,
.connection-group a:hover,
a.ng-binding:hover:not(.add-user):not(.button) {
color: var(--link-color-hover) !important; color: var(--link-color-hover) !important;
} }
.user a, .connection a, .connection-group a, a.ng-binding:not(.add-user):not(.button){
.user a,
.connection a,
.connection-group a,
a.ng-binding:not(.add-user):not(.button) {
text-decoration: none; text-decoration: none;
color: var(--link-color); color: var(--link-color);
} }
div.location, input[type=text], input[type=email], input[type=number], input[type=password], textarea {
div.location,
input[type=text],
input[type=email],
input[type=number],
input[type=password],
textarea {
border: 0; border: 0;
background: rgba(0, 0, 0, .25); background: rgba(0, 0, 0, .25);
} }
.location-chooser .dropdown {
.location-chooser .dropdown {
background: #666; background: #666;
} }
/* USER SETTINGS */
.page-tabs .page-list li a[href], .section-tabs li a { /* USER SETTINGS */
.page-tabs .page-list li a[href],
.section-tabs li a {
color: var(--text) !important; color: var(--text) !important;
} }
.page-tabs .page-list li a[href].current, .page-tabs .page-list li a[href].current:hover, .section-tabs li a.current, .section-tabs li a.current:hover {
background: rgba(0,0,0,0.25); .page-tabs .page-list li a[href].current,
.page-tabs .page-list li a[href].current:hover,
.section-tabs li a.current,
.section-tabs li a.current:hover {
background: rgba(0, 0, 0, 0.25);
cursor: default; cursor: default;
color: rgb(var(--accent-color)) !important; color: rgb(var(--accent-color)) !important;
} }
.page-tabs .page-list li a[href]:hover, .section-tabs li a:hover {
.page-tabs .page-list li a[href]:hover,
.section-tabs li a:hover {
background-color: hsla(0, 0%, 100%, 0.07); background-color: hsla(0, 0%, 100%, 0.07);
color: var(--text-hover) !important; color: var(--text-hover) !important;
} }
.manage-user .page-tabs .page-list li.linked a[href]:before {
.manage-user .page-tabs .page-list li.linked a[href]:before {
background-image: url(https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/guacamole/checkmark.png); background-image: url(https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/guacamole/checkmark.png);
} }
.manage-user .page-tabs .page-list li.read-only a[href]:before {
.manage-user .page-tabs .page-list li.read-only a[href]:before {
background-image: url(https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/guacamole/lock.png); background-image: url(https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/guacamole/lock.png);
} }
.manage-user .notice.read-only {
.manage-user .notice.read-only {
background: hsla(0, 0%, 100%, 0.07); background: hsla(0, 0%, 100%, 0.07);
} }
/* DUA 2FA PAGE */
.duo-signature-response-field { /* DUA 2FA PAGE */
.duo-signature-response-field {
background: var(--modal-bg-color) !important; background: var(--modal-bg-color) !important;
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
background-attachment: fixed, fixed; background-attachment: fixed, fixed;
@ -410,8 +536,9 @@ input:focus:-ms-input-placeholder {
-webkit-background-size: auto, cover; -webkit-background-size: auto, cover;
-moz-background-size: auto, cover; -moz-background-size: auto, cover;
-o-background-size: auto, cover; -o-background-size: auto, cover;
} }
.base-wrapper {
.base-wrapper {
border: 1px solid transparent !important; border: 1px solid transparent !important;
background: var(--modal-bg-color) !important; background: var(--modal-bg-color) !important;
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
@ -421,34 +548,45 @@ input:focus:-ms-input-placeholder {
-webkit-background-size: auto, cover; -webkit-background-size: auto, cover;
-moz-background-size: auto, cover; -moz-background-size: auto, cover;
-o-background-size: auto, cover; -o-background-size: auto, cover;
} }
.base-body {
.base-body {
background-color: #333 !important; background-color: #333 !important;
} }
h1.spacious-frame-view {
h1.spacious-frame-view {
color: var(--text-hover) !important; color: var(--text-hover) !important;
} }
@media screen and (-webkit-max-device-pixel-ratio: 1.25), screen and (max-resolution: 120dpi) {
h1, .h1 { @media screen and (-webkit-max-device-pixel-ratio: 1.25),
screen and (max-resolution: 120dpi) {
h1,
.h1 {
color: var(--text-hover) !important; color: var(--text-hover) !important;
} }
} }
.white-wrapper {
.white-wrapper {
background-color: #333 !important; background-color: #333 !important;
color: var(--text) !important; color: var(--text) !important;
} }
form:not(.inline) fieldset {
form:not(.inline) fieldset {
background-color: #333 !important; background-color: #333 !important;
} }
label span {
label span {
color: white !important; color: white !important;
} }
input[type=radio] {
input[type=radio] {
border: 1px solid var(--text-hover) !important; border: 1px solid var(--text-hover) !important;
} }
/* Connection */
#connection-warning { /* Connection */
#connection-warning {
background: var(--modal-bg-color); background: var(--modal-bg-color);
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
background-attachment: fixed, fixed; background-attachment: fixed, fixed;
@ -459,6 +597,7 @@ input:focus:-ms-input-placeholder {
-o-background-size: auto, cover; -o-background-size: auto, cover;
color: var(--text); color: var(--text);
} }
/* File Transfer */ /* File Transfer */
#file-transfer-dialog .transfer-manager { #file-transfer-dialog .transfer-manager {
background: var(--modal-bg-color); background: var(--modal-bg-color);
@ -470,12 +609,15 @@ input:focus:-ms-input-placeholder {
-moz-background-size: auto, cover; -moz-background-size: auto, cover;
-o-background-size: auto, cover; -o-background-size: auto, cover;
} }
.transfer.error { .transfer.error {
background: rgba(244, 67, 54, 0.5) ; background: rgba(244, 67, 54, 0.5);
} }
.transfer-manager .header h2 { .transfer-manager .header h2 {
background-color: transparent ; background-color: transparent;
} }
.transfer .in-progress .progress { .transfer .in-progress .progress {
background-color: var(--modal-bg-color); background-color: var(--modal-bg-color);
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
@ -494,6 +636,7 @@ input:focus:-ms-input-placeholder {
border: 1px solid rgb(var(--accent-color)); border: 1px solid rgb(var(--accent-color));
background: rgb(var(--accent-color)); background: rgb(var(--accent-color));
} }
.related-objects .abbreviated-related-objects ul li label span { .related-objects .abbreviated-related-objects ul li label span {
color: var(--label-text-color) !important; color: var(--label-text-color) !important;
} }

196
CSS/themes/jellyfin/jellyfin-base.css

@ -1,18 +1,22 @@
/*TP CUSTOM */ /*TP CUSTOM */
h1,h2, h3, h4, h5, h6, h1,
h2,
h3,
h4,
h5,
h6,
.inputLabel { .inputLabel {
color: var(--text-hover); color: var(--text-hover);
} }
a:not(.emby-button), a:not(.emby-button),
.cardText.cardTextCentered.cardText-first > button, .cardText.cardTextCentered.cardText-first>button,
.emby-linkbutton>a { .emby-linkbutton>a {
color: var(--link-color) !important; color: var(--link-color) !important;
} }
a:hover:not(.emby-button), a:hover:not(.emby-button),
.cardText.cardTextCentered.cardText-first > button:hover, .cardText.cardTextCentered.cardText-first>button:hover,
.emby-linkbutton>a:hover { .emby-linkbutton>a:hover {
color: var(--link-color-hover) !important; color: var(--link-color-hover) !important;
} }
@ -25,7 +29,7 @@ html {
} }
.emby-collapsible-button { .emby-collapsible-button {
border-color: var(--line-background)!important border-color: var(--line-background) !important
} }
.skinHeader-withBackground.skinHeader-withfulldrawer { .skinHeader-withBackground.skinHeader-withfulldrawer {
@ -43,7 +47,8 @@ html {
-o-background-size: auto, cover; -o-background-size: auto, cover;
} }
.appfooter,.formDialogFooter:not(.formDialogFooter-clear) { .appfooter,
.formDialogFooter:not(.formDialogFooter-clear) {
background: var(--footer-background); background: var(--footer-background);
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
background-attachment: fixed, fixed; background-attachment: fixed, fixed;
@ -53,6 +58,7 @@ html {
-moz-background-size: auto, cover; -moz-background-size: auto, cover;
-o-background-size: auto, cover; -o-background-size: auto, cover;
} }
.formDialogHeader:not(.formDialogHeader-clear) { .formDialogHeader:not(.formDialogHeader-clear) {
background: var(--modal-header-color); background: var(--modal-header-color);
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
@ -77,7 +83,7 @@ html {
@supports (backdrop-filter: blur(1em)) or (-webkit-backdrop-filter:blur(1em)) { @supports (backdrop-filter: blur(1em)) or (-webkit-backdrop-filter:blur(1em)) {
.skinHeader-withBackground { .skinHeader-withBackground {
background:var(--header-blur-background); background: var(--header-blur-background);
-webkit-backdrop-filter: saturate(1.8) blur(1.5em); -webkit-backdrop-filter: saturate(1.8) blur(1.5em);
backdrop-filter: saturate(1.8) blur(1.5em) backdrop-filter: saturate(1.8) blur(1.5em)
} }
@ -90,21 +96,22 @@ html {
} }
.skinHeader.semiTransparent { .skinHeader.semiTransparent {
-webkit-backdrop-filter: none!important; -webkit-backdrop-filter: none !important;
backdrop-filter: none!important; backdrop-filter: none !important;
background-color: rgba(0,0,0,.3); background-color: rgba(0, 0, 0, .3);
background: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.6)),to(rgba(0,0,0,0))); background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .6)), to(rgba(0, 0, 0, 0)));
background: -webkit-linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,0)); background: -webkit-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
background: -o-linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,0)); background: -o-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
background: linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,0)); background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
-webkit-box-shadow: none!important; -webkit-box-shadow: none !important;
box-shadow: none!important; box-shadow: none !important;
border-bottom: 0; border-bottom: 0;
color: rgba(255,255,255,.87) color: rgba(255, 255, 255, .87)
} }
.backgroundContainer,html { .backgroundContainer,
html {
background: var(--theme-background); background: var(--theme-background);
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
background-attachment: fixed, fixed; background-attachment: fixed, fixed;
@ -116,12 +123,12 @@ html {
} }
.backgroundContainer.withBackdrop { .backgroundContainer.withBackdrop {
background-color: rgba(0,0,0,.83) background-color: rgba(0, 0, 0, .83)
} }
@media not all and (min-width: 50em) { @media not all and (min-width: 50em) {
.itemBackgroundContainer.withBackdrop { .itemBackgroundContainer.withBackdrop {
background :var(--theme-background); background: var(--theme-background);
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
background-attachment: fixed, fixed; background-attachment: fixed, fixed;
background-position: center center, center center; background-position: center center, center center;
@ -132,26 +139,28 @@ html {
} }
} }
.paper-icon-button-light-tv:focus,.paper-icon-button-light:active { .paper-icon-button-light-tv:focus,
.paper-icon-button-light:active {
color: rgb(var(--theme-primary-color)); color: rgb(var(--theme-primary-color));
background-color: var(--theme-icon-focus-background) background-color: var(--theme-icon-focus-background)
} }
@media(hover: hover) and (pointer:fine) { @media(hover: hover) and (pointer:fine) {
.paper-icon-button-light:focus { .paper-icon-button-light:focus {
color:rgb(var(--theme-primary-color)); color: rgb(var(--theme-primary-color));
background-color: var(--theme-icon-focus-background) background-color: var(--theme-icon-focus-background)
} }
} }
.fab,.raised { .fab,
.raised {
background: var(--button-background); background: var(--button-background);
color: var(--theme-text-color) color: var(--theme-text-color)
} }
.detailButton-icon { .detailButton-icon {
background: none !important; background: none !important;
border-color: rgba(255,255,255,.3) border-color: rgba(255, 255, 255, .3)
} }
.emby-select-withcolor { .emby-select-withcolor {
@ -164,33 +173,41 @@ html {
background: var(--button-background); background: var(--button-background);
color: var(--theme-text-color) color: var(--theme-text-color)
} }
.dialog-blur, .toast {
.dialog-blur,
.toast {
background: var(--button-background) !important; background: var(--button-background) !important;
color: var(--theme-text-color) !important; color: var(--theme-text-color) !important;
} }
@supports (backdrop-filter: blur(1em)) or (-webkit-backdrop-filter:blur(1em)) { @supports (backdrop-filter: blur(1em)) or (-webkit-backdrop-filter:blur(1em)) {
.detailButton-icon:not(.playstatebutton-icon-unplayed),.emby-select-withcolor.detailTrackSelect,.fab,.raised:not(.nobackdropfilter) {
background:rgba(85,85,85,.3); .detailButton-icon:not(.playstatebutton-icon-unplayed),
.emby-select-withcolor.detailTrackSelect,
.fab,
.raised:not(.nobackdropfilter) {
background: rgba(85, 85, 85, .3);
-webkit-backdrop-filter: saturate(1.8) blur(1.5em); -webkit-backdrop-filter: saturate(1.8) blur(1.5em);
backdrop-filter: saturate(1.8) blur(1.5em) backdrop-filter: saturate(1.8) blur(1.5em)
} }
.dialog-blur,.toast { .dialog-blur,
.toast {
color: #fff; color: #fff;
background: rgba(56,56,56,.76); background: rgba(56, 56, 56, .76);
-webkit-backdrop-filter: blur(2.5em) saturate(1.8); -webkit-backdrop-filter: blur(2.5em) saturate(1.8);
backdrop-filter: blur(2.5em) saturate(1.8); backdrop-filter: blur(2.5em) saturate(1.8);
-webkit-box-shadow: none!important; -webkit-box-shadow: none !important;
box-shadow: none!important box-shadow: none !important
} }
.toast-large { .toast-large {
color: rgba(255,255,255,.87) color: rgba(255, 255, 255, .87)
} }
} }
.fab:focus,.raised:focus { .fab:focus,
.raised:focus {
background: var(--button-color-hover); background: var(--button-color-hover);
color: var(--button-text-hover); color: var(--button-text-hover);
} }
@ -211,12 +228,12 @@ html {
} }
.emby-select-withcolor:focus { .emby-select-withcolor:focus {
border-color: rgb(var(--theme-primary-color))!important border-color: rgb(var(--theme-primary-color)) !important
} }
.emby-select-tv-withcolor:focus { .emby-select-tv-withcolor:focus {
background-color: rgb(var(--theme-primary-color))!important; background-color: rgb(var(--theme-primary-color)) !important;
color: var(--label-text-color)!important color: var(--label-text-color) !important
} }
.checkboxLabel { .checkboxLabel {
@ -227,7 +244,9 @@ html {
background-color: var(--theme-icon-focus-background) background-color: var(--theme-icon-focus-background)
} }
.inputLabelFocused,.selectLabelFocused,.textareaLabelFocused { .inputLabelFocused,
.selectLabelFocused,
.textareaLabelFocused {
color: rgb(var(--accent-color)) color: rgb(var(--accent-color))
} }
@ -243,7 +262,8 @@ html {
color: rgb(var(--accent-color)) color: rgb(var(--accent-color))
} }
.paperList,.visualCardBox { .paperList,
.visualCardBox {
background-color: var(--card-background) background-color: var(--card-background)
} }
@ -251,12 +271,16 @@ html {
border: var(--line-size) solid var(--line-background) border: var(--line-size) solid var(--line-background)
} }
.fieldDescription,.listItemBodyText-secondary,.secondaryText { .fieldDescription,
.listItemBodyText-secondary,
.secondaryText {
color: var(--theme-body-secondary-text-color) color: var(--theme-body-secondary-text-color)
} }
.cardText-secondary { .cardText-secondary {
color: var(--text) color: var(--text)
} }
.cardText-first { .cardText-first {
color: var(--theme-text-color-opaque) color: var(--theme-text-color-opaque)
} }
@ -267,7 +291,7 @@ html {
@media(hover: hover) and (pointer:fine) { @media(hover: hover) and (pointer:fine) {
.actionSheetMenuItem:hover { .actionSheetMenuItem:hover {
background-color:rgba(255,255,255,.2); background-color: rgba(255, 255, 255, .2);
color: var(--text-hover); color: var(--text-hover);
} }
} }
@ -276,8 +300,9 @@ html {
background: rgb(rgb(var(--theme-primary-color))); background: rgb(rgb(var(--theme-primary-color)));
color: var(--label-text-color); color: var(--label-text-color);
} }
.itemSelectionCount { .itemSelectionCount {
color: var(--label-text-color)!important; color: var(--label-text-color) !important;
} }
@ -296,20 +321,20 @@ html {
.alphaPickerButton-tv:focus { .alphaPickerButton-tv:focus {
background-color: rgb(var(--theme-primary-color)); background-color: rgb(var(--theme-primary-color));
color: var(--label-text-color)!important color: var(--label-text-color) !important
} }
.detailTableBodyRow-shaded:nth-child(even) { .detailTableBodyRow-shaded:nth-child(even) {
background: #1c1c1c; background: #1c1c1c;
background: rgba(30,30,30,.9) background: rgba(30, 30, 30, .9)
} }
.listItem-border { .listItem-border {
border-color: var(--line-background)!important border-color: var(--line-background) !important
} }
.listItem-focusscale:focus { .listItem-focusscale:focus {
background: rgba(54,54,54,.8) background: rgba(54, 54, 54, .8)
} }
.listItemIcon:not(.listItemIcon-transparent) { .listItemIcon:not(.listItemIcon-transparent) {
@ -333,13 +358,15 @@ html {
color: #cb272a color: #cb272a
} }
.emby-input,.emby-textarea { .emby-input,
.emby-textarea {
color: inherit; color: inherit;
background: rgb(0 0 0 / 25%); background: rgb(0 0 0 / 25%);
border: var(--line-size) solid rgba(255, 255, 255, 0.1) border: var(--line-size) solid rgba(255, 255, 255, 0.1)
} }
.emby-input:focus,.emby-textarea:focus { .emby-input:focus,
.emby-textarea:focus {
border-color: rgb(var(--theme-primary-color)) border-color: rgb(var(--theme-primary-color))
} }
@ -352,7 +379,9 @@ html {
background-color: rgb(var(--theme-primary-color)) !important; background-color: rgb(var(--theme-primary-color)) !important;
} }
.checkboxLabel::after,.checkboxIcon {
.checkboxLabel::after,
.checkboxIcon {
color: var(--label-text-color) !important; color: var(--label-text-color) !important;
} }
@ -384,16 +413,17 @@ html {
@media(hover: hover) and (pointer:fine) { @media(hover: hover) and (pointer:fine) {
.navMenuOption:hover { .navMenuOption:hover {
background:#303030 background: #303030
} }
} }
.navMenuOption-selected { .navMenuOption-selected {
background-color: var(--theme-icon-focus-background)!important; background-color: var(--theme-icon-focus-background) !important;
color: rgb(var(--accent-color)) color: rgb(var(--accent-color))
} }
.emby-button-focusscale:focus,.emby-button-focusscale:focus .detailButton-icon { .emby-button-focusscale:focus,
.emby-button-focusscale:focus .detailButton-icon {
background: rgb(var(--theme-primary-color)); background: rgb(var(--theme-primary-color));
color: var(--label-text-color) color: var(--label-text-color)
} }
@ -419,7 +449,9 @@ html {
outline-color: rgb(var(--theme-primary-color)) outline-color: rgb(var(--theme-primary-color))
} }
.channelCell,.guide-headerTimeslots,.timeslotHeaders { .channelCell,
.guide-headerTimeslots,
.timeslotHeaders {
background: var(--theme-background); background: var(--theme-background);
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
background-attachment: fixed, fixed; background-attachment: fixed, fixed;
@ -432,7 +464,7 @@ html {
@media (pointer: coarse) { @media (pointer: coarse) {
.channelCell-mobilefocus { .channelCell-mobilefocus {
background:var(--theme-background)!important; background: var(--theme-background) !important;
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
background-attachment: fixed, fixed; background-attachment: fixed, fixed;
background-position: center center, center center; background-position: center center, center center;
@ -444,7 +476,7 @@ html {
} }
.channelCell-mobilefocus:not(:focus-visible) { .channelCell-mobilefocus:not(:focus-visible) {
background: var(--theme-background)!important; background: var(--theme-background) !important;
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
background-attachment: fixed, fixed; background-attachment: fixed, fixed;
background-position: center center, center center; background-position: center center, center center;
@ -455,7 +487,7 @@ html {
} }
.channelCell-mobilefocus:not(:-moz-focusring) { .channelCell-mobilefocus:not(:-moz-focusring) {
background: var(--theme-background)!important; background: var(--theme-background) !important;
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
background-attachment: fixed, fixed; background-attachment: fixed, fixed;
background-position: center center, center center; background-position: center center, center center;
@ -465,8 +497,10 @@ html {
-o-background-size: auto, cover; -o-background-size: auto, cover;
} }
.channelCell,.epgRow,.programCell { .channelCell,
border-color: rgba(255,255,255,.05) .epgRow,
.programCell {
border-color: rgba(255, 255, 255, .05)
} }
.guide-currentTimeIndicatorDot { .guide-currentTimeIndicatorDot {
@ -482,22 +516,23 @@ html {
} }
.programCell-sports { .programCell-sports {
background: #3949ab!important background: #3949ab !important
} }
.programCell-movie { .programCell-movie {
background: #5e35b1!important background: #5e35b1 !important
} }
.programCell-kids { .programCell-kids {
background: #039be5!important background: #039be5 !important
} }
.programCell-news { .programCell-news {
background: #43a047!important background: #43a047 !important
} }
.channelCell:focus,.programCell:focus { .channelCell:focus,
.programCell:focus {
background-color: rgb(var(--theme-primary-color)); background-color: rgb(var(--theme-primary-color));
color: var(--label-text-color) color: var(--label-text-color)
} }
@ -515,7 +550,7 @@ html {
} }
.ratingbutton-icon-withrating { .ratingbutton-icon-withrating {
color: #c33!important color: #c33 !important
} }
.downloadbutton-icon-on { .downloadbutton-icon-on {
@ -527,7 +562,7 @@ html {
} }
.playstatebutton-icon-played { .playstatebutton-icon-played {
color: #c33!important color: #c33 !important
} }
.repeatButton-active { .repeatButton-active {
@ -573,7 +608,8 @@ html {
.cardOverlayButtonIcon { .cardOverlayButtonIcon {
background-color: rgb(var(--theme-primary-color)) background-color: rgb(var(--theme-primary-color))
} }
.cardScalable.cardPadder-portrait > div > button > i{
.cardScalable.cardPadder-portrait>div>button>i {
color: var(--label-text-color) !important; color: var(--label-text-color) !important;
} }
@ -619,11 +655,11 @@ html {
.scrollbuttoncontainer { .scrollbuttoncontainer {
color: #fff; color: #fff;
background: rgba(20,20,20,.5) background: rgba(20, 20, 20, .5)
} }
.recordingIcon-active { .recordingIcon-active {
color: #c33!important color: #c33 !important
} }
.searchTabsContainer { .searchTabsContainer {
@ -631,16 +667,16 @@ html {
} }
.emby-search-tab-button.emby-tab-button-active { .emby-search-tab-button.emby-tab-button-active {
background: rgb(var(--accent-color))!important background: rgb(var(--accent-color)) !important
} }
.textActionButton.dragging { .textActionButton.dragging {
background: var(--button-background)!important background: var(--button-background) !important
} }
.dragging-over.full-drop-target { .dragging-over.full-drop-target {
background: rgb(var(--theme-primary-color))!important; background: rgb(var(--theme-primary-color)) !important;
color: var(--label-text-color)!important color: var(--label-text-color) !important
} }
.dragging-over-top:before { .dragging-over-top:before {
@ -658,24 +694,24 @@ html {
background: 0 !important; background: 0 !important;
color: var(--accent-color-hover); color: var(--accent-color-hover);
} }
} }
.mainDrawer { .mainDrawer {
background: var(--header-blur-background); background: var(--header-blur-background);
-webkit-backdrop-filter: saturate(1.8) blur(1.5em); -webkit-backdrop-filter: saturate(1.8) blur(1.5em);
backdrop-filter: saturate(1.8) blur(1.5em); backdrop-filter: saturate(1.8) blur(1.5em);
} }
.jstree-default .jstree-clicked { .jstree-default .jstree-clicked {
background: rgb(var(--accent-color)); background: rgb(var(--accent-color));
-webkit-border-radius: 2px; -webkit-border-radius: 2px;
border-radius: 2px; border-radius: 2px;
color: var(--label-text-color) !important; color: var(--label-text-color) !important;
} }
.cardImageIcon { .cardImageIcon {
color: #fff; color: #fff;
} }
.dialog .inputLabelFocused, .dialog .inputLabelFocused,
.selectLabelFocused, .selectLabelFocused,
@ -762,16 +798,16 @@ html {
color: var(--label-text-color) !important; color: var(--label-text-color) !important;
} }
.emby-checkbox:checked + span + .checkboxOutline { .emby-checkbox:checked+span+.checkboxOutline {
border-color: rgb(var(--theme-accent-text-color)); border-color: rgb(var(--theme-accent-text-color));
} }
.emby-checkbox:checked + span + .checkboxOutline, .emby-checkbox:checked+span+.checkboxOutline,
.itemProgressBarForeground { .itemProgressBarForeground {
background-color: rgb(var(--theme-accent-text-color)); background-color: rgb(var(--theme-accent-text-color));
} }
.emby-checkbox:focus:not(:checked) + span + .checkboxOutline { .emby-checkbox:focus:not(:checked)+span+.checkboxOutline {
border-color: rgb(var(--theme-accent-text-color)); border-color: rgb(var(--theme-accent-text-color));
} }

37
CSS/themes/librespeed/librespeed-base.css

@ -1,4 +1,3 @@
/* dP dP dP */ /* dP dP dP */
/* 88 88 88 */ /* 88 88 88 */
/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ /* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */
@ -11,7 +10,8 @@
/* Made by @gilbN */ /* Made by @gilbN */
/* https://github.com/gilbN/theme.park */ /* https://github.com/gilbN/theme.park */
html, body { html,
body {
background: var(--main-bg-color) !important; background: var(--main-bg-color) !important;
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
background-attachment: fixed, fixed; background-attachment: fixed, fixed;
@ -22,9 +22,17 @@ html, body {
-o-background-size: auto, cover; -o-background-size: auto, cover;
color: var(--text) !important; color: var(--text) !important;
} }
h1,h2,h3,h4,h5,h6, label {
h1,
h2,
h3,
h4,
h5,
h6,
label {
color: var(--text-hover); color: var(--text-hover);
} }
div.meterText:empty:before { div.meterText:empty:before {
color: var(--text-hover) !important; color: var(--text-hover) !important;
} }
@ -32,39 +40,51 @@ div.meterText:empty:before {
#dlText { #dlText {
color: #F44336; color: #F44336;
} }
#ulText { #ulText {
color: #4CAF50; color: #4CAF50;
} }
#pingText, #jitText {
#pingText,
#jitText {
color: #2cabe3; color: #2cabe3;
} }
#startStopBtn { #startStopBtn {
color: var(--button-text); color: var(--button-text);
background: var(--button-color); background: var(--button-color);
border: 0.15em solid var(--button-color); border: 0.15em solid var(--button-color);
} }
#startStopBtn:hover { #startStopBtn:hover {
border: 0.15em solid var(--button-color-hover); border: 0.15em solid var(--button-color-hover);
background: var(--button-color-hover); background: var(--button-color-hover);
} }
#startStopBtn.running { #startStopBtn.running {
background: #FF3030 !important; background: #FF3030 !important;
border-color: #FF6060; border-color: #FF6060;
color: #FFFFFF; color: #FFFFFF;
} }
#startStopBtn.running:hover { #startStopBtn.running:hover {
background: #FF3030; background: #FF3030;
border-color: #FF6060; border-color: #FF6060;
color: #FFFFFF; color: #FFFFFF;
} }
a,a:-webkit-any-link {
a,
a:-webkit-any-link {
color: var(--link-color); color: var(--link-color);
} }
a:hover,a:-webkit-any-link:hover {
a:hover,
a:-webkit-any-link:hover {
color: var(--link-color-hover); color: var(--link-color-hover);
} }
#ip,.unit { #ip,
.unit {
color: rgb(var(--accent-color)); color: rgb(var(--accent-color));
} }
@ -78,8 +98,9 @@ a:hover,a:-webkit-any-link:hover {
-moz-background-size: auto, cover; -moz-background-size: auto, cover;
-o-background-size: auto, cover; -o-background-size: auto, cover;
} }
input { input {
font-family: "Roboto",sans-serif; font-family: "Roboto", sans-serif;
color: white; color: white;
background-color: rgba(0, 0, 0, 0.25) !important; background-color: rgba(0, 0, 0, 0.25) !important;
-webkit-rtl-ordering: logical; -webkit-rtl-ordering: logical;

15
CSS/themes/lidarr/lidarr-base.css

@ -180,8 +180,8 @@ a:hover {
} }
[class*="CheckInput-primaryIsChecked-"] { [class*="CheckInput-primaryIsChecked-"] {
border-color: rgb(var(--accent-color))!important; border-color: rgb(var(--accent-color)) !important;
background-color: rgb(var(--accent-color))!important; background-color: rgb(var(--accent-color)) !important;
color: var(--label-text-color) !important; color: var(--label-text-color) !important;
} }
@ -289,7 +289,7 @@ a:hover {
[class*="PageSidebarItem-isActiveLink-"], [class*="PageSidebarItem-isActiveLink-"],
[class*="PageSidebarItem-isActiveLink-"]:hover, [class*="PageSidebarItem-isActiveLink-"]:hover,
[class*="PageSidebarItem-link-"]:focus { [class*="PageSidebarItem-link-"]:focus {
color: rgb(var(--accent-color))!important; color: rgb(var(--accent-color)) !important;
} }
[class*="PageSidebarItem-isActiveParentLink-"] { [class*="PageSidebarItem-isActiveParentLink-"] {
@ -316,7 +316,7 @@ a:hover {
/* LIBRARY PAGE */ /* LIBRARY PAGE */
/* LIDARR SPECIFIC */ /* LIDARR SPECIFIC */
[class*="ArtistIndexPoster-controls-"] { [class*="ArtistIndexPoster-controls-"] {
background-color: rgb(var(--accent-color))!important; background-color: rgb(var(--accent-color)) !important;
} }
/* OVERVIEW PAGE */ /* OVERVIEW PAGE */
@ -690,6 +690,7 @@ a:hover {
input::-webkit-input-placeholder { input::-webkit-input-placeholder {
color: var(--text); color: var(--text);
} }
input:focus::-webkit-input-placeholder { input:focus::-webkit-input-placeholder {
color: var(--text-hover); color: var(--text-hover);
} }
@ -698,6 +699,7 @@ input:focus::-webkit-input-placeholder {
input:-moz-placeholder { input:-moz-placeholder {
color: var(--text); color: var(--text);
} }
input:focus:-moz-placeholder { input:focus:-moz-placeholder {
color: var(--text-hover); color: var(--text-hover);
} }
@ -706,6 +708,7 @@ input:focus:-moz-placeholder {
input::-moz-placeholder { input::-moz-placeholder {
color: var(--text); color: var(--text);
} }
input:focus::-moz-placeholder { input:focus::-moz-placeholder {
color: var(--text-hover); color: var(--text-hover);
} }
@ -714,6 +717,7 @@ input:focus::-moz-placeholder {
input:-ms-input-placeholder { input:-ms-input-placeholder {
color: var(--text); color: var(--text);
} }
input:focus:-ms-input-placeholder { input:focus:-ms-input-placeholder {
color: var(--text-hover); color: var(--text-hover);
} }
@ -1053,12 +1057,14 @@ input[type=password] {
background-color: var(--button-color); background-color: var(--button-color);
cursor: pointer; cursor: pointer;
} }
.button:hover { .button:hover {
border-color: var(--button-color-hover); border-color: var(--button-color-hover);
background-color: var(--button-color-hover); background-color: var(--button-color-hover);
color: #fff; color: #fff;
text-decoration: none; text-decoration: none;
} }
.form-input:focus { .form-input:focus {
outline: 0; outline: 0;
border-color: #fff; border-color: #fff;
@ -1122,4 +1128,3 @@ input[type=password] {
color: #FFF; color: #FFF;
background-color: #f05050; background-color: #f05050;
} }

279
CSS/themes/logarr/logarr-base.css

@ -1,4 +1,3 @@
/* dP dP dP */ /* dP dP dP */
/* 88 88 88 */ /* 88 88 88 */
/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ /* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */
@ -12,7 +11,7 @@
/* https://github.com/gilbN/theme.park */ /* https://github.com/gilbN/theme.park */
body { body {
font-family: Open Sans Bold,Helvetica Neue,Helvetica,Arial,sans-serif; font-family: Open Sans Bold, Helvetica Neue, Helvetica, Arial, sans-serif;
background: var(--main-bg-color) !important; background: var(--main-bg-color) !important;
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
background-attachment: fixed, fixed; background-attachment: fixed, fixed;
@ -21,18 +20,19 @@ body {
-webkit-background-size: auto, cover; -webkit-background-size: auto, cover;
-moz-background-size: auto, cover; -moz-background-size: auto, cover;
-o-background-size: auto, cover; -o-background-size: auto, cover;
background-color: var(--main-bg-color)!important; background-color: var(--main-bg-color) !important;
color:#FFFFFF !important; color: #FFFFFF !important;
} }
/* Scrollbar */ /* Scrollbar */
@media only screen and (min-width: 768px) { @media only screen and (min-width: 768px) {
html { html {
height: 100%; height: 100%;
width: 100%; width: 100%;
overflow: auto; overflow: auto;
} }
body { body {
overflow-y: auto; overflow-y: auto;
background: var(--main-bg-color); background: var(--main-bg-color);
@ -45,48 +45,58 @@ body {
-o-background-size: auto, cover; -o-background-size: auto, cover;
} }
} }
.expand::-webkit-scrollbar-track {
.expand::-webkit-scrollbar-track {
background-color: transparent !important; background-color: transparent !important;
-webkit-box-shadow: none !important; -webkit-box-shadow: none !important;
box-shadow: none !important; box-shadow: none !important;
} }
.expand::-webkit-scrollbar {
.expand::-webkit-scrollbar {
background-color: transparent !important; background-color: transparent !important;
} }
.expand::-webkit-scrollbar-thumb {
background-color: hsla(0,0%,100%,.2) !important; .expand::-webkit-scrollbar-thumb {
background-color: hsla(0, 0%, 100%, .2) !important;
-webkit-box-shadow: none !important; -webkit-box-shadow: none !important;
box-shadow: none !important; box-shadow: none !important;
} }
.expand::-webkit-scrollbar-thumb:hover {
background-color: hsla(0,0%,100%,.5) !important; .expand::-webkit-scrollbar-thumb:hover {
} background-color: hsla(0, 0%, 100%, .5) !important;
}
body::-webkit-scrollbar-track { body::-webkit-scrollbar-track {
background-color: transparent !important; background-color: transparent !important;
-webkit-box-shadow: none !important; -webkit-box-shadow: none !important;
box-shadow: none !important; box-shadow: none !important;
} }
body::-webkit-scrollbar {
body::-webkit-scrollbar {
background-color: transparent !important; background-color: transparent !important;
} }
body::-webkit-scrollbar-thumb {
background-color: hsla(0,0%,100%,.2) !important; body::-webkit-scrollbar-thumb {
background-color: hsla(0, 0%, 100%, .2) !important;
-webkit-box-shadow: none !important; -webkit-box-shadow: none !important;
box-shadow: none !important; box-shadow: none !important;
} }
body::-webkit-scrollbar-thumb:hover {
background-color: hsla(0,0%,100%,.5) !important; body::-webkit-scrollbar-thumb:hover {
} background-color: hsla(0, 0%, 100%, .5) !important;
}
.flex-child { .flex-child {
border-radius: 0px; border-radius: 0px;
background-color: rgba(255, 255, 255, 0.08); background-color: rgba(255, 255, 255, 0.08);
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.15); box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.15);
} }
#includedContent { #includedContent {
background-color: transparent; background-color: transparent;
background: transparent; background: transparent;
} }
body { body {
opacity: 1; opacity: 1;
transition: 1s opacity; transition: 1s opacity;
@ -96,25 +106,38 @@ body {
color: #FFFFFF; color: #FFFFFF;
padding: 10px 10px 0; padding: 10px 10px 0;
} }
.btn { .btn {
font-weight: 600 !important; font-weight: 600 !important;
} }
body.fade-out { body.fade-out {
opacity: 0; opacity: 0;
transition: none; transition: none;
} }
.left, .right, .category-filter-item, .nav-item, .filesize, .path {
.left,
.right,
.category-filter-item,
.nav-item,
.filesize,
.path {
color: #ffffff; color: #ffffff;
} }
#username:hover, #password:hover {
#username:hover,
#password:hover {
text-shadow: 0 0 1rem transparent; text-shadow: 0 0 1rem transparent;
} }
#categoryFilter, #auto-update {
#categoryFilter,
#auto-update {
color: white !important; color: white !important;
background-color: transparent !important; background-color: transparent !important;
box-shadow: none; box-shadow: none;
border-radius: 0px; border-radius: 0px;
} }
#markform { #markform {
background: var(--main-bg-color) !important; background: var(--main-bg-color) !important;
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
@ -126,15 +149,19 @@ body.fade-out {
-o-background-size: auto, cover; -o-background-size: auto, cover;
} }
.slide { .slide {
border: 1px solid transparent; border: 1px solid transparent;
} }
.expandtoggle { .expandtoggle {
background-color: transparent !important; background-color: transparent !important;
} }
.expandtoggle:hover { .expandtoggle:hover {
background-color: rgba(255, 255, 255, 0.08) !important; background-color: rgba(255, 255, 255, 0.08) !important;
} }
.expandtoggle:checked~.expandtoggle::before { .expandtoggle:checked~.expandtoggle::before {
content: ""; content: "";
background: url(https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/logarr/increase.png) no-repeat; background: url(https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/logarr/increase.png) no-repeat;
@ -144,6 +171,7 @@ body.fade-out {
height: 2em; height: 2em;
cursor: row-resize; cursor: row-resize;
} }
.expandtoggle::before { .expandtoggle::before {
background: url(https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/logarr/decrease.png) no-repeat; background: url(https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/logarr/decrease.png) no-repeat;
background-size: 2em; background-size: 2em;
@ -156,6 +184,7 @@ body.fade-out {
transition: .5s; transition: .5s;
cursor: pointer; cursor: pointer;
} }
.expand { .expand {
height: 43rem; height: 43rem;
width: auto; width: auto;
@ -166,93 +195,125 @@ body.fade-out {
word-wrap: break-word; word-wrap: break-word;
padding: 0 10px 0 10px; padding: 0 10px 0 10px;
} }
.header-brand, .logheader {
.header-brand,
.logheader {
text-shadow: none !important; text-shadow: none !important;
} }
/* Settings */ /* Settings */
/* Text Color */ /* Text Color */
.alpaca-control-label, .alpaca-control.radio { .alpaca-control-label,
.alpaca-control.radio {
color: white !important; color: white !important;
} }
.alpaca-form-buttons-container { .alpaca-form-buttons-container {
background-color: transparent !important; background-color: transparent !important;
} }
.Rtable-cell { .Rtable-cell {
color: white !important; color: white !important;
} }
#colorkey { #colorkey {
color: white !important; color: white !important;
} }
.settingstitle { .settingstitle {
text-shadow: none !important; text-shadow: none !important;
} }
#reginfo { #reginfo {
color: white !important; color: white !important;
} }
#infodata { #infodata {
background-color: transparent !important; background-color: transparent !important;
box-shadow: none !important; box-shadow: none !important;
} }
.input_icon { .input_icon {
color: var(--button-color) !important; color: var(--button-color) !important;
} }
.input_icon:hover { .input_icon:hover {
color: var(--button-color-hover) !important; color: var(--button-color-hover) !important;
} }
.input:hover, input.form-control:hover, select.form-control:hover {
.input:hover,
input.form-control:hover,
select.form-control:hover {
border: .2rem solid transparent; border: .2rem solid transparent;
} }
.input:focus, input.form-control:focus, select.form-control:focus {
.input:focus,
input.form-control:focus,
select.form-control:focus {
border: .2rem solid transparent; border: .2rem solid transparent;
} }
input:invalid { input:invalid {
border: .2rem solid transparent; border: .2rem solid transparent;
} }
input:valid { input:valid {
border: .2rem solid transparent; border: .2rem solid transparent;
} }
/* Sidebar */ /* Sidebar */
#sidebar-wrapper { #sidebar-wrapper {
box-shadow: none !important; box-shadow: none !important;
background-color: rgba(0, 0, 0, 0.07); background-color: rgba(0, 0, 0, 0.07);
} }
.sidebar-nav li:hover:before { .sidebar-nav li:hover:before {
-webkit-transition: none !important; -webkit-transition: none !important;
transition: none !important; transition: none !important;
background-color: rgba(0, 0, 0, 0.07); background-color: rgba(0, 0, 0, 0.07);
} }
.sidebar-nav li:before { .sidebar-nav li:before {
background-color: rgba(0, 0, 0, 0.07); background-color: rgba(0, 0, 0, 0.07);
transition: none !important; transition: none !important;
-webkit-transition: none !important; -webkit-transition: none !important;
} }
.sidebar-nav li:first-child a {
.sidebar-nav li:first-child a {
background-color: rgba(0, 0, 0, 0.07); background-color: rgba(0, 0, 0, 0.07);
} }
.sidebar-nav li:nth-child(2):before {
.sidebar-nav li:nth-child(2):before {
background-color: rgba(0, 0, 0, 0.07); background-color: rgba(0, 0, 0, 0.07);
} }
.sidebar-nav li:nth-child(3):before {
.sidebar-nav li:nth-child(3):before {
background-color: rgba(0, 0, 0, 0.07); background-color: rgba(0, 0, 0, 0.07);
} }
.sidebar-nav li:nth-child(4):before {
.sidebar-nav li:nth-child(4):before {
background-color: rgba(0, 0, 0, 0.07); background-color: rgba(0, 0, 0, 0.07);
} }
.sidebar-nav li:nth-child(5):before {
.sidebar-nav li:nth-child(5):before {
background-color: rgba(0, 0, 0, 0.07); background-color: rgba(0, 0, 0, 0.07);
} }
.sidebar-nav li:nth-child(6):before {
.sidebar-nav li:nth-child(6):before {
background-color: rgba(0, 0, 0, 0.07); background-color: rgba(0, 0, 0, 0.07);
} }
.sidebar-nav li:nth-child(7):before {
.sidebar-nav li:nth-child(7):before {
background-color: rgba(0, 0, 0, 0.07); background-color: rgba(0, 0, 0, 0.07);
} }
.sidebar-nav li:nth-child(8):before {
.sidebar-nav li:nth-child(8):before {
background-color: rgba(0, 0, 0, 0.07); background-color: rgba(0, 0, 0, 0.07);
} }
.sidebar-nav li:nth-child(9):before {
.sidebar-nav li:nth-child(9):before {
background-color: rgba(0, 0, 0, 0.07); background-color: rgba(0, 0, 0, 0.07);
} }
#modalloading { #modalloading {
background: var(--main-bg-color); background: var(--main-bg-color);
@ -266,8 +327,10 @@ input:valid {
color: white !important; color: white !important;
border: 1px solid transparent !important; border: 1px solid transparent !important;
box-shadow: 0.5rem 0.5rem 1rem rgb(15, 15, 15, 0.45) !important; box-shadow: 0.5rem 0.5rem 1rem rgb(15, 15, 15, 0.45) !important;
} }
.modaltextloading, .modalloadingspinner {
.modaltextloading,
.modalloadingspinner {
color: #FFF !important; color: #FFF !important;
} }
@ -275,87 +338,117 @@ input:valid {
max-width: 100% !important; max-width: 100% !important;
padding-right: 2rem !important; padding-right: 2rem !important;
} }
#stats { #stats {
background-color: rgba(0,0,0,.15) !important; background-color: rgba(0, 0, 0, .15) !important;
padding-left: .0rem !important; padding-left: .0rem !important;
padding-right: 1.11rem !important; padding-right: 1.11rem !important;
box-shadow: none; box-shadow: none;
} }
#hd { #hd {
padding-left: 0.8rem !important; padding-left: 0.8rem !important;
} }
.double-val-label>span.success { .double-val-label>span.success {
background-color: #28a745 !important; background-color: #28a745 !important;
} }
.servicetile:hover, .servicetile:focus {
.servicetile:hover,
.servicetile:focus {
text-shadow: 0 0 20px #000; text-shadow: 0 0 20px #000;
} }
#servicetitle:hover, #servicetitle:focus {
#servicetitle:hover,
#servicetitle:focus {
text-shadow: 0 0 20px #000; text-shadow: 0 0 20px #000;
} }
#servicetitle { #servicetitle {
color: #fff !important; color: #fff !important;
} }
.btnoffline, .btnunknown, .btnonline {
.btnoffline,
.btnunknown,
.btnonline {
box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.9) !important; box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.9) !important;
-webkit-box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.9) !important; -webkit-box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.9) !important;
} }
.btnonline { .btnonline {
background-color: #28a745 !important; background-color: #28a745 !important;
} }
.btn { .btn {
background-color: var(--button-color) !important; background-color: var(--button-color) !important;
border: none !important; border: none !important;
} }
.btn:hover { .btn:hover {
background-color: var(--button-color-hover) !important; background-color: var(--button-color-hover) !important;
border: none !important; border: none !important;
} }
.btn-primary,.btn-primary:hover {
.btn-primary,
.btn-primary:hover {
border-color: transparent; border-color: transparent;
} }
.btn-group>.btn-group:not(:first-child)>.btn, .btn-group>.btn:not(:first-child) {
.btn-group>.btn-group:not(:first-child)>.btn,
.btn-group>.btn:not(:first-child) {
color: white !important; color: white !important;
} }
.btn-group>.btn:first-child { .btn-group>.btn:first-child {
color: white !important; color: white !important;
} }
#time { #time {
background-color: rgba(0,0,0,.15) !important; background-color: rgba(0, 0, 0, .15) !important;
color: #fff !important; color: #fff !important;
box-shadow: none; box-shadow: none;
} }
#slidertable { #slidertable {
background-color: rgba(0,0,0,.15) !important; background-color: rgba(0, 0, 0, .15) !important;
box-shadow: none; box-shadow: none;
} }
#textslider { #textslider {
color: #fff !important; color: #fff !important;
} }
.dtg { .dtg {
color: #fff !important; color: #fff !important;
} }
.datemin { .datemin {
color: #fff !important; color: #fff !important;
} }
#center { #center {
background-color: rgba(0,0,0,.0) !important; background-color: rgba(0, 0, 0, .0) !important;
box-shadow: 0px 0px 0px 0px #ffffff00, 0px 0px 0px 0px #ffffff00, 10px 0px 10px 0px #ffffff00, -10px 0px 10px 2px #ffffff00 !important; box-shadow: 0px 0px 0px 0px #ffffff00, 0px 0px 0px 0px #ffffff00, 10px 0px 10px 0px #ffffff00, -10px 0px 10px 2px #ffffff00 !important;
} }
/*Service tile*/ /*Service tile*/
.col-lg-4 { .col-lg-4 {
background-color: rgba(0,0,0,.15) !important; background-color: rgba(0, 0, 0, .15) !important;
margin: 1rem .1rem 1.5rem 1rem !important; margin: 1rem .1rem 1.5rem 1rem !important;
width: 9rem !important; width: 9rem !important;
box-shadow: none; box-shadow: none;
} }
.col-lg-4:hover { .col-lg-4:hover {
background-color: hsla(0,0%,100%,.08) !important; background-color: hsla(0, 0%, 100%, .08) !important;
margin: 1rem .1rem 1.5rem 1rem !important; margin: 1rem .1rem 1.5rem 1rem !important;
width: 9rem !important; width: 9rem !important;
box-shadow: none; box-shadow: none;
} }
.servicetile, .servicetile:hover, .servicetile:focus {
.servicetile,
.servicetile:hover,
.servicetile:focus {
color: #ffffff; color: #ffffff;
text-shadow: none !important; text-shadow: none !important;
text-decoration: none !important; text-decoration: none !important;
@ -367,6 +460,7 @@ box-shadow: none;
-o-transition: none !important; -o-transition: none !important;
transition: none !important; transition: none !important;
} }
.servicetile { .servicetile {
color: #ffffff; color: #ffffff;
text-shadow: none !important; text-shadow: none !important;
@ -379,53 +473,68 @@ box-shadow: none;
-o-transition: none !important; -o-transition: none !important;
transition: none !important; transition: none !important;
} }
#servicetitle:hover, #servicetitle:focus {
#servicetitle:hover,
#servicetitle:focus {
text-shadow: none !important; text-shadow: none !important;
font-weight: inherit !important; font-weight: inherit !important;
} }
#clock { #clock {
background-color: rgba(0,0,0,.15) !important; background-color: rgba(0, 0, 0, .15) !important;
color: #fff !important; color: #fff !important;
box-shadow: none; box-shadow: none;
} }
.date { .date {
color: #fff !important; color: #fff !important;
} }
#summary { #summary {
background-color: #e84242 !important; background-color: #e84242 !important;
border-radius: 23px 22px 22px 23px/23px 23px 22px 22px; border-radius: 23px 22px 22px 23px/23px 23px 22px 22px;
box-shadow: 0px 2px 5px rgb(15, 15, 15) !important; box-shadow: 0px 2px 5px rgb(15, 15, 15) !important;
} }
.pace, .pace-progress {
background: rgba(0,0,0,.15) !important; .pace,
.pace-progress {
background: rgba(0, 0, 0, .15) !important;
} }
.pace, .pace-progress-inner {
box-shadow: 0 0 10px rgba(0,0,0,.15), 0 0 5px rgba(0,0,0,.15) !important; .pace,
.pace-progress-inner {
box-shadow: 0 0 10px rgba(0, 0, 0, .15), 0 0 5px rgba(0, 0, 0, .15) !important;
} }
.pace .pace-activity { .pace .pace-activity {
border-top-color: #FFF !important; border-top-color: #FFF !important;
border-left-color: #FFF !important; border-left-color: #FFF !important;
} }
.footer { .footer {
color: white !important; color: white !important;
} }
.footer:hover { .footer:hover {
text-shadow: 0 0 15px transparent !important; text-shadow: 0 0 15px transparent !important;
} }
#footer { #footer {
color: transparent !important; color: transparent !important;
} }
.navbar-brand { .navbar-brand {
text-shadow: 0 0 15px #000000 !important; text-shadow: 0 0 15px #000000 !important;
} }
/* ButtonShadow */ /* ButtonShadow */
.btnoffline, .btnunknown, .btnonline { .btnoffline,
.btnunknown,
.btnonline {
box-shadow: none !important; box-shadow: none !important;
-webkit-box-shadow: none !important; -webkit-box-shadow: none !important;
} }
.logrollmodal { .logrollmodal {
background: var(--modal-bg-color) !important; background: var(--modal-bg-color) !important;
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
@ -438,17 +547,22 @@ box-shadow: none;
border: 1px solid transparent !important; border: 1px solid transparent !important;
} }
.modalimgpath, .modaltext, #uploadbutton { .modalimgpath,
.modaltext,
#uploadbutton {
color: #fff !important; color: #fff !important;
} }
.file-upload { .file-upload {
background-color: var(--button-color) !important; background-color: var(--button-color) !important;
color: white !important; color: white !important;
} }
.file-upload:hover { .file-upload:hover {
background-color: var(--button-color-hover) !important; background-color: var(--button-color-hover) !important;
color: white !important; color: white !important;
} }
@media only screen and (max-width: 775px) { @media only screen and (max-width: 775px) {
#slidertable { #slidertable {
display: none !important; display: none !important;
@ -458,10 +572,11 @@ box-shadow: none;
display: none !important; display: none !important;
} }
} }
@media only screen and (max-width: 768px) { @media only screen and (max-width: 768px) {
#dateRight { #dateRight {
background-color: rgba(0,0,0,.15) !important; background-color: rgba(0, 0, 0, .15) !important;
color: #fff !important; color: #fff !important;
box-shadow: none; box-shadow: none;
} }
} }

225
CSS/themes/monitorr/monitorr-base.css

@ -1,4 +1,3 @@
/* dP dP dP */ /* dP dP dP */
/* 88 88 88 */ /* 88 88 88 */
/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ /* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */
@ -26,126 +25,156 @@ body {
-webkit-background-size: auto, cover; -webkit-background-size: auto, cover;
-moz-background-size: auto, cover; -moz-background-size: auto, cover;
-o-background-size: auto, cover; -o-background-size: auto, cover;
color:#FFFFFF !important; color: #FFFFFF !important;
} }
/* Scrollbar */
body::-webkit-scrollbar-track { /* Scrollbar */
body::-webkit-scrollbar-track {
background-color: transparent !important; background-color: transparent !important;
-webkit-box-shadow: none !important; -webkit-box-shadow: none !important;
box-shadow: none !important; box-shadow: none !important;
} }
body::-webkit-scrollbar {
body::-webkit-scrollbar {
background-color: transparent !important; background-color: transparent !important;
} }
body::-webkit-scrollbar-thumb {
background-color: hsla(0,0%,100%,.2) !important; body::-webkit-scrollbar-thumb {
background-color: hsla(0, 0%, 100%, .2) !important;
-webkit-box-shadow: none !important; -webkit-box-shadow: none !important;
box-shadow: none !important; box-shadow: none !important;
} }
body::-webkit-scrollbar-thumb:hover {
background-color: hsla(0,0%,100%,.5) !important; body::-webkit-scrollbar-thumb:hover {
} background-color: hsla(0, 0%, 100%, .5) !important;
}
#myModal3::-webkit-scrollbar-track { #myModal3::-webkit-scrollbar-track {
background-color: transparent !important; background-color: transparent !important;
-webkit-box-shadow: none !important; -webkit-box-shadow: none !important;
box-shadow: none !important; box-shadow: none !important;
} }
#myModal3::-webkit-scrollbar {
#myModal3::-webkit-scrollbar {
background-color: transparent !important; background-color: transparent !important;
} }
#myModal3::-webkit-scrollbar-thumb {
background-color: hsla(0,0%,100%,.2) !important; #myModal3::-webkit-scrollbar-thumb {
background-color: hsla(0, 0%, 100%, .2) !important;
-webkit-box-shadow: none !important; -webkit-box-shadow: none !important;
box-shadow: none !important; box-shadow: none !important;
} }
#myModal3::-webkit-scrollbar-thumb:hover {
background-color: hsla(0,0%,100%,.5) !important; #myModal3::-webkit-scrollbar-thumb:hover {
} background-color: hsla(0, 0%, 100%, .5) !important;
}
#includedContent { #includedContent {
background-color: transparent; background-color: transparent;
background: transparent; background: transparent;
} }
#username:hover, #password:hover {
#username:hover,
#password:hover {
text-shadow: 0 0 1rem transparent; text-shadow: 0 0 1rem transparent;
} }
/* Settings */ /* Settings */
/* Text Color */ /* Text Color */
.alpaca-control-label, .alpaca-control.radio { .alpaca-control-label,
.alpaca-control.radio {
color: white !important; color: white !important;
} }
.alpaca-form-buttons-container { .alpaca-form-buttons-container {
background-color: transparent !important; background-color: transparent !important;
} }
.Rtable-cell { .Rtable-cell {
color: white !important; color: white !important;
} }
#colorkey { #colorkey {
color: white !important; color: white !important;
} }
.settingstitle { .settingstitle {
text-shadow: none !important; text-shadow: none !important;
} }
#reginfo { #reginfo {
color: white !important; color: white !important;
} }
#infodata { #infodata {
background-color: transparent !important; background-color: transparent !important;
box-shadow: none !important; box-shadow: none !important;
} }
.input_icon { .input_icon {
color: var(--button-color) !important; color: var(--button-color) !important;
} }
.input_icon:hover { .input_icon:hover {
color: var(--button-color-hover) !important; color: var(--button-color-hover) !important;
} }
/* Sidebar */ /* Sidebar */
#sidebar-wrapper { #sidebar-wrapper {
box-shadow: none !important; box-shadow: none !important;
background-color: rgba(0, 0, 0, 0.07); background-color: rgba(0, 0, 0, 0.07);
} }
.sidebar-nav li:hover:before { .sidebar-nav li:hover:before {
-webkit-transition: none !important; -webkit-transition: none !important;
transition: none !important; transition: none !important;
background-color: rgba(0, 0, 0, 0.07); background-color: rgba(0, 0, 0, 0.07);
} }
.sidebar-nav li:before { .sidebar-nav li:before {
background-color: rgba(0, 0, 0, 0.07); background-color: rgba(0, 0, 0, 0.07);
transition: none !important; transition: none !important;
-webkit-transition: none !important; -webkit-transition: none !important;
} }
.sidebar-nav li:first-child a {
.sidebar-nav li:first-child a {
background-color: rgba(0, 0, 0, 0.07); background-color: rgba(0, 0, 0, 0.07);
} }
.sidebar-nav li:nth-child(2):before {
.sidebar-nav li:nth-child(2):before {
background-color: rgba(0, 0, 0, 0.07); background-color: rgba(0, 0, 0, 0.07);
} }
.sidebar-nav li:nth-child(3):before {
.sidebar-nav li:nth-child(3):before {
background-color: rgba(0, 0, 0, 0.07); background-color: rgba(0, 0, 0, 0.07);
} }
.sidebar-nav li:nth-child(4):before {
.sidebar-nav li:nth-child(4):before {
background-color: rgba(0, 0, 0, 0.07); background-color: rgba(0, 0, 0, 0.07);
} }
.sidebar-nav li:nth-child(5):before {
.sidebar-nav li:nth-child(5):before {
background-color: rgba(0, 0, 0, 0.07); background-color: rgba(0, 0, 0, 0.07);
} }
.sidebar-nav li:nth-child(6):before {
.sidebar-nav li:nth-child(6):before {
background-color: rgba(0, 0, 0, 0.07); background-color: rgba(0, 0, 0, 0.07);
} }
.sidebar-nav li:nth-child(7):before {
.sidebar-nav li:nth-child(7):before {
background-color: rgba(0, 0, 0, 0.07); background-color: rgba(0, 0, 0, 0.07);
} }
.sidebar-nav li:nth-child(8):before {
.sidebar-nav li:nth-child(8):before {
background-color: rgba(0, 0, 0, 0.07); background-color: rgba(0, 0, 0, 0.07);
} }
.sidebar-nav li:nth-child(9):before {
.sidebar-nav li:nth-child(9):before {
background-color: rgba(0, 0, 0, 0.07); background-color: rgba(0, 0, 0, 0.07);
} }
#modalloading { #modalloading {
background: var(--main-bg-color); background: var(--main-bg-color);
@ -159,8 +188,10 @@ background: transparent;
color: white !important; color: white !important;
border: 1px solid transparent !important; border: 1px solid transparent !important;
box-shadow: 0.5rem 0.5rem 1rem rgb(15, 15, 15, 0.45) !important; box-shadow: 0.5rem 0.5rem 1rem rgb(15, 15, 15, 0.45) !important;
} }
.modaltextloading, .modalloadingspinner {
.modaltextloading,
.modalloadingspinner {
color: #FFF !important; color: #FFF !important;
} }
@ -168,85 +199,115 @@ background: transparent;
max-width: 100% !important; max-width: 100% !important;
padding-right: 2rem !important; padding-right: 2rem !important;
} }
#stats { #stats {
background-color: rgba(0,0,0,.15) !important; background-color: rgba(0, 0, 0, .15) !important;
padding-left: .0rem !important; padding-left: .0rem !important;
padding-right: 1.11rem !important; padding-right: 1.11rem !important;
box-shadow: none; box-shadow: none;
} }
#hd { #hd {
padding-left: 0.8rem !important; padding-left: 0.8rem !important;
} }
.double-val-label>span.success { .double-val-label>span.success {
background-color: #28a745 !important; background-color: #28a745 !important;
} }
.servicetile:hover, .servicetile:focus {
.servicetile:hover,
.servicetile:focus {
text-shadow: 0 0 20px #000; text-shadow: 0 0 20px #000;
} }
#servicetitle:hover, #servicetitle:focus {
#servicetitle:hover,
#servicetitle:focus {
text-shadow: 0 0 20px #000; text-shadow: 0 0 20px #000;
} }
#servicetitle { #servicetitle {
color: #fff !important; color: #fff !important;
} }
.btnoffline, .btnunknown, .btnonline {
.btnoffline,
.btnunknown,
.btnonline {
box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.9) !important; box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.9) !important;
-webkit-box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.9) !important; -webkit-box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.9) !important;
} }
.btnonline { .btnonline {
background-color: #28a745 !important; background-color: #28a745 !important;
} }
.btn { .btn {
background-color: var(--button-color) !important; background-color: var(--button-color) !important;
} }
.btn:hover { .btn:hover {
background-color: var(--button-color-hover) !important; background-color: var(--button-color-hover) !important;
} }
.btn-primary,.btn-primary:hover {
.btn-primary,
.btn-primary:hover {
border-color: transparent; border-color: transparent;
} }
.btn-group>.btn-group:not(:first-child)>.btn, .btn-group>.btn:not(:first-child) {
.btn-group>.btn-group:not(:first-child)>.btn,
.btn-group>.btn:not(:first-child) {
color: white !important; color: white !important;
} }
.btn-group>.btn:first-child { .btn-group>.btn:first-child {
color: white !important; color: white !important;
} }
#time { #time {
background-color: rgba(0,0,0,.15) !important; background-color: rgba(0, 0, 0, .15) !important;
color: #fff !important; color: #fff !important;
box-shadow: none; box-shadow: none;
} }
#slidertable { #slidertable {
background-color: rgba(0,0,0,.15) !important; background-color: rgba(0, 0, 0, .15) !important;
box-shadow: none; box-shadow: none;
} }
#textslider { #textslider {
color: #fff !important; color: #fff !important;
} }
.dtg { .dtg {
color: #fff !important; color: #fff !important;
} }
.datemin { .datemin {
color: #fff !important; color: #fff !important;
} }
#center { #center {
background-color: rgba(0,0,0,.0) !important; background-color: rgba(0, 0, 0, .0) !important;
box-shadow: 0px 0px 0px 0px #ffffff00, 0px 0px 0px 0px #ffffff00, 10px 0px 10px 0px #ffffff00, -10px 0px 10px 2px #ffffff00 !important; box-shadow: 0px 0px 0px 0px #ffffff00, 0px 0px 0px 0px #ffffff00, 10px 0px 10px 0px #ffffff00, -10px 0px 10px 2px #ffffff00 !important;
} }
/*Service tile*/ /*Service tile*/
.col-lg-4 { .col-lg-4 {
background-color: rgba(0,0,0,.15) !important; background-color: rgba(0, 0, 0, .15) !important;
margin: 1rem .1rem 1.5rem 1rem !important; margin: 1rem .1rem 1.5rem 1rem !important;
width: 9rem !important; width: 9rem !important;
box-shadow: none; box-shadow: none;
} }
.col-lg-4:hover { .col-lg-4:hover {
background-color: hsla(0,0%,100%,.08) !important; background-color: hsla(0, 0%, 100%, .08) !important;
margin: 1rem .1rem 1.5rem 1rem !important; margin: 1rem .1rem 1.5rem 1rem !important;
width: 9rem !important; width: 9rem !important;
box-shadow: none; box-shadow: none;
} }
.servicetile, .servicetile:hover, .servicetile:focus {
.servicetile,
.servicetile:hover,
.servicetile:focus {
color: #ffffff; color: #ffffff;
text-shadow: none !important; text-shadow: none !important;
text-decoration: none !important; text-decoration: none !important;
@ -258,6 +319,7 @@ box-shadow: none;
-o-transition: none !important; -o-transition: none !important;
transition: none !important; transition: none !important;
} }
.servicetile { .servicetile {
color: #ffffff; color: #ffffff;
text-shadow: none !important; text-shadow: none !important;
@ -270,53 +332,68 @@ box-shadow: none;
-o-transition: none !important; -o-transition: none !important;
transition: none !important; transition: none !important;
} }
#servicetitle:hover, #servicetitle:focus {
#servicetitle:hover,
#servicetitle:focus {
text-shadow: none !important; text-shadow: none !important;
font-weight: inherit !important; font-weight: inherit !important;
} }
#clock { #clock {
background-color: rgba(0,0,0,.15) !important; background-color: rgba(0, 0, 0, .15) !important;
color: #fff !important; color: #fff !important;
box-shadow: none; box-shadow: none;
} }
.date { .date {
color: #fff !important; color: #fff !important;
} }
#summary { #summary {
background-color: #e84242 !important; background-color: #e84242 !important;
border-radius: 23px 22px 22px 23px/23px 23px 22px 22px; border-radius: 23px 22px 22px 23px/23px 23px 22px 22px;
box-shadow: 0px 2px 5px rgb(15, 15, 15) !important; box-shadow: 0px 2px 5px rgb(15, 15, 15) !important;
} }
.pace, .pace-progress {
background: rgba(0,0,0,.15) !important; .pace,
.pace-progress {
background: rgba(0, 0, 0, .15) !important;
} }
.pace, .pace-progress-inner {
box-shadow: 0 0 10px rgba(0,0,0,.15), 0 0 5px rgba(0,0,0,.15) !important; .pace,
.pace-progress-inner {
box-shadow: 0 0 10px rgba(0, 0, 0, .15), 0 0 5px rgba(0, 0, 0, .15) !important;
} }
.pace .pace-activity { .pace .pace-activity {
border-top-color: #FFF !important; border-top-color: #FFF !important;
border-left-color: #FFF !important; border-left-color: #FFF !important;
} }
.footer { .footer {
color: white !important; color: white !important;
} }
.footer:hover { .footer:hover {
text-shadow: 0 0 15px transparent !important; text-shadow: 0 0 15px transparent !important;
} }
#footer { #footer {
color: transparent !important; color: transparent !important;
} }
.navbar-brand { .navbar-brand {
text-shadow: 0 0 15px #000000 !important; text-shadow: 0 0 15px #000000 !important;
} }
/* ButtonShadow */ /* ButtonShadow */
.btnoffline, .btnunknown, .btnonline { .btnoffline,
.btnunknown,
.btnonline {
box-shadow: none !important; box-shadow: none !important;
-webkit-box-shadow: none !important; -webkit-box-shadow: none !important;
} }
#myModal3 { #myModal3 {
background: var(--modal-bg-color) !important; background: var(--modal-bg-color) !important;
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
@ -328,17 +405,23 @@ box-shadow: none;
-o-background-size: auto, cover; -o-background-size: auto, cover;
border: 1px solid transparent !important; border: 1px solid transparent !important;
} }
.modalimgpath, .modaltext, #uploadbutton {
.modalimgpath,
.modaltext,
#uploadbutton {
color: #fff !important; color: #fff !important;
} }
.file-upload { .file-upload {
background-color: var(--button-color) !important; background-color: var(--button-color) !important;
color: white !important; color: white !important;
} }
.file-upload:hover { .file-upload:hover {
background-color: var(--button-color-hover) !important; background-color: var(--button-color-hover) !important;
color: white !important; color: white !important;
} }
@media only screen and (max-width: 775px) { @media only screen and (max-width: 775px) {
#slidertable { #slidertable {
display: none !important; display: none !important;

83
CSS/themes/monitorr/organizr-dashboard.css

@ -1,4 +1,3 @@
/* dP dP dP */ /* dP dP dP */
/* 88 88 88 */ /* 88 88 88 */
/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ /* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */
@ -19,70 +18,93 @@ body {
max-width: 100% !important; max-width: 100% !important;
padding-right: 2rem !important; padding-right: 2rem !important;
} }
#stats { #stats {
background-color: rgba(0,0,0,.15) !important; background-color: rgba(0, 0, 0, .15) !important;
padding-left: .0rem !important; padding-left: .0rem !important;
padding-right: 1.11rem !important; padding-right: 1.11rem !important;
box-shadow: none; box-shadow: none;
} }
#hd { #hd {
padding-left: 0.8rem !important; padding-left: 0.8rem !important;
} }
.double-val-label>span.success { .double-val-label>span.success {
background-color: #28a745 !important; background-color: #28a745 !important;
} }
.servicetile:hover, .servicetile:focus {
.servicetile:hover,
.servicetile:focus {
text-shadow: 0 0 20px #000; text-shadow: 0 0 20px #000;
} }
#servicetitle:hover, #servicetitle:focus {
#servicetitle:hover,
#servicetitle:focus {
text-shadow: 0 0 20px #000; text-shadow: 0 0 20px #000;
} }
#servicetitle { #servicetitle {
color: #fff !important; color: #fff !important;
} }
.btnoffline, .btnunknown, .btnonline {
.btnoffline,
.btnunknown,
.btnonline {
box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.9) !important; box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.9) !important;
-webkit-box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.9) !important; -webkit-box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.9) !important;
} }
.btnonline { .btnonline {
background-color: #28a745 !important; background-color: #28a745 !important;
} }
#time { #time {
background-color: rgba(0,0,0,.15) !important; background-color: rgba(0, 0, 0, .15) !important;
color: #fff !important; color: #fff !important;
box-shadow: none; box-shadow: none;
} }
#slidertable { #slidertable {
background-color: rgba(0,0,0,.15) !important; background-color: rgba(0, 0, 0, .15) !important;
box-shadow: none; box-shadow: none;
} }
#textslider { #textslider {
color: #fff !important; color: #fff !important;
} }
.dtg { .dtg {
color: #fff !important; color: #fff !important;
} }
.datemin { .datemin {
color: #fff !important; color: #fff !important;
} }
#center { #center {
background-color: rgba(0,0,0,.0) !important; background-color: rgba(0, 0, 0, .0) !important;
box-shadow: 0px 0px 0px 0px #ffffff00, 0px 0px 0px 0px #ffffff00, 10px 0px 10px 0px #ffffff00, -10px 0px 10px 2px #ffffff00 !important; box-shadow: 0px 0px 0px 0px #ffffff00, 0px 0px 0px 0px #ffffff00, 10px 0px 10px 0px #ffffff00, -10px 0px 10px 2px #ffffff00 !important;
} }
/*Service tile*/ /*Service tile*/
.col-lg-4 { .col-lg-4 {
background-color: rgba(0,0,0,.15) !important; background-color: rgba(0, 0, 0, .15) !important;
margin: 1rem .1rem 1.5rem 1rem !important; margin: 1rem .1rem 1.5rem 1rem !important;
width: 9rem !important; width: 9rem !important;
box-shadow: none; box-shadow: none;
} }
.col-lg-4:hover { .col-lg-4:hover {
background-color: hsla(0,0%,100%,.08) !important; background-color: hsla(0, 0%, 100%, .08) !important;
margin: 1rem .1rem 1.5rem 1rem !important; margin: 1rem .1rem 1.5rem 1rem !important;
width: 9rem !important; width: 9rem !important;
box-shadow: none; box-shadow: none;
} }
.servicetile, .servicetile:hover, .servicetile:focus {
.servicetile,
.servicetile:hover,
.servicetile:focus {
color: #ffffff; color: #ffffff;
text-shadow: none !important; text-shadow: none !important;
text-decoration: none !important; text-decoration: none !important;
@ -94,6 +116,7 @@ box-shadow: none;
-o-transition: none !important; -o-transition: none !important;
transition: none !important; transition: none !important;
} }
.servicetile { .servicetile {
color: #ffffff; color: #ffffff;
text-shadow: none !important; text-shadow: none !important;
@ -106,54 +129,72 @@ box-shadow: none;
-o-transition: none !important; -o-transition: none !important;
transition: none !important; transition: none !important;
} }
#servicetitle:hover, #servicetitle:focus {
#servicetitle:hover,
#servicetitle:focus {
text-shadow: none !important; text-shadow: none !important;
font-weight: inherit !important; font-weight: inherit !important;
} }
#clock { #clock {
background-color: rgba(0,0,0,.15) !important; background-color: rgba(0, 0, 0, .15) !important;
color: #fff !important; color: #fff !important;
box-shadow: none; box-shadow: none;
} }
.date { .date {
color: #fff !important; color: #fff !important;
} }
#summary { #summary {
background-color: #e84242 !important; background-color: #e84242 !important;
border-radius: 23px 22px 22px 23px/23px 23px 22px 22px; border-radius: 23px 22px 22px 23px/23px 23px 22px 22px;
box-shadow: 0px 2px 5px rgb(15, 15, 15) !important; box-shadow: 0px 2px 5px rgb(15, 15, 15) !important;
} }
.pace, .pace-progress {
background: rgba(0,0,0,.15) !important; .pace,
.pace-progress {
background: rgba(0, 0, 0, .15) !important;
} }
.pace, .pace-progress-inner {
box-shadow: 0 0 10px rgba(0,0,0,.15), 0 0 5px rgba(0,0,0,.15) !important; .pace,
.pace-progress-inner {
box-shadow: 0 0 10px rgba(0, 0, 0, .15), 0 0 5px rgba(0, 0, 0, .15) !important;
} }
.footer { .footer {
color: transparent !important; color: transparent !important;
} }
.footer:hover { .footer:hover {
text-shadow: 0 0 15px transparent !important; text-shadow: 0 0 15px transparent !important;
} }
#footer { #footer {
color: transparent !important; color: transparent !important;
} }
.alpaca-control-label, .alpaca-control.radio {
.alpaca-control-label,
.alpaca-control.radio {
color: black !important; color: black !important;
} }
.navbar-brand { .navbar-brand {
text-shadow: 0 0 15px #000000 !important; text-shadow: 0 0 15px #000000 !important;
} }
.Rtable-cell { .Rtable-cell {
color: #000000 !important; color: #000000 !important;
} }
#colorkey { #colorkey {
color: #000000 !important; color: #000000 !important;
} }
/* ButtonShadow */ /* ButtonShadow */
.btnoffline, .btnunknown, .btnonline { .btnoffline,
.btnunknown,
.btnonline {
box-shadow: none !important; box-shadow: none !important;
-webkit-box-shadow: none !important; -webkit-box-shadow: none !important;
} }

6
CSS/themes/moviematch/moviematch-base.css

@ -93,8 +93,7 @@ input:focus {
.login-form .room-code-container .generate-button:hover, .login-form .room-code-container .generate-button:hover,
.login-form .submit-button:hover, .login-form .submit-button:hover,
.ButtonPrimary:hover, .ButtonPrimary:hover,
.ButtonPrimary:active .ButtonPrimary:active .ButtonSecondary:hover,
.ButtonSecondary:hover,
.ButtonSecondary:active, .ButtonSecondary:active,
.ButtonTertiary:hover, .ButtonTertiary:hover,
.ButtonTertiary:active, .ButtonTertiary:active,
@ -106,6 +105,7 @@ input:focus {
color: var(--button-text-hover); color: var(--button-text-hover);
border-color: var(--button-color-hover); border-color: var(--button-color-hover);
} }
@media (hover: hover) { @media (hover: hover) {
.ButtonSecondary:hover { .ButtonSecondary:hover {
color: var(--button-text-hover); color: var(--button-text-hover);
@ -135,9 +135,11 @@ input:focus {
.Card_MoreInfoButton:hover { .Card_MoreInfoButton:hover {
color: rgb(var(--accent-color)); color: rgb(var(--accent-color));
} }
.RoomInfoBar { .RoomInfoBar {
background-color: rgba(0, 0, 0, 0.25); background-color: rgba(0, 0, 0, 0.25);
} }
/* MENUS POPOVER */ /* MENUS POPOVER */
.PopoverMenuButton:hover { .PopoverMenuButton:hover {
background: rgb(255 255 255 / 15%) !important; background: rgb(255 255 255 / 15%) !important;

331
CSS/themes/nzbget/nzbget-base.css

@ -1,4 +1,3 @@
/* dP dP dP */ /* dP dP dP */
/* 88 88 88 */ /* 88 88 88 */
/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ /* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */
@ -20,25 +19,28 @@ body {
-webkit-background-size: auto, cover; -webkit-background-size: auto, cover;
-moz-background-size: auto, cover; -moz-background-size: auto, cover;
-o-background-size: auto, cover; -o-background-size: auto, cover;
background-color: rgba(0,0,0,.0); background-color: rgba(0, 0, 0, .0);
color:#FFFFFF !important; color: #FFFFFF !important;
} }
/* scroller */ /* scroller */
::-webkit-scrollbar-corner { ::-webkit-scrollbar-corner {
background-color: rgba(0, 0, 0, .25); background-color: rgba(0, 0, 0, .25);
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 10px; width: 10px;
height: 10px; height: 10px;
background: #0c1218; background: #0c1218;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
-webkit-border-radius: 2px; -webkit-border-radius: 2px;
border-radius: 2px; border-radius: 2px;
background-color: hsla(0,0%,100%,.08); background-color: hsla(0, 0%, 100%, .08);
} }
.modal { .modal {
background: var(--modal-bg-color) !important; background: var(--modal-bg-color) !important;
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
@ -49,8 +51,9 @@ body {
-moz-background-size: auto, cover; -moz-background-size: auto, cover;
-o-background-size: auto, cover; -o-background-size: auto, cover;
background-color: var(--modal-bg-color) !important; background-color: var(--modal-bg-color) !important;
color:#FFFFFF !important; color: #FFFFFF !important;
} }
.modal-footer { .modal-footer {
background-color: transparent; background-color: transparent;
border-top: none; border-top: none;
@ -60,40 +63,62 @@ body {
.table a { .table a {
color: #ffffff; color: #ffffff;
} }
.table a:hover { .table a:hover {
color: #e5a00d; color: #e5a00d;
} }
.table-striped tbody tr:nth-child(odd) { .table-striped tbody tr:nth-child(odd) {
background-color: rgba(0, 0, 0, 0.25); background-color: rgba(0, 0, 0, 0.25);
} }
.table-striped tbody tr:nth-child(odd) td, .table-striped tbody tr:nth-child(odd) th {
.table-striped tbody tr:nth-child(odd) td,
.table-striped tbody tr:nth-child(odd) th {
background-color: transparent; background-color: transparent;
} }
.table-striped tbody tr:nth-child(even) { .table-striped tbody tr:nth-child(even) {
background-color: rgba(0, 0, 0, 0.08); background-color: rgba(0, 0, 0, 0.08);
} }
.table tbody tr:hover, .table tbody tr:hover td, .table tbody tr:hover a {
.table tbody tr:hover,
.table tbody tr:hover td,
.table tbody tr:hover a {
color: white; color: white;
background-color: hsla(0,0%,100%,.08); background-color: hsla(0, 0%, 100%, .08);
} }
.table-striped tbody tr.checked:nth-child(2n+1) td, .checked .progress {
background-color: hsla(0,0%,100%,.08); .table-striped tbody tr.checked:nth-child(2n+1) td,
.checked .progress {
background-color: hsla(0, 0%, 100%, .08);
} }
tr.checked, tr.checked td, tr.checked:nth-child(odd) .progress {
background-color: hsla(0,0%,100%,.08); tr.checked,
tr.checked td,
tr.checked:nth-child(odd) .progress {
background-color: hsla(0, 0%, 100%, .08);
} }
.table tbody tr.checked:hover, .table tbody tr.checked:hover td {
background-color: hsla(0,0%,100%,.08); .table tbody tr.checked:hover,
.table tbody tr.checked:hover td {
background-color: hsla(0, 0%, 100%, .08);
} }
.table tbody tr.checked:hover, .table tbody tr.checked:hover td {
background-color: hsla(0,0%,100%,.08); .table tbody tr.checked:hover,
.table tbody tr.checked:hover td {
background-color: hsla(0, 0%, 100%, .08);
} }
.table.check-simple tbody tr.checked:hover, .table.check-simple tbody tr.checked:hover td {
background-color: hsla(0,0%,100%,.08); .table.check-simple tbody tr.checked:hover,
.table.check-simple tbody tr.checked:hover td {
background-color: hsla(0, 0%, 100%, .08);
} }
.table th, .table td {
.table th,
.table td {
border-top: none; border-top: none;
} }
.table-bordered { .table-bordered {
border-left: none; border-left: none;
border: none; border: none;
@ -103,20 +128,25 @@ tr.checked, tr.checked td, tr.checked:nth-child(odd) .progress {
border: none; border: none;
background: rgba(0, 0, 0, .25); background: rgba(0, 0, 0, .25);
} }
.pagination a:hover, .pagination .active a {
background-color: hsla(0,0%,100%,.08); .pagination a:hover,
.pagination .active a {
background-color: hsla(0, 0%, 100%, .08);
} }
.pagination .active a { .pagination .active a {
color: #ffffff; color: #ffffff;
} }
/* PROGRESS BAR */ /* PROGRESS BAR */
.progress { .progress {
background: hsla(0,0%,100%,.08); background: hsla(0, 0%, 100%, .08);
} }
.progress-warning.progress-striped .bar { .progress-warning.progress-striped .bar {
background-color: #cc7b19; background-color: #cc7b19;
} }
.progress-success.progress-striped .bar { .progress-success.progress-striped .bar {
background-color: #51a351; background-color: #51a351;
} }
@ -125,10 +155,12 @@ tr.checked, tr.checked td, tr.checked:nth-child(odd) .progress {
.navbar-fixed-top .navbar-inner { .navbar-fixed-top .navbar-inner {
color: #fff !important; color: #fff !important;
} }
.navbar-inner { .navbar-inner {
background-image: none; background-image: none;
background-color: transparent; background-color: transparent;
} }
.navbar-container { .navbar-container {
background: var(--main-bg-color); background: var(--main-bg-color);
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
@ -139,34 +171,46 @@ tr.checked, tr.checked td, tr.checked:nth-child(odd) .progress {
-moz-background-size: auto, cover; -moz-background-size: auto, cover;
-o-background-size: auto, cover; -o-background-size: auto, cover;
} }
.navbar .nav > li > a:hover {
.navbar .nav>li>a:hover {
color: var(--accent-color); color: var(--accent-color);
} }
.navbar .nav .active > a, .navbar .nav .active > a:hover {
background: hsla(0,0%,100%,.08); .navbar .nav .active>a,
.navbar .nav .active>a:hover {
background: hsla(0, 0%, 100%, .08);
color: var(--accent-color); color: var(--accent-color);
} }
[class^="icon-"], [class*=" icon-"], [class^="img-"], [class*=" img-"] { [class^="icon-"],
[class*=" icon-"],
[class^="img-"],
[class*=" img-"] {
background-image: url(https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/nzbget/icons.png); background-image: url(https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/nzbget/icons.png);
} }
.navbar-search .search-query { .navbar-search .search-query {
color: #ffffff; color: #ffffff;
background-color: rgba(0, 0, 0, 0.25) !important; background-color: rgba(0, 0, 0, 0.25) !important;
border: 0px solid #151515; border: 0px solid #151515;
} }
.navbar-search .search-query:focus, .navbar-search .search-query.focused {
.navbar-search .search-query:focus,
.navbar-search .search-query.focused {
color: #000 !important; color: #000 !important;
text-shadow: none; text-shadow: none;
background-color: white !important; background-color: white !important;
} }
.search-caret-button { .search-caret-button {
outline: none; outline: none;
} }
.menu-header { .menu-header {
color: #ffffff; color: #ffffff;
} }
.dropdown-menu { .dropdown-menu {
background-color: #191a1c; background-color: #191a1c;
background: var(--modal-bg-color); background: var(--modal-bg-color);
@ -179,110 +223,127 @@ tr.checked, tr.checked td, tr.checked:nth-child(odd) .progress {
-o-background-size: auto, cover; -o-background-size: auto, cover;
color: #FFF; color: #FFF;
} }
.dropdown-menu a { .dropdown-menu a {
color: #ffffff; color: #ffffff;
} }
.dropdown-menu li > a:hover, .dropdown-menu .active > a, .dropdown-menu .active > a:hover {
.dropdown-menu li>a:hover,
.dropdown-menu .active>a,
.dropdown-menu .active>a:hover {
color: #ffffff; color: #ffffff;
background-color: hsla(0,0%,100%,.05); background-color: hsla(0, 0%, 100%, .05);
} }
.dropdown-menu .divider { .dropdown-menu .divider {
height: 0px; height: 0px;
border-bottom: none; border-bottom: none;
} }
/* BUTTONS */ /* BUTTONS */
.btn-group > .dropdown-toggle { .btn-group>.dropdown-toggle {
box-shadow: none; box-shadow: none;
} }
.config-header .btn{ .config-header .btn {
background:#FFF; background: #FFF;
color:#adb1b1; color: #adb1b1;
text-shadow:unset; text-shadow: unset;
} }
#ConfigData > div > button.btn{ #ConfigData>div>button.btn {
background: rgba(0, 0, 0, .25) !important; background: rgba(0, 0, 0, .25) !important;
color: #FFF !important; color: #FFF !important;
font-weight:bold; font-weight: bold;
text-shadow:unset; text-shadow: unset;
} }
#ConfigData > div > button.btn:hover{
background: hsla(0,0%,100%,.08) !important; #ConfigData>div>button.btn:hover {
background: hsla(0, 0%, 100%, .08) !important;
color: #FFF !important; color: #FFF !important;
font-weight:bold; font-weight: bold;
text-shadow:unset; text-shadow: unset;
} }
#ConfigData > div > div > table > tbody > tr > td>.btn{ #ConfigData>div>div>table>tbody>tr>td>.btn {
background:#414141; background: #414141;
color:#adb1b1; color: #adb1b1;
text-shadow:unset; text-shadow: unset;
font-weight:bold; font-weight: bold;
} }
#Config_Save:hover{
background-color:#51a351; #Config_Save:hover {
color:#FFF; background-color: #51a351;
color: #FFF;
} }
#Config_Save { #Config_Save {
background:rgba(0, 0, 0, 0.25);
color:#FFF;
margin:auto;
}
#ConfigData > div> div > button.btn.btn-danger {
background:#ad292c;
text-shadow:unset;
}
#ConfigData > div> div > button.btn.btn-danger:hover {
background:#d33a3e;
text-shadow:unset;
}
#ConfigData > div:nth-child(3) > div > button,
#ConfigData > div:nth-child(4) > div > button,
#ConfigData > div:nth-child(5) > div > button {
text-shadow:unset;
background: rgba(0, 0, 0, 0.25); background: rgba(0, 0, 0, 0.25);
color:white; color: #FFF;
margin: auto;
} }
#ConfigData > div:nth-child(3) > div > button:hover,
#ConfigData > div:nth-child(4) > div > button:hover, #ConfigData>div>div>button.btn.btn-danger {
#ConfigData > div:nth-child(5) > div > button:hover { background: #ad292c;
text-shadow:unset; text-shadow: unset;
background: hsla(0,0%,100%,.08);
color:white;
} }
#ConfigData input.btn.btn-primary{
#ConfigData>div>div>button.btn.btn-danger:hover {
background: #d33a3e;
text-shadow: unset;
}
#ConfigData>div:nth-child(3)>div>button,
#ConfigData>div:nth-child(4)>div>button,
#ConfigData>div:nth-child(5)>div>button {
text-shadow: unset;
background: rgba(0, 0, 0, 0.25);
color: white;
}
#ConfigData>div:nth-child(3)>div>button:hover,
#ConfigData>div:nth-child(4)>div>button:hover,
#ConfigData>div:nth-child(5)>div>button:hover {
text-shadow: unset;
background: hsla(0, 0%, 100%, .08);
color: white;
}
#ConfigData input.btn.btn-primary {
background: var(--button-color) !important; background: var(--button-color) !important;
text-shadow:unset; text-shadow: unset;
color:white; color: white;
} }
#ConfigData input.btn{
#ConfigData input.btn {
background: rgba(0, 0, 0, 0.25) !important; background: rgba(0, 0, 0, 0.25) !important;
text-shadow:unset; text-shadow: unset;
color:#a8a8a8; color: #a8a8a8;
} }
#Config_ViewButton{
background:rgba(0, 0, 0, 0.25); #Config_ViewButton {
color:#FFF; background: rgba(0, 0, 0, 0.25);
color: #FFF;
} }
#Config_ViewButton:hover{ #Config_ViewButton:hover {
background: hsla(0,0%,100%,.08); background: hsla(0, 0%, 100%, .08);
color:#FFF; color: #FFF;
} }
#DownloadsEditDialog input.btn.btn-primary{
#DownloadsEditDialog input.btn.btn-primary {
background: var(--button-color) !important; background: var(--button-color) !important;
text-shadow:unset; text-shadow: unset;
color:white; color: white;
} }
#HistoryEdit_ParamData input.btn.btn-primary{
#HistoryEdit_ParamData input.btn.btn-primary {
background: var(--button-color) !important; background: var(--button-color) !important;
text-shadow:unset; text-shadow: unset;
color:white; color: white;
} }
.btn { .btn {
color: #ffffff; color: #ffffff;
text-shadow: none; text-shadow: none;
background-color: rgba(0, 0, 0, 0.25); background-color: rgba(0, 0, 0, 0.25);
@ -294,9 +355,10 @@ tr.checked, tr.checked td, tr.checked:nth-child(odd) .progress {
-moz-box-shadow: none; -moz-box-shadow: none;
box-shadow: none; box-shadow: none;
} }
.btn:hover { .btn:hover {
color: #FFF; color: #FFF;
background-color: hsla(0,0%,100%,.08); background-color: hsla(0, 0%, 100%, .08);
} }
@ -306,21 +368,25 @@ tr.checked, tr.checked td, tr.checked:nth-child(odd) .progress {
.btn-group.open .btn.dropdown-toggle { .btn-group.open .btn.dropdown-toggle {
background-color: #FFF; background-color: #FFF;
background-color: hsla(0,0%,100%,.08); background-color: hsla(0, 0%, 100%, .08);
} }
#ConfigData > div > div > table > tbody > tr > td>.btn{ #ConfigData>div>div>table>tbody>tr>td>.btn {
background:rgba(0, 0, 0, 0.25); background: rgba(0, 0, 0, 0.25);
color:#FFF; color: #FFF;
text-shadow:unset; text-shadow: unset;
font-weight:bold; font-weight: bold;
} }
#ConfigData > div > div > table > tbody > tr > td>.btn:hover{
background: hsla(0,0%,100%,.08); #ConfigData>div>div>table>tbody>tr>td>.btn:hover {
color:#FFF; background: hsla(0, 0%, 100%, .08);
color: #FFF;
} }
input, textarea, select, .uneditable-input { input,
textarea,
select,
.uneditable-input {
color: #ffffff; color: #ffffff;
background-color: rgb(0, 0, 0); background-color: rgb(0, 0, 0);
background-image: var(main-bg-color) !important; background-image: var(main-bg-color) !important;
@ -335,11 +401,16 @@ input, textarea, select, .uneditable-input {
color: #FFFFFF !important; color: #FFFFFF !important;
border: none; border: none;
} }
select:focus { select:focus {
background: #191a1c !important; background: #191a1c !important;
color: #FFF !important; color: #FFF !important;
} }
input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus, select:focus {
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus,
select:focus {
outline: thin dotted #333; outline: thin dotted #333;
outline: none; outline: none;
outline-offset: -2px; outline-offset: -2px;
@ -347,22 +418,26 @@ input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focu
-moz-box-shadow: none; -moz-box-shadow: none;
box-shadow: none; box-shadow: none;
} }
input:focus, textarea:focus {
input:focus,
textarea:focus {
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 0, 0, 0.6); -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 0, 0, 0.6);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 0, 0, 0.6); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 0, 0, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 0, 0, 0.6); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 0, 0, 0.6);
} }
.alert-info { .alert-info {
font-weight: bold; font-weight: bold;
border-radius: unset; border-radius: unset;
border-bottom-left-radius: 0px; border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px; border-bottom-right-radius: 0px;
border:0px; border: 0px;
background-color:hsla(0,0%,100%,.05); background-color: hsla(0, 0%, 100%, .05);
text-shadow:unset; text-shadow: unset;
color:#FFF; color: #FFF;
text-transform:capitalize; text-transform: capitalize;
} }
.alert-inverse { .alert-inverse {
background-color: #414141; background-color: #414141;
background-image: var(--main-bg-color) !important; background-image: var(--main-bg-color) !important;
@ -388,38 +463,52 @@ label {
border: 1px solid rgba(0, 0, 0, .25); border: 1px solid rgba(0, 0, 0, .25);
background-color: rgba(0, 0, 0, .25); background-color: rgba(0, 0, 0, .25);
} }
#ConfigNav.nav-list a { #ConfigNav.nav-list a {
color: #fff; color: #fff;
text-decoration: none; text-decoration: none;
} }
.nav-list > li > a, .nav-list .nav-header {
.nav-list>li>a,
.nav-list .nav-header {
text-shadow: none; text-shadow: none;
} }
.nav-list > .active > a, .nav-list > .active > a:hover {
.nav-list>.active>a,
.nav-list>.active>a:hover {
color: #ffffff; color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
background-color: #0088cc; background-color: #0088cc;
} }
.nav-list > .active > a, .nav-list > .active > a:hover {
.nav-list>.active>a,
.nav-list>.active>a:hover {
color: var(--accent-color) !important; color: var(--accent-color) !important;
background-color: transparent; background-color: transparent;
} }
.nav > li > a:hover {
background-color: hsla(0,0%,100%,.08); .nav>li>a:hover {
background-color: hsla(0, 0%, 100%, .08);
} }
span.help-option-title { span.help-option-title {
color: #eee; color: #eee;
} }
.help-block, .help-inline {
.help-block,
.help-inline {
color: #eee; color: #eee;
} }
.confirm-help-block { .confirm-help-block {
color: #eee; color: #eee;
font-size: 13px; font-size: 13px;
line-height: 16px; line-height: 16px;
margin-bottom: 0; margin-bottom: 0;
} }
.input-prepend .add-on, .input-append .add-on {
.input-prepend .add-on,
.input-append .add-on {
background-color: rgba(0, 0, 0, 0.25); background-color: rgba(0, 0, 0, 0.25);
background-image: var(--main-bg-color) !important; background-image: var(--main-bg-color) !important;
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
@ -433,21 +522,27 @@ span.help-option-title {
color: #FFFFFF !important; color: #FFFFFF !important;
border: none; border: none;
} }
.config-settitle { .config-settitle {
background-color: rgba(0, 0, 0, 0.25); background-color: rgba(0, 0, 0, 0.25);
border-bottom: none; border-bottom: none;
} }
a { a {
color: var(--accent-color); color: var(--accent-color);
text-decoration: none; text-decoration: none;
} }
a:hover { a:hover {
color: #fff; color: #fff;
text-decoration: underline; text-decoration: underline;
} }
.label-warning, .badge-warning {
.label-warning,
.badge-warning {
background-color: var(--button-color); background-color: var(--button-color);
} }
.caret { .caret {
border-top: 4px solid #ffffff; border-top: 4px solid #ffffff;
} }

164
CSS/themes/nzbhydra2/nzbhydra-base.css

@ -1,4 +1,3 @@
/* dP dP dP */ /* dP dP dP */
/* 88 88 88 */ /* 88 88 88 */
/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ /* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */
@ -11,7 +10,8 @@
/* Made by @gilbN */ /* Made by @gilbN */
/* https://github.com/gilbN/theme.park */ /* https://github.com/gilbN/theme.park */
body, html { body,
html {
height: 100%; height: 100%;
background: var(--main-bg-color); background: var(--main-bg-color);
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
@ -23,26 +23,34 @@
-o-background-size: auto, cover; -o-background-size: auto, cover;
font-family: Open Sans Semibold, Helvetica Neue, Helvetica, Arial, sans-serif; font-family: Open Sans Semibold, Helvetica Neue, Helvetica, Arial, sans-serif;
} }
.navbar-default { .navbar-default {
background-color: rgba(0, 0, 0, 0.6); background-color: rgba(0, 0, 0, 0.6);
border-color: transparent; border-color: transparent;
} }
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover {
color: #fff; color: #fff;
background-color: rgba(0, 0, 0, 0.25); background-color: rgba(0, 0, 0, 0.25);
} }
.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>a:hover {
color: #fff; color: #fff;
background-color: rgba(255, 255, 255, 0.08); background-color: rgba(255, 255, 255, 0.08);
} }
.growl-container>.alert-info.icon { .growl-container>.alert-info.icon {
background: var(--accent-color); background: var(--accent-color);
} }
.alert-info { .alert-info {
background: var(--accent-color); background: var(--accent-color);
border-color: transparent; border-color: transparent;
color: #fff; color: #fff;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
outline: none; outline: none;
} }
@ -50,25 +58,34 @@
.nav-tabs { .nav-tabs {
border-bottom: 1px solid rgba(255, 255, 255, 0.15); border-bottom: 1px solid rgba(255, 255, 255, 0.15);
} }
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover {
color: #fff; color: #fff;
background-color: rgba(0, 0, 0, 0.25); background-color: rgba(0, 0, 0, 0.25);
border: 1px solid #1a1f2000; border: 1px solid #1a1f2000;
border-bottom-color: transparent; border-bottom-color: transparent;
} }
.nav-tabs>li>a:hover { .nav-tabs>li>a:hover {
border-color: transparent; border-color: transparent;
} }
.nav>li>a:focus, .nav>li>a:hover {
.nav>li>a:focus,
.nav>li>a:hover {
background-color: rgba(255, 255, 255, 0.08); background-color: rgba(255, 255, 255, 0.08);
} }
.formly>.formly-field-group { .formly>.formly-field-group {
background-color: transparent; background-color: transparent;
border: 1px solid transparent; border: 1px solid transparent;
} }
legend { legend {
border-bottom: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 1px solid rgba(255, 255, 255, 0.08);
} }
.panel-default>.panel-heading h3 { .panel-default>.panel-heading h3 {
color: #ffffff; color: #ffffff;
} }
@ -79,62 +96,137 @@ legend {
background: var(--default-button-color); background: var(--default-button-color);
border-color: var(--default-button-color); border-color: var(--default-button-color);
} }
.btn-primary.active, .btn-primary.focus, .btn-primary:active, .btn-primary:focus, .btn-primary:hover, .open>.dropdown-toggle.btn-primary {
.btn-primary.active,
.btn-primary.focus,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:hover,
.open>.dropdown-toggle.btn-primary {
color: #fff; color: #fff;
background: var(--default-button-color-hover); background: var(--default-button-color-hover);
border-color: var(--default-button-color-hover); border-color: var(--default-button-color-hover);
} }
.btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, .open>.dropdown-toggle.btn-primary.focus, .open>.dropdown-toggle.btn-primary:focus, .open>.dropdown-toggle.btn-primary:hover {
.btn-primary.active.focus,
.btn-primary.active:focus,
.btn-primary.active:hover,
.btn-primary:active.focus,
.btn-primary:active:focus,
.btn-primary:active:hover,
.open>.dropdown-toggle.btn-primary.focus,
.open>.dropdown-toggle.btn-primary:focus,
.open>.dropdown-toggle.btn-primary:hover {
color: #fff; color: #fff;
background: var(--default-button-color-hover); background: var(--default-button-color-hover);
border-color: var(--default-button-color-hover); border-color: var(--default-button-color-hover);
} }
.btn-info { .btn-info {
color: #fff; color: #fff;
background: var(--default-button-color); background: var(--default-button-color);
border-color: transparent; border-color: transparent;
} }
.btn-info.active, .btn-info.focus, .btn-info:active, .btn-info:focus, .btn-info:hover, .open>.dropdown-toggle.btn-info {
.btn-info.active,
.btn-info.focus,
.btn-info:active,
.btn-info:focus,
.btn-info:hover,
.open>.dropdown-toggle.btn-info {
color: #fff; color: #fff;
background: var(--default-button-color-hover); background: var(--default-button-color-hover);
border-color: transparent; border-color: transparent;
} }
.btn-info.active.focus, .btn-info.active:focus, .btn-info.active:hover, .btn-info:active.focus, .btn-info:active:focus, .btn-info:active:hover, .open>.dropdown-toggle.btn-info.focus, .open>.dropdown-toggle.btn-info:focus, .open>.dropdown-toggle.btn-info:hover {
.btn-info.active.focus,
.btn-info.active:focus,
.btn-info.active:hover,
.btn-info:active.focus,
.btn-info:active:focus,
.btn-info:active:hover,
.open>.dropdown-toggle.btn-info.focus,
.open>.dropdown-toggle.btn-info:focus,
.open>.dropdown-toggle.btn-info:hover {
color: #fff; color: #fff;
background: var(--default-button-color-active); background: var(--default-button-color-active);
border-color: transparent; border-color: transparent;
outline: none; outline: none;
} }
.btn-default { .btn-default {
color: #fff; color: #fff;
background: var(--default-button-color); background: var(--default-button-color);
border-color: transparent !important; border-color: transparent !important;
outline: none; outline: none;
} }
.btn-default.active, .btn-default.focus, .btn-default:active, .btn-default:focus, .btn-default:hover, .open>.dropdown-toggle.btn-default {
.btn-default.active,
.btn-default.focus,
.btn-default:active,
.btn-default:focus,
.btn-default:hover,
.open>.dropdown-toggle.btn-default {
color: #fff; color: #fff;
background: var(--default-button-color-hover); background: var(--default-button-color-hover);
border-color: transparent !important; border-color: transparent !important;
outline: none; outline: none;
} }
.btn-default.active.focus, .btn-default.active:focus, .btn-default.active:hover, .btn-default:active.focus, .btn-default:active:focus, .btn-default:active:hover, .open>.dropdown-toggle.btn-default.focus, .open>.dropdown-toggle.btn-default:focus, .open>.dropdown-toggle.btn-default:hover {
.btn-default.active.focus,
.btn-default.active:focus,
.btn-default.active:hover,
.btn-default:active.focus,
.btn-default:active:focus,
.btn-default:active:hover,
.open>.dropdown-toggle.btn-default.focus,
.open>.dropdown-toggle.btn-default:focus,
.open>.dropdown-toggle.btn-default:hover {
color: #fff; color: #fff;
background: var(--default-button-color-hover); background: var(--default-button-color-hover);
border-color: transparent !important; border-color: transparent !important;
outline: none; outline: none;
} }
.config-button { .config-button {
border: 1px solid transparent; border: 1px solid transparent;
outline: none; outline: none;
} }
.btn-success.active.focus, .btn-success.active:focus, .btn-success.active:hover, .btn-success:active.focus, .btn-success:active:focus, .btn-success:active:hover, .open>.dropdown-toggle.btn-success.focus, .open>.dropdown-toggle.btn-success:focus, .open>.dropdown-toggle.btn-success:hover {
.btn-success.active.focus,
.btn-success.active:focus,
.btn-success.active:hover,
.btn-success:active.focus,
.btn-success:active:focus,
.btn-success:active:hover,
.open>.dropdown-toggle.btn-success.focus,
.open>.dropdown-toggle.btn-success:focus,
.open>.dropdown-toggle.btn-success:hover {
outline: none !important; outline: none !important;
border-color: transparent; border-color: transparent;
} }
.btn-danger.active.focus, .btn-danger.active:focus, .btn-danger.active:hover, .btn-danger:active.focus, .btn-danger:active:focus, .btn-danger:active:hover, .open>.dropdown-toggle.btn-danger.focus, .open>.dropdown-toggle.btn-danger:focus, .open>.dropdown-toggle.btn-danger:hover {
outline: none; .btn-danger.active.focus,
.btn-danger.active:focus,
.btn-danger.active:hover,
.btn-danger:active.focus,
.btn-danger:active:focus,
.btn-danger:active:hover,
.open>.dropdown-toggle.btn-danger.focus,
.open>.dropdown-toggle.btn-danger:focus,
.open>.dropdown-toggle.btn-danger:hover {
outline: none;
} }
.btn-warning.active.focus, .btn-warning.active:focus, .btn-warning.active:hover, .btn-warning:active.focus, .btn-warning:active:focus, .btn-warning:active:hover, .open>.dropdown-toggle.btn-warning.focus, .open>.dropdown-toggle.btn-warning:focus, .open>.dropdown-toggle.btn-warning:hover {
.btn-warning.active.focus,
.btn-warning.active:focus,
.btn-warning.active:hover,
.btn-warning:active.focus,
.btn-warning:active:focus,
.btn-warning:active:hover,
.open>.dropdown-toggle.btn-warning.focus,
.open>.dropdown-toggle.btn-warning:focus,
.open>.dropdown-toggle.btn-warning:hover {
outline: none; outline: none;
} }
@ -142,26 +234,34 @@ outline: none;
.bootstrap-switch { .bootstrap-switch {
border: 1px solid rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .08);
} }
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default {
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default {
color: #fff; color: #fff;
background: rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.25);
} }
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary { .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary {
background-color: var(--default-button-color); background-color: var(--default-button-color);
color: #ffffff; color: #ffffff;
} }
.input-group-btn:last-child>.btn, .input-group-btn:last-child>.btn-group {
.input-group-btn:last-child>.btn,
.input-group-btn:last-child>.btn-group {
margin-left: -1px; margin-left: -1px;
background: #f0f8ff00; background: #f0f8ff00;
} }
.input-group-btn2 { .input-group-btn2 {
border: none; border: none;
background: var(--default-button-color); background: var(--default-button-color);
} }
.input-group-btn1 { .input-group-btn1 {
border: 1px solid var(--default-button-color); border: 1px solid var(--default-button-color);
background: var(--default-button-color); background: var(--default-button-color);
} }
/* Form Control */ /* Form Control */
.form-control { .form-control {
@ -169,14 +269,16 @@ outline: none;
background-color: #151515; background-color: #151515;
} }
.form-control:focus { .form-control:focus {
border-color: #fff0; border-color: #fff0;
outline: 0; outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6); -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(0, 0, 0, 0.6); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(0, 0, 0, 0.6);
} }
.input-group-addon { .input-group-addon {
outline: none; outline: none;
background-color: rgba(0, 0, 0, 0.25); background-color: rgba(0, 0, 0, 0.25);
border: 1px solid transparent; border: 1px solid transparent;
@ -187,10 +289,12 @@ outline: none;
background-color: rgba(0, 0, 0, 0.25); background-color: rgba(0, 0, 0, 0.25);
border: 1px solid transparent; border: 1px solid transparent;
} }
.repeatsection { .repeatsection {
background: rgba(0, 0, 0, 0.25); background: rgba(0, 0, 0, 0.25);
box-shadow: 0 0 4px 1px transparent; box-shadow: 0 0 4px 1px transparent;
} }
hr { hr {
border-top: 1px solid rgba(255, 255, 255, 0.25); border-top: 1px solid rgba(255, 255, 255, 0.25);
} }
@ -206,6 +310,7 @@ hr {
-moz-background-size: auto, cover; -moz-background-size: auto, cover;
-o-background-size: auto, cover; -o-background-size: auto, cover;
} }
.modal-header { .modal-header {
background: var(--modal-bg-color); background: var(--modal-bg-color);
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
@ -217,9 +322,11 @@ hr {
-o-background-size: auto, cover; -o-background-size: auto, cover;
border-bottom: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 1px solid rgba(255, 255, 255, 0.08);
} }
.modal-content { .modal-content {
border: 1px solid transparent; border: 1px solid transparent;
} }
.modal-footer { .modal-footer {
background: var(--modal-bg-color); background: var(--modal-bg-color);
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
@ -238,6 +345,7 @@ hr {
border-color: transparent; border-color: transparent;
color: #fff; color: #fff;
} }
.panel-default>.panel-heading { .panel-default>.panel-heading {
background-color: rgba(0, 0, 0, 0.25); background-color: rgba(0, 0, 0, 0.25);
} }
@ -246,6 +354,7 @@ hr {
color: #c8c8c8; color: #c8c8c8;
border-color: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.08);
} }
.list-group-item { .list-group-item {
background-color: rgba(0, 0, 0, 0.08); background-color: rgba(0, 0, 0, 0.08);
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.1);
@ -255,16 +364,25 @@ hr {
table { table {
background-color: rgba(0, 0, 0, 0.25); background-color: rgba(0, 0, 0, 0.25);
} }
.table>thead>tr>th { .table>thead>tr>th {
vertical-align: bottom; vertical-align: bottom;
border-bottom: 2px solid rgba(255, 255, 255, 0.25); border-bottom: 2px solid rgba(255, 255, 255, 0.25);
} }
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
.table>tbody>tr>td,
.table>tbody>tr>th,
.table>tfoot>tr>td,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>thead>tr>th {
border-top: 1px solid rgba(255, 255, 255, 0.15); border-top: 1px solid rgba(255, 255, 255, 0.15);
} }
.table-hover>tbody>tr:hover { .table-hover>tbody>tr:hover {
background-color: rgba(255, 255, 255, 0.08); background-color: rgba(255, 255, 255, 0.08);
} }
pre { pre {
background-color: rgba(0, 0, 0, 0.45); background-color: rgba(0, 0, 0, 0.45);
border: 1px solid transparent; border: 1px solid transparent;

35
CSS/themes/ombi/ombi-base.css

@ -1,4 +1,3 @@
/* dP dP dP */ /* dP dP dP */
/* 88 88 88 */ /* 88 88 88 */
/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ /* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */
@ -32,7 +31,20 @@ body,
-moz-background-size: auto, cover; -moz-background-size: auto, cover;
-o-background-size: auto, cover; -o-background-size: auto, cover;
} }
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6, legend {
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6,
legend {
color: var(--text-hover); color: var(--text-hover);
} }
@ -50,6 +62,7 @@ a:hover {
.forgot-password:hover { .forgot-password:hover {
color: var(--link-color-hover) !important; color: var(--link-color-hover) !important;
} }
/* SCROLLBAR */ /* SCROLLBAR */
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
border-radius: 3px; border-radius: 3px;
@ -135,6 +148,7 @@ a:hover {
height: auto; height: auto;
width: 16rem !important; width: 16rem !important;
} }
[id*="nav-"] { [id*="nav-"] {
color: var(--text) !important; color: var(--text) !important;
} }
@ -257,11 +271,13 @@ a:hover {
max-height: 290px; max-height: 290px;
max-width: 12rem; max-width: 12rem;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.section h2 { .section h2 {
margin-left: 5px !important; margin-left: 5px !important;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.section h2 { .section h2 {
margin-left: 63px !important; margin-left: 63px !important;
@ -321,14 +337,17 @@ a:hover {
box-shadow: 0 0 0 0 rgb(0 0 0 / 20%), 0 0 0 0 rgb(0 0 0 / 14%), 0 0 0 0 rgb(0 0 0 / 12%); box-shadow: 0 0 0 0 rgb(0 0 0 / 20%), 0 0 0 0 rgb(0 0 0 / 14%), 0 0 0 0 rgb(0 0 0 / 12%);
background: transparent; background: transparent;
} }
#info-wrapper .mat-card .label, #info-wrapper .mat-card .label,
#info-wrapper .mat-card .mat-card-header { #info-wrapper .mat-card .mat-card-header {
color: var(--text-hover); color: var(--text-hover);
} }
#info-wrapper .mat-card,#info-wrapper .mat-card-content { #info-wrapper .mat-card,
#info-wrapper .mat-card-content {
color: var(--text); color: var(--text);
} }
.btn-ombi { .btn-ombi {
background-color: rgba(0, 0, 0, 0.85) !important; background-color: rgba(0, 0, 0, 0.85) !important;
/* backdrop-filter: blur(10px) !important; /* backdrop-filter: blur(10px) !important;
@ -434,6 +453,7 @@ small.important {
color: var(--button-text) !important; color: var(--button-text) !important;
background-color: var(--button-color) !important; background-color: var(--button-color) !important;
} }
.mat-raised-button:not([class*=mat-elevation-z]):not(.mat-raised-button.mat-warn):not(.viewon-btn.plex) { .mat-raised-button:not([class*=mat-elevation-z]):not(.mat-raised-button.mat-warn):not(.viewon-btn.plex) {
box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%); box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
background: var(--button-color); background: var(--button-color);
@ -606,13 +626,15 @@ hr {
} }
.full-screenshot.enabled.overlay { .full-screenshot.enabled.overlay {
background-image: linear-gradient(180deg,transparent,50%,rgb(var(--accent-color), 0.1)); background-image: linear-gradient(180deg, transparent, 50%, rgb(var(--accent-color), 0.1));
} }
.social-icons-container { .social-icons-container {
background-color: hsl(0deg 0% 0% / 85%) !important; background-color: hsl(0deg 0% 0% / 85%) !important;
backdrop-filter: blur(10px) !important; backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important;
} }
/* MODAL */ /* MODAL */
.mat-autocomplete-panel, .mat-autocomplete-panel,
.mat-dialog-container { .mat-dialog-container {
@ -649,6 +671,7 @@ hr {
-o-background-size: auto, cover; -o-background-size: auto, cover;
} }
.mat-progress-spinner.mat-accent circle,.mat-spinner.mat-accent circle { .mat-progress-spinner.mat-accent circle,
.mat-spinner.mat-accent circle {
stroke: rgb(var(--accent-color)); stroke: rgb(var(--accent-color));
} }

532
CSS/themes/ombi/ombiv3-base.css

@ -1,4 +1,3 @@
/* dP dP dP */ /* dP dP dP */
/* 88 88 88 */ /* 88 88 88 */
/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ /* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */
@ -14,95 +13,121 @@
body { body {
background: var(--main-bg-color); background: var(--main-bg-color);
} }
/* Scrollbar */
@media only screen and (min-width: 768px) { /* Scrollbar */
@media only screen and (min-width: 768px) {
html { html {
height: 100%; height: 100%;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
} }
body { body {
overflow-y: auto; overflow-y: auto;
height: 100%; height: 100%;
background: var(--main-bg-color) background: var(--main-bg-color)
} }
} }
::-webkit-scrollbar {
::-webkit-scrollbar {
width: 14px; width: 14px;
} }
::-webkit-scrollbar-thumb {
::-webkit-scrollbar-thumb {
min-height: 50px; min-height: 50px;
border: 3px solid transparent; border: 3px solid transparent;
border-radius: 8px; border-radius: 8px;
background-color: hsla(0,0%,100%,.2); background-color: hsla(0, 0%, 100%, .2);
background-clip: padding-box; background-clip: padding-box;
} }
::-webkit-scrollbar-track {
::-webkit-scrollbar-track {
background-color: transparent; background-color: transparent;
} }
::-webkit-scrollbar-thumb:hover {
::-webkit-scrollbar-thumb:hover {
min-height: 50px; min-height: 50px;
border: 3px solid transparent; border: 3px solid transparent;
border-radius: 8px; border-radius: 8px;
background-color: hsla(0,0%,100%,.5); background-color: hsla(0, 0%, 100%, .5);
background-clip: padding-box; background-clip: padding-box;
} }
/* Navbar */ /* Navbar */
@media (max-width: 924px) { @media (max-width: 924px) {
.collapse.in, .navbar-nav {
.collapse.in,
.navbar-nav {
background: var(--main-bg-color); background: var(--main-bg-color);
} }
} }
@media (max-width: 924px) { @media (max-width: 924px) {
.navbar-left, .navbar-right {
float: none!important; .navbar-left,
.navbar-right {
float: none !important;
box-shadow: 0px 15px 10px -10px rgba(0, 0, 0, 0.7); box-shadow: 0px 15px 10px -10px rgba(0, 0, 0, 0.7);
} }
} }
.navbar-default .navbar-brand { .navbar-default .navbar-brand {
color: var(--accent-color); color: var(--accent-color);
} }
.navbar-default { .navbar-default {
background: var(--main-bg-color); background: var(--main-bg-color);
border-color: #FFF; border-color: #FFF;
} }
.nav-tabs { .nav-tabs {
border-bottom: 1px solid transparent; border-bottom: 1px solid transparent;
margin-bottom: 3px !important; margin-bottom: 3px !important;
} }
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover {
background-color: rgba(0, 0, 0, 0.25); background-color: rgba(0, 0, 0, 0.25);
} }
.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover { .navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>a:hover {
background-color: rgba(255, 255, 255, 0.08); background-color: rgba(255, 255, 255, 0.08);
color: #fff; color: #fff;
} }
.navbar-default .navbar-nav>.open>a { .navbar-default .navbar-nav>.open>a {
background-color: rgba(0, 0, 0, 0.25); background-color: rgba(0, 0, 0, 0.25);
color: #fff; color: #fff;
} }
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:focus,
.navbar-default .navbar-nav>.open>a:hover {
background-color: rgba(0, 0, 0, 0.25); background-color: rgba(0, 0, 0, 0.25);
} }
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover {
background-color: transparent; background-color: transparent;
} }
.ui-tooltip .ui-tooltip-text{
background-color:var(--modal-bg-color) !important; .ui-tooltip .ui-tooltip-text {
background-color: var(--modal-bg-color) !important;
} }
@media (max-width: 924px) { @media (max-width: 924px) {
.navbar-collapse.collapse { .navbar-collapse.collapse {
box-shadow: 0px 15px 10px -10px rgba(0, 0, 0, 0.7); box-shadow: 0px 15px 10px -10px rgba(0, 0, 0, 0.7);
} }
} }
/* Loading bar */ /* Loading bar */
.pace .pace-progress { .pace .pace-progress {
background: var(--loading-bar) !important; background: var(--loading-bar) !important;
} }
.pace .pace-progress-inner { .pace .pace-progress-inner {
box-shadow: 0 0 10px var(--loading-bar), 0 0 5px var(--loading-bar) !important; box-shadow: 0 0 10px var(--loading-bar), 0 0 5px var(--loading-bar) !important;
} }
@ -112,18 +137,22 @@ background-color:var(--modal-bg-color) !important;
border-radius: 3px; border-radius: 3px;
background-color: transparent !important; background-color: transparent !important;
} }
.search-bar-background[_ngcontent-c2] { .search-bar-background[_ngcontent-c2] {
background-color: transparent; background-color: transparent;
} }
@media (min-width: 979px) { @media (min-width: 979px) {
.form-control-search[_ngcontent-c2] { .form-control-search[_ngcontent-c2] {
width: 100%; width: 100%;
}
} }
}
.form-control-custom { .form-control-custom {
background-color: rgba(0, 0, 0, 0.25) !important; background-color: rgba(0, 0, 0, 0.25) !important;
border-radius: 0px; border-radius: 0px;
} }
.form-control-search { .form-control-search {
height: 49px; height: 49px;
} }
@ -131,6 +160,7 @@ background-color:var(--modal-bg-color) !important;
.right-radius { .right-radius {
border-radius: 0px; border-radius: 0px;
} }
.input-group-addon { .input-group-addon {
background-color: rgba(0, 0, 0, 0.25); background-color: rgba(0, 0, 0, 0.25);
border-bottom: 2px; border-bottom: 2px;
@ -139,26 +169,31 @@ background-color:var(--modal-bg-color) !important;
.nav-tabs.nav-justified { .nav-tabs.nav-justified {
margin-bottom: 3px; margin-bottom: 3px;
} }
@media (max-width: 978px) { @media (max-width: 978px) {
.form-control-search[_ngcontent-c1] { .form-control-search[_ngcontent-c1] {
width: -webkit-fill-available !important; width: -webkit-fill-available !important;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.nav-tabs.nav-justified>li>a { .nav-tabs.nav-justified>li>a {
border-bottom: none; border-bottom: none;
}
} }
}
@media (min-width: 979px) { @media (min-width: 979px) {
.form-control-search[_ngcontent-c1] { .form-control-search[_ngcontent-c1] {
width: 100%; width: 100%;
}
} }
}
.refine-option[_ngcontent-c1] { .refine-option[_ngcontent-c1] {
box-shadow: none; box-shadow: none;
} }
#movieTabButton:hover, #tvTabButton:hover {
#movieTabButton:hover,
#tvTabButton:hover {
border: 1px solid transparent; border: 1px solid transparent;
} }
@ -167,23 +202,29 @@ background-color:var(--modal-bg-color) !important;
padding: 15px; padding: 15px;
background: rgba(0, 0, 0, 0.25); background: rgba(0, 0, 0, 0.25);
} }
.table-striped>tbody>tr:nth-of-type(odd) { .table-striped>tbody>tr:nth-of-type(odd) {
background-color: rgba(0, 0, 0, 0.25); background-color: rgba(0, 0, 0, 0.25);
} }
.table-hover>tbody>tr:hover { .table-hover>tbody>tr:hover {
background-color: rgba(255, 255, 255, 0.08); background-color: rgba(255, 255, 255, 0.08);
} }
table.table>thead>tr>th.active { table.table>thead>tr>th.active {
background-color: rgba(255, 255, 255, 0.08); background-color: rgba(255, 255, 255, 0.08);
} }
/*filter */ /*filter */
.ui-widget-content { .ui-widget-content {
background: var(--main-bg-color) !important; background: var(--main-bg-color) !important;
} }
.ui-state-active { .ui-state-active {
color: #ffffff!important; color: #ffffff !important;
background-color: rgba(0, 0, 0, 0.25)!important; background-color: rgba(0, 0, 0, 0.25) !important;
} }
.ui-state-default { .ui-state-default {
border: 2px solid rgba(255, 255, 255, 0.25); border: 2px solid rgba(255, 255, 255, 0.25);
} }
@ -193,13 +234,18 @@ table.table>thead>tr>th.active {
background: var(--modal-bg-color); background: var(--modal-bg-color);
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6); box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
} }
.dropdown-menu>li>a:hover { .dropdown-menu>li>a:hover {
background-color: rgba(255, 255, 255, 0.08); background-color: rgba(255, 255, 255, 0.08);
} }
.navbar-nav>li>.dropdown-menu { .navbar-nav>li>.dropdown-menu {
width: 163.5px; width: 163.5px;
} }
.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover {
.dropdown-menu>.active>a,
.dropdown-menu>.active>a:focus,
.dropdown-menu>.active>a:hover {
background-color: rgba(0, 0, 0, 0.45); background-color: rgba(0, 0, 0, 0.45);
} }
@ -209,26 +255,36 @@ hr {
} }
/* Buttons */ /* Buttons */
.btn-primary-outline{ .btn-primary-outline {
color: var(--request-button) !important; color: var(--request-button) !important;
border-color: var(--request-button) !important; border-color: var(--request-button) !important;
outline: none !important; outline: none !important;
} }
.open>.btn-primary-outline.dropdown-toggle,.btn-primary-outline.active, .btn-primary-outline.focus, .btn-primary-outline:active, .btn-primary-outline:focus, .btn-primary-outline:hover{
.open>.btn-primary-outline.dropdown-toggle,
.btn-primary-outline.active,
.btn-primary-outline.focus,
.btn-primary-outline:active,
.btn-primary-outline:focus,
.btn-primary-outline:hover {
background-color: var(--request-button-hover) !important; background-color: var(--request-button-hover) !important;
border-color: transparent !important; border-color: transparent !important;
} }
.btn-primary-outline:hover { .btn-primary-outline:hover {
background-color: var(--request-button-hover) !important; background-color: var(--request-button-hover) !important;
border-color: transparent!important; border-color: transparent !important;
} }
.btn-link { .btn-link {
color: #ffffff; color: #ffffff;
} }
.btn-link:focus, .btn-link:hover {
.btn-link:focus,
.btn-link:hover {
color: #ddd; color: #ddd;
} }
.input-group-addon .btn-group .btn { .input-group-addon .btn-group .btn {
outline: none !important; outline: none !important;
border: 1px solid transparent !important; border: 1px solid transparent !important;
@ -237,15 +293,26 @@ hr {
padding: 5px 10px; padding: 5px 10px;
width: auto !important; width: auto !important;
} }
.btn-group-vertical>.btn.active, .btn-group-vertical>.btn:active, .btn-group-vertical>.btn:focus, .btn-group-vertical>.btn:hover, .btn-group>.btn.active, .btn-group>.btn:active, .btn-group>.btn:focus, .btn-group>.btn:hover {
.btn-group-vertical>.btn.active,
.btn-group-vertical>.btn:active,
.btn-group-vertical>.btn:focus,
.btn-group-vertical>.btn:hover,
.btn-group>.btn.active,
.btn-group>.btn:active,
.btn-group>.btn:focus,
.btn-group>.btn:hover {
background: rgba(255, 255, 255, 0.35) !important; background: rgba(255, 255, 255, 0.35) !important;
} }
.input-group-btn:last-child>.btn, .input-group-btn:last-child>.btn-group { .input-group-btn:last-child>.btn,
.input-group-btn:last-child>.btn-group {
margin-left: 3px; margin-left: 3px;
} }
i.fa.fa-minus, i.fa.fa-plus {
display:none; i.fa.fa-minus,
i.fa.fa-plus {
display: none;
} }
@ -255,7 +322,7 @@ i.fa.fa-minus, i.fa.fa-plus {
-moz-transition: all .8s; -moz-transition: all .8s;
-webkit-transition: all .8s; -webkit-transition: all .8s;
transition: all .8s; transition: all .8s;
color: #ffffff!important; color: #ffffff !important;
background-color: rgba(255, 255, 255, 0.35); background-color: rgba(255, 255, 255, 0.35);
background-image: none; background-image: none;
text-transform: uppercase; text-transform: uppercase;
@ -266,10 +333,16 @@ i.fa.fa-minus, i.fa.fa-plus {
height: 29.45px; height: 29.45px;
padding: 5px 10px; padding: 5px 10px;
} }
.btn-success-outline.active, .btn-success-outline.focus, .btn-success-outline:active, .btn-success-outline:focus, .btn-success-outline:hover, .open>.btn-success-outline.dropdown-toggle {
color: #fff!important; .btn-success-outline.active,
background-color: rgba(92, 184, 92, .75)!important; .btn-success-outline.focus,
border-color: transparent!important; .btn-success-outline:active,
.btn-success-outline:focus,
.btn-success-outline:hover,
.open>.btn-success-outline.dropdown-toggle {
color: #fff !important;
background-color: rgba(92, 184, 92, .75) !important;
border-color: transparent !important;
} }
.btn-primary-outline { .btn-primary-outline {
@ -290,12 +363,13 @@ i.fa.fa-minus, i.fa.fa-plus {
} }
.btn-info-outline, .btn-danger-outline { .btn-info-outline,
.btn-danger-outline {
-o-transition: all .8s; -o-transition: all .8s;
-moz-transition: all .8s; -moz-transition: all .8s;
-webkit-transition: all .8s; -webkit-transition: all .8s;
transition: all .8s; transition: all .8s;
color: #ffffff!important; color: #ffffff !important;
background-color: rgba(255, 255, 255, 0.35); background-color: rgba(255, 255, 255, 0.35);
background-image: none; background-image: none;
border-color: transparent !important; border-color: transparent !important;
@ -308,12 +382,12 @@ i.fa.fa-minus, i.fa.fa-plus {
padding: 5px 10px; padding: 5px 10px;
} }
.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle) { .btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle) {
-o-transition: all .8s; -o-transition: all .8s;
-moz-transition: all .8s; -moz-transition: all .8s;
-webkit-transition: all .8s; -webkit-transition: all .8s;
transition: all .8s; transition: all .8s;
color: #ffffff!important; color: #ffffff !important;
background-color: rgba(255, 255, 255, 0.35); background-color: rgba(255, 255, 255, 0.35);
background-image: none; background-image: none;
border-color: transparent !important; border-color: transparent !important;
@ -323,70 +397,113 @@ i.fa.fa-minus, i.fa.fa-plus {
height: 29.45px; height: 29.45px;
font-size: 12px; font-size: 12px;
padding: 5px 10px; padding: 5px 10px;
border-radius: .25rem!important; border-radius: .25rem !important;
} }
.btn-split .btn.dropdown-toggle { .btn-split .btn.dropdown-toggle {
border-radius: 0 .25rem .25rem 0!important; border-radius: 0 .25rem .25rem 0 !important;
padding: 3.5px 10px; padding: 3.5px 10px;
border: none; border: none;
} }
.btn-split .btn.dropdown-toggle:hover, .btn-split .btn.dropdown-toggle:active, .btn-split .btn.dropdown-toggle:focus, .btn-split .btn.dropdown-toggle.active {
background: none !important; .btn-split .btn.dropdown-toggle:hover,
.btn-split .btn.dropdown-toggle:active,
.btn-split .btn.dropdown-toggle:focus,
.btn-split .btn.dropdown-toggle.active {
background: none !important;
} }
.btn-warning-outline { .btn-warning-outline {
-o-transition: all .8s; -o-transition: all .8s;
-moz-transition: all .8s; -moz-transition: all .8s;
-webkit-transition: all .8s; -webkit-transition: all .8s;
transition: all .8s; transition: all .8s;
color: #fff!important; color: #fff !important;
background-color: transparent; background-color: transparent;
background-image: none; background-image: none;
border-color: transparent !important; border-color: transparent !important;
} }
.btn-warning-outline.active, .btn-warning-outline.focus, .btn-warning-outline:active, .btn-warning-outline:focus, .btn-warning-outline:hover, .open>.btn-warning-outline.dropdown-toggle,.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle):hover {
color: #fff!important; .btn-warning-outline.active,
background-color: rgba(196, 134, 42, 0.75)!important; .btn-warning-outline.focus,
border-color: transparent!important; .btn-warning-outline:active,
.btn-warning-outline:focus,
.btn-warning-outline:hover,
.open>.btn-warning-outline.dropdown-toggle,
.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle):hover {
color: #fff !important;
background-color: rgba(196, 134, 42, 0.75) !important;
border-color: transparent !important;
} }
.btn-info-outline.active, .btn-info-outline.focus, .btn-info-outline:active, .btn-info-outline:focus, .btn-info-outline:hover, .open>.btn-info-outline.dropdown-toggle { .btn-info-outline.active,
color: #fff!important; .btn-info-outline.focus,
background-color: rgba(91, 192, 222, 0.75)!important; .btn-info-outline:active,
.btn-info-outline:focus,
.btn-info-outline:hover,
.open>.btn-info-outline.dropdown-toggle {
color: #fff !important;
background-color: rgba(91, 192, 222, 0.75) !important;
border-color: transparent !important; border-color: transparent !important;
} }
@media (max-width: 1090px) { @media (max-width: 1090px) {
.btn-danger-outline, .btn-info-outline, .btn-primary-outline, .btn-success-outline, .fa-eye:before, .fa-check:before,.fa-plus:before, .btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle) {
.btn-danger-outline,
.btn-info-outline,
.btn-primary-outline,
.btn-success-outline,
.fa-eye:before,
.fa-check:before,
.fa-plus:before,
.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle) {
content: ""; content: "";
} }
} }
.btn-group .btn+.btn, .btn-group .btn+.btn-group, .btn-group .btn-group+.btn, .btn-group .btn-group+.btn-group {
.btn-group .btn+.btn,
.btn-group .btn+.btn-group,
.btn-group .btn-group+.btn,
.btn-group .btn-group+.btn-group {
margin-left: -25px; margin-left: -25px;
} }
/* Settings menu */ /* Settings menu */
.nav-tabs.nav-justified>.active>a, .nav-tabs.nav-justified>.active>a:focus, .nav-tabs.nav-justified>.active>a:hover { .nav-tabs.nav-justified>.active>a,
.nav-tabs.nav-justified>.active>a:focus,
.nav-tabs.nav-justified>.active>a:hover {
background-color: rgba(0, 0, 0, 0.45) !important; background-color: rgba(0, 0, 0, 0.45) !important;
border: 1px solid #00000000 !important; border: 1px solid #00000000 !important;
border-radius: 3px; border-radius: 3px;
} }
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover {
background-color: rgba(0, 0, 0, 0.45) !important; background-color: rgba(0, 0, 0, 0.45) !important;
border: 1px solid #00000000 !important; border: 1px solid #00000000 !important;
border-radius: 3px; border-radius: 3px;
} }
.nav-tabs>li>a:hover { .nav-tabs>li>a:hover {
border-color: transparent; border-color: transparent;
} }
.nav>li>a:focus, .nav>li>a:hover {
.nav>li>a:focus,
.nav>li>a:hover {
background-color: rgba(255, 255, 255, 0.08); background-color: rgba(255, 255, 255, 0.08);
border-radius: 3px; border-radius: 3px;
} }
.nav .open>a, .nav .open>a:focus, .nav .open>a:hover {
.nav .open>a,
.nav .open>a:focus,
.nav .open>a:hover {
background-color: rgba(0, 0, 0, 0.25); background-color: rgba(0, 0, 0, 0.25);
border-color: #00000000; border-color: #00000000;
} }
.panel { .panel {
background-color: rgba(0, 0, 0, 0.45); background-color: rgba(0, 0, 0, 0.45);
} }
@ -397,29 +514,36 @@ background: none !important;
padding: 10px 15px; padding: 10px 15px;
border-bottom: 1px solid #00000000; border-bottom: 1px solid #00000000;
} }
a.active { a.active {
background-color: rgba(0, 0, 0, 0.45); background-color: rgba(0, 0, 0, 0.45);
} }
.ui-state-highlight { .ui-state-highlight {
background: var(--modal-bg-color); background: var(--modal-bg-color);
} }
legend { legend {
border-bottom: 1px solid rgba(255, 255, 255, 0.25); border-bottom: 1px solid rgba(255, 255, 255, 0.25);
} }
/* Main page */ /* Main page */
.backdrop { .backdrop {
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6) !important; box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6) !important;
} }
a>h4 { a>h4 {
color: var(--accent-color); color: var(--accent-color);
} }
.label-info { .label-info {
background-color: var(--label-color); background-color: var(--label-color);
} }
.label-success { .label-success {
background-color: rgba(92, 184, 92, 0.75); background-color: rgba(92, 184, 92, 0.75);
} }
.fa-film:before { .fa-film:before {
content: "\F008"; content: "\F008";
color: rgba(255, 255, 255, 0.6); color: rgba(255, 255, 255, 0.6);
@ -439,11 +563,12 @@ a>h4 {
.side-back { .side-back {
box-shadow: 0 0 10px #000000ad; box-shadow: 0 0 10px #000000ad;
} }
.form-control:focus { .form-control:focus {
border-color: transparent; border-color: transparent;
outline: 0; outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 3px #000; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 3px #000;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 3px #000; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 3px #000;
} }
@ -451,166 +576,239 @@ a>h4 {
/* OMBI V4*/ /* OMBI V4*/
body { body {
background: var(--main-bg-color); background: var(--main-bg-color);
} }
a {
a {
color: var(--accent-color); color: var(--accent-color);
} }
a:hover {
a:hover {
color: var(--accent-color-hover); color: var(--accent-color-hover);
} }
.mat-drawer-container, .dark .mat-drawer-container { .mat-drawer-container,
.dark .mat-drawer-container {
background: var(--main-bg-color); background: var(--main-bg-color);
color: var(--text); color: var(--text);
} }
/* HEADER */ /* HEADER */
.mat-toolbar.mat-primary, .dark .mat-toolbar.mat-primary { .mat-toolbar.mat-primary,
.dark .mat-toolbar.mat-primary {
background: rgba(0, 0, 0, .25); background: rgba(0, 0, 0, .25);
color: var(--text); color: var(--text);
} }
.dark .mat-toolbar, .mat-toolbar,.mat-list-base .mat-list-item, .mat-list-base .mat-list-option {
.dark .mat-toolbar,
.mat-toolbar,
.mat-list-base .mat-list-item,
.mat-list-base .mat-list-option {
color: var(--text); color: var(--text);
} }
/* SEARCH */ /* SEARCH */
.dark .mat-autocomplete-panel, .mat-autocomplete-panel { .dark .mat-autocomplete-panel,
.mat-autocomplete-panel {
background: var(--modal-bg-color); background: var(--modal-bg-color);
color: var(--text); color: var(--text);
} }
/* SIDEBAR */ /* SIDEBAR */
.dark .mat-drawer, .dark .mat-drawer.mat-drawer-push, .mat-drawer, .mat-drawer.mat-drawer-push { .dark .mat-drawer,
.dark .mat-drawer.mat-drawer-push,
.mat-drawer,
.mat-drawer.mat-drawer-push {
background-color: rgba(0, 0, 0, .25); background-color: rgba(0, 0, 0, .25);
color: var(--text) color: var(--text)
} }
.dark .mat-drawer-side {
.dark .mat-drawer-side {
border-right: 1px solid transparent; border-right: 1px solid transparent;
} }
.dark .active-list-item, .active-list-item, .active-list-item {
.dark .active-list-item,
.active-list-item,
.active-list-item {
background: var(--accent-color) !important; background: var(--accent-color) !important;
background-color: var(--accent-color) !important; background-color: var(--accent-color) !important;
color: var(--text)!important; color: var(--text) !important;
font-weight: 500; font-weight: 500;
} }
/* CARDS */ /* CARDS */
.mat-card, .dark .mat-card { .mat-card,
.dark .mat-card {
background: rgb(0 0 0 / 25%); background: rgb(0 0 0 / 25%);
color: var(--text); color: var(--text);
} }
.grow:hover {
.grow:hover {
transform: scale(1.1); transform: scale(1.1);
color: var(--text-hover) color: var(--text-hover)
} }
.notrequested {
.notrequested {
border-bottom: 3px solid var(--accent-color) !important; border-bottom: 3px solid var(--accent-color) !important;
} }
/* BUTTONS */ /* BUTTONS */
.mat-fab.mat-accent, .mat-flat-button.mat-accent, .mat-mini-fab.mat-accent, .mat-raised-button.mat-accent, .mat-fab.mat-accent,
.dark .mat-fab.mat-accent, .dark .mat-flat-button.mat-accent, .dark .mat-mini-fab.mat-accent, .dark .mat-raised-button.mat-accent { .mat-flat-button.mat-accent,
.mat-mini-fab.mat-accent,
.mat-raised-button.mat-accent,
.dark .mat-fab.mat-accent,
.dark .mat-flat-button.mat-accent,
.dark .mat-mini-fab.mat-accent,
.dark .mat-raised-button.mat-accent {
background-color: var(--button-color); background-color: var(--button-color);
color: var(--text) color: var(--text)
} }
.dark .mat-fab.mat-primary, .dark .mat-flat-button.mat-primary, .dark .mat-mini-fab.mat-primary, .dark .mat-raised-button.mat-primary, .dark .mat-fab.mat-primary,
.mat-fab.mat-primary, .mat-flat-button.mat-primary, .mat-mini-fab.mat-primary, .mat-raised-button.mat-primary { .dark .mat-flat-button.mat-primary,
.dark .mat-mini-fab.mat-primary,
.dark .mat-raised-button.mat-primary,
.mat-fab.mat-primary,
.mat-flat-button.mat-primary,
.mat-mini-fab.mat-primary,
.mat-raised-button.mat-primary {
background: rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .1);
} }
.btn-group-vertical>.btn.active, .btn-group-vertical>.btn:active, .btn-group-vertical>.btn:focus, .btn-group-vertical>.btn:hover, .btn-group>.btn.active, .btn-group>.btn:active, .btn-group>.btn:focus, .btn-group>.btn:hover { .btn-group-vertical>.btn.active,
.btn-group-vertical>.btn:active,
.btn-group-vertical>.btn:focus,
.btn-group-vertical>.btn:hover,
.btn-group>.btn.active,
.btn-group>.btn:active,
.btn-group>.btn:focus,
.btn-group>.btn:hover {
z-index: 1; z-index: 1;
background: var(--button-color-hover) !important; background: var(--button-color-hover) !important;
} }
.btn-group>.btn-group:not(:first-child), .btn-group>.btn:not(:first-child) {
.btn-group>.btn-group:not(:first-child),
.btn-group>.btn:not(:first-child) {
margin-left: 0px; margin-left: 0px;
} }
.mat-raised-button:not([class*=mat-elevation-z]), .dark .mat-raised-button:not([class*=mat-elevation-z]) {
.mat-raised-button:not([class*=mat-elevation-z]),
.dark .mat-raised-button:not([class*=mat-elevation-z]) {
box-shadow: none; box-shadow: none;
} }
button:focus {
button:focus {
outline: 1px dotted; outline: 1px dotted;
outline: none; outline: none;
} }
/* MODAL */
.dark .mat-dialog-container,.mat-dialog-container { /* MODAL */
.dark .mat-dialog-container,
.mat-dialog-container {
background: var(--modal-bg-color); background: var(--modal-bg-color);
color: var(--text); color: var(--text);
} }
div.dark .details, .details { div.dark .details,
.details {
background: transparent !important; background: transparent !important;
} }
/* SETTINGS */ /* SETTINGS */
/* Table */ /* Table */
.mat-table, .dark .mat-table { .mat-table,
.dark .mat-table {
background: #0000002e; background: #0000002e;
color: var(--text) color: var(--text)
} }
.mat-cell, .mat-footer-cell,.dark .mat-cell, .dark .mat-footer-cell {
.mat-cell,
.mat-footer-cell,
.dark .mat-cell,
.dark .mat-footer-cell {
color: var(--text) color: var(--text)
} }
/* Drop down menu*/
.dark .mat-menu-panel,.mat-menu-panel { /* Drop down menu*/
.dark .mat-menu-panel,
.mat-menu-panel {
background: var(--modal-bg-color); background: var(--modal-bg-color);
} }
/* MOVEI TV PAGE*/ /* MOVEI TV PAGE*/
.dark .mat-chip.mat-standard-chip.mat-chip-selected.mat-accent, .mat-chip.mat-standard-chip.mat-chip-selected.mat-accent { .dark .mat-chip.mat-standard-chip.mat-chip-selected.mat-accent,
.mat-chip.mat-standard-chip.mat-chip-selected.mat-accent {
background-color: var(--accent-color); background-color: var(--accent-color);
color: var(--text); color: var(--text);
} }
.mat-expansion-panel, .dark .mat-expansion-panel {
.mat-expansion-panel,
.dark .mat-expansion-panel {
background: rgb(0 0 0 / 25%); background: rgb(0 0 0 / 25%);
color: var(--text) !important; color: var(--text) !important;
} }
.mat-expansion-panel-header-title {
.mat-expansion-panel-header-title {
color: var(--text); color: var(--text);
} }
#info-wrapper .sidebar .poster {
#info-wrapper .sidebar .poster {
border: 3px solid rgb(255 255 255 / 10%); border: 3px solid rgb(255 255 255 / 10%);
box-shadow: none; box-shadow: none;
} }
.ui-carousel-next, body .ui-carousel .ui-carousel-content .ui-carousel-prev {
.ui-carousel-next,
body .ui-carousel .ui-carousel-content .ui-carousel-prev {
background-color: var(--accent-color); background-color: var(--accent-color);
border: 1px solid var(--accent-color); border: 1px solid var(--accent-color);
border-radius: 50%; border-radius: 50%;
margin: .2em; margin: .2em;
color: #fff; color: #fff;
transition: color .2s; transition: color .2s;
} }
body .ui-carousel .ui-carousel-dots-container .ui-carousel-dot-item.ui-state-highlight .ui-carousel-dot-icon {
body .ui-carousel .ui-carousel-dots-container .ui-carousel-dot-item.ui-state-highlight .ui-carousel-dot-icon {
background-color: var(--accent-color); background-color: var(--accent-color);
} }
#summary-wrapper .grey-text {
#summary-wrapper .grey-text {
color: var(--text); color: var(--text);
} }
#info-wrapper .media-icons {
color: var(--text)!important;
}
#info-wrapper .media-icons:hover {
color: var(--text-hover)!important;
}
#info-wrapper .grow-social:hover {
color: var(--text-hover)!important;
}
#info-wrapper .dark .mat-fab, .dark .mat-flat-button, .dark .mat-mini-fab, .dark .mat-raised-button,#info-wrapper .mat-fab, .mat-flat-button, .mat-mini-fab, .mat-raised-button { #info-wrapper .media-icons {
color: var(--text) !important;
}
#info-wrapper .media-icons:hover {
color: var(--text-hover) !important;
}
#info-wrapper .grow-social:hover {
color: var(--text-hover) !important;
}
#info-wrapper .dark .mat-fab,
.dark .mat-flat-button,
.dark .mat-mini-fab,
.dark .mat-raised-button,
#info-wrapper .mat-fab,
.mat-flat-button,
.mat-mini-fab,
.mat-raised-button {
color: #fff; color: #fff;
background-color: var(--button-color); background-color: var(--button-color);
} }
#info-wrapper .dark .mat-mini-fab:hover, #info-wrapper .mat-raised-button:hover {
#info-wrapper .dark .mat-mini-fab:hover,
#info-wrapper .mat-raised-button:hover {
color: #fff; color: #fff;
background-color: var(--button-color-hover); background-color: var(--button-color-hover);
} }

1225
CSS/themes/organizr/organizr-base-old.css

File diff suppressed because it is too large

52
CSS/themes/organizr/organizr-base.css

@ -182,6 +182,7 @@ h6 {
-moz-background-size: auto, cover; -moz-background-size: auto, cover;
-o-background-size: auto, cover; -o-background-size: auto, cover;
} }
.panel-body:not(.unifiCards .panel-body) { .panel-body:not(.unifiCards .panel-body) {
background: var(--modal-bg-color); background: var(--modal-bg-color);
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
@ -587,25 +588,30 @@ th.fc-day-header.fc-widget-header.fc-today {
background: rgba(0, 0, 0, 0.9) !important; background: rgba(0, 0, 0, 0.9) !important;
border: none !important; border: none !important;
} }
#organizr-login-heading > a,
#plex-login-heading > a, #organizr-login-heading>a,
#recoverform > div:nth-child(1) > div > h3, #plex-login-heading>a,
#recoverform > div:nth-child(1) > div > p { #recoverform>div:nth-child(1)>div>h3,
#recoverform>div:nth-child(1)>div>p {
color: #fff !important; color: #fff !important;
} }
#login-username-Input::placeholder, #login-username-Input::placeholder,
#login-password-Input::placeholder, #login-password-Input::placeholder,
#recover-input::placeholder { #recover-input::placeholder {
color: var(--text-muted) !important; color: var(--text-muted) !important;
} }
#to-recover, #to-recover,
label[for="checkbox-login"] { label[for="checkbox-login"] {
color: var(--link-color) !important; color: var(--link-color) !important;
} }
#to-recover:hover, #to-recover:hover,
label[for="checkbox-login"]:hover { label[for="checkbox-login"]:hover {
color: var(--link-color-hover) !important; color: var(--link-color-hover) !important;
} }
@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) { @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
.login-register>.login-box>.white-box { .login-register>.login-box>.white-box {
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6); -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
@ -1167,9 +1173,8 @@ label[for="checkbox-login"]:hover {
} }
.iziToast.update-notify>.iziToast-body .iziToast-icon, .iziToast.update-notify>.iziToast-body .iziToast-icon,
.iziToast.success-notify>.iziToast-body .iziToast-icon .iziToast.success-notify>.iziToast-body .iziToast-icon .iziToast.warning-notify>.iziToast-body .iziToast-icon,
.iziToast.warning-notify>.iziToast-body .iziToast-icon, .iziToast.warning-notify>.iziToast-body .iziToast-icon {
.iziToast.warning-notify > .iziToast-body .iziToast-icon{
color: var(--link-color) !important; color: var(--link-color) !important;
} }
@ -1554,6 +1559,7 @@ body {
.navbar-header { .navbar-header {
background: transparent !important; background: transparent !important;
} }
.dropdown-menu { .dropdown-menu {
background: transparent !important; background: transparent !important;
} }
@ -1606,9 +1612,10 @@ body {
/*Sidebar*/ /*Sidebar*/
@media (max-width: 767px){ @media (max-width: 767px) {
.show-sidebar .sidebar,
.sidebar .sidebar-head { .show-sidebar .sidebar,
.sidebar .sidebar-head {
background: var(--modal-bg-color) !important; background: var(--modal-bg-color) !important;
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
background-attachment: fixed, fixed; background-attachment: fixed, fixed;
@ -1617,8 +1624,9 @@ body {
-webkit-background-size: auto, cover; -webkit-background-size: auto, cover;
-moz-background-size: auto, cover; -moz-background-size: auto, cover;
-o-background-size: auto, cover; -o-background-size: auto, cover;
}
} }
}
.sidebar { .sidebar {
background: rgba(0, 0, 0, 0.26) !important; background: rgba(0, 0, 0, 0.26) !important;
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
@ -1629,7 +1637,7 @@ body {
-moz-background-size: auto, cover; -moz-background-size: auto, cover;
-o-background-size: auto, cover; -o-background-size: auto, cover;
box-shadow: 1px 0px 20px rgba(0, 0, 0, 0.08); box-shadow: 1px 0px 20px rgba(0, 0, 0, 0.08);
transition: max-width .2s cubic-bezier(.4,0,.2,1),background-color .2s ease-out; transition: max-width .2s cubic-bezier(.4, 0, .2, 1), background-color .2s ease-out;
} }
@ -1638,7 +1646,7 @@ body {
background: transparent; background: transparent;
} }
.sidebar:hover{ .sidebar:hover {
background: var(--modal-bg-color) !important; background: var(--modal-bg-color) !important;
background-repeat: repeat, no-repeat !important; background-repeat: repeat, no-repeat !important;
background-attachment: fixed, fixed !important; background-attachment: fixed, fixed !important;
@ -1647,7 +1655,7 @@ body {
-webkit-background-size: auto, cover !important; -webkit-background-size: auto, cover !important;
-moz-background-size: auto, cover !important; -moz-background-size: auto, cover !important;
-o-background-size: auto, cover !important; -o-background-size: auto, cover !important;
transition: max-width .2s cubic-bezier(.4,0,.2,1),background-color .2s ease-out; transition: max-width .2s cubic-bezier(.4, 0, .2, 1), background-color .2s ease-out;
} }
.sidebar .label-custom { .sidebar .label-custom {
@ -1695,6 +1703,7 @@ body {
.user-profile .user-pro-body .u-dropdown { .user-profile .user-pro-body .u-dropdown {
color: var(--text); color: var(--text);
} }
.drop-title { .drop-title {
color: var(--text-hover); color: var(--text-hover);
} }
@ -1730,7 +1739,8 @@ body {
} }
.bg-org:not([id="menu-"]div):not(.panel-heading) { .bg-org:not([id="menu-"]div):not(.panel-heading) {
background: var(--main-bg-color) !important;; background: var(--main-bg-color) !important;
;
-webkit-background-size: auto, cover; -webkit-background-size: auto, cover;
-moz-background-size: auto, cover; -moz-background-size: auto, cover;
-o-background-size: auto, cover; -o-background-size: auto, cover;
@ -1845,7 +1855,7 @@ body {
.login-box, .login-box,
.white-box, .white-box,
body > div.mfp-wrap.mfp-auto-cursor.mfp-zoom-out.mfp-ready > div > div.mfp-content > div > div > div:nth-child(2) { body>div.mfp-wrap.mfp-auto-cursor.mfp-zoom-out.mfp-ready>div>div.mfp-content>div>div>div:nth-child(2) {
background: var(--modal-bg-color); background: var(--modal-bg-color);
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
background-attachment: fixed, fixed; background-attachment: fixed, fixed;
@ -1855,11 +1865,13 @@ body > div.mfp-wrap.mfp-auto-cursor.mfp-zoom-out.mfp-ready > div > div.mfp-conte
-moz-background-size: auto, cover; -moz-background-size: auto, cover;
-o-background-size: auto, cover; -o-background-size: auto, cover;
} }
body > div.mfp-wrap.mfp-auto-cursor.mfp-zoom-out.mfp-ready > div > div.mfp-content > div > div > div.white-box.m-b-0.bg-info > h3 {
body>div.mfp-wrap.mfp-auto-cursor.mfp-zoom-out.mfp-ready>div>div.mfp-content>div>div>div.white-box.m-b-0.bg-info>h3 {
color: var(--label-text-color) !important; color: var(--label-text-color) !important;
} }
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
.orgErrorAlert { .orgErrorAlert {
min-width: 478px; min-width: 478px;
width: calc(100% - 40px); width: calc(100% - 40px);
max-width: 1200px; max-width: 1200px;
@ -1871,7 +1883,7 @@ body > div.mfp-wrap.mfp-auto-cursor.mfp-zoom-out.mfp-ready > div > div.mfp-conte
-webkit-background-size: auto, cover; -webkit-background-size: auto, cover;
-moz-background-size: auto, cover; -moz-background-size: auto, cover;
-o-background-size: auto, cover; -o-background-size: auto, cover;
} }
} }
/* #mediaSearch-area>div>div, /* #mediaSearch-area>div>div,
@ -1957,7 +1969,7 @@ input,
} }
#account-area > div > div > div > div > div.panel-wrapper.collapse.in.main-email-panel > div { #account-area>div>div>div>div>div.panel-wrapper.collapse.in.main-email-panel>div {
background: var(--modal-bg-color); background: var(--modal-bg-color);
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
background-attachment: fixed, fixed; background-attachment: fixed, fixed;

25
CSS/themes/petio/petio-base.css

@ -45,17 +45,19 @@ h4,
h5, h5,
h6, h6,
.person--details p, .person--details p,
.text-wrap > p, .text-wrap>p,
.card .text-wrap .title, .card .text-wrap .title,
.main-title, .main-title,
.media-details .media-title, .single-title, .media-details .media-title,
.single-title,
.sub-title, .sub-title,
.sub-title, .widget--title, .sub-title,
.widget--title,
.settings--menu--item p { .settings--menu--item p {
color: var(--text-hover); color: var(--text-hover);
} }
.card .text-wrap > p { .card .text-wrap>p {
color: var(--text-hover); color: var(--text-hover);
} }
@ -66,6 +68,7 @@ h6,
.settings--menu--item.active { .settings--menu--item.active {
border-bottom: 1px solid rgb(var(--accent-color)); border-bottom: 1px solid rgb(var(--accent-color));
} }
.settings--menu--item:hover { .settings--menu--item:hover {
border-bottom: 1px solid var(--text-hover); border-bottom: 1px solid var(--text-hover);
} }
@ -166,8 +169,8 @@ h6,
.sidebar--item:hover .icon svg path, .sidebar--item:hover .icon svg path,
.menu--item:hover p, .menu--item:hover p,
.menu--item:hover .icon svg path { .menu--item:hover .icon svg path {
color: rgb(var(--accent-color)); color: rgb(var(--accent-color));
fill: rgb(var(--accent-color)); fill: rgb(var(--accent-color));
} }
.sidebar--item .icon svg path, .sidebar--item .icon svg path,
@ -202,6 +205,7 @@ p a:hover,
.widget--item hr { .widget--item hr {
background: rgb(255 255 255 / 50%); background: rgb(255 255 255 / 50%);
} }
.widget--item--inner, .widget--item--inner,
.sr--instance--inner { .sr--instance--inner {
background: hsl(0deg 0% 0% / 15%); background: hsl(0deg 0% 0% / 15%);
@ -321,14 +325,15 @@ code {
} }
/* Keep Plex Button Color*/ /* Keep Plex Button Color*/
#root > div > div.login-wrap > div.login--inner > form > div:nth-child(7) > button, #root>div>div.login-wrap>div.login--inner>form>div:nth-child(7)>button,
#root > div > div.view > div > div > div.settings--content > section:nth-child(2) > button:nth-child(3) { #root>div>div.view>div>div>div.settings--content>section:nth-child(2)>button:nth-child(3) {
background: #d79b23; background: #d79b23;
border: 2px solid #d79b23; border: 2px solid #d79b23;
color: #000; color: #000;
} }
#root > div > div.login-wrap > div.login--inner > form > div:nth-child(7) > button:hover,
#root > div > div.view > div > div > div.settings--content > section:nth-child(2) > button:nth-child(3):hover { #root>div>div.login-wrap>div.login--inner>form>div:nth-child(7)>button:hover,
#root>div>div.view>div>div>div.settings--content>section:nth-child(2)>button:nth-child(3):hover {
background: #ab7b1c; background: #ab7b1c;
border-color: #ab7b1c; border-color: #ab7b1c;
} }

286
CSS/themes/pihole/pihole-base.css

@ -1,16 +1,16 @@
/* dP dP dP */ /* dP dP dP */
/* 88 88 88 */ /* 88 88 88 */
/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ /* 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 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. */ /* 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 */ /* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */
/* 88 */ /* 88 */
/* dP */ /* dP */
/* Made by @gilbN */ /* Made by @gilbN */
/* https://github.com/gilbN/theme.park */ /* https://github.com/gilbN/theme.park */
body { body {
background: var(--main-bg-color) !important; background: var(--main-bg-color) !important;
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
background-attachment: fixed, fixed; background-attachment: fixed, fixed;
@ -20,18 +20,25 @@ body {
-moz-background-size: auto, cover; -moz-background-size: auto, cover;
-o-background-size: auto, cover; -o-background-size: auto, cover;
color: #eee !important; color: #eee !important;
} }
a {
a {
color: var(--link-color); color: var(--link-color);
} }
a:hover, a:active, a:focus,
.treeview-menu > li.active > a, .treeview-menu > li > a:hover { a:hover,
a:active,
a:focus,
.treeview-menu>li.active>a,
.treeview-menu>li>a:hover {
color: var(--accent-color) !important; color: var(--accent-color) !important;
} }
h4 { h4 {
color: var(--accent-color); color: var(--accent-color);
} }
/* Donate dropdown */
/* Donate dropdown */
.skin-blue .main-header li.user-header { .skin-blue .main-header li.user-header {
background: var(--modal-bg-color); background: var(--modal-bg-color);
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
@ -42,6 +49,7 @@ a:hover, a:active, a:focus,
-moz-background-size: auto, cover; -moz-background-size: auto, cover;
-o-background-size: auto, cover; -o-background-size: auto, cover;
} }
.dropdown-menu { .dropdown-menu {
box-shadow: none; box-shadow: none;
border-color: rgba(0, 0, 0, .25); border-color: rgba(0, 0, 0, .25);
@ -54,72 +62,100 @@ a:hover, a:active, a:focus,
-moz-background-size: auto, cover; -moz-background-size: auto, cover;
-o-background-size: auto, cover; -o-background-size: auto, cover;
} }
.navbar-nav>.user-menu>.dropdown-menu>.user-body { .navbar-nav>.user-menu>.dropdown-menu>.user-body {
padding: 15px; padding: 15px;
border-bottom: 1px solid rgba(255, 255, 255, .25); border-bottom: 1px solid rgba(255, 255, 255, .25);
border-top: 1px solid rgba(255, 255, 255, .25); border-top: 1px solid rgba(255, 255, 255, .25);
background-color: rgba(255, 255, 255, .2) !important; background-color: rgba(255, 255, 255, .2) !important;
} }
.navbar-nav>.user-menu>.dropdown-menu>.user-body a { .navbar-nav>.user-menu>.dropdown-menu>.user-body a {
color: white !important; color: white !important;
} }
.navbar-nav>.user-menu>.dropdown-menu>.user-footer { .navbar-nav>.user-menu>.dropdown-menu>.user-footer {
background-color: transparent; background-color: transparent;
} }
/* Header */
.skin-blue .main-header .navbar, .skin-blue .main-header .logo, /* Header */
.main-header .navbar,.main-header .logo { .skin-blue .main-header .navbar,
.skin-blue .main-header .logo,
.main-header .navbar,
.main-header .logo {
background-color: rgba(0, 0, 0, .25); background-color: rgba(0, 0, 0, .25);
} }
.skin-blue .main-header .logo:hover, .skin-blue .main-header .navbar .sidebar-toggle:hover,
.sidebar-menu > li:hover > a, .sidebar-menu > li.active > a { .skin-blue .main-header .logo:hover,
.skin-blue .main-header .navbar .sidebar-toggle:hover,
.sidebar-menu>li:hover>a,
.sidebar-menu>li.active>a {
background-color: rgba(255, 255, 255, .05); background-color: rgba(255, 255, 255, .05);
color: white !important; color: white !important;
} }
/* Footer */ /* Footer */
.main-footer { .main-footer {
background: rgba(0, 0, 0, .25); background: rgba(0, 0, 0, .25);
color: #eee; color: #eee;
border-top: 1px solid rgb(255 255 255 / 20%); border-top: 1px solid rgb(255 255 255 / 20%);
} }
/* Side bar */
/* Side bar */
.skin-blue .sidebar a { .skin-blue .sidebar a {
color: #eee; color: #eee;
} }
.skin-blue .sidebar a:hover { .skin-blue .sidebar a:hover {
color: white !important; color: white !important;
} }
.skin-blue .wrapper, .skin-blue .main-sidebar, .skin-blue .left-side,
.wrapper, .main-sidebar, .left-side { .skin-blue .wrapper,
.skin-blue .main-sidebar,
.skin-blue .left-side,
.wrapper,
.main-sidebar,
.left-side {
background-color: rgba(0, 0, 0, .25) !important; background-color: rgba(0, 0, 0, .25) !important;
} }
.skin-blue .sidebar-menu>li.header, .skin-blue .sidebar-menu>li.header,
.sidebar-menu > li.header { .sidebar-menu>li.header {
color: white; color: white;
background: rgba(0, 0, 0, .2); background: rgba(0, 0, 0, .2);
} }
.treeview-menu > li > a {
.treeview-menu>li>a {
color: #eee !important; color: #eee !important;
} }
.sidebar-menu > li > .treeview-menu {
.sidebar-menu>li>.treeview-menu {
background-color: rgb(0 0 0 / 25%); background-color: rgb(0 0 0 / 25%);
} }
/* Menus */ /* Menus */
.skin-blue .sidebar-menu>li:hover>a, .skin-blue .sidebar-menu>li.active>a, .skin-blue .sidebar-menu>li:hover>a,
.sidebar-menu > li:hover > a, .sidebar-menu > li.active > a { .skin-blue .sidebar-menu>li.active>a,
.sidebar-menu>li:hover>a,
.sidebar-menu>li.active>a {
color: #fff; color: #fff;
background: rgba(0, 0, 0, .1); background: rgba(0, 0, 0, .1);
border-left-color: var(--accent-color); border-left-color: var(--accent-color);
} }
.skin-blue .sidebar-menu>li>.treeview-menu { .skin-blue .sidebar-menu>li>.treeview-menu {
background: rgba(0, 0, 0, .25); background: rgba(0, 0, 0, .25);
} }
.skin-blue .treeview-menu>li>a { .skin-blue .treeview-menu>li>a {
color: #eee; color: #eee;
} }
/* Collapsed menu hover*/ /* Collapsed menu hover*/
@media (min-width: 768px) { @media (min-width: 768px) {
.sidebar-mini.sidebar-collapse .sidebar-menu>li:hover>a>span:not(.pull-right), .sidebar-mini.sidebar-collapse .sidebar-menu>li:hover>.treeview-menu {
.sidebar-mini.sidebar-collapse .sidebar-menu>li:hover>a>span:not(.pull-right),
.sidebar-mini.sidebar-collapse .sidebar-menu>li:hover>.treeview-menu {
background: var(--main-bg-color); background: var(--main-bg-color);
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
background-attachment: fixed, fixed; background-attachment: fixed, fixed;
@ -131,9 +167,11 @@ a:hover, a:active, a:focus,
color: #eee; color: #eee;
} }
} }
/* Pages */
/* Pages */
/*Background*/ /*Background*/
.content-wrapper, .right-side { .content-wrapper,
.right-side {
background-color: var(--main-bg-color); background-color: var(--main-bg-color);
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
background-attachment: fixed, fixed; background-attachment: fixed, fixed;
@ -143,38 +181,49 @@ a:hover, a:active, a:focus,
-moz-background-size: auto, cover; -moz-background-size: auto, cover;
-o-background-size: auto, cover; -o-background-size: auto, cover;
} }
.page-header>small { .page-header>small {
color: #ddd; color: #ddd;
} }
.main-footer .nav-tabs, .nav-tabs-custom .nav-tabs {
.main-footer .nav-tabs,
.nav-tabs-custom .nav-tabs {
background-color: rgb(0 0 0 / 0.25); background-color: rgb(0 0 0 / 0.25);
border-bottom-color: rgb(255 255 255 / 15%); border-bottom-color: rgb(255 255 255 / 15%);
} }
.nav-tabs-custom>.nav-tabs>li:hover { .nav-tabs-custom>.nav-tabs>li:hover {
background-color: rgba(255, 255, 255, .05); background-color: rgba(255, 255, 255, .05);
color: #eee; color: #eee;
border-top-color: var(--accent-color); border-top-color: var(--accent-color);
} }
.nav-tabs-custom > .nav-tabs > li:hover > a {
.nav-tabs-custom>.nav-tabs>li:hover>a {
background-color: rgba(255, 255, 255, .05); background-color: rgba(255, 255, 255, .05);
} }
/* Dashboard */ /* Dashboard */
/*Total Queries box */ /*Total Queries box */
.box-header { .box-header {
color: white; color: white;
} }
.box { .box {
background: rgba(0, 0, 0, .24); background: rgba(0, 0, 0, .24);
border-top: 3px solid #0000; border-top: 3px solid #0000;
box-shadow: 0 1px 1px rgba(0,0,0,0.1); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
} }
.box-solid > .box-header, .box > .box-header {
.box-solid>.box-header,
.box>.box-header {
color: #eee; color: #eee;
background-color: rgba(0, 0, 0, .25); background-color: rgba(0, 0, 0, .25);
} }
.box.box-warning { .box.box-warning {
border-top-color: var(--accent-color); border-top-color: var(--accent-color);
} }
/* /*
.chart svg, .chart canvas, .chartjs-render-monitor, .chart-legend { .chart svg, .chart canvas, .chartjs-render-monitor, .chart-legend {
-webkit-filter: invert(100%); -webkit-filter: invert(100%);
@ -193,73 +242,113 @@ a:hover, a:active, a:focus,
background-color: rgba(0, 166, 90, .45) !important; background-color: rgba(0, 166, 90, .45) !important;
border-top: 3px solid var(--accent-color); border-top: 3px solid var(--accent-color);
} }
/* Queries blocked box*/ /* Queries blocked box*/
.small-box.bg-aqua { .small-box.bg-aqua {
background-color: rgba(0, 192, 239, .45) !important; background-color: rgba(0, 192, 239, .45) !important;
border-top: 3px solid var(--accent-color); border-top: 3px solid var(--accent-color);
} }
/* Percent blocked box */ /* Percent blocked box */
.small-box.bg-yellow { .small-box.bg-yellow {
background-color: rgba(243, 156, 18, .45) !important; background-color: rgba(243, 156, 18, .45) !important;
border-top: 3px solid var(--accent-color); border-top: 3px solid var(--accent-color);
} }
/*Blocklist box*/ /*Blocklist box*/
.small-box.bg-red { .small-box.bg-red {
background-color: rgba(221, 75, 57, .45) !important; background-color: rgba(221, 75, 57, .45) !important;
border-top: 3px solid var(--accent-color); border-top: 3px solid var(--accent-color);
} }
.table-bordered { .table-bordered {
border: 1px solid #f4f4f41a !important; border: 1px solid #f4f4f41a !important;
background: rgba(0, 0, 0, .1); background: rgba(0, 0, 0, .1);
} }
.table-bordered>thead>tr>th, .table-bordered>tbody>tr>th, .table-bordered>tfoot>tr>th, .table-bordered>thead>tr>td, .table-bordered>tbody>tr>td, .table-bordered>tfoot>tr>td {
.table-bordered>thead>tr>th,
.table-bordered>tbody>tr>th,
.table-bordered>tfoot>tr>th,
.table-bordered>thead>tr>td,
.table-bordered>tbody>tr>td,
.table-bordered>tfoot>tr>td {
border: 1px solid rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.15);
} }
.table-striped>tbody>tr:nth-of-type(odd) { .table-striped>tbody>tr:nth-of-type(odd) {
background-color:rgba(255, 255, 255, .1); background-color: rgba(255, 255, 255, .1);
} }
/* Query Log */ /* Query Log */
.text-black { .text-black {
color: #eee!important; color: #eee !important;
} }
.pagination>.disabled>a, .pagination>.disabled>a:focus, .pagination>.disabled>a:hover, .pagination>.disabled>span, .pagination>.disabled>span:focus, .pagination>.disabled>span:hover,
.dataTables_paginate .pagination li > a{ .pagination>.disabled>a,
.pagination>.disabled>a:focus,
.pagination>.disabled>a:hover,
.pagination>.disabled>span,
.pagination>.disabled>span:focus,
.pagination>.disabled>span:hover,
.dataTables_paginate .pagination li>a {
color: rgba(238, 238, 238, .5); color: rgba(238, 238, 238, .5);
background-color: rgba(255, 255, 255, .1); background-color: rgba(255, 255, 255, .1);
border-color: #ddd0; border-color: #ddd0;
} }
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover,
.paginate_button .active #all-queries_wrapper .pagination > li > a{ .pagination>.active>a,
.pagination>.active>a:focus,
.pagination>.active>a:hover,
.pagination>.active>span,
.pagination>.active>span:focus,
.pagination>.active>span:hover,
.paginate_button .active #all-queries_wrapper .pagination>li>a {
color: #fff; color: #fff;
background-color: var(--button-color); background-color: var(--button-color);
border-color: var(--button-color); border-color: var(--button-color);
} }
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
.pagination>.active>a,
.pagination>.active>a:focus,
.pagination>.active>a:hover,
.pagination>.active>span,
.pagination>.active>span:focus,
.pagination>.active>span:hover {
color: #fff !important; color: #fff !important;
background-color: var(--button-color-hover); background-color: var(--button-color-hover);
border-color: var(--button-color-hover); border-color: var(--button-color-hover);
} }
.pagination>li>a { .pagination>li>a {
background: rgba(0, 0, 0, 0.25); background: rgba(0, 0, 0, 0.25);
color: #eee; color: #eee;
border: 1px solid rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.07);
} }
.pagination>li>a:focus, .pagination>li>a:hover, .pagination>li>span:focus, .pagination>li>span:hover {
.pagination>li>a:focus,
.pagination>li>a:hover,
.pagination>li>span:focus,
.pagination>li>span:hover {
color: rgb(255, 255, 255) !important; color: rgb(255, 255, 255) !important;
background-color: rgba(255, 255, 255, .25); background-color: rgba(255, 255, 255, .25);
border-color: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.07);
} }
/* Login */ /* Login */
.panel-default { .panel-default {
border-color: transparent; border-color: transparent;
background: rgba(0, 0, 0, 0.25); background: rgba(0, 0, 0, 0.25);
} }
.panel-default>.panel-heading { .panel-default>.panel-heading {
color: #eee; color: #eee;
background-color: inherit; background-color: inherit;
border-color: transparent; border-color: transparent;
} }
.panel, .panel-body, .panel-default > .panel-heading {
.panel,
.panel-body,
.panel-default>.panel-heading {
background-color: rgb(0 0 0 / 25%); background-color: rgb(0 0 0 / 25%);
border-radius: 0px; border-radius: 0px;
border: 1px solid transparent; border: 1px solid transparent;
@ -270,25 +359,32 @@ a:hover, a:active, a:focus,
.nav-tabs-custom { .nav-tabs-custom {
background: rgba(0, 0, 0, 0.25); background: rgba(0, 0, 0, 0.25);
} }
.nav-tabs-custom>.tab-content { .nav-tabs-custom>.tab-content {
background: transparent; background: transparent;
} }
.nav-tabs-custom>.nav-tabs>li.active { .nav-tabs-custom>.nav-tabs>li.active {
border-top-color: var(--accent-color); border-top-color: var(--accent-color);
} }
.nav-tabs-custom>.nav-tabs>li.active>a { .nav-tabs-custom>.nav-tabs>li.active>a {
border-top-color: transparent; border-top-color: transparent;
border-left-color: rgba(255, 255, 255, 0.1); border-left-color: rgba(255, 255, 255, 0.1);
border-right-color: rgba(255, 255, 255, 0.1); border-right-color: rgba(255, 255, 255, 0.1);
} }
.nav-tabs-custom>.nav-tabs>li.active>a, .nav-tabs-custom>.nav-tabs>li.active:hover>a {
.nav-tabs-custom>.nav-tabs>li.active>a,
.nav-tabs-custom>.nav-tabs>li.active:hover>a {
background-color: rgba(0, 0, 0, 0.25); background-color: rgba(0, 0, 0, 0.25);
color: #eee !important; color: #eee !important;
} }
.nav-tabs-custom>.nav-tabs>li>a { .nav-tabs-custom>.nav-tabs>li>a {
color: #eee !important; color: #eee !important;
border-radius: 0; border-radius: 0;
} }
.input-group .input-group-addon { .input-group .input-group-addon {
border-radius: 0; border-radius: 0;
border-color: #d2d6de00; border-color: #d2d6de00;
@ -298,69 +394,100 @@ a:hover, a:active, a:focus,
/* Network */ /* Network */
.table-striped>tbody>tr:nth-of-type(odd) { .table-striped>tbody>tr:nth-of-type(odd) {
background-color:rgba(0, 0, 0, .25) !important; background-color: rgba(0, 0, 0, .25) !important;
} }
.table-striped>tbody>tr:nth-of-type(even) { .table-striped>tbody>tr:nth-of-type(even) {
background-color:rgba(0, 0, 0, .5) !important; background-color: rgba(0, 0, 0, .5) !important;
} }
#network-entries_wrapper.text-center { #network-entries_wrapper.text-center {
text-align: center; text-align: center;
color: #eee !important; color: #eee !important;
} }
/* Buttons */
button,.btn-default { /* Buttons */
background-color:var(--button-color) !important; button,
border:1px solid var(--button-color) !important; .btn-default {
background-color: var(--button-color) !important;
border: 1px solid var(--button-color) !important;
color: white !important; color: white !important;
} }
.btn-primary:hover, .btn-primary:active, .btn-primary.hover {
.btn-primary:hover,
.btn-primary:active,
.btn-primary.hover {
background-color: var(--button-color-hover) !important; background-color: var(--button-color-hover) !important;
} }
.btn-default:hover, .btn-default:active, .btn-default.hover {
.btn-default:hover,
.btn-default:active,
.btn-default.hover {
background-color: var(--button-color-hover) !important; background-color: var(--button-color-hover) !important;
} }
.box.box-solid>.box-header .btn:hover, .box.box-solid>.box-header a:hover {
.box.box-solid>.box-header .btn:hover,
.box.box-solid>.box-header a:hover {
background: var(--button-color-hover) !important; background: var(--button-color-hover) !important;
border: 1px solid transparent !important border: 1px solid transparent !important
} }
.box.box-solid.box-info>.box-header, .box.box-solid.box-info {
.box.box-solid.box-info>.box-header,
.box.box-solid.box-info {
color: #fff; color: #fff;
background: var(--button-color) !important; background: var(--button-color) !important;
border: 1px solid var(--button-color) !important; border: 1px solid var(--button-color) !important;
} }
.btn-danger { .btn-danger {
background-color: #dd4b39 !important; background-color: #dd4b39 !important;
border-color: #d73925 !important; border-color: #d73925 !important;
} }
.btn-danger:hover, .btn-danger:active, .btn-danger.hover {
.btn-danger:hover,
.btn-danger:active,
.btn-danger.hover {
background-color: #d73925 !important; background-color: #d73925 !important;
} }
.btn-warning { .btn-warning {
background-color: #f39c12 !important; background-color: #f39c12 !important;
border-color: #e08e0b !important; border-color: #e08e0b !important;
} }
.btn-warning:hover { .btn-warning:hover {
color: #fff; color: #fff;
background-color: #ec971f !important; background-color: #ec971f !important;
border-color: #d58512 !important; border-color: #d58512 !important;
} }
.icheck-primary>input:first-child:checked+input[type=hidden]+label::before, .icheck-primary>input:first-child:checked+label::before {
.icheck-primary>input:first-child:checked+input[type=hidden]+label::before,
.icheck-primary>input:first-child:checked+label::before {
background-color: var(--button-color) !important; background-color: var(--button-color) !important;
border-color: var(--button-color) !important; border-color: var(--button-color) !important;
} }
.icheck-primary>input:first-child:not(:checked):not(:disabled):hover+input[type=hidden]+label::before, .icheck-primary>input:first-child:not(:checked):not(:disabled):hover+label::before {
.icheck-primary>input:first-child:not(:checked):not(:disabled):hover+input[type=hidden]+label::before,
.icheck-primary>input:first-child:not(:checked):not(:disabled):hover+label::before {
border-color: var(--button-color) !important; border-color: var(--button-color) !important;
} }
/* Input */
input,.form-control,pre,.box-footer,.datatables_processing { /* Input */
background:#080909; input,
border:1px solid #666; .form-control,
color:#b2b2b2; pre,
.box-footer,
.datatables_processing {
background: #080909;
border: 1px solid #666;
color: #b2b2b2;
} }
.dataTables_wrapper input[type="search"] { .dataTables_wrapper input[type="search"] {
background-color: #ffffff; background-color: #ffffff;
color: #000000; color: #000000;
} }
input, input,
select, select,
select.form-control, select.form-control,
@ -380,23 +507,27 @@ a:hover, a:active, a:focus,
color: #eee; color: #eee;
border: 1px solid rgb(255 255 255 / 15%); border: 1px solid rgb(255 255 255 / 15%);
} }
.form-control:focus { .form-control:focus {
border-color: rgb(255 255 255 / 0.25); border-color: rgb(255 255 255 / 0.25);
box-shadow: none; box-shadow: none;
} }
/* Scrollbar */
::-webkit-scrollbar { /* Scrollbar */
::-webkit-scrollbar {
width: 0px; width: 0px;
} }
::-webkit-scrollbar-thumb {
::-webkit-scrollbar-thumb {
min-height: 50px; min-height: 50px;
border: 3px solid transparent; border: 3px solid transparent;
border-radius: 8px; border-radius: 8px;
background-color: hsla(0,0%,100%,.2); background-color: hsla(0, 0%, 100%, .2);
background-clip: padding-box; background-clip: padding-box;
} }
::-webkit-scrollbar-track {
::-webkit-scrollbar-track {
background: var(--main-bg-color); background: var(--main-bg-color);
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
background-attachment: fixed, fixed; background-attachment: fixed, fixed;
@ -405,11 +536,12 @@ a:hover, a:active, a:focus,
-webkit-background-size: auto, cover; -webkit-background-size: auto, cover;
-moz-background-size: auto, cover; -moz-background-size: auto, cover;
-o-background-size: auto, cover; -o-background-size: auto, cover;
} }
::-webkit-scrollbar-thumb:hover {
::-webkit-scrollbar-thumb:hover {
min-height: 50px; min-height: 50px;
border: 3px solid transparent; border: 3px solid transparent;
border-radius: 8px; border-radius: 8px;
background-color: hsla(0,0%,100%,.5); background-color: hsla(0, 0%, 100%, .5);
background-clip: padding-box; background-clip: padding-box;
} }

3
CSS/themes/plex/plex-base.css

@ -180,15 +180,18 @@ a[class*="MetadataTableRow-title-"]:hover {
[class*="NavBarActivityButton-isHighlighted-"] [class*="NavBarActivityButton-activityIcon-"] { [class*="NavBarActivityButton-isHighlighted-"] [class*="NavBarActivityButton-activityIcon-"] {
color: rgb(var(--accent-color)); color: rgb(var(--accent-color));
} }
/* old plex web */ /* old plex web */
.NavBarActivityButton-isHighlighted-2YqjDs .NavBarActivityButton-activityIcon-3gF_TD { .NavBarActivityButton-isHighlighted-2YqjDs .NavBarActivityButton-activityIcon-3gF_TD {
background-color: rgb(var(--accent-color)); background-color: rgb(var(--accent-color));
color: var(--label-text-color); color: var(--label-text-color);
} }
.NavBarActivityButton-isHighlighted-2YqjDs:hover .NavBarActivityButton-activityIcon-3gF_TD { .NavBarActivityButton-isHighlighted-2YqjDs:hover .NavBarActivityButton-activityIcon-3gF_TD {
background-color: var(--accent-color-hover); background-color: var(--accent-color-hover);
color: var(--label-text-color) !important; color: var(--label-text-color) !important;
} }
/* /old plex web */ /* /old plex web */
[class*="NavBarActivityButton-isHighlighted-"]:hover [class*="NavBarActivityButton-activityIcon-"] { [class*="NavBarActivityButton-isHighlighted-"]:hover [class*="NavBarActivityButton-activityIcon-"] {

184
CSS/themes/plpp/plpp-base.css

@ -1,4 +1,3 @@
/* dP dP dP */ /* dP dP dP */
/* 88 88 88 */ /* 88 88 88 */
/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ /* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */
@ -21,19 +20,21 @@ body {
-moz-background-size: auto, cover; -moz-background-size: auto, cover;
-o-background-size: auto, cover; -o-background-size: auto, cover;
background-color: transparent; background-color: transparent;
color:hsla(0,0%,100%,.7)!important; color: hsla(0, 0%, 100%, .7) !important;
font-family: Open Sans Bold,Helvetica Neue,Helvetica,Arial,sans-serif !important; font-family: Open Sans Bold, Helvetica Neue, Helvetica, Arial, sans-serif !important;
font-size: 1.4em !important; font-size: 1.4em !important;
overflow-y: auto; overflow-y: auto;
height: 100%; height: 100%;
} }
/* Scrollbar */
@media only screen and (min-width: 768px) { /* Scrollbar */
@media only screen and (min-width: 768px) {
html { html {
height: 100%; height: 100%;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
} }
body { body {
overflow-y: auto; overflow-y: auto;
height: 100%; height: 100%;
@ -47,26 +48,31 @@ body {
-o-background-size: auto, cover; -o-background-size: auto, cover;
} }
} }
::-webkit-scrollbar {
::-webkit-scrollbar {
width: 14px; width: 14px;
} }
::-webkit-scrollbar-thumb {
::-webkit-scrollbar-thumb {
min-height: 50px; min-height: 50px;
border: 3px solid transparent; border: 3px solid transparent;
border-radius: 8px; border-radius: 8px;
background-color: hsla(0,0%,100%,.2); background-color: hsla(0, 0%, 100%, .2);
background-clip: padding-box; background-clip: padding-box;
} }
::-webkit-scrollbar-track {
::-webkit-scrollbar-track {
background-color: transparent; background-color: transparent;
} }
::-webkit-scrollbar-thumb:hover {
::-webkit-scrollbar-thumb:hover {
min-height: 50px; min-height: 50px;
border: 3px solid transparent; border: 3px solid transparent;
border-radius: 8px; border-radius: 8px;
background-color: hsla(0,0%,100%,.5); background-color: hsla(0, 0%, 100%, .5);
background-clip: padding-box; background-clip: padding-box;
} }
legend { legend {
border-bottom: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 1px solid rgba(255, 255, 255, 0.08);
} }
@ -79,18 +85,25 @@ legend {
.side-nav { .side-nav {
background-color: rgba(0, 0, 0, 0.15); background-color: rgba(0, 0, 0, 0.15);
} }
.navbar-inverse .navbar-nav > li > a {
color: hsla(0,0%,100%,.7); .navbar-inverse .navbar-nav>li>a {
color: hsla(0, 0%, 100%, .7);
} }
.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus {
background-color: hsla(0,0%,100%,.08); .navbar-inverse .navbar-nav>li>a:hover,
.navbar-inverse .navbar-nav>li>a:focus {
background-color: hsla(0, 0%, 100%, .08);
} }
.nav > li.selected > a {
.nav>li.selected>a {
background-color: transparent; background-color: transparent;
color: #f9be03 !important; color: #f9be03 !important;
} }
@media only screen and (max-width: 768px) {
.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form { @media only screen and (max-width: 768px) {
.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
border-color: transparent; border-color: transparent;
background: var(--modal-bg-color); background: var(--modal-bg-color);
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
@ -100,18 +113,22 @@ legend {
-webkit-background-size: auto, cover; -webkit-background-size: auto, cover;
-moz-background-size: auto, cover; -moz-background-size: auto, cover;
-o-background-size: auto, cover; -o-background-size: auto, cover;
}
} }
.breadcrumb > .active { }
.breadcrumb>.active {
text-transform: uppercase; text-transform: uppercase;
text-transform: bold; text-transform: bold;
} }
.panel, .panel-default > .panel-heading, .breadcrumb > .active {
.panel,
.panel-default>.panel-heading,
.breadcrumb>.active {
background-color: transparent; background-color: transparent;
border: transparent; border: transparent;
color: inherit; color: inherit;
font-size: 15px; font-size: 15px;
font-family: Open Sans Bold,Helvetica Neue,Helvetica,Arial,sans-serif !important; font-family: Open Sans Bold, Helvetica Neue, Helvetica, Arial, sans-serif !important;
line-height: 24px; line-height: 24px;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
@ -119,35 +136,65 @@ legend {
user-select: none; user-select: none;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0); box-shadow: 0 1px 1px rgba(0, 0, 0, 0);
} }
.plpp_table.even:hover, .plpp_table.odd:hover {
background-color: hsla(0,0%,100%,.08) !important; .plpp_table.even:hover,
.plpp_table.odd:hover {
background-color: hsla(0, 0%, 100%, .08) !important;
} }
.panel-heading {
font-weight: bold; .panel-heading {
font-weight: bold;
} }
.plpp_thumbs_Title:hover, .plpp_slider_Title:hover, .plpp_thumbs_Episode_Title:hover,
.plpp_slider_Episode_Title:hover, .plpp_thumbs_Season_Title:hover, .plpp_slider_Season_Title:hover, .plpp_thumbs_Title:hover,
.plpp_thumbs_Show_Title:hover, .plpp_slider_Show_Title:hover, .plpp_thumbs_Artist:hover, .plpp_slider_Artist:hover, .plpp_slider_Title:hover,
.plpp_thumbs_Year:hover, .plpp_thumbs_Episode_No:hover, .plpp_slider_Year:hover, .plpp_slider_Episode_no:hover, .plpp_thumbs_Episode_Title:hover,
.plpp_thumbs_Track_no:hover, .plpp_slider_Track_no:hover, .plpp_thumbs_Episode_Count:hover, .plpp_slider_Episode_Count:hover, .plpp_slider_Episode_Title:hover,
.plpp_thumbs_Track_Count:hover, .plpp_slider_Track_Count:hover, .plpp_thumbs_Dimensions:hover, .plpp_slider_Dimensions:hover, .plpp_thumbs_Season_Title:hover,
.plpp_thumbs_Duration:hover, .plpp_slider_Duration:hover { .plpp_slider_Season_Title:hover,
text-decoration: underline; .plpp_thumbs_Show_Title:hover,
.plpp_slider_Show_Title:hover,
.plpp_thumbs_Artist:hover,
.plpp_slider_Artist:hover,
.plpp_thumbs_Year:hover,
.plpp_thumbs_Episode_No:hover,
.plpp_slider_Year:hover,
.plpp_slider_Episode_no:hover,
.plpp_thumbs_Track_no:hover,
.plpp_slider_Track_no:hover,
.plpp_thumbs_Episode_Count:hover,
.plpp_slider_Episode_Count:hover,
.plpp_thumbs_Track_Count:hover,
.plpp_slider_Track_Count:hover,
.plpp_thumbs_Dimensions:hover,
.plpp_slider_Dimensions:hover,
.plpp_thumbs_Duration:hover,
.plpp_slider_Duration:hover {
text-decoration: underline;
} }
.img-rounded { .img-rounded {
border-radius: 0px; border-radius: 0px;
} }
.img-rounded:hover { .img-rounded:hover {
border-radius: 0px; border-radius: 0px;
box-shadow: 0 0 0 2px #cc7b19; box-shadow: 0 0 0 2px #cc7b19;
background: radial-gradient(farthest-corner at 50% 50%,rgba(50,50,50,.5) 50%,#323232 100%); background: radial-gradient(farthest-corner at 50% 50%, rgba(50, 50, 50, .5) 50%, #323232 100%);
opacity: .7; opacity: .7;
transition: linear .2s; transition: linear .2s;
} }
.img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img {
.img-responsive,
.thumbnail>img,
.thumbnail a>img,
.carousel-inner>.item>img,
.carousel-inner>.item>a>img {
width: 100%; width: 100%;
} }
div.modal-content > div.modal-body > div.plpp_details_container > div.plpp_details_Thumbnail, div.plpp_details_Poster > .img-rounded {
div.modal-content>div.modal-body>div.plpp_details_container>div.plpp_details_Thumbnail,
div.plpp_details_Poster>.img-rounded {
box-shadow: none; box-shadow: none;
opacity: 1; opacity: 1;
} }
@ -155,33 +202,54 @@ div.modal-content > div.modal-body > div.plpp_details_container > div.plpp_detai
div.plpp_slider { div.plpp_slider {
margin: 2px 15px 10px 2px; margin: 2px 15px 10px 2px;
} }
table { table {
background-color: rgba(0, 0, 0, 0.25); background-color: rgba(0, 0, 0, 0.25);
} }
table, .table {
color: hsla(0,0%,100%,.7); table,
.table {
color: hsla(0, 0%, 100%, .7);
} }
.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
border-top: 1px solid rgba(255,255,255,.15); .table>thead>tr>th,
.table>tbody>tr>th,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>tbody>tr>td,
.table>tfoot>tr>td {
border-top: 1px solid rgba(255, 255, 255, .15);
} }
.table > thead > tr > th {
.table>thead>tr>th {
vertical-align: bottom; vertical-align: bottom;
border-bottom: 2px solid rgba(255,255,255,.15); border-bottom: 2px solid rgba(255, 255, 255, .15);
} }
.pagination > li > a, .pagination > li > span {
.pagination>li>a,
.pagination>li>span {
color: #ffffff; color: #ffffff;
background-color: rgba(0, 0, 0, 0.25); background-color: rgba(0, 0, 0, 0.25);
border: transparent; border: transparent;
} }
.pagination > .disabled > span, .pagination > .disabled > span:hover, .pagination > .disabled > span:focus, .pagination > .disabled > a, .pagination > .disabled > a:hover, .pagination > .disabled > a:focus {
.pagination>.disabled>span,
.pagination>.disabled>span:hover,
.pagination>.disabled>span:focus,
.pagination>.disabled>a,
.pagination>.disabled>a:hover,
.pagination>.disabled>a:focus {
color: #BDBDBD; color: #BDBDBD;
background-color: rgba(0, 0, 0, 0.25); background-color: rgba(0, 0, 0, 0.25);
border: transparent; border: transparent;
cursor: not-allowed; cursor: not-allowed;
} }
/* Modal */ /* Modal */
.modal-header, div.modal-body, .modal-footer { .modal-header,
border-bottom: 1px solid rgba(255,255,255,.15); div.modal-body,
.modal-footer {
border-bottom: 1px solid rgba(255, 255, 255, .15);
background: var(--modal-bg-color); background: var(--modal-bg-color);
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
background-attachment: fixed, fixed; background-attachment: fixed, fixed;
@ -191,18 +259,26 @@ table, .table {
-moz-background-size: auto, cover; -moz-background-size: auto, cover;
-o-background-size: auto, cover; -o-background-size: auto, cover;
} }
/* Buttons */ /* Buttons */
.btn-default { .btn-default {
background-color: var(--button-color); background-color: var(--button-color);
border-color: transparent; border-color: transparent;
} }
.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default {
.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active,
.open .dropdown-toggle.btn-default {
background-color: var(--button-color-hover); background-color: var(--button-color-hover);
border-color: transparent; border-color: transparent;
} }
.modal-header .close { .modal-header .close {
color: #dadada; color: #dadada;
} }
.modal-header .close:hover { .modal-header .close:hover {
color: #fff; color: #fff;
} }

11
CSS/themes/prowlarr/prowlarr-base.css

@ -566,6 +566,7 @@ a:hover {
-o-background-size: auto, cover; -o-background-size: auto, cover;
color: var(--text); color: var(--text);
} }
[class*="EnhancedSelectInputOption-isSelected-"], [class*="EnhancedSelectInputOption-isSelected-"],
[class*="EnhancedSelectInputOption-isSelected-"]:hover { [class*="EnhancedSelectInputOption-isSelected-"]:hover {
background-color: rgba(255, 255, 255, 0.20) !important; background-color: rgba(255, 255, 255, 0.20) !important;
@ -656,6 +657,7 @@ a:hover {
input::-webkit-input-placeholder { input::-webkit-input-placeholder {
color: var(--text); color: var(--text);
} }
input:focus::-webkit-input-placeholder { input:focus::-webkit-input-placeholder {
color: var(--text-hover); color: var(--text-hover);
} }
@ -664,6 +666,7 @@ input:focus::-webkit-input-placeholder {
input:-moz-placeholder { input:-moz-placeholder {
color: var(--text); color: var(--text);
} }
input:focus:-moz-placeholder { input:focus:-moz-placeholder {
color: var(--text-hover); color: var(--text-hover);
} }
@ -672,6 +675,7 @@ input:focus:-moz-placeholder {
input::-moz-placeholder { input::-moz-placeholder {
color: var(--text); color: var(--text);
} }
input:focus::-moz-placeholder { input:focus::-moz-placeholder {
color: var(--text-hover); color: var(--text-hover);
} }
@ -680,6 +684,7 @@ input:focus::-moz-placeholder {
input:-ms-input-placeholder { input:-ms-input-placeholder {
color: var(--text); color: var(--text);
} }
input:focus:-ms-input-placeholder { input:focus:-ms-input-placeholder {
color: var(--text-hover); color: var(--text-hover);
} }
@ -1057,12 +1062,14 @@ input[type=password] {
background-color: var(--button-color); background-color: var(--button-color);
cursor: pointer; cursor: pointer;
} }
.button:hover { .button:hover {
border-color: var(--button-color-hover); border-color: var(--button-color-hover);
background-color: var(--button-color-hover); background-color: var(--button-color-hover);
color: #fff; color: #fff;
text-decoration: none; text-decoration: none;
} }
.form-input:focus { .form-input:focus {
outline: 0; outline: 0;
border-color: #fff; border-color: #fff;
@ -1085,10 +1092,10 @@ input[type=password] {
/* ChartJS */ /* ChartJS */
[class*="Stats-fullWidthChart-"], [class*="Stats-fullWidthChart-"],
[class*="Stats-halfWidthChart-"]{ [class*="Stats-halfWidthChart-"] {
background: rgba(0, 0, 0, .25) !important; background: rgba(0, 0, 0, .25) !important;
} }
canvas { canvas {
filter: invert(1) filter: invert(1)
} }

15
CSS/themes/qbittorrent/qbittorrent-base.css

@ -300,12 +300,14 @@ label {
} }
.dynamicTable tbody tr.selected { .dynamicTable tbody tr.selected {
background-color: rgba(var(--accent-color),0.6) !important; background-color: rgba(var(--accent-color), 0.6) !important;
color: var(--label-text-color); color: var(--label-text-color);
} }
.dynamicTable th.sorted.reverse { .dynamicTable th.sorted.reverse {
background-image: url(https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/qbittorrent/go-down.png) !important; background-image: url(https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/qbittorrent/go-down.png) !important;
} }
.dynamicTable th.sorted { .dynamicTable th.sorted {
background-image: url(https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/qbittorrent/go-up.png) !important; background-image: url(https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/qbittorrent/go-up.png) !important;
background-size: 9px !important; background-size: 9px !important;
@ -313,6 +315,7 @@ label {
background-repeat: no-repeat !important; background-repeat: no-repeat !important;
} }
.panel { .panel {
background: var(--main-bg-color); background: var(--main-bg-color);
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
@ -414,9 +417,8 @@ li.divider {
background-color: rgba(255, 255, 255, .08) !important; background-color: rgba(255, 255, 255, .08) !important;
color: var(--text-hover); color: var(--text-hover);
} }
.contextMenu li a:hover {
} .contextMenu li a:hover {}
.contextMenu li ul { .contextMenu li ul {
border: 1px solid transparent; border: 1px solid transparent;
@ -436,7 +438,7 @@ li.divider {
/* Sidemenu */ /* Sidemenu */
.selectedFilter { .selectedFilter {
background-color: rgba(var(--accent-color),0.6); background-color: rgba(var(--accent-color), 0.6);
color: #eee; color: #eee;
} }
@ -445,7 +447,7 @@ li.divider {
} }
ul.filterList li:hover { ul.filterList li:hover {
background-color: rgba(var(--accent-color),0.6); background-color: rgba(var(--accent-color), 0.6);
color: var(--button-color-hover) !important; color: var(--button-color-hover) !important;
} }
@ -1778,7 +1780,8 @@ img[src="icons/checking.svg"] {
.contextMenu li a.arrow-right, .contextMenu li a.arrow-right,
.contextMenu li a:hover.arrow-right, .contextMenu li a:hover.arrow-right,
.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(https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/qbittorrent/arrow-right.gif); background-image: url(https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/qbittorrent/arrow-right.gif);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: right center; background-position: right center;

10
CSS/themes/radarr/radarr-base.css

@ -272,6 +272,7 @@ a:hover {
[class*="MovieIndexPoster-controls-"] { [class*="MovieIndexPoster-controls-"] {
background-color: rgb(var(--accent-color)) !important; background-color: rgb(var(--accent-color)) !important;
} }
[class*="MovieTitlesTableContent-blankpad-"], [class*="MovieTitlesTableContent-blankpad-"],
[class*="ExtraFileTableContent-blankpad-"], [class*="ExtraFileTableContent-blankpad-"],
[class*="MovieHistoryTableContent-blankpad-"] { [class*="MovieHistoryTableContent-blankpad-"] {
@ -571,6 +572,7 @@ a:hover {
-o-background-size: auto, cover; -o-background-size: auto, cover;
color: var(--text); color: var(--text);
} }
[class*="EnhancedSelectInputOption-isSelected-"], [class*="EnhancedSelectInputOption-isSelected-"],
[class*="EnhancedSelectInputOption-isSelected-"]:hover { [class*="EnhancedSelectInputOption-isSelected-"]:hover {
background-color: rgba(255, 255, 255, 0.20) !important; background-color: rgba(255, 255, 255, 0.20) !important;
@ -630,7 +632,7 @@ a:hover {
[class*="PageContentBody-innerContentBody-"], [class*="PageContentBody-innerContentBody-"],
[class*="PageContentBody-contentBody-"], [class*="PageContentBody-contentBody-"],
.react-tabs__tab-panel .react-tabs__tab-panel--selected > div { .react-tabs__tab-panel .react-tabs__tab-panel--selected>div {
color: var(--text); color: var(--text);
} }
@ -663,6 +665,7 @@ a:hover {
input::-webkit-input-placeholder { input::-webkit-input-placeholder {
color: var(--text); color: var(--text);
} }
input:focus::-webkit-input-placeholder { input:focus::-webkit-input-placeholder {
color: var(--text-hover); color: var(--text-hover);
} }
@ -671,6 +674,7 @@ input:focus::-webkit-input-placeholder {
input:-moz-placeholder { input:-moz-placeholder {
color: var(--text); color: var(--text);
} }
input:focus:-moz-placeholder { input:focus:-moz-placeholder {
color: var(--text-hover); color: var(--text-hover);
} }
@ -679,6 +683,7 @@ input:focus:-moz-placeholder {
input::-moz-placeholder { input::-moz-placeholder {
color: var(--text); color: var(--text);
} }
input:focus::-moz-placeholder { input:focus::-moz-placeholder {
color: var(--text-hover); color: var(--text-hover);
} }
@ -687,6 +692,7 @@ input:focus::-moz-placeholder {
input:-ms-input-placeholder { input:-ms-input-placeholder {
color: var(--text); color: var(--text);
} }
input:focus:-ms-input-placeholder { input:focus:-ms-input-placeholder {
color: var(--text-hover); color: var(--text-hover);
} }
@ -1057,12 +1063,14 @@ input[type=password] {
background-color: var(--button-color); background-color: var(--button-color);
cursor: pointer; cursor: pointer;
} }
.button:hover { .button:hover {
border-color: var(--button-color-hover); border-color: var(--button-color-hover);
background-color: var(--button-color-hover); background-color: var(--button-color-hover);
color: #fff; color: #fff;
text-decoration: none; text-decoration: none;
} }
.form-input:focus { .form-input:focus {
outline: 0; outline: 0;
border-color: #fff; border-color: #fff;

14
CSS/themes/readarr/readarr-base.css

@ -180,8 +180,8 @@ a:hover {
} }
[class*="CheckInput-primaryIsChecked-"] { [class*="CheckInput-primaryIsChecked-"] {
border-color: rgb(var(--accent-color))!important; border-color: rgb(var(--accent-color)) !important;
background-color: rgb(var(--accent-color))!important; background-color: rgb(var(--accent-color)) !important;
color: var(--label-text-color) !important; color: var(--label-text-color) !important;
} }
@ -289,7 +289,7 @@ a:hover {
[class*="PageSidebarItem-isActiveLink-"], [class*="PageSidebarItem-isActiveLink-"],
[class*="PageSidebarItem-isActiveLink-"]:hover, [class*="PageSidebarItem-isActiveLink-"]:hover,
[class*="PageSidebarItem-link-"]:focus { [class*="PageSidebarItem-link-"]:focus {
color: rgb(var(--accent-color))!important; color: rgb(var(--accent-color)) !important;
} }
[class*="PageSidebarItem-isActiveParentLink-"] { [class*="PageSidebarItem-isActiveParentLink-"] {
@ -692,6 +692,7 @@ a:hover {
input::-webkit-input-placeholder { input::-webkit-input-placeholder {
color: var(--text); color: var(--text);
} }
input:focus::-webkit-input-placeholder { input:focus::-webkit-input-placeholder {
color: var(--text-hover); color: var(--text-hover);
} }
@ -700,6 +701,7 @@ input:focus::-webkit-input-placeholder {
input:-moz-placeholder { input:-moz-placeholder {
color: var(--text); color: var(--text);
} }
input:focus:-moz-placeholder { input:focus:-moz-placeholder {
color: var(--text-hover); color: var(--text-hover);
} }
@ -708,6 +710,7 @@ input:focus:-moz-placeholder {
input::-moz-placeholder { input::-moz-placeholder {
color: var(--text); color: var(--text);
} }
input:focus::-moz-placeholder { input:focus::-moz-placeholder {
color: var(--text-hover); color: var(--text-hover);
} }
@ -716,6 +719,7 @@ input:focus::-moz-placeholder {
input:-ms-input-placeholder { input:-ms-input-placeholder {
color: var(--text); color: var(--text);
} }
input:focus:-ms-input-placeholder { input:focus:-ms-input-placeholder {
color: var(--text-hover); color: var(--text-hover);
} }
@ -860,7 +864,7 @@ input:focus:-ms-input-placeholder {
} }
/* SETTINGS */ /* SETTINGS */
[class*="Settings-link-"]{ [class*="Settings-link-"] {
color: var(--text-hover); color: var(--text-hover);
border-bottom: 1px solid rgb(var(--accent-color)); border-bottom: 1px solid rgb(var(--accent-color));
} }
@ -1059,12 +1063,14 @@ input[type=password] {
background-color: var(--button-color); background-color: var(--button-color);
cursor: pointer; cursor: pointer;
} }
.button:hover { .button:hover {
border-color: var(--button-color-hover); border-color: var(--button-color-hover);
background-color: var(--button-color-hover); background-color: var(--button-color-hover);
color: #fff; color: #fff;
text-decoration: none; text-decoration: none;
} }
.form-input:focus { .form-input:focus {
outline: 0; outline: 0;
border-color: #fff; border-color: #fff;

223
CSS/themes/requestrr/requestrr-base.css

@ -1,4 +1,3 @@
/* dP dP dP */ /* dP dP dP */
/* 88 88 88 */ /* 88 88 88 */
/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ /* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */
@ -23,6 +22,7 @@ body {
-moz-background-size: auto, cover; -moz-background-size: auto, cover;
-o-background-size: auto, cover; -o-background-size: auto, cover;
} }
.bg-default { .bg-default {
background-color: var(--main-bg-color) !important; background-color: var(--main-bg-color) !important;
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
@ -33,31 +33,56 @@ body {
-moz-background-size: auto, cover; -moz-background-size: auto, cover;
-o-background-size: auto, cover; -o-background-size: auto, cover;
} }
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--text-color); color: var(--text-color);
} }
.text-muted, .form-control-label {
.text-muted,
.form-control-label {
color: var(--text-color-faded) !important; color: var(--text-color-faded) !important;
} }
.navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show>.nav-link {
.navbar-light .navbar-nav .active>.nav-link,
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .show>.nav-link {
color: white; color: white;
} }
.navbar-light .navbar-nav .nav-link { .navbar-light .navbar-nav .nav-link {
color: var(--text-color); color: var(--text-color);
} }
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover {
color: var(--text-color-faded); color: var(--text-color-faded);
background: rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.08);
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.navbar-vertical.navbar-expand-md.fixed-left { .navbar-vertical.navbar-expand-md.fixed-left {
left: 0; left: 0;
border-width: 0 1px 0 0; border-width: 0 1px 0 0;
background: rgba(0, 0, 0, 0.25) !important; background: rgba(0, 0, 0, 0.25) !important;
}
} }
}
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
.navbar-collapse.collapsing, .navbar-collapse.show {
.navbar-collapse.collapsing,
.navbar-collapse.show {
background: var(--modal-bg-color); background: var(--modal-bg-color);
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
background-attachment: fixed, fixed; background-attachment: fixed, fixed;
@ -66,44 +91,57 @@ body {
-webkit-background-size: auto, cover; -webkit-background-size: auto, cover;
-moz-background-size: auto, cover; -moz-background-size: auto, cover;
-o-background-size: auto, cover; -o-background-size: auto, cover;
box-shadow: 0 50px 100px rgba(0, 0, 0, 0.1), 0 15px 35px rgba(0, 0, 0, 0.15), 0 5px 15px rgba(0,0,0,.1); box-shadow: 0 50px 100px rgba(0, 0, 0, 0.1), 0 15px 35px rgba(0, 0, 0, 0.15), 0 5px 15px rgba(0, 0, 0, .1);
} }
} }
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
.navbar-nav .nav-link { .navbar-nav .nav-link {
color: var(--text-color) !important; color: var(--text-color) !important;
}
} }
}
#sidenav-main > div > div > ul.mb-md-3.navbar-nav > li:nth-child(3) > a > i { #sidenav-main>div>div>ul.mb-md-3.navbar-nav>li:nth-child(3)>a>i {
color: white !important; color: white !important;
} }
.card-profile-image img, .shadow,.navbar-vertical {
.card-profile-image img,
.shadow,
.navbar-vertical {
box-shadow: none !important; box-shadow: none !important;
} }
.fade { .fade {
-webkit-transition: opacity .15s linear; -webkit-transition: opacity .15s linear;
transition: opacity .15s linear; transition: opacity .15s linear;
background: rgba(0, 0, 0, 0.15) !important; background: rgba(0, 0, 0, 0.15) !important;
} }
.bg-secondary { .bg-secondary {
background-color: rgba(0, 0, 0, 0)!important; background-color: rgba(0, 0, 0, 0) !important;
} }
.bg-gradient-default { .bg-gradient-default {
background: none !important; background: none !important;
} }
.card-profile-image img, .shadow {
box-shadow: 0 0 2rem 0 rgba(0,0,0,.15) !important; .card-profile-image img,
.shadow {
box-shadow: 0 0 2rem 0 rgba(0, 0, 0, .15) !important;
} }
.bg-white,.footer {
.bg-white,
.footer {
background-color: rgba(0, 0, 0, 0.25) !important; background-color: rgba(0, 0, 0, 0.25) !important;
} }
.footer { .footer {
padding-left: 15px; padding-left: 15px;
} }
/* Logo */ /* Logo */
#sidenav-main > div > a::before { #sidenav-main>div>a::before {
content: ""; content: "";
background: url('../static/media/requestrr.1e4722c9.svg') no-repeat; background: url('../static/media/requestrr.1e4722c9.svg') no-repeat;
background-size: 200px; background-size: 200px;
@ -111,16 +149,19 @@ body {
height: 36px; height: 36px;
display: block; display: block;
} }
.navbar-brand-img { .navbar-brand-img {
display: none; display: none;
} }
@media (max-width: 767.98px){
.navbar-collapse .collapse-brand img { @media (max-width: 767.98px) {
.navbar-collapse .collapse-brand img {
display: none; display: none;
}
} }
}
@media (max-width: 767.98px){ @media (max-width: 767.98px) {
#sidenav-main > div > div > div > div > div.collapse-brand.col-6 > a::before { #sidenav-main>div>div>div>div>div.collapse-brand.col-6>a::before {
content: ""; content: "";
background: url('../static/media/requestrr.1e4722c9.svg') no-repeat; background: url('../static/media/requestrr.1e4722c9.svg') no-repeat;
background-size: 200px; background-size: 200px;
@ -131,61 +172,82 @@ body {
} }
/* FORMS */ /* FORMS */
.form-control:disabled, .form-control[readonly] { .form-control:disabled,
.form-control[readonly] {
background-color: rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.1);
opacity: 1; opacity: 1;
border: 1px solid transparent; border: 1px solid transparent;
color: gray; color: gray;
} }
.form-control-alternative, .has-danger .form-control {
.form-control-alternative,
.has-danger .form-control {
background: rgba(0, 0, 0, 0.25); background: rgba(0, 0, 0, 0.25);
background-color: rgba(0, 0, 0, 0.25); background-color: rgba(0, 0, 0, 0.25);
} }
.form-control-alternative:focus { .form-control-alternative:focus {
background: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.5);
} }
.form-control:focus { .form-control:focus {
color: #fff; color: #fff;
} }
.has-success .form-control { .has-success .form-control {
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
} }
.form-control { .form-control {
color: var(--text-color); color: var(--text-color);
border: 1px solid transparent; border: 1px solid transparent;
} }
/* Drop down*/
.react-dropdown-select.dropdown .react-dropdown-select-item-selected { /* Drop down*/
.react-dropdown-select.dropdown .react-dropdown-select-item-selected {
background: var(--accent-color) !important; background: var(--accent-color) !important;
color: #fff!important; color: #fff !important;
} }
.react-dropdown-select.dropdown div[role=list] span {
.react-dropdown-select.dropdown div[role=list] span {
background-color: #fff; background-color: #fff;
color: #000000; color: #000000;
} }
.react-dropdown-select.dropdown div[role=list] span:focus, .react-dropdown-select.dropdown div[role=list] span:hover {
.react-dropdown-select.dropdown div[role=list] span:focus,
.react-dropdown-select.dropdown div[role=list] span:hover {
color: #000000; color: #000000;
background-color: rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.2);
} }
.react-dropdown-select.dropdown { .react-dropdown-select.dropdown {
color: var(--text-color); color: var(--text-color);
background-color: rgba(0, 0, 0, 0.25); background-color: rgba(0, 0, 0, 0.25);
} }
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
color: var(--text-color) !important; color: var(--text-color) !important;
} }
::-webkit-input-placeholder:focus { /* Chrome/Opera/Safari */
::-webkit-input-placeholder:focus {
/* Chrome/Opera/Safari */
color: blue !important; color: blue !important;
} }
::-moz-placeholder { /* Firefox 19+ */
::-moz-placeholder {
/* Firefox 19+ */
color: var(--text-color) !important; color: var(--text-color) !important;
} }
:-ms-input-placeholder { /* IE 10+ */
:-ms-input-placeholder {
/* IE 10+ */
color: var(--text-color) !important; color: var(--text-color) !important;
} }
:-moz-placeholder { /* Firefox 18- */
:-moz-placeholder {
/* Firefox 18- */
color: var(--text-color) !important; color: var(--text-color) !important;
} }
@ -194,38 +256,54 @@ body {
background-color: var(--accent-color); background-color: var(--accent-color);
border-color: var(--accent-color); border-color: var(--accent-color);
} }
.btn-primary, .btn-primary:hover {
.btn-primary,
.btn-primary:hover {
color: #fff; color: #fff;
background-color: var(--button-color); background-color: var(--button-color);
border-color: var(--button-color); border-color: var(--button-color);
} }
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle {
color: #fff; color: #fff;
background-color: var(--button-color-hover); background-color: var(--button-color-hover);
border-color: var(--button-color-hover); border-color: var(--button-color-hover);
} }
.btn-default, .btn-default:hover {
.btn-default,
.btn-default:hover {
color: #fff; color: #fff;
background-color: rgba(255, 255, 255, 0.25); background-color: rgba(255, 255, 255, 0.25);
border-color: transparent; border-color: transparent;
} }
.btn-default:not(:disabled):not(.disabled).active, .btn-default:not(:disabled):not(.disabled):active, .show>.btn-default.dropdown-toggle {
.btn-default:not(:disabled):not(.disabled).active,
.btn-default:not(:disabled):not(.disabled):active,
.show>.btn-default.dropdown-toggle {
color: #fff; color: #fff;
background-color: rgba(0, 0, 0, 0.26); background-color: rgba(0, 0, 0, 0.26);
border-color: transparent; border-color: transparent;
} }
.btn-default.disabled, .btn-default:disabled {
.btn-default.disabled,
.btn-default:disabled {
color: #fff; color: #fff;
background-color: rgba(255, 255, 255, 0.15); background-color: rgba(255, 255, 255, 0.15);
border-color: transparent; border-color: transparent;
opacity: .5; opacity: .5;
} }
.btn-info.disabled, .btn-info:disabled {
.btn-info.disabled,
.btn-info:disabled {
color: #fff; color: #fff;
background-color: var(--button-color); background-color: var(--button-color);
border-color: var(--button-color); border-color: var(--button-color);
} }
.btn-info, .btn-info:hover {
.btn-info,
.btn-info:hover {
color: #fff; color: #fff;
background-color: var(--button-color-hover); background-color: var(--button-color-hover);
border-color: var(--button-color-hover); border-color: var(--button-color-hover);
@ -243,40 +321,47 @@ body {
-moz-background-size: auto, cover; -moz-background-size: auto, cover;
-o-background-size: auto, cover; -o-background-size: auto, cover;
} }
@media (min-width: 1200px) { @media (min-width: 1200px) {
.separator-skew { .separator-skew {
height: 70px; height: 70px;
display: none; display: none;
}
} }
}
#root > div > div.mt--8.pb-5.container > div > div > div { #root>div>div.mt--8.pb-5.container>div>div>div {
background: rgba(0, 0, 0, 0.25) !important; background: rgba(0, 0, 0, 0.25) !important;
} }
#root > div > div.mt--8.pb-5.container > div > div > div > div > form > div:nth-child(1) > div > input,
#root > div > div.mt--8.pb-5.container > div > div > div > div > form > div:nth-child(2) > div > input, #root>div>div.mt--8.pb-5.container>div>div>div>div>form>div:nth-child(1)>div>input,
#root > div > div.mt--8.pb-5.container > div > div > div > div > form > div:nth-child(3) > div > input { #root>div>div.mt--8.pb-5.container>div>div>div>div>form>div:nth-child(2)>div>input,
#root>div>div.mt--8.pb-5.container>div>div>div>div>form>div:nth-child(3)>div>input {
background: rgba(0, 0, 0, .25) !important; background: rgba(0, 0, 0, .25) !important;
border: 10px solid transparent; border: 10px solid transparent;
} }
.input-group-text { .input-group-text {
color: var(--text-color); color: var(--text-color);
background-color: rgba(0, 0, 0, 0.25); background-color: rgba(0, 0, 0, 0.25);
border: 1px solid transparent !important; border: 1px solid transparent !important;
} }
.input-group-prepend { .input-group-prepend {
margin-right: 0px; margin-right: 0px;
} }
#root > div > div.header.bg-gradient-info.py-7.py-lg-8 > div.separator.separator-bottom.separator-skew.zindex-100 > svg > polygon {
display:none; #root>div>div.header.bg-gradient-info.py-7.py-lg-8>div.separator.separator-bottom.separator-skew.zindex-100>svg>polygon {
display: none;
} }
/* Scrollbar */ /* Scrollbar */
@media only screen and (min-width: 768px) { @media only screen and (min-width: 768px) {
html { html {
height: 100%; height: 100%;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
} }
body { body {
overflow-y: auto; overflow-y: auto;
height: 100%; height: 100%;
@ -290,23 +375,27 @@ body {
-o-background-size: auto, cover; -o-background-size: auto, cover;
} }
} }
::-webkit-scrollbar {
::-webkit-scrollbar {
width: 14px; width: 14px;
} }
::-webkit-scrollbar-thumb {
::-webkit-scrollbar-thumb {
min-height: 50px; min-height: 50px;
border: 3px solid transparent; border: 3px solid transparent;
border-radius: 8px; border-radius: 8px;
background-color: hsla(0,0%,100%,.2); background-color: hsla(0, 0%, 100%, .2);
background-clip: padding-box; background-clip: padding-box;
} }
::-webkit-scrollbar-track {
::-webkit-scrollbar-track {
background-color: transparent; background-color: transparent;
} }
::-webkit-scrollbar-thumb:hover {
::-webkit-scrollbar-thumb:hover {
min-height: 50px; min-height: 50px;
border: 3px solid transparent; border: 3px solid transparent;
border-radius: 8px; border-radius: 8px;
background-color: hsla(0,0%,100%,.5); background-color: hsla(0, 0%, 100%, .5);
background-clip: padding-box; background-clip: padding-box;
} }

2047
CSS/themes/rutorrent/rutorrent-base.css

File diff suppressed because it is too large

20
CSS/themes/sonarr/sonarr-base.css

@ -188,8 +188,8 @@ a:hover {
} }
[class*="CheckInput-primaryIsChecked-"] { [class*="CheckInput-primaryIsChecked-"] {
border-color: rgb(var(--accent-color))!important; border-color: rgb(var(--accent-color)) !important;
background-color: rgb(var(--accent-color))!important; background-color: rgb(var(--accent-color)) !important;
color: var(--label-text-color) !important; color: var(--label-text-color) !important;
} }
@ -261,7 +261,7 @@ a:hover {
[class*="PageSidebarItem-isActiveLink-"], [class*="PageSidebarItem-isActiveLink-"],
[class*="PageSidebarItem-isActiveLink-"]:hover, [class*="PageSidebarItem-isActiveLink-"]:hover,
[class*="PageSidebarItem-link-"]:focus { [class*="PageSidebarItem-link-"]:focus {
color: rgb(var(--accent-color))!important; color: rgb(var(--accent-color)) !important;
} }
[class*="PageSidebarItem-isActiveParentLink-"] { [class*="PageSidebarItem-isActiveParentLink-"] {
@ -281,7 +281,7 @@ a:hover {
/* SERIES PAGE */ /* SERIES PAGE */
/* SONARR SPECIFIC */ /* SONARR SPECIFIC */
[class*="SeriesIndexPoster-controls-"] { [class*="SeriesIndexPoster-controls-"] {
background-color: rgb(var(--accent-color))!important; background-color: rgb(var(--accent-color)) !important;
} }
/* OVERVIEW PAGE */ /* OVERVIEW PAGE */
@ -327,6 +327,7 @@ a:hover {
[class*="SeriesDetailsSeason-collapseButtonIcon-"] { [class*="SeriesDetailsSeason-collapseButtonIcon-"] {
color: var(--text) !important; color: var(--text) !important;
} }
[class*="SeriesDetailsSeason-actionButton-"]:hover, [class*="SeriesDetailsSeason-actionButton-"]:hover,
[class*="SeriesDetailsSeason-collapseButtonIcon-"]:hover { [class*="SeriesDetailsSeason-collapseButtonIcon-"]:hover {
color: var(--text-hover) !important; color: var(--text-hover) !important;
@ -424,12 +425,12 @@ a:hover {
} }
[class*="IconButton-button-"]:hover, [class*="IconButton-button-"]:hover,
[class*="Label-small-"] [class*="IconButton-button-"]{ [class*="Label-small-"] [class*="IconButton-button-"] {
background-color: transparent; background-color: transparent;
color: var(--label-text-color); color: var(--label-text-color);
} }
[class*="SeriesIndexPoster-action-"] .fa-search:hover{ [class*="SeriesIndexPoster-action-"] .fa-search:hover {
background-color: transparent; background-color: transparent;
color: var(--label-text-color) !important; color: var(--label-text-color) !important;
} }
@ -588,6 +589,7 @@ a:hover {
-o-background-size: auto, cover; -o-background-size: auto, cover;
color: var(--text); color: var(--text);
} }
[class*="EnhancedSelectInputOption-isSelected-"], [class*="EnhancedSelectInputOption-isSelected-"],
[class*="EnhancedSelectInputOption-isSelected-"]:hover { [class*="EnhancedSelectInputOption-isSelected-"]:hover {
background-color: rgba(255, 255, 255, 0.20) !important; background-color: rgba(255, 255, 255, 0.20) !important;
@ -644,6 +646,7 @@ a:hover {
input::-webkit-input-placeholder { input::-webkit-input-placeholder {
color: var(--text); color: var(--text);
} }
input:focus::-webkit-input-placeholder { input:focus::-webkit-input-placeholder {
color: var(--text-hover); color: var(--text-hover);
} }
@ -652,6 +655,7 @@ input:focus::-webkit-input-placeholder {
input:-moz-placeholder { input:-moz-placeholder {
color: var(--text); color: var(--text);
} }
input:focus:-moz-placeholder { input:focus:-moz-placeholder {
color: var(--text-hover); color: var(--text-hover);
} }
@ -660,6 +664,7 @@ input:focus:-moz-placeholder {
input::-moz-placeholder { input::-moz-placeholder {
color: var(--text); color: var(--text);
} }
input:focus::-moz-placeholder { input:focus::-moz-placeholder {
color: var(--text-hover); color: var(--text-hover);
} }
@ -668,6 +673,7 @@ input:focus::-moz-placeholder {
input:-ms-input-placeholder { input:-ms-input-placeholder {
color: var(--text); color: var(--text);
} }
input:focus:-ms-input-placeholder { input:focus:-ms-input-placeholder {
color: var(--text-hover); color: var(--text-hover);
} }
@ -1030,12 +1036,14 @@ input[type=password] {
background-color: var(--button-color); background-color: var(--button-color);
cursor: pointer; cursor: pointer;
} }
.button:hover { .button:hover {
border-color: var(--button-color-hover); border-color: var(--button-color-hover);
background-color: var(--button-color-hover); background-color: var(--button-color-hover);
color: #fff; color: #fff;
text-decoration: none; text-decoration: none;
} }
.form-input:focus { .form-input:focus {
outline: 0; outline: 0;
border-color: #fff; border-color: #fff;

77
CSS/themes/synclounge/synclounge-base.css

@ -1,4 +1,3 @@
/* dP dP dP */ /* dP dP dP */
/* 88 88 88 */ /* 88 88 88 */
/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ /* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */
@ -12,39 +11,53 @@
/* https://github.com/gilbN/theme.park */ /* https://github.com/gilbN/theme.park */
main { main {
background: var(--main-bg-color);background-repeat: repeat, no-repeat; background: var(--main-bg-color);
background-attachment: fixed, fixed; background-repeat: repeat, no-repeat;
background-position: center center, center center; background-attachment: fixed, fixed;
background-size: auto, cover; background-position: center center, center center;
-webkit-background-size: auto, cover; background-size: auto, cover;
-moz-background-size: auto, cover; -webkit-background-size: auto, cover;
-o-background-size: auto, cover; -moz-background-size: auto, cover;
-o-background-size: auto, cover;
} }
h4 { h4 {
color: #ffffff; color: #ffffff;
} }
.v-toolbar { .v-toolbar {
background: transparent !important; background: transparent !important;
box-shadow: none; box-shadow: none;
} }
.v-toolbar__content, .v-toolbar__extension {
.v-toolbar__content,
.v-toolbar__extension {
background-color: rgba(0, 0, 0, 0.6) !important; background-color: rgba(0, 0, 0, 0.6) !important;
} }
p a { p a {
color: var(--accent-color) !important; color: var(--accent-color) !important;
} }
.application .theme--dark.v-card, .theme--dark .v-card .primary--text {
.application .theme--dark.v-card,
.theme--dark .v-card .primary--text {
color: var(--accent-color) !important; color: var(--accent-color) !important;
} }
.application .theme--dark.v-card, .theme--dark .v-card .accent--text {
.application .theme--dark.v-card,
.theme--dark .v-card .accent--text {
color: var(--accent-color) !important; color: var(--accent-color) !important;
} }
.application .theme--dark.v-card, .theme--dark .v-card .primary {
.application .theme--dark.v-card,
.theme--dark .v-card .primary {
color: var(--accent-color) !important; color: var(--accent-color) !important;
} }
.flex.xs12 a { .flex.xs12 a {
color: var(--accent-color); color: var(--accent-color);
} }
.v-list__tile { .v-list__tile {
color: #fff !important; color: #fff !important;
} }
@ -58,24 +71,38 @@ p a {
background-color: var(--default-button-color) !important; background-color: var(--default-button-color) !important;
border-color: var(--default-button-color) !important; border-color: var(--default-button-color) !important;
} }
.v-input__control .v-input__slot .primary--text input, .primary--text textarea {
.v-input__control .v-input__slot .primary--text input,
.primary--text textarea {
caret-color: var(--accent-color) !important; caret-color: var(--accent-color) !important;
} }
.v-input input:active, .v-input input:focus, .v-input textarea:active, .v-input textarea:focus .primary--text input, .primary--text textarea {
.v-input input:active,
.v-input input:focus,
.v-input textarea:active,
.v-input textarea:focus .primary--text input,
.primary--text textarea {
caret-color: var(--accent-color) !important; caret-color: var(--accent-color) !important;
} }
.application .theme--dark.v-btn:not(.v-btn--icon):not(.v-btn--flat), .theme--dark .v-btn:not(.v-btn--icon):not(.v-btn--flat) { .application .theme--dark.v-btn:not(.v-btn--icon):not(.v-btn--flat),
.theme--dark .v-btn:not(.v-btn--icon):not(.v-btn--flat) {
background-color: var(--default-button-color) !important; background-color: var(--default-button-color) !important;
} }
.v-btn__content { .v-btn__content {
color: #fff; color: #fff;
} }
.v-btn--active:before, .v-btn:focus:before, .v-btn:hover:before {
.v-btn--active:before,
.v-btn:focus:before,
.v-btn:hover:before {
background-color: white; background-color: white;
} }
.application .theme--dark.v-card, .theme--dark .v-card {
.application .theme--dark.v-card,
.theme--dark .v-card {
background: var(--modal-bg-color); background: var(--modal-bg-color);
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
background-attachment: fixed, fixed; background-attachment: fixed, fixed;
@ -85,23 +112,32 @@ p a {
-moz-background-size: auto, cover; -moz-background-size: auto, cover;
-o-background-size: auto, cover; -o-background-size: auto, cover;
} }
.flex.md3 .application .theme--dark.v-card, .theme--dark .v-card {
.flex.md3 .application .theme--dark.v-card,
.theme--dark .v-card {
background: rgba(255, 255, 255, 0.10) !important; background: rgba(255, 255, 255, 0.10) !important;
color: #fff; color: #fff;
} }
.theme--dark.v-expansion-panels .v-expansion-panel { .theme--dark.v-expansion-panels .v-expansion-panel {
background-color: transparent; background-color: transparent;
color: #fff; color: #fff;
} }
.theme--dark.v-text-field--solo>.v-input__control>.v-input__slot { .theme--dark.v-text-field--solo>.v-input__control>.v-input__slot {
background: rgb(0 0 0 / 0.50); background: rgb(0 0 0 / 0.50);
} }
.flex.md3 .application .theme--dark.v-list, .theme--dark .v-list {
.flex.md3 .application .theme--dark.v-list,
.theme--dark .v-list {
background: rgba(255, 255, 255, 0.10) !important; background: rgba(255, 255, 255, 0.10) !important;
} }
flex xs12 .flex.md3 .application .theme--dark.v-list, .theme--dark .v-list {
flex xs12 .flex.md3 .application .theme--dark.v-list,
.theme--dark .v-list {
background: inherit !important; background: inherit !important;
} }
.v-navigation-drawer { .v-navigation-drawer {
background: var(--main-bg-color) !important; background: var(--main-bg-color) !important;
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
@ -124,6 +160,7 @@ flex xs12 .flex.md3 .application .theme--dark.v-list, .theme--dark .v-list {
-moz-background-size: auto, cover; -moz-background-size: auto, cover;
-o-background-size: auto, cover; -o-background-size: auto, cover;
} }
.menuable__content__active { .menuable__content__active {
background: var(--modal-bg-color); background: var(--modal-bg-color);
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;

710
CSS/themes/tautulli/tautulli-base.css

File diff suppressed because it is too large

84
CSS/themes/thelounge/thelounge-base.css

@ -1,4 +1,3 @@
/* dP dP dP */ /* dP dP dP */
/* 88 88 88 */ /* 88 88 88 */
/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ /* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */
@ -14,12 +13,14 @@
#chat .userlist .names { #chat .userlist .names {
background: rgba(0, 0, 0, 0.25); background: rgba(0, 0, 0, 0.25);
} }
#chat .user-mode:before { #chat .user-mode:before {
background: rgba(0, 0, 0, 0.25); background: rgba(0, 0, 0, 0.25);
} }
@media (max-width: 768px) { @media (max-width: 768px) {
#chat .userlist .names { #chat .userlist .names {
box-shadow: 0 0 25px 0 rgba(0,0,0,.5); box-shadow: 0 0 25px 0 rgba(0, 0, 0, .5);
background: var(--window-bg-color); background: var(--window-bg-color);
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
background-attachment: fixed, fixed; background-attachment: fixed, fixed;
@ -29,15 +30,20 @@
-moz-background-size: auto, cover; -moz-background-size: auto, cover;
-o-background-size: auto, cover; -o-background-size: auto, cover;
} }
} }
@media (max-width: 768px) { @media (max-width: 768px) {
#viewport.menu-dragging #sidebar, #viewport.menu-open #sidebar {
box-shadow: 0 0 25px 0 rgba(0,0,0,.5); #viewport.menu-dragging #sidebar,
#viewport.menu-open #sidebar {
box-shadow: 0 0 25px 0 rgba(0, 0, 0, .5);
background: rgba(0, 0, 0, 0.85); background: rgba(0, 0, 0, 0.85);
} }
} }
#chat .chan .notice .user, #chat .notice .content, #chat .notice .time {
#chat .chan .notice .user,
#chat .notice .content,
#chat .notice .time {
color: var(--date-marker-color) !important; color: var(--date-marker-color) !important;
} }
@ -45,27 +51,39 @@
background: var(--theme-accent); background: var(--theme-accent);
color: #f3f3f3; color: #f3f3f3;
} }
#form { #form {
background-color: rgba(0, 0, 0, 0.45); background-color: rgba(0, 0, 0, 0.45);
border-color: #0086ff00; border-color: #0086ff00;
color: var(--body-color); color: var(--body-color);
} }
#sidebar .active, #sidebar .active:hover {
#sidebar .active,
#sidebar .active:hover {
background-color: rgba(0, 0, 0, 0.25); background-color: rgba(0, 0, 0, 0.25);
} }
#chat .msg.motd .text, code, .irc-monospace {
#chat .msg.motd .text,
code,
.irc-monospace {
background: rgba(0, 0, 0, 0.45); background: rgba(0, 0, 0, 0.45);
color: #f3f3f3; color: #f3f3f3;
} }
#chat .content, #windows #chat .header, #chat .user-mode::before, #chat .userlist {
#chat .content,
#windows #chat .header,
#chat .user-mode::before,
#chat .userlist {
border-color: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.08);
} }
#chat .msg[data-type=motd] .text { #chat .msg[data-type=motd] .text {
background: rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.08);
} }
/* Dropdown menu */ /* Dropdown menu */
#context-menu, .textcomplete-menu { #context-menu,
.textcomplete-menu {
background: var(--body-bg-color); background: var(--body-bg-color);
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
background-attachment: fixed, fixed; background-attachment: fixed, fixed;
@ -76,45 +94,74 @@
-o-background-size: auto, cover; -o-background-size: auto, cover;
/* color: white !important; */ /* color: white !important; */
} }
.context-menu-item, .textcomplete-item {
.context-menu-item,
.textcomplete-item {
color: var(--body-color); color: var(--body-color);
} }
#chat .userlist .user.active, .context-menu-item:focus, .context-menu-item:hover, .textcomplete-item:focus, .textcomplete-item:hover, .textcomplete-menu .active {
#chat .userlist .user.active,
.context-menu-item:focus,
.context-menu-item:hover,
.textcomplete-item:focus,
.textcomplete-item:hover,
.textcomplete-menu .active {
background-color: rgba(255, 255, 255, 0.08); background-color: rgba(255, 255, 255, 0.08);
transition: none; transition: none;
outline: 0; outline: 0;
} }
#chat.table.ignore-list td, #chat table.ban-list td, #chat table.ban-list th, #chat table.channel-list td, #chat table.channel-list th, #chat table.ignore-list th, #chat table.invite-list td, #chat table.invite-list th {
#chat.table.ignore-list td,
#chat table.ban-list td,
#chat table.ban-list th,
#chat table.channel-list td,
#chat table.channel-list th,
#chat table.ignore-list th,
#chat table.invite-list td,
#chat table.invite-list th {
padding: 5px; padding: 5px;
vertical-align: top; vertical-align: top;
border-bottom: 1px solid rgba(255, 255, 255, 0.25); border-bottom: 1px solid rgba(255, 255, 255, 0.25);
} }
#chat .userlist .count { #chat .userlist .count {
background-color: rgba(0, 0, 0, 0.6); background-color: rgba(0, 0, 0, 0.6);
} }
#footer button:hover, #sidebar .chan:hover {
#footer button:hover,
#sidebar .chan:hover {
background-color: rgba(255, 255, 255, 0.08); background-color: rgba(255, 255, 255, 0.08);
} }
#settings .extra-help:before { #settings .extra-help:before {
content: "\F059"; content: "\F059";
color: var(--body-color); color: var(--body-color);
} }
#windows .window h2 { #windows .window h2 {
color: var(--body-color); color: var(--body-color);
} }
#windows .window h2 { #windows .window h2 {
border-bottom: 1px solid rgba(255, 255, 255, 0.25); border-bottom: 1px solid rgba(255, 255, 255, 0.25);
} }
.input:not(:disabled):focus, .input:not(:disabled):hover {
.input:not(:disabled):focus,
.input:not(:disabled):hover {
border-color: #ffffff; border-color: #ffffff;
} }
.btn:active, .btn:focus, .input:focus {
.btn:active,
.btn:focus,
.input:focus {
outline: 0; outline: 0;
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5);
} }
.btn { .btn {
color: inherit; color: inherit;
} }
.mentions-popup { .mentions-popup {
background: var(--body-bg-color); background: var(--body-bg-color);
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
@ -124,8 +171,9 @@
-webkit-background-size: auto, cover; -webkit-background-size: auto, cover;
-moz-background-size: auto, cover; -moz-background-size: auto, cover;
-o-background-size: auto, cover; -o-background-size: auto, cover;
} }
#chat .toggle-content{
#chat .toggle-content {
background: var(--highlight-bg-color); background: var(--highlight-bg-color);
} }

836
CSS/themes/transmission/transmission-base.css

File diff suppressed because it is too large

33
CSS/themes/unraid/unraid-base.css

@ -13,6 +13,7 @@
* { * {
outline: none; outline: none;
} }
body { body {
color: var(--text); color: var(--text);
background: var(--main-bg-color); background: var(--main-bg-color);
@ -25,12 +26,18 @@ body {
-o-background-size: auto, cover; -o-background-size: auto, cover;
} }
h1,h2,h3,h4,h5,h6,strong { h1,
color: var(--text-hover); h2,
h3,
h4,
h5,
h6,
strong {
color: var(--text-hover);
} }
i.fa.fa-fw { i.fa.fa-fw {
color: var(--text-hover)!important; color: var(--text-hover) !important;
} }
a, a,
@ -131,9 +138,11 @@ span.inner {
width: 137px !important; width: 137px !important;
} }
thead.sortable,thead,table.tablesorter thead tr th { thead.sortable,
thead,
table.tablesorter thead tr th {
color: var(--text-hover); color: var(--text-hover);
} }
.sys, .sys,
.usage-disk, .usage-disk,
@ -145,10 +154,11 @@ thead.sortable,thead,table.tablesorter thead tr th {
background-color: #4caf50 background-color: #4caf50
} }
#db-box3 > tbody.smb.share.share1.sortable > tr > td > a { #db-box3>tbody.smb.share.share1.sortable>tr>td>a {
color: var(--link-color); color: var(--link-color);
} }
#db-box3 > tbody.smb.share.share1.sortable > tr > td > a:hover {
#db-box3>tbody.smb.share.share1.sortable>tr>td>a:hover {
color: var(--link-color-hover); color: var(--link-color-hover);
} }
@ -363,6 +373,7 @@ div.tab [type=radio]+label {
background-color: rgb(0 0 0 / 10%) !important; background-color: rgb(0 0 0 / 10%) !important;
border-color: rgb(0 0 0 / 25%) !important; border-color: rgb(0 0 0 / 25%) !important;
} }
.ca_holderDocker::before { .ca_holderDocker::before {
color: rgb(255 255 255 / 40%) !important; color: rgb(255 255 255 / 40%) !important;
} }
@ -370,17 +381,19 @@ div.tab [type=radio]+label {
.selectedMenu { .selectedMenu {
color: rgb(var(--accent-color)) !important; color: rgb(var(--accent-color)) !important;
} }
.hoverMenu { .hoverMenu {
color: var(--link-color-hover) !important; color: var(--link-color-hover) !important;
} }
.ca_descriptionArea:hover,a.ca_repoPopup:hover { .ca_descriptionArea:hover,
a.ca_repoPopup:hover {
color: var(--button-text-hover) !important; color: var(--button-text-hover) !important;
} }
.ca_templatesDisplay .ca_holderFav { .ca_templatesDisplay .ca_holderFav {
background: rgb(var(--accent-color),.7) !important; background: rgb(var(--accent-color), .7) !important;
color: var( --label-text-color) !important; color: var(--label-text-color) !important;
} }
a.ca_appreadmore:hover { a.ca_appreadmore:hover {

26
CSS/themes/vuetorrent/vuetorrent-base.css

@ -121,7 +121,7 @@ p,
background-color: rgba(0, 0, 0, .25) !important; background-color: rgba(0, 0, 0, .25) !important;
} }
.v-app-bar.v-app-bar--is-scrolled{ .v-app-bar.v-app-bar--is-scrolled {
background: var(--main-bg-color) !important; background: var(--main-bg-color) !important;
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
background-attachment: fixed, fixed; background-attachment: fixed, fixed;
@ -327,17 +327,19 @@ p,
.v-application .torrent-paused-color .caption, .v-application .torrent-paused-color .caption,
.v-application .torrent-seeding-color .caption, .v-application .torrent-seeding-color .caption,
.v-application .torrent-done-color .caption { .v-application .torrent-done-color .caption {
color: #ccc !important; color: #ccc !important;
} }
.v-application .torrent-paused-color { .v-application .torrent-paused-color {
background-color: rgb(156 163 175 / 70%) !important; background-color: rgb(156 163 175 / 70%) !important;
border-color: rgb(156 163 175 / 70%) !important; border-color: rgb(156 163 175 / 70%) !important;
} }
.v-application .torrent-seeding-color { .v-application .torrent-seeding-color {
background-color: rgba(78, 205, 230, .7) !important; background-color: rgba(78, 205, 230, .7) !important;
border-color: rgba(78, 205, 230, .7) !important; border-color: rgba(78, 205, 230, .7) !important;
} }
.v-application .torrent-done-color { .v-application .torrent-done-color {
background-color: rgba(22, 87, 62, .7) !important; background-color: rgba(22, 87, 62, .7) !important;
border-color: rgba(22, 87, 62, .7) !important; border-color: rgba(22, 87, 62, .7) !important;
@ -398,14 +400,14 @@ background-color: rgb(156 163 175 / 70%) !important;
.v-menu__content .theme--dark.theme--dark.v-list, .v-menu__content .theme--dark.theme--dark.v-list,
.v-menu__content .theme--light.theme--light.v-list { .v-menu__content .theme--light.theme--light.v-list {
background: var(--modal-bg-color) !important; background: var(--modal-bg-color) !important;
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
background-attachment: fixed, fixed; background-attachment: fixed, fixed;
background-position: center center, center center; background-position: center center, center center;
background-size: auto, cover; background-size: auto, cover;
-webkit-background-size: auto, cover; -webkit-background-size: auto, cover;
-moz-background-size: auto, cover; -moz-background-size: auto, cover;
-o-background-size: auto, cover; -o-background-size: auto, cover;
} }
.theme--dark.v-icon, .theme--dark.v-icon,
@ -415,7 +417,7 @@ background-size: auto, cover;
.theme--light.v-divider, .theme--light.v-divider,
.theme--dark.v-divider { .theme--dark.v-divider {
border-color: rgba(255, 255, 255,.2) !important; border-color: rgba(255, 255, 255, .2) !important;
} }
/* TABLE */ /* TABLE */

24
CSS/themes/xbackbone/xbackbone-base.css

@ -82,9 +82,11 @@ body,
.col-form-label { .col-form-label {
color: var(--text-hover); color: var(--text-hover);
} }
.navbar-dark .navbar-nav .nav-link.active { .navbar-dark .navbar-nav .nav-link.active {
color: rgb(var(--accent-color)); color: rgb(var(--accent-color));
} }
.card-header { .card-header {
color: rgb(var(--accent-color)); color: rgb(var(--accent-color));
} }
@ -116,10 +118,13 @@ a:hover {
.bg-primary { .bg-primary {
background: rgba(0, 0, 0, .15) !important; background: rgba(0, 0, 0, .15) !important;
} }
.navbar-dark .navbar-brand { .navbar-dark .navbar-brand {
color: rgb(var(--accent-color)); color: rgb(var(--accent-color));
} }
.navbar-dark .navbar-brand:focus, .navbar-dark .navbar-brand:hover {
.navbar-dark .navbar-brand:focus,
.navbar-dark .navbar-brand:hover {
color: var(--accent-color-hover); color: var(--accent-color-hover);
} }
@ -191,16 +196,23 @@ a:hover {
.btn-primary:hover, .btn-primary:hover,
.btn-outline-dark:hover, .btn-outline-dark:hover,
.btn-outline-secondary:hover, .btn-outline-secondary:hover,
.btn-check:focus+.btn-primary, .btn-primary:focus { .btn-check:focus+.btn-primary,
.btn-primary:focus {
color: var(--button-text-hover); color: var(--button-text-hover);
background-color: var(--button-color-hover); background-color: var(--button-color-hover);
border-color: var(--button-color-hover); border-color: var(--button-color-hover);
} }
.btn-check:active+.btn-primary:focus, .btn-check:checked+.btn-primary:focus,
.btn-primary.active:focus, .btn-primary:active:focus, .show>.btn-primary.dropdown-toggle:focus, .btn-check:active+.btn-primary:focus,
.btn-check:focus+.btn-primary, .btn-primary:focus { .btn-check:checked+.btn-primary:focus,
box-shadow: 0 0 0 0.25rem rgba(var(--accent-color),.5); .btn-primary.active:focus,
.btn-primary:active:focus,
.show>.btn-primary.dropdown-toggle:focus,
.btn-check:focus+.btn-primary,
.btn-primary:focus {
box-shadow: 0 0 0 0.25rem rgba(var(--accent-color), .5);
} }
.btn-outline-primary, .btn-outline-primary,
.btn-outline-info { .btn-outline-info {
color: var(--button-color); color: var(--button-color);

Loading…
Cancel
Save